@levo-so/blocks 0.1.1 → 0.1.2

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

@@ -0,0 +1,707 @@
+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 DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  header: null,
+  title: "Our Team",
+  team: [
+    {
+      card: null,
+      info: null,
+      "name-position-wrapper": null,
+      name: "Mohini Krishten",
+      position: "Co-Founder & CEO",
+      social: [
+        {
+          icon: DUMMY_ICON,
+        },
+      ],
+    },
+    {
+      card: null,
+      info: null,
+      "name-position-wrapper": null,
+      name: "Jenny White",
+      position: "Co-Founder & CEO",
+      social: [
+        {
+          icon: DUMMY_ICON,
+        },
+      ],
+    },
+    {
+      card: null,
+      info: null,
+      "name-position-wrapper": null,
+      name: "Ben Morrison",
+      position: "Lead Management",
+      social: [
+        {
+          icon: DUMMY_ICON,
+        },
+      ],
+    },
+    {
+      card: null,
+      info: null,
+      "name-position-wrapper": null,
+      name: "Sarah Johnson",
+      position: "Head of Operations",
+      social: [
+        {
+          icon: DUMMY_ICON,
+        },
+      ],
+    },
+  ],
+  "carousel-navigation-container": null,
+  "carousel-navigation": null,
+  "carousel-navigation-pill": null,
+};
+
+export type ITeam3Content = typeof DEFAULT_CONTENT;
+
+export const Team3: IBlock = {
+  category_id: "team",
+  title: "Team 3",
+  key: "team-3",
+  version: "v1",
+  prompt_description:
+    "Team carousel showcasing team member profiles with circular photos, names, positions and LinkedIn icons, featuring navigation dots for sliding through team members.",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+      hint: {
+        prompt_description:
+          "Defines the overall layout structure for the team carousel block, providing consistent spacing and alignment.",
+      },
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+      hint: {
+        prompt_description:
+          "Main container providing padding and centering for the team carousel section.",
+      },
+    },
+    {
+      key: "header",
+      label: "Header",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container for the section title, positioned above the team carousel.",
+      },
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "Main heading for the team section. Use a clear, engaging title that introduces the team.",
+        min_characters: 8,
+        max_characters: 30,
+      },
+    },
+    {
+      key: "carousel-navigation-container",
+      label: "Carousel Navigation Container",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container for the carousel navigation dots, positioned below the team carousel.",
+      },
+    },
+    {
+      key: "carousel-navigation",
+      label: "Carousel Navigation",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container for the navigation pills or dots indicating carousel position.",
+      },
+    },
+    {
+      key: "carousel-navigation-pill",
+      label: "Carousel Navigation Pill",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Individual navigation dot for the carousel, indicating current position.",
+      },
+    },
+    {
+      key: "team",
+      label: "Team Members",
+      field_interface: "CarouselWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "card",
+          label: "Card Container",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Wrapper for each team member card, providing structure and spacing.",
+          },
+        },
+
+        {
+          key: "info",
+          label: "Member Info",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Container for team member information including name, position, and social links.",
+          },
+        },
+        {
+          key: "name-position-wrapper",
+          label: "Name Position Wrapper",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Container for name and position that allows flex styling and proper spacing.",
+          },
+        },
+        {
+          key: "name",
+          label: "Member Name",
+          field_interface: "HeadingWidget",
+          hint: {
+            prompt_description:
+              "Full name of the team member. Use professional, clear naming.",
+            min_characters: 8,
+            max_characters: 30,
+          },
+        },
+        {
+          key: "position",
+          label: "Position",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Job title or role of the team member. Keep it professional and descriptive.",
+            min_characters: 10,
+            max_characters: 40,
+          },
+        },
+        {
+          key: "social",
+          label: "Social Links",
+          field_interface: "BoxWidget",
+          kind: "group",
+          fields: [
+            {
+              key: "icon",
+              label: "Social Icon",
+              field_interface: "IconWidget",
+              hint: {
+                prompt_description:
+                  "Social media platform icon, typically LinkedIn for professional teams. Can be any social media platform icon.",
+                orientation: "square",
+                size: "icon",
+                usecase: "icon",
+              },
+            },
+          ],
+          hint: {
+            prompt_description:
+              "Collection of social media icons for the team member, typically just LinkedIn.",
+            min_items: 1,
+            max_items: 3,
+          },
+        },
+      ],
+      hint: {
+        prompt_description:
+          "A carousel of team member cards showcasing the leadership team with professional photos and contact information.",
+        min_items: 4,
+        max_items: 8,
+      },
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      config: {
+        team_levoGroup: {
+          carousel: {
+            loop: true,
+          },
+        },
+      },
+      content: DEFAULT_CONTENT,
+      styles: {
+        layout: {
+          "background-color": "white",
+          "padding-top": "4xl",
+          "padding-bottom": "4xl",
+          mobile: {
+            "padding-top": "2xl",
+            "padding-bottom": "2xl",
+          },
+        },
+        container: {
+          "max-width": "1280px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+          "padding-left": "xl",
+          "padding-right": "xl",
+          filter: "none",
+          mobile: {
+            filter: "none",
+          },
+          tablet: {
+            filter: "none",
+          },
+        },
+        header: {
+          "text-align": "center",
+          "margin-bottom": "3xl",
+          mobile: {
+            "margin-bottom": "2xl",
+          },
+        },
+        title: {
+          "font-size": "5xl",
+          "font-weight": "700",
+          color: "text-1",
+          "line-height": "1.2",
+          tablet: {
+            "font-size": "3xl",
+          },
+          mobile: {
+            "font-size": "2xl",
+          },
+          filter: "none",
+          "padding-bottom": "xl",
+        },
+        team_levoGroup: {
+          number_of_slides: 3,
+          mobile: {
+            number_of_slides: 1,
+          },
+          tablet: {
+            number_of_slides: 2,
+          },
+          filter: "none",
+        },
+        team: [
+          {
+            card: {
+              display: "flex",
+              "flex-direction": "column",
+              "align-items": "center",
+              "background-color": "background-1",
+              "border-radius": "lg",
+              padding: "lg",
+              "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+              "margin-left": "6xs",
+              "margin-right": "6xs",
+              filter: "none",
+              "min-height": "400px",
+              "background-image":
+                'url("https://space.levo.in.net/W6OEVMW8/6a30b8841e2947b6f1fb3138bc36c5dbf7c9a6ef-4JOTlp1PZh12.png")',
+              "background-position": "center center",
+              "background-size": "cover",
+            },
+            image: {
+              width: "200px",
+              height: "200px",
+              "border-radius": "3xl",
+              "object-fit": "cover",
+              "margin-bottom": "base",
+              filter: "none",
+            },
+            info: {
+              display: "flex",
+              "flex-direction": "row",
+              "align-items": "center",
+              "text-align": "center",
+              "row-gap": "sm",
+              filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
+              width: "100%",
+              "background-color": "white",
+              "margin-top": "18xl",
+              "justify-content": "space-between",
+              "padding-top": "sm",
+              "padding-bottom": "sm",
+              "border-radius": "lg",
+              "border-style": "solid",
+              "border-width": "1px",
+              "padding-left": "xs",
+              "padding-right": "xs",
+            },
+            "name-position-wrapper": {
+              display: "flex",
+              "flex-direction": "column",
+              "align-items": "start",
+              "text-align": "center",
+              "row-gap": "4xs",
+              filter: "none",
+            },
+            name: {
+              "font-size": "lg",
+              "font-weight": 600,
+              color: "text-1",
+              filter: "none",
+            },
+            position: {
+              "font-size": "base",
+              color: "text-2",
+              filter: "none",
+              "font-weight": 400,
+            },
+            social_levoGroup: {
+              display: "flex",
+              "justify-content": "center",
+              "column-gap": "xs",
+              filter: "none",
+              "border-style": "none",
+              "border-width": "0px",
+            },
+            social: [
+              {
+                icon: {
+                  width: "40px",
+                  height: "40px",
+                  "object-fit": "contain",
+                  filter: "none",
+                  "border-style": "solid",
+                  "border-width": "1px",
+                  "border-color": "brand",
+                  "border-radius": "lg",
+                  "background-color": "white",
+                  display: "block",
+                  padding: "xs",
+                  mobile: {
+                    filter: "none",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            card: {
+              display: "flex",
+              "flex-direction": "column",
+              "align-items": "center",
+              "background-color": "background-1",
+              "border-radius": "lg",
+              padding: "lg",
+              "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+              "margin-left": "6xs",
+              "margin-right": "6xs",
+              filter: "none",
+              "min-height": "400px",
+              "background-image":
+                'url("https://space.levo.in.net/W6OEVMW8/6a30b8841e2947b6f1fb3138bc36c5dbf7c9a6ef-4JOTlp1PZh12.png")',
+              "background-position": "center center",
+              "background-size": "cover",
+            },
+            image: {
+              width: "200px",
+              height: "200px",
+              "border-radius": "3xl",
+              "object-fit": "cover",
+              "margin-bottom": "base",
+              filter: "none",
+            },
+            info: {
+              display: "flex",
+              "flex-direction": "row",
+              "align-items": "center",
+              "text-align": "center",
+              "row-gap": "sm",
+              filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
+              width: "100%",
+              "background-color": "white",
+              "margin-top": "18xl",
+              "justify-content": "space-between",
+              "padding-top": "sm",
+              "padding-bottom": "sm",
+              "border-radius": "lg",
+              "border-style": "solid",
+              "border-width": "1px",
+              "padding-left": "xs",
+              "padding-right": "xs",
+            },
+            "name-position-wrapper": {
+              display: "flex",
+              "flex-direction": "column",
+              "align-items": "start",
+              "text-align": "center",
+              "row-gap": "4xs",
+              filter: "none",
+            },
+            name: {
+              "font-size": "lg",
+              "font-weight": 600,
+              color: "text-1",
+              filter: "none",
+            },
+            position: {
+              "font-size": "base",
+              color: "text-2",
+              filter: "none",
+              "font-weight": 400,
+            },
+            social_levoGroup: {
+              display: "flex",
+              "justify-content": "center",
+              "column-gap": "xs",
+              filter: "none",
+              "border-style": "none",
+              "border-width": "0px",
+            },
+            social: [
+              {
+                icon: {
+                  width: "40px",
+                  height: "40px",
+                  "object-fit": "contain",
+                  filter: "none",
+                  "border-style": "solid",
+                  "border-width": "1px",
+                  "border-color": "brand",
+                  "border-radius": "lg",
+                  "background-color": "white",
+                  display: "block",
+                  padding: "xs",
+                  mobile: {
+                    filter: "none",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            card: {
+              display: "flex",
+              "flex-direction": "column",
+              "align-items": "center",
+              "background-color": "background-1",
+              "border-radius": "lg",
+              padding: "lg",
+              "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+              "margin-left": "6xs",
+              "margin-right": "6xs",
+              filter: "none",
+              "min-height": "400px",
+              "background-image":
+                'url("https://space.levo.in.net/W6OEVMW8/6a30b8841e2947b6f1fb3138bc36c5dbf7c9a6ef-4JOTlp1PZh12.png")',
+              "background-position": "center center",
+              "background-size": "cover",
+            },
+            image: {
+              width: "200px",
+              height: "200px",
+              "border-radius": "3xl",
+              "object-fit": "cover",
+              "margin-bottom": "base",
+              filter: "none",
+            },
+            info: {
+              display: "flex",
+              "flex-direction": "row",
+              "align-items": "center",
+              "text-align": "center",
+              "row-gap": "sm",
+              filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
+              width: "100%",
+              "background-color": "white",
+              "margin-top": "18xl",
+              "justify-content": "space-between",
+              "padding-top": "sm",
+              "padding-bottom": "sm",
+              "border-radius": "lg",
+              "border-style": "solid",
+              "border-width": "1px",
+              "padding-left": "xs",
+              "padding-right": "xs",
+            },
+            "name-position-wrapper": {
+              display: "flex",
+              "flex-direction": "column",
+              "align-items": "start",
+              "text-align": "center",
+              "row-gap": "4xs",
+              filter: "none",
+            },
+            name: {
+              "font-size": "lg",
+              "font-weight": 600,
+              color: "text-1",
+              filter: "none",
+            },
+            position: {
+              "font-size": "base",
+              color: "text-2",
+              filter: "none",
+              "font-weight": 400,
+            },
+            social_levoGroup: {
+              display: "flex",
+              "justify-content": "center",
+              "column-gap": "xs",
+              filter: "none",
+              "border-style": "none",
+              "border-width": "0px",
+            },
+            social: [
+              {
+                icon: {
+                  width: "40px",
+                  height: "40px",
+                  "object-fit": "contain",
+                  filter: "none",
+                  "border-style": "solid",
+                  "border-width": "1px",
+                  "border-color": "brand",
+                  "border-radius": "lg",
+                  "background-color": "white",
+                  display: "block",
+                  padding: "xs",
+                  mobile: {
+                    filter: "none",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            card: {
+              display: "flex",
+              "flex-direction": "column",
+              "align-items": "center",
+              "background-color": "background-1",
+              "border-radius": "lg",
+              padding: "lg",
+              "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+              "margin-left": "6xs",
+              "margin-right": "6xs",
+              filter: "none",
+              "min-height": "400px",
+              "background-image":
+                'url("https://space.levo.in.net/W6OEVMW8/6a30b8841e2947b6f1fb3138bc36c5dbf7c9a6ef-4JOTlp1PZh12.png")',
+              "background-position": "center center",
+              "background-size": "cover",
+            },
+            image: {
+              width: "200px",
+              height: "200px",
+              "border-radius": "3xl",
+              "object-fit": "cover",
+              "margin-bottom": "base",
+              filter: "none",
+            },
+            info: {
+              display: "flex",
+              "flex-direction": "row",
+              "align-items": "center",
+              "text-align": "center",
+              "row-gap": "sm",
+              filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
+              width: "100%",
+              "background-color": "white",
+              "margin-top": "18xl",
+              "justify-content": "space-between",
+              "padding-top": "sm",
+              "padding-bottom": "sm",
+              "border-radius": "lg",
+              "border-style": "solid",
+              "border-width": "1px",
+              "padding-left": "xs",
+              "padding-right": "xs",
+            },
+            "name-position-wrapper": {
+              display: "flex",
+              "flex-direction": "column",
+              "align-items": "start",
+              "text-align": "center",
+              "row-gap": "4xs",
+              filter: "none",
+            },
+            name: {
+              "font-size": "lg",
+              "font-weight": 600,
+              color: "text-1",
+              filter: "none",
+            },
+            position: {
+              "font-size": "base",
+              color: "text-2",
+              filter: "none",
+              "font-weight": 400,
+            },
+            social_levoGroup: {
+              display: "flex",
+              "justify-content": "center",
+              "column-gap": "xs",
+              filter: "none",
+              "border-style": "none",
+              "border-width": "0px",
+            },
+            social: [
+              {
+                icon: {
+                  width: "40px",
+                  height: "40px",
+                  "object-fit": "contain",
+                  filter: "none",
+                  "border-style": "solid",
+                  "border-width": "1px",
+                  "border-color": "brand",
+                  "border-radius": "lg",
+                  "background-color": "white",
+                  display: "block",
+                  padding: "xs",
+                  mobile: {
+                    filter: "none",
+                  },
+                },
+              },
+            ],
+          },
+        ],
+        "carousel-navigation-container": {
+          display: "flex",
+          "justify-content": "center",
+          "margin-top": "2xl",
+        },
+        "carousel-navigation": {
+          display: "flex",
+          "column-gap": "2xs",
+          "align-items": "center",
+          filter: "none",
+        },
+        "carousel-navigation-pill": {
+          width: "50px",
+          height: "8px",
+          "border-radius": "8px",
+          "background-color": "brandSecondary",
+          cursor: "pointer",
+          filter: "none",
+        },
+      },
+    },
+  ],
+};