@almadar/ui 2.15.10 → 2.15.12

package/dist/components/index.cjs

@@ -7078,11 +7078,11 @@ var gapStyles4 = {
 };
 var colStyles2 = {
   1: "grid-cols-1",
-  2: "grid-cols-2",
-  3: "grid-cols-3",
-  4: "grid-cols-4",
-  5: "grid-cols-5",
-  6: "grid-cols-6"
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
+  5: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5",
+  6: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6"
 };
 var SimpleGrid = ({
   minChildWidth = 250,
@@ -14945,7 +14945,7 @@ var HeroSection = ({
       className: cn(
         "w-full min-h-[60vh] flex items-center justify-center",
         "px-6 py-20",
-        "relative overflow-hidden",
+        "relative overflow-x-hidden overflow-y-visible",
         className
       ),
       children: [
@@ -15319,13 +15319,13 @@ var StepFlow = ({
       ] })
     ] }) }, index)) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "none", align: "start", className: cn("w-full", className), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(React87__namespace.default.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", align: "center", className: "flex-1", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("w-full flex flex-col md:flex-row items-start gap-0", className), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(React87__namespace.default.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", align: "center", className: "flex-1 w-full md:w-auto", children: [
       /* @__PURE__ */ jsxRuntime.jsx(StepCircle, { step, index }),
       /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", className: "text-center", children: step.title }),
       /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", color: "muted", className: "text-center", children: step.description })
     ] }),
-    showConnectors && index < steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-shrink-0 pt-5 px-2", children: /* @__PURE__ */ jsxRuntime.jsx(Divider, { orientation: "horizontal", className: "w-12" }) })
+    showConnectors && index < steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-shrink-0 self-center py-2 md:pt-5 md:py-0 md:px-2", children: /* @__PURE__ */ jsxRuntime.jsx(Divider, { orientation: "horizontal", className: "w-12 md:w-12" }) })
   ] }, index)) });
 };
 StepFlow.displayName = "StepFlow";
@@ -15376,13 +15376,10 @@ var SplitSection = ({
         className
       ),
       padding: "lg",
-      children: /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "lg", align: "start", className: "flex-wrap gap-16", children: isImageLeft ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        mediaContent,
-        textContent
-      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: cn("flex flex-col lg:flex-row gap-10 lg:gap-16 items-start", isImageLeft && "lg:flex-row-reverse"), children: [
         textContent,
         mediaContent
-      ] }) })
+      ] })
     }
   );
 };

package/dist/components/index.js

@@ -7047,11 +7047,11 @@ var gapStyles4 = {
 };
 var colStyles2 = {
   1: "grid-cols-1",
-  2: "grid-cols-2",
-  3: "grid-cols-3",
-  4: "grid-cols-4",
-  5: "grid-cols-5",
-  6: "grid-cols-6"
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
+  5: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5",
+  6: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6"
 };
 var SimpleGrid = ({
   minChildWidth = 250,
@@ -14914,7 +14914,7 @@ var HeroSection = ({
       className: cn(
         "w-full min-h-[60vh] flex items-center justify-center",
         "px-6 py-20",
-        "relative overflow-hidden",
+        "relative overflow-x-hidden overflow-y-visible",
         className
       ),
       children: [
@@ -15288,13 +15288,13 @@ var StepFlow = ({
       ] })
     ] }) }, index)) });
   }
