@levo-so/blocks 0.1.54 → 0.1.59

package/src/blocks/content/content-9.tsx

@@ -0,0 +1,91 @@
+import {
+  type ILevoBlockBaseProps,
+  Heading,
+  Image,
+  Typography,
+  Container,
+  Section,
+  Box,
+  AccordionRoot,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+  Icon,
+} from "@levo-so/studio";
+
+import type { IContent9Content } from "./content-9.schema";
+
+const Content9: React.FC<ILevoBlockBaseProps<IContent9Content>> = ({
+  content,
+}) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Heading elementKey="title" />
+
+      <Box elementKey="accordions_container">
+        <AccordionRoot
+          type="single"
+          elementKey="sections_levoGroup"
+          data-levo_group
+          defaultValue={`item-0`}
+        >
+          {(content.sections ?? []).map((_, index) => (
+            <AccordionItem
+              value={`item-${index}`}
+              key={index}
+              elementKey={`sections.${index}.wrapper`}
+              data-levo_group_item
+            >
+              <AccordionTrigger elementKey={`sections.${index}.trigger`}>
+                <Box elementKey={`sections.${index}.headerContainer`}>
+                  <Box elementKey={`sections.${index}.iconLabelContainer`}>
+                    <Icon elementKey={`sections.${index}.icon`} />
+                    <Typography elementKey={`sections.${index}.label`} />
+                  </Box>
+                  <Typography elementKey={`sections.${index}.title`} />
+                </Box>
+              </AccordionTrigger>
+              <AccordionContent elementKey={`sections.${index}.content`}>
+                <Box elementKey={`sections.${index}.container`}>
+                  <Box
+                    elementKey={`sections.${index}.cards_levoGroup`}
+                    data-levo_group
+                  >
+                    {(content.sections?.[index]?.cards ?? []).map(
+                      (_, cardIndex) => (
+                        <Box
+                          key={cardIndex}
+                          data-levo_group_item
+                          elementKey={`sections.${index}.cards.${cardIndex}.card`}
+                        >
+                          <Box
+                            elementKey={`sections.${index}.cards.${cardIndex}.label_container`}
+                          >
+                            <Box
+                              elementKey={`sections.${index}.cards.${cardIndex}.label_divider`}
+                            />
+                            <Typography
+                              elementKey={`sections.${index}.cards.${cardIndex}.label`}
+                            />
+                          </Box>
+                          <Typography
+                            elementKey={`sections.${index}.cards.${cardIndex}.title`}
+                          />
+                          <Typography
+                            elementKey={`sections.${index}.cards.${cardIndex}.description`}
+                          />
+                        </Box>
+                      ),
+                    )}
+                  </Box>
+                </Box>
+              </AccordionContent>
+            </AccordionItem>
+          ))}
+        </AccordionRoot>
+      </Box>
+    </Container>
+  </Section>
+);
+
+export default Content9;

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

@@ -59,7 +59,14 @@ const DEFAULT_CONTENT = {
   title: "Your Transformation Starts Today",
   description:
     "No more guesswork. No more excuses. Just real, proven training that delivers results built around you.",
-  ctaButton: "Book Your First Class",
+  buttons: [
+    {
+      text: "Book Your First Class",
+    },
+    {
+      text: "Learn More",
+    },
+  ],
 };
 
 export type ICta2Content = typeof DEFAULT_CONTENT;
@@ -103,10 +110,19 @@ export const Cta2: IBlock = {
       label: "Description",
       field_interface: "TypographyWidget",
     },
+
     {
-      key: "ctaButton",
-      label: "CTA Button",
-      field_interface: "ButtonWidget",
+      key: "buttons",
+      label: "Buttons",
+      kind: "group",
+      field_interface: "BoxWidget",
+      fields: [
+        {
+          key: "text",
+          label: "Button",
+          field_interface: "ButtonWidget",
+        },
+      ],
     },
     {
       key: "rightImage",
@@ -203,6 +219,32 @@ export const Cta2: IBlock = {
           "margin-bottom": "lg",
           "text-color": "text-2",
         },
+        buttons_levoGroup: {
+          display: "flex",
+          "flex-direction": "row",
+          "column-gap": "base",
+          "align-items": "center",
+          mobile: {
+            "flex-direction": "column",
+            "row-gap": "sm",
+          },
+        },
+        buttons: [
+          {
+            text: {
+              selectedVariants: {
+                Button_Variants: "Primary",
+              },
+            },
+          },
+          {
+            text: {
+              selectedVariants: {
+                Button_Variants: "Secondary",
+              },
+            },
+          },
+        ],
       },
     },
   ],

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

