@levo-so/blocks 0.1.101 → 0.1.103

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

@@ -1,39 +1,27 @@
 import type { IBlock } from "@levo-so/studio";
 
 const MEDIA_1 = {
-  id: "6Hgb5xxyg1bHs",
-  filename: "cta-2-1.png",
+  id: "7452758419847870025",
   kind: "image",
-  location: "https://static.levocdn.com/WLZ1TXTD/cta-2-1-XZbHqbcweGmtm.png",
-  srcset: {
-    "1080w": "https://static.levocdn.com/WLZ1TXTD/cta-2-1-XZbHqbcweGmtm-1080w.webp",
-    "1200w": "https://static.levocdn.com/WLZ1TXTD/cta-2-1-XZbHqbcweGmtm-1200w.webp",
-    "1920w": "https://static.levocdn.com/WLZ1TXTD/cta-2-1-XZbHqbcweGmtm-1920w.webp",
-    "320w": "https://static.levocdn.com/WLZ1TXTD/cta-2-1-XZbHqbcweGmtm-320w.webp",
-    "640w": "https://static.levocdn.com/WLZ1TXTD/cta-2-1-XZbHqbcweGmtm-640w.webp",
-    "750w": "https://static.levocdn.com/WLZ1TXTD/cta-2-1-XZbHqbcweGmtm-750w.webp",
-    "828w": "https://static.levocdn.com/WLZ1TXTD/cta-2-1-XZbHqbcweGmtm-828w.webp",
-    path: "https://static.levocdn.com/WLZ1TXTD/cta-2-1-XZbHqbcweGmtm-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/cta-2-1-XZbHqbcweGmtm-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/cta-2-1-XZbHqbcweGmtm-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/cta-2-1-XZbHqbcweGmtm-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/cta-2-1-XZbHqbcweGmtm-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/cta-2-1-XZbHqbcweGmtm-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/cta-2-1-XZbHqbcweGmtm-750w.webp 750w",
-  },
-  mimetype: "image/png",
-};
-
-const MEDIA_2 = {
-  id: "4JO6jlk23HzSb",
-  filename: "cta-2-2.jpg",
-  kind: "image",
-  location: "https://static.levocdn.com/WLZ1TXTD/cta-2-2-sR8GfjjdTwkQF.jpg",
+  location: "https://images.pexels.com/photos/33689718/pexels-photo-33689718.jpeg",
+  mimetype: "image/jpeg",
   srcset: {
-    "1080w": "https://static.levocdn.com/WLZ1TXTD/cta-2-2-sR8GfjjdTwkQF-1080w.webp",
-    "1200w": "https://static.levocdn.com/WLZ1TXTD/cta-2-2-sR8GfjjdTwkQF-1200w.webp",
-    "1920w": "https://static.levocdn.com/WLZ1TXTD/cta-2-2-sR8GfjjdTwkQF-1920w.webp",
-    "320w": "https://static.levocdn.com/WLZ1TXTD/cta-2-2-sR8GfjjdTwkQF-320w.webp",
-    "640w": "https://static.levocdn.com/WLZ1TXTD/cta-2-2-sR8GfjjdTwkQF-640w.webp",
-    "750w": "https://static.levocdn.com/WLZ1TXTD/cta-2-2-sR8GfjjdTwkQF-750w.webp",
-    "828w": "https://static.levocdn.com/WLZ1TXTD/cta-2-2-sR8GfjjdTwkQF-828w.webp",
-    path: "https://static.levocdn.com/WLZ1TXTD/cta-2-2-sR8GfjjdTwkQF-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/cta-2-2-sR8GfjjdTwkQF-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/cta-2-2-sR8GfjjdTwkQF-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/cta-2-2-sR8GfjjdTwkQF-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/cta-2-2-sR8GfjjdTwkQF-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/cta-2-2-sR8GfjjdTwkQF-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/cta-2-2-sR8GfjjdTwkQF-1080w.webp 1080w",
+    "320w":
+      "https://images.pexels.com/photos/33689718/pexels-photo-33689718.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=320",
+    "640w":
+      "https://images.pexels.com/photos/33689718/pexels-photo-33689718.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=640",
+    "750w":
+      "https://images.pexels.com/photos/33689718/pexels-photo-33689718.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=750",
+    "828w":
+      "https://images.pexels.com/photos/33689718/pexels-photo-33689718.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=828",
+    "1080w":
+      "https://images.pexels.com/photos/33689718/pexels-photo-33689718.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1080",
+    "1200w":
+      "https://images.pexels.com/photos/33689718/pexels-photo-33689718.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1200",
+    "1920w":
+      "https://images.pexels.com/photos/33689718/pexels-photo-33689718.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1920",
+    path: "https://images.pexels.com/photos/33689718/pexels-photo-33689718.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=320 320w, https://images.pexels.com/photos/33689718/pexels-photo-33689718.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=640 640w, https://images.pexels.com/photos/33689718/pexels-photo-33689718.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=750 750w, https://images.pexels.com/photos/33689718/pexels-photo-33689718.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=828 828w, https://images.pexels.com/photos/33689718/pexels-photo-33689718.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1080 1080w, https://images.pexels.com/photos/33689718/pexels-photo-33689718.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1200 1200w, https://images.pexels.com/photos/33689718/pexels-photo-33689718.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1920 1920w",
   },
-  mimetype: "image/jpeg",
 };
 
 const DEFAULT_CONTENT = {
@@ -41,22 +29,17 @@ const DEFAULT_CONTENT = {
   container: null,
   contentContainer: null,
 
-  // Left image
   leftImage: MEDIA_1,
 
-  // Right image
-  rightImage: MEDIA_2,
-
-  // Center content
-  title: "Your Transformation Starts Today",
+  title: "Your next build, engineered to schedule",
   description:
-    "No more guesswork. No more excuses. Just real, proven training that delivers results built around you.",
+    "We run the full lifecycle — feasibility, design, procurement, and site — under one accountable team. On budget, on program, every pour.",
   buttons: [
     {
-      text: "Book Your First Class",
+      text: "Book a site visit",
     },
     {
-      text: "Learn More",
+      text: "Download capabilities",
     },
   ],
 };
@@ -69,7 +52,7 @@ export const Cta2: IBlock = {
   key: "cta-2",
   version: "v1",
   prompt_description:
-    "Fitness-themed call-to-action with center content flanked by workout images, perfect for gym and fitness businesses",
+    "Construction-themed call-to-action with a site photo on the left and content on the right, built for engineering and construction firms",
 
   content_schema: [
     {
@@ -116,11 +99,6 @@ export const Cta2: IBlock = {
         },
       ],
     },
-    {
-      key: "rightImage",
-      label: "Right Image",
-      field_interface: "ImageWidget",
-    },
   ],
 
   layouts: [
@@ -141,7 +119,7 @@ export const Cta2: IBlock = {
           display: "flex",
           "align-items": "center",
           "justify-content": "space-between",
-          "column-gap": "2xl",
+          "column-gap": "3xl",
           tablet: {
             "flex-direction": "column",
             "row-gap": "xl",
@@ -154,56 +132,314 @@ export const Cta2: IBlock = {
           },
         },
         leftImage: {
-          width: "300px",
-          height: "200px",
+          width: "440px",
+          height: "300px",
+          "aspect-ratio": "3 / 2",
           "object-fit": "cover",
-          "border-radius": "base",
+          "border-radius": "lg",
+          "flex-shrink": "0",
           tablet: {
-            width: "250px",
-            height: "160px",
+            width: "360px",
+            height: "240px",
           },
           mobile: {
-            width: "200px",
-            height: "130px",
+            width: "100%",
+            height: "220px",
           },
         },
-        rightImage: {
-          width: "300px",
-          height: "200px",
-          "object-fit": "cover",
-          "border-radius": "base",
+        contentContainer: {
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "flex-start",
+          "row-gap": "sm",
+          "flex-grow": "1",
           tablet: {
-            width: "250px",
-            height: "160px",
+            "align-items": "center",
           },
           mobile: {
-            width: "200px",
-            height: "130px",
+            "align-items": "center",
+          },
+        },
+        title: {
+          "margin-bottom": "0",
+        },
+        description: {
+          "margin-bottom": "base",
+        },
+        buttons_levoGroup: {
+          display: "flex",
+          "flex-direction": "row",
+          "column-gap": "base",
+          "align-items": "center",
+          mobile: {
+            "flex-direction": "column",
+            "row-gap": "sm",
+            width: "100%",
+          },
+        },
+        buttons: [
+          {
+            text: {
+              selectedVariants: {
+                Button_Variants: "Primary",
+              },
+            },
+          },
+          {
+            text: {
+              selectedVariants: {
+                Button_Variants: "Secondary",
+              },
+            },
+          },
+        ],
+      },
+    },
+    {
+      title: "No Images",
+      key: "no_images",
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          selectedVariants: {
+            Heading_Level: "H2",
           },
         },
+      },
+      styles: {
+        layout: {},
+        container: {
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "center",
+          "text-align": "center",
+        },
+        leftImage: {
+          display: "none",
+        },
         contentContainer: {
           display: "flex",
           "flex-direction": "column",
           "align-items": "center",
           "text-align": "center",
-          "row-gap": "base",
-          "flex-grow": "1",
-          "max-width": "600px",
+          "row-gap": "sm",
+          "max-width": "700px",
         },
         title: {
+          "margin-bottom": "0",
+        },
+        description: {
           "margin-bottom": "base",
         },
+        buttons_levoGroup: {
+          display: "flex",
+          "flex-direction": "row",
+          "column-gap": "base",
+          "align-items": "center",
+          "justify-content": "center",
+          mobile: {
+            "flex-direction": "column",
+            "row-gap": "sm",
+            width: "100%",
+          },
+        },
+        buttons: [
+          {
+            text: {
+              selectedVariants: {
+                Button_Variants: "Primary",
+              },
+            },
+          },
+          {
+            text: {
+              selectedVariants: {
+                Button_Variants: "Secondary",
+              },
+            },
+          },
+        ],
+      },
+    },
+    {
+      title: "Card",
+      key: "card",
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+      },
+      styles: {
+        layout: {
+          "background-color": "background-1",
+        },
+        container: {
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "center",
+          "text-align": "center",
+          "background-color": "white",
+          "border-radius": "lg",
+          "border-width": "1px",
+          "border-style": "solid",
+          "border-color": "border",
+          "padding-top": "4xl",
+          "padding-bottom": "4xl",
+          "padding-left": "3xl",
+          "padding-right": "3xl",
+          "box-shadow": "lg",
+          mobile: {
+            "padding-top": "2xl",
+            "padding-bottom": "2xl",
+            "padding-left": "lg",
+            "padding-right": "lg",
+          },
+        },
+        leftImage: {
+          display: "none",
+        },
+        contentContainer: {
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "center",
+          "text-align": "center",
+          "row-gap": "sm",
+          "max-width": "600px",
+        },
+        title: {
+          "margin-bottom": "0",
+        },
         description: {
-          "margin-bottom": "lg",
+          "margin-bottom": "base",
         },
         buttons_levoGroup: {
           display: "flex",
           "flex-direction": "row",
           "column-gap": "base",
           "align-items": "center",
+          "justify-content": "center",
           mobile: {
             "flex-direction": "column",
             "row-gap": "sm",
+            width: "100%",
+          },
+        },
+        buttons: [
+          {
+            text: {
+              selectedVariants: {
+                Button_Variants: "Primary",
+              },
+            },
+          },
+          {
+            text: {
+              selectedVariants: {
+                Button_Variants: "Secondary",
+              },
+            },
+          },
+        ],
+      },
+    },
+    {
+      title: "Compact",
+      key: "compact",
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          selectedVariants: {
+            Heading_Level: "H3",
+          },
+          heading: {
+            level: 3,
+          },
+        },
+      },
+      styles: {
+        layout: {
+          "padding-top": "lg",
+          "padding-bottom": "lg",
+        },
+        container: {
+          display: "flex",
+          "flex-direction": "row",
+          "align-items": "center",
+          "column-gap": "xl",
+          tablet: {
+            "flex-direction": "column",
+            "row-gap": "base",
+            "text-align": "center",
+            "align-items": "center",
+          },
+          mobile: {
+            "flex-direction": "column",
+            "row-gap": "base",
+            "text-align": "center",
+            "align-items": "center",
+          },
+        },
+        leftImage: {
+          width: "280px",
+          height: "160px",
+          "aspect-ratio": "7 / 4",
+          "object-fit": "cover",
+          "border-radius": "base",
+          "flex-shrink": "0",
+          tablet: {
+            width: "360px",
+            height: "200px",
+          },
+          mobile: {
+            width: "100%",
+            height: "180px",
+          },
+        },
+        contentContainer: {
+          display: "flex",
+          "flex-direction": "row",
+          "align-items": "center",
+          "column-gap": "lg",
+          "row-gap": "xs",
+          "flex-grow": "1",
+          "flex-wrap": "wrap",
+          tablet: {
+            "flex-direction": "column",
+            "text-align": "center",
+          },
+          mobile: {
+            "flex-direction": "column",
+            "text-align": "center",
+          },
+        },
+        title: {
+          "margin-bottom": "0",
+          "flex-shrink": "1",
+          "min-width": "0",
+        },
+        description: {
+          "margin-bottom": "0",
+          "flex-basis": "100%",
+        },
+        buttons_levoGroup: {
+          display: "flex",
+          "flex-direction": "row",
+          "column-gap": "sm",
+          "align-items": "center",
+          "margin-left": "auto",
+          "flex-shrink": "0",
+          tablet: {
+            "margin-left": "0",
+            "justify-content": "center",
+          },
+          mobile: {
+            "flex-direction": "column",
+            "row-gap": "xs",
+            "margin-left": "0",
+            width: "100%",
           },
         },
         buttons: [

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

@@ -14,7 +14,7 @@ import type { ICta2Content } from "./cta-2.schema";
 const Cta2: React.FC<ILevoBlockBaseProps<ICta2Content>> = ({ content }) => (
   <Section elementKey="layout">
     <Container elementKey="container">
-      <Image elementKey="leftImage" alt="Left fitness image" />
+      <Image elementKey="leftImage" alt="" />
       <Box elementKey="contentContainer">
         <Heading elementKey="title" />
         <Typography elementKey="description" />
@@ -24,7 +24,6 @@ const Cta2: React.FC<ILevoBlockBaseProps<ICta2Content>> = ({ content }) => (
           ))}
         </Box>
       </Box>
-      <Image elementKey="rightImage" alt="Right fitness image" />
     </Container>
   </Section>
 );