-  return /* @__PURE__ */ jsx(HStack, { gap: "none", align: "start", className: cn("w-full", className), children: steps.map((step, index) => /* @__PURE__ */ jsxs(React87__default.Fragment, { children: [
-    /* @__PURE__ */ jsxs(VStack, { gap: "sm", align: "center", className: "flex-1", children: [
+  return /* @__PURE__ */ jsx(Box, { className: cn("w-full flex flex-col md:flex-row items-start gap-0", className), children: steps.map((step, index) => /* @__PURE__ */ jsxs(React87__default.Fragment, { children: [
+    /* @__PURE__ */ jsxs(VStack, { gap: "sm", align: "center", className: "flex-1 w-full md:w-auto", children: [
       /* @__PURE__ */ jsx(StepCircle, { step, index }),
       /* @__PURE__ */ jsx(Typography, { variant: "h4", className: "text-center", children: step.title }),
       /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "muted", className: "text-center", children: step.description })
     ] }),
-    showConnectors && index < steps.length - 1 && /* @__PURE__ */ jsx(Box, { className: "flex-shrink-0 pt-5 px-2", children: /* @__PURE__ */ jsx(Divider, { orientation: "horizontal", className: "w-12" }) })
+    showConnectors && index < steps.length - 1 && /* @__PURE__ */ jsx(Box, { className: "flex-shrink-0 self-center py-2 md:pt-5 md:py-0 md:px-2", children: /* @__PURE__ */ jsx(Divider, { orientation: "horizontal", className: "w-12 md:w-12" }) })
   ] }, index)) });
 };
 StepFlow.displayName = "StepFlow";
@@ -15345,13 +15345,10 @@ var SplitSection = ({
         className
       ),
       padding: "lg",
-      children: /* @__PURE__ */ jsx(HStack, { gap: "lg", align: "start", className: "flex-wrap gap-16", children: isImageLeft ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        mediaContent,
-        textContent
-      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      children: /* @__PURE__ */ jsxs(Box, { className: cn("flex flex-col lg:flex-row gap-10 lg:gap-16 items-start", isImageLeft && "lg:flex-row-reverse"), children: [
         textContent,
         mediaContent
-      ] }) })
+      ] })
     }
   );
 };

package/dist/illustrations/index.cjs

@@ -2484,40 +2484,19 @@ var SharedReality = ({
 };
 SharedReality.displayName = "SharedReality";
 var standardLibraryId = 0;
-var RING_DATA = [
-  {
-    r: 70,
-    clusters: [
-      { angle: 0, dots: 3 },
-      { angle: 1.57, dots: 2 },
-      { angle: 3.14, dots: 3 },
-      { angle: 4.71, dots: 2 }
-    ]
-  },
-  {
-    r: 120,
-    clusters: [
-      { angle: 0.5, dots: 3 },
-      { angle: 1.3, dots: 2 },
-      { angle: 2.1, dots: 3 },
-      { angle: 3.5, dots: 2 },
-      { angle: 4.3, dots: 3 },
-      { angle: 5.5, dots: 2 }
-    ]
-  },
-  {
-    r: 170,
-    clusters: [
-      { angle: 0.3, dots: 2 },
-      { angle: 1, dots: 2 },
-      { angle: 1.7, dots: 1 },
-      { angle: 2.4, dots: 2 },
-      { angle: 3.1, dots: 2 },
-      { angle: 3.9, dots: 1 },
-      { angle: 4.6, dots: 2 },
-      { angle: 5.6, dots: 2 }
-    ]
-  }
+var GROUPS = [
+  { x: 300, y: 80, dots: 5 },
+  // top
+  { x: 430, y: 140, dots: 4 },
+  // top-right
+  { x: 430, y: 260, dots: 5 },
+  // bottom-right
+  { x: 300, y: 320, dots: 4 },
+  // bottom
+  { x: 170, y: 260, dots: 5 },
+  // bottom-left
+  { x: 170, y: 140, dots: 4 }
+  // top-left
 ];
 var StandardLibrary = ({
   className,
@@ -2527,13 +2506,7 @@ var StandardLibrary = ({
   const ids = React__default.default.useMemo(() => {
     standardLibraryId += 1;
     const base = `sl-${standardLibraryId}`;
-    return {
-      glow: `${base}-glow`,
-      grad1: `${base}-g1`,
-      grad2: `${base}-g2`,
-      grad3: `${base}-g3`,
-      nucGlow: `${base}-ng`
-    };
+    return { glow: `${base}-glow`, groupGlow: `${base}-gg` };
   }, []);
   const cx = 300;
   const cy = 200;
@@ -2546,87 +2519,78 @@ var StandardLibrary = ({
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
           /* @__PURE__ */ jsxRuntime.jsxs("filter", { id: ids.glow, x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "4", result: "blur" }),
+            /* @__PURE__ */ jsxRuntime.jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "3", result: "blur" }),
             /* @__PURE__ */ jsxRuntime.jsxs("feMerge", { children: [
               /* @__PURE__ */ jsxRuntime.jsx("feMergeNode", { in: "blur" }),
               /* @__PURE__ */ jsxRuntime.jsx("feMergeNode", { in: "SourceGraphic" })
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("radialGradient", { id: ids.nucGlow, cx: "50%", cy: "50%", r: "50%", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.25 }),
+          /* @__PURE__ */ jsxRuntime.jsxs("radialGradient", { id: ids.groupGlow, cx: "50%", cy: "50%", r: "50%", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.1 }),
             /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0 })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: ids.grad1, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.35 }),
-            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "50%", stopColor: color, stopOpacity: 0.15 }),
-            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.35 })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: ids.grad2, x1: "100%", y1: "0%", x2: "0%", y2: "100%", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.25 }),
-            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "50%", stopColor: color, stopOpacity: 0.1 }),
-            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.25 })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: ids.grad3, x1: "0%", y1: "100%", x2: "100%", y2: "0%", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.2 }),
-            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "50%", stopColor: color, stopOpacity: 0.06 }),
-            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.2 })
           ] })
         ] }),
         animated && /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
