@levo-so/blocks 0.1.52 → 0.1.58

package/src/blocks/features/features-4.schema.ts

@@ -11,26 +11,6 @@ const DUMMY_ICON = {
   },
 };
 
-const ICON_IMAGE = {
-  id: "7141014160938075687",
-  location: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
-  kind: "image",
-  mimetype: "image/png",
-  srcset: {
-    "1080w":
-      "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
-    "1200w":
-      "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
-    "1920w":
-      "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp",
-    "320w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
-    "640w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
-    "750w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp",
-    "828w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp",
-    path: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp 1200w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp 1920w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp 750w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp 828w",
-  },
-};
-
 const PRODUCT_IMAGE = {
   id: "7141014160938075687",
   location: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
@@ -103,6 +83,8 @@ const DEFAULT_CONTENT = {
   // Specifications 2 section
   specifications_2_wrapper: null,
   specifications_2_title: "Service Level Agreements",
+  specifications_2_description:
+    "We believe in simple, science-backed nutrition that creates lasting change. Here’s what sets us apart:",
   specifications_2: [
     {
       spec_2_item: null,
@@ -267,6 +249,17 @@ export const Features4: IBlock = {
         max_characters: 50,
       },
     },
+    {
+      key: "specifications_2_description",
+      label: "Specifications 2 Description",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Description for the specifications 2 section (e.g., 'Service Level Agreements'). Provide clear context for the additional specifications.",
+        min_characters: 15,
+        max_characters: 50,
+      },
+    },
     {
       key: "specifications_2",
       label: "Specifications 2",
@@ -315,6 +308,11 @@ export const Features4: IBlock = {
         },
       ],
     },
+    {
+      key: "cta",
+      label: "CTA",
+      field_interface: "ButtonWidget",
+    },
     {
       key: "product_image",
       label: "Product Image",
@@ -612,5 +610,345 @@ export const Features4: IBlock = {
         },
       },
     },
