@levo-so/blocks 0.1.0 → 0.1.2

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

@@ -0,0 +1,516 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DUMMY_ICON = {
+  kind: "icon",
+  data: {
+    id: "archive-minus",
+    label: "Archive Minus",
+    tags: ["archive", "custom", "directional", "minus"],
+    svgCode:
+      '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M14.5 11.4H9.5C9.09 11.4 8.75 11.06 8.75 10.65C8.75 10.24 9.09 9.90002 9.5 9.90002H14.5C14.91 9.90002 15.25 10.24 15.25 10.65C15.25 11.06 14.91 11.4 14.5 11.4Z" fill="var(--color-icon-primary)"/>\n<path d="M4.92957 22.75C4.50957 22.75 4.11957 22.65 3.76957 22.45C2.99957 22 2.55957 21.09 2.55957 19.96V5.86C2.55957 3.32 4.62957 1.25 7.16957 1.25H16.8196C19.3596 1.25 21.4296 3.32 21.4296 5.86V19.95C21.4296 21.08 20.9896 21.99 20.2196 22.44C19.4496 22.89 18.4396 22.84 17.4496 22.29L12.5696 19.58C12.2796 19.42 11.7096 19.42 11.4196 19.58L6.53957 22.29C5.99957 22.59 5.44957 22.75 4.92957 22.75ZM7.17957 2.75C5.46957 2.75 4.06957 4.15 4.06957 5.86V19.95C4.06957 20.54 4.23957 20.98 4.53957 21.15C4.83957 21.33 5.30957 21.27 5.81957 20.98L10.6996 18.27C11.4396 17.86 12.5596 17.86 13.2996 18.27L18.1796 20.98C18.6896 21.27 19.1596 21.33 19.4596 21.15C19.7596 20.97 19.9296 20.53 19.9296 19.95V5.86C19.9296 4.15 18.5296 2.75 16.8196 2.75H7.17957Z" fill="var(--color-icon-primary)"/>\n</svg>',
+  },
+};
+
+const PERSON_INFO = {
+  wrapper: null,
+  media: {
+    object: "media",
+    id: "GLUQcck5Lt7L",
+    workspace_id: "WLZ1TXTD",
+    filename: "pexels-2147499152-29632553.jpg",
+    kind: "image",
+    path: "WLZ1TXTD/pexels-2147499152-29632553-lDiQGcTGVuXg.jpg",
+    location:
+      "https://space.levo.in.net/WLZ1TXTD/pexels-2147499152-29632553-lDiQGcTGVuXg.jpg",
+    metadata: {
+      etag: '"d2ab426d617eec426c1e6ba5605ab5d6"',
+      mimetype: "image/jpeg",
+      size: 2688667,
+    },
+    srcset: {
+      "1080w":
+        "https://space.levo.in.net/WLZ1TXTD/pexels-2147499152-29632553-lDiQGcTGVuXg-1080w.webp",
+      "1200w":
+        "https://space.levo.in.net/WLZ1TXTD/pexels-2147499152-29632553-lDiQGcTGVuXg-1200w.webp",
+      "1920w":
+        "https://space.levo.in.net/WLZ1TXTD/pexels-2147499152-29632553-lDiQGcTGVuXg-1920w.webp",
+      "320w":
+        "https://space.levo.in.net/WLZ1TXTD/pexels-2147499152-29632553-lDiQGcTGVuXg-320w.webp",
+      "640w":
+        "https://space.levo.in.net/WLZ1TXTD/pexels-2147499152-29632553-lDiQGcTGVuXg-640w.webp",
+      "750w":
+        "https://space.levo.in.net/WLZ1TXTD/pexels-2147499152-29632553-lDiQGcTGVuXg-750w.webp",
+      "828w":
+        "https://space.levo.in.net/WLZ1TXTD/pexels-2147499152-29632553-lDiQGcTGVuXg-828w.webp",
+      path: "https://space.levo.in.net/WLZ1TXTD/pexels-2147499152-29632553-lDiQGcTGVuXg-1920w.webp 1920w, https://space.levo.in.net/WLZ1TXTD/pexels-2147499152-29632553-lDiQGcTGVuXg-320w.webp 320w, https://space.levo.in.net/WLZ1TXTD/pexels-2147499152-29632553-lDiQGcTGVuXg-640w.webp 640w, https://space.levo.in.net/WLZ1TXTD/pexels-2147499152-29632553-lDiQGcTGVuXg-750w.webp 750w, https://space.levo.in.net/WLZ1TXTD/pexels-2147499152-29632553-lDiQGcTGVuXg-828w.webp 828w, https://space.levo.in.net/WLZ1TXTD/pexels-2147499152-29632553-lDiQGcTGVuXg-1080w.webp 1080w, https://space.levo.in.net/WLZ1TXTD/pexels-2147499152-29632553-lDiQGcTGVuXg-1200w.webp 1200w",
+    },
+    created_at: "2025-04-22T07:05:43.912Z",
+    updated_at: "2025-04-22T07:05:43.912Z",
+    created_by: null,
+    updated_by: null,
+  },
+  "info-wrapper": null,
+  info: null,
+  name: "Caitlin Henderson",
+  description: "Criminal Law Expert",
+  links_levoGroup: null,
+  links: [
+    {
+      wrapper: null,
+      icon: DUMMY_ICON,
+      link: "https://youtube.com",
+    },
+    {
+      wrapper: null,
+      icon: DUMMY_ICON,
+      link: "https://linkedin.com",
+    },
+    {
+      wrapper: null,
+      icon: DUMMY_ICON,
+      link: "https://twitter.com",
+    },
+  ],
+};
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  "header-container": null,
+  "header-content": null,
+  "accent-title": "WHY US? ",
+  "title-wrapper": null,
+  title: "Our Lawyers",
+  description:
+    "Meet our dedicated team, bringing passion and expertise to champion your legal needs with excellence",
+  "header-cta": "View All",
+  team_levoGroup: null,
+  team: Array(4)
+    ?.fill(0)
+    ?.map((_) => PERSON_INFO),
+};
+
+export type ITeam1Content = typeof DEFAULT_CONTENT;
+
+const PERSON_STYLE = {
+  wrapper: {
+    position: "relative",
+    display: "flex",
+    height: "100%",
+    width: "100%",
+    "flex-direction": "column",
+    "row-gap": "4xs",
+  },
+  media: {
+    height: "100%",
+    width: "100%",
+    "object-fit": "cover",
+  },
+  "info-wrapper": {
+    position: "absolute",
+    background:
+      "linear-gradient(180deg,rgba(5, 41, 37, 0) 0%, rgba(5, 41, 37, 0) 8%, rgba(5, 41, 37, 0.8) 31%, rgba(5, 41, 37, 0.8) 100%)",
+    bottom: "0",
+    left: "0",
+    right: "0",
+    // display: "none",
+    // _hover: {
+    //   display: "block",
+    //   border: "2px solid red",
+    // },
+  },
+  info: {
+    position: "relative",
+    width: "100%",
+    "padding-top": "3xl",
+    "padding-bottom": "3xl",
+    "padding-left": "2xl",
+    "padding-right": "2xl",
+  },
+  name: {
+    "font-size": "xl",
+    "font-weight": 600,
+    color: "var(--color-brand-foreground)",
+  },
+  description: {
+    "font-size": "sm",
+    "font-weight": 500,
+    color: "var(--color-brand-foreground)",
+  },
+  links_levoGroup: {
+    display: "flex",
+    "justify-content": "flex-start",
+    "column-gap": "sm",
+    "margin-top": "3xs",
+  },
+  links: [
+    {
+      wrapper: {
+        width: "32px",
+        height: "32px",
+        padding: "2xs",
+        display: "flex",
+        "justify-content": "center",
+        "align-items": "center",
+        overflow: "hidden",
+      },
+      icon: {
+        width: "24px",
+        height: "24px",
+        "object-fit": "contain",
+      },
+      link: {},
+    },
+    {
+      wrapper: {
+        width: "32px",
+        height: "32px",
+        padding: "2xs",
+        display: "flex",
+        "justify-content": "center",
+        "align-items": "center",
+        overflow: "hidden",
+      },
+      icon: {
+        width: "24px",
+        height: "24px",
+        "object-fit": "contain",
+      },
+      link: {},
+    },
+    {
+      wrapper: {
+        width: "32px",
+        height: "32px",
+        padding: "2xs",
+        display: "flex",
+        "justify-content": "center",
+        "align-items": "center",
+        overflow: "hidden",
+      },
+      icon: {
+        width: "24px",
+        height: "24px",
+        "object-fit": "contain",
+      },
+      link: {},
+    },
+  ],
+};
+
+const TEAM_STYLES = Array(4)
+  ?.fill(0)
+  ?.map((_) => PERSON_STYLE);
+
+export const Team1: IBlock = {
+  category_id: "team",
+  title: "Team 1",
+  key: "team-1",
+  version: "v1",
+  prompt_description:
+    "Two-part block with a bold heading and intro text at the top, followed by a horizontal row of team member cards featuring profile images, names, and titles.",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+      hint: {
+        prompt_description:
+          "Defines the overall arrangement and structure of the Lawyers section. Leave unpopulated unless customizing layout structure.",
+      },
+    },
+    {
+      key: "header-container",
+      label: "Header Container",
+      field_interface: "ContainerWidget",
+      hint: {
+        prompt_description:
+          "Provides background and spacing for the top section, visually separating the header from the team list. No content required here.",
+      },
+    },
+    {
+      key: "header-content",
+      label: "Header Content",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Holds the accent title, main title, description, and CTA for the block header. Use this container to structure and align header elements.",
+      },
+    },
+    {
+      key: "accent-title",
+      label: "Accent Title",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "Section label placed above the headline; use short, punchy text to indicate the section's theme (e.g., 'WHY US?'). Tone: confident and direct.",
+        min_characters: 5,
+        max_characters: 20,
+      },
+    },
+    {
+      key: "title-wrapper",
+      label: "Title Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Visual grouping for main title. No direct content required here, used for styling and spacing.",
+      },
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "Main headline for the lawyers/team section (e.g., 'Our Lawyers'); use a clear, prominent title to introduce the team. Tone: professional and inviting.",
+        min_characters: 10,
+        max_characters: 30,
+      },
+    },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Short paragraph providing an overview and encouraging trust in the team. Summarize the team's mission or approach in 1-2 lines. Tone: reassuring, expert, warm.",
+        min_characters: 60,
+        max_characters: 160,
+      },
+    },
+    {
+      key: "header-cta",
+      label: "Header Cta",
+      field_interface: "ButtonWidget",
+      hint: {
+        prompt_description:
+          "Call-to-action label for a button/link that leads to the full team or more details (e.g., 'View All'). Keep it concise and actionable.",
+        min_characters: 5,
+        max_characters: 20,
+      },
+    },
+    {
+      key: "team",
+      label: "Team",
+      field_interface: "ContainerWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "wrapper",
+          label: "Person Wrapper",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Container for arranging an individual team member's content. No direct content required here.",
+          },
+        },
+        {
+          key: "media",
+          label: "Person Media",
+          field_interface: "MediaWidget",
+          hint: {
+            prompt_description:
+              "Profile photo of the lawyer or team member, displayed as a medium-to-large rectangle above the name. Use hi-res portrait-oriented images that visually fit a card format.",
+            orientation: "portrait",
+            size: "medium",
+            usecase: "avatar",
+          },
+        },
+        {
+          key: "info-wrapper",
+          label: "Person Info Wrapper",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Container for the info section (name, title, links) overlayed on the image. No content required here.",
+          },
+        },
+        {
+          key: "info",
+          label: "Person Info",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Holds the name, description, and links for the team member. No direct content required here.",
+          },
+        },
+        {
+          key: "name",
+          label: "Person Name",
+          field_interface: "HeadingWidget",
+          hint: {
+            prompt_description:
+              "Full name of the lawyer or team member. Use clear, professional naming for display on their card.",
+            min_characters: 8,
+            max_characters: 26,
+          },
+        },
+        {
+          key: "description",
+          label: "Person Description",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Short job title or area of expertise for the team member (e.g., 'Criminal Law Expert'). 1 line only. Tone: specific, authoritative.",
+            min_characters: 12,
+            max_characters: 32,
+          },
+        },
+        {
+          key: "links",
+          label: "Links",
+          field_interface: "BoxWidget",
+          kind: "group",
+          fields: [
+            {
+              key: "wrapper",
+              label: "Wrapper",
+              field_interface: "BoxWidget",
+              hint: {
+                prompt_description:
+                  "Container for individual social/contact link. Used for spacing/styling.",
+              },
+            },
+            {
+              key: "icon",
+              label: "Icon",
+              field_interface: "IconWidget",
+              hint: {
+                prompt_description:
+                  "Icon representing a social or contact method for the lawyer (e.g., LinkedIn, email). Use recognizable icons sized to fit within a small square.",
+                orientation: "square",
+                size: "icon",
+                usecase: "icon",
+              },
+            },
+            {
+              key: "link",
+              label: "Link",
+              field_interface: "TypographyWidget",
+              hint: {
+                prompt_description:
+                  "URL or handle for the lawyer’s public profile or contact (displayed as text or tooltip, not prominent on card). Keep concise.",
+                min_characters: 5,
+                max_characters: 40,
+              },
+            },
+          ],
+          hint: {
+            prompt_description:
+              "Group of social/contact icons for each team member. Shows up to three for quick contact or profile access.",
+            min_items: 1,
+            max_items: 3,
+          },
+        },
+      ],
+      hint: {
+        prompt_description:
+          "A set of visually consistent team member cards, each displaying a photo, name, title, and social/contact links. Generate professional bio cards for lawyers or team members.",
+        min_items: 4,
+        max_items: 6,
+      },
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {
+          display: "flex",
+          width: "100%",
+          "flex-direction": "column",
+          "background-color": "var(--color-brand)",
+          "row-gap": "9xl",
+          "padding-top": "10xl",
+          "padding-bottom": "10xl",
+          "media:max:768px": {
+            "padding-top": "4xl",
+            "padding-bottom": "4xl",
+            "row-gap": "4xl",
+          },
+        },
+        "header-container": {
+          display: "flex",
+          width: "100%",
+          "align-items": "flex-end",
+          "justify-content": "space-between",
+          "column-gap": "20xl",
+          "padding-right": "8xl",
+          "padding-left": "8xl",
+          "media:max:768px": {
+            "flex-direction": "column",
+            "align-items": "flex-start",
+            "row-gap": "xl",
+          },
+        },
+        "header-content": {
+          display: "flex",
+          width: "100%",
+          flex: "1",
+          "flex-direction": "column",
+          "row-gap": "2xs",
+          "media:max:768px": {
+            "row-gap": "4xs",
+          },
+        },
+        "accent-title": {
+          "font-size": "base",
+          "font-weight": "bold",
+          color: "var(--color-brand-foreground)",
+          "media:max:768px": {
+            "font-size": "base",
+          },
+        },
+        "title-wrapper": {
+          display: "flex",
+          width: "100%",
+          flex: "1",
+          "align-items": "center",
+          "justify-content": "space-between",
+          "column-gap": "10xl",
+          "media:max:768px": {
+            "flex-direction": "column",
+            "align-items": "flex-start",
+            "row-gap": "4xs",
+          },
+        },
+        title: {
+          width: "100%",
+          "max-width": "fit-content",
+          flex: "1",
+          "white-space": "nowrap",
+          "font-size": "5xl",
+          "font-weight": "bold",
+          color: "var(--color-brand-foreground)",
+          "media:max:768px": {
+            "font-size": "4xl",
+          },
+        },
+        description: {
+          "font-size": "base",
+          color: "var(--color-brand-foreground)",
+          "media:max:768px": {
+            "font-size": "sm",
+          },
+        },
+        "header-cta": {},
+        team_levoGroup: {
+          display: "grid",
+          width: "100%",
+          "grid-template-columns": "repeat(4, minmax(0, 1fr))",
+          gap: "0",
+          "media:max:768px": {
+            "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+          },
+          "media:max:480px": {
+            "grid-template-columns": "repeat(1, minmax(0, 1fr))",
+          },
+        },
+        team: TEAM_STYLES,
+      },
+      content: DEFAULT_CONTENT,
+      config: {},
+    },
+  ],
+};

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