-          @keyframes sl-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+          @keyframes sl-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.7; } }
         ` }),
-        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx, cy, r: 190, fill: "none", stroke: color, strokeWidth: 0.3, opacity: 0.03 }),
-        [ids.grad1, ids.grad2, ids.grad3].map((gradId, ri) => /* @__PURE__ */ jsxRuntime.jsx(
-          "circle",
+        GROUPS.map((g, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          "line",
           {
-            cx,
-            cy,
-            r: RING_DATA[ri].r,
-            fill: "none",
-            stroke: `url(#${gradId})`,
-            strokeWidth: ri === 0 ? 1.5 : 1,
-            strokeDasharray: ri === 2 ? "3 6" : void 0
+            x1: cx,
+            y1: cy,
+            x2: g.x,
+            y2: g.y,
+            stroke: color,
+            strokeWidth: 0.8,
+            opacity: 0.1,
+            strokeDasharray: "4 6"
           },
-          `ring-${ri}`
+          `conn-${i}`
         )),
-        RING_DATA.map((ring, ri) => /* @__PURE__ */ jsxRuntime.jsx(
-          "g",
-          {
-            style: animated ? {
-              transformOrigin: `${cx}px ${cy}px`,
-              animation: `sl-orbit ${40 + ri * 20}s linear infinite${ri % 2 === 1 ? " reverse" : ""}`
-            } : void 0,
-            children: ring.clusters.map((cluster, ci) => {
-              const basex = cx + Math.cos(cluster.angle) * ring.r;
-              const basey = cy + Math.sin(cluster.angle) * ring.r;
-              const opacity = ri === 0 ? 0.6 : ri === 1 ? 0.45 : 0.3;
-              const dotR = ri === 0 ? 3.5 : ri === 1 ? 3 : 2.5;
-              return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
-                Array.from({ length: cluster.dots }, (_, di) => {
-                  const offsetAngle = cluster.angle + (di - (cluster.dots - 1) / 2) * 0.12;
-                  const offsetR = ring.r + (di % 2 === 0 ? 6 : -6);
-                  const dx = cx + Math.cos(offsetAngle) * offsetR;
-                  const dy = cy + Math.sin(offsetAngle) * offsetR;
-                  return /* @__PURE__ */ jsxRuntime.jsx(
-                    "circle",
-                    {
-                      cx: dx,
-                      cy: dy,
-                      r: dotR,
-                      fill: color,
-                      opacity
-                    },
-                    `dot-${ri}-${ci}-${di}`
-                  );
-                }),
-                /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: basex, cy: basey, r: dotR + 1, fill: color, opacity: opacity * 0.7 })
-              ] }, `cluster-${ri}-${ci}`);
+        GROUPS.map((g, i) => {
+          const next = GROUPS[(i + 1) % GROUPS.length];
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "line",
+            {
+              x1: g.x,
+              y1: g.y,
+              x2: next.x,
+              y2: next.y,
+              stroke: color,
+              strokeWidth: 0.5,
+              opacity: 0.06
+            },
+            `adj-${i}`
+          );
+        }),
+        GROUPS.map((group, gi) => {
+          const dotR = 3;
+          const spread = 14;
+          return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: group.x, cy: group.y, r: 28, fill: `url(#${ids.groupGlow})` }),
+            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: group.x, cy: group.y, r: 24, fill: "none", stroke: color, strokeWidth: 0.7, opacity: 0.15 }),
+            Array.from({ length: group.dots }, (_, di) => {
+              const angle = di / group.dots * Math.PI * 2 - Math.PI / 2;
+              const r = di === 0 ? 0 : spread * 0.55;
+              const dx = di === 0 ? group.x : group.x + Math.cos(angle) * r;
+              const dy = di === 0 ? group.y : group.y + Math.sin(angle) * r;
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "circle",
+                {
+                  cx: dx,
+                  cy: dy,
+                  r: di === 0 ? dotR + 1 : dotR,
+                  fill: color,
+                  opacity: di === 0 ? 0.6 : 0.35,
+                  style: animated && di === 0 ? { animation: `sl-pulse 3s ease-in-out ${gi * 0.4}s infinite` } : void 0
+                },
+                `dot-${gi}-${di}`
+              );
             })
