Added styles for usp section and started on reusable section

components/layout/dynamic-content-manager/dynamic-content-manager.tsx

@@ -4,22 +4,18 @@ import { Info } from 'lucide-react';
 import dynamic from 'next/dynamic';
 
 import Hero from 'components/modules/hero';
-const USPSection = dynamic(() => import('components/ui/usp-section'));
+const USPSection = dynamic(() => import('components/modules/usp-section'));
 const Slider = dynamic(() => import('components/modules/slider'));
 const BlurbSection = dynamic(() => import('components/modules/blurb-section'));
 const FilteredProductList = dynamic(() => import('components/modules/filtered-product-list'));
-
 interface getContentComponentProps {
   _type: string;
   _key: number;
   disabled: boolean;
 }
 
-
-
 const getContentComponent = ({ _type, _key, disabled, ...rest }: getContentComponentProps) => {
   let Component: any;
-  console.log('type', _type)
   switch (_type) {
     case 'hero':
       Component = Hero;

components/modules/reusable-section/index.tsx

@@ -0,0 +1 @@
+export { default } from './reusable-section';

components/modules/reusable-section/reusable-section.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+interface ReusableSectionProps {
+  section: any
+}
+
+const ReusableSection = ({ section }: ReusableSectionProps) => {
+  console.log(section)
+
+  return (
+    <div className="px-4 lg:px-8 2xl:px-16">
+      <div>
+        Reusable section
+      </div>
+
+    </div>
+  )
+}
+
+export default ReusableSection

components/modules/usp-section/usp-section.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import SanityImage from '../../ui/sanity-image';
+
+interface USPSectionProps {
+  usps: [] | any
+}
+
+const USPSection = ({ usps }: USPSectionProps) => {
+  const desktopGridLayout = usps.length === 4 ? 'lg:grid-cols-4' : 'lg:grid-cols-3';
+
+  return (
+    <div className="px-4 lg:px-8 2xl:px-16">
+      <div
+      className={`w-full grid grid-cols-2 gap-x-4 gap-y-6 lg:gap-8 2xl:gap-x-16 ${desktopGridLayout}`}
+      >
+        {usps.map((usp: any, index: number) => (
+          <div
+            key={index}
+            className={`w-full flex flex-col items-center text-center`}
+          >
+            <div className="w-20 h-20 lg:w-24 lg:h-24">
+              <SanityImage
+                className="object-cover"
+                image={usp?.image}
+                alt={usp.name || 'USP image'}
+                width={96}
+                height={96}
+                sizes="96px"
+              />
+            </div>
+            <h2 className="text-xl mt-4 lg:mt-8 lg:text-2xl">{usp.title}</h2>
+            {usp.text && (
+              <p className="text-sm mt-2 text-low-contrast max-w-xs lg:text-base lg:mt-4">
+                {usp.text}
+              </p>
+            )}
+          </div>
+        ))}
+      </div>
+
+    </div>
+  )
+}
+
+export default USPSection

components/ui/usp-section/usp-section.tsx

@@ -1,44 +0,0 @@
-'use client'
-
-import SanityImage from '../sanity-image'
-
-interface USPSectionProps {
-  usps: any
-  title: string
-  mobileLayout: string
-  desktopLayout: string
-  imageFormat: 'square' | 'portrait' | 'landscape'
-}
-
-const USPSection = ({ usps }: USPSectionProps) => {
-  const desktopGridLayout = `lg:grid-cols-${usps.length}`
-  return (
-    <div
-      className={`w-full px-4 lg:px-16 py-16 lg:py-24 grid grid-cols-2 gap-x-4 gap-y-6 lg:gap-x-12 ${desktopGridLayout}`}
-    >
-      {usps.map((usp: any, index: number) => (
-        <div
-          key={index}
-          className={`w-full flex flex-col items-center text-center`}
-        >
-          <div className="w-20 h-20 lg:w-24 lg:h-24 mb-4 lg:mb-8">
-            <SanityImage
-              className="object-cover"
-              image={usp?.image}
-              alt={usp.name || 'USP image'}
-              width={96}
-              height={96}
-              sizes="96px"
-            />
-          </div>
-          <h3 className="mb-2 lg:mb-4 text-xl lg:text-2xl">{usp.title}</h3>
-          <p className="text-sm lg:text-base !text-low-contrast max-w-xs">
-            {usp.text}
-          </p>
-        </div>
-      ))}
-    </div>
-  )
-}
-
-export default USPSection

lib/sanity/queries.tsx

@@ -142,6 +142,14 @@ export const modules = `
     },
   }
 `
+export const reusableSection = `
+  _type == 'reusableSection' => {
+    disabled,
+    _type,
+    _key,
+    title
+  }
+`
 
 // Homepage query
 export const homePageQuery = `*[_type == "home" && slug.current == "/" && language == $locale][0] {
@@ -155,7 +163,8 @@ export const homePageQuery = `*[_type == "home" && slug.current == "/" && langua
     "locale": language
   },
   content[] {
-    ${modules}
+    ${modules},
+    ${reusableSection}
   },
   seo {
     ${seoFields}