@levo-so/blocks 0.1.101 → 0.1.102

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

@@ -1,31 +1,37 @@
 import type { IBlock } from "@levo-so/studio";
 
 const MEDIA = {
-  id: "vxmyzMseZ4pK",
-  filename: "hero-2.png",
+  id: "7453077972412839722",
   kind: "image",
-  location: "https://static.levocdn.com/WLZ1TXTD/hero-2-MqnYyg8ypOfo.png",
+  location: "https://images.pexels.com/photos/7793715/pexels-photo-7793715.jpeg",
+  mimetype: "image/jpeg",
   srcset: {
-    "1080w": "https://static.levocdn.com/WLZ1TXTD/hero-2-MqnYyg8ypOfo-1080w.webp",
-    "1200w": "https://static.levocdn.com/WLZ1TXTD/hero-2-MqnYyg8ypOfo-1200w.webp",
-    "1920w": "https://static.levocdn.com/WLZ1TXTD/hero-2-MqnYyg8ypOfo-1920w.webp",
-    "320w": "https://static.levocdn.com/WLZ1TXTD/hero-2-MqnYyg8ypOfo-320w.webp",
-    "640w": "https://static.levocdn.com/WLZ1TXTD/hero-2-MqnYyg8ypOfo-640w.webp",
-    "750w": "https://static.levocdn.com/WLZ1TXTD/hero-2-MqnYyg8ypOfo-750w.webp",
-    "828w": "https://static.levocdn.com/WLZ1TXTD/hero-2-MqnYyg8ypOfo-828w.webp",
-    path: "https://static.levocdn.com/WLZ1TXTD/hero-2-MqnYyg8ypOfo-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/hero-2-MqnYyg8ypOfo-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/hero-2-MqnYyg8ypOfo-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/hero-2-MqnYyg8ypOfo-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/hero-2-MqnYyg8ypOfo-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/hero-2-MqnYyg8ypOfo-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/hero-2-MqnYyg8ypOfo-1920w.webp 1920w",
+    "320w":
+      "https://images.pexels.com/photos/7793715/pexels-photo-7793715.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=320",
+    "640w":
+      "https://images.pexels.com/photos/7793715/pexels-photo-7793715.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=640",
+    "750w":
+      "https://images.pexels.com/photos/7793715/pexels-photo-7793715.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=750",
+    "828w":
+      "https://images.pexels.com/photos/7793715/pexels-photo-7793715.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=828",
+    "1080w":
+      "https://images.pexels.com/photos/7793715/pexels-photo-7793715.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1080",
+    "1200w":
+      "https://images.pexels.com/photos/7793715/pexels-photo-7793715.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1200",
+    "1920w":
+      "https://images.pexels.com/photos/7793715/pexels-photo-7793715.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1920",
+    path: "https://images.pexels.com/photos/7793715/pexels-photo-7793715.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=320 320w, https://images.pexels.com/photos/7793715/pexels-photo-7793715.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=640 640w, https://images.pexels.com/photos/7793715/pexels-photo-7793715.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=750 750w, https://images.pexels.com/photos/7793715/pexels-photo-7793715.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=828 828w, https://images.pexels.com/photos/7793715/pexels-photo-7793715.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1080 1080w, https://images.pexels.com/photos/7793715/pexels-photo-7793715.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1200 1200w, https://images.pexels.com/photos/7793715/pexels-photo-7793715.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1920 1920w",
   },
-  mimetype: "image/png",
 };
 
 const DEFAULT_CONTENT = {
   layout: null,
   content_wrapper: null,
-  title: "Where Freshers Prepare and Land Their First Job",
-  accent_heading: "India's Largest Career Network Platform",
+  accent_heading: "MODERN TEAM OS",
+  title: "Operating System for fast-moving teams",
   sub_title:
-    "Curated exclusively for freshers, LineupX connect freshers and students with over 500 top employers actively recruiting from 100+ academic institutes. Our AI-powered tools help prepare and match you to maximize the opportunities for a perfect first job.",
-  button: "Book a Demo",
+    "Plan sprints, automate handoffs, and ship weekly without the tab sprawl. Real-time sync across docs, tasks, and reviews keeps every team aligned from spec to release.",
+  button: "Start free trial",
   image_desktop: MEDIA,
   image_mobile: MEDIA,
 };