-          },
-          `ring-clusters-${ri}`
-        )),
-        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx, cy, r: 25, fill: `url(#${ids.nucGlow})` }),
-        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx, cy, r: 8, fill: color, opacity: 0.7, filter: `url(#${ids.glow})` })
+          ] }, `group-${gi}`);
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx, cy, r: 16, fill: "none", stroke: color, strokeWidth: 1, opacity: 0.25 }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx, cy, r: 6, fill: color, opacity: 0.6, filter: `url(#${ids.glow})` })
       ]
     }
   );

package/dist/illustrations/index.js

@@ -2478,40 +2478,19 @@ var SharedReality = ({
 };
 SharedReality.displayName = "SharedReality";
 var standardLibraryId = 0;
-var RING_DATA = [
-  {
-    r: 70,
-    clusters: [
-      { angle: 0, dots: 3 },
-      { angle: 1.57, dots: 2 },
-      { angle: 3.14, dots: 3 },
-      { angle: 4.71, dots: 2 }
-    ]
-  },
-  {
-    r: 120,
-    clusters: [
-      { angle: 0.5, dots: 3 },
-      { angle: 1.3, dots: 2 },
-      { angle: 2.1, dots: 3 },
-      { angle: 3.5, dots: 2 },
-      { angle: 4.3, dots: 3 },
-      { angle: 5.5, dots: 2 }
-    ]
-  },
-  {
-    r: 170,
-    clusters: [
-      { angle: 0.3, dots: 2 },
-      { angle: 1, dots: 2 },
-      { angle: 1.7, dots: 1 },
-      { angle: 2.4, dots: 2 },
-      { angle: 3.1, dots: 2 },
-      { angle: 3.9, dots: 1 },
-      { angle: 4.6, dots: 2 },
-      { angle: 5.6, dots: 2 }
-    ]
-  }
+var GROUPS = [
+  { x: 300, y: 80, dots: 5 },
+  // top
+  { x: 430, y: 140, dots: 4 },
+  // top-right
+  { x: 430, y: 260, dots: 5 },
+  // bottom-right
+  { x: 300, y: 320, dots: 4 },
+  // bottom
+  { x: 170, y: 260, dots: 5 },
+  // bottom-left
+  { x: 170, y: 140, dots: 4 }
+  // top-left
 ];
 var StandardLibrary = ({
   className,
@@ -2521,13 +2500,7 @@ var StandardLibrary = ({
   const ids = React.useMemo(() => {
     standardLibraryId += 1;
     const base = `sl-${standardLibraryId}`;
-    return {
-      glow: `${base}-glow`,
-      grad1: `${base}-g1`,
-      grad2: `${base}-g2`,
-      grad3: `${base}-g3`,
-      nucGlow: `${base}-ng`
-    };
+    return { glow: `${base}-glow`, groupGlow: `${base}-gg` };
   }, []);
   const cx = 300;
   const cy = 200;
@@ -2540,87 +2513,78 @@ var StandardLibrary = ({
       children: [
         /* @__PURE__ */ jsxs("defs", { children: [
           /* @__PURE__ */ jsxs("filter", { id: ids.glow, x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
-            /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "4", result: "blur" }),
+            /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "3", result: "blur" }),
             /* @__PURE__ */ jsxs("feMerge", { children: [
               /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
               /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs("radialGradient", { id: ids.nucGlow, cx: "50%", cy: "50%", r: "50%", children: [
-            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.25 }),
+          /* @__PURE__ */ jsxs("radialGradient", { id: ids.groupGlow, cx: "50%", cy: "50%", r: "50%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.1 }),
             /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0 })
-          ] }),
-          /* @__PURE__ */ jsxs("linearGradient", { id: ids.grad1, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
-            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.35 }),
-            /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: color, stopOpacity: 0.15 }),
-            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.35 })
-          ] }),
-          /* @__PURE__ */ jsxs("linearGradient", { id: ids.grad2, x1: "100%", y1: "0%", x2: "0%", y2: "100%", children: [
-            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.25 }),
-            /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: color, stopOpacity: 0.1 }),
-            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.25 })
-          ] }),
-          /* @__PURE__ */ jsxs("linearGradient", { id: ids.grad3, x1: "0%", y1: "100%", x2: "100%", y2: "0%", children: [
-            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.2 }),
-            /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: color, stopOpacity: 0.06 }),
-            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.2 })
           ] })
         ] }),
         animated && /* @__PURE__ */ jsx("style", { children: `
-          @keyframes sl-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+          @keyframes sl-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.7; } }
         ` }),
