@levo-so/blocks 0.1.59 → 0.1.61

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

@@ -11,24 +11,22 @@ const DUMMY_IMAGE = {
   },
 };
 
-const FAQ_IMAGE = {
-  id: "7141014160938075687",
-  location: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
+const MEDIA = {
+  id: "zuc3twW4Y6dAK",
+  filename: "faq-2-1.png",
   kind: "image",
-  mimetype: "image/png",
+  location: "https://static.levocdn.com/WLZ1TXTD/faq-2-1-dO4QMwFgYhADD.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",
+    "1080w": "https://static.levocdn.com/WLZ1TXTD/faq-2-1-dO4QMwFgYhADD-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/faq-2-1-dO4QMwFgYhADD-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/faq-2-1-dO4QMwFgYhADD-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/faq-2-1-dO4QMwFgYhADD-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/faq-2-1-dO4QMwFgYhADD-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/faq-2-1-dO4QMwFgYhADD-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/faq-2-1-dO4QMwFgYhADD-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/faq-2-1-dO4QMwFgYhADD-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/faq-2-1-dO4QMwFgYhADD-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/faq-2-1-dO4QMwFgYhADD-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/faq-2-1-dO4QMwFgYhADD-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/faq-2-1-dO4QMwFgYhADD-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/faq-2-1-dO4QMwFgYhADD-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/faq-2-1-dO4QMwFgYhADD-1920w.webp 1920w",
   },
+  mimetype: "image/png",
 };
 
 const DEFAULT_CONTENT = {
@@ -42,6 +40,7 @@ const DEFAULT_CONTENT = {
   text_container: null,
   faq_label: "FAQ's",
   title: "Legal Queries Solved",
+  description: "We're here to help you navigate the complexities of the legal system.",
 
   faqs: [
     {
@@ -53,7 +52,7 @@ const DEFAULT_CONTENT = {
       question: "How do I initiate a legal consultation with your team?",
       answer:
         "Simply reach out through our contact page, and our team will promptly schedule a confidential consultation to address your legal concerns",
-      media: FAQ_IMAGE,
+      media: MEDIA,
     },
     {
       wrapper: null,
@@ -64,7 +63,7 @@ const DEFAULT_CONTENT = {
       question: "What areas of law does your firm specialize in?",
       answer:
         "Simply reach out through our contact page, and our team will promptly schedule a confidential consultation to address your legal concerns",
-      media: FAQ_IMAGE,
+      media: MEDIA,
     },
     {
       wrapper: null,
@@ -75,7 +74,7 @@ const DEFAULT_CONTENT = {
       question: "How does your fee structure work?",
       answer:
         "Simply reach out through our contact page, and our team will promptly schedule a confidential consultation to address your legal concerns",
-      media: FAQ_IMAGE,
+      media: MEDIA,
     },
     {
       wrapper: null,
@@ -86,11 +85,12 @@ const DEFAULT_CONTENT = {
       question: "What sets your legal team apart from others?",
       answer:
         "Simply reach out through our contact page, and our team will promptly schedule a confidential consultation to address your legal concerns",
-      media: FAQ_IMAGE,
+      media: MEDIA,
     },
   ],
 
-  cta: "More about us",
+  ctas_levoGroup: null,
+  ctas: [{ cta: "More about us" }, { cta: "Get Started" }],
 };
 
 export type IFaq2Content = typeof DEFAULT_CONTENT;
@@ -149,6 +149,11 @@ export const Faq2: IBlock = {
         max_characters: 40,
       },
     },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+    },
     {
       key: "faqs",
       label: "FAQs",
@@ -233,9 +238,17 @@ export const Faq2: IBlock = {
       },
     },
     {
-      key: "cta",
-      label: "CTA",
-      field_interface: "ButtonWidget",
+      key: "ctas",
+      label: "CTA Buttons Group",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "cta",
+          label: "CTA Button",
+          field_interface: "ButtonWidget",
+        },
+      ],
     },
   ],
   layouts: [
@@ -243,19 +256,9 @@ export const Faq2: IBlock = {
       key: "default",
       title: "Default",
       styles: {
-        layout: {
-          padding: "112px",
-          width: "100%",
-          tablet: {
-            padding: "50px",
-          },
-          mobile: {
-            padding: "40px",
-          },
-        },
+        layout: {},
         container: {
           display: "flex",
-          width: "100%",
           "align-items": "center",
           "justify-content": "between",
           "column-gap": "12xl",
@@ -286,6 +289,7 @@ export const Faq2: IBlock = {
         faq_image: {
           height: "479px",
           width: "356px",
+          "border-radius": "base",
           tablet: {
             width: "300px",
             height: "403px",
@@ -294,53 +298,90 @@ export const Faq2: IBlock = {
             display: "none",
           },
         },
-        faq_label: {
-          color: "text-2",
-        },
-        title: {
-          color: "text-1",
-        },
-        cta: {
-          width: "fit-content",
+        faq_label: {},
+        title: {},
+        ctas_levoGroup: {
+          display: "flex",
+          "flex-direction": "row",
+          "column-gap": "md",
+          "row-gap": "md",
+          "flex-wrap": "wrap",
+          "align-items": "center",
         },
+        ctas: Array(2)
+          .fill(0)
+          .map(() => ({
+            width: "fit-content",
+          })),
         faqs: Array(4)
-          .fill(4)
-          .map((v) => {
-            return {
-              wrapper: {
-                "padding-top": "none",
-                "padding-bottom": "none",
-                "border-color": "var(--color-border)",
-                "border-bottom-width": "1px",
-                "border-style": "solid",
+          .fill(0)
+          .map((v) => ({
+            wrapper: {
+              "padding-top": "none",
+              "padding-bottom": "none",
+              "border-color": "var(--color-border)",
+              "border-bottom-width": "1px",
+              "border-style": "solid",
+            },
+            question: {
+              "font-weight": 600,
+              tablet: {
+                "text-align": "left",
               },
-              question: {
-                "font-size": "xl",
-                "font-weight": 600,
-                color: "black",
-                tablet: {
-                  "text-align": "left",
+            },
+            content: {
+              "padding-top": "none",
+              "padding-bottom": "lg",
+            },
+            trigger: {
+              width: "100%",
+              display: "flex",
+              "align-items": "center",
+              "justify-content": "space-between",
+              "padding-top": "base",
+              "padding-bottom": "base",
+            },
+            iconQuestionWrapper: {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "base",
+            },
+            features_list: {
+              display: "flex",
+              "flex-direction": "row",
+              "column-gap": "lg",
+              "margin-top": "base",
+              "flex-wrap": "wrap",
+            },
+            features: Array(4)
+              .fill(0)
+              .map((v) => ({
+                wrapper: {
+                  display: "flex",
+                  "align-items": "center",
+                  "column-gap": "xs",
+                  "background-color": "brand",
+                  "padding-left": "sm",
+                  "padding-right": "sm",
+                  "padding-top": "2xs",
+                  "padding-bottom": "2xs",
+                  "border-radius": "md",
                 },
-              },
-              content: {
-                "padding-top": "none",
-                "padding-bottom": "lg",
-              },
-              trigger: {
-                width: "100%",
-                display: "flex",
-                "align-items": "center",
-                "justify-content": "space-between",
-                "padding-top": "base",
-                "padding-bottom": "base",
-              },
-              iconQuestionWrapper: {
-                display: "flex",
-                "align-items": "center",
-                "column-gap": "base",
-              },
-            };
-          }),
+                icon: {
+                  width: "16px",
+                  height: "16px",
+                },
+                label: {
+                  color: "brandForeground",
+                },
+              })),
+            features_levoGroup: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "base",
+              "margin-top": "base",
+            },
+          })),
       },
       content: DEFAULT_CONTENT,
       config: {
@@ -352,6 +393,20 @@ export const Faq2: IBlock = {
             Heading_Level: "H2",
           },
         },
+        faqs: Array(4)
+          .fill(0)
+          .map((v) => {
+            return {
+              question: {
+                heading: {
+                  level: "4",
+                },
+                selectedVariants: {
+                  Heading_Level: "H5",
+                },
+              },
+            };
+          }),
       },
     },
   ],

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

@@ -1,21 +1,22 @@
 "use client";
 
-import React, { useState } from "react";
 import {
-  type ILevoBlockBaseProps,
-  Heading,
-  Icon,
-  Typography,
-  Container,
-  Section,
-  Box,
-  AccordionRoot,
+  AccordionContent,
   AccordionItem,
+  AccordionRoot,
   AccordionTrigger,
-  AccordionContent,
+  Box,
   Button,
+  Container,
+  Heading,
+  Icon,
+  type ILevoBlockBaseProps,
   Media,
+  Section,
+  Typography,
 } from "@levo-so/studio";
+import type React from "react";
+import { useState } from "react";
 
 import type { IFaq2Content } from "./faq-2.schema";
 
@@ -41,6 +42,7 @@ const Faq2: React.FC<ILevoBlockBaseProps<IFaq2Content>> = ({ content }) => {
           <Box elementKey="text_container">
             <Typography elementKey="faq_label" />
             <Heading elementKey="title" />
+            <Typography elementKey="description" />
           </Box>
 
           <AccordionRoot
@@ -69,7 +71,15 @@ const Faq2: React.FC<ILevoBlockBaseProps<IFaq2Content>> = ({ 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>
         <Media
           elementKey={`faqs.${activeIndex}.media`}