@levo-so/blocks 0.1.101 → 0.1.103

package/src/blocks/features/features-1/variants/minimal-list.ts

@@ -0,0 +1,139 @@
+import type { IBlockLayouts } from "@levo-so/studio";
+
+import { DEFAULT_CONTENT } from "./default";
+
+export const minimalListFeatures1Variant: IBlockLayouts = {
+  key: "minimal_list",
+  title: "Minimal List",
+  styles: {
+    layout: {
+      display: "flex",
+      width: "100%",
+      "flex-direction": "column",
+      "align-items": "center",
+    },
+    container: {
+      display: "flex",
+      width: "100%",
+      "flex-direction": "column",
+      "align-items": "center",
+      "row-gap": "4xl",
+      mobile: {
+        "row-gap": "3xl",
+      },
+    },
+    text_wrapper: {
+      display: "flex",
+      "flex-direction": "column",
+      "row-gap": "lg",
+      "max-width": "600px",
+      mobile: {
+        "row-gap": "sm",
+      },
+    },
+    label: {
+      "text-align": "center",
+    },
+    title: {
+      "text-align": "center",
+    },
+    description: {
+      "max-width": "600px",
+      "text-align": "center",
+    },
+    specialties_levoGroup: {
+      display: "grid",
+      width: "100%",
+      "grid-template-columns": "repeat(2, 1fr)",
+      "row-gap": "xl",
+      "column-gap": "xl",
+      tablet: {
+        "grid-template-columns": "repeat(1, 1fr)",
+      },
+      mobile: {
+        "grid-template-columns": "repeat(1, 1fr)",
+        "row-gap": "base",
+      },
+    },
+    specialties: Array(6)
+      .fill(0)
+      .map(() => ({
+        content_wrapper: {
+          "border-radius": "lg",
+          display: "flex",
+          "flex-direction": "row",
+          "column-gap": "lg",
+          "align-items": "start",
+          padding: "xl",
+          "background-color": "brandSecondary",
+          height: "100%",
+        },
+        icon_wrapper: {
+          display: "flex",
+          "justify-content": "center",
+          "align-items": "center",
+          "flex-shrink": "0",
+          width: "40px",
+          height: "40px",
+          "border-radius": "base",
+          "background-color": "background",
+        },
+        icon: {
+          height: "20px",
+          width: "20px",
+          "font-size": "20px",
+          "flex-shrink": "0",
+          color: "brand",
+        },
+        text_wrapper: {
+          display: "flex",
+          width: "100%",
+          "flex-direction": "column",
+          "row-gap": "3xs",
+        },
+        title: {
+          "font-weight": 600,
+        },
+        description: {
+          "max-width": "100%",
+        },
+        caption: {
+          display: "none",
+        },
+        ctas_levoGroup: {
+          display: "none",
+        },
+        ctas: [
+          {
+            cta: {},
+          },
+        ],
+      })),
+  },
+  content: DEFAULT_CONTENT,
+  config: {
+    title: {
+      selectedVariants: {
+        Heading_Level: "H2",
+      },
+      heading: {
+        level: 2,
+      },
+    },
+    specialties: Array(6)
+      .fill(0)
+      .map(() => ({
+        title: {
+          heading: {
+            level: "5",
+          },
+          selectedVariants: {
+            Heading_Level: "H5",
+          },
+        },
+        description: {
+          selectedVariants: {},
+        },
+      })),
+  },
+};

package/src/blocks/features/features-1/variants/stylized-cards-v1.ts

@@ -1,7 +1,11 @@
 import type { IBlockLayouts } from "@levo-so/studio";
 
-import { DEFAULT_CONTENT, DUMMY_ICON } from "./default";
+import { DEFAULT_CONTENT, ICON_CPU_CHARGE, ICON_GLOBAL } from "./default";
 