-        /* @__PURE__ */ jsx("circle", { cx, cy, r: 190, fill: "none", stroke: color, strokeWidth: 0.3, opacity: 0.03 }),
-        [ids.grad1, ids.grad2, ids.grad3].map((gradId, ri) => /* @__PURE__ */ jsx(
-          "circle",
+        GROUPS.map((g, i) => /* @__PURE__ */ jsx(
+          "line",
           {
-            cx,
-            cy,
-            r: RING_DATA[ri].r,
-            fill: "none",
-            stroke: `url(#${gradId})`,
-            strokeWidth: ri === 0 ? 1.5 : 1,
-            strokeDasharray: ri === 2 ? "3 6" : void 0
+            x1: cx,
+            y1: cy,
+            x2: g.x,
+            y2: g.y,
+            stroke: color,
+            strokeWidth: 0.8,
+            opacity: 0.1,
+            strokeDasharray: "4 6"
           },
-          `ring-${ri}`
+          `conn-${i}`
         )),
-        RING_DATA.map((ring, ri) => /* @__PURE__ */ jsx(
-          "g",
-          {
-            style: animated ? {
-              transformOrigin: `${cx}px ${cy}px`,
-              animation: `sl-orbit ${40 + ri * 20}s linear infinite${ri % 2 === 1 ? " reverse" : ""}`
-            } : void 0,
-            children: ring.clusters.map((cluster, ci) => {
-              const basex = cx + Math.cos(cluster.angle) * ring.r;
-              const basey = cy + Math.sin(cluster.angle) * ring.r;
-              const opacity = ri === 0 ? 0.6 : ri === 1 ? 0.45 : 0.3;
-              const dotR = ri === 0 ? 3.5 : ri === 1 ? 3 : 2.5;
-              return /* @__PURE__ */ jsxs("g", { children: [
-                Array.from({ length: cluster.dots }, (_, di) => {
-                  const offsetAngle = cluster.angle + (di - (cluster.dots - 1) / 2) * 0.12;
-                  const offsetR = ring.r + (di % 2 === 0 ? 6 : -6);
-                  const dx = cx + Math.cos(offsetAngle) * offsetR;
-                  const dy = cy + Math.sin(offsetAngle) * offsetR;
-                  return /* @__PURE__ */ jsx(
-                    "circle",
-                    {
-                      cx: dx,
-                      cy: dy,
-                      r: dotR,
-                      fill: color,
-                      opacity
-                    },
-                    `dot-${ri}-${ci}-${di}`
-                  );
-                }),
-                /* @__PURE__ */ jsx("circle", { cx: basex, cy: basey, r: dotR + 1, fill: color, opacity: opacity * 0.7 })
-              ] }, `cluster-${ri}-${ci}`);
+        GROUPS.map((g, i) => {
+          const next = GROUPS[(i + 1) % GROUPS.length];
+          return /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: g.x,
+              y1: g.y,
+              x2: next.x,
+              y2: next.y,
+              stroke: color,
+              strokeWidth: 0.5,
+              opacity: 0.06
+            },
+            `adj-${i}`
+          );
+        }),
+        GROUPS.map((group, gi) => {
+          const dotR = 3;
+          const spread = 14;
+          return /* @__PURE__ */ jsxs("g", { children: [
+            /* @__PURE__ */ jsx("circle", { cx: group.x, cy: group.y, r: 28, fill: `url(#${ids.groupGlow})` }),
+            /* @__PURE__ */ jsx("circle", { cx: group.x, cy: group.y, r: 24, fill: "none", stroke: color, strokeWidth: 0.7, opacity: 0.15 }),
+            Array.from({ length: group.dots }, (_, di) => {
+              const angle = di / group.dots * Math.PI * 2 - Math.PI / 2;
+              const r = di === 0 ? 0 : spread * 0.55;
+              const dx = di === 0 ? group.x : group.x + Math.cos(angle) * r;
+              const dy = di === 0 ? group.y : group.y + Math.sin(angle) * r;
+              return /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: dx,
+                  cy: dy,
+                  r: di === 0 ? dotR + 1 : dotR,
+                  fill: color,
+                  opacity: di === 0 ? 0.6 : 0.35,
+                  style: animated && di === 0 ? { animation: `sl-pulse 3s ease-in-out ${gi * 0.4}s infinite` } : void 0
+                },
+                `dot-${gi}-${di}`
+              );
             })
-          },
-          `ring-clusters-${ri}`
-        )),
-        /* @__PURE__ */ jsx("circle", { cx, cy, r: 25, fill: `url(#${ids.nucGlow})` }),
-        /* @__PURE__ */ jsx("circle", { cx, cy, r: 8, fill: color, opacity: 0.7, filter: `url(#${ids.glow})` })
+          ] }, `group-${gi}`);
+        }),
+        /* @__PURE__ */ jsx("circle", { cx, cy, r: 16, fill: "none", stroke: color, strokeWidth: 1, opacity: 0.25 }),
+        /* @__PURE__ */ jsx("circle", { cx, cy, r: 6, fill: color, opacity: 0.6, filter: `url(#${ids.glow})` })
       ]
     }
   );

