astro-component-kit 0.3.0 → 0.4.0

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

@@ -0,0 +1,119 @@
+---
+/**
+ * FaqTwoColumn — FAQ section with a sticky intro column (heading + support CTA)
+ * and native <details> accordions on the right. Works without JavaScript.
+ *
+ * @param {string} title - Section heading.
+ * @param {string} subtitle - Intro copy.
+ * @param {Array<{q: string, a: string}>} items - Questions and answers.
+ * @param {{label: string, href: string}} support - Support link.
+ * @param {boolean} exclusive - Only one item open at a time (uses the `name` attribute).
+ * @param {string} variant - Item style (bordered|cards|plain).
+ * @param {string} size - Vertical rhythm (sm|md|lg).
+ * @param {string} className - Extra CSS class.
+ */
+interface Props {
+  title?: string;
+  subtitle?: string;
+  items?: Array<{ q: string; a: string }>;
+  support?: { label: string; href: string };
+  exclusive?: boolean;
+  variant?: 'bordered' | 'cards' | 'plain';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Frequently asked questions',
+  subtitle = 'Everything you need to know about the kit. Can’t find an answer? Our team replies within a day.',
+  items = [
+    { q: 'Do I need to install a package?', a: 'No. Every component is a standalone .astro file. Copy it into your project, or install the package if you prefer imports.' },
+    { q: 'Do the charts need a JavaScript library?', a: 'No. The SVG charts render at build time. A tiny shared script only powers hover tooltips, and every chart includes a data table fallback.' },
+    { q: 'Is it accessible?', a: 'Components target WCAG 2.2 AA: semantic HTML, visible focus states, keyboard support and contrast of at least 4.5:1 for text.' },
+    { q: 'Can I use it in commercial projects?', a: 'Yes. The kit is MIT licensed. Use it for client work, SaaS products and anything else.' },
+    { q: 'How do I change the colors?', a: 'Edit the CSS custom properties in global.css. Every component reads from the same tokens, so one change updates everything.' },
+  ],
+  support = { label: 'Contact support', href: '#' },
+  exclusive = true,
+  variant = 'bordered',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const uid = Math.random().toString(36).slice(2, 8);
+const id = `ftc-${uid}`;
+---
+
+<section class={`ftc ftc--${variant} ftc--${size} ${className}`} aria-labelledby={id}>
+  <div class="ftc__inner">
+    <div class="ftc__intro">
+      <h2 id={id} class="ftc__title">{title}</h2>
+      <p class="ftc__subtitle">{subtitle}</p>
+      {support && (
+        <a class="ftc__support" href={support.href}>
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" /></svg>
+          {support.label}
+        </a>
+      )}
+    </div>
+    <div class="ftc__list">
+      {items.map((it, i) => (
+        <details class="ftc__item" name={exclusive ? `faq-${uid}` : undefined} open={i === 0}>
+          <summary class="ftc__q">
+            <span>{it.q}</span>
+            <svg class="ftc__chev" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14" /></svg>
+          </summary>
+          <div class="ftc__a"><p>{it.a}</p></div>
+        </details>
+      ))}
+    </div>
+  </div>
+</section>
+
+<style>
+  .ftc {
+    --ftc-py: 5.5rem;
+    padding: var(--ftc-py) var(--sp-6, 1.5rem);
+    background: var(--c-bg, #050505);
+  }
+  .ftc--sm { --ftc-py: 3.5rem; }
+  .ftc--lg { --ftc-py: 7.5rem; }
+  .ftc__inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
+  .ftc__intro { position: sticky; top: 6rem; }
+  .ftc__title { margin: 0 0 1rem; font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; color: var(--c-text-1, #fff); }
+  .ftc__subtitle { margin: 0 0 1.75rem; font-size: 1rem; line-height: 1.65; color: var(--c-text-2, #a3a3a3); }
+  .ftc__support { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 46px; padding: 0 1.25rem; border-radius: var(--r-md, 12px); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--c-text-1, #fff); font-weight: 600; text-decoration: none; transition: border-color 0.2s ease; }
+  .ftc__support:hover { border-color: rgba(255, 255, 255, 0.32); color: var(--c-text-1, #fff); }
+  .ftc__support:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 2px; }
+  .ftc__list { display: grid; }
+  .ftc--cards .ftc__list { gap: 0.75rem; }
+  .ftc--bordered .ftc__item { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
+  .ftc--bordered .ftc__item:first-child { border-top: 1px solid rgba(255, 255, 255, 0.08); }
+  .ftc--cards .ftc__item { border-radius: var(--r-md, 14px); background: rgba(255, 255, 255, 0.025); border: 1px solid var(--c-border, rgba(255, 255, 255, 0.07)); padding-inline: 1.25rem; }
+  .ftc__q {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+    min-height: 64px;
+    padding: 1rem 0;
+    cursor: pointer;
+    list-style: none;
+    font-size: 1.0625rem;
+    font-weight: 600;
+    color: var(--c-text-1, #fff);
+  }
+  .ftc__q::-webkit-details-marker { display: none; }
+  .ftc__q:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 2px; border-radius: 6px; }
+  .ftc__chev { flex-shrink: 0; color: var(--c-text-2, #a3a3a3); transition: transform 0.25s ease; }
+  .ftc__item[open] .ftc__chev { transform: rotate(45deg); color: var(--c-primary-light, #d4a017); }
+  .ftc__a { padding: 0 2.5rem 1.25rem 0; }
+  .ftc__a p { margin: 0; font-size: 0.9875rem; line-height: 1.7; color: var(--c-text-2, #a3a3a3); }
+  .ftc__item[open] .ftc__a { animation: ftc-in 0.25s ease; }
+  @keyframes ftc-in { from { opacity: 0; transform: translateY(-4px); } }
+  @media (max-width: 820px) {
+    .ftc__inner { grid-template-columns: 1fr; }
+    .ftc__intro { position: static; }
+  }
+  @media (prefers-reduced-motion: reduce) { .ftc__chev { transition: none; } .ftc__item[open] .ftc__a { animation: none; } }
+</style>

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

@@ -0,0 +1,190 @@
+---
+/**
+ * FeatureAlternatingRows — Zig-zag feature section: text and a visual alternate
+ * sides on each row. Visuals are pure-CSS illustrations (no images to load).
+ *
+ * @param {string} title - Section heading (visually hidden if empty-styled).
+ * @param {Array<{eyebrow: string, title: string, text: string, bullets: string[], visual: 'chart'|'code'|'stack'}>} rows - Feature rows.
+ * @param {boolean} startReversed - Put the visual on the left in the first row.
+ * @param {string} variant - Visual frame (glass|outline|plain).
+ * @param {string} size - Vertical rhythm (sm|md|lg).
+ * @param {string} className - Extra CSS class.
+ */
+interface Row { eyebrow: string; title: string; text: string; bullets: string[]; visual: 'chart' | 'code' | 'stack' }
+interface Props {
+  title?: string;
+  rows?: Row[];
+  startReversed?: boolean;
+  variant?: 'glass' | 'outline' | 'plain';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'How the kit helps your team',
+  rows = [
+    {
+      eyebrow: 'Insights',
+      title: 'Dashboards your stakeholders actually read',
+      text: 'Drop-in SVG charts with tooltips, legends and table fallbacks. No chart library to configure.',
+      bullets: ['45 chart types', 'Colorblind-safe palette', 'Keyboard-accessible marks'],
+      visual: 'chart',
+    },
+    {
+      eyebrow: 'Developer experience',
+      title: 'Typed props, sensible defaults',
+      text: 'Every component ships a TypeScript Props interface and renders beautifully with zero configuration.',
+      bullets: ['Strict TypeScript', 'JSDoc on every prop', 'Copy-paste friendly'],
+      visual: 'code',
+    },
+    {
+      eyebrow: 'Design system',
+      title: 'One token file to re-theme everything',
+      text: 'Swap colors, radii and spacing in global.css and every section updates consistently.',
+      bullets: ['CSS custom properties', 'Dark-first', '8pt spacing grid'],
+      visual: 'stack',
+    },
+  ],
+  startReversed = false,
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const id = `far-${Math.random().toString(36).slice(2, 8)}`;
+const bars = [38, 62, 48, 80, 66, 92, 74];
+---
+
+<section class={`far far--${variant} far--${size} ${className}`} aria-labelledby={id}>
+  <h2 id={id} class="far__sr">{title}</h2>
+  <div class="far__inner">
+    {rows.map((r, i) => {
+      const reversed = startReversed ? i % 2 === 0 : i % 2 === 1;
+      return (
+        <article class={`far__row ${reversed ? 'far__row--rev' : ''}`}>
+          <div class="far__copy">
+            <p class="far__eyebrow">{r.eyebrow}</p>
+            <h3 class="far__title">{r.title}</h3>
+            <p class="far__text">{r.text}</p>
+            <ul class="far__bullets">
+              {r.bullets.map((b) => (
+                <li>
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5" /></svg>
+                  {b}
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div class="far__visual" aria-hidden="true">
+            {r.visual === 'chart' && (
+              <div class="far__chart">
+                {bars.map((h, bi) => <span style={`--h:${h}%; --d:${bi * 80}ms`}></span>)}
+              </div>
+            )}
+            {r.visual === 'code' && (
+              <pre class="far__code"><code><span class="k">interface</span> <span class="t">Props</span> {'{'}
+  title?: <span class="t">string</span>;
+  variant?: <span class="s">'glass'</span> | <span class="s">'solid'</span>;
+  size?: <span class="s">'sm'</span> | <span class="s">'md'</span> | <span class="s">'lg'</span>;
+{'}'}
+
+<span class="c">// Sensible defaults, zero config</span>
+&lt;<span class="t">LineChart</span> /&gt;</code></pre>
+            )}
+            {r.visual === 'stack' && (
+              <div class="far__stack">
+                <span style="--c:var(--chart-1, #3987e5)">--chart-1</span>
+                <span style="--c:var(--c-primary-light, #d4a017)">--c-primary</span>
+                <span style="--c:var(--chart-3, #199e70)">--chart-pos</span>
+                <span style="--c:var(--chart-7, #9085e9)">--r-lg: 20px</span>
+              </div>
+            )}
+          </div>
+        </article>
+      );
+    })}
+  </div>
+</section>
+
+<style>
+  .far {
+    --far-py: 5.5rem;
+    padding: var(--far-py) var(--sp-6, 1.5rem);
+    background: var(--c-bg, #050505);
+  }
+  .far--sm { --far-py: 3.5rem; }
+  .far--lg { --far-py: 7.5rem; }
+  .far__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+  .far__inner { max-width: 1120px; margin: 0 auto; display: grid; gap: clamp(4rem, 8vw, 7rem); }
+  .far__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
+  .far__row--rev .far__copy { order: 2; }
+  .far__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); }
+  .far__title { margin: 0 0 1rem; font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 750; letter-spacing: -0.025em; line-height: 1.15; color: var(--c-text-1, #fff); }
+  .far__text { margin: 0 0 1.5rem; font-size: 1.0625rem; line-height: 1.65; color: var(--c-text-2, #a3a3a3); }
+  .far__bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
+  .far__bullets li { display: flex; align-items: center; gap: 0.6rem; color: var(--c-text-1, #fff); font-size: 0.9375rem; }
+  .far__bullets svg { color: var(--chart-pos, #34c38f); flex-shrink: 0; }
+
+  .far__visual {
+    aspect-ratio: 4 / 3;
+    border-radius: var(--r-xl, 24px);
+    display: grid;
+    place-items: center;
+    padding: 2rem;
+    overflow: hidden;
+  }
+  .far--glass .far__visual {
+    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.06), transparent 60%), rgba(255, 255, 255, 0.02);
+    border: 1px solid var(--c-border, rgba(255, 255, 255, 0.07));
+  }
+  .far--outline .far__visual { border: 1px dashed rgba(255, 255, 255, 0.14); }
+  .far__chart { display: flex; align-items: flex-end; gap: 10px; width: 100%; height: 70%; }
+  .far__chart span {
+    flex: 1;
+    height: var(--h);
+    border-radius: 6px 6px 0 0;
+    background: linear-gradient(to top, rgba(57, 135, 229, 0.35), var(--chart-1, #3987e5));
+    transform-origin: bottom;
+    animation: far-grow 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
+    animation-delay: var(--d);
+  }
+  @keyframes far-grow { from { transform: scaleY(0); } }
+  .far__code {
+    margin: 0;
+    width: 100%;
+    padding: 1.5rem;
+    border-radius: var(--r-md, 12px);
+    background: #0b0b0d;
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    font-family: var(--font-mono, monospace);
+    font-size: 0.8125rem;
+    line-height: 1.75;
+    color: var(--c-text-2, #c4c4c4);
+    overflow-x: auto;
+  }
+  .far__code .k { color: #c792ea; }
+  .far__code .t { color: #82aaff; }
+  .far__code .s { color: #c3e88d; }
+  .far__code .c { color: #6b7280; }
+  .far__stack { display: grid; gap: 0.75rem; width: 100%; max-width: 320px; }
+  .far__stack span {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.85rem 1rem;
+    border-radius: var(--r-md, 12px);
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.07);
+    font-family: var(--font-mono, monospace);
+    font-size: 0.8125rem;
+    color: var(--c-text-1, #fff);
+  }
+  .far__stack span::before { content: ''; width: 20px; height: 20px; border-radius: 6px; background: var(--c); }
+  .far__stack span:nth-child(2) { margin-left: 1.5rem; }
+  .far__stack span:nth-child(3) { margin-left: 3rem; }
+  @media (max-width: 820px) {
+    .far__row { grid-template-columns: 1fr; }
+    .far__row--rev .far__copy { order: 0; }
+  }
+  @media (prefers-reduced-motion: reduce) { .far__chart span { animation: none; } }
+</style>

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, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
+    border: 1px solid var(--c-border, rgba(255, 255, 255, 0.07));
+  }
+  .fig--bordered .fig__card { border: 1px solid rgba(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: rgba(212, 160, 23, 0.35);
+    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, rgba(184, 134, 11, 0.12));
+    border: 1px solid rgba(212, 160, 23, 0.25);
+    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,180 @@
+---
+/**
+ * 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}`;
+---
+
+<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>
+
+<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>
+  .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: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); }
+  .fts--pills .fts__tab[aria-selected='true'] { background: var(--c-text-1, #fff); color: #0a0a0a; }
+  .fts--underline .fts__list { border-bottom: 1px solid rgba(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: rgba(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, rgba(184, 134, 11, 0.12)); }
+
+  .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, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01));
+    border: 1px solid var(--c-border, rgba(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, rgba(184, 134, 11, 0.16)), transparent 70%), rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(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); }
+  @media (max-width: 760px) { .fts__panel { grid-template-columns: 1fr; } }
+  @media (prefers-reduced-motion: reduce) { .fts__panel { animation: none; } }
+</style>