+/**
+ * 4-col grid variant. Uses the 6 shared cards plus two extras (global edge + compute)
+ * to fill the wider layout. Descriptions are shorter (~18 words) to match 4-col cadence.
+ */
 const DEFAULT_CONTENT_FOR_STYLIZED_CARDS = {
   ...DEFAULT_CONTENT,
   specialties: [
@@ -10,27 +14,72 @@ const DEFAULT_CONTENT_FOR_STYLIZED_CARDS = {
       content_wrapper: null,
       text_wrapper: null,
       icon_wrapper: null,
-      title: "Orthopedics",
+      title: "Global edge network",
       description:
-        "Specialized orthopedic care for musculoskeletal health and mobility with complimentary benefits.",
-      caption: " ",
-      icon: DUMMY_ICON,
-      cta: "Donate Now",
+        "Over 180 points of presence worldwide. Route traffic to the nearest region with sub-50ms latency.",
+      icon: ICON_GLOBAL,
+      ctas_levoGroup: null,
+      ctas: [{ cta: "View coverage" }],
     },
     {
       content_wrapper: null,
       text_wrapper: null,
       icon_wrapper: null,
-      title: "Pediatrics",
+      title: "High-performance compute",
       description:
-        "Specialized pediatrics care for children's health and development and they soar through sky.",
-      caption: " ",
-      icon: DUMMY_ICON,
-      cta: "Donate Now",
+        "GPU-ready nodes, confidential VMs, and burstable spot pools. Right-sized silicon for every workload you run.",
+      icon: ICON_CPU_CHARGE,
+      ctas_levoGroup: null,
+      ctas: [{ cta: "Explore platform" }],
     },
   ],
 };
 