package/dist/marketing/index.cjs

@@ -3687,7 +3687,7 @@ var HeroSection = ({
       className: cn(
         "w-full min-h-[60vh] flex items-center justify-center",
         "px-6 py-20",
-        "relative overflow-hidden",
+        "relative overflow-x-hidden overflow-y-visible",
         className
       ),
       children: [
@@ -3843,11 +3843,11 @@ var gapStyles2 = {
 };
 var colStyles = {
   1: "grid-cols-1",
-  2: "grid-cols-2",
-  3: "grid-cols-3",
-  4: "grid-cols-4",
-  5: "grid-cols-5",
-  6: "grid-cols-6"
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
+  5: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5",
+  6: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6"
 };
 var SimpleGrid = ({
   minChildWidth = 250,
@@ -4021,13 +4021,10 @@ var SplitSection = ({
         className
       ),
       padding: "lg",
-      children: /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "lg", align: "start", className: "flex-wrap gap-16", children: isImageLeft ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        mediaContent,
-        textContent
-      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: cn("flex flex-col lg:flex-row gap-10 lg:gap-16 items-start", isImageLeft && "lg:flex-row-reverse"), children: [
         textContent,
         mediaContent
-      ] }) })
+      ] })
     }
   );
 };
@@ -4077,13 +4074,13 @@ var StepFlow = ({
       ] })
     ] }) }, index)) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "none", align: "start", className: cn("w-full", className), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(React5__default.default.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", align: "center", className: "flex-1", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("w-full flex flex-col md:flex-row items-start gap-0", className), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(React5__default.default.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", align: "center", className: "flex-1 w-full md:w-auto", children: [
       /* @__PURE__ */ jsxRuntime.jsx(StepCircle, { step, index }),
       /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", className: "text-center", children: step.title }),
       /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", color: "muted", className: "text-center", children: step.description })
     ] }),
-    showConnectors && index < steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-shrink-0 pt-5 px-2", children: /* @__PURE__ */ jsxRuntime.jsx(Divider, { orientation: "horizontal", className: "w-12" }) })
+    showConnectors && index < steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-shrink-0 self-center py-2 md:pt-5 md:py-0 md:px-2", children: /* @__PURE__ */ jsxRuntime.jsx(Divider, { orientation: "horizontal", className: "w-12 md:w-12" }) })
   ] }, index)) });
 };
 StepFlow.displayName = "StepFlow";

package/dist/marketing/index.js

@@ -1,5 +1,5 @@
 import React5, { createContext, useCallback, useContext, useState, useRef, useEffect } from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import * as LucideIcons from 'lucide-react';
 import { Loader2, Check, User } from 'lucide-react';
 
