astro-component-kit 0.3.1 → 0.4.1

package/src/components/lib/sections/FeatureIconGrid.astro

@@ -0,0 +1,155 @@
+---
+/**
+ * FeatureIconGrid — Classic 3-column feature grid with SVG icons, titles,
+ * descriptions and optional "learn more" links. Cards light up on hover/focus.
+ *
+ * @param {string} eyebrow - Small label above the heading.
+ * @param {string} title - Section heading.
+ * @param {string} subtitle - Section description.
+ * @param {Array<{icon: string, title: string, text: string, href?: string}>} features - Feature cards.
+ *   `icon` is one of: bolt, shield, layers, chart, globe, code, sparkles, lock, users.
+ * @param {number} columns - Max columns on desktop (2|3|4).
+ * @param {string} variant - Card style (card|plain|bordered).
+ * @param {string} size - Vertical rhythm (sm|md|lg).
+ * @param {string} className - Extra CSS class.
+ */
+interface Feature { icon: string; title: string; text: string; href?: string }
+interface Props {
+  eyebrow?: string;
+  title?: string;
+  subtitle?: string;
+  features?: Feature[];
+  columns?: 2 | 3 | 4;
+  variant?: 'card' | 'plain' | 'bordered';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const icons: Record<string, string> = {
+  bolt: '<path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/>',
+  shield: '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/>',
+  layers: '<path d="m12 2 10 5-10 5L2 7l10-5z"/><path d="m2 17 10 5 10-5"/><path d="m2 12 10 5 10-5"/>',
+  chart: '<path d="M3 3v18h18"/><path d="m19 9-5 5-4-4-3 3"/>',
+  globe: '<circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 0 1 0 20 15 15 0 0 1 0-20z"/>',
+  code: '<path d="m16 18 6-6-6-6M8 6l-6 6 6 6"/>',
+  sparkles: '<path d="M12 3l1.9 5.8L20 10l-6.1 1.2L12 17l-1.9-5.8L4 10l6.1-1.2z"/><path d="M19 17v4M17 19h4"/>',
+  lock: '<rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>',
+  users: '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/>',
+};
+
+const {
+  eyebrow = 'Features',
+  title = 'Everything you need, nothing you don’t',
+  subtitle = 'A focused toolkit that keeps your pages fast, accessible and on-brand.',
+  features = [
+    { icon: 'bolt', title: 'Zero runtime JS', text: 'Components render to static HTML and CSS. Interactivity is progressive and tiny.', href: '#' },
+    { icon: 'shield', title: 'Accessible by default', text: 'Semantic markup, focus rings, ARIA where it matters and 4.5:1 contrast everywhere.', href: '#' },
+    { icon: 'layers', title: 'Design tokens', text: 'Colors, spacing and radii come from CSS custom properties you can re-theme in one file.' },
+    { icon: 'chart', title: 'SVG charts', text: '45 dependency-free charts with tooltips, legends and data-table fallbacks.' },
+    { icon: 'globe', title: 'i18n ready', text: 'Every string is a prop. Ship English, Spanish and Russian docs out of the box.' },
+    { icon: 'code', title: 'Copy & paste', text: 'No package lock-in. Grab the source from the docs and own every line.' },
+  ],
+  columns = 3,
+  variant = 'card',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const id = `fig-${Math.random().toString(36).slice(2, 8)}`;
+---
+
+<section class={`fig fig--${variant} fig--${size} ${className}`} aria-labelledby={id} style={`--fig-cols:${columns}`}>
+  <div class="fig__inner">
+    <header class="fig__head">
+      <p class="fig__eyebrow">{eyebrow}</p>
+      <h2 id={id} class="fig__title">{title}</h2>
+      <p class="fig__subtitle">{subtitle}</p>
+    </header>
+    <ul class="fig__grid">
+      {features.map((f) => (
+        <li class="fig__card">
+          <span class="fig__icon" aria-hidden="true">
+            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" set:html={icons[f.icon] ?? icons.sparkles}></svg>
+          </span>
+          <h3 class="fig__card-title">{f.title}</h3>
+          <p class="fig__text">{f.text}</p>
+          {f.href && (
+            <a class="fig__link" href={f.href}>
+              Learn more<span class="fig__sr"> about {f.title}</span>
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
+            </a>
+          )}
+        </li>
+      ))}
+    </ul>
+  </div>
+</section>
+
+<style>
+  .fig {
+    --fig-py: 5.5rem;
+    padding: var(--fig-py) var(--sp-6, 1.5rem);
+    background: var(--c-bg, #050505);
+  }
+  .fig--sm { --fig-py: 3.5rem; }
+  .fig--lg { --fig-py: 7.5rem; }
+  .fig__inner { max-width: 1180px; margin: 0 auto; }
+  .fig__head { max-width: 640px; margin: 0 auto 3.5rem; text-align: center; }
+  .fig__eyebrow { margin: 0 0 0.75rem; font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-primary-light, #d4a017); }
+  .fig__title { margin: 0 0 1rem; font-size: clamp(1.9rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; color: var(--c-text-1, #fff); text-wrap: balance; }
+  .fig__subtitle { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--c-text-2, #a3a3a3); }
+  .fig__grid {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, calc((100% - (var(--fig-cols) - 1) * 1.25rem) / var(--fig-cols))), 1fr));
+    gap: 1.25rem;
+  }
+  .fig__card {
+    position: relative;
+    padding: 1.75rem;
+    border-radius: var(--r-lg, 20px);
+    transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
+  }
+  .fig--card .fig__card {
+    background: linear-gradient(160deg, rgb(var(--ink-rgb, 255 255 255) / 0.04), rgb(var(--ink-rgb, 255 255 255) / 0.01));
+    border: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.07));
+  }
+  .fig--bordered .fig__card { border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1); }
+  .fig--plain .fig__card { padding: 0.5rem 0; }
+  .fig--card .fig__card:hover, .fig--card .fig__card:focus-within,
+  .fig--bordered .fig__card:hover, .fig--bordered .fig__card:focus-within {
+    border-color: color-mix(in srgb, var(--c-primary-light, #d4a017) 35%, transparent);
+    transform: translateY(-3px);
+  }
+  .fig__icon {
+    display: grid;
+    place-items: center;
+    width: 46px;
+    height: 46px;
+    margin-bottom: 1.25rem;
+    border-radius: var(--r-md, 12px);
+    background: var(--c-primary-glow, color-mix(in srgb, var(--c-primary, #b8860b) 12%, transparent));
+    border: 1px solid color-mix(in srgb, var(--c-primary-light, #d4a017) 25%, transparent);
+    color: var(--c-primary-light, #d4a017);
+  }
+  .fig__card-title { margin: 0 0 0.5rem; font-size: 1.125rem; font-weight: 650; color: var(--c-text-1, #fff); letter-spacing: -0.01em; }
+  .fig__text { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--c-text-2, #a3a3a3); }
+  .fig__link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    min-height: 44px;
+    margin-top: 0.5rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--c-primary-light, #d4a017);
+    text-decoration: none;
+  }
+  .fig__link svg { transition: transform 0.2s ease; }
+  .fig__link:hover svg { transform: translateX(3px); }
+  .fig__link:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 2px; border-radius: 4px; }
+  .fig__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+  @media (prefers-reduced-motion: reduce) { .fig__card, .fig__link svg { transition: none; } }
+</style>

package/src/components/lib/sections/FeatureTabsShowcase.astro

@@ -0,0 +1,182 @@
+---
+/**
+ * FeatureTabsShowcase — Interactive feature section using the WAI-ARIA tabs
+ * pattern (arrow keys, Home/End) to switch between product capabilities.
+ *
+ * @param {string} title - Section heading.
+ * @param {string} subtitle - Section description.
+ * @param {Array<{label: string, title: string, text: string, points: string[], stat: string, statLabel: string}>} tabs - Tab panels.
+ * @param {string} variant - Tab style (pills|underline|cards).
+ * @param {string} size - Vertical rhythm (sm|md|lg).
+ * @param {string} className - Extra CSS class.
+ */
+interface Tab { label: string; title: string; text: string; points: string[]; stat: string; statLabel: string }
+interface Props {
+  title?: string;
+  subtitle?: string;
+  tabs?: Tab[];
+  variant?: 'pills' | 'underline' | 'cards';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'One platform, every workflow',
+  subtitle = 'Switch between capabilities to see how teams use the kit.',
+  tabs = [
+    { label: 'Marketing', title: 'Launch pages in an afternoon', text: 'Assemble hero, features, pricing and FAQ sections into conversion-ready landing pages.', points: ['24 new section blocks', 'SEO-friendly markup', 'Instant static builds'], stat: '3.4×', statLabel: 'faster page launches' },
+    { label: 'Product', title: 'In-app analytics without a chart library', text: 'Render KPI tiles, funnels and cohort tables straight from your data at build time.', points: ['45 SVG charts', 'Tooltips & table view', 'Zero client JS'], stat: '0 kB', statLabel: 'chart runtime shipped' },
+    { label: 'Engineering', title: 'Accessible components you can trust', text: 'Every component is keyboard navigable and screen-reader tested, with visible focus states.', points: ['WCAG 2.2 AA', 'Typed props', 'Reduced-motion aware'], stat: '100', statLabel: 'Lighthouse accessibility' },
+  ],
+  variant = 'pills',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const uid = Math.random().toString(36).slice(2, 8);
+const id = `fts-${uid}`;
+---
+
+<div class="cq-feature-tabs-showcase-cq">
+<section class={`fts fts--${variant} fts--${size} ${className}`} aria-labelledby={id}>
+  <div class="fts__inner">
+    <header class="fts__head">
+      <h2 id={id} class="fts__title">{title}</h2>
+      <p class="fts__subtitle">{subtitle}</p>
+    </header>
+
+    <div class="fts__tabs" data-fts>
+      <div class="fts__list" role="tablist" aria-label={title}>
+        {tabs.map((t, i) => (
+          <button
+            type="button"
+            role="tab"
+            class="fts__tab"
+            id={`${id}-tab-${i}`}
+            aria-controls={`${id}-panel-${i}`}
+            aria-selected={i === 0 ? 'true' : 'false'}
+            tabindex={i === 0 ? 0 : -1}
+          >{t.label}</button>
+        ))}
+      </div>
+
+      {tabs.map((t, i) => (
+        <div class="fts__panel" role="tabpanel" id={`${id}-panel-${i}`} aria-labelledby={`${id}-tab-${i}`} tabindex="0" hidden={i !== 0}>
+          <div class="fts__copy">
+            <h3 class="fts__panel-title">{t.title}</h3>
+            <p class="fts__text">{t.text}</p>
+            <ul class="fts__points">
+              {t.points.map((p) => (
+                <li><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5" /></svg>{p}</li>
+              ))}
+            </ul>
+          </div>
+          <div class="fts__stat">
+            <span class="fts__stat-value">{t.stat}</span>
+            <span class="fts__stat-label">{t.statLabel}</span>
+          </div>
+        </div>
+      ))}
+    </div>
+  </div>
+</section>
+</div>
+<script>
+  document.querySelectorAll<HTMLElement>('[data-fts]').forEach((root) => {
+    const tabs = Array.from(root.querySelectorAll<HTMLButtonElement>('[role="tab"]'));
+    const select = (next: HTMLButtonElement, focus = true) => {
+      tabs.forEach((t) => {
+        const on = t === next;
+        t.setAttribute('aria-selected', String(on));
+        t.tabIndex = on ? 0 : -1;
+        const panel = document.getElementById(t.getAttribute('aria-controls') || '');
+        if (panel) panel.hidden = !on;
+      });
+      if (focus) next.focus();
+    };
+    tabs.forEach((tab, i) => {
+      tab.addEventListener('click', () => select(tab, false));
+      tab.addEventListener('keydown', (e) => {
+        const map: Record<string, number> = { ArrowRight: i + 1, ArrowLeft: i - 1, Home: 0, End: tabs.length - 1 };
+        if (!(e.key in map)) return;
+        e.preventDefault();
+        select(tabs[(map[e.key] + tabs.length) % tabs.length]);
+      });
+    });
+  });
+</script>
+
+<style>
+  .cq-feature-tabs-showcase-cq { container-type: inline-size; }
+  .fts {
+    --fts-py: 5.5rem;
+    padding: var(--fts-py) var(--sp-6, 1.5rem);
+    background: var(--c-bg, #050505);
+  }
+  .fts--sm { --fts-py: 3.5rem; }
+  .fts--lg { --fts-py: 7.5rem; }
+  .fts__inner { max-width: 1080px; margin: 0 auto; }
+  .fts__head { text-align: center; max-width: 640px; margin: 0 auto 2.5rem; }
+  .fts__title { margin: 0 0 0.75rem; font-size: clamp(1.9rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em; color: var(--c-text-1, #fff); }
+  .fts__subtitle { margin: 0; font-size: 1.0625rem; color: var(--c-text-2, #a3a3a3); }
+  .fts__list { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
+  .fts__tab {
+    min-height: 44px;
+    padding: 0 1.25rem;
+    border: 1px solid transparent;
+    border-radius: var(--r-full, 999px);
+    background: transparent;
+    color: var(--c-text-2, #a3a3a3);
+    font: inherit;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+  }
+  .fts__tab:hover { color: var(--c-text-1, #fff); }
+  .fts__tab:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 2px; }
+  .fts--pills .fts__list { width: fit-content; margin-inline: auto; padding: 0.35rem; border-radius: var(--r-full, 999px); background: rgb(var(--ink-rgb, 255 255 255) / 0.04); border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.07); }
+  .fts--pills .fts__tab[aria-selected='true'] { background: var(--c-text-1, #fff); color: var(--c-on-primary, #0a0a0a); }
+  .fts--underline .fts__list { border-bottom: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08); gap: 1.5rem; }
+  .fts--underline .fts__tab { border-radius: 0; padding: 0 0.25rem; border-bottom: 2px solid transparent; margin-bottom: -1px; }
+  .fts--underline .fts__tab[aria-selected='true'] { color: var(--c-text-1, #fff); border-bottom-color: var(--c-primary-light, #d4a017); }
+  .fts--cards .fts__tab { border-radius: var(--r-md, 12px); border-color: rgb(var(--ink-rgb, 255 255 255) / 0.08); }
+  .fts--cards .fts__tab[aria-selected='true'] { border-color: var(--c-primary-light, #d4a017); color: var(--c-text-1, #fff); background: var(--c-primary-glow, color-mix(in srgb, var(--c-primary, #b8860b) 12%, transparent)); }
+
+  .fts__panel {
+    display: grid;
+    grid-template-columns: 1.4fr 1fr;
+    gap: 2rem;
+    align-items: center;
+    padding: clamp(1.5rem, 4vw, 3rem);
+    border-radius: var(--r-xl, 24px);
+    background: linear-gradient(160deg, rgb(var(--ink-rgb, 255 255 255) / 0.045), rgb(var(--ink-rgb, 255 255 255) / 0.01));
+    border: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.07));
+    animation: fts-in 0.35s ease;
+  }
+  .fts__panel[hidden] { display: none; }
+  .fts__panel:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 3px; }
+  @keyframes fts-in { from { opacity: 0; transform: translateY(6px); } }
+  .fts__panel-title { margin: 0 0 0.75rem; font-size: clamp(1.4rem, 3vw, 1.875rem); font-weight: 750; letter-spacing: -0.02em; color: var(--c-text-1, #fff); }
+  .fts__text { margin: 0 0 1.25rem; line-height: 1.65; color: var(--c-text-2, #a3a3a3); }
+  .fts__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
+  .fts__points li { display: flex; align-items: center; gap: 0.55rem; color: var(--c-text-1, #fff); font-size: 0.9375rem; }
+  .fts__points svg { color: var(--chart-pos, #34c38f); }
+  .fts__stat {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    min-height: 200px;
+    border-radius: var(--r-lg, 20px);
+    background: radial-gradient(circle at 50% 30%, var(--c-primary-glow, color-mix(in srgb, var(--c-primary, #b8860b) 16%, transparent)), transparent 70%), rgb(var(--ink-rgb, 255 255 255) / 0.02);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.06);
+    text-align: center;
+    padding: 1.5rem;
+  }
+  .fts__stat-value { font-size: clamp(2.75rem, 6vw, 4rem); font-weight: 800; letter-spacing: -0.04em; color: var(--c-text-1, #fff); font-variant-numeric: tabular-nums; line-height: 1; }
+  .fts__stat-label { font-size: 0.875rem; color: var(--c-text-2, #a3a3a3); }
+  @container (max-width: 760px) { .fts__panel { grid-template-columns: 1fr; } }
+  @media (prefers-reduced-motion: reduce) { .fts__panel { animation: none; } }
+</style>

package/src/components/lib/sections/FeatureTimelineFlow.astro

@@ -48,6 +48,7 @@ const steps = [
 ];
 ---
 
+<div class="cq-feature-timeline-flow-cq">
 <section class={`timeline-section ${className}`} aria-labelledby="timeline-title">
   <div class="timeline-bg" aria-hidden="true">
     <div class="timeline-glow"></div>
@@ -83,8 +84,9 @@ const steps = [
     </div>
   </div>
 </section>
-
+</div>
 <style>
+  .cq-feature-timeline-flow-cq { container-type: inline-size; }
   .timeline-section {
     position: relative;
     padding: var(--sp-20, 5rem) var(--sp-6, 1.5rem);
@@ -131,7 +133,7 @@ const steps = [
     font-weight: 700;
     letter-spacing: 0.06em;
     text-transform: uppercase;
-    background: rgba(184, 134, 11, 0.12);
+    background: color-mix(in srgb, var(--c-primary, #b8860b) 12%, transparent);
     color: #eab308;
     border: 1px solid rgba(234, 179, 8, 0.25);
     margin-bottom: var(--sp-4, 1rem);
@@ -199,7 +201,7 @@ const steps = [
     flex: 1;
     background: rgba(15, 23, 42, 0.6);
     backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     border-radius: 20px;
     padding: 2rem;
     transition: transform 0.3s ease, border-color 0.3s ease;
@@ -207,7 +209,7 @@ const steps = [
 
   .step-card__body:hover {
     transform: translateX(4px);
-    border-color: rgba(255, 255, 255, 0.18);
+    border-color: rgb(var(--ink-rgb, 255 255 255) / 0.18);
   }
 
   .step-tag {
@@ -234,7 +236,7 @@ const steps = [
   .step-code {
     padding: 0.75rem 1rem;
     background: rgba(0, 0, 0, 0.5);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     border-radius: 10px;
     font-family: var(--font-mono, monospace);
     font-size: 0.85rem;
@@ -242,7 +244,7 @@ const steps = [
     overflow-x: auto;
   }
 
-  @media (max-width: 640px) {
+  @container (max-width: 640px) {
     .flow-line {
       display: none;
     }

package/src/components/lib/sections/FeedbackShowcase.astro

@@ -8,6 +8,7 @@ interface Props {
 const { title = "Feedback", subtitle = "Badges, alerts, and notification components." } = Astro.props;
 ---
 
+<div class="cq-feedback-showcase-cq">
 <section class="feedback-showcase">
   <div class="container">
     <div class="showcase-header">
@@ -66,8 +67,9 @@ const { title = "Feedback", subtitle = "Badges, alerts, and notification compone
     </div>
   </div>
 </section>
-
+</div>
 <style>
+  .cq-feedback-showcase-cq { container-type: inline-size; }
   .feedback-showcase {
     padding: var(--sp-16) 0;
     position: relative;
@@ -84,8 +86,8 @@ const { title = "Feedback", subtitle = "Badges, alerts, and notification compone
     text-transform: uppercase;
     letter-spacing: 0.1em;
     color: var(--c-primary-light);
-    background: rgba(184,134,11,0.1);
-    border: 1px solid rgba(184,134,11,0.25);
+    background: color-mix(in srgb, var(--c-primary, #b8860b) 10%, transparent);
+    border: 1px solid color-mix(in srgb, var(--c-primary, #b8860b) 25%, transparent);
     border-radius: var(--r-full);
     margin-bottom: var(--sp-4);
   }
@@ -107,7 +109,7 @@ const { title = "Feedback", subtitle = "Badges, alerts, and notification compone
     padding: var(--sp-12);
     background: rgba(10, 10, 10, 0.6);
     backdrop-filter: blur(20px);
-    border: 1px solid rgba(255,255,255,0.08);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     border-radius: var(--r-xl);
     margin-bottom: var(--sp-6);
     box-shadow: 0 20px 60px rgba(0,0,0,0.4);
@@ -192,13 +194,13 @@ const { title = "Feedback", subtitle = "Badges, alerts, and notification compone
   }
   .badge--new {
     background: linear-gradient(135deg, var(--c-primary-light), var(--c-primary));
-    color: #0a0a0a;
-    box-shadow: 0 2px 10px rgba(184,134,11,0.25);
+    color: var(--c-on-primary, #0a0a0a);
+    box-shadow: 0 2px 10px color-mix(in srgb, var(--c-primary, #b8860b) 25%, transparent);
   }
   .badge--beta {
-    background: rgba(255,255,255,0.08);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.08);
     color: var(--c-text-1);
-    border: 1px solid rgba(255,255,255,0.12);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.12);
   }
   .badge--count {
     background: rgba(239,68,68,0.15);
@@ -215,9 +217,9 @@ const { title = "Feedback", subtitle = "Badges, alerts, and notification compone
     gap: 0.75rem;
     width: 100%;
     padding: 1rem;
-    background: rgba(255,255,255,0.06);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.06);
     backdrop-filter: blur(12px);
-    border: 1px solid rgba(255,255,255,0.1);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1);
     border-radius: var(--r-lg);
     box-shadow: 0 8px 30px rgba(0,0,0,0.3);
     animation: fadeSlideIn 0.5s ease 0.45s both;
@@ -268,7 +270,7 @@ const { title = "Feedback", subtitle = "Badges, alerts, and notification compone
   .spinner {
     width: 1.5rem;
     height: 1.5rem;
-    border: 2px solid rgba(184,134,11,0.2);
+    border: 2px solid color-mix(in srgb, var(--c-primary, #b8860b) 20%, transparent);
     border-top-color: var(--c-primary-light);
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
@@ -300,7 +302,7 @@ const { title = "Feedback", subtitle = "Badges, alerts, and notification compone
   .usage-code {
     text-align: center;
     padding: var(--sp-4);
-    background: rgba(255,255,255,0.02);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.02);
     border-radius: var(--r-md);
   }
   .usage-code code {
@@ -309,7 +311,7 @@ const { title = "Feedback", subtitle = "Badges, alerts, and notification compone
     color: var(--c-primary-light);
   }
 
-  @media (max-width: 640px) {
+  @container (max-width: 640px) {
     .feedback-stack { max-width: 100%; gap: var(--sp-4); }
     .preview-stage { padding: var(--sp-8) var(--sp-4); }
     .preview-stage__inner { min-height: auto; }

package/src/components/lib/sections/FooterMegaSection.astro

@@ -0,0 +1,157 @@
+---
+/**
+ * FooterMegaSection — Full site footer: brand blurb, newsletter field, four link
+ * columns, social icons, system-status pill and legal row.
+ *
+ * @param {string} brand - Brand name.
+ * @param {string} tagline - Short brand description.
+ * @param {Array<{title: string, links: Array<{label: string, href: string}>}>} columns - Link columns.
+ * @param {Array<{label: string, href: string, icon: 'github'|'x'|'discord'|'youtube'}>} socials - Social links.
+ * @param {string} status - System status text (empty to hide).
+ * @param {string} copyright - Copyright line.
+ * @param {string} variant - Footer style (default|bordered|minimal).
+ * @param {string} size - Vertical rhythm (sm|md|lg).
+ * @param {string} className - Extra CSS class.
+ */
+interface Column { title: string; links: Array<{ label: string; href: string }> }
+interface Social { label: string; href: string; icon: 'github' | 'x' | 'discord' | 'youtube' }
+interface Props {
+  brand?: string;
+  tagline?: string;
+  columns?: Column[];
+  socials?: Social[];
+  status?: string;
+  copyright?: string;
+  variant?: 'default' | 'bordered' | 'minimal';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  brand = 'Astro Kit',
+  tagline = 'Accessible, zero-dependency components for building beautiful Astro sites.',
+  columns = [
+    { title: 'Product', links: [{ label: 'Components', href: '#' }, { label: 'Sections', href: '#' }, { label: 'Charts', href: '#' }, { label: 'Changelog', href: '#' }] },
+    { title: 'Resources', links: [{ label: 'Documentation', href: '#' }, { label: 'Installation', href: '#' }, { label: 'Notes', href: '#' }, { label: 'Showcase', href: '#' }] },
+    { title: 'Company', links: [{ label: 'About', href: '#' }, { label: 'Careers', href: '#' }, { label: 'Contact', href: '#' }] },
+    { title: 'Legal', links: [{ label: 'Privacy', href: '#' }, { label: 'Terms', href: '#' }, { label: 'License (MIT)', href: '#' }] },
+  ],
+  socials = [
+    { label: 'GitHub', href: '#', icon: 'github' },
+    { label: 'X (Twitter)', href: '#', icon: 'x' },
+    { label: 'Discord', href: '#', icon: 'discord' },
+    { label: 'YouTube', href: '#', icon: 'youtube' },
+  ],
+  status = 'All systems operational',
+  copyright = `© ${new Date().getFullYear()} Astro Kit. All rights reserved.`,
+  variant = 'default',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const icons = {
+  github: '<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.9a3.4 3.4 0 0 0-.9-2.6c3.1-.4 6.4-1.5 6.4-7A5.4 5.4 0 0 0 20 4.8 5 5 0 0 0 19.9 1S18.7.6 16 2.5a13.4 13.4 0 0 0-7 0C6.3.6 5.1 1 5.1 1A5 5 0 0 0 5 4.8a5.4 5.4 0 0 0-1.5 3.7c0 5.4 3.3 6.6 6.4 7a3.4 3.4 0 0 0-.9 2.6V22"/>',
+  x: '<path d="M4 4l16 16M20 4 4 20"/>',
+  discord: '<path d="M8 12h.01M16 12h.01"/><path d="M7.5 7.5c3-1 6-1 9 0M7 16.5c3 1 7 1 10 0"/><path d="M15.5 17l1 3c3-1 5-3 5.5-4.5.5-4-1-8-3-11-1.5-.8-3-1.2-4.5-1.5L14 4.5M8.5 17l-1 3c-3-1-5-3-5.5-4.5-.5-4 1-8 3-11 1.5-.8 3-1.2 4.5-1.5L10 4.5"/>',
+  youtube: '<path d="M2.5 17a24 24 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.6 49.6 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24 24 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.6 49.6 0 0 1-16.2 0A2 2 0 0 1 2.5 17"/><path d="m10 15 5-3-5-3z"/>',
+};
+const id = `fms-${Math.random().toString(36).slice(2, 8)}`;
+---
+
+<div class="cq-footer-mega-section-cq">
+<footer class={`fms fms--${variant} fms--${size} ${className}`} aria-labelledby={id}>
+  <h2 id={id} class="fms__sr">Site footer</h2>
+  <div class="fms__inner">
+    <div class="fms__top">
+      <div class="fms__brand">
+        <a class="fms__logo" href="/">
+          <svg width="28" height="28" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2 3 20h4l5-10 5 10h4z" fill="var(--c-primary-light, #d4a017)" /></svg>
+          {brand}
+        </a>
+        <p class="fms__tagline">{tagline}</p>
+        <form class="fms__news" action="#" method="post">
+          <label for={`${id}-email`} class="fms__news-label">Get product updates</label>
+          <div class="fms__news-field">
+            <input id={`${id}-email`} type="email" name="email" placeholder="you@company.com" autocomplete="email" required />
+            <button type="submit" aria-label="Subscribe to product updates">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
+            </button>
+          </div>
+        </form>
+      </div>
+      <nav class="fms__cols" aria-label="Footer">
+        {columns.map((c) => (
+          <div class="fms__col">
+            <h3 class="fms__col-title">{c.title}</h3>
+            <ul>
+              {c.links.map((l) => <li><a href={l.href}>{l.label}</a></li>)}
+            </ul>
+          </div>
+        ))}
+      </nav>
+    </div>
+    <div class="fms__bottom">
+      <p class="fms__copy">{copyright}</p>
+      {status && (
+        <a class="fms__status" href="#">
+          <span class="fms__dot" aria-hidden="true"></span>{status}
+        </a>
+      )}
+      <ul class="fms__socials">
+        {socials.map((s) => (
+          <li>
+            <a href={s.href} aria-label={s.label}>
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" set:html={icons[s.icon]}></svg>
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  </div>
+</footer>
+</div>
+<style>
+  .cq-footer-mega-section-cq { container-type: inline-size; }
+  .fms {
+    --fms-py: 4.5rem;
+    padding: var(--fms-py) var(--sp-6, 1.5rem) 2rem;
+    background: var(--c-bg-1, #0a0a0a);
+    border-top: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.06);
+  }
+  .fms--sm { --fms-py: 3rem; }
+  .fms--lg { --fms-py: 6rem; }
+  .fms--bordered .fms__inner { padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--r-xl, 28px); border: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.08)); background: rgb(var(--ink-rgb, 255 255 255) / 0.015); }
+  .fms--minimal { background: transparent; border-top: 0; }
+  .fms--minimal .fms__news { display: none; }
+  .fms__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+  .fms__inner { max-width: 1180px; margin: 0 auto; }
+  .fms__top { display: grid; grid-template-columns: 1.2fr 2fr; gap: clamp(2rem, 6vw, 5rem); padding-bottom: 3rem; border-bottom: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.07); }
+  .fms__logo { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: var(--c-text-1, #fff); text-decoration: none; }
+  .fms__tagline { margin: 0.75rem 0 1.75rem; max-width: 320px; font-size: 0.9375rem; line-height: 1.6; color: var(--c-text-2, #a3a3a3); }
+  .fms__news-label { display: block; margin-bottom: 0.5rem; font-size: 0.8125rem; font-weight: 600; color: var(--c-text-1, #fff); }
+  .fms__news-field { display: flex; max-width: 340px; border-radius: var(--r-md, 12px); border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.12); background: rgba(0, 0, 0, 0.3); overflow: hidden; transition: border-color 0.2s ease; }
+  .fms__news-field:focus-within { border-color: var(--c-primary-light, #d4a017); }
+  .fms__news-field input { flex: 1; min-width: 0; min-height: 46px; padding: 0 0.9rem; border: 0; background: transparent; color: var(--c-text-1, #fff); font: inherit; font-size: 0.9375rem; }
+  .fms__news-field input:focus { outline: none; }
+  .fms__news-field input::placeholder { color: var(--c-text-3, #737373); }
+  .fms__news-field button { width: 46px; border: 0; background: rgb(var(--ink-rgb, 255 255 255) / 0.06); color: var(--c-text-1, #fff); cursor: pointer; transition: background 0.2s ease; }
+  .fms__news-field button:hover { background: var(--c-primary-light, #d4a017); color: var(--c-on-primary, #0a0a0a); }
+  .fms__news-field button:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: -2px; }
+  .fms__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 2rem; }
+  .fms__col-title { margin: 0 0 1rem; font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-1, #fff); }
+  .fms__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
+  .fms__col a, .fms__copy, .fms__status { font-size: 0.9rem; color: var(--c-text-2, #a3a3a3); text-decoration: none; }
+  .fms__col a { display: inline-flex; align-items: center; min-height: 36px; transition: color 0.2s ease; }
+  .fms__col a:hover { color: var(--c-text-1, #fff); }
+  .fms a:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 2px; border-radius: 4px; }
+  .fms__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.75rem; }
+  .fms__copy { margin: 0; font-size: 0.8125rem; }
+  .fms__status { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 36px; padding: 0 0.85rem; border-radius: 999px; border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08); font-size: 0.8125rem; }
+  .fms__status:hover { color: var(--c-text-1, #fff); }
+  .fms__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--chart-pos, #34c38f); box-shadow: 0 0 8px var(--chart-pos, #34c38f); }
+  .fms__socials { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem; }
+  .fms__socials a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; color: var(--c-text-2, #a3a3a3); transition: color 0.2s ease, background 0.2s ease; }
+  .fms__socials a:hover { color: var(--c-text-1, #fff); background: rgb(var(--ink-rgb, 255 255 255) / 0.06); }
+  @container (max-width: 860px) { .fms__top { grid-template-columns: 1fr; } }
+  @container (max-width: 560px) { .fms__bottom { flex-direction: column; align-items: flex-start; } }
+</style>