diff --git a/src/components/pages/framework/code-section/code-section.jsx b/src/components/pages/framework/code-section/code-section.jsx new file mode 100644 index 00000000..3028502d --- /dev/null +++ b/src/components/pages/framework/code-section/code-section.jsx @@ -0,0 +1,197 @@ +import clsx from 'clsx'; +import PropTypes from 'prop-types'; +import React from 'react'; +import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'; +import javascript from 'react-syntax-highlighter/dist/esm/languages/prism/javascript'; + +import Button from 'components/shared/button'; +import Heading from 'components/shared/heading'; + +import dots from './images/dots.svg'; + +SyntaxHighlighter.registerLanguage('javascript', javascript); + +const CodeSection = ({ + className, + title, + description, + button, + containerClassName, + textContentClassName, + code, + codePosition, + codeClassName, + isPriorityImageLoading, + btnStyle, +}) => ( +
+
+
+
+
+
+ + {code} + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ + {title} + +

+ {description} +

+ {button && ( + + )} +
+
+
+); + +CodeSection.propTypes = { + title: PropTypes.string.isRequired, + description: PropTypes.string.isRequired, + className: PropTypes.string, + containerClassName: PropTypes.string, + textContentClassName: PropTypes.string, + codeClassName: PropTypes.string, + button: PropTypes.shape({ + label: PropTypes.string.isRequired, + link: PropTypes.string.isRequired, + rel: PropTypes.string, + target: PropTypes.string, + }), + code: PropTypes.string.isRequired, + codePosition: PropTypes.oneOf(['left', 'right']), + isPriorityImageLoading: PropTypes.bool, + btnStyle: PropTypes.oneOf(['gray-outline', 'white-filled']), +}; + +CodeSection.defaultProps = { + className: '', + containerClassName: '', + textContentClassName: '', + codeClassName: '', + button: null, + codePosition: 'left', + isPriorityImageLoading: false, + btnStyle: 'gray-outline', +}; + +export default CodeSection; diff --git a/src/components/pages/framework/code-section/images/dots.svg b/src/components/pages/framework/code-section/images/dots.svg new file mode 100644 index 00000000..847124a4 --- /dev/null +++ b/src/components/pages/framework/code-section/images/dots.svg @@ -0,0 +1,1202 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/pages/framework/code-section/index.js b/src/components/pages/framework/code-section/index.js new file mode 100644 index 00000000..e8381a6f --- /dev/null +++ b/src/components/pages/framework/code-section/index.js @@ -0,0 +1,3 @@ +import CodeSection from './code-section'; + +export default CodeSection; diff --git a/src/components/shared/bento/bento.jsx b/src/components/shared/bento/bento.jsx new file mode 100644 index 00000000..d3920f46 --- /dev/null +++ b/src/components/shared/bento/bento.jsx @@ -0,0 +1,66 @@ +import clsx from 'clsx'; +import React from 'react'; + +const Bento = ({ className, title, titleClassName, description, cards, cardsListClassName }) => ( +
+
+

+ {description && ( +

+ {description} +

+ )} +
    + {cards.map(({ title, description, className, image, imageMobile }, index) => ( +
  • +
    +

    + {title} +

    +

    +

    + {image && image} + {imageMobile && imageMobile} +
    • + ))} +
+
+
+
+

+); + +export default Bento; diff --git a/src/components/shared/bento/images/code-mobile.jpg b/src/components/shared/bento/images/code-mobile.jpg new file mode 100644 index 00000000..45a172ae Binary files /dev/null and b/src/components/shared/bento/images/code-mobile.jpg differ diff --git a/src/components/shared/bento/images/code.jpg b/src/components/shared/bento/images/code.jpg new file mode 100644 index 00000000..b810771b Binary files /dev/null and b/src/components/shared/bento/images/code.jpg differ diff --git a/src/components/shared/bento/images/code.png b/src/components/shared/bento/images/code.png new file mode 100644 index 00000000..1117d57c Binary files /dev/null and b/src/components/shared/bento/images/code.png differ diff --git a/src/components/shared/bento/images/debug-mobile.jpg b/src/components/shared/bento/images/debug-mobile.jpg new file mode 100644 index 00000000..b44aa5dd Binary files /dev/null and b/src/components/shared/bento/images/debug-mobile.jpg differ diff --git a/src/components/shared/bento/images/debug.jpg b/src/components/shared/bento/images/debug.jpg new file mode 100644 index 00000000..1bbd4b39 Binary files /dev/null and b/src/components/shared/bento/images/debug.jpg differ diff --git a/src/components/shared/bento/images/git-notification-mobile.jpg b/src/components/shared/bento/images/git-notification-mobile.jpg new file mode 100644 index 00000000..30440edc Binary files /dev/null and b/src/components/shared/bento/images/git-notification-mobile.jpg differ diff --git a/src/components/shared/bento/images/git-notification.jpg b/src/components/shared/bento/images/git-notification.jpg new file mode 100644 index 00000000..3e4ea588 Binary files /dev/null and b/src/components/shared/bento/images/git-notification.jpg differ diff --git a/src/components/shared/bento/images/type-safe-mobile.jpg b/src/components/shared/bento/images/type-safe-mobile.jpg new file mode 100644 index 00000000..954cf76e Binary files /dev/null and b/src/components/shared/bento/images/type-safe-mobile.jpg differ diff --git a/src/components/shared/bento/images/type-safe.jpg b/src/components/shared/bento/images/type-safe.jpg new file mode 100644 index 00000000..37fdbac6 Binary files /dev/null and b/src/components/shared/bento/images/type-safe.jpg differ diff --git a/src/components/shared/bento/index.js b/src/components/shared/bento/index.js new file mode 100644 index 00000000..ffbee4f4 --- /dev/null +++ b/src/components/shared/bento/index.js @@ -0,0 +1,3 @@ +import Bento from './bento'; + +export default Bento; diff --git a/src/components/shared/reusable-sections/code-section/code-section.jsx b/src/components/shared/reusable-sections/code-section/code-section.jsx index cf52c7d7..57e3e7be 100644 --- a/src/components/shared/reusable-sections/code-section/code-section.jsx +++ b/src/components/shared/reusable-sections/code-section/code-section.jsx @@ -11,10 +11,34 @@ import dots from './images/dots.svg'; SyntaxHighlighter.registerLanguage('javascript', javascript); -const CodeSection = ({ title, description, button, code, codePosition }) => ( -
-
-
+const CodeSection = ({ + className, + title, + description, + button, + containerClassName, + textContentClassName, + code, + codePosition, + codeClassName, + isPriorityImageLoading, + btnStyle, +}) => ( +
+
+
( alt="" width={482} height={206} + loading={isPriorityImageLoading ? 'eager' : 'lazy'} />
(
( {button && (
+ } + imageClassName="relative w-full h-full !overflow-visible" + button={{ + label: 'Complete Control', + link: 'https://docs.novu.co/framework/overview?utm_campaign?ws_framework', + }} + theme="imageRight" + /> + + +
+ } + imageClassName="relative w-full h-full !overflow-visible" + button={{ + label: 'Do More With Controls', + link: 'https://docs.novu.co/framework/controls?utm_campaign?ws_framework', + }} + /> + + +
+ } + imageClassName="relative w-full h-full !overflow-visible" + button={{ + label: 'Reuse my content', + link: 'https://docs.novu.co/framework/content/react-email', + }} + theme="imageRight" + /> + + +
+ } + imageClassName="relative w-full h-full !overflow-visible" + button={{ + label: 'Local Studio', + link: 'https://docs.novu.co/framework/studio?utm_campaign=ws_framework', + }} + /> + + +); + +export default FrameworkPage; + +export const Head = () => { + const pageMetadata = { + slug: '/framework/', + title: 'Complete Control Over Notifications with Novu Framework', + description: + 'Novu Framework gives developers code-backed workflows, full control, and seamless integration, while empowering non-technical teams to make safe updates.', + }; + return ; +}; diff --git a/src/styles/global.css b/src/styles/global.css index 144f1069..21bbfbc9 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -12,6 +12,31 @@ color-scheme: light; } + .code-block-bg { + background: linear-gradient(135deg, #16222e, #080c1a 54%, #05050b), + radial-gradient( + circle at 41.5% 0%, + rgba(135, 188, 195, 0.15), + #1e2438 49%, + rgba(30, 36, 56, 0.5) 100% + ), + radial-gradient( + circle at 22.5% 5.4%, + #ffffff, + #bee0ff 33.2%, + rgba(134, 204, 255, 0.5) 50.5%, + rgba(67, 64, 74, 0) 100% + ); + } + + .border-linear { + @apply border border-transparent; + mask: + linear-gradient(#fff 0 0) padding-box, + linear-gradient(#fff 0 0); + mask-composite: exclude; + } + .menu-btn:focus-within + .menu, .menu-btn:has(+ .menu button:focus-visible) + .menu { visibility: visible; diff --git a/tailwind.config.js b/tailwind.config.js index 4593361e..d0bddf0d 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -135,8 +135,16 @@ module.exports = { 'linear-gradient(168.3deg, #1B2137 6.29%, #111522 91.42%), radial-gradient(67.44% 45.73% at 27.61% 0%, rgba(194, 209, 255, 0.09) 0%, rgba(194, 209, 255, 0) 76.65%)', 'code-block-border': 'radial-gradient(83.26% 102.85% at 61.61% -2.85%, #6B7DB3 6.8%, #1A1E2E 65.55%)', + 'code-underlay-border': + 'radial-gradient(83.26% 102.85% at 61.61% -2.85%, rgba(135, 188, 195, 0.15) 0%, #1E2438 49%, #05050b 100%)', 'testimonials-text': 'linear-gradient(98.67deg, rgba(255, 255, 255, 0.85) 9.63%, rgba(255, 255, 255, 0.6) 113.79%)', + 'code-underlay-green': + 'linear-gradient(168.3deg, #1B2137 6.29%, #111522 91.42%), radial-gradient(67.44% 45.73% at 27.61% 0%, rgba(194, 209, 255, 0.09) 0%, rgba(194, 209, 255, 0) 76.65%)', + 'inside-code-underlay-green': + 'radial-gradient(78.44% 46.25% at 27.61% 0%, rgba(194, 229, 255, 0.08) 0%, rgba(194, 240, 255, 0.00) 76.65%), linear-gradient(168deg, rgba(38, 45, 60, 0.45) 6.29%, rgba(38, 40, 60, 0.18) 91.42%)', + 'green-code-border': + 'radial-gradient(83.26% 102.85% at 61.61% -2.85%, rgba(212, 250, 255, 0.5) 8%, rgba(212, 250, 255, 0.22) 42%, rgba(212, 250, 255, 0.08) 74%, rgba(212, 250, 255, 0.05) 100%)', 'gray-btn': 'linear-gradient(258deg, rgba(176, 166, 191, 0.06) -8.62%, rgba(176, 166, 191, 0.03) 113.79%)', 'white-gray-gradient':