@@ -3663,7 +3663,7 @@ var HeroSection = ({
       className: cn(
         "w-full min-h-[60vh] flex items-center justify-center",
         "px-6 py-20",
-        "relative overflow-hidden",
+        "relative overflow-x-hidden overflow-y-visible",
         className
       ),
       children: [
@@ -3819,11 +3819,11 @@ var gapStyles2 = {
 };
 var colStyles = {
   1: "grid-cols-1",
-  2: "grid-cols-2",
-  3: "grid-cols-3",
-  4: "grid-cols-4",
-  5: "grid-cols-5",
-  6: "grid-cols-6"
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
+  5: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5",
+  6: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6"
 };
 var SimpleGrid = ({
   minChildWidth = 250,
@@ -3997,13 +3997,10 @@ var SplitSection = ({
         className
       ),
       padding: "lg",
-      children: /* @__PURE__ */ jsx(HStack, { gap: "lg", align: "start", className: "flex-wrap gap-16", children: isImageLeft ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        mediaContent,
-        textContent
-      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      children: /* @__PURE__ */ jsxs(Box, { className: cn("flex flex-col lg:flex-row gap-10 lg:gap-16 items-start", isImageLeft && "lg:flex-row-reverse"), children: [
         textContent,
         mediaContent
-      ] }) })
+      ] })
     }
   );
 };
@@ -4053,13 +4050,13 @@ var StepFlow = ({
       ] })
     ] }) }, index)) });
   }