@@ -18,7 +18,15 @@ const Cta2: React.FC<ILevoBlockBaseProps<ICta2Content>> = ({ content }) => (
       <Box elementKey="contentContainer">
         <Heading elementKey="title" />
         <Typography elementKey="description" />
-        <Button elementKey="ctaButton" />
+        <Box elementKey="buttons_levoGroup" data-levo_group>
+          {(content?.buttons ?? []).map((_: any, index: number) => (
+            <Button
+              key={index}
+              data-levo_group_item
+              elementKey={`buttons.${index}.text`}
+            />
+          ))}
+        </Box>
       </Box>
       <Image elementKey="rightImage" alt="Right fitness image" />
     </Container>

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

@@ -9,6 +9,21 @@ const DEFAULT_CONTENT = {
   description: "We've got something special to share with you. Take a look!",
   embed: "",
 };
+const DEFAULT_CONTENT_2 = {
+  layout: null,
+  container: null,
+  contentWrapper: null,
+  title: "Visit Our Store",
+  description:
+    "<p>Experience wellness in person — explore our full range of CBD &amp; THC and find the right balance for your lifestyle.</p>",
+  ctas: [
+    {
+      cta: "Get Direction",
+    },
+  ],
+  embed:
+    '<iframe\n  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.019266284122!2d-122.41941568468298!3d37.77492977975937!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8085808b5f4d3f7d%3A0x9e1bfb7b9e8e6b!2sSan%20Francisco%2C%20CA%2C%20USA!5e0!3m2!1sen!2sin!4v1697030400000!5m2!1sen!2sin"\n  width="100%"\n  height="100%"\n  style="border:0;"\n  allowfullscreen=""\n  loading="lazy"\n  referrerpolicy="no-referrer-when-downgrade"\n></iframe>\n',
+};
 
 export type IEmbed1Content = typeof DEFAULT_CONTENT;
 
@@ -149,5 +164,90 @@ export const Embed1: IBlock = {
       content: DEFAULT_CONTENT,
       config: {},
     },
+    {
+      key: "variant-1",
+      title: "Variant 1",
+      styles: {
+        layout: {
+          "padding-left": "8xl",
+          "padding-right": "8xl",
+          "padding-top": "8xl",
+          "padding-bottom": "8xl",
+          tablet: {
+            "padding-left": "4xl",
+            "padding-right": "4xl",
+            "padding-top": "4xl",
+            "padding-bottom": "4xl",
+          },
+          mobile: {
+            "padding-left": "lg",
+            "padding-right": "lg",
+            "padding-top": "lg",
+            "padding-bottom": "lg",
+          },
+        },
+        container: {
+          display: "flex",
+          "justify-content": "space-between",
+          tablet: {
+            "flex-direction": "column",
+            "column-gap": "none",
+            "row-gap": "xl",
+            "padding-top": "xl",
+          },
+          mobile: {
+            "row-gap": "base",
+            "padding-top": "base",
+          },
+          "max-width": "auto",
+          "background-color": "background-3",
+        },
+        embed: {
+          width: "50%",
+          height: "400px",
+          tablet: {
+            width: "100%",
+            height: "300px",
+          },
+          mobile: {
+            height: "250px",
+          },
+        },
+        contentWrapper: {
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "start",
+          "justify-content": "center",
+          "row-gap": "base",
+          "padding-left": "none",
+          tablet: {
+            "padding-left": "xl",
+            "padding-right": "xl",
+          },
+          mobile: {
+            "padding-left": "base",
+            "padding-right": "base",
+          },
+          "max-width": "400px",
+        },
+        textWrapper: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "4xs",
+        },
+        title: {
+          "font-size": "4xl",
+          mobile: {
+            "font-size": "2xl",
+          },
+        },
+        description: {
+          "line-height": 1.625,
+        },
+      },
+
+      content: DEFAULT_CONTENT_2,
+      config: {},
+    },
   ],
 };

package/src/blocks/event/ClientOnly.tsx

