@levo-so/blocks 0.1.59 → 0.1.61

package/src/blocks/faq/faq-3.schema.ts

@@ -1,5 +1,23 @@
 import type { IBlock } from "@levo-so/studio";
 
+const MEDIA = {
+  id: "xloeGCSMg2rlJ",
+  filename: "faq-3-1.png",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/faq-3-1-VbXF9m7BPiX48.png",
+  srcset: {
+    "1080w": "https://static.levocdn.com/WLZ1TXTD/faq-3-1-VbXF9m7BPiX48-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/faq-3-1-VbXF9m7BPiX48-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/faq-3-1-VbXF9m7BPiX48-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/faq-3-1-VbXF9m7BPiX48-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/faq-3-1-VbXF9m7BPiX48-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/faq-3-1-VbXF9m7BPiX48-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/faq-3-1-VbXF9m7BPiX48-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/faq-3-1-VbXF9m7BPiX48-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/faq-3-1-VbXF9m7BPiX48-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/faq-3-1-VbXF9m7BPiX48-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/faq-3-1-VbXF9m7BPiX48-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/faq-3-1-VbXF9m7BPiX48-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/faq-3-1-VbXF9m7BPiX48-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/faq-3-1-VbXF9m7BPiX48-1920w.webp 1920w",
+  },
+  mimetype: "image/png",
+};
+
 const DEFAULT_CONTENT = {
   layout: null,
   container: null,
@@ -7,12 +25,12 @@ const DEFAULT_CONTENT = {
   // header section
   header_container: null,
   title: "Frequently Asked Questions",
-  description:
-    "Get quick answers to the most common questions from our experienced team.",
+  description: "Get quick answers to the most common questions from our experienced team.",
 
   // main content wrapper with accordion and image in row
   main_content_container: null,
-  header_cta: "Contact Us",
+  header_ctas_levoGroup: null,
+  header_ctas: [{ header_cta: "Contact Us" }, { header_cta: "Schedule Call" }],
   // accordions wrapper
   accordions_container: null,
 
@@ -59,31 +77,10 @@ const DEFAULT_CONTENT = {
     },
   ],
 
-  cta: "Learn more",
+  ctas_levoGroup: null,
+  ctas: [{ cta: "Learn more" }, { cta: "Get Started" }],
 
-  faq_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",
-    },
-  },
+  faq_image: MEDIA,
 };
 
 export type IFaq3Content = typeof DEFAULT_CONTENT;
