@electroplix/components 0.5.0-alpha.11 → 0.5.0-alpha.12

package/dist/index.esm.js

@@ -3919,10 +3919,12 @@ const _excluded$Q = ["as", "bgColor", "textColor", "fontFamily", "minH", "maxW",
 const ui$A = {
   white: '#ffffff',
   text: '#18181b',
-  border: '#e4e4e7'};
+  border: '#e4e4e7'
+};
 function HeroShell(props) {
   var _t$minH, _t$maxW, _t$px, _t$py, _t$cardRadius, _t$gap, _ref, _ref2;
   const t = useHeroTheme();
+  const isMobile = useMediaQuery('(max-width: 768px)');
   const {
       as: Tag = 'section',
       bgColor,
@@ -3941,6 +3943,8 @@ function HeroShell(props) {
     rest = _objectWithoutPropertiesLoose(props, _excluded$Q);
   const bg = (_ref = bgColor != null ? bgColor : t.bgColor) != null ? _ref : ui$A.white;
   const fg = (_ref2 = textColor != null ? textColor : t.textColor) != null ? _ref2 : ui$A.text;
+  const rPx = isMobile ? 16 : px;
+  const pyPx = isMobile ? 32 : py;
   return jsxs(Tag, _extends({
     className: className
   }, rest, {
@@ -3951,8 +3955,8 @@ function HeroShell(props) {
       color: fg,
       fontFamily,
       minHeight: typeof minH === 'number' ? `${minH}px` : minH,
-      paddingInline: px,
-      paddingBlock: py,
+      paddingInline: rPx,
+      paddingBlock: pyPx,
       borderRadius: radius,
       border: `1px solid ${ui$A.border}`,
       position: 'relative',
@@ -3967,32 +3971,34 @@ function HeroShell(props) {
         background: 'linear-gradient(180deg, rgba(250,250,250,0.7), rgba(255,255,255,0))',
         pointerEvents: 'none'
       }
-    }), jsx("div", {
-      "aria-hidden": true,
-      style: {
-        position: 'absolute',
-        top: '12%',
-        left: '8%',
-        width: 240,
-        height: 240,
-        borderRadius: '999px',
-        background: 'rgba(9,9,11,0.035)',
-        filter: 'blur(70px)',
-        pointerEvents: 'none'
-      }
-    }), jsx("div", {
-      "aria-hidden": true,
-      style: {
-        position: 'absolute',
-        bottom: '10%',
-        right: '8%',
-        width: 220,
-        height: 220,
-        borderRadius: '999px',
-        background: 'rgba(9,9,11,0.03)',
-        filter: 'blur(70px)',
-        pointerEvents: 'none'
-      }
+    }), !isMobile && jsxs(Fragment, {
+      children: [jsx("div", {
+        "aria-hidden": true,
+        style: {
+          position: 'absolute',
+          top: '12%',
+          left: '8%',
+          width: 240,
+          height: 240,
+          borderRadius: '999px',
+          background: 'rgba(9,9,11,0.035)',
+          filter: 'blur(70px)',
+          pointerEvents: 'none'
+        }
+      }), jsx("div", {
+        "aria-hidden": true,
+        style: {
+          position: 'absolute',
+          bottom: '10%',
+          right: '8%',
+          width: 220,
+          height: 220,
+          borderRadius: '999px',
+          background: 'rgba(9,9,11,0.03)',
+          filter: 'blur(70px)',
+          pointerEvents: 'none'
+        }
+      })]
     }), jsx("div", {
       style: {
         width: '100%',
@@ -4013,10 +4019,12 @@ const ui$z = {
   black: '#09090b',
   text: '#18181b',
   muted: '#71717a',
-  border: '#e4e4e7'};
+  border: '#e4e4e7'
+};
 function StaticHero(props) {
   var _t$minH, _t$maxW, _t$px, _t$py, _t$cardRadius, _t$gap, _ref, _ref2, _ref3, _ref4, _ref5;
   const t = useHeroTheme();
+  const isMobile = useMediaQuery('(max-width: 768px)');
   const {
       as: Tag = 'section',
       title = 'Build Something Amazing',
@@ -4045,6 +4053,10 @@ function StaticHero(props) {
   const fg = (_ref2 = textColor != null ? textColor : t.textColor) != null ? _ref2 : ui$z.text;
   const accent = (_ref3 = accentColor != null ? accentColor : t.accentColor) != null ? _ref3 : ui$z.black;
   const border = (_ref4 = (_ref5 = borderColor != null ? borderColor : t.cardBorder) != null ? _ref5 : t.borderColor) != null ? _ref4 : ui$z.border;
+  const rPx = isMobile ? 16 : px;
+  const pyPx = isMobile ? 32 : py;
+  const titlePx = isMobile ? Math.max(28, Math.floor(titleSize * 0.6)) : titleSize;
+  const subPx = isMobile ? Math.max(14, Math.floor(subtitleSize * 0.85)) : subtitleSize;
   return jsxs(Tag, _extends({
     className: className,
     style: _extends({
@@ -4054,7 +4066,7 @@ function StaticHero(props) {
       color: fg,
       fontFamily,
       minHeight: typeof minH === 'number' ? `${minH}px` : minH,
-      padding: `${py}px ${px}px`,
+      padding: `${pyPx}px ${rPx}px`,
       borderRadius: radius,
       border: `1px solid ${border}`,
       position: 'relative',
@@ -4070,7 +4082,7 @@ function StaticHero(props) {
         background: 'linear-gradient(180deg, rgba(250,250,250,0.75), rgba(255,255,255,0))',
         pointerEvents: 'none'
       }
-    }), jsx("div", {
+    }), !isMobile && jsx("div", {
       "aria-hidden": true,
       style: {
         position: 'absolute',
@@ -4106,7 +4118,7 @@ function StaticHero(props) {
             borderRadius: 999,
             background: ui$z.white,
             border: `1px solid ${border}`,
-            marginBottom: 24,
+            marginBottom: isMobile ? 16 : 24,
             boxShadow: '0 1px 2px rgba(9,9,11,0.04)'
           },
           children: [jsx(Icon, {
@@ -4123,7 +4135,7 @@ function StaticHero(props) {
           })]
         }), title && jsx("h1", {
           style: {
-            fontSize: titleSize,
+            fontSize: titlePx,
             lineHeight: 1.05,
             margin: 0,
             fontWeight: 800,
@@ -4133,10 +4145,10 @@ function StaticHero(props) {
           children: title
         }), subtitle && jsx("p", {
           style: {
-            fontSize: subtitleSize,
+            fontSize: subPx,
             color: ui$z.muted,
-            marginTop: 20,
-            marginBottom: 32,
+            marginTop: isMobile ? 12 : 20,
+            marginBottom: isMobile ? 24 : 32,
             maxWidth: 600,
             marginInline: align === 'center' ? 'auto' : undefined,
             marginLeft: align === 'right' ? 'auto' : undefined,
@@ -4146,22 +4158,23 @@ function StaticHero(props) {
         }), jsxs("div", {
           style: {
             display: 'flex',
-            gap: 16,
-            justifyContent: align === 'center' ? 'center' : align === 'right' ? 'flex-end' : 'flex-start',
-            flexWrap: 'wrap'
+            flexWrap: 'wrap',
+            gap: isMobile ? 12 : 16,
+            justifyContent: align === 'center' ? 'center' : align === 'right' ? 'flex-end' : 'flex-start'
           },
           children: [ctaLabel && jsxs("button", {
             type: "button",
             onClick: onCta,
+            "aria-label": ctaLabel,
             style: {
-              padding: '16px 28px',
+              padding: `${isMobile ? 12 : 16}px ${isMobile ? 20 : 28}px`,
               borderRadius: 12,
               border: `1px solid ${accent}`,
               background: accent,
               color: ui$z.white,
               cursor: 'pointer',
               fontWeight: 700,
-              fontSize: 16,
+              fontSize: isMobile ? 14 : 16,
               display: 'flex',
               alignItems: 'center',
               gap: 8,
@@ -4174,15 +4187,16 @@ function StaticHero(props) {
             })]
           }), jsx("button", {
             type: "button",
+            "aria-label": "Learn more",
             style: {
-              padding: '16px 28px',
+              padding: `${isMobile ? 12 : 16}px ${isMobile ? 20 : 28}px`,
               borderRadius: 12,
               border: `1px solid ${border}`,
               background: ui$z.white,
               color: fg,
               cursor: 'pointer',
               fontWeight: 600,
-              fontSize: 16,
+              fontSize: isMobile ? 14 : 16,
               boxShadow: '0 1px 2px rgba(9,9,11,0.04)',
               transition: 'all 0.2s ease'
             },
@@ -4197,16 +4211,15 @@ function StaticHero(props) {
 const _excluded$O = ["as", "slides", "autoplay", "intervalMs", "titleSize", "subtitleSize", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "minH", "maxW", "px", "py", "radius", "gap", "style", "className"];
 const ui$y = {
   white: '#ffffff',
-  black: '#09090b',
-  text: '#18181b',
   muted: '#71717a',
-  border: '#e4e4e7',
   surface: '#fafafa',
   overlay: 'rgba(9,9,11,0.72)'
 };
 function CarouselHero(props) {
   var _t$minH, _t$maxW, _t$px, _t$py, _t$cardRadius, _t$gap, _ref, _ref2, _ref3, _ref4, _ref5;
   const t = useHeroTheme();
+  const isMobile = useMediaQuery('(max-width: 768px)');
+  const prefersReducedMotion = typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
   const {
       as: Tag = 'section',
       slides: rawSlides,
@@ -4229,10 +4242,14 @@ function CarouselHero(props) {
       className = ''
     } = props,
     rest = _objectWithoutPropertiesLoose(props, _excluded$O);
-  const bg = (_ref = bgColor != null ? bgColor : t.bgColor) != null ? _ref : ui$y.white;
-  const fg = (_ref2 = textColor != null ? textColor : t.textColor) != null ? _ref2 : ui$y.text;
-  const accent = (_ref3 = accentColor != null ? accentColor : t.accentColor) != null ? _ref3 : ui$y.black;
-  const border = (_ref4 = (_ref5 = borderColor != null ? borderColor : t.cardBorder) != null ? _ref5 : t.borderColor) != null ? _ref4 : ui$y.border;
+  const bg = (_ref = bgColor != null ? bgColor : t.bgColor) != null ? _ref : '#ffffff';
+  const fg = (_ref2 = textColor != null ? textColor : t.textColor) != null ? _ref2 : '#18181b';
+  const accent = (_ref3 = accentColor != null ? accentColor : t.accentColor) != null ? _ref3 : '#09090b';
+  const border = (_ref4 = (_ref5 = borderColor != null ? borderColor : t.cardBorder) != null ? _ref5 : t.borderColor) != null ? _ref4 : '#e4e4e7';
+  const rPx = isMobile ? 16 : px;
+  const pyPx = isMobile ? 32 : py;
+  const titlePx = isMobile ? Math.max(24, Math.floor(titleSize * 0.65)) : titleSize;
+  const subPx = isMobile ? Math.max(14, Math.floor(subtitleSize * 0.85)) : subtitleSize;
   const slides = Array.isArray(rawSlides) && rawSlides.length > 0 ? rawSlides : [{
     image: '',
     title: 'Welcome to Our Platform',
@@ -4247,22 +4264,37 @@ function CarouselHero(props) {
     subtitle: 'Beautiful and responsive'
   }];
   const [idx, setIdx] = useState(0);
+  const touchStart = useRef(null);
+  // Autoplay — paused on reduced motion
   useEffect(() => {
-    if (!autoplay || slides.length <= 1) return;
-    const id = setInterval(() => {
-      setIdx(i => (i + 1) % slides.length);
-    }, intervalMs);
+    if (!autoplay || slides.length <= 1 || prefersReducedMotion) return;
+    const id = setInterval(() => setIdx(i => (i + 1) % slides.length), intervalMs);
     return () => clearInterval(id);
-  }, [autoplay, slides.length, intervalMs]);
+  }, [autoplay, slides.length, intervalMs, prefersReducedMotion]);
+  const prev = useCallback(() => setIdx(i => (i - 1 + slides.length) % slides.length), [slides.length]);
+  const next = useCallback(() => setIdx(i => (i + 1) % slides.length), [slides.length]);
+  // Touch swipe
+  const onTouchStart = useCallback(e => {
+    touchStart.current = e.touches[0].clientX;
+  }, []);
+  const onTouchEnd = useCallback(e => {
+    if (touchStart.current === null) return;
+    const diff = touchStart.current - e.changedTouches[0].clientX;
+    if (Math.abs(diff) > 50) {
+      diff > 0 ? next() : prev();
+    }
+    touchStart.current = null;
+  }, [next, prev]);
   const current = slides[idx] || {
     image: '',
     title: '',
     subtitle: ''
   };
-  const prev = () => setIdx(i => (i - 1 + slides.length) % slides.length);
-  const next = () => setIdx(i => (i + 1) % slides.length);
   return jsxs(Tag, _extends({
     className: className,
+    role: "region",
+    "aria-roledescription": "carousel",
+    "aria-label": "Image carousel",
     style: _extends({
       display: 'grid',
       placeItems: 'center',
@@ -4270,7 +4302,7 @@ function CarouselHero(props) {
       color: fg,
       fontFamily,
       minHeight: typeof minH === 'number' ? `${minH}px` : minH,
-      padding: `${py}px ${px}px`,
+      padding: `${pyPx}px ${rPx}px`,
       borderRadius: radius,
       border: `1px solid ${border}`,
       position: 'relative',
@@ -4295,10 +4327,15 @@ function CarouselHero(props) {
         zIndex: 1
       },
       children: [jsxs("div", {
+        role: "group",
+        "aria-roledescription": "slide",
+        "aria-label": `Slide ${idx + 1} of ${slides.length}`,
+        onTouchStart: onTouchStart,
+        onTouchEnd: onTouchEnd,
         style: {
           position: 'relative',
           width: '100%',
-          height: 400,
+          height: isMobile ? 240 : 400,
           borderRadius: 16,
           overflow: 'hidden',
           background: ui$y.surface,
@@ -4307,12 +4344,12 @@ function CarouselHero(props) {
         },
         children: [current.image ? jsx("img", {
           src: current.image,
-          alt: current.title || `slide-${idx + 1}`,
+          alt: current.title || `slide ${idx + 1}`,
           style: {
             width: '100%',
             height: '100%',
             objectFit: 'cover',
-            transition: 'opacity 0.5s ease'
+            transition: prefersReducedMotion ? 'none' : 'opacity 0.5s ease'
           }
         }) : jsxs("div", {
           style: {
@@ -4327,7 +4364,7 @@ function CarouselHero(props) {
           },
           children: [jsx(Icon, {
             name: "image",
-            size: 64,
+            size: isMobile ? 40 : 64,
             color: ui$y.muted,
             style: {
               opacity: 0.55
@@ -4341,10 +4378,11 @@ function CarouselHero(props) {
             },
             children: ["Slide ", idx + 1]
           })]
-        }), slides.length > 1 && jsxs(Fragment, {
+        }), slides.length > 1 && !isMobile && jsxs(Fragment, {
           children: [jsx("button", {
             type: "button",
             onClick: prev,
+            "aria-label": "Previous slide",
             style: {
               position: 'absolute',
               left: 16,
@@ -4362,7 +4400,7 @@ function CarouselHero(props) {
               justifyContent: 'center',
               backdropFilter: 'blur(10px)',
               boxShadow: '0 8px 24px rgba(9,9,11,0.16)',
-              transition: 'all 0.2s ease'
+              transition: prefersReducedMotion ? 'none' : 'all 0.2s ease'
             },
             children: jsx(Icon, {
               name: "chevron-left",
@@ -4371,6 +4409,7 @@ function CarouselHero(props) {
           }), jsx("button", {
             type: "button",
             onClick: next,
+            "aria-label": "Next slide",
             style: {
               position: 'absolute',
               right: 16,
@@ -4388,7 +4427,7 @@ function CarouselHero(props) {
               justifyContent: 'center',
               backdropFilter: 'blur(10px)',
               boxShadow: '0 8px 24px rgba(9,9,11,0.16)',
-              transition: 'all 0.2s ease'
+              transition: prefersReducedMotion ? 'none' : 'all 0.2s ease'
             },
             children: jsx(Icon, {
               name: "chevron-right",
@@ -4402,7 +4441,7 @@ function CarouselHero(props) {
         },
         children: [current.title && jsx("h2", {
           style: {
-            fontSize: titleSize,
+            fontSize: titlePx,
             margin: 0,
             fontWeight: 700,
             color: fg,
@@ -4412,32 +4451,36 @@ function CarouselHero(props) {
           children: current.title
         }), current.subtitle && jsx("p", {
           style: {
-            fontSize: subtitleSize,
+            fontSize: subPx,
             color: ui$y.muted,
-            marginTop: 12,
+            marginTop: isMobile ? 8 : 12,
             marginBottom: 0,
             lineHeight: 1.6
           },
           children: current.subtitle
         })]
       }), slides.length > 1 && jsx("div", {
+        role: "tablist",
+        "aria-label": "Slide navigation",
         style: {
           display: 'flex',
-          gap: 10,
+          gap: isMobile ? 6 : 10,
           justifyContent: 'center'
         },
         children: slides.map((_, i) => jsx("button", {
           type: "button",
-          onClick: () => setIdx(i),
+          role: "tab",
+          "aria-selected": i === idx,
           "aria-label": `Go to slide ${i + 1}`,
+          onClick: () => setIdx(i),
           style: {
-            width: i === idx ? 32 : 10,
+            width: i === idx ? isMobile ? 24 : 32 : isMobile ? 8 : 10,
             height: 10,
             borderRadius: 999,
             border: `1px solid ${i === idx ? accent : border}`,
             background: i === idx ? accent : ui$y.white,
             cursor: 'pointer',
-            transition: 'all 0.3s ease',
+            transition: prefersReducedMotion ? 'none' : 'all 0.3s ease',
             boxShadow: i === idx ? '0 1px 2px rgba(9,9,11,0.12)' : '0 1px 2px rgba(9,9,11,0.04)'
           }
         }, i))
@@ -4449,13 +4492,14 @@ function CarouselHero(props) {
 const _excluded$N = ["as", "title", "subtitle", "bgImage", "overlay", "form", "buttonText", "onSubmit", "inputPlaceholder", "titleSize", "subtitleSize", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "minH", "maxW", "px", "py", "radius", "gap", "style", "className"];
 const ui$x = {
   white: '#ffffff',
-  black: '#09090b',
   text: '#18181b',
   muted: '#71717a',
-  border: '#e4e4e7'};
+  border: '#e4e4e7'
+};
 function CTAOverlayHero(props) {
   var _t$minH, _t$maxW, _t$px, _t$py, _t$cardRadius, _t$gap, _ref, _ref2, _ref3, _ref4, _ref5;
   const t = useHeroTheme();
+  const isMobile = useMediaQuery('(max-width: 768px)');
   const {
       as: Tag = 'section',
       title = 'Transform Your Ideas Into Reality',
@@ -4483,12 +4527,16 @@ function CTAOverlayHero(props) {
       className = ''
     } = props,
     rest = _objectWithoutPropertiesLoose(props, _excluded$N);
-  const bg = (_ref = bgColor != null ? bgColor : t.bgColor) != null ? _ref : ui$x.white;
+  const bg = (_ref = bgColor != null ? bgColor : t.bgColor) != null ? _ref : '#ffffff';
   const fg = (_ref2 = textColor != null ? textColor : t.textColor) != null ? _ref2 : ui$x.text;
-  const accent = (_ref3 = accentColor != null ? accentColor : t.accentColor) != null ? _ref3 : ui$x.black;
+  const accent = (_ref3 = accentColor != null ? accentColor : t.accentColor) != null ? _ref3 : '#09090b';
   const border = (_ref4 = (_ref5 = borderColor != null ? borderColor : t.cardBorder) != null ? _ref5 : t.borderColor) != null ? _ref4 : ui$x.border;
   const [email, setEmail] = useState('');
   const [isHovered, setIsHovered] = useState(false);
+  const rPx = isMobile ? 16 : px;
+  const pyPx = isMobile ? 32 : py;
+  const titlePx = isMobile ? Math.max(28, Math.floor(titleSize * 0.6)) : titleSize;
+  const subPx = isMobile ? Math.max(14, Math.floor(subtitleSize * 0.85)) : subtitleSize;
   return jsxs(Tag, _extends({
     className: className,
     style: _extends({
@@ -4501,7 +4549,7 @@ function CTAOverlayHero(props) {
       color: bgImage ? ui$x.white : fg,
       fontFamily,
       minHeight: typeof minH === 'number' ? `${minH}px` : minH,
-      padding: `${py}px ${px}px`,
+      padding: `${pyPx}px ${rPx}px`,
       borderRadius: radius,
       border: `1px solid ${border}`,
       position: 'relative',
@@ -4517,8 +4565,9 @@ function CTAOverlayHero(props) {
         background: bgImage ? `rgba(9,9,11,${overlay})` : 'linear-gradient(180deg, rgba(250,250,250,0.85), rgba(255,255,255,0))',
         zIndex: 0
       }
-    }), !bgImage && jsxs(Fragment, {
+    }), !bgImage && !isMobile && jsxs(Fragment, {
       children: [jsx("div", {
+        "aria-hidden": true,
         style: {
           position: 'absolute',
           top: '12%',
@@ -4530,6 +4579,7 @@ function CTAOverlayHero(props) {
           pointerEvents: 'none'
         }
       }), jsx("div", {
+        "aria-hidden": true,
         style: {
           position: 'absolute',
           bottom: '16%',
@@ -4554,7 +4604,7 @@ function CTAOverlayHero(props) {
       children: [jsxs("div", {
         children: [title && jsx("h2", {
           style: {
-            fontSize: titleSize,
+            fontSize: titlePx,
             margin: 0,
             fontWeight: 800,
             lineHeight: 1.05,
@@ -4564,9 +4614,9 @@ function CTAOverlayHero(props) {
           children: title
         }), subtitle && jsx("p", {
           style: {
-            fontSize: subtitleSize,
+            fontSize: subPx,
             color: bgImage ? 'rgba(255,255,255,0.78)' : ui$x.muted,
-            marginTop: 20,
+            marginTop: isMobile ? 12 : 20,
             marginBottom: 0,
             maxWidth: 640,
             marginInline: 'auto',
@@ -4579,6 +4629,7 @@ function CTAOverlayHero(props) {
           e.preventDefault();
           onSubmit == null || onSubmit(Object.fromEntries(new FormData(e.currentTarget).entries()));
         },
+        "aria-label": "Email signup",
         style: {
           marginTop: 8,
           display: 'inline-flex',
@@ -4614,30 +4665,32 @@ function CTAOverlayHero(props) {
             value: email,
             onChange: e => setEmail(e.target.value),
             placeholder: inputPlaceholder,
+            "aria-label": inputPlaceholder,
             style: {
-              padding: '16px 16px 16px 48px',
+              padding: `${isMobile ? 14 : 16}px ${isMobile ? 14 : 16}px ${isMobile ? 14 : 16}px 48px`,
               border: 'none',
               outline: 'none',
               background: 'transparent',
               color: bgImage ? ui$x.white : fg,
-              width: 280,
-              fontSize: 15,
+              width: isMobile ? 200 : 280,
+              fontSize: isMobile ? 14 : 15,
               boxSizing: 'border-box'
             }
           })]
         }), jsxs("button", {
           type: "submit",
+          "aria-label": buttonText,
           onMouseEnter: () => setIsHovered(true),
           onMouseLeave: () => setIsHovered(false),
           style: {
-            padding: '16px 28px',
+            padding: `${isMobile ? 12 : 16}px ${isMobile ? 20 : 28}px`,
             borderRadius: 12,
             border: `1px solid ${accent}`,
             background: accent,
             color: ui$x.white,
             cursor: 'pointer',
             fontWeight: 700,
-            fontSize: 15,
+            fontSize: isMobile ? 14 : 15,
             display: 'flex',
             alignItems: 'center',
             gap: 8,
@@ -4654,21 +4707,22 @@ function CTAOverlayHero(props) {
         style: {
           marginTop: 8,
           display: 'flex',
-          gap: 16,
+          gap: isMobile ? 12 : 16,
           justifyContent: 'center',
           flexWrap: 'wrap'
         },
         children: [jsxs("button", {
           type: "button",
+          "aria-label": buttonText,
           style: {
-            padding: '16px 32px',
+            padding: `${isMobile ? 12 : 16}px ${isMobile ? 24 : 32}px`,
             borderRadius: 12,
             border: `1px solid ${accent}`,
             background: accent,
             color: ui$x.white,
             cursor: 'pointer',
             fontWeight: 700,
-            fontSize: 16,
+            fontSize: isMobile ? 14 : 16,
             display: 'flex',
             alignItems: 'center',
             gap: 8,
@@ -4680,15 +4734,16 @@ function CTAOverlayHero(props) {
           })]
         }), jsxs("button", {
           type: "button",
+          "aria-label": "Watch demo",
           style: {
-            padding: '16px 32px',
+            padding: `${isMobile ? 12 : 16}px ${isMobile ? 24 : 32}px`,
             borderRadius: 12,
             border: `1px solid ${bgImage ? 'rgba(255,255,255,0.22)' : border}`,
             background: bgImage ? 'rgba(255,255,255,0.1)' : ui$x.white,
             color: bgImage ? ui$x.white : fg,
             cursor: 'pointer',
             fontWeight: 600,
-            fontSize: 16,
+            fontSize: isMobile ? 14 : 16,
             display: 'flex',
             alignItems: 'center',
             gap: 8,
@@ -4706,10 +4761,10 @@ function CTAOverlayHero(props) {
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
-          gap: 24,
+          gap: isMobile ? 16 : 24,
           flexWrap: 'wrap',
           color: bgImage ? 'rgba(255,255,255,0.7)' : ui$x.muted,
-          fontSize: 13,
+          fontSize: isMobile ? 12 : 13,
           fontWeight: 500
         },
         children: [jsx("span", {
@@ -5285,13 +5340,7 @@ function usePattern(kind, accent, intensity) {
       return `linear-gradient(${accent}${Math.round(intensity * 16).toString(16).padStart(2, '0')} 1px, transparent 1px),
       linear-gradient(90deg, ${accent}${Math.round(intensity * 16).toString(16).padStart(2, '0')} 1px, transparent 1px)`;
     }
-    return `repeating-linear-gradient(
-      45deg,
-      transparent,
-      transparent 10px,
-      ${accent}${Math.round(intensity * 14).toString(16).padStart(2, '0')} 10px,
-      ${accent}${Math.round(intensity * 14).toString(16).padStart(2, '0')} 11px
-    )`;
+    return `repeating-linear-gradient(45deg, transparent, transparent 10px, ${accent}${Math.round(intensity * 14).toString(16).padStart(2, '0')} 10px, ${accent}${Math.round(intensity * 14).toString(16).padStart(2, '0')} 11px)`;
   }, [kind, accent, intensity]);
 }
 const defaultStats = [{
@@ -5306,13 +5355,14 @@ const defaultStats = [{
 }];
 const ui$v = {
   white: '#ffffff',
-  black: '#09090b',
   text: '#18181b',
   muted: '#71717a',
-  border: '#e4e4e7'};
+  border: '#e4e4e7'
+};
 function PatternedHero(props) {
   var _t$minH, _t$maxW, _t$px, _t$py, _t$cardRadius, _t$gap, _ref, _ref2, _ref3, _ref4, _ref5;
   const t = useHeroTheme();
+  const isMobile = useMediaQuery('(max-width: 768px)');
   const {
       as: Tag = 'section',
       title = 'Built for Modern Development',
@@ -5340,13 +5390,17 @@ function PatternedHero(props) {
       className = ''
     } = props,
     rest = _objectWithoutPropertiesLoose(props, _excluded$L);
-  const bg = (_ref = bgColor != null ? bgColor : t.bgColor) != null ? _ref : ui$v.white;
+  const bg = (_ref = bgColor != null ? bgColor : t.bgColor) != null ? _ref : '#ffffff';
   const fg = (_ref2 = textColor != null ? textColor : t.textColor) != null ? _ref2 : ui$v.text;
-  const accent = (_ref3 = accentColor != null ? accentColor : t.accentColor) != null ? _ref3 : ui$v.black;
+  const accent = (_ref3 = accentColor != null ? accentColor : t.accentColor) != null ? _ref3 : '#09090b';
   const border = (_ref4 = (_ref5 = borderColor != null ? borderColor : t.cardBorder) != null ? _ref5 : t.borderColor) != null ? _ref4 : ui$v.border;
-  const patternBg = usePattern(pattern, accent, intensity);
+  const patternBg = usePattern(pattern, accent, isMobile ? intensity * 0.6 : intensity);
   const sz = pattern === 'dots' ? '20px 20px' : pattern === 'grid' ? '32px 32px' : undefined;
   const [hover, setHover] = useState(false);
+  const rPx = isMobile ? 16 : px;
+  const pyPx = isMobile ? 32 : py;
+  const titlePx = isMobile ? Math.max(28, Math.floor(titleSize * 0.6)) : titleSize;
+  const subPx = isMobile ? Math.max(14, Math.floor(subtitleSize * 0.85)) : subtitleSize;
   return jsxs(Tag, _extends({
     className: className,
     style: _extends({
@@ -5356,7 +5410,7 @@ function PatternedHero(props) {
       color: fg,
       fontFamily,
       minHeight: typeof minH === 'number' ? `${minH}px` : minH,
-      padding: `${py}px ${px}px`,
+      padding: `${pyPx}px ${rPx}px`,
       borderRadius: radius,
       border: `1px solid ${border}`,
       position: 'relative',
@@ -5372,7 +5426,7 @@ function PatternedHero(props) {
         backgroundImage: patternBg,
         backgroundSize: sz,
         zIndex: 0,
-        opacity: 0.8
+        opacity: isMobile ? 0.4 : 0.8
       }
     }), jsx("div", {
       "aria-hidden": true,
@@ -5382,7 +5436,7 @@ function PatternedHero(props) {
         background: 'linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0))',
         zIndex: 0
       }
-    }), jsx("div", {
+    }), !isMobile && jsx("div", {
       "aria-hidden": true,
       style: {
         position: 'absolute',
@@ -5415,7 +5469,7 @@ function PatternedHero(props) {
           color: fg,
           fontSize: 13,
           fontWeight: 600,
-          marginBottom: 24,
+          marginBottom: isMobile ? 16 : 24,
           boxShadow: '0 1px 2px rgba(9,9,11,0.04)'
         },
         children: [jsx(Icon, {
@@ -5424,7 +5478,7 @@ function PatternedHero(props) {
         }), badge]
       }), title && jsx("h2", {
         style: {
-          fontSize: titleSize,
+          fontSize: titlePx,
           margin: 0,
           fontWeight: 800,
           lineHeight: 1.05,
@@ -5434,9 +5488,9 @@ function PatternedHero(props) {
         children: title
       }), subtitle && jsx("p", {
         style: {
-          fontSize: subtitleSize,
+          fontSize: subPx,
           color: ui$v.muted,
-          marginTop: 20,
+          marginTop: isMobile ? 12 : 20,
           marginBottom: 0,
           maxWidth: 640,
           marginInline: 'auto',
@@ -5445,24 +5499,25 @@ function PatternedHero(props) {
         children: subtitle
       }), jsx("div", {
         style: {
-          marginTop: 32,
+          marginTop: isMobile ? 24 : 32,
           display: 'flex',
           justifyContent: 'center'
         },
         children: jsxs("button", {
           type: "button",
           onClick: onCta,
+          "aria-label": ctaLabel,
           onMouseEnter: () => setHover(true),
           onMouseLeave: () => setHover(false),
           style: {
-            padding: '16px 32px',
+            padding: `${isMobile ? 12 : 16}px ${isMobile ? 24 : 32}px`,
             borderRadius: 12,
             border: `1px solid ${accent}`,
             background: accent,
             color: ui$v.white,
             cursor: 'pointer',
             fontWeight: 700,
-            fontSize: 16,
+            fontSize: isMobile ? 14 : 16,
             display: 'flex',
             alignItems: 'center',
             gap: 8,
@@ -5477,10 +5532,10 @@ function PatternedHero(props) {
         })
       }), stats.length > 0 && jsx("div", {
         style: {
-          marginTop: 52,
+          marginTop: isMobile ? 32 : 52,
           display: 'flex',
           justifyContent: 'center',
-          gap: 48,
+          gap: isMobile ? 24 : 48,
           flexWrap: 'wrap'
         },
         children: stats.map((s, i) => jsxs("div", {
@@ -5489,7 +5544,7 @@ function PatternedHero(props) {
           },
           children: [jsx("div", {
             style: {
-              fontSize: 32,
+              fontSize: isMobile ? 24 : 32,
               fontWeight: 800,
               color: fg,
               letterSpacing: '-0.03em'
@@ -5497,7 +5552,7 @@ function PatternedHero(props) {
             children: s.value
           }), jsx("div", {
             style: {
-              fontSize: 13,
+              fontSize: isMobile ? 12 : 13,
               color: ui$v.muted,
               marginTop: 6,
               fontWeight: 500
@@ -5517,10 +5572,12 @@ const ui$u = {
   text: '#18181b',
   muted: '#71717a',
   border: '#e4e4e7',
-  surface: '#fafafa'};
+  surface: '#fafafa'
+};
 function SplitHero(props) {
   var _t$minH, _t$maxW, _t$px, _t$py, _t$cardRadius, _t$gap, _ref, _ref2, _ref3, _ref4, _ref5;
   const t = useHeroTheme();
+  const isMobile = useMediaQuery('(max-width: 768px)');
   const {
       as: Tag = 'section',
       title = 'Everything You Need to Succeed',
@@ -5555,6 +5612,10 @@ function SplitHero(props) {
   const accent = (_ref3 = accentColor != null ? accentColor : t.accentColor) != null ? _ref3 : ui$u.black;
   const border = (_ref4 = (_ref5 = borderColor != null ? borderColor : t.cardBorder) != null ? _ref5 : t.borderColor) != null ? _ref4 : ui$u.border;
   const [hover, setHover] = useState(false);
+  const rPx = isMobile ? 16 : px;
+  const pyPx = isMobile ? 32 : py;
+  const titlePx = isMobile ? Math.max(24, Math.floor(titleSize * 0.65)) : titleSize;
+  const subPx = isMobile ? Math.max(14, Math.floor(subtitleSize * 0.85)) : subtitleSize;
   return jsxs(Tag, _extends({
     className: className,
     style: _extends({
@@ -5564,7 +5625,7 @@ function SplitHero(props) {
       color: fg,
       fontFamily,
       minHeight: typeof minH === 'number' ? `${minH}px` : minH,
-      padding: `${py}px ${px}px`,
+      padding: `${pyPx}px ${rPx}px`,
       borderRadius: radius,
       border: `1px solid ${border}`,
       position: 'relative',
@@ -5580,7 +5641,7 @@ function SplitHero(props) {
         background: 'linear-gradient(180deg, rgba(250,250,250,0.72), rgba(255,255,255,0))',
         pointerEvents: 'none'
       }
-    }), jsx("div", {
+    }), !isMobile && jsx("div", {
       "aria-hidden": true,
       style: {
         position: 'absolute',
@@ -5598,8 +5659,8 @@ function SplitHero(props) {
         width: '100%',
         maxWidth: maxW,
         display: 'grid',
-        gridTemplateColumns: '1fr 1fr',
-        gap,
+        gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
+        gap: isMobile ? 32 : gap,
         alignItems: 'center',
         direction: reverse ? 'rtl' : 'ltr',
         position: 'relative',
@@ -5621,7 +5682,7 @@ function SplitHero(props) {
             color: fg,
             fontSize: 13,
             fontWeight: 600,
-            marginBottom: 24,
+            marginBottom: isMobile ? 16 : 24,
             boxShadow: '0 1px 2px rgba(9,9,11,0.04)'
           },
           children: [jsx(Icon, {
@@ -5630,7 +5691,7 @@ function SplitHero(props) {
           }), badge]
         }), title && jsx("h2", {
           style: {
-            fontSize: titleSize,
+            fontSize: titlePx,
             margin: 0,
             fontWeight: 800,
             lineHeight: 1.08,
@@ -5640,9 +5701,9 @@ function SplitHero(props) {
           children: title
         }), subtitle && jsx("p", {
           style: {
-            fontSize: subtitleSize,
+            fontSize: subPx,
             color: ui$u.muted,
-            marginTop: 18,
+            marginTop: isMobile ? 12 : 18,
             marginBottom: 0,
             lineHeight: 1.7
           },
@@ -5651,7 +5712,7 @@ function SplitHero(props) {
           style: {
             listStyle: 'none',
             padding: 0,
-            margin: '28px 0 0',
+            margin: `${isMobile ? 20 : 28}px 0 0`,
             display: 'flex',
             flexDirection: 'column',
             gap: 14
@@ -5661,7 +5722,7 @@ function SplitHero(props) {
               display: 'flex',
               alignItems: 'center',
               gap: 12,
-              fontSize: 15,
+              fontSize: isMobile ? 14 : 15,
               color: fg,
               fontWeight: 500
             },
@@ -5687,22 +5748,23 @@ function SplitHero(props) {
           }, i))
         }), jsx("div", {
           style: {
-            marginTop: 36
+            marginTop: isMobile ? 24 : 36
           },
           children: jsxs("button", {
             type: "button",
             onClick: onCta,
+            "aria-label": ctaLabel,
             onMouseEnter: () => setHover(true),
             onMouseLeave: () => setHover(false),
             style: {
-              padding: '16px 32px',
+              padding: `${isMobile ? 12 : 16}px ${isMobile ? 24 : 32}px`,
               borderRadius: 12,
               border: `1px solid ${accent}`,
               background: accent,
               color: ui$u.white,
               cursor: 'pointer',
               fontWeight: 700,
-              fontSize: 16,
+              fontSize: isMobile ? 14 : 16,
               display: 'inline-flex',
               alignItems: 'center',
               gap: 8,
@@ -5716,7 +5778,7 @@ function SplitHero(props) {
             })]
           })
         })]
-      }), jsx("div", {
+      }), !isMobile && jsx("div", {
         style: {
           direction: 'ltr'
         },
@@ -5781,6 +5843,7 @@ const ui$t = {
 function VideoHeaderHero(props) {
   var _t$minH, _t$maxW, _t$px, _t$py, _t$cardRadius, _ref, _ref2, _ref3, _ref4, _ref5;
   const t = useHeroTheme();
+  const isMobile = useMediaQuery('(max-width: 768px)');
   const {
       as: Tag = 'section',
       videoSrc,
@@ -5812,8 +5875,13 @@ function VideoHeaderHero(props) {
   const fg = (_ref2 = textColor != null ? textColor : t.textColor) != null ? _ref2 : ui$t.white;
   const border = (_ref3 = (_ref4 = borderColor != null ? borderColor : t.cardBorder) != null ? _ref4 : t.borderColor) != null ? _ref3 : ui$t.border;
   const accent = (_ref5 = accentColor != null ? accentColor : t.accentColor) != null ? _ref5 : ui$t.white;
+  const rPx = isMobile ? 16 : px;
+  const pyPx = isMobile ? 32 : py;
+  const titlePx = isMobile ? Math.max(28, Math.floor(titleSize * 0.65)) : titleSize;
+  const subPx = isMobile ? Math.max(14, Math.floor(subtitleSize * 0.85)) : subtitleSize;
   return jsxs(Tag, _extends({
     className: className,
+    "aria-label": title,
     style: _extends({
       display: 'grid',
       placeItems: 'center',
@@ -5821,7 +5889,7 @@ function VideoHeaderHero(props) {
       color: fg,
       fontFamily,
       minHeight: typeof minH === 'number' ? `${minH}px` : minH,
-      padding: `${py}px ${px}px`,
+      padding: `${pyPx}px ${rPx}px`,
       borderRadius: radius,
       border: `1px solid ${border}`,
       position: 'relative',
@@ -5836,6 +5904,7 @@ function VideoHeaderHero(props) {
       loop: loop,
       controls: controls,
       poster: poster,
+      "aria-hidden": "true",
       style: {
         position: 'absolute',
         inset: 0,
@@ -5852,17 +5921,11 @@ function VideoHeaderHero(props) {
       style: {
         position: 'absolute',
         inset: 0,
-        background: `
-            linear-gradient(
-              180deg,
-              rgba(9,9,11,${overlay * 0.7}),
-              rgba(9,9,11,${overlay})
-            )
-          `,
+        background: `linear-gradient(180deg, rgba(9,9,11,${overlay * 0.7}), rgba(9,9,11,${overlay}))`,
         backdropFilter: 'blur(1px)',
         zIndex: 1
       }
-    }), jsx("div", {
+    }), !isMobile && jsx("div", {
       "aria-hidden": true,
       style: {
         position: 'absolute',
@@ -5887,7 +5950,7 @@ function VideoHeaderHero(props) {
       },
       children: [title && jsx("h2", {
         style: {
-          fontSize: titleSize,
+          fontSize: titlePx,
           margin: 0,
           fontWeight: 800,
           lineHeight: 1.05,
@@ -5897,9 +5960,9 @@ function VideoHeaderHero(props) {
         children: title
       }), subtitle && jsx("p", {
         style: {
-          fontSize: subtitleSize,
+          fontSize: subPx,
           color: ui$t.muted,
-          marginTop: 20,
+          marginTop: isMobile ? 12 : 20,
           marginBottom: 0,
           maxWidth: 640,
           marginInline: 'auto',
@@ -5911,7 +5974,7 @@ function VideoHeaderHero(props) {
           width: 72,
           height: 1,
           background: `linear-gradient(90deg, transparent, ${accent}, transparent)`,
-          margin: '36px auto 0',
+          margin: `${isMobile ? 24 : 36}px auto 0`,
           opacity: 0.6
         }
       })]