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

package/dist/index.esm.js

@@ -354,7 +354,7 @@ function useBlogTheme() {
   return useElectroplixConfig().blog;
 }
 
-const _excluded$$ = ["name", "size", "color", "style"];
+const _excluded$10 = ["name", "size", "color", "style"];
 /**
  * Render an inline SVG icon by name.
  *
@@ -370,7 +370,7 @@ function Icon(_ref) {
       color = 'currentColor',
       style
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$$);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$10);
   const path = ICON_PATHS[name];
   if (!path) return null;
   return jsx("svg", _extends({
@@ -2297,7 +2297,7 @@ const maxLengthRule = max => ({
   message: `Must be at most ${max} characters`
 });
 
-const _excluded$_ = ["as", "items", "orientation", "offset", "maxW", "px", "py", "radius", "gap", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "style", "className"];
+const _excluded$$ = ["as", "items", "orientation", "offset", "maxW", "px", "py", "radius", "gap", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "style", "className"];
 function AnchorLinks(_ref) {
   var _ref2, _ref3, _ref4, _ref5, _ref6, _items$0$targetId, _items$;
   let {
@@ -2318,7 +2318,7 @@ function AnchorLinks(_ref) {
       style = {},
       className = ''
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$_);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$$);
   const t = useNavTheme();
   const radius = (_ref2 = radiusProp != null ? radiusProp : t.radius) != null ? _ref2 : 16;
   const bgColor = (_ref3 = bgColorProp != null ? bgColorProp : t.bgColor) != null ? _ref3 : '#ffffff';
@@ -2415,7 +2415,7 @@ function AnchorLinks(_ref) {
   }));
 }
 
-const _excluded$Z = ["as", "items", "showHomeIcon", "maxW", "px", "py", "radius", "gap", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "style", "className"];
+const _excluded$_ = ["as", "items", "showHomeIcon", "maxW", "px", "py", "radius", "gap", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "style", "className"];
 function Breadcrumbs(_ref) {
   var _ref2, _ref3, _ref4, _ref5, _rest$separatorColor;
   let {
@@ -2435,7 +2435,7 @@ function Breadcrumbs(_ref) {
       style = {},
       className = ''
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$Z);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$_);
   const t = useNavTheme();
   const bgColor = (_ref2 = bgColorProp != null ? bgColorProp : t.bgColor) != null ? _ref2 : '#ffffff';
   const textColor = (_ref3 = textColorProp != null ? textColorProp : t.textColor) != null ? _ref3 : '#09090b';
@@ -2531,7 +2531,7 @@ function Breadcrumbs(_ref) {
   }));
 }
 
-const _excluded$Y = ["as", "languages", "current", "onChange", "px", "py", "radius", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "style", "className"];
+const _excluded$Z = ["as", "languages", "current", "onChange", "px", "py", "radius", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "style", "className"];
 function LanguageSelector(_ref) {
   var _ref2, _ref3, _ref4, _ref5, _languages$find;
   let {
@@ -2550,7 +2550,7 @@ function LanguageSelector(_ref) {
       style = {},
       className = ''
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$Z);
   const t = useNavTheme();
   const bgColor = (_ref2 = bgColorProp != null ? bgColorProp : t.bgColor) != null ? _ref2 : '#ffffff';
   const textColor = (_ref3 = textColorProp != null ? textColorProp : t.textColor) != null ? _ref3 : '#09090b';
@@ -2658,7 +2658,7 @@ function LanguageSelector(_ref) {
   }));
 }
 
-const _excluded$X = ["as", "label", "sections", "maxW", "px", "py", "radius", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "style", "className"];
+const _excluded$Y = ["as", "label", "sections", "maxW", "px", "py", "radius", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "style", "className"];
 function MegaMenu(_ref) {
   var _ref2, _ref3, _ref4, _ref5;
   let {
@@ -2677,7 +2677,7 @@ function MegaMenu(_ref) {
       style = {},
       className = ''
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$X);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
   const t = useNavTheme();
   (_ref2 = bgColorProp != null ? bgColorProp : t.bgColor) != null ? _ref2 : '#ffffff';
   const textColor = (_ref3 = textColorProp != null ? textColorProp : t.textColor) != null ? _ref3 : '#09090b';
@@ -2824,7 +2824,7 @@ function MegaMenu(_ref) {
   }));
 }
 
-const _excluded$W = ["currentPage", "totalPages", "onPageChange", "maxVisible", "showFirstLast", "showPrevNext", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "fontSize", "radius", "gap", "className", "style"];
+const _excluded$X = ["currentPage", "totalPages", "onPageChange", "maxVisible", "showFirstLast", "showPrevNext", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "fontSize", "radius", "gap", "className", "style"];
 function Pagination(_ref) {
   var _ref2, _ref3, _ref4, _ref5;
   let {
@@ -2845,7 +2845,7 @@ function Pagination(_ref) {
       className,
       style
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$W);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$X);
   const t = useNavTheme();
   const bgColor = (_ref2 = bgColorProp != null ? bgColorProp : t.bgColor) != null ? _ref2 : '#ffffff';
   const textColor = (_ref3 = textColorProp != null ? textColorProp : t.textColor) != null ? _ref3 : '#09090b';
@@ -2973,7 +2973,7 @@ function Pagination(_ref) {
   }));
 }
 
-const _excluded$V = ["logoText", "links", "showSearch", "showCTA", "ctaText", "ctaHref", "sticky", "height", "padding", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "className", "style"];
+const _excluded$W = ["logoText", "links", "showSearch", "showCTA", "ctaText", "ctaHref", "sticky", "height", "padding", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "className", "style"];
 function PrimaryNav(_ref) {
   var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref0;
   let {
@@ -2994,7 +2994,7 @@ function PrimaryNav(_ref) {
       className,
       style
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$V);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$W);
   const t = useNavTheme();
   const showSearch = (_ref2 = showSearchProp != null ? showSearchProp : t.showSearch) != null ? _ref2 : false;
   const showCTA = (_ref3 = showCTAProp != null ? showCTAProp : t.showCTA) != null ? _ref3 : false;
@@ -3141,7 +3141,7 @@ function PrimaryNav(_ref) {
   }));
 }
 
-const _excluded$U = ["items", "width", "padding", "gap", "radius", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "className", "style"];
+const _excluded$V = ["items", "width", "padding", "gap", "radius", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "className", "style"];
 function SidebarMenu(_ref) {
   var _ref2, _ref3, _ref4, _ref5;
   let {
@@ -3158,7 +3158,7 @@ function SidebarMenu(_ref) {
       className,
       style
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$U);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$V);
   const t = useNavTheme();
   const bgColor = (_ref2 = bgColorProp != null ? bgColorProp : t.bgColor) != null ? _ref2 : '#ffffff';
   const textColor = (_ref3 = textColorProp != null ? textColorProp : t.textColor) != null ? _ref3 : '#09090b';
@@ -3289,7 +3289,7 @@ function SidebarMenu(_ref) {
   }));
 }
 
-const _excluded$T = ["links", "width", "padding", "gap", "overlayColor", "position", "logoText", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "className", "style"];
+const _excluded$U = ["links", "width", "padding", "gap", "overlayColor", "position", "logoText", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "className", "style"];
 function SideDrawerNav(_ref) {
   var _ref2, _ref3, _ref4, _ref5;
   let {
@@ -3308,7 +3308,7 @@ function SideDrawerNav(_ref) {
       className,
       style
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$T);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$U);
   const t = useNavTheme();
   const bgColor = (_ref2 = bgColorProp != null ? bgColorProp : t.bgColor) != null ? _ref2 : '#ffffff';
   const textColor = (_ref3 = textColorProp != null ? textColorProp : t.textColor) != null ? _ref3 : '#09090b';
@@ -3467,7 +3467,7 @@ function SideDrawerNav(_ref) {
   }));
 }
 
-const _excluded$S = ["steps", "currentStep", "orientation", "showNumbers", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "className", "style"];
+const _excluded$T = ["steps", "currentStep", "orientation", "showNumbers", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "className", "style"];
 function Stepper(_ref) {
   var _ref2, _ref3, _ref4, _ref5;
   let {
@@ -3483,7 +3483,7 @@ function Stepper(_ref) {
       className,
       style
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$S);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$T);
   const t = useNavTheme();
   const bgColor = (_ref2 = bgColorProp != null ? bgColorProp : t.bgColor) != null ? _ref2 : '#ffffff';
   const textColor = (_ref3 = textColorProp != null ? textColorProp : t.textColor) != null ? _ref3 : '#09090b';
@@ -3594,7 +3594,7 @@ function Stepper(_ref) {
   }));
 }
 
-const _excluded$R = ["tabs", "defaultTab", "orientation", "showUnderline", "radius", "padding", "gap", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "className", "style"];
+const _excluded$S = ["tabs", "defaultTab", "orientation", "showUnderline", "radius", "padding", "gap", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "className", "style"];
 function Tabs(_ref) {
   var _ref2, _ref3, _ref4, _ref5, _ref6, _tabs$active;
   let {
@@ -3613,7 +3613,7 @@ function Tabs(_ref) {
       className,
       style
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$R);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$S);
   const t = useNavTheme();
   const radius = (_ref2 = radiusProp != null ? radiusProp : t.radius) != null ? _ref2 : 14;
   const bgColor = (_ref3 = bgColorProp != null ? bgColorProp : t.bgColor) != null ? _ref3 : '#ffffff';
@@ -3734,7 +3734,7 @@ function Tabs(_ref) {
   }));
 }
 
-const _excluded$Q = ["columns", "copyright", "socialLinks", "logo", "logoAlt", "tagline", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "children", "className", "style"];
+const _excluded$R = ["columns", "copyright", "socialLinks", "logo", "logoAlt", "tagline", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "children", "className", "style"];
 function Footer(_ref) {
   var _ref2, _ref3, _ref4, _ref5, _t$radius;
   let {
@@ -3753,7 +3753,7 @@ function Footer(_ref) {
       className,
       style
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$Q);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$R);
   const t = useNavTheme();
   const bg = (_ref2 = bgColor != null ? bgColor : t.bgColor) != null ? _ref2 : '#ffffff';
   const fg = (_ref3 = textColor != null ? textColor : t.textColor) != null ? _ref3 : '#09090b';
@@ -3915,14 +3915,16 @@ function Footer(_ref) {
   }));
 }
 
-const _excluded$P = ["as", "bgColor", "textColor", "fontFamily", "minH", "maxW", "px", "py", "radius", "gap", "style", "className", "children"];
-const ui$z = {
+const _excluded$Q = ["as", "bgColor", "textColor", "fontFamily", "minH", "maxW", "px", "py", "radius", "gap", "style", "className", "children"];
+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,
@@ -3938,9 +3940,11 @@ function HeroShell(props) {
       className = '',
       children
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$P);
-  const bg = (_ref = bgColor != null ? bgColor : t.bgColor) != null ? _ref : ui$z.white;
-  const fg = (_ref2 = textColor != null ? textColor : t.textColor) != null ? _ref2 : ui$z.text;
+    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,10 +3955,10 @@ 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$z.border}`,
+      border: `1px solid ${ui$A.border}`,
       position: 'relative',
       overflow: 'hidden',
       boxShadow: '0 1px 2px rgba(9,9,11,0.04)'
@@ -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%',
@@ -4007,16 +4013,18 @@ function HeroShell(props) {
   }));
 }
 
-const _excluded$O = ["as", "title", "subtitle", "ctaLabel", "onCta", "titleSize", "subtitleSize", "align", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "minH", "maxW", "px", "py", "radius", "gap", "style", "className"];
-const ui$y = {
+const _excluded$P = ["as", "title", "subtitle", "ctaLabel", "onCta", "titleSize", "subtitleSize", "align", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "minH", "maxW", "px", "py", "radius", "gap", "style", "className"];
+const ui$z = {
   white: '#ffffff',
   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',
@@ -4040,11 +4048,15 @@ function StaticHero(props) {
       style = {},
       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;
+    rest = _objectWithoutPropertiesLoose(props, _excluded$P);
+  const bg = (_ref = bgColor != null ? bgColor : t.bgColor) != null ? _ref : ui$z.white;
+  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',
@@ -4104,9 +4116,9 @@ function StaticHero(props) {
             gap: 8,
             padding: '8px 16px',
             borderRadius: 999,
-            background: ui$y.white,
+            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,
-            color: ui$y.muted,
-            marginTop: 20,
-            marginBottom: 32,
+            fontSize: subPx,
+            color: ui$z.muted,
+            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$y.white,
+              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$y.white,
+              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'
             },
@@ -4194,19 +4208,18 @@ function StaticHero(props) {
   }));
 }
 
-const _excluded$N = ["as", "slides", "autoplay", "intervalMs", "titleSize", "subtitleSize", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "minH", "maxW", "px", "py", "radius", "gap", "style", "className"];
-const ui$x = {
+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,
@@ -4228,11 +4241,15 @@ function CarouselHero(props) {
       style = {},
       className = ''
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$N);
-  const bg = (_ref = bgColor != null ? bgColor : t.bgColor) != null ? _ref : ui$x.white;
-  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 border = (_ref4 = (_ref5 = borderColor != null ? borderColor : t.cardBorder) != null ? _ref5 : t.borderColor) != null ? _ref4 : ui$x.border;
+    rest = _objectWithoutPropertiesLoose(props, _excluded$O);
+  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,24 +4327,29 @@ 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$x.surface,
+          background: ui$y.surface,
           border: `1px solid ${border}`,
           boxShadow: '0 1px 2px rgba(9,9,11,0.04)'
         },
         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: {
@@ -4322,29 +4359,30 @@ function CarouselHero(props) {
             flexDirection: 'column',
             alignItems: 'center',
             justifyContent: 'center',
-            background: ui$x.surface,
-            color: ui$x.muted
+            background: ui$y.surface,
+            color: ui$y.muted
           },
           children: [jsx(Icon, {
             name: "image",
-            size: 64,
-            color: ui$x.muted,
+            size: isMobile ? 40 : 64,
+            color: ui$y.muted,
             style: {
               opacity: 0.55
             }
           }), jsxs("span", {
             style: {
               marginTop: 12,
-              color: ui$x.muted,
+              color: ui$y.muted,
               fontSize: 14,
               fontWeight: 500
             },
             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,
@@ -4354,15 +4392,15 @@ function CarouselHero(props) {
               height: 44,
               borderRadius: '999px',
               border: '1px solid rgba(255,255,255,0.18)',
-              background: ui$x.overlay,
-              color: ui$x.white,
+              background: ui$y.overlay,
+              color: ui$y.white,
               cursor: 'pointer',
               display: 'flex',
               alignItems: 'center',
               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,
@@ -4380,15 +4419,15 @@ function CarouselHero(props) {
               height: 44,
               borderRadius: '999px',
               border: '1px solid rgba(255,255,255,0.18)',
-              background: ui$x.overlay,
-              color: ui$x.white,
+              background: ui$y.overlay,
+              color: ui$y.white,
               cursor: 'pointer',
               display: 'flex',
               alignItems: 'center',
               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,
-            color: ui$x.muted,
-            marginTop: 12,
+            fontSize: subPx,
+            color: ui$y.muted,
+            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$x.white,
+            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))
@@ -4446,16 +4489,17 @@ function CarouselHero(props) {
   }));
 }
 
-const _excluded$M = ["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$w = {
+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',
@@ -4482,13 +4526,17 @@ function CTAOverlayHero(props) {
       style = {},
       className = ''
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$M);
-  const bg = (_ref = bgColor != null ? bgColor : t.bgColor) != null ? _ref : ui$w.white;
-  const fg = (_ref2 = textColor != null ? textColor : t.textColor) != null ? _ref2 : ui$w.text;
-  const accent = (_ref3 = accentColor != null ? accentColor : t.accentColor) != null ? _ref3 : ui$w.black;
-  const border = (_ref4 = (_ref5 = borderColor != null ? borderColor : t.cardBorder) != null ? _ref5 : t.borderColor) != null ? _ref4 : ui$w.border;
+    rest = _objectWithoutPropertiesLoose(props, _excluded$N);
+  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 : '#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({
@@ -4498,10 +4546,10 @@ function CTAOverlayHero(props) {
       backgroundImage: bgImage ? `url(${bgImage})` : undefined,
       backgroundSize: 'cover',
       backgroundPosition: 'center',
-      color: bgImage ? ui$w.white : fg,
+      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,19 +4604,19 @@ function CTAOverlayHero(props) {
       children: [jsxs("div", {
         children: [title && jsx("h2", {
           style: {
-            fontSize: titleSize,
+            fontSize: titlePx,
             margin: 0,
             fontWeight: 800,
             lineHeight: 1.05,
             letterSpacing: '-0.05em',
-            color: bgImage ? ui$w.white : fg
+            color: bgImage ? ui$x.white : fg
           },
           children: title
         }), subtitle && jsx("p", {
           style: {
-            fontSize: subtitleSize,
-            color: bgImage ? 'rgba(255,255,255,0.78)' : ui$w.muted,
-            marginTop: 20,
+            fontSize: subPx,
+            color: bgImage ? 'rgba(255,255,255,0.78)' : ui$x.muted,
+            marginTop: isMobile ? 12 : 20,
             marginBottom: 0,
             maxWidth: 640,
             marginInline: 'auto',
@@ -4579,13 +4629,14 @@ 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',
           gap: 6,
           alignItems: 'center',
           justifySelf: 'center',
-          background: bgImage ? 'rgba(255,255,255,0.12)' : ui$w.white,
+          background: bgImage ? 'rgba(255,255,255,0.12)' : ui$x.white,
           padding: 6,
           borderRadius: 16,
           border: `1px solid ${bgImage ? 'rgba(255,255,255,0.18)' : border}`,
@@ -4606,7 +4657,7 @@ function CTAOverlayHero(props) {
             style: {
               position: 'absolute',
               left: 16,
-              color: bgImage ? 'rgba(255,255,255,0.7)' : ui$w.muted
+              color: bgImage ? 'rgba(255,255,255,0.7)' : ui$x.muted
             }
           }), jsx("input", {
             name: "email",
@@ -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$w.white : fg,
-              width: 280,
-              fontSize: 15,
+              color: bgImage ? ui$x.white : fg,
+              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$w.white,
+            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$w.white,
+            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$w.white,
-            color: bgImage ? ui$w.white : fg,
+            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$w.muted,
-          fontSize: 13,
+          color: bgImage ? 'rgba(255,255,255,0.7)' : ui$x.muted,
+          fontSize: isMobile ? 12 : 13,
           fontWeight: 500
         },
         children: [jsx("span", {
@@ -4724,6 +4779,557 @@ function CTAOverlayHero(props) {
   }));
 }
 
+const _excluded$M = ["as", "eyebrow", "title", "titleAccent", "titleSuffix", "subtitle", "ctaLabel", "ctaHref", "ctaSecondaryLabel", "ctaSecondaryHref", "imageSrc", "imageAlt", "stats", "layout", "titleSize", "subtitleSize", "bgColor", "textColor", "accentColor", "fontFamily", "minH", "maxW", "px", "py", "radius", "gap", "style", "className", "children"];
+const ui$w = {
+  white: '#ffffff',
+  black: '#09090b',
+  muted: '#71717a'
+};
+/* ── Shared sub-components ──────────────────────────────────────── */
+function HeroEyebrow({
+  text,
+  accent,
+  fontFamily = 'sans-serif',
+  center,
+  isMobile
+}) {
+  if (isMobile) {
+    return jsx("span", {
+      style: {
+        color: accent,
+        fontFamily,
+        fontSize: 12,
+        fontWeight: 600,
+        letterSpacing: 6,
+        textTransform: 'uppercase',
+        display: 'block',
+        marginBottom: 24
+      },
+      children: text
+    });
+  }
+  return jsxs("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 12,
+      marginBottom: 32,
+      justifyContent: center ? 'center' : 'flex-start'
+    },
+    children: [jsx("div", {
+      style: {
+        width: 48,
+        height: 1,
+        background: accent
+      }
+    }), jsx("span", {
+      style: {
+        color: accent,
+        fontFamily,
+        fontSize: 12,
+        fontWeight: 600,
+        letterSpacing: 4
+      },
+      children: text
+    }), jsx("div", {
+      style: {
+        width: 48,
+        height: 1,
+        background: accent
+      }
+    })]
+  });
+}
+function HeroCTAs({
+  ctaLabel,
+  ctaHref,
+  ctaSecondaryLabel,
+  ctaSecondaryHref,
+  accent,
+  fg,
+  fontFamily = 'sans-serif',
+  radius,
+  isMobile,
+  center
+}) {
+  if (!ctaLabel && !ctaSecondaryLabel) return null;
+  return jsxs("div", {
+    style: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      gap: 12,
+      justifyContent: center ? 'center' : 'flex-start'
+    },
+    children: [ctaLabel && jsxs("a", {
+      href: ctaHref,
+      style: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 8,
+        padding: `${isMobile ? 12 : 16}px ${isMobile ? 24 : 32}px`,
+        background: accent,
+        color: ui$w.white,
+        fontFamily,
+        fontWeight: 700,
+        fontSize: isMobile ? 14 : 16,
+        letterSpacing: 1,
+        borderRadius: radius,
+        textDecoration: 'none',
+        transition: 'all 0.2s ease'
+      },
+      children: [ctaLabel, jsx(Icon, {
+        name: "arrow-right",
+        size: 18
+      })]
+    }), ctaSecondaryLabel && jsx("a", {
+      href: ctaSecondaryHref,
+      style: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 8,
+        padding: `${isMobile ? 12 : 16}px ${isMobile ? 24 : 32}px`,
+        border: '1px solid rgba(255,255,255,0.4)',
+        color: fg,
+        fontFamily,
+        fontWeight: 600,
+        fontSize: isMobile ? 14 : 16,
+        letterSpacing: 1,
+        borderRadius: radius,
+        textDecoration: 'none',
+        transition: 'all 0.2s ease'
+      },
+      children: ctaSecondaryLabel
+    })]
+  });
+}
+function HeroStats({
+  stats,
+  accent,
+  fontFamily = 'sans-serif',
+  isMobile,
+  center
+}) {
+  if (!stats || stats.length === 0) return null;
+  return jsx("div", {
+    style: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      gap: isMobile ? 24 : 32,
+      marginTop: isMobile ? 40 : 48,
+      justifyContent: center ? 'center' : 'flex-start'
+    },
+    children: stats.map(stat => jsxs("div", {
+      children: [jsx("p", {
+        style: {
+          fontFamily,
+          color: accent,
+          fontSize: 24,
+          fontWeight: 700,
+          lineHeight: 1
+        },
+        children: stat.value
+      }), jsx("p", {
+        style: {
+          color: 'rgba(255,255,255,0.5)',
+          fontFamily,
+          fontSize: 10,
+          letterSpacing: 1.5,
+          marginTop: 4
+        },
+        children: stat.label.toUpperCase()
+      })]
+    }, stat.label))
+  });
+}
+/* ── Main component ────────────────────────────────────────────── */
+function ImageHero(props) {
+  var _t$minH, _t$maxW, _t$px, _t$py, _t$cardRadius, _t$gap, _ref, _ref2, _ref3;
+  const t = useHeroTheme();
+  const isMobile = useMediaQuery('(max-width: 768px)');
+  const {
+      as: Tag = 'section',
+      eyebrow = 'Welcome',
+      title = 'Build Something Amazing',
+      titleAccent,
+      titleSuffix,
+      subtitle,
+      ctaLabel,
+      ctaHref = '#',
+      ctaSecondaryLabel,
+      ctaSecondaryHref = '#',
+      imageSrc,
+      imageAlt = 'Hero image',
+      stats,
+      layout = 'split',
+      titleSize = 48,
+      subtitleSize = 18,
+      bgColor,
+      textColor,
+      accentColor,
+      fontFamily = t.fontFamily,
+      minH = (_t$minH = t.minH) != null ? _t$minH : '100vh',
+      maxW = (_t$maxW = t.maxW) != null ? _t$maxW : 1200,
+      px = (_t$px = t.px) != null ? _t$px : 24,
+      py = (_t$py = t.py) != null ? _t$py : 48,
+      radius = (_t$cardRadius = t.cardRadius) != null ? _t$cardRadius : 0,
+      gap = (_t$gap = t.gap) != null ? _t$gap : 24,
+      style = {},
+      className = '',
+      children
+    } = props,
+    rest = _objectWithoutPropertiesLoose(props, _excluded$M);
+  const bg = (_ref = bgColor != null ? bgColor : t.bgColor) != null ? _ref : ui$w.black;
+  const fg = (_ref2 = textColor != null ? textColor : t.textColor) != null ? _ref2 : '#ffffff';
+  const accent = (_ref3 = accentColor != null ? accentColor : t.accentColor) != null ? _ref3 : '#8B5CF6';
+  const rPx = isMobile ? 16 : px;
+  const pyPx = isMobile ? 80 : py;
+  const subSize = isMobile ? Math.max(14, Math.floor(subtitleSize * 0.85)) : subtitleSize;
+  const overlay = `linear-gradient(135deg, ${bg}f2 0%, ${bg}99 60%, ${accent}14 100%)`;
+  const shared = {
+    accent,
+    fontFamily,
+    isMobile,
+    radius
+  };
+  // ── Minimal ──
+  if (layout === 'minimal') {
+    return jsxs(Tag, _extends({
+      className: className,
+      style: _extends({
+        position: 'relative',
+        minHeight: isMobile ? 'auto' : minH,
+        display: 'flex',
+        alignItems: 'center',
+        overflow: 'hidden',
+        background: bg
+      }, style)
+    }, rest, {
+      children: [!isMobile && jsxs(Fragment, {
+        children: [jsx("div", {
+          "aria-hidden": true,
+          style: {
+            position: 'absolute',
+            top: 80,
+            right: 80,
+            width: 160,
+            height: 160,
+            border: `2px solid ${accent}30`
+          }
+        }), jsx("div", {
+          "aria-hidden": true,
+          style: {
+            position: 'absolute',
+            bottom: 128,
+            left: 64,
+            width: 96,
+            height: 256,
+            background: `${accent}10`
+          }
+        }), jsx("div", {
+          "aria-hidden": true,
+          style: {
+            position: 'absolute',
+            top: '50%',
+            right: '33%',
+            width: 1,
+            height: 160,
+            background: accent
+          }
+        })]
+      }), jsx("div", {
+        style: {
+          position: 'relative',
+          zIndex: 1,
+          width: '100%',
+          maxWidth: maxW,
+          margin: '0 auto',
+          padding: `${pyPx}px ${rPx}px`
+        },
+        children: jsxs("div", {
+          style: {
+            maxWidth: 768
+          },
+          children: [jsx(HeroEyebrow, _extends({
+            text: eyebrow
+          }, shared)), jsxs("h1", {
+            style: {
+              fontFamily,
+              color: fg,
+              fontSize: 'clamp(2.2rem, 7vw, 5.5rem)',
+              fontWeight: 400,
+              lineHeight: 0.95,
+              letterSpacing: -1,
+              textTransform: 'uppercase',
+              marginTop: 16,
+              overflowWrap: 'break-word'
+            },
+            children: [title, titleAccent && jsxs(Fragment, {
+              children: [jsx("br", {}), jsx("span", {
+                style: {
+                  color: accent
+                },
+                children: titleAccent
+              })]
+            })]
+          }), subtitle && jsx("p", {
+            style: {
+              color: ui$w.muted,
+              fontFamily,
+              fontSize: subSize,
+              lineHeight: 1.8,
+              maxWidth: 400,
+              marginTop: isMobile ? 24 : 32,
+              marginBottom: isMobile ? 32 : 40
+            },
+            children: subtitle
+          }), jsx(HeroCTAs, _extends({
+            ctaLabel: ctaLabel,
+            ctaHref: ctaHref,
+            ctaSecondaryLabel: ctaSecondaryLabel,
+            ctaSecondaryHref: ctaSecondaryHref,
+            fg: fg
+          }, shared)), jsx(HeroStats, _extends({
+            stats: stats
+          }, shared))]
+        })
+      })]
+    }));
+  }
+  // ── Centered ──
+  if (layout === 'centered') {
+    return jsxs(Tag, _extends({
+      className: className,
+      style: _extends({
+        position: 'relative',
+        minHeight: isMobile ? 'auto' : minH,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+        background: bg
+      }, style)
+    }, rest, {
+      children: [imageSrc && jsxs("div", {
+        style: {
+          position: 'absolute',
+          inset: 0
+        },
+        children: [jsx("img", {
+          src: imageSrc,
+          alt: imageAlt,
+          style: {
+            width: '100%',
+            height: '100%',
+            objectFit: 'cover'
+          }
+        }), jsx("div", {
+          "aria-hidden": true,
+          style: {
+            position: 'absolute',
+            inset: 0,
+            background: overlay
+          }
+        })]
+      }), jsxs("div", {
+        style: {
+          position: 'relative',
+          zIndex: 1,
+          width: '100%',
+          maxWidth: isMobile ? '100%' : 800,
+          margin: '0 auto',
+          padding: `${pyPx}px ${rPx}px`,
+          textAlign: 'center'
+        },
+        children: [jsx(HeroEyebrow, _extends({
+          text: eyebrow
+        }, shared, {
+          center: true
+        })), jsxs("h1", {
+          style: {
+            fontFamily,
+            color: fg,
+            fontSize: `clamp(${isMobile ? '2rem' : '2.5rem'}, 6vw, 5.5rem)`,
+            lineHeight: 1.05,
+            letterSpacing: -1,
+            margin: 0
+          },
+          children: [title, titleAccent && jsxs(Fragment, {
+            children: [jsx("br", {}), jsx("em", {
+              style: {
+                color: accent,
+                fontStyle: 'italic'
+              },
+              children: titleAccent
+            })]
+          }), titleSuffix && ` ${titleSuffix}`]
+        }), subtitle && jsx("p", {
+          style: {
+            fontFamily,
+            color: 'rgba(255,255,255,0.7)',
+            fontSize: subSize,
+            lineHeight: 1.7,
+            maxWidth: 520,
+            margin: '20px auto 32px'
+          },
+          children: subtitle
+        }), jsx(HeroCTAs, _extends({
+          ctaLabel: ctaLabel,
+          ctaHref: ctaHref,
+          ctaSecondaryLabel: ctaSecondaryLabel,
+          ctaSecondaryHref: ctaSecondaryHref,
+          fg: fg
+        }, shared, {
+          center: true
+        })), jsx(HeroStats, _extends({
+          stats: stats
+        }, shared, {
+          center: true
+        }))]
+      })]
+    }));
+  }
+  // ── Split (default) ──
+  return jsxs(Tag, _extends({
+    className: className,
+    style: _extends({
+      position: 'relative',
+      minHeight: isMobile ? 'auto' : minH,
+      display: 'flex',
+      alignItems: 'center',
+      overflow: 'hidden',
+      background: bg
+    }, style)
+  }, rest, {
+    children: [imageSrc && jsxs("div", {
+      style: {
+        position: 'absolute',
+        inset: 0
+      },
+      children: [jsx("img", {
+        src: imageSrc,
+        alt: imageAlt,
+        style: {
+          width: '100%',
+          height: '100%',
+          objectFit: 'cover'
+        }
+      }), jsx("div", {
+        "aria-hidden": true,
+        style: {
+          position: 'absolute',
+          inset: 0,
+          background: overlay
+        }
+      })]
+    }), !isMobile && jsxs(Fragment, {
+      children: [jsx("div", {
+        "aria-hidden": true,
+        style: {
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          height: '100%',
+          width: 1,
+          background: `linear-gradient(to bottom, transparent, ${accent}40, transparent)`
+        }
+      }), jsx("div", {
+        "aria-hidden": true,
+        style: {
+          position: 'absolute',
+          right: 0,
+          top: 0,
+          height: '100%',
+          width: 1,
+          background: `linear-gradient(to bottom, transparent, ${accent}40, transparent)`
+        }
+      })]
+    }), jsxs("div", {
+      style: {
+        position: 'relative',
+        zIndex: 1,
+        width: '100%',
+        maxWidth: maxW,
+        margin: '0 auto',
+        padding: `${pyPx}px ${rPx}px`,
+        display: 'grid',
+        gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
+        gap: isMobile ? 32 : gap,
+        alignItems: 'center'
+      },
+      children: [jsxs("div", {
+        children: [jsx(HeroEyebrow, _extends({
+          text: eyebrow
+        }, shared)), jsxs("h1", {
+          style: {
+            fontFamily,
+            color: fg,
+            fontSize: `clamp(${isMobile ? '2rem' : '3rem'}, 6vw, 5.5rem)`,
+            lineHeight: 1.05,
+            letterSpacing: -1,
+            margin: 0
+          },
+          children: [title, titleAccent && jsxs(Fragment, {
+            children: [jsx("br", {}), jsx("em", {
+              style: {
+                color: accent,
+                fontStyle: 'italic'
+              },
+              children: titleAccent
+            })]
+          }), titleSuffix && ` ${titleSuffix}`]
+        }), subtitle && jsx("p", {
+          style: {
+            fontFamily,
+            color: 'rgba(255,255,255,0.7)',
+            fontSize: subSize,
+            lineHeight: 1.7,
+            maxWidth: 480,
+            marginTop: isMobile ? 20 : 24,
+            marginBottom: isMobile ? 32 : 40
+          },
+          children: subtitle
+        }), jsx(HeroCTAs, _extends({
+          ctaLabel: ctaLabel,
+          ctaHref: ctaHref,
+          ctaSecondaryLabel: ctaSecondaryLabel,
+          ctaSecondaryHref: ctaSecondaryHref,
+          fg: fg
+        }, shared)), jsx(HeroStats, _extends({
+          stats: stats
+        }, shared))]
+      }), !isMobile && imageSrc && jsx("div", {
+        style: {
+          position: 'relative',
+          height: 580,
+          display: 'flex',
+          justifyContent: 'flex-end'
+        },
+        children: jsx("div", {
+          style: {
+            position: 'absolute',
+            right: 0,
+            top: 0,
+            width: 288,
+            height: 384,
+            overflow: 'hidden',
+            borderRadius: radius || 12,
+            boxShadow: `0 0 60px ${accent}20`
+          },
+          children: jsx("img", {
+            src: imageSrc,
+            alt: imageAlt,
+            style: {
+              width: '100%',
+              height: '100%',
+              objectFit: 'cover'
+            }
+          })
+        })
+      }), children]
+    })]
+  }));
+}
+
 const _excluded$L = ["as", "title", "subtitle", "pattern", "intensity", "badge", "ctaLabel", "onCta", "stats", "titleSize", "subtitleSize", "bgColor", "textColor", "accentColor", "borderColor", "fontFamily", "minH", "maxW", "px", "py", "radius", "gap", "style", "className"];
 function usePattern(kind, accent, intensity) {
   return useMemo(() => {
@@ -4734,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 = [{
@@ -4755,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',
@@ -4789,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({
@@ -4805,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',
@@ -4821,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,
@@ -4831,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',
@@ -4864,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, {
@@ -4873,7 +5478,7 @@ function PatternedHero(props) {
         }), badge]
       }), title && jsx("h2", {
         style: {
-          fontSize: titleSize,
+          fontSize: titlePx,
           margin: 0,
           fontWeight: 800,
           lineHeight: 1.05,
@@ -4883,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',
@@ -4894,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,
@@ -4926,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", {
@@ -4938,7 +5544,7 @@ function PatternedHero(props) {
           },
           children: [jsx("div", {
             style: {
-              fontSize: 32,
+              fontSize: isMobile ? 24 : 32,
               fontWeight: 800,
               color: fg,
               letterSpacing: '-0.03em'
@@ -4946,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
@@ -4966,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',
@@ -5004,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({
@@ -5013,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',
@@ -5029,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',
@@ -5047,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',
@@ -5070,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, {
@@ -5079,7 +5691,7 @@ function SplitHero(props) {
           }), badge]
         }), title && jsx("h2", {
           style: {
-            fontSize: titleSize,
+            fontSize: titlePx,
             margin: 0,
             fontWeight: 800,
             lineHeight: 1.08,
@@ -5089,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
           },
@@ -5100,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
@@ -5110,7 +5722,7 @@ function SplitHero(props) {
               display: 'flex',
               alignItems: 'center',
               gap: 12,
-              fontSize: 15,
+              fontSize: isMobile ? 14 : 15,
               color: fg,
               fontWeight: 500
             },
@@ -5136,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,
@@ -5165,7 +5778,7 @@ function SplitHero(props) {
             })]
           })
         })]
-      }), jsx("div", {
+      }), !isMobile && jsx("div", {
         style: {
           direction: 'ltr'
         },
@@ -5230,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,
@@ -5261,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',
@@ -5270,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',
@@ -5285,6 +5904,7 @@ function VideoHeaderHero(props) {
       loop: loop,
       controls: controls,
       poster: poster,
+      "aria-hidden": "true",
       style: {
         position: 'absolute',
         inset: 0,
@@ -5301,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',
@@ -5336,7 +5950,7 @@ function VideoHeaderHero(props) {
       },
       children: [title && jsx("h2", {
         style: {
-          fontSize: titleSize,
+          fontSize: titlePx,
           margin: 0,
           fontWeight: 800,
           lineHeight: 1.05,
@@ -5346,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',
@@ -5360,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
         }
       })]
@@ -20662,4 +21276,4 @@ function CommentsSection(_ref0) {
   }));
 }
 
-export { Accordion, AccountSettings, AddressAutocomplete, AnchorLinks, AnimatedBrandMark, AppInstallBanner, ArchiveList, ArticleRenderer, AudioEmbed, AuthForm, AuthorByline, AutoSuggest, AvatarProfile, Badge, BadgeGroup, BarChart, BlockShell, BlockquoteTestimonial, BlogBadge, BlogCard, BrandIconGrid, BrandingShell, Breadcrumbs, Button, PrimaryButton as ButtonAlias, ButtonGroup, CTAOverlayHero, CalendarGrid, CalloutBox, Captcha, CarouselHero, CartDrawer, CommentsBox, CommentsSection, ComparisonTable, ConfirmDialog, ContactForm, ContactSupportBlock, CookieConsent, CookieNotice, CountdownTimer, DataTable, DateTimePicker, DownloadBlock, DownloadButton, ElectroplixProvider, EmptyState, FAQAccordion, FacetFilters, FaviconUploader, FeatureGrid, FeatureHighlights, FileUploader, FloatingActionButton, FollowLike, Footer, FormDialog, FormShell, GenericList, GenericModal, HeadingSection, HeroShell, HowItWorks, ICON_NAMES, Icon, IconButton, IconGrid, ImageCropperUploader, ImageGallery, InlineCode, InlineCodeText, InputField, ItemCardGrid, LCTimeline, LanguageSelector, LeadMagnetGate, LightboxGallery, LineChart, LoadingButton, LoadingOverlay, LogoDisplay, LottieOrSVG, MapEmbed, MarketingHeroBlock, MasonryGrid, MediaShell, MegaMenu, MiniCartPanel, MultiFactorAuthInput, MultiStepWizard, NewsletterSignup, OnboardingWizard, OrderSummary, OverlayBase, Pagination, ParagraphBlock, PasswordReset, PatternedHero, PaymentButtons, PieChart, PolaroidImage, PricingTable, PrimaryButton, PrimaryNav, PrintButton, ProductCard, ProductDetail, ProductGrid, ProductTour, ProfileOverview, ProfileSettings, ProgressBar, PromoPopup, QuickAddButton, RSSFeed, RadioGroup, RatingStars, ReactionsBar, ReadingBar, RelatedPosts, ResponsiveVideo, ReviewsForm, RichMarkdown, RoleBadge, ScrollProgressBar, SearchEmptyState, SearchResultCard, SearchResults, SecondaryButton, SelectDropdown, ShareButton, SideDrawerNav, SidebarMenu, SiteSearchBar, SocialEmbed, SocialLoginButtons, SocialShareBar, SortableTable, Sparkline, SplitHero, StaticHero, StatsCounter, Stepper, SupportChat, Tabs, TagList, Taglines, TeamGrid, TertiaryButton, TestimonialsCarousel, TextAreaField, ThemeToggle, Timeline, ToastBanners, ToggleSwitch, Tooltip, TooltipHelp, TrustBadges, ValidationWrapper, VariantSelector, VideoHeaderHero, WelcomePopup, WishlistButton, baseBtn, baseButtonStyle, cn, defaultBlogTheme, defaultButtonTheme, defaultConfig, defaultContentTheme, defaultDataDisplayTheme, defaultEcommerceTheme, defaultFormsTheme, defaultHeroTheme, defaultListsCardsTheme, defaultMarketingTheme, defaultMediaTheme, defaultMiscTheme, defaultModalsTheme, defaultNavigationTheme, defaultOnboardingTheme, defaultSearchTheme, defaultSiteIdentityTheme, defaultSocialTheme, defaultUserAccountsTheme, defineConfig, emailRule, inputStyle, labelStyle, maxLengthRule, mergeTheme, minLengthRule, money, requiredRule, sx, timeAgo, truncate, useBlogTheme, useButtonTheme, useClickOutside, useContentTheme, useDataDisplayTheme, useDebounce, useEcommerceTheme, useElectroplixConfig, useFocusTrap, useFormsTheme, useHeroTheme, useListsCardsTheme, useMarketingTheme, useMediaQuery, useMediaTheme, useMiscTheme, useModalsTheme, useNavTheme, useOnboardingTheme, useSearchTheme, useSiteIdentityTheme, useSocialTheme, useUserAccountsTheme, validate };
+export { Accordion, AccountSettings, AddressAutocomplete, AnchorLinks, AnimatedBrandMark, AppInstallBanner, ArchiveList, ArticleRenderer, AudioEmbed, AuthForm, AuthorByline, AutoSuggest, AvatarProfile, Badge, BadgeGroup, BarChart, BlockShell, BlockquoteTestimonial, BlogBadge, BlogCard, BrandIconGrid, BrandingShell, Breadcrumbs, Button, PrimaryButton as ButtonAlias, ButtonGroup, CTAOverlayHero, CalendarGrid, CalloutBox, Captcha, CarouselHero, CartDrawer, CommentsBox, CommentsSection, ComparisonTable, ConfirmDialog, ContactForm, ContactSupportBlock, CookieConsent, CookieNotice, CountdownTimer, DataTable, DateTimePicker, DownloadBlock, DownloadButton, ElectroplixProvider, EmptyState, FAQAccordion, FacetFilters, FaviconUploader, FeatureGrid, FeatureHighlights, FileUploader, FloatingActionButton, FollowLike, Footer, FormDialog, FormShell, GenericList, GenericModal, HeadingSection, HeroShell, HowItWorks, ICON_NAMES, Icon, IconButton, IconGrid, ImageCropperUploader, ImageGallery, ImageHero, InlineCode, InlineCodeText, InputField, ItemCardGrid, LCTimeline, LanguageSelector, LeadMagnetGate, LightboxGallery, LineChart, LoadingButton, LoadingOverlay, LogoDisplay, LottieOrSVG, MapEmbed, MarketingHeroBlock, MasonryGrid, MediaShell, MegaMenu, MiniCartPanel, MultiFactorAuthInput, MultiStepWizard, NewsletterSignup, OnboardingWizard, OrderSummary, OverlayBase, Pagination, ParagraphBlock, PasswordReset, PatternedHero, PaymentButtons, PieChart, PolaroidImage, PricingTable, PrimaryButton, PrimaryNav, PrintButton, ProductCard, ProductDetail, ProductGrid, ProductTour, ProfileOverview, ProfileSettings, ProgressBar, PromoPopup, QuickAddButton, RSSFeed, RadioGroup, RatingStars, ReactionsBar, ReadingBar, RelatedPosts, ResponsiveVideo, ReviewsForm, RichMarkdown, RoleBadge, ScrollProgressBar, SearchEmptyState, SearchResultCard, SearchResults, SecondaryButton, SelectDropdown, ShareButton, SideDrawerNav, SidebarMenu, SiteSearchBar, SocialEmbed, SocialLoginButtons, SocialShareBar, SortableTable, Sparkline, SplitHero, StaticHero, StatsCounter, Stepper, SupportChat, Tabs, TagList, Taglines, TeamGrid, TertiaryButton, TestimonialsCarousel, TextAreaField, ThemeToggle, Timeline, ToastBanners, ToggleSwitch, Tooltip, TooltipHelp, TrustBadges, ValidationWrapper, VariantSelector, VideoHeaderHero, WelcomePopup, WishlistButton, baseBtn, baseButtonStyle, cn, defaultBlogTheme, defaultButtonTheme, defaultConfig, defaultContentTheme, defaultDataDisplayTheme, defaultEcommerceTheme, defaultFormsTheme, defaultHeroTheme, defaultListsCardsTheme, defaultMarketingTheme, defaultMediaTheme, defaultMiscTheme, defaultModalsTheme, defaultNavigationTheme, defaultOnboardingTheme, defaultSearchTheme, defaultSiteIdentityTheme, defaultSocialTheme, defaultUserAccountsTheme, defineConfig, emailRule, inputStyle, labelStyle, maxLengthRule, mergeTheme, minLengthRule, money, requiredRule, sx, timeAgo, truncate, useBlogTheme, useButtonTheme, useClickOutside, useContentTheme, useDataDisplayTheme, useDebounce, useEcommerceTheme, useElectroplixConfig, useFocusTrap, useFormsTheme, useHeroTheme, useListsCardsTheme, useMarketingTheme, useMediaQuery, useMediaTheme, useMiscTheme, useModalsTheme, useNavTheme, useOnboardingTheme, useSearchTheme, useSiteIdentityTheme, useSocialTheme, useUserAccountsTheme, validate };