@@ -138,9 +135,23 @@ export const Faq3: IBlock = {
       },
     },
     {
-      key: "header_cta",
-      label: "Header CTA",
-      field_interface: "ButtonWidget",
+      key: "header_ctas",
+      label: "Header CTA Group",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "header_cta",
+          label: "Header CTA",
+          field_interface: "ButtonWidget",
+        },
+      ],
+      hint: {
+        prompt_description:
+          "Group of header call-to-action buttons for contact and related actions",
+        min_items: 1,
+        max_items: 3,
+      },
     },
     {
       key: "main_content_container",
@@ -181,7 +192,7 @@ export const Faq3: IBlock = {
         {
           key: "question",
           label: "Question",
-          field_interface: "TypographyWidget",
+          field_interface: "HeadingWidget",
           hint: {
             prompt_description:
               "A frequently asked question. Should be direct, clear, and phrased from the user's perspective. Professional, sincere tone.",
@@ -214,9 +225,22 @@ export const Faq3: IBlock = {
       },
     },
     {
-      key: "cta",
-      label: "CTA",
-      field_interface: "ButtonWidget",
+      key: "ctas",
+      label: "CTA Group",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "cta",
+          label: "CTA",
+          field_interface: "ButtonWidget",
+        },
+      ],
+      hint: {
+        prompt_description: "Group of call-to-action buttons for main conversion actions",
+        min_items: 1,
+        max_items: 3,
+      },
     },
     {
       key: "faq_image",
@@ -236,29 +260,8 @@ export const Faq3: IBlock = {
       key: "default",
       title: "Default",
       styles: {
-        layout: {
-          "padding-top": "5xl",
-          "padding-bottom": "5xl",
-          "padding-left": "3xl",
-          "padding-right": "3xl",
-          width: "100%",
-          tablet: {
-            "padding-top": "4xl",
-            "padding-bottom": "4xl",
-            "padding-left": "2xl",
-            "padding-right": "2xl",
-          },
-          mobile: {
-            "padding-top": "3xl",
-            "padding-bottom": "3xl",
-            "padding-left": "base",
-            "padding-right": "base",
-          },
-        },
+        layout: {},
         container: {
-          "max-width": "1280px",
-          "margin-left": "auto",
-          "margin-right": "auto",
           display: "flex",
           "flex-direction": "column",
           "row-gap": "4xl",
@@ -274,22 +277,22 @@ export const Faq3: IBlock = {
             "row-gap": "lg",
           },
         },
-        title: {
-          "font-size": "5xl",
-          "font-weight": 700,
-          color: "text-1",
-          margin: "0",
-          mobile: {
-            "font-size": "3xl",
-          },
+        header_ctas_levoGroup: {
+          display: "flex",
+          "flex-direction": "row",
+          "column-gap": "xs",
+          "row-gap": "xs",
+          "flex-wrap": "wrap",
+          "align-items": "center",
         },
+        header_ctas: Array(2)
+          .fill(0)
+          .map(() => ({
+            header_cta: {},
+          })),
+        title: {},
         description: {
-          "font-size": "lg",
-          color: "text-2",
-          "font-weight": 400,
-          "line-height": "1.6",
           mobile: {
-            "font-size": "base",
             "margin-top": "sm",
           },
         },
@@ -326,10 +329,22 @@ export const Faq3: IBlock = {
             "object-fit": "cover",
           },
         },
-        cta: {
-          width: "fit-content",
+        ctas_levoGroup: {
+          display: "flex",
+          "flex-direction": "row",
+          "column-gap": "xs",
+          "row-gap": "xs",
+          "flex-wrap": "wrap",
+          "align-items": "center",
           "margin-top": "xl",
         },
+        ctas: Array(2)
+          .fill(0)
+          .map(() => ({
+            cta: {
+              width: "fit-content",
+            },
+          })),
         faqs: [
           {
             wrapper: {
@@ -340,12 +355,7 @@ export const Faq3: IBlock = {
               "border-style": "solid",
             },
             question: {
-              "font-size": "xl",
               "font-weight": 600,
-              color: "text-1",
-              tablet: {
-                "font-size": "lg",
-              },
             },
             content: {
               "padding-top": "none",
@@ -361,10 +371,7 @@ export const Faq3: IBlock = {
               "align-items": "center",
               "column-gap": "base",
             },
-            answer: {
-              color: "text-2",
-              "line-height": "1.6",
-            },
+            answer: {},
           },
           {
             wrapper: {
@@ -375,12 +382,7 @@ export const Faq3: IBlock = {
               "border-style": "solid",
             },
             question: {
-              "font-size": "xl",
               "font-weight": 600,
-              color: "text-1",
-              tablet: {
-                "font-size": "lg",
-              },
             },
             content: {
               "padding-top": "none",
@@ -396,10 +398,7 @@ export const Faq3: IBlock = {
               "align-items": "center",
               "column-gap": "base",
             },
-            answer: {
-              color: "text-2",
-              "line-height": "1.6",
-            },
+            answer: {},
           },
           {
             wrapper: {
@@ -410,12 +409,7 @@ export const Faq3: IBlock = {
               "border-style": "solid",
             },
             question: {
-              "font-size": "xl",
               "font-weight": 600,
-              color: "text-1",
-              tablet: {
-                "font-size": "lg",
-              },
             },
             content: {
               "padding-top": "none",
@@ -431,10 +425,7 @@ export const Faq3: IBlock = {
               "align-items": "center",
               "column-gap": "base",
             },
-            answer: {
-              color: "text-2",
-              "line-height": "1.6",
-            },
+            answer: {},
           },
           {
             wrapper: {
@@ -445,12 +436,7 @@ export const Faq3: IBlock = {
               "border-style": "solid",
             },
             question: {
-              "font-size": "xl",
               "font-weight": 600,
-              color: "text-1",
-              tablet: {
-                "font-size": "lg",
-              },
             },
             content: {
               "padding-top": "none",
@@ -466,15 +452,100 @@ export const Faq3: IBlock = {
               "align-items": "center",
               "column-gap": "base",
             },
+            answer: {},
+          },
+        ],
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+        description: {
+          selectedVariants: {
+            Typography_Variants: "Large",
+          },
+        },
+        faqs: [
+          {
+            question: {
+              heading: {
+                level: "4",
+              },
+              selectedVariants: {
+                Heading_Level: "H5",
+              },
+            },
+            answer: {
+              selectedVariants: {},
+            },
+          },
+          {
+            question: {
+              selectedVariants: {
+                Heading_Level: "H5",
+              },
+            },
             answer: {
-              color: "text-2",
-              "line-height": "1.6",
+              selectedVariants: {},
+            },
+          },
+          {
+            question: {
+              selectedVariants: {
+                Heading_Level: "H5",
+              },
+            },
+            answer: {
+              selectedVariants: {},
+            },
+          },
+          {
+            question: {
+              selectedVariants: {
+                Heading_Level: "H5",
+              },
+            },
+            answer: {
+              selectedVariants: {},
+            },
+          },
+        ],
+        header_ctas: [
+          {
+            header_cta: {
+              selectedVariants: {
+                Button_Variants: "Primary",
+              },
+            },
+          },
+          {
+            header_cta: {
+              selectedVariants: {
+                Button_Variants: "Secondary",
+              },
+            },
+          },
+        ],
+        ctas: [
+          {
+            cta: {
+              selectedVariants: {
+                Button_Variants: "Primary",
+              },
+            },
+          },
+          {
+            cta: {
+              selectedVariants: {
+                Button_Variants: "Secondary",
+              },
             },
           },
         ],
       },
-      content: DEFAULT_CONTENT,
-      config: {},
     },
   ],
 };

package/src/blocks/faq/faq-3.tsx

@@ -1,16 +1,16 @@
 import {
-  type ILevoBlockBaseProps,
-  Heading,
-  Image,
-  Typography,
-  Container,
-  Section,
-  Box,
-  AccordionRoot,
+  AccordionContent,
   AccordionItem,
+  AccordionRoot,
   AccordionTrigger,
-  AccordionContent,
+  Box,
   Button,
+  Container,
+  Heading,
+  type ILevoBlockBaseProps,
+  Image,
+  Section,
+  Typography,
 } from "@levo-so/studio";
 
 import type { IFaq3Content } from "./faq-3.schema";
@@ -21,7 +21,15 @@ const Faq3: React.FC<ILevoBlockBaseProps<IFaq3Content>> = ({ content }) => (
       <Box elementKey="header_container">
         <Heading elementKey="title" />
         <Typography elementKey="description" />
-        <Button elementKey="header_cta" />
+        <Box elementKey="header_ctas_levoGroup" data-levo_group>
+          {(content?.header_ctas ?? []).map((_: any, index: number) => (
+            <Button
+              key={`header_ctas.${index}.header_cta`}
+              elementKey={`header_ctas.${index}.header_cta`}
+              data-levo_group_item
+            />
+          ))}
+        </Box>
       </Box>
 
       <Box elementKey="main_content_container">
@@ -41,11 +49,8 @@ const Faq3: React.FC<ILevoBlockBaseProps<IFaq3Content>> = ({ content }) => (
               >
                 <AccordionTrigger elementKey={`faqs.${index}.trigger`}>
                   <Box elementKey={`faqs.${index}.iconQuestionWrapper`}>
-                    <Image
-                      alt="icon"
-                      elementKey={`faqs.${index}.triggerIcon`}
-                    />
-                    <Typography elementKey={`faqs.${index}.question`} />
+                    <Image alt="icon" elementKey={`faqs.${index}.triggerIcon`} />
+                    <Heading elementKey={`faqs.${index}.question`} />
                   </Box>
                 </AccordionTrigger>
                 <AccordionContent elementKey={`faqs.${index}.content`}>
@@ -54,15 +59,18 @@ const Faq3: React.FC<ILevoBlockBaseProps<IFaq3Content>> = ({ content }) => (
               </AccordionItem>
             ))}
           </AccordionRoot>
-          <Button elementKey="cta" />
+          <Box elementKey="ctas_levoGroup" data-levo_group>
+            {(content?.ctas ?? []).map((_: any, index: number) => (
+              <Button
+                key={`ctas.${index}.cta`}
+                elementKey={`ctas.${index}.cta`}
+                data-levo_group_item
+              />
+            ))}
+          </Box>
         </Box>
 
-        <Image
-          elementKey="faq_image"
-          width={400}
-          height={500}
-          alt="FAQ support illustration"
-        />
+        <Image elementKey="faq_image" width={400} height={500} alt="FAQ support illustration" />
       </Box>
     </Container>
   </Section>

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

@@ -120,7 +120,7 @@ export const Features1: IBlock = {
         {
           key: "title",
           label: "Title",
-          field_interface: "TypographyWidget",
+          field_interface: "HeadingWidget",
           hint: {
             prompt_description:
               "Specialty name featured as a bold card heading. Use succinct and clear phrasing (2–4 words), all significant words capitalized. Professional and direct style.",
@@ -145,9 +145,17 @@ export const Features1: IBlock = {
           field_interface: "TypographyWidget",
         },
         {
-          key: "cta",
-          label: "Cta",
+          key: "ctas",
+          label: "CTA Group",
           field_interface: "ButtonWidget",
+          kind: "group",
+          fields: [
+            {
+              key: "cta",
+              label: "Cta",
+              field_interface: "ButtonWidget",
+            },
+          ],
         },
       ],
       hint: {

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

@@ -1,19 +1,17 @@
 import {
-  type ILevoBlockBaseProps,
   Box,
   Button,
   Container,
   Heading,
   Icon,
+  type ILevoBlockBaseProps,
   Section,
   Typography,
 } from "@levo-so/studio";
 
 import type { IFeatures1Content } from "./features-1.schema";
 
-const Features1: React.FC<ILevoBlockBaseProps<IFeatures1Content>> = ({
-  content,
-}) => (
+const Features1: React.FC<ILevoBlockBaseProps<IFeatures1Content>> = ({ content }) => (
   <Section elementKey="layout">
     <Container elementKey="container">
       <Box elementKey="text_wrapper">
@@ -36,7 +34,16 @@ const Features1: React.FC<ILevoBlockBaseProps<IFeatures1Content>> = ({
               <Heading elementKey={`specialties.${index}.title`} />
               <Typography elementKey={`specialties.${index}.description`} />
               <Typography elementKey={`specialties.${index}.caption`} />
-              <Button elementKey={`specialties.${index}.cta`} />
+              <Box elementKey={`specialties.${index}.ctas_levoGroup`}>
+                {content?.specialties?.[index]?.ctas?.map((v, idx) => {
+                  return (
+                    <Button
+                      key={`specialties.${index}.ctas.${idx}.cta`}
+                      elementKey={`specialties.${index}.ctas.${idx}.cta`}
+                    />
+                  );
+                })}
+              </Box>
             </Box>
           </Box>
         ))}