@@ -38,7 +44,7 @@ export const Hero2: IBlock = {
   key: "hero-2",
   version: "v1",
   prompt_description:
-    "Hero section featuring a vibrant illustration of connected user profiles, interface elements, and company logos, suggesting networking and opportunity, placed below headline, subheadline, and a central call-to-action button.",
+    "Centered hero section for a B2B SaaS product. Stacks a branded uppercase label, a bold headline, a supporting paragraph, and a single primary CTA over a wide landscape product or team photograph. Built for strong vertical hierarchy on landing pages.",
   content_schema: [
     {
       key: "layout",
@@ -46,7 +52,7 @@ export const Hero2: IBlock = {
       field_interface: "LayoutWidget",
       hint: {
         prompt_description:
-          "Defines the overall structural layout of the hero section, typically a centered columnar block with accent heading, title, subtitle, call-to-action, and supporting visuals. Should maintain strong visual hierarchy and balanced spacing for a modern landing page.",
+          "Full-width hero layout with a centered content column. Works on marketing home pages and top-of-funnel landing pages.",
       },
     },
     {
@@ -55,7 +61,7 @@ export const Hero2: IBlock = {
       field_interface: "ContainerWidget",
       hint: {
         prompt_description:
-          "Main bounding container for the hero content. Ensures adequate horizontal margins and vertically centers content for desktop and mobile. Should maintain clarity and visual focus on the central text and CTA.",
+          "Bounds hero content to a comfortable reading width with responsive horizontal padding. Vertically centers the text column.",
       },
     },
     {
@@ -64,7 +70,7 @@ export const Hero2: IBlock = {
       field_interface: "BoxWidget",
       hint: {
         prompt_description:
-          "A wrapper providing padding and alignment for the hero section’s textual content and primary call-to-action. Ensures optimal legibility and separation from background or visual elements.",
+          "Flex column that stacks label, headline, sub-title, CTA, and hero image with consistent vertical rhythm.",
       },
     },
     {
@@ -73,9 +79,9 @@ export const Hero2: IBlock = {
       field_interface: "TypographyWidget",
       hint: {
         prompt_description:
-          "A short, uppercase or emphasized phrase placed above the main headline to introduce the platform’s unique value or status. Should be concise, attention-grabbing, and use a confident, aspirational tone.",
-        min_characters: 20,
-        max_characters: 60,
+          "Short uppercase branded label above the headline. Communicates category or status. Keep it under 4 words.",
+        min_characters: 10,
+        max_characters: 40,
       },
     },
     {
@@ -84,8 +90,8 @@ export const Hero2: IBlock = {
       field_interface: "HeadingWidget",
       hint: {
         prompt_description:
-          "The main headline of the hero section, designed to immediately communicate the core outcome or promise of the platform for freshers and students. Should be bold, clear, and aspirational.",
-        min_characters: 40,
+          "Primary hero headline. Confident, specific, outcome-led. Avoid generic SaaS language.",
+        min_characters: 30,
         max_characters: 80,
       },
     },
@@ -95,9 +101,9 @@ export const Hero2: IBlock = {
       field_interface: "TypographyWidget",
       hint: {
         prompt_description:
-          "A descriptive paragraph summarizing the platform’s offering, tools, and unique advantages. Should elaborate on the headline, be informative and approachable, and fit as a supporting lead under the main title.",
-        min_characters: 120,
-        max_characters: 300,
+          "Supporting paragraph under the headline. Names the mechanism (real-time sync, webhooks, automations) and the outcome.",
+        min_characters: 100,
+        max_characters: 260,
       },
     },
     {
@@ -106,36 +112,9 @@ export const Hero2: IBlock = {
       field_interface: "ButtonWidget",
       hint: {
         prompt_description:
-          "Primary call-to-action button. Clear, direct, and action-oriented to prompt users to book a demo or get started. Should use a friendly but confident tone and fit on one line.",
+          "Single primary call-to-action. Short, action-led verb phrase (Start free trial, Book a demo).",
         min_characters: 8,
-        max_characters: 32,
-      },
-    },
-    {
-      key: "hero_ctas",
-      label: "CTA Group",
-      kind: "group",
-      field_interface: "BoxWidget",
-      fields: [
-        {
-          key: "button",
-          label: "Button",
-          field_interface: "ButtonWidget",
-          hint: {
-            prompt_description: "Call-to-action button",
-            min_characters: 8,
-            max_characters: 18,
-          },
-        },
-      ],
-    },
-    {
-      key: "spacer",
-      label: "Spacer",
-      field_interface: "BoxWidget",
-      hint: {
-        prompt_description:
-          "An element to visually separate content blocks or add vertical spacing between the text content and the illustrative hero image, ensuring a balanced layout.",
+        max_characters: 24,
       },
     },
     {
@@ -144,7 +123,7 @@ export const Hero2: IBlock = {
       field_interface: "BoxWidget",
       hint: {
         prompt_description:
-          "A container for positioning and scaling the hero illustration or composite imagery, ensuring it aligns harmoniously with the surrounding text and background elements.",
+          "Container for the hero image. Controls width, aspect ratio, and spacing below the CTA.",
       },
     },
     {
@@ -153,7 +132,7 @@ export const Hero2: IBlock = {
       field_interface: "MediaWidget",
       hint: {
         prompt_description:
-          "Main illustrative or composite image for the hero section on desktop. Should visually reinforce the platform’s focus on freshers, students, and job opportunities. Orientation is landscape, size is large to cover significant horizontal space, with role as hero/lead illustrative visual.",
+          "Wide landscape photograph for desktop hero. Team collaboration, modern office, or product UI scene fits best.",
         orientation: "landscape",
         size: "large",
         usecase: "hero",
@@ -165,7 +144,7 @@ export const Hero2: IBlock = {
       field_interface: "MediaWidget",
       hint: {
         prompt_description:
-          "Optimized version of the hero illustration or composite for mobile screens. Must be visually coherent with the desktop version but formatted for vertical (potrait) viewing, medium to large size, and serves as the visual focus for mobile hero sections.",
+          "Mobile-optimised version of the hero image. Can reuse the desktop image cropped tighter.",
         orientation: "portrait",
         size: "medium",
         usecase: "hero",
@@ -177,7 +156,10 @@ export const Hero2: IBlock = {
       title: "Default",
       key: "default",
       styles: {
-        layout: {},
+        layout: {
+          "padding-top": "3xl",
+          "padding-bottom": "3xl",
+        },
         container: {},
         content_wrapper: {
           display: "flex",
@@ -185,24 +167,246 @@ export const Hero2: IBlock = {
           "align-items": "center",
           "justify-content": "center",
           "row-gap": "lg",
-          "column-gap": "lg",
         },
         accent_heading: {
           "text-align": "center",
           "text-transform": "uppercase",
+          "letter-spacing": "0.08em",
+          "font-weight": "600",
+          "font-size": "sm",
+          color: "brand",
         },
         title: {
+          "text-wrap": "balance",
           "text-align": "center",
+          "max-width": "720px",
         },
         sub_title: {
           "max-width": "600px",
           "text-align": "center",
         },
-        button: {},
-        spacer: {},
-        image_wrapper: {},
+        button: {
+          "margin-top": "sm",
+        },
+        // hero_ctas unused in this layout — hide the rendered group box to prevent
+        // a stray empty flex container between the primary CTA and the image.
+        hero_ctas_levoGroup: {
+          display: "none",
+        },
+        image_wrapper: {
+          width: "100%",
+          "max-width": "960px",
+          "margin-top": "xl",
+        },
         image_desktop: {
-          "object-fit": "contain",
+          width: "100%",
+          "object-fit": "cover",
+          "aspect-ratio": "16 / 9",
+          display: "block",
+          "border-radius": "lg",
+          tablet: {
+            display: "block",
+          },
+          mobile: {
+            display: "none",
+          },
+        },
+        image_mobile: {
+          width: "100%",
+          "object-fit": "cover",
+          "aspect-ratio": "4 / 5",
+          display: "none",
+          "border-radius": "lg",
+          tablet: {
+            display: "none",
+          },
+          mobile: {
+            display: "block",
+          },
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          selectedVariants: {
+            Heading_Level: "H1",
+          },
+          heading: {
+            level: "1",
+          },
+        },
+        accent_heading: {
+          selectedVariants: {},
+        },
+        sub_title: {
+          selectedVariants: {},
+        },
+      },
+    },
+    {
+      title: "Card",
+      key: "card",
+      styles: {
+        layout: {
+          "background-color": "background-1",
+          "padding-top": "3xl",
+          "padding-bottom": "3xl",
+        },
+        container: {
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "center",
+          "border-radius": "xl",
+          "background-color": "background-2",
+          "box-shadow": "default",
+          "padding-top": "3xl",
+          "padding-bottom": "3xl",
+          "padding-left": "3xl",
+          "padding-right": "3xl",
+          tablet: {
+            "padding-top": "2xl",
+            "padding-bottom": "2xl",
+            "padding-left": "xl",
+            "padding-right": "xl",
+          },
+          mobile: {
+            "padding-left": "lg",
+            "padding-right": "lg",
+          },
+        },
+        content_wrapper: {
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "center",
+          "justify-content": "center",
+          "row-gap": "lg",
+        },
+        accent_heading: {
+          "text-align": "center",
+          "text-transform": "uppercase",
+          "letter-spacing": "0.08em",
+          "font-weight": "600",
+          "font-size": "sm",
+          color: "brand",
+        },
+        title: {
+          "text-wrap": "balance",
+          "text-align": "center",
+          "max-width": "680px",
+        },
+        sub_title: {
+          "max-width": "600px",
+          "text-align": "center",
+        },
+        button: {
+          "margin-top": "sm",
+        },
+        hero_ctas_levoGroup: {
+          display: "none",
+        },
+        image_wrapper: {
+          width: "100%",
+          "max-width": "880px",
+          "margin-top": "xl",
+        },
+        image_desktop: {
+          width: "100%",
+          "object-fit": "cover",
+          "aspect-ratio": "16 / 9",
+          display: "block",
+          "border-radius": "lg",
+          tablet: {
+            display: "block",
+          },
+          mobile: {
+            display: "none",
+          },
+        },
+        image_mobile: {
+          width: "100%",
+          "object-fit": "cover",
+          "aspect-ratio": "4 / 5",
+          display: "none",
+          "border-radius": "lg",
+          tablet: {
+            display: "none",
+          },
+          mobile: {
+            display: "block",
+          },
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          selectedVariants: {
+            Heading_Level: "H1",
+          },
+          heading: {
+            level: "1",
+          },
+        },
+        accent_heading: {
+          selectedVariants: {},
+        },
+        sub_title: {
+          selectedVariants: {},
+        },
+      },
+    },
+    {
+      title: "Minimal Compact",
+      key: "minimal_compact",
+      styles: {
+        layout: {
+          "padding-top": "2xl",
+          "padding-bottom": "2xl",
+        },
+        container: {
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "center",
+        },
+        content_wrapper: {
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "center",
+          "justify-content": "center",
+          "row-gap": "sm",
+          "max-width": "640px",
+        },
+        accent_heading: {
+          "text-align": "center",
+          "text-transform": "uppercase",
+          "letter-spacing": "0.08em",
+          "font-weight": "600",
+          "font-size": "xs",
+          color: "brand",
+        },
+        title: {
+          "text-wrap": "balance",
+          "text-align": "center",
+        },
+        sub_title: {
+          "max-width": "520px",
+          "text-align": "center",
+        },
+        button: {
+          "margin-top": "sm",
+        },
+        hero_ctas_levoGroup: {
+          display: "none",
+        },
+        image_wrapper: {
+          "padding-top": "base",
+          width: "100%",
+          "max-width": "640px",
+        },
+        image_desktop: {
+          width: "100%",
+          "object-fit": "cover",
+          "aspect-ratio": "16 / 9",
+          "max-height": "320px",
           display: "block",
           "border-radius": "base",
           tablet: {
@@ -213,13 +417,18 @@ export const Hero2: IBlock = {
           },
         },
         image_mobile: {
-          "object-fit": "contain",
+          width: "100%",
+          "object-fit": "cover",
+          "aspect-ratio": "4 / 5",
+          "max-height": "320px",
           display: "none",
           "border-radius": "base",
           tablet: {
             display: "none",
           },
-          mobile: {},
+          mobile: {
+            display: "block",
+          },
         },
       },
       content: DEFAULT_CONTENT,