-  return /* @__PURE__ */ jsx(HStack, { gap: "none", align: "start", className: cn("w-full", className), children: steps.map((step, index) => /* @__PURE__ */ jsxs(React5.Fragment, { children: [
-    /* @__PURE__ */ jsxs(VStack, { gap: "sm", align: "center", className: "flex-1", children: [
+  return /* @__PURE__ */ jsx(Box, { className: cn("w-full flex flex-col md:flex-row items-start gap-0", className), children: steps.map((step, index) => /* @__PURE__ */ jsxs(React5.Fragment, { children: [
+    /* @__PURE__ */ jsxs(VStack, { gap: "sm", align: "center", className: "flex-1 w-full md:w-auto", children: [
       /* @__PURE__ */ jsx(StepCircle, { step, index }),
       /* @__PURE__ */ jsx(Typography, { variant: "h4", className: "text-center", children: step.title }),
       /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "muted", className: "text-center", children: step.description })
     ] }),
-    showConnectors && index < steps.length - 1 && /* @__PURE__ */ jsx(Box, { className: "flex-shrink-0 pt-5 px-2", children: /* @__PURE__ */ jsx(Divider, { orientation: "horizontal", className: "w-12" }) })
+    showConnectors && index < steps.length - 1 && /* @__PURE__ */ jsx(Box, { className: "flex-shrink-0 self-center py-2 md:pt-5 md:py-0 md:px-2", children: /* @__PURE__ */ jsx(Divider, { orientation: "horizontal", className: "w-12 md:w-12" }) })
   ] }, index)) });
 };
 StepFlow.displayName = "StepFlow";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "2.15.10",
+  "version": "2.15.12",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "main": "./dist/components/index.js",

package/themes/almadar-website.css

@@ -0,0 +1,195 @@
+/**
+ * Almadar Website Theme
+ *
+ * Brand-accurate theme for almadar.io based on Almadar Brand Guidelines.
+ * Teal primary, Cyan accent, Sand Gold highlights, Plus Jakarta Sans typography.
+ * Dark hero sections with light content sections (mixed mode).
+ */
+
+/* ==========================================================================
+ * LIGHT MODE (content sections)
+ * ========================================================================== */
+[data-theme="almadar-website-light"] {
+    /* Shadows */
+    --shadow-main: 0 4px 14px rgba(20, 184, 166, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05);
+    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
+    --shadow-lg: 0 8px 30px rgba(20, 184, 166, 0.12), 0 4px 10px rgba(0, 0, 0, 0.04);
+    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.04);
+    --shadow-none: none;
+    --shadow-hover: 0 12px 40px rgba(20, 184, 166, 0.15);
+    --shadow-active: 0 2px 8px rgba(20, 184, 166, 0.1);
+
+    /* Border radius */
+    --radius-none: 0px;
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 14px;
+    --radius-xl: 20px;
+    --radius-full: 9999px;
+
+    /* Border width */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* Colors - Teal on parchment */
+    --color-primary: #14b8a6;
+    --color-primary-hover: #0d9488;
+    --color-primary-foreground: #ffffff;
+
+    --color-secondary: #f1f5f9;
+    --color-secondary-hover: #e2e8f0;
+    --color-secondary-foreground: #0f172a;
+
+    --color-accent: #06b6d4;
+    --color-accent-foreground: #ffffff;
+
+    --color-muted: #f1f5f9;
+    --color-muted-foreground: #64748b;
+
+    --color-background: #ffffff;
+    --color-foreground: #0f172a;
+    --color-card: #ffffff;
+    --color-card-foreground: #0f172a;
+    --color-surface: #f8fafc;
+    --color-border: #e2e8f0;
+    --color-input: #e2e8f0;
+    --color-ring: #14b8a6;
+
+    /* Sand Gold for special accents */
+    --color-gold: #c9a227;
+
+    /* Semantic colors */
+    --color-error: #dc2626;
+    --color-error-foreground: #ffffff;
+    --color-success: #22c55e;
+    --color-success-foreground: #ffffff;
+    --color-warning: #f59e0b;
+    --color-warning-foreground: #000000;
+    --color-info: #3b82f6;
+    --color-info-foreground: #ffffff;
+
+    /* Typography - Plus Jakarta Sans per brand guidelines */
+    --font-family: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 700;
+    --letter-spacing: -0.02em;
+    --line-height: 1.6;
+
+    /* Icon styling */
+    --icon-stroke-width: 1.75;
+    --icon-color: #14b8a6;
+
+    /* Transitions */
+    --transition-fast: 150ms;
+    --transition-normal: 250ms;
+    --transition-slow: 400ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Hover/Active */
+    --hover-scale: 1.02;
+    --hover-translate-y: -2px;
+    --hover-translate-x: 0;
+    --active-scale: 0.98;
+    --active-translate-y: 0;
+
+    /* Focus ring */
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #14b8a6;
+}
+
+/* ==========================================================================
+ * DARK MODE (hero sections, dark backgrounds)
+ * ========================================================================== */
+[data-theme="almadar-website-dark"] {
+    /* Shadows - Teal glow */
+    --shadow-main: 0 4px 14px rgba(20, 184, 166, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
+    --shadow-sm: 0 2px 4px rgba(20, 184, 166, 0.1);
+    --shadow-lg: 0 8px 30px rgba(20, 184, 166, 0.25), 0 4px 10px rgba(0, 0, 0, 0.1);
+    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    --shadow-none: none;
+    --shadow-hover: 0 12px 40px rgba(20, 184, 166, 0.35), 0 4px 12px rgba(6, 182, 212, 0.2);
+    --shadow-active: 0 2px 8px rgba(20, 184, 166, 0.2);
+
+    /* Border radius */
+    --radius-none: 0px;
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 14px;
+    --radius-xl: 20px;
+    --radius-full: 9999px;
+
+    /* Border width */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* Colors - Teal/Cyan on Midnight Blue */
+    --color-primary: #14b8a6;
+    --color-primary-hover: #2dd4bf;
+    --color-primary-foreground: #042f2e;
+
+    --color-secondary: #1e293b;
+    --color-secondary-hover: #334155;
+    --color-secondary-foreground: #f1f5f9;
+
+    --color-accent: #06b6d4;
+    --color-accent-foreground: #083344;
+
+    --color-muted: #1e293b;
+    --color-muted-foreground: #94a3b8;
+
+    --color-background: #0f172a;
+    --color-foreground: #f1f5f9;
+    --color-card: #1e293b;
+    --color-card-foreground: #f1f5f9;
+    --color-surface: #1e293b;
+    --color-border: #334155;
+    --color-input: rgba(20, 184, 166, 0.3);
+    --color-ring: #14b8a6;
+
+    /* Sand Gold for special accents */
+    --color-gold: #c9a227;
+
+    /* Semantic colors */
+    --color-error: #f87171;
+    --color-error-foreground: #000000;
+    --color-success: #4ade80;
+    --color-success-foreground: #000000;
+    --color-warning: #fbbf24;
+    --color-warning-foreground: #000000;
+    --color-info: #38bdf8;
+    --color-info-foreground: #000000;
+
+    /* Typography */
+    --font-family: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 700;
+    --letter-spacing: -0.02em;
+    --line-height: 1.6;
+
+    /* Icon styling */
+    --icon-stroke-width: 1.75;
+    --icon-color: #14b8a6;
+
+    /* Transitions */
+    --transition-fast: 150ms;
+    --transition-normal: 250ms;
+    --transition-slow: 400ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Hover/Active */
+    --hover-scale: 1.02;
+    --hover-translate-y: -2px;
+    --hover-translate-x: 0;
+    --active-scale: 0.98;
+    --active-translate-y: 0;
+
+    /* Focus ring */
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #14b8a6;
+}

package/themes/index.css

@@ -12,6 +12,7 @@
 @import "./wireframe.css";
 @import "./minimalist.css";
 @import "./almadar.css";
+@import "./almadar-website.css";
 @import "./trait-wars.css";
 
 /* Extended themes */