@levo-so/blocks 0.1.54 → 0.1.59

package/src/blocks/tabs/tab-2.tsx

@@ -0,0 +1,60 @@
+import {
+  Box,
+  Container,
+  Heading,
+  Section,
+  Typography,
+  type ILevoBlockBaseProps,
+  TabsRoot,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+  Button,
+} from "@levo-so/studio";
+import React from "react";
+import { ITab2Content } from "./tab-2.schema";
+
+const Tab2: React.FC<ILevoBlockBaseProps<ITab2Content>> = ({ content }) => {
+  return (
+    <Section elementKey="layout">
+      <Container elementKey="container">
+        <TabsRoot defaultValue="0">
+          <Box elementKey="main_content_wrapper">
+            <Box elementKey="left_container">
+              <Heading elementKey="title" />
+              <Box elementKey="tabs_levoGroup" data-levo_group>
+                <TabsList elementKey="tabs_tabList">
+                  {(content.tabs ?? []).map((_: any, index: number) => (
+                    <TabsTrigger
+                      value={index.toString()}
+                      key={index}
+                      elementKey={`tabs.${index}.TabsTrigger`}
+                    />
+                  ))}
+                </TabsList>
+              </Box>
+            </Box>
+            <Box elementKey="right_container">
+              {(content.tabs ?? []).map((_: any, index: number) => (
+                <TabsContent
+                  value={index.toString()}
+                  key={index}
+                  data-levo_group_item
+                  elementKey={`tabs.${index}.tab_content`}
+                >
+                  <Box elementKey={`tabs.${index}.card_wrapper`}>
+                    <Heading elementKey={`tabs.${index}.card_title`} />
+                    <Typography elementKey={`tabs.${index}.card_description`} />
+                    <Button elementKey={`tabs.${index}.card_cta`} />
+                  </Box>
+                </TabsContent>
+              ))}
+            </Box>
+          </Box>
+        </TabsRoot>
+      </Container>
+    </Section>
+  );
+};
+
+export default Tab2;

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

@@ -161,7 +161,11 @@ export const Team3: IBlock = {
               "Wrapper for each team member card, providing structure and spacing.",
           },
         },