+    {
+      title: "Variant 1",
+      key: "Variant 1",
+      styles: {
+        layout: {
+          width: "100%",
+          "padding-top": "5xl",
+          "padding-bottom": "5xl",
+          "padding-left": "8xl",
+          "padding-right": "8xl",
+          tablet: {
+            "padding-top": "3xl",
+            "padding-bottom": "3xl",
+            "padding-left": "4xl",
+            "padding-right": "4xl",
+          },
+        },
+        container: {
+          "margin-left": "auto",
+          "margin-right": "auto",
+          mobile: {
+            filter: "none",
+          },
+          filter: "none",
+          "max-width": "auto",
+        },
+        content_wrapper: {
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "4xl",
+          tablet: {
+            "flex-direction": "column",
+            "row-gap": "3xl",
+            filter: "none",
+          },
+          "flex-direction": "row-reverse",
+        },
+        header_section: {
+          "text-align": "center",
+          "margin-bottom": "4xl",
+          display: "none",
+        },
+        title: {
+          color: "text-1",
+          "margin-bottom": "sm",
+        },
+        subtitle: {
+          color: "text-2",
+        },
+        specifications_wrapper: {
+          flex: "1",
+          "max-width": "50%",
+          width: "100%",
+          tablet: {
+            flex: "auto",
+            "max-width": "100%",
+            filter: "none",
+          },
+          filter: "none",
+          mobile: {
+            filter: "none",
+          },
+        },
+        specifications_levoGroup: {
+          display: "none",
+          "grid-template-columns": "repeat(2, 1fr)",
+          gap: "xl",
+          "margin-bottom": "3xl",
+          mobile: {
+            "grid-template-columns": "1fr",
+            gap: "lg",
+          },
+        },
+        specifications: [
+          {
+            spec_item: {
+              display: "flex",
+              "align-items": "start",
+              "column-gap": "sm",
+            },
+            icon: {
+              width: "1.5rem",
+              height: "1.5rem",
+              "margin-top": "2xs",
+              color: "brand",
+            },
+            value: {
+              color: "text-1",
+              "margin-bottom": "3xs",
+            },
+            label: {
+              color: "text-2",
+            },
+          },
+          {
+            spec_item: {
+              display: "flex",
+              "align-items": "start",
+              "column-gap": "sm",
+            },
+            icon: {
+              width: "1.5rem",
+              height: "1.5rem",
+              "margin-top": "2xs",
+              color: "brand",
+            },
+            value: {
+              color: "text-1",
+              "margin-bottom": "3xs",
+            },
+            label: {
+              color: "text-2",
+            },
+          },
+          {
+            spec_item: {
+              display: "flex",
+              "align-items": "start",
+              "column-gap": "sm",
+            },
+            icon: {
+              width: "1.5rem",
+              height: "1.5rem",
+              "margin-top": "2xs",
+              color: "brand",
+            },
+            value: {
+              color: "text-1",
+              "margin-bottom": "3xs",
+            },
+            label: {
+              color: "text-2",
+            },
+          },
+          {
+            spec_item: {
+              display: "flex",
+              "align-items": "start",
+              "column-gap": "sm",
+            },
+            icon: {
+              width: "1.5rem",
+              height: "1.5rem",
+              "margin-top": "2xs",
+              color: "brand",
+            },
+            value: {
+              color: "text-1",
+              "margin-bottom": "3xs",
+            },
+            label: {
+              color: "text-2",
+            },
+          },
+          {
+            spec_item: {
+              display: "flex",
+              "align-items": "start",
+              "column-gap": "sm",
+            },
+            icon: {
+              width: "1.5rem",
+              height: "1.5rem",
+              "margin-top": "2xs",
+              color: "brand",
+            },
+            value: {
+              color: "text-1",
+              "margin-bottom": "3xs",
+            },
+            label: {
+              color: "text-2",
+            },
+          },
+          {
+            spec_item: {
+              display: "flex",
+              "align-items": "start",
+              "column-gap": "sm",
+            },
+            icon: {
+              width: "1.5rem",
+              height: "1.5rem",
+              "margin-top": "2xs",
+              color: "brand",
+            },
+            value: {
+              color: "text-1",
+              "margin-bottom": "3xs",
+            },
+            label: {
+              color: "text-2",
+            },
+          },
+        ],
+        specifications_2_wrapper: {
+          "background-color": "white",
+          padding: "lg",
+        },
+        specifications_2_title: {
+          color: "text-1",
+          "margin-bottom": "base",
+          "font-size": "3xl",
+        },
+        specifications_2_levoGroup: {
+          display: "flex",
+          "flex-direction": "column",
+          gap: "base",
+          "row-gap": "3xs",
+          "margin-top": "base",
+        },
+        specifications_2: [
+          {
+            spec_2_item: {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "sm",
+              "justify-content": "start",
+            },
+            icon: {
+              width: "22px",
+              height: "22px",
+              "margin-top": "none",
+              color: "brand",
+              "font-size": "22px",
+            },
+            value: {
+              "margin-bottom": "3xs",
+              "font-size": "base",
+              "font-weight": 400,
+            },
+            label: {
+              color: "text-2",
+              display: "none",
+            },
+          },
+          {
+            spec_2_item: {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "sm",
+              "justify-content": "start",
+            },
+            icon: {
+              width: "22px",
+              height: "22px",
+              "margin-top": "none",
+              color: "brand",
+              "font-size": "22px",
+            },
+            value: {
+              "margin-bottom": "3xs",
+              "font-size": "base",
+              "font-weight": 400,
+            },
+            label: {
+              color: "text-2",
+              display: "none",
+            },
+          },
+          {
+            spec_2_item: {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "sm",
+              "justify-content": "start",
+            },
+            icon: {
+              width: "22px",
+              height: "22px",
+              "margin-top": "none",
+              color: "brand",
+              "font-size": "22px",
+            },
+            value: {
+              "margin-bottom": "3xs",
+              "font-size": "base",
+              "font-weight": 400,
+            },
+            label: {
+              color: "text-2",
+              display: "none",
+            },
+          },
+          {
+            spec_2_item: {
+              display: "flex",
+              "align-items": "start",
+              "column-gap": "sm",
+            },
+            icon: {
+              width: "22px",
+              height: "22px",
+              "margin-top": "2xs",
+              color: "brand",
+              "font-size": "22px",
+            },
+            value: {
+              color: "text-1",
+              "margin-bottom": "3xs",
+              "font-size": "lg",
+              "font-weight": 400,
+            },
+            label: {
+              color: "text-2",
+              display: "none",
+            },
+          },
+        ],
+        product_image: {
+          width: "50%",
+          height: "100%",
+          "border-radius": "base",
+          "object-fit": "cover",
+          tablet: {
+            filter: "none",
+            width: "100%",
+          },
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+          heading: {
+            level: 2,
+          },
+        },
+        specifications_2_title: {
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+          heading: {
+            level: 2,
+          },
+        },
+      },
+    },
   ],
 };

package/src/blocks/features/features-4.tsx

@@ -1,6 +1,7 @@
 import {
   type ILevoBlockBaseProps,
   Box,
+  Button,
   Container,
   Heading,
   Icon,
@@ -41,6 +42,7 @@ const Features4: React.FC<ILevoBlockBaseProps<IFeatures4Content>> = ({
 
           <Box elementKey="specifications_2_wrapper">
             <Heading elementKey="specifications_2_title" />
+            <Typography elementKey={`specifications_2_description`} />
             <Box elementKey="specifications_2_levoGroup" data-levo_group>
               {(content?.specifications_2 ?? [])?.map((_, index) => (
                 <Box
@@ -58,9 +60,9 @@ const Features4: React.FC<ILevoBlockBaseProps<IFeatures4Content>> = ({
                 </Box>
               ))}
             </Box>
+            <Button elementKey={`cta`} />
           </Box>
         </Box>
-
         <Media
           elementKey="product_image"
           alt="Product specification image"

package/src/blocks/features/features-6.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import type { CarouselApi } from "@levo-so/studio";
 import {
   type ILevoBlockBaseProps,