@levo-so/blocks 0.1.60 → 0.1.62

package/src/blocks/footer/footer-5.schema.ts

@@ -15,23 +15,15 @@ const MEDIA = {
   id: "k5KiTxROzoNX",
   filename: "footer-5-logo.png",
   kind: "image",
-  location:
-    "https://static.levocdn.com/WLZ1TXTD/footer-5-logo-PzNWMN1fGVV4.png",
+  location: "https://static.levocdn.com/WLZ1TXTD/footer-5-logo-PzNWMN1fGVV4.png",
   srcset: {
-    "1080w":
-      "https://static.levocdn.com/WLZ1TXTD/footer-5-logo-PzNWMN1fGVV4-1080w.webp",
-    "1200w":
-      "https://static.levocdn.com/WLZ1TXTD/footer-5-logo-PzNWMN1fGVV4-1200w.webp",
-    "1920w":
-      "https://static.levocdn.com/WLZ1TXTD/footer-5-logo-PzNWMN1fGVV4-1920w.webp",
-    "320w":
-      "https://static.levocdn.com/WLZ1TXTD/footer-5-logo-PzNWMN1fGVV4-320w.webp",
-    "640w":
-      "https://static.levocdn.com/WLZ1TXTD/footer-5-logo-PzNWMN1fGVV4-640w.webp",
-    "750w":
-      "https://static.levocdn.com/WLZ1TXTD/footer-5-logo-PzNWMN1fGVV4-750w.webp",
-    "828w":
-      "https://static.levocdn.com/WLZ1TXTD/footer-5-logo-PzNWMN1fGVV4-828w.webp",
+    "1080w": "https://static.levocdn.com/WLZ1TXTD/footer-5-logo-PzNWMN1fGVV4-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/footer-5-logo-PzNWMN1fGVV4-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/footer-5-logo-PzNWMN1fGVV4-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/footer-5-logo-PzNWMN1fGVV4-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/footer-5-logo-PzNWMN1fGVV4-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/footer-5-logo-PzNWMN1fGVV4-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/footer-5-logo-PzNWMN1fGVV4-828w.webp",
     path: "https://static.levocdn.com/WLZ1TXTD/footer-5-logo-PzNWMN1fGVV4-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/footer-5-logo-PzNWMN1fGVV4-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/footer-5-logo-PzNWMN1fGVV4-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/footer-5-logo-PzNWMN1fGVV4-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/footer-5-logo-PzNWMN1fGVV4-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/footer-5-logo-PzNWMN1fGVV4-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/footer-5-logo-PzNWMN1fGVV4-640w.webp 640w",
   },
   mimetype: "image/png",
@@ -45,19 +37,13 @@ const DEFAULT_CONTENT = {
   // logo and description
   logoTextWrapper: null,
   logo: MEDIA,
-  logoDescription:
-    "No more guesswork. No more excuses. Just real, proven training.",
+  logoDescription: "No more guesswork. No more excuses. Just real, proven training.",
 
   // middle links area
   links: [
     {
       category: "Links",
-      links: [
-        { text: "About" },
-        { text: "Trainer" },
-        { text: "Program" },
-        { text: "Location" },
-      ],
+      links: [{ text: "About" }, { text: "Trainer" }, { text: "Program" }, { text: "Location" }],
     },
     {
       category: "About us",

package/src/blocks/footer/footer-5.tsx

@@ -1,20 +1,18 @@
-import React from "react";
 import {
   Box,
   Container,
   Heading,
   Icon,
+  type ILevoBlockBaseProps,
   Image,
   Section,
   Typography,
-  type ILevoBlockBaseProps,
 } from "@levo-so/studio";
+import React from "react";
 
-import { type IFooter5Content } from "./footer-5.schema";
+import type { IFooter5Content } from "./footer-5.schema";
 
-const Footer5: React.FC<ILevoBlockBaseProps<IFooter5Content>> = ({
-  content,
-}) => (
+const Footer5: React.FC<ILevoBlockBaseProps<IFooter5Content>> = ({ content }) => (
   <Section elementKey="layout">
     <Container elementKey="container">
       <Box elementKey="contentWrapper">
@@ -33,19 +31,14 @@ const Footer5: React.FC<ILevoBlockBaseProps<IFooter5Content>> = ({
               data-levo_group_item
             >
               <Heading elementKey={`links.${index}.category`} />
-              <Box
-                elementKey={`links.${index}.links_levoGroup`}
-                data-levo_group
-              >
+              <Box elementKey={`links.${index}.links_levoGroup`} data-levo_group>
                 {(content?.links?.[index]?.links ?? []).map((_, subIndex) => (
                   <Box
                     elementKey={`links.${index}.links.${subIndex}.iconWrapper`}
                     key={`footer-5-links-${index}-${subIndex}`}
                     data-levo_group_item
                   >
-                    <Icon
-                      elementKey={`links.${index}.links.${subIndex}.icon`}
-                    />
+                    <Icon elementKey={`links.${index}.links.${subIndex}.icon`} />
                     <Typography
                       elementKey={`links.${index}.links.${subIndex}.text`}
                       key={`footer-4-links-${index}-${subIndex}`}
@@ -64,22 +57,14 @@ const Footer5: React.FC<ILevoBlockBaseProps<IFooter5Content>> = ({
 
         {/* Right Area */}
         <Box elementKey="footerBottomRightArea_levoGroup" data-levo_group>
-          {(content?.footerBottomRightArea ?? [])?.map(
-            (_: any, index: number) => (
-              <React.Fragment key={`footer-4-right-area-${index}`}>
-                <Typography
-                  data-levo_group_item
-                  elementKey={`footerBottomRightArea.${index}.cta`}
-                />
-                {index < (content?.footerBottomRightArea?.length ?? 0) - 1 && (
-                  <Box
-                    elementKey={`footerBottomRightArea.${index}.separator`}
-                    data-levo_group_item
-                  />
-                )}
-              </React.Fragment>
-            ),
-          )}
+          {(content?.footerBottomRightArea ?? [])?.map((_: any, index: number) => (
+            <React.Fragment key={`footer-4-right-area-${index}`}>
+              <Typography data-levo_group_item elementKey={`footerBottomRightArea.${index}.cta`} />
+              {index < (content?.footerBottomRightArea?.length ?? 0) - 1 && (
+                <Box elementKey={`footerBottomRightArea.${index}.separator`} data-levo_group_item />
+              )}
+            </React.Fragment>
+          ))}
         </Box>
 
         {/* Social Icons */}

package/src/blocks/footer/footer-6.schema.ts

@@ -4,23 +4,15 @@ const MEDIA = {
   id: "oilvrpqtlHti",
   filename: "footer-6-logo.png",
   kind: "image",
-  location:
-    "https://static.levocdn.com/WLZ1TXTD/footer-6-logo-MqnQyg87rAAT.png",
+  location: "https://static.levocdn.com/WLZ1TXTD/footer-6-logo-MqnQyg87rAAT.png",
   srcset: {
-    "1080w":
-      "https://static.levocdn.com/WLZ1TXTD/footer-6-logo-MqnQyg87rAAT-1080w.webp",
-    "1200w":
-      "https://static.levocdn.com/WLZ1TXTD/footer-6-logo-MqnQyg87rAAT-1200w.webp",
-    "1920w":
-      "https://static.levocdn.com/WLZ1TXTD/footer-6-logo-MqnQyg87rAAT-1920w.webp",
-    "320w":
-      "https://static.levocdn.com/WLZ1TXTD/footer-6-logo-MqnQyg87rAAT-320w.webp",
-    "640w":
-      "https://static.levocdn.com/WLZ1TXTD/footer-6-logo-MqnQyg87rAAT-640w.webp",
-    "750w":
-      "https://static.levocdn.com/WLZ1TXTD/footer-6-logo-MqnQyg87rAAT-750w.webp",
-    "828w":
-      "https://static.levocdn.com/WLZ1TXTD/footer-6-logo-MqnQyg87rAAT-828w.webp",
+    "1080w": "https://static.levocdn.com/WLZ1TXTD/footer-6-logo-MqnQyg87rAAT-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/footer-6-logo-MqnQyg87rAAT-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/footer-6-logo-MqnQyg87rAAT-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/footer-6-logo-MqnQyg87rAAT-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/footer-6-logo-MqnQyg87rAAT-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/footer-6-logo-MqnQyg87rAAT-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/footer-6-logo-MqnQyg87rAAT-828w.webp",
     path: "https://static.levocdn.com/WLZ1TXTD/footer-6-logo-MqnQyg87rAAT-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/footer-6-logo-MqnQyg87rAAT-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/footer-6-logo-MqnQyg87rAAT-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/footer-6-logo-MqnQyg87rAAT-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/footer-6-logo-MqnQyg87rAAT-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/footer-6-logo-MqnQyg87rAAT-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/footer-6-logo-MqnQyg87rAAT-750w.webp 750w",
   },
   mimetype: "image/png",
@@ -32,8 +24,7 @@ const DEFAULT_CONTENT = {
   contentWrapper: null,
   logoTextWrapper: null,
   logo: MEDIA,
-  logoDescription:
-    "<p>No more guesswork. No more excuses. Just real, proven training.</p><p></p>",
+  logoDescription: "<p>No more guesswork. No more excuses. Just real, proven training.</p><p></p>",
   icon_links: [
     {
       icon: {
@@ -41,13 +32,7 @@ const DEFAULT_CONTENT = {
         data: {
           id: "sms-notification",
           label: "Sms Notification",
-          tags: [
-            "custom",
-            "directional",
-            "emails-messages",
-            "notification",
-            "sms",
-          ],
+          tags: ["custom", "directional", "emails-messages", "notification", "sms"],
           svgCode:
             '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M17 21.25H7C3.35 21.25 1.25 19.15 1.25 15.5V8.5C1.25 4.85 3.35 2.75 7 2.75H14C14.41 2.75 14.75 3.09 14.75 3.5C14.75 3.91 14.41 4.25 14 4.25H7C4.14 4.25 2.75 5.64 2.75 8.5V15.5C2.75 18.36 4.14 19.75 7 19.75H17C19.86 19.75 21.25 18.36 21.25 15.5V10.5C21.25 10.09 21.59 9.75 22 9.75C22.41 9.75 22.75 10.09 22.75 10.5V15.5C22.75 19.15 20.65 21.25 17 21.25Z" fill="var(--color-icon-primary)"/>\n<path d="M11.9998 12.87C11.1598 12.87 10.3098 12.61 9.65978 12.08L6.52978 9.58002C6.20978 9.32002 6.14978 8.85002 6.40978 8.53002C6.66978 8.21002 7.13977 8.15003 7.45977 8.41003L10.5898 10.91C11.3498 11.52 12.6398 11.52 13.3998 10.91L14.5798 9.97002C14.8998 9.71002 15.3798 9.76002 15.6298 10.09C15.8898 10.41 15.8398 10.89 15.5098 11.14L14.3298 12.08C13.6898 12.61 12.8398 12.87 11.9998 12.87Z" fill="var(--color-icon-primary)"/>\n<path d="M19.5 8.75C17.71 8.75 16.25 7.29 16.25 5.5C16.25 3.71 17.71 2.25 19.5 2.25C21.29 2.25 22.75 3.71 22.75 5.5C22.75 7.29 21.29 8.75 19.5 8.75ZM19.5 3.75C18.54 3.75 17.75 4.54 17.75 5.5C17.75 6.46 18.54 7.25 19.5 7.25C20.46 7.25 21.25 6.46 21.25 5.5C21.25 4.54 20.46 3.75 19.5 3.75Z" fill="var(--color-icon-primary)"/>\n</svg>',
         },

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

@@ -1,20 +1,18 @@
 import {
   Box,
   Container,
+  Form,
+  Heading,
   Icon,
+  type ILevoBlockBaseProps,
   Image,
   Section,
   Typography,
-  Form,
-  type ILevoBlockBaseProps,
-  Heading,
 } from "@levo-so/studio";
 
-import { type IFooter6Content } from "./footer-6.schema";
+import type { IFooter6Content } from "./footer-6.schema";
 
-const Footer6: React.FC<ILevoBlockBaseProps<IFooter6Content>> = ({
-  content,
-}) => (
+const Footer6: React.FC<ILevoBlockBaseProps<IFooter6Content>> = ({ content }) => (
   <Section elementKey="layout">
     <Container elementKey="container">
       <Box elementKey="contentWrapper">
@@ -22,23 +20,19 @@ const Footer6: React.FC<ILevoBlockBaseProps<IFooter6Content>> = ({
           <Image elementKey="logo" height={26} width={26} alt="footer-logo" />
           <Typography elementKey="logoDescription" />
           <Box elementKey="icon_links_levoGroup" data-levo_group>
-            {((content as any)?.icon_links ?? [])?.map(
-              (_: any, index: number) => (
-                <Box
-                  key={`footer-6-icon-${index}`}
-                  data-levo_group_item
-                  elementKey={`icon_links.${index}.content_wrapper`}
-                >
-                  <Icon elementKey={`icon_links.${index}.icon`} />
-                  <Box elementKey={`icon_links.${index}.text_wrapper`}>
-                    <Typography elementKey={`icon_links.${index}.label`} />
-                    <Typography
-                      elementKey={`icon_links.${index}.description`}
-                    />
-                  </Box>
+            {((content as any)?.icon_links ?? [])?.map((_: any, index: number) => (
+              <Box
+                key={`footer-6-icon-${index}`}
+                data-levo_group_item
+                elementKey={`icon_links.${index}.content_wrapper`}
+              >
+                <Icon elementKey={`icon_links.${index}.icon`} />
+                <Box elementKey={`icon_links.${index}.text_wrapper`}>
+                  <Typography elementKey={`icon_links.${index}.label`} />
+                  <Typography elementKey={`icon_links.${index}.description`} />
                 </Box>
-              ),
-            )}
+              </Box>
+            ))}
           </Box>
         </Box>
 
@@ -50,22 +44,15 @@ const Footer6: React.FC<ILevoBlockBaseProps<IFooter6Content>> = ({
               data-levo_group_item
             >
               <Heading elementKey={`links.${index}.category`} />
-              <Box
-                elementKey={`links.${index}.links_levoGroup`}
-                data-levo_group
-              >
+              <Box elementKey={`links.${index}.links_levoGroup`} data-levo_group>
                 {(link?.links ?? [])?.map((subLink: any, subIndex: number) => (
                   <Box
                     elementKey={`links.${index}.links.${subIndex}.wrapper`}
                     key={`footer-6-links-${index}-${subIndex}`}
                     data-levo_group_item
                   >
-                    <Icon
-                      elementKey={`links.${index}.links.${subIndex}.icon`}
-                    />
-                    <Typography
-                      elementKey={`links.${index}.links.${subIndex}.cta`}
-                    />
+                    <Icon elementKey={`links.${index}.links.${subIndex}.icon`} />
+                    <Typography elementKey={`links.${index}.links.${subIndex}.cta`} />
                   </Box>
                 ))}
               </Box>
@@ -76,17 +63,15 @@ const Footer6: React.FC<ILevoBlockBaseProps<IFooter6Content>> = ({
             <Form elementKey="contact_form" />
             <Typography elementKey="social_icons_title" />
             <Box data-levo_group elementKey={`social_icon_links_levoGroup`}>
-              {(content?.social_icon_links ?? []).map(
-                (_: unknown, linkIndex: number) => (
-                  <Box
-                    data-levo_group_item
-                    elementKey={`social_icon_links.${linkIndex}.wrapper`}
-                    key={`footer-6-social-icon-${linkIndex}`}
-                  >
-                    <Icon elementKey={`social_icon_links.${linkIndex}.icon`} />
-                  </Box>
-                ),
-              )}
+              {(content?.social_icon_links ?? []).map((_: unknown, linkIndex: number) => (
+                <Box
+                  data-levo_group_item
+                  elementKey={`social_icon_links.${linkIndex}.wrapper`}
+                  key={`footer-6-social-icon-${linkIndex}`}
+                >
+                  <Icon elementKey={`social_icon_links.${linkIndex}.icon`} />
+                </Box>
+              ))}
             </Box>
           </Box>
         </Box>

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

@@ -0,0 +1,144 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  title: "Survey Form",
+  description:
+    "Ready to discuss your financial ambitions? Connect with our team and let's build your future together.",
+  ctas: [{ cta: "Learn More" }, { cta: "Contact Us" }],
+  form: null,
+};
+
+export type IForm1Content = typeof DEFAULT_CONTENT;
+
+export const Form1: IBlock = {
+  category_id: "form",
+  title: "Form 1",
+  key: "form-1",
+  version: "v1",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+    },
+    {
+      key: "header",
+      label: "Layout Content Wrapper",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "text-wrapper",
+      label: "Text Wrapper",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+    },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "ctas",
+      label: "CTAs",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "cta",
+          label: "CTA",
+          field_interface: "ButtonWidget",
+        },
+      ],
+    },
+    {
+      key: "form",
+      label: "Form",
+      field_interface: "FormWidget",
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {},
+        container: {},
+        title: {
+          tablet: {
+            "text-align": "center",
+          },
+        },
+        description: {
+          tablet: {
+            "text-align": "center",
+          },
+        },
+        ctas_levoGroup: {
+          display: "flex",
+          gap: "3xl",
+          "column-gap": "md",
+        },
+        form: {
+          "border-style": "solid",
+          "border-width": "1px",
+          "border-color": "var(--color-border)",
+          "border-radius": "xl",
+        },
+        header: {
+          display: "flex",
+          "align-items": "center",
+          "justify-content": "space-between",
+          "margin-bottom": "7xl",
+          tablet: {
+            "flex-direction": "column",
+            "row-gap": "md",
+          },
+          mobile: {
+            "row-gap": "base",
+          },
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          heading: {
+            level: 2,
+          },
+          selectedVariants: {
+            Heading_Level: "H4",
+          },
+        },
+        ctas: [
+          {
+            cta: {
+              selectedVariants: {},
+            },
+          },
+          {
+            cta: {
+              selectedVariants: {
+                Button_Variants: "Secondary",
+              },
+            },
+          },
+        ],
+        description: {
+          selectedVariants: {
+            Typography_Variants: "Small",
+          },
+        },
+      },
+    },
+  ],
+};

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

@@ -0,0 +1,33 @@
+import {
+  Box,
+  Button,
+  Container,
+  Form,
+  Heading,
+  type ILevoBlockBaseProps,
+  Section,
+  Typography,
+} from "@levo-so/studio";
+
+import type { IForm1Content } from "./form-1.schema";
+
+const Form1: React.FC<ILevoBlockBaseProps<IForm1Content>> = ({ content }) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="header">
+        <Box elementKey="text-wrapper">
+          <Heading elementKey="title" />
+          <Typography elementKey="description" />
+        </Box>
+        <Box elementKey="ctas_levoGroup" data-levo_group>
+          {(content.ctas ?? []).map((_, index) => (
+            <Button elementKey={`ctas.${index}.cta`} key={`cta-${index}`} data-levo_group_item />
+          ))}
+        </Box>
+      </Box>
+      <Form elementKey="form" />
+    </Container>
+  </Section>
+);
+
+export default Form1;