-
+        {
+          key: "img",
+          label: "Card Image",
+          field_interface: "MediaWidget",
+        },
         {
           key: "info",
           label: "Member Info",

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

@@ -1,3 +1,5 @@
+"use client";
+
 import type { CarouselApi } from "@levo-so/studio";
 import {
   type ILevoBlockBaseProps,
@@ -10,6 +12,7 @@ import {
   CarouselItem,
   Box,
   Icon,
+  Media,
 } from "@levo-so/studio";
 import { useEffect, useState } from "react";
 
@@ -44,6 +47,10 @@ const Team3: React.FC<ILevoBlockBaseProps<ITeam3Content>> = ({ content }) => {
             {(content?.team ?? [])?.map((_: any, index: number) => (
               <CarouselItem key={index} data-levo_group_item>
                 <Box elementKey={`team.${index}.card`}>
+                  <Media
+                    elementKey={`team.${index}.img`}
+                    alt="Team member photo"
+                  />
                   <Box elementKey={`team.${index}.info`}>
                     <Box elementKey={`team.${index}.name-position-wrapper`}>
                       <Heading elementKey={`team.${index}.name`} />

package/src/blocks/team/team-4.schema.ts

@@ -1,16 +1,5 @@
 import type { IBlock } from "@levo-so/studio";
 
-const DUMMY_ICON = {
-  kind: "icon",
-  data: {
-    id: "linkedin",
-    label: "LinkedIn",
-    tags: ["social", "professional", "linkedin"],
-    svgCode:
-      '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M20.4491 20.4498H16.8931V14.8798C16.8931 13.5518 16.8681 11.8438 15.0431 11.8438C13.1931 11.8438 12.9081 13.2918 12.9081 14.7838V20.4498H9.35312V8.99976H12.7651V10.5608H12.8151C13.2881 9.66176 14.4481 8.71076 16.1811 8.71076C19.7851 8.71076 20.4491 11.0828 20.4491 14.1658V20.4498ZM5.33912 7.43276C4.19312 7.43276 3.27112 6.50676 3.27112 5.36576C3.27112 4.22476 4.19312 3.29976 5.33912 3.29976C6.48012 3.29976 7.40612 4.22476 7.40612 5.36576C7.40612 6.50676 6.48012 7.43276 5.33912 7.43276ZM7.11812 20.4498H3.55812V8.99976H7.11812V20.4498ZM22.2231 0H1.77112C0.79212 0 0 0.77376 0 1.72876V22.2708C0 23.2258 0.79212 24 1.77112 24H22.2231C23.2081 24 24 23.2258 24 22.2708V1.72876C24 0.77376 23.2081 0 22.2231 0Z" fill="var(--color-icon-primary)"/>\n</svg>',
-  },
-};
-
 const DEFAULT_CONTENT = {
   layout: null,
   container: null,
@@ -161,6 +150,11 @@ export const Team4: IBlock = {
               "Wrapper for each team member card, providing structure and spacing with background image.",
           },
         },
+        {
+          key: "img",
+          label: "Card Image",
+          field_interface: "MediaWidget",
+        },
         {
           key: "info",
           label: "Member Info",
@@ -182,7 +176,18 @@ export const Team4: IBlock = {
         {
           key: "name",
           label: "Member Name",
-          field_interface: "HeadingWidget",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Full name of the team member. Use professional, clear naming.",
+            min_characters: 8,
+            max_characters: 30,
+          },
+        },
+        {
+          key: "description",
+          label: "Description",
+          field_interface: "TypographyWidget",
           hint: {
             prompt_description:
               "Full name of the team member. Use professional, clear naming.",
@@ -190,7 +195,6 @@ export const Team4: IBlock = {
             max_characters: 30,
           },
         },
-
         {
           key: "social",
           label: "Social Links",

package/src/blocks/team/team-4.tsx

@@ -7,6 +7,7 @@ import {
   Box,
   Icon,
   Button,
+  Media,
 } from "@levo-so/studio";
 
 import type { ITeam4Content } from "./team-4.schema";
@@ -26,9 +27,11 @@ const Team4: React.FC<ILevoBlockBaseProps<ITeam4Content>> = ({ content }) => {
               data-levo_group_item
               elementKey={`team.${index}.card`}
             >
+              <Media elementKey={`team.${index}.img`} alt="Team member photo" />
               <Box elementKey={`team.${index}.info`}>
                 <Box elementKey={`team.${index}.name-position-wrapper`}>
-                  <Heading elementKey={`team.${index}.name`} />
+                  <Typography elementKey={`team.${index}.name`} />
+                  <Typography elementKey={`team.${index}.description`} />
                 </Box>
                 <Box
                   elementKey={`team.${index}.social_levoGroup`}

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

@@ -0,0 +1,369 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  header: null,
+  title: "Meet Our Leadership Team",
+  description:
+    "Discover the talented professionals driving our company's success through innovation, expertise, and unwavering commitment to excellence.",
+  main_content: null,
+  left_container: null,
+  image_wrapper: null,
+  main_image: {
+    id: "2",
+    location: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
+    kind: "image",
+    mimetype: "image/png",
+    srcset: {
+      "320w":
+        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
+      "640w":
+        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
+      "1080w":
+        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
+      path: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w",
+    },
+  },
+  overlay_container: null,
+  overlay_label: "<p>Richard Murphy</p>",
+  overlay_value: "<p>CEO, Mistify</p>",
+  right_container: null,
+  team_description:
+    "<p>Alexandra “Alex” Monroe is a strategic thinker, creative storyteller, and data-driven problem solver with over a decade of experience in brand development, digital transformation, and cross-functional leadership. Known for her ability to blend analytical insight with creative intuition, Alex has helped numerous global organizations redefine their identities, connect authentically with their audiences, and achieve measurable business growth.</p><p>After earning her Master’s degree in Communication and Media Studies from the University of Chicago, Alex began her career as a junior strategist at a boutique marketing firm. Her early exposure to a variety of industries—from consumer technology to sustainable fashion—shaped her holistic approach to brand building. She quickly rose through the ranks, taking on roles that allowed her to lead campaigns across North America, Europe, and Southeast Asia.</p><p>In 2016, Alex co-founded <strong>Maven &amp; Co.</strong>, a creative consultancy dedicated to helping mission-driven companies scale with purpose. Under her leadership, the firm expanded to serve clients in over 15 countries, developing award-winning campaigns recognized by <em>AdWeek</em> and <em>Forbes</em>. Her work has focused on integrating storytelling with technology—leveraging social data, behavioral psychology, and digital design to create brand ecosystems that resonate deeply with modern consumers.</p>",
+  cta_wrapper: null,
+  cta: "View Profile",
+  team_members: [
+    {
+      card: null,
+      content_wrapper: null,
+      left_container: null,
+      image_wrapper: null,
+      member_image: {
+        id: "2",
+        location: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
+        kind: "image",
+        mimetype: "image/png",
+        srcset: {
+          "320w":
+            "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
+          "640w":
+            "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
+          "1080w":
+            "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
+          path: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w",
+        },
+      },
+      overlay_container: null,
+      overlay_label: "CTO",
+      overlay_value: "Michael Chen",
+      right_container: null,
+      member_description:
+        "Michael leads our technology division with a focus on cutting-edge innovations and scalable solutions. His expertise in cloud architecture and AI integration has positioned us at the forefront of digital transformation.",
+      cta_wrapper: null,
+      cta: "Learn More",
+    },
+    {
+      card: null,
+      content_wrapper: null,
+      left_container: null,
+      image_wrapper: null,
+      member_image: {
+        id: "2",
+        location: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
+        kind: "image",
+        mimetype: "image/png",
+        srcset: {
+          "320w":
+            "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
+          "640w":
+            "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
+          "1080w":
+            "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
+          path: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w",
+        },
+      },
+      overlay_container: null,
+      overlay_label: "CFO",
+      overlay_value: "Emily Rodriguez",
+      right_container: null,
+      member_description:
+        "Emily brings extensive financial expertise and strategic planning to our executive team. Her leadership in financial operations and investor relations has been crucial to our sustained growth and market expansion.",
+      cta_wrapper: null,
+      cta: "Learn More",
+    },
+  ],
+};
+
+export type ITeam5Content = typeof DEFAULT_CONTENT;
+
+export const Team5: IBlock = {
+  category_id: "team",
+  title: "Team Details",
+  key: "team-5",
+  version: "v1",
+  prompt_description:
+    "A team block with header section, featured member section with image overlay, and team member cards with left image (overlay at bottom) and right content with description and CTA",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+    },
+
+    {
+      key: "main_content",
+      label: "Main Content",
+      field_interface: "LayoutWidget",
+    },
+
+    {
+      key: "image_wrapper",
+      label: "Image Wrapper",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "main_image",
+      label: "Main Image",
+      field_interface: "ImageWidget",
+    },
+    {
+      key: "overlay_container",
+      label: "Overlay Container",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "overlay_label",
+      label: "Overlay Label",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "overlay_value",
+      label: "Overlay Value",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "right_container",
+      label: "Right Container",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "team_description",
+      label: "Team Description",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "cta_wrapper",
+      label: "CTA Wrapper",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "cta",
+      label: "CTA",
+      field_interface: "ButtonWidget",
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {
+          "padding-top": "3xl",
+          "padding-bottom": "3xl",
+          "padding-left": "base",
+          "padding-right": "base",
+        },
+        container: {
+          "max-width": "1280px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+          "padding-left": "none",
+          "padding-right": "none",
+        },
+        header: {
+          "text-align": "center",
+          "margin-bottom": "3xl",
+        },
+        description: {
+          "font-size": "lg",
+          color: "text-2",
+          "line-height": "1.6",
+          "max-width": "800px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+          mobile: {
+            "font-size": "base",
+          },
+        },
+        main_content: {
+          display: "flex",
+          "align-items": "start",
+          "column-gap": "xl",
+          "margin-bottom": "3xl",
+          mobile: {
+            "flex-direction": "column",
+            "row-gap": "xl",
+          },
+          "justify-content": "start",
+        },
+        left_container: {
+          flex: "1",
+        },
+        image_wrapper: {
+          position: "relative",
+          "border-radius": "lg",
+          overflow: "hidden",
+          width: "30%",
+          height: "100%",
+        },
+        main_image: {
+          "border-radius": "lg",
+          "object-fit": "cover",
+          width: "400px",
+          height: "400px",
+        },
+        overlay_container: {
+          position: "absolute",
+          bottom: "0",
+          left: "0",
+          right: "0",
+          "padding-top": "lg",
+          "padding-bottom": "lg",
+          "padding-left": "lg",
+          "padding-right": "lg",
+          display: "block",
+          "flex-direction": "column",
+          "row-gap": "xs",
+        },
+        overlay_label: {
+          opacity: "0.8",
+          color: "text-1",
+          "font-weight": 700,
+          "font-size": "lg",
+        },
+        overlay_value: {},
+        right_container: {
+          flex: "1",
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "lg",
+        },
+        team_description: {
+          "font-size": "base",
+          color: "text-2",
+          "line-height": "1.6",
+        },
+        cta_wrapper: {
+          display: "flex",
+        },
+        cta: {},
+        team_members_levoGroup: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "2xl",
+        },
+        "team_members.*.card": {
+          "background-color": "background-2",
+          "border-radius": "lg",
+          "border-width": "1px",
+          "border-color": "border",
+          overflow: "hidden",
+        },
+        "team_members.*.content_wrapper": {
+          display: "flex",
+          "align-items": "stretch",
+          mobile: {
+            "flex-direction": "column",
+          },
+        },
+        "team_members.*.left_container": {
+          flex: "1",
+          position: "relative",
+        },
+        "team_members.*.image_wrapper": {
+          position: "relative",
+          height: "300px",
+          mobile: {
+            height: "250px",
+          },
+        },
+        "team_members.*.member_image": {
+          width: "100%",
+          height: "100%",
+          "object-fit": "cover",
+        },
+        "team_members.*.overlay_container": {
+          position: "absolute",
+          bottom: "0",
+          left: "0",
+          right: "0",
+          "background-color": "rgba(0, 0, 0, 0.7)",
+          "padding-top": "base",
+          "padding-bottom": "base",
+          "padding-left": "base",
+          "padding-right": "base",
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "xs",
+        },
+        "team_members.*.overlay_label": {
+          "font-size": "xs",
+          "font-weight": "500",
+          color: "text-1",
+          opacity: "0.8",
+        },
+        "team_members.*.overlay_value": {
+          "font-size": "lg",
+          "font-weight": "600",
+          color: "text-1",
+        },
+        "team_members.*.right_container": {
+          flex: "1",
+          display: "flex",
+          "flex-direction": "column",
+          "justify-content": "center",
+          "padding-top": "2xl",
+          "padding-bottom": "2xl",
+          "padding-left": "2xl",
+          "padding-right": "2xl",
+          "row-gap": "lg",
+        },
+        "team_members.*.member_description": {
+          "font-size": "base",
+          color: "text-2",
+          "line-height": "1.6",
+          flex: "1",
+        },
+        "team_members.*.cta_wrapper": {
+          display: "flex",
+        },
+        "team_members.*.cta": {
+          "background-color": "background-1",
+          color: "text-1",
+          "padding-top": "base",
+          "padding-bottom": "base",
+          "padding-left": "2xl",
+          "padding-right": "2xl",
+          "border-radius": "base",
+          "border-width": "1px",
+          "border-color": "border",
+          "align-self": "flex-start",
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+      },
+    },
+  ],
+};

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

@@ -0,0 +1,38 @@
+import {
+  type ILevoBlockBaseProps,
+  Box,
+  Button,
+  Container,
+  Image,
+  Section,
+  Typography,
+} from "@levo-so/studio";
+
+import type { ITeam5Content } from "./team-5.schema";
+
+const Team5: React.FC<ILevoBlockBaseProps<ITeam5Content>> = () => {
+  return (
+    <Section elementKey="layout">
+      <Container elementKey="container">
+        <Box elementKey="main_content">
+          <Box elementKey="image_wrapper">
+            <Image elementKey="main_image" alt="Team member" />
+            <Box elementKey="overlay_container">
+              <Typography elementKey="overlay_label" />
+              <Typography elementKey="overlay_value" />
+            </Box>
+          </Box>
+
+          <Box elementKey="right_container">
+            <Typography elementKey="team_description" />
+            <Box elementKey="cta_wrapper">
+              <Button elementKey="cta" />
+            </Box>
+          </Box>
+        </Box>
+      </Container>
+    </Section>
+  );
+};
+
+export default Team5;

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

@@ -6,7 +6,6 @@ import {
   Container,
   Section,
   Box,
-  Image,
   Carousel,
   CarouselContent,
   CarouselItem,

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

@@ -1,8 +1,9 @@
+"use client";
+
 import type { CarouselApi } from "@levo-so/studio";
 import {
   type ILevoBlockBaseProps,
   Heading,
-  Image,
   Typography,
   Container,
   Section,

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

@@ -1,3 +1,5 @@
+"use client";
+
 import type { CarouselApi } from "@levo-so/studio";
 import {
   type ILevoBlockBaseProps,

package/src/blocks/testimonial/testimonial-4.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import type { CarouselApi } from "@levo-so/studio";
 import {
   type ILevoBlockBaseProps,
@@ -9,7 +11,6 @@ import {
   Container,
   Heading,
   Iframe,
-  Image,
   Icon,
   Media,
   Section,

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

@@ -1,3 +1,5 @@
+"use client";
+
 import type { CarouselApi } from "@levo-so/studio";
 import {
   type ILevoBlockBaseProps,

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

@@ -1,3 +1,5 @@
+"use client";
+
 import type { CarouselApi } from "@levo-so/studio";
 import {
   type ILevoBlockBaseProps,
@@ -9,7 +11,6 @@ import {
   Container,
   Heading,
   Icon,
-  Image,
   Section,
   Typography,
 } from "@levo-so/studio";