feat: add framework page layout

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 }) => (
+  <section className={clsx('bento mt-40 md:mt-[88px]', className)}>
+    <div className="container-lg relative xl:px-0 lg:w-full lg:max-w-5xl lg:px-8 md:max-w-3xl sm:px-5">
+      <h2
+        className={clsx(
+          'relative z-10 max-w-3xl text-6xl font-medium leading-denser tracking-snug lg:max-w-xl lg:text-4xl md:max-w-lg md:text-[32px] sm:text-3xl',
+          titleClassName
+        )}
+        dangerouslySetInnerHTML={{ __html: title }}
+      />
+      {description && (
+        <p className="mt-3 max-w-xl text-[17px] font-book leading-snug text-gray-9 lg:mt-2.5 md:mt-3 md:text-base">
+          {description}
+        </p>
+      )}
+      <ul
+        className={clsx(
+          'relative z-10 mt-12 flex flex-wrap gap-7 lg:mt-11 lg:gap-6 md:mt-9 md:gap-[18px] sm:mt-8 sm:justify-center',
+          cardsListClassName
+        )}
+      >
+        {cards.map(({ title, description, className, image, imageMobile }, index) => (
+          <li
+            className={clsx(
+              'relative h-[382px] rounded-xl border border-transparent bg-clip-border lg:h-[322px] md:h-[252px] sm:h-[250px] sm:w-full sm:max-w-[380px]',
+              className,
+              {
+                'w-[770px] lg:w-[608px] md:w-[446px]': index % 2 === 0,
+                'w-[418px] lg:w-[328px] md:w-[240px]': index % 2 === 1,
+              }
+            )}
+            key={index}
+          >
+            <div
+              className={clsx(
+                'relative z-10 h-full w-full p-[30px] lg:p-[26px] md:p-[18px] sm:p-4',
+                {
+                  'max-w-md lg:max-w-[330px] md:max-w-[300px] sm:flex sm:max-w-none sm:flex-col sm:justify-end':
+                    index % 2 === 0,
+                  'flex flex-col justify-end': index % 2 === 1,
+                }
+              )}
+            >
+              <h3 className="text-xl font-medium leading-snug tracking-snug lg:text-lg md:text-[15px] sm:text-sm">
+                {title}
+              </h3>
+              <p
+                className="mt-1.5 text-[15px] font-light leading-snug text-gray-9 md:mt-1 md:text-sm"
+                dangerouslySetInnerHTML={{ __html: description }}
+              />
+            </div>
+            {image && image}
+            {imageMobile && imageMobile}
+          </li>
+        ))}
+      </ul>
+      <div className="absolute -right-36 top-20 z-0 h-[420px] w-[564px] rounded-[50%] bg-[radial-gradient(88.94%_88.94%_at_62.86%_11.06%,#D886FF_27.2%,#EA69FF_80.5%,#A347FF_100%)] opacity-10 blur-3xl lg:h-[378px] lg:w-[508px] md:-right-9 md:h-[281px] md:w-[377px] sm:-right-28 sm:top-64" />
+      <div className="absolute -bottom-12 -left-44 z-0 h-[394px] w-[553px] rounded-[50%] bg-[radial-gradient(88.94%_88.94%_at_62.86%_11.06%,#6789FF_27.2%,#69B7FF_80.5%,#4786FF_100%)] opacity-10 blur-3xl lg:h-[372px] lg:w-[522px] md:-left-10 md:h-[265px] md:w-[372px] sm:-left-36" />
+    </div>
+  </section>
+);
+
+export default Bento;

src/components/shared/bento/index.js

@@ -0,0 +1,3 @@
+import Bento from './bento';
+
+export default Bento;

src/components/shared/reusable-sections/code-section/code-section.jsx

@@ -11,10 +11,33 @@ import dots from './images/dots.svg';
 
 SyntaxHighlighter.registerLanguage('javascript', javascript);
 