+const V1_CARD_STYLE = {
+  content_wrapper: {
+    "border-radius": "xl",
+    "border-width": "1px",
+    "border-style": "solid",
+    "border-color": "var(--color-border)",
+    display: "flex",
+    "flex-direction": "column",
+    "row-gap": "base",
+    padding: "xl",
+    "background-color": "background-1",
+    "box-shadow": "4px 4px 23px -3px rgba(0, 0, 0, 0.05)",
+    height: "100%",
+  },
+  icon_wrapper: {
+    display: "flex",
+    "justify-content": "start",
+    "align-items": "center",
+  },
+  icon: {
+    height: "28px",
+    width: "28px",
+    "font-size": "28px",
+    "flex-shrink": "0",
+  },
+  text_wrapper: {
+    display: "flex",
+    width: "100%",
+    "flex-direction": "column",
+    "align-items": "start",
+    "row-gap": "xs",
+    "flex-grow": "1",
+  },
+  title: {
+    "font-weight": 700,
+  },
+  description: {},
+  caption: {
+    display: "none",
+  },
+  ctas_levoGroup: {
+    display: "none",
+  },
+};
+
 export const stylizedCardsV1Features1Variant: IBlockLayouts = {
   key: "stylized_cards_v1",
   title: "Stylized Cards V1",
@@ -45,9 +94,9 @@ export const stylizedCardsV1Features1Variant: IBlockLayouts = {
       display: "flex",
       "flex-direction": "column",
       "align-items": "center",
-      "row-gap": "8xl",
+      "row-gap": "5xl",
       mobile: {
-        "row-gap": "5xl",
+        "row-gap": "3xl",
       },
     },
     text_wrapper: {
@@ -81,304 +130,9 @@ export const stylizedCardsV1Features1Variant: IBlockLayouts = {
         "row-gap": "lg",
       },
     },
-    specialties: [
-      {
-        content_wrapper: {
-          "border-radius": "xl",
-          "border-width": "1px",
-          "border-style": "solid",
-          "border-color": "var(--color-border)",
-          display: "flex",
-          "flex-direction": "column",
-          "row-gap": "base",
-          "padding-top": "2xl",
-          "padding-bottom": "2xl",
-          "padding-left": "xl",
-          "padding-right": "xl",
-          "background-color": "white",
-          "box-shadow": "4px 4px 23px -3px rgba(0, 0, 0, 0.05)",
-        },
-        icon_wrapper: {
-          display: "flex",
-          "justify-content": "start",
-          "align-items": "center",
-        },
-        icon: {
-          height: "36px",
-          width: "36px",
-        },
-        text_wrapper: {
-          display: "flex",
-          width: "100%",
-          "flex-direction": "column",
-          "align-items": "start",
-          "row-gap": "xs",
-        },
-        title: {
-          "font-weight": 700,
-        },
-        description: {},
-      },
-      {
-        content_wrapper: {
-          "border-radius": "xl",
-          "border-width": "1px",
-          "border-style": "solid",
-          "border-color": "var(--color-border)",
-          display: "flex",
-          "flex-direction": "column",
-          "row-gap": "base",
-          "padding-top": "2xl",
-          "padding-bottom": "2xl",
-          "padding-left": "xl",
-          "padding-right": "xl",
-          "background-color": "white",
-          "box-shadow": "4px 4px 23px -3px rgba(0, 0, 0, 0.05)",
-        },
-        icon_wrapper: {
-          display: "flex",
-          "justify-content": "start",
-          "align-items": "center",
-        },
-        icon: {
-          height: "36px",
-          width: "36px",
-        },
-        text_wrapper: {
-          display: "flex",
-          width: "100%",
-          "flex-direction": "column",
-          "align-items": "start",
-          "row-gap": "xs",
-        },
-        title: {
-          "font-weight": 700,
-        },
-        description: {},
-      },
-      {
-        content_wrapper: {
-          "border-radius": "xl",
-          "border-width": "1px",
-          "border-style": "solid",
-          "border-color": "var(--color-border)",
-          display: "flex",
-          "flex-direction": "column",
-          "row-gap": "base",
-          "padding-top": "2xl",
-          "padding-bottom": "2xl",
-          "padding-left": "xl",
-          "padding-right": "xl",
-          "background-color": "white",
-          "box-shadow": "4px 4px 23px -3px rgba(0, 0, 0, 0.05)",
-        },
-        icon_wrapper: {
-          display: "flex",
-          "justify-content": "start",
-          "align-items": "center",
-        },
-        icon: {
-          height: "36px",
-          width: "36px",
-        },
-        text_wrapper: {
-          display: "flex",
-          width: "100%",
-          "flex-direction": "column",
-          "align-items": "start",
-          "row-gap": "xs",
-        },
-        title: {
-          "font-weight": 700,
-        },
-        description: {},
-      },
-      {
-        content_wrapper: {
-          "border-radius": "xl",
-          "border-width": "1px",
-          "border-style": "solid",
-          "border-color": "var(--color-border)",
-          display: "flex",
-          "flex-direction": "column",
-          "row-gap": "base",
-          "padding-top": "2xl",
-          "padding-bottom": "2xl",
-          "padding-left": "xl",
-          "padding-right": "xl",
-          "background-color": "white",
-          "box-shadow": "4px 4px 23px -3px rgba(0, 0, 0, 0.05)",
-        },
-        icon_wrapper: {
-          display: "flex",
-          "justify-content": "start",
-          "align-items": "center",
-        },
-        icon: {
-          height: "36px",
-          width: "36px",
-        },
-        text_wrapper: {
-          display: "flex",
-          width: "100%",
-          "flex-direction": "column",
-          "align-items": "start",
-          "row-gap": "xs",
-        },
-        title: {
-          "font-weight": 700,
-        },
-        description: {},
-      },
-      {
-        content_wrapper: {
-          "border-radius": "xl",
-          "border-width": "1px",
-          "border-style": "solid",
-          "border-color": "var(--color-border)",
-          display: "flex",
-          "flex-direction": "column",
-          "row-gap": "base",
-          "padding-top": "2xl",
-          "padding-bottom": "2xl",
-          "padding-left": "xl",
-          "padding-right": "xl",
-          "background-color": "white",
-          "box-shadow": "4px 4px 23px -3px rgba(0, 0, 0, 0.05)",
-        },
-        icon_wrapper: {
-          display: "flex",
-          "justify-content": "start",
-          "align-items": "center",
-        },
-        icon: {
-          height: "36px",
-          width: "36px",
-        },
-        text_wrapper: {
-          display: "flex",
-          width: "100%",
-          "flex-direction": "column",
-          "align-items": "start",
-          "row-gap": "xs",
-        },
-        title: {
-          "font-weight": 700,
-        },
-        description: {},
-      },
-      {
-        content_wrapper: {
-          "border-radius": "xl",
-          "border-width": "1px",
-          "border-style": "solid",
-          "border-color": "var(--color-border)",
-          display: "flex",
-          "flex-direction": "column",
-          "row-gap": "base",
-          "padding-top": "2xl",
-          "padding-bottom": "2xl",
-          "padding-left": "xl",
-          "padding-right": "xl",
-          "background-color": "white",
-          "box-shadow": "4px 4px 23px -3px rgba(0, 0, 0, 0.05)",
-        },
-        icon_wrapper: {
-          display: "flex",
-          "justify-content": "start",
-          "align-items": "center",
-        },
-        icon: {
-          height: "36px",
-          width: "36px",
-        },
-        text_wrapper: {
-          display: "flex",
-          width: "100%",
-          "flex-direction": "column",
-          "align-items": "start",
-          "row-gap": "xs",
-        },
-        title: {
-          "font-weight": 700,
-        },
-        description: {},
-      },
-      {
-        content_wrapper: {
-          "border-radius": "xl",
-          "border-width": "1px",
-          "border-style": "solid",
-          "border-color": "var(--color-border)",
-          display: "flex",
-          "flex-direction": "column",
-          "row-gap": "base",
-          "padding-top": "2xl",
-          "padding-bottom": "2xl",
-          "padding-left": "xl",
-          "padding-right": "xl",
-          "background-color": "white",
-          "box-shadow": "4px 4px 23px -3px rgba(0, 0, 0, 0.05)",
-        },
-        icon_wrapper: {
-          display: "flex",
-          "justify-content": "start",
-          "align-items": "center",
-        },
-        icon: {
-          height: "36px",
-          width: "36px",
-        },
-        text_wrapper: {
-          display: "flex",
-          width: "100%",
-          "flex-direction": "column",
-          "align-items": "start",
-          "row-gap": "xs",
-        },
-        title: {
-          "font-weight": 700,
-        },
-        description: {},
-      },
-      {
-        content_wrapper: {
-          "border-radius": "xl",
-          "border-width": "1px",
-          "border-style": "solid",
-          "border-color": "var(--color-border)",
-          display: "flex",
-          "flex-direction": "column",
-          "row-gap": "base",
-          "padding-top": "2xl",
-          "padding-bottom": "2xl",
-          "padding-left": "xl",
-          "padding-right": "xl",
-          "background-color": "white",
-          "box-shadow": "4px 4px 23px -3px rgba(0, 0, 0, 0.05)",
-        },
-        icon_wrapper: {
-          display: "flex",
-          "justify-content": "start",
-          "align-items": "center",
-        },
-        icon: {
-          height: "36px",
-          width: "36px",
-        },
-        text_wrapper: {
-          display: "flex",
-          width: "100%",
-          "flex-direction": "column",
-          "align-items": "start",
-          "row-gap": "xs",
-        },
-        title: {
-          "font-weight": 700,
-        },
-        description: {},
-      },
-    ],
+    specialties: Array(8)
+      .fill(0)
+      .map(() => V1_CARD_STYLE),
   },
   content: DEFAULT_CONTENT_FOR_STYLIZED_CARDS,
   config: {
@@ -390,8 +144,9 @@ export const stylizedCardsV1Features1Variant: IBlockLayouts = {
         Heading_Level: "H3",
       },
     },