@@ -0,0 +1,80 @@
+import {
+  Box,
+  Button,
+  Container,
+  Heading,
+  Icon,
+  Media,
+  Section,
+  Typography,
+  type ILevoBlockBaseProps,
+} from "@levo-so/studio";
+import React from "react";
+
+import type { ITeam1Content } from "./team-1.schema";
+
+interface IPersonInfo {
+  name?: string;
+  description?: string;
+  links?: Array<{
+    icon?: unknown;
+    link?: string;
+  }>;
+}
+
+const Team1: React.FC<ILevoBlockBaseProps<ITeam1Content>> = ({ content }) => {
+  return (
+    <Section elementKey="layout">
+      <Container elementKey="header-container">
+        <Box elementKey="header-content">
+          <Heading elementKey="accent-title" />
+          <Box elementKey="title-wrapper">
+            <Heading elementKey="title" />
+            <Typography elementKey="description" />
+          </Box>
+        </Box>
+        <Button elementKey="header-cta" className="" />
+      </Container>
+      <Container elementKey="team_levoGroup" data-levo_group>
+        {content?.team?.map((person: IPersonInfo, index: number) => (
+          <Box
+            elementKey={`team.${index}.wrapper`}
+            key={index}
+            data-levo_group_item
+          >
+            <Media elementKey={`team.${index}.media`} alt="person_image" />
+            <Box elementKey={`team.${index}.info-wrapper`}>
+              <Box
+                elementKey={`team.${index}.info`}
+                className="w-full px-8 py-7"
+              >
+                <Heading elementKey={`team.${index}.name`}>
+                  {person?.name}
+                </Heading>
+                <Typography elementKey={`team.${index}.description`}>
+                  {person?.description}
+                </Typography>
+                <Box
+                  elementKey={`team.${index}.links_levoGroup`}
+                  data-levo_group
+                >
+                  {person?.links?.map((_: unknown, idx: number) => (
+                    <Box
+                      data-levo_group_item
+                      key={`person_${index}_${idx}`}
+                      elementKey={`team.${index}.links.${idx}.wrapper`}
+                    >
+                      <Icon elementKey={`team.${index}.links.${idx}.icon`} />
+                    </Box>
+                  ))}
+                </Box>
+              </Box>
+            </Box>
+          </Box>
+        ))}
+      </Container>
+    </Section>
+  );
+};
+
+export default Team1;