-const CodeSection = ({ title, description, button, code, codePosition }) => (
-  <section className="code-section safe-paddings mt-60 lg:mt-[120px] md:mt-[100px] sm:mt-20">
-    <div className="container-lg flex items-center gap-x-16 md:flex-col">
-      <div className="relative max-w-[672px] rounded-xl bg-code-block-border p-px lg:max-w-[532px] md:mt-12 md:w-full md:max-w-[672px] sm:max-w-[520px]">
+const CodeSection = ({
+  className,
+  title,
+  description,
+  button,
+  containerClassName,
+  textContentClassName,
+  code,
+  codePosition,
+  codeClassName,
+  isPriorityImageLoading,
+}) => (
+  <section
+    className={clsx(
+      'code-section safe-paddings mt-60 lg:mt-[120px] md:mt-[100px] sm:mt-20',
+      className
+    )}
+  >
+    <div
+      className={clsx('container-lg flex items-center gap-x-16 md:flex-col', containerClassName)}
+    >
+      <div
+        className={clsx(
+          'relative max-w-[672px] rounded-xl bg-code-block-border p-px lg:max-w-[532px] md:mt-12 md:w-full md:max-w-[672px] sm:max-w-[520px]',
+          codeClassName
+        )}
+      >
         <div className="relative z-10 h-full w-full overflow-hidden rounded-xl bg-code-block-bg p-[22px] sm:p-4">
           <SyntaxHighlighter
             className="echo-code scrollbar-hidden relative z-10 overflow-y-scroll text-[13px] font-normal shadow-[10px_10px_20px_0px_rgba(0,0,0,0.15),4px_4px_8px_0px_rgba(0,0,0,0.1),-2px_-2px_10px_0px_rgba(4,9,15,0.1)] [mask-image:linear-gradient(270deg,rgba(255,255,255,0.5)_0%,#FFFFFF_11.33%)] lg:text-xs sm:text-[10px] [&_code]:!block"
@@ -63,6 +86,7 @@ const CodeSection = ({ title, description, button, code, codePosition }) => (
           alt=""
           width={482}
           height={206}
+          loading={isPriorityImageLoading ? 'eager' : 'lazy'}
         />
         <div
           className="pointer-events-none absolute -top-2 right-[60px] h-[155px] w-[314px] rounded-[50%] bg-[#7599F5] opacity-30 blur-3xl sm:right-1/2 sm:translate-x-1/2"
@@ -84,7 +108,8 @@ const CodeSection = ({ title, description, button, code, codePosition }) => (
       <div
         className={clsx(
           'md:order-first md:max-w-lg md:text-center',
-          codePosition === 'right' && 'order-first'
+          codePosition === 'right' && 'order-first',
+          textContentClassName
         )}
       >
         <Heading
@@ -117,6 +142,10 @@ const CodeSection = ({ title, description, button, code, codePosition }) => (
 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,
@@ -125,11 +154,17 @@ CodeSection.propTypes = {
   }),
   code: PropTypes.string.isRequired,
   codePosition: PropTypes.oneOf(['left', 'right']),
+  isPriorityImageLoading: PropTypes.bool,
 };
 
 CodeSection.defaultProps = {
+  className: '',
+  containerClassName: '',
+  textContentClassName: '',
+  codeClassName: '',
   button: null,
   codePosition: 'left',
+  isPriorityImageLoading: false,
 };
 
 export default CodeSection;

src/components/shared/reusable-sections/cta-with-form/cta-with-form.jsx

@@ -46,9 +46,10 @@ const CtaWithForm = ({ className, title, description, leftItem, rightItem }) =>
           >
             {title}
           </Heading>
-          <p className="mt-3 max-w-[464px] text-center text-lg font-book tracking-snug text-gray-8 md:max-w-sm md:text-base">
-            {description}
-          </p>
+          <p
+            className="mt-3 max-w-[464px] text-center text-lg font-book tracking-snug text-gray-8 md:max-w-sm md:text-base"
+            dangerouslySetInnerHTML={{ __html: description }}
+          />
           <div className="mt-8 flex justify-center gap-5 md:mt-7 sm:flex-col sm:items-center">
             {leftItem.code && (
               <div

src/components/shared/reusable-sections/text-with-picture/text-with-picture.jsx

@@ -5,8 +5,21 @@ import React from 'react';
 import Button from 'components/shared/button';
 import Heading from 'components/shared/heading';
 
-const TextWithPicture = ({ title, description, image, button, theme }) => (
-  <section className="text-with-picture safe-paddings mt-40 lg:mt-36 md:mt-[104px] sm:mt-14">
+const TextWithPicture = ({
+  className,
+  title,
+  description,
+  image,
+  imageClassName,
+  button,
+  theme,
+}) => (
+  <section
+    className={clsx(
+      'text-with-picture safe-paddings mt-40 lg:mt-36 md:mt-[104px] sm:mt-14',
+      className
+    )}
+  >
     <div className="container-lg px-8 md:px-7 sm:px-4">
       <div
         className={clsx(
@@ -15,7 +28,7 @@ const TextWithPicture = ({ title, description, image, button, theme }) => (
         )}
       >
         <div
-          className={clsx('sm:order-first sm:mb-6 sm:pl-0 sm:text-center', {
+          className={clsx('relative z-10 sm:order-first sm:mb-6 sm:pl-0 sm:pr-0 sm:text-center', {
             'mb-12 max-w-[704px] text-center lg:mb-10 md:mb-8 md:max-w-lg sm:mb-6':
               theme === 'imageFullWidth',
             'order-last pl-24 lg:pl-16 md:pl-8': theme === 'imageLeft',
@@ -50,7 +63,7 @@ const TextWithPicture = ({ title, description, image, button, theme }) => (
             </Button>
           )}
         </div>
-        <div className="overflow-hidden rounded-lg">{image}</div>
+        <div className={clsx('overflow-hidden rounded-lg', imageClassName)}>{image}</div>
         {button && theme === 'imageFullWidth' && (
           <Button
             className="mt-9 md:mt-8 sm:mt-6"
@@ -69,9 +82,11 @@ const TextWithPicture = ({ title, description, image, button, theme }) => (
 );
 
 TextWithPicture.propTypes = {
+  className: PropTypes.string,
   title: PropTypes.string.isRequired,
   description: PropTypes.string.isRequired,
   image: PropTypes.node.isRequired,
+  imageClassName: PropTypes.string,
   button: PropTypes.shape({
     label: PropTypes.string.isRequired,
     link: PropTypes.string.isRequired,
@@ -82,8 +97,10 @@ TextWithPicture.propTypes = {
 };
 
 TextWithPicture.defaultProps = {
+  className: '',
   button: null,
   theme: 'imageLeft',
+  imageClassName: '',
 };
 
 export default TextWithPicture;