-    specialties: [
-      {
+    specialties: Array(8)
+      .fill(0)
+      .map(() => ({
         title: {
           heading: {
             level: "4",
@@ -400,77 +155,6 @@ export const stylizedCardsV1Features1Variant: IBlockLayouts = {
             Heading_Level: "H5",
           },
         },
-      },
-      {
-        title: {
-          heading: {
-            level: "4",
-          },
-          selectedVariants: {
-            Heading_Level: "H5",
-          },
-        },
-      },
-      {
-        title: {
-          heading: {
-            level: "4",
-          },
-          selectedVariants: {
-            Heading_Level: "H5",
-          },
-        },
-      },
-      {
-        title: {
-          heading: {
-            level: "4",
-          },
-          selectedVariants: {
-            Heading_Level: "H5",
-          },
-        },
-      },
-      {
-        title: {
-          heading: {
-            level: "4",
-          },
-          selectedVariants: {
-            Heading_Level: "H5",
-          },
-        },
-      },
-      {
-        title: {
-          heading: {
-            level: "4",
-          },
-          selectedVariants: {
-            Heading_Level: "H5",
-          },
-        },
-      },
-      {
-        title: {
-          heading: {
-            level: "4",
-          },
-          selectedVariants: {
-            Heading_Level: "H5",
-          },
-        },
-      },
-      {
-        title: {
-          heading: {
-            level: "4",
-          },
-          selectedVariants: {
-            Heading_Level: "H5",
-          },
-        },
-      },
-    ],
+      })),
   },
 };