@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react";
+
+interface IClientOnlyProps {
+  children: React.ReactNode;
+  fallback?: React.ReactNode;
+}
+
+/**
+ * Component that renders its children on the client side only to prevent hydration mismatches.
+ * Useful for content that differs between server and client (e.g., dates with timezone, localStorage-dependent content).
+ */
+export const ClientOnly: React.FC<IClientOnlyProps> = ({
+  children,
+  fallback = null,
+}) => {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return <>{fallback}</>;
+  }
+
+  return children;
+};

package/src/blocks/event/event-details.tsx

@@ -12,6 +12,7 @@ import {
 import dayjs from "dayjs";
 
 import type { IEventDetailsContent } from "./event-details.schema";
+import { ClientOnly } from "./ClientOnly";
 
 const EventDetails: React.FC<ILevoBlockBaseProps<IEventDetailsContent>> = ({
   content,
@@ -32,19 +33,25 @@ const EventDetails: React.FC<ILevoBlockBaseProps<IEventDetailsContent>> = ({
               <Box elementKey="start-date-wrapper">
                 <Icon elementKey="date-icon" />
                 <Typography elementKey="starts_at">
-                  {dayjs(content?.starts_at).format("MMM D, YYYY")}
+                  <ClientOnly>
+                    {dayjs(content?.starts_at).format("MMM D, YYYY")}
+                  </ClientOnly>
                 </Typography>
               </Box>
               <Box elementKey="end-date-wrapper">
                 <Icon elementKey="end-date-icon" />
                 <Typography elementKey="ends_at">
-                  {dayjs(content?.ends_at).format("MMM D, YYYY")}
+                  <ClientOnly>
+                    {dayjs(content?.ends_at).format("MMM D, YYYY")}
+                  </ClientOnly>
                 </Typography>
               </Box>
               <Box elementKey="time-wrapper">
                 <Icon elementKey="time-icon" />
                 <Typography elementKey="time-range">
-                  {`${dayjs(content?.starts_at).format("hh:mm A")} - ${dayjs(content?.ends_at).format("hh:mm A")}`}
+                  <ClientOnly>
+                    {`${dayjs(content?.starts_at).format("hh:mm A")} - ${dayjs(content?.ends_at).format("hh:mm A")}`}
+                  </ClientOnly>
                 </Typography>
               </Box>
               <Box elementKey="kind-wrapper">

package/src/blocks/event/event-listing-3.tsx

@@ -13,6 +13,7 @@ import {
 } from "@levo-so/studio";
 
 import type { IEventListing3 } from "./event-listing-3.schema";
+import { ClientOnly } from "./ClientOnly";
 
 const EventListing3: React.FC<ILevoBlockBaseProps<IEventListing3>> = () => {
   const { data, query, setQuery, meta } = useContentEngine("events");
@@ -43,7 +44,11 @@ const EventListing3: React.FC<ILevoBlockBaseProps<IEventListing3>> = () => {
                     <Typography
                       elementKey={`events.${index}.publishedAt-header`}
                     >
-                      {dayjs(item?.starts_at).format("MMM D, YYYY")}
+                      <ClientOnly>
+                        {dayjs(item?.["publishedAt-header"]).format(
+                          "MMM D, YYYY",
+                        )}
+                      </ClientOnly>
                     </Typography>
                   </Box>
 
@@ -57,7 +62,9 @@ const EventListing3: React.FC<ILevoBlockBaseProps<IEventListing3>> = () => {
                   <Typography elementKey={`events.${index}.title`} />
                   <Typography elementKey={`events.${index}.description`} />
                   <Typography elementKey={`events.${index}.publishedAt`}>
-                    {dayjs(item?.starts_at).format("MMM D, YYYY")}
+                    <ClientOnly>
+                      {dayjs(item?.publishedAt).format("MMM D, YYYY")}
+                    </ClientOnly>
                   </Typography>
 
                   <Button elementKey={`events.${index}.cta`} />

package/src/blocks/event/event-listing-4.tsx

@@ -13,6 +13,7 @@ import {
 import dayjs from "dayjs";
 
 import type { IEventListing4 } from "./event-listing-4.schema";
+import { ClientOnly } from "./ClientOnly";
 
 const EventListing4: React.FC<ILevoBlockBaseProps<IEventListing4>> = () => {
   const { data, query, setQuery, meta } = useContentEngine("events");
@@ -46,7 +47,11 @@ const EventListing4: React.FC<ILevoBlockBaseProps<IEventListing4>> = () => {
                       <Typography
                         elementKey={`events.${index}.publishedAt-header`}
                       >
-                        {dayjs(item?.starts_at).format("MMM D, YYYY")}
+                        <ClientOnly>
+                          {dayjs(item?.["publishedAt-header"]).format(
+                            "MMM D, YYYY",
+                          )}
+                        </ClientOnly>
                       </Typography>
                       <Typography elementKey={`events.${index}.role-text`} />
                     </Box>
@@ -56,7 +61,11 @@ const EventListing4: React.FC<ILevoBlockBaseProps<IEventListing4>> = () => {
                         elementKey={`events.${index}.event-end-date-icon`}
                       />
                       <Typography elementKey={`events.${index}.event-end-date`}>
-                        {dayjs(item?.ends_at).format("MMM D, YYYY")}
+                        <ClientOnly>
+                          {dayjs(item?.["event-end-date"]).format(
+                            "MMM D, YYYY",
+                          )}
+                        </ClientOnly>
                       </Typography>
                       <Typography elementKey={`events.${index}.company-text`} />
                     </Box>

package/src/blocks/event/event-listing.tsx

@@ -13,6 +13,7 @@ import {
 } from "@levo-so/studio";
 
 import type { IEventListing } from "./event-listing.schema";
+import { ClientOnly } from "./ClientOnly";
 
 const EventListing: React.FC<ILevoBlockBaseProps<IEventListing>> = () => {
   const { data, query, setQuery, meta } = useContentEngine("events");
@@ -36,8 +37,8 @@ const EventListing: React.FC<ILevoBlockBaseProps<IEventListing>> = () => {
               elementKey={`events.${index}.eventWrapper`}
             >
               <Image
-                height="60px"
-                width="120px"
+                height={200}
+                width={360}
                 elementKey={`events.${index}.image`}
                 alt="event poster"
               />
@@ -50,7 +51,11 @@ const EventListing: React.FC<ILevoBlockBaseProps<IEventListing>> = () => {
                     <Typography
                       elementKey={`events.${index}.publishedAt-header`}
                     >
-                      {dayjs(item?.starts_at).format("MMM D, YYYY")}
+                      <ClientOnly>
+                        {dayjs(item?.["publishedAt-header"]).format(
+                          "MMM D, YYYY",
+                        )}
+                      </ClientOnly>
                     </Typography>
                   </Box>
                 </Box>
@@ -58,7 +63,9 @@ const EventListing: React.FC<ILevoBlockBaseProps<IEventListing>> = () => {
                 <Typography elementKey={`events.${index}.title`} />
                 <Typography elementKey={`events.${index}.description`} />
                 <Typography elementKey={`events.${index}.publishedAt`}>
-                  {dayjs(item?.starts_at).format("MMM D, YYYY")}
+                  <ClientOnly>
+                    {dayjs(item?.publishedAt).format("MMM D, YYYY")}
+                  </ClientOnly>
                 </Typography>
               </Box>
             </Box>

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

@@ -33,6 +33,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",
+      features: [],
     },
     {
       wrapper: null,
@@ -43,6 +44,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",
+      features: [],
     },
     {
       wrapper: null,
@@ -53,6 +55,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",
+      features: [],
     },
     {
       wrapper: null,
@@ -63,6 +66,7 @@ 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",
+      features: [],
     },
   ],
 
@@ -212,6 +216,30 @@ export const Faq1: IBlock = {
             max_characters: 220,
           },
         },
+
+        {
+          key: "features",
+          label: "Features",
+          kind: "group",
+          field_interface: "BoxWidget",
+          fields: [
+            {
+              key: "wrapper",
+              label: "Wrapper",
+              field_interface: "BoxWidget",
+            },
+            {
+              key: "icon",
+              label: "Icon",
+              field_interface: "IconWidget",
+            },
+            {
+              key: "label",
+              label: "Label",
+              field_interface: "TypographyWidget",
+            },
+          ],
+        },
       ],
       hint: {
         prompt_description:
@@ -225,7 +253,6 @@ export const Faq1: IBlock = {
       label: "CTA",
       field_interface: "ButtonWidget",
     },
-
     {
       key: "faq_image",
       label: "Faq Image",
@@ -341,6 +368,36 @@ export const Faq1: IBlock = {
                 "align-items": "center",
                 "column-gap": "base",
               },
+              features_list: {
+                display: "flex",
+                "flex-direction": "row",
+                "column-gap": "lg",
+                "margin-top": "base",
+                "flex-wrap": "wrap",
+              },
+              features: [
+                {
+                  wrapper: {
+                    display: "flex",
+                    "align-items": "center",
+                    "column-gap": "xs",
+                    "background-color": "background-2",
+                    "padding-left": "sm",
+                    "padding-right": "sm",
+                    "padding-top": "2xs",
+                    "padding-bottom": "2xs",
+                    "border-radius": "md",
+                  },
+                  icon: {
+                    width: "16px",
+                    height: "16px",
+                  },
+                  label: {
+                    "font-size": "sm",
+                    color: "text-2",
+                  },
+                },
+              ],
             };
           }),
       },

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

@@ -31,7 +31,7 @@ const Faq1: React.FC<ILevoBlockBaseProps<IFaq1Content>> = ({ content }) => (
           data-levo_group
           defaultValue={`item-0`}
         >
-          {(content.faqs ?? []).map((_, index) => (
+          {(content.faqs ?? []).map((item: any, index) => (
             <AccordionItem
               value={`item-${index}`}
               key={index}
@@ -46,6 +46,23 @@ const Faq1: React.FC<ILevoBlockBaseProps<IFaq1Content>> = ({ content }) => (
               </AccordionTrigger>
               <AccordionContent elementKey={`faqs.${index}.content`}>
                 <Typography elementKey={`faqs.${index}.answer`} />
+                <Box elementKey={`faqs.${index}.features`}>
+                  {(item.features ?? []).map(
+                    (feature: any, featureIndex: number) => (
+                      <Box
+                        key={featureIndex}
+                        elementKey={`faqs.${index}.features.${featureIndex}.wrapper`}
+                      >
+                        <Icon
+                          elementKey={`faqs.${index}.features.${featureIndex}.icon`}
+                        />
+                        <Typography
+                          elementKey={`faqs.${index}.features.${featureIndex}.label`}
+                        />
+                      </Box>
+                    ),
+                  )}
+                </Box>
               </AccordionContent>
             </AccordionItem>
           ))}

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

@@ -1,9 +1,10 @@
+"use client";
+
 import React, { useState } from "react";
 import {
   type ILevoBlockBaseProps,
   Heading,
   Icon,
-  Image,
   Typography,
   Container,
   Section,

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

@@ -12,7 +12,7 @@ const DEFAULT_CONTENT = {
 
   // main content wrapper with accordion and image in row
   main_content_container: null,
-
+  header_cta: "Contact Us",
   // accordions wrapper
   accordions_container: null,
 
@@ -137,6 +137,11 @@ export const Faq3: IBlock = {
         max_characters: 120,
       },
     },
+    {
+      key: "header_cta",
+      label: "Header CTA",
+      field_interface: "ButtonWidget",
+    },
     {
       key: "main_content_container",
       label: "Main Content Container",

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

@@ -21,6 +21,7 @@ const Faq3: React.FC<ILevoBlockBaseProps<IFaq3Content>> = ({ content }) => (
       <Box elementKey="header_container">
         <Heading elementKey="title" />
         <Typography elementKey="description" />
+        <Button elementKey="header_cta" />
       </Box>
 
       <Box elementKey="main_content_container">

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

@@ -5,6 +5,7 @@ import {
   defaultFeatures1Variant,
   stylizedCardsV1Features1Variant,
   stylizedCardsV2Features1Variant,
+  stylizedCardsV3Features1Variant,
 } from "./variants";
 
 export type IFeatures1Content = typeof DEFAULT_CONTENT;
@@ -161,5 +162,6 @@ export const Features1: IBlock = {
     defaultFeatures1Variant,
     stylizedCardsV1Features1Variant,
     stylizedCardsV2Features1Variant,
+    stylizedCardsV3Features1Variant,
   ],
 };

package/src/blocks/features/features-1/variants/index.ts

@@ -1,10 +1,12 @@
 import { stylizedCardsV1Features1Variant } from "./stylized-cards-v1";
 import { stylizedCardsV2Features1Variant } from "./stylized-cards-v2";
+import { stylizedCardsV3Features1Variant } from "./stylized-cards-v3";
 import { defaultFeatures1Variant, DEFAULT_CONTENT } from "./default";
 
 export {
   stylizedCardsV1Features1Variant,
   stylizedCardsV2Features1Variant,
+  stylizedCardsV3Features1Variant,
   defaultFeatures1Variant,
   DEFAULT_CONTENT,
 };