astro-component-kit 0.3.1 → 0.4.0

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

@@ -0,0 +1,91 @@
+---
+/**
+ * LogoWallGrid — Static grid of customer wordmarks with hairline dividers and
+ * an optional headline stat. Logos render as text wordmarks by default; pass
+ * image URLs to use real logos.
+ *
+ * @param {string} title - Small heading above the grid.
+ * @param {Array<{name: string, src?: string, href?: string}>} logos - Customers.
+ * @param {number} columns - Columns on desktop (3|4|6).
+ * @param {string} variant - Grid style (divided|cards|plain).
+ * @param {string} size - Vertical rhythm (sm|md|lg).
+ * @param {string} className - Extra CSS class.
+ */
+interface Logo { name: string; src?: string; href?: string }
+interface Props {
+  title?: string;
+  logos?: Logo[];
+  columns?: 3 | 4 | 6;
+  variant?: 'divided' | 'cards' | 'plain';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Powering 12,000+ teams, from startups to the Fortune 500',
+  logos = [
+    { name: 'Northwind' }, { name: 'Lumen' }, { name: 'Orbitly' }, { name: 'Civic' },
+    { name: 'Driftly' }, { name: 'Acme' }, { name: 'Helix' }, { name: 'Nimbus' },
+  ],
+  columns = 4,
+  variant = 'divided',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const id = `lwg-${Math.random().toString(36).slice(2, 8)}`;
+const glyphs = [
+  '<circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3.5" fill="currentColor"/>',
+  '<path d="M12 3 21 20H3z"/>',
+  '<rect x="4" y="4" width="16" height="16" rx="4"/><path d="M4 12h16"/>',
+  '<path d="M4 18 12 4l8 14M8 12h8"/>',
+];
+---
+
+<section class={`lwg lwg--${variant} lwg--${size} ${className}`} aria-labelledby={id} style={`--lwg-cols:${columns}`}>
+  <div class="lwg__inner">
+    <h2 id={id} class="lwg__title">{title}</h2>
+    <ul class="lwg__grid">
+      {logos.map((l, i) => {
+        const inner = l.src
+          ? <img src={l.src} alt={l.name} loading="lazy" decoding="async" />
+          : (
+            <span class="lwg__word">
+              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" aria-hidden="true" set:html={glyphs[i % glyphs.length]}></svg>
+              {l.name}
+            </span>
+          );
+        return (
+          <li class="lwg__cell">
+            {l.href ? <a href={l.href} class="lwg__link">{inner}</a> : inner}
+          </li>
+        );
+      })}
+    </ul>
+  </div>
+</section>
+
+<style>
+  .lwg {
+    --lwg-py: 4.5rem;
+    padding: var(--lwg-py) var(--sp-6, 1.5rem);
+    background: var(--c-bg, #050505);
+  }
+  .lwg--sm { --lwg-py: 3rem; }
+  .lwg--lg { --lwg-py: 6.5rem; }
+  .lwg__inner { max-width: 1120px; margin: 0 auto; }
+  .lwg__title { margin: 0 auto 2.5rem; max-width: 560px; text-align: center; font-size: 1rem; font-weight: 550; line-height: 1.5; color: var(--c-text-2, #a3a3a3); text-wrap: balance; }
+  .lwg__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--lwg-cols), minmax(0, 1fr)); }
+  .lwg--divided .lwg__grid { gap: 1px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: var(--r-lg, 20px); overflow: hidden; }
+  .lwg--cards .lwg__grid { gap: 0.75rem; }
+  .lwg__cell { display: grid; place-items: center; min-height: 112px; padding: 1.25rem; background: var(--c-bg, #050505); }
+  .lwg--cards .lwg__cell { 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)); }
+  .lwg--plain .lwg__cell { background: transparent; }
+  .lwg__word { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1.25rem; font-weight: 750; letter-spacing: -0.03em; color: var(--c-text-2, #a3a3a3); transition: color 0.25s ease; }
+  .lwg__cell:hover .lwg__word { color: var(--c-text-1, #fff); }
+  .lwg__cell img { max-width: 140px; max-height: 40px; object-fit: contain; filter: grayscale(1) brightness(1.6); opacity: 0.75; transition: opacity 0.25s ease, filter 0.25s ease; }
+  .lwg__cell:hover img { opacity: 1; filter: none; }
+  .lwg__link { display: grid; place-items: center; width: 100%; height: 100%; min-height: 44px; text-decoration: none; border-radius: 8px; }
+  .lwg__link:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 2px; }
+  @media (max-width: 760px) { .lwg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+</style>

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

@@ -0,0 +1,157 @@
+---
+/**
+ * PricingSinglePlan — One-plan pricing section: price card on one side,
+ * full feature checklist on the other, with a money-back guarantee note.
+ *
+ * @param {string} title - Section heading.
+ * @param {string} subtitle - Section description.
+ * @param {string} planName - Plan name.
+ * @param {string} price - Formatted price.
+ * @param {string} period - Billing period label.
+ * @param {string} originalPrice - Optional struck-through price.
+ * @param {string[]} features - Included features.
+ * @param {{label: string, href: string}} cta - CTA button.
+ * @param {string} guarantee - Reassurance note under the CTA.
+ * @param {string} variant - Card style (glow|glass|minimal).
+ * @param {string} size - Vertical rhythm (sm|md|lg).
+ * @param {string} className - Extra CSS class.
+ */
+interface Props {
+  title?: string;
+  subtitle?: string;
+  planName?: string;
+  price?: string;
+  period?: string;
+  originalPrice?: string;
+  features?: string[];
+  cta?: { label: string; href: string };
+  guarantee?: string;
+  variant?: 'glow' | 'glass' | 'minimal';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'One price. Everything included.',
+  subtitle = 'Lifetime access to every component, section and future update.',
+  planName = 'Lifetime license',
+  price = '$149',
+  period = 'one-time payment',
+  originalPrice = '$249',
+  features = [
+    '250+ components & sections',
+    '45 dependency-free SVG charts',
+    'Lifetime updates',
+    'Unlimited projects',
+    'Commercial license',
+    'Figma design kit',
+    'Private community',
+    'Priority email support',
+  ],
+  cta = { label: 'Get lifetime access', href: '#' },
+  guarantee = '30-day money-back guarantee. No questions asked.',
+  variant = 'glow',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const id = `psp-${Math.random().toString(36).slice(2, 8)}`;
+---
+
+<section class={`psp psp--${variant} psp--${size} ${className}`} aria-labelledby={id}>
+  <div class="psp__inner">
+    <header class="psp__head">
+      <h2 id={id} class="psp__title">{title}</h2>
+      <p class="psp__subtitle">{subtitle}</p>
+    </header>
+    <div class="psp__card">
+      <div class="psp__price-col">
+        <p class="psp__plan">{planName}</p>
+        <p class="psp__price">
+          {originalPrice && <s class="psp__orig"><span class="psp__sr">Was </span>{originalPrice}</s>}
+          <span class="psp__amount"><span class="psp__sr">Now </span>{price}</span>
+        </p>
+        <p class="psp__period">{period}</p>
+        <a class="psp__cta" href={cta.href}>{cta.label}</a>
+        <p class="psp__guarantee">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /><path d="m9 12 2 2 4-4" /></svg>
+          {guarantee}
+        </p>
+      </div>
+      <div class="psp__features-col">
+        <h3 class="psp__features-title">What’s included</h3>
+        <ul class="psp__features">
+          {features.map((f) => (
+            <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>{f}</li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  </div>
+</section>
+
+<style>
+  .psp {
+    --psp-py: 5.5rem;
+    padding: var(--psp-py) var(--sp-6, 1.5rem);
+    background: var(--c-bg, #050505);
+  }
+  .psp--sm { --psp-py: 3.5rem; }
+  .psp--lg { --psp-py: 7.5rem; }
+  .psp__inner { max-width: 960px; margin: 0 auto; }
+  .psp__head { text-align: center; margin-bottom: 3rem; }
+  .psp__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); }
+  .psp__subtitle { margin: 0; font-size: 1.0625rem; color: var(--c-text-2, #a3a3a3); }
+  .psp__card {
+    position: relative;
+    display: grid;
+    grid-template-columns: 1fr 1.3fr;
+    border-radius: var(--r-xl, 28px);
+    overflow: hidden;
+    border: 1px solid var(--c-border, rgba(255, 255, 255, 0.08));
+    background: rgba(255, 255, 255, 0.02);
+  }
+  .psp--glow .psp__card { border-color: rgba(212, 160, 23, 0.35); box-shadow: 0 0 0 1px rgba(212, 160, 23, 0.08), 0 40px 100px -40px rgba(212, 160, 23, 0.4); }
+  .psp--glass .psp__card { backdrop-filter: blur(16px); background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)); }
+  .psp--minimal .psp__card { background: transparent; }
+  .psp__price-col {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: clamp(2rem, 5vw, 3rem);
+    background: radial-gradient(circle at 30% 0%, var(--c-primary-glow, rgba(184, 134, 11, 0.18)), transparent 70%), rgba(255, 255, 255, 0.02);
+    border-right: 1px solid rgba(255, 255, 255, 0.06);
+  }
+  .psp__plan { margin: 0 0 1rem; font-size: 0.875rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-primary-light, #d4a017); }
+  .psp__price { display: flex; align-items: baseline; gap: 0.75rem; margin: 0; }
+  .psp__orig { font-size: 1.25rem; color: var(--c-text-3, #8a8a8a); }
+  .psp__amount { font-size: clamp(3rem, 7vw, 4rem); font-weight: 800; letter-spacing: -0.04em; color: var(--c-text-1, #fff); line-height: 1; }
+  .psp__period { margin: 0.5rem 0 2rem; font-size: 0.9rem; color: var(--c-text-2, #a3a3a3); }
+  .psp__cta {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 52px;
+    border-radius: var(--r-md, 12px);
+    background: var(--c-primary-light, #d4a017);
+    color: #0a0a0a;
+    font-weight: 700;
+    text-decoration: none;
+    transition: background 0.2s ease, transform 0.2s ease;
+  }
+  .psp__cta:hover { background: var(--c-accent, #fef3c7); color: #0a0a0a; transform: translateY(-1px); }
+  .psp__cta:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 3px; }
+  .psp__guarantee { display: flex; align-items: flex-start; gap: 0.5rem; margin: 1.25rem 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--c-text-2, #a3a3a3); }
+  .psp__guarantee svg { color: var(--chart-pos, #34c38f); flex-shrink: 0; margin-top: 1px; }
+  .psp__features-col { padding: clamp(2rem, 5vw, 3rem); }
+  .psp__features-title { margin: 0 0 1.5rem; font-size: 1rem; font-weight: 650; color: var(--c-text-1, #fff); }
+  .psp__features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; }
+  .psp__features li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9375rem; line-height: 1.4; color: var(--c-text-1, #fff); }
+  .psp__features svg { color: var(--c-primary-light, #d4a017); flex-shrink: 0; }
+  .psp__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+  @media (max-width: 760px) {
+    .psp__card { grid-template-columns: 1fr; }
+    .psp__price-col { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
+    .psp__features { grid-template-columns: 1fr; }
+  }
+</style>

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

@@ -0,0 +1,171 @@
+---
+/**
+ * PricingToggleCards — Three pricing tiers with an accessible monthly/yearly
+ * switch (role="switch"), savings badge and a highlighted recommended plan.
+ *
+ * @param {string} title - Section heading.
+ * @param {string} subtitle - Section description.
+ * @param {Array<{name: string, monthly: number, yearly: number, description: string, features: string[], cta: string, href: string, featured?: boolean}>} plans - Tiers.
+ * @param {string} currency - Currency symbol.
+ * @param {string} savingsLabel - Badge next to the yearly option.
+ * @param {string} variant - Card style (glass|solid|outline).
+ * @param {string} size - Vertical rhythm (sm|md|lg).
+ * @param {string} className - Extra CSS class.
+ */
+interface Plan { name: string; monthly: number; yearly: number; description: string; features: string[]; cta: string; href: string; featured?: boolean }
+interface Props {
+  title?: string;
+  subtitle?: string;
+  plans?: Plan[];
+  currency?: string;
+  savingsLabel?: string;
+  variant?: 'glass' | 'solid' | 'outline';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Simple pricing that scales with you',
+  subtitle = 'Start free. Upgrade when your team grows. Cancel anytime.',
+  plans = [
+    { name: 'Starter', monthly: 0, yearly: 0, description: 'For side projects and prototypes.', features: ['All components', 'Community support', '1 project'], cta: 'Get started', href: '#' },
+    { name: 'Pro', monthly: 24, yearly: 19, description: 'For professionals shipping client work.', features: ['Everything in Starter', 'Premium sections', 'Unlimited projects', 'Priority support'], cta: 'Start 14-day trial', href: '#', featured: true },
+    { name: 'Team', monthly: 79, yearly: 63, description: 'For agencies and product teams.', features: ['Everything in Pro', '10 seats included', 'Figma kit', 'Private Discord'], cta: 'Contact sales', href: '#' },
+  ],
+  currency = '$',
+  savingsLabel = 'Save 20%',
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const id = `ptc-${Math.random().toString(36).slice(2, 8)}`;
+---
+
+<section class={`ptc ptc--${variant} ptc--${size} ${className}`} aria-labelledby={id} data-ptc data-period="monthly">
+  <div class="ptc__inner">
+    <header class="ptc__head">
+      <h2 id={id} class="ptc__title">{title}</h2>
+      <p class="ptc__subtitle">{subtitle}</p>
+      <div class="ptc__toggle">
+        <span class="ptc__period" id={`${id}-m`}>Monthly</span>
+        <button type="button" class="ptc__switch" role="switch" aria-checked="false" aria-labelledby={`${id}-y`}>
+          <span class="ptc__knob" aria-hidden="true"></span>
+        </button>
+        <span class="ptc__period" id={`${id}-y`}>Yearly <span class="ptc__save">{savingsLabel}</span></span>
+      </div>
+    </header>
+
+    <ul class="ptc__grid">
+      {plans.map((p) => (
+        <li class={`ptc__card ${p.featured ? 'ptc__card--featured' : ''}`}>
+          {p.featured && <span class="ptc__ribbon">Most popular</span>}
+          <h3 class="ptc__name">{p.name}</h3>
+          <p class="ptc__desc">{p.description}</p>
+          <p class="ptc__price">
+            <span class="ptc__amount" data-monthly={`${currency}${p.monthly}`} data-yearly={`${currency}${p.yearly}`}>{currency}{p.monthly}</span>
+            <span class="ptc__per">/ month<span class="ptc__billed" data-yearly-only>, billed yearly</span></span>
+          </p>
+          <a class="ptc__cta" href={p.href}>{p.cta}</a>
+          <ul class="ptc__features">
+            {p.features.map((f) => (
+              <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>{f}</li>
+            ))}
+          </ul>
+        </li>
+      ))}
+    </ul>
+    <p class="ptc__live" role="status" aria-live="polite"></p>
+  </div>
+</section>
+
+<script>
+  document.querySelectorAll<HTMLElement>('[data-ptc]').forEach((root) => {
+    const sw = root.querySelector<HTMLButtonElement>('.ptc__switch');
+    const live = root.querySelector('.ptc__live');
+    sw?.addEventListener('click', () => {
+      const yearly = sw.getAttribute('aria-checked') !== 'true';
+      sw.setAttribute('aria-checked', String(yearly));
+      root.dataset.period = yearly ? 'yearly' : 'monthly';
+      root.querySelectorAll<HTMLElement>('.ptc__amount').forEach((el) => {
+        el.textContent = (yearly ? el.dataset.yearly : el.dataset.monthly) || '';
+      });
+      if (live) live.textContent = yearly ? 'Showing yearly prices' : 'Showing monthly prices';
+    });
+  });
+</script>
+
+<style>
+  .ptc {
+    --ptc-py: 5.5rem;
+    padding: var(--ptc-py) var(--sp-6, 1.5rem);
+    background: radial-gradient(ellipse 60% 40% at 50% 0%, var(--c-primary-glow, rgba(184, 134, 11, 0.1)), transparent 70%), var(--c-bg, #050505);
+  }
+  .ptc--sm { --ptc-py: 3.5rem; }
+  .ptc--lg { --ptc-py: 7.5rem; }
+  .ptc__inner { max-width: 1120px; margin: 0 auto; }
+  .ptc__head { text-align: center; margin-bottom: 3rem; }
+  .ptc__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); }
+  .ptc__subtitle { margin: 0 0 2rem; font-size: 1.0625rem; color: var(--c-text-2, #a3a3a3); }
+  .ptc__toggle { display: inline-flex; align-items: center; gap: 0.85rem; font-size: 0.9375rem; color: var(--c-text-2, #a3a3a3); }
+  .ptc__switch {
+    position: relative;
+    width: 52px;
+    height: 30px;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.08);
+    cursor: pointer;
+    transition: background 0.25s ease;
+  }
+  .ptc__switch::after { content: ''; position: absolute; inset: -8px; }
+  .ptc__switch[aria-checked='true'] { background: var(--c-primary, #b8860b); border-color: transparent; }
+  .ptc__switch:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 3px; }
+  .ptc__knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
+  .ptc__switch[aria-checked='true'] .ptc__knob { transform: translateX(22px); }
+  [data-period='monthly'] .ptc__period:first-child,
+  [data-period='yearly'] .ptc__period:last-child { color: var(--c-text-1, #fff); }
+  .ptc__save { margin-left: 0.35rem; padding: 0.15rem 0.5rem; border-radius: 999px; background: rgba(52, 195, 143, 0.15); color: #7ee2b8; font-size: 0.75rem; font-weight: 650; }
+
+  .ptc__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; align-items: stretch; }
+  .ptc__card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    padding: 2rem;
+    border-radius: var(--r-xl, 24px);
+  }
+  .ptc--glass .ptc__card { background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)); border: 1px solid var(--c-border, rgba(255, 255, 255, 0.07)); backdrop-filter: blur(12px); }
+  .ptc--solid .ptc__card { background: var(--c-bg-2, #111); border: 1px solid rgba(255, 255, 255, 0.06); }
+  .ptc--outline .ptc__card { border: 1px solid rgba(255, 255, 255, 0.12); }
+  .ptc__card--featured { border-color: rgba(212, 160, 23, 0.55) !important; box-shadow: 0 30px 80px -30px rgba(212, 160, 23, 0.35); }
+  .ptc__ribbon { position: absolute; top: -12px; left: 2rem; padding: 0.25rem 0.75rem; border-radius: 999px; background: var(--c-primary-light, #d4a017); color: #0a0a0a; font-size: 0.75rem; font-weight: 700; }
+  .ptc__name { margin: 0 0 0.35rem; font-size: 1.125rem; font-weight: 650; color: var(--c-text-1, #fff); }
+  .ptc__desc { margin: 0 0 1.5rem; font-size: 0.9rem; color: var(--c-text-2, #a3a3a3); }
+  .ptc__price { display: flex; align-items: baseline; gap: 0.4rem; margin: 0 0 1.5rem; }
+  .ptc__amount { font-size: 3rem; font-weight: 800; letter-spacing: -0.04em; color: var(--c-text-1, #fff); font-variant-numeric: tabular-nums; line-height: 1; }
+  .ptc__per { font-size: 0.875rem; color: var(--c-text-3, #8a8a8a); }
+  .ptc__billed { display: none; }
+  [data-period='yearly'] .ptc__billed { display: inline; }
+  .ptc__cta {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 48px;
+    border-radius: var(--r-md, 12px);
+    border: 1px solid rgba(255, 255, 255, 0.14);
+    color: var(--c-text-1, #fff);
+    font-weight: 650;
+    text-decoration: none;
+    transition: background 0.2s ease, border-color 0.2s ease;
+  }
+  .ptc__cta:hover { border-color: rgba(255, 255, 255, 0.3); color: var(--c-text-1, #fff); }
+  .ptc__card--featured .ptc__cta { background: var(--c-primary-light, #d4a017); color: #0a0a0a; border-color: transparent; }
+  .ptc__card--featured .ptc__cta:hover { background: var(--c-accent, #fef3c7); color: #0a0a0a; }
+  .ptc__cta:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 3px; }
+  .ptc__features { list-style: none; margin: 1.75rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid rgba(255, 255, 255, 0.07); display: grid; gap: 0.7rem; }
+  .ptc__features li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: var(--c-text-1, #fff); }
+  .ptc__features svg { color: var(--c-primary-light, #d4a017); flex-shrink: 0; }
+  .ptc__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
+  @media (prefers-reduced-motion: reduce) { .ptc__knob, .ptc__switch { transition: none; } }
+</style>

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

@@ -0,0 +1,122 @@
+---
+/**
+ * StatsCounterBand — Full-width band of headline numbers that count up when
+ * scrolled into view. Final values are in the HTML, so no-JS and screen
+ * readers always get the real number; motion respects reduced-motion.
+ *
+ * @param {string} title - Optional heading (visually hidden when `hideTitle`).
+ * @param {boolean} hideTitle - Visually hide the heading.
+ * @param {Array<{value: number, prefix?: string, suffix?: string, label: string, decimals?: number}>} stats - Numbers.
+ * @param {string} variant - Band style (divided|cards|plain).
+ * @param {string} size - Vertical rhythm (sm|md|lg).
+ * @param {string} className - Extra CSS class.
+ */
+interface Stat { value: number; prefix?: string; suffix?: string; label: string; decimals?: number }
+interface Props {
+  title?: string;
+  hideTitle?: boolean;
+  stats?: Stat[];
+  variant?: 'divided' | 'cards' | 'plain';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Trusted at scale',
+  hideTitle = false,
+  stats = [
+    { value: 12000, suffix: '+', label: 'Developers using the kit' },
+    { value: 250, suffix: '+', label: 'Components & sections' },
+    { value: 99.98, suffix: '%', label: 'CDN uptime last 12 months', decimals: 2 },
+    { value: 48, prefix: '<', suffix: 'ms', label: 'Median time to first byte' },
+  ],
+  variant = 'divided',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const id = `scb-${Math.random().toString(36).slice(2, 8)}`;
+const fmt = (s: Stat) => `${s.prefix ?? ''}${s.value.toLocaleString('en-US', { minimumFractionDigits: s.decimals ?? 0, maximumFractionDigits: s.decimals ?? 0 })}${s.suffix ?? ''}`;
+---
+
+<section class={`scb scb--${variant} scb--${size} ${className}`} aria-labelledby={id}>
+  <div class="scb__inner">
+    <h2 id={id} class:list={['scb__title', { 'scb__sr': hideTitle }]}>{title}</h2>
+    <dl class="scb__grid">
+      {stats.map((s) => (
+        <div class="scb__item">
+          <dt class="scb__label">{s.label}</dt>
+          <dd class="scb__value" data-count={s.value} data-decimals={s.decimals ?? 0} data-prefix={s.prefix ?? ''} data-suffix={s.suffix ?? ''}>{fmt(s)}</dd>
+        </div>
+      ))}
+    </dl>
+  </div>
+</section>
+
+<script>
+  const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  const els = document.querySelectorAll<HTMLElement>('.scb__value[data-count]');
+  if (!reduce && 'IntersectionObserver' in window) {
+    const io = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (!entry.isIntersecting) return;
+        const el = entry.target as HTMLElement;
+        io.unobserve(el);
+        const target = Number(el.dataset.count);
+        const dec = Number(el.dataset.decimals);
+        const pre = el.dataset.prefix || '';
+        const suf = el.dataset.suffix || '';
+        const final = el.textContent;
+        el.setAttribute('aria-label', final || '');
+        const start = performance.now();
+        const dur = 1400;
+        const tick = (now: number) => {
+          const t = Math.min(1, (now - start) / dur);
+          const eased = 1 - Math.pow(1 - t, 3);
+          const v = target * eased;
+          el.textContent = `${pre}${v.toLocaleString('en-US', { minimumFractionDigits: dec, maximumFractionDigits: dec })}${suf}`;
+          if (t < 1) requestAnimationFrame(tick);
+          else el.textContent = final;
+        };
+        requestAnimationFrame(tick);
+      });
+    }, { threshold: 0.4 });
+    els.forEach((el) => io.observe(el));
+  }
+</script>
+
+<style>
+  .scb {
+    --scb-py: 4.5rem;
+    padding: var(--scb-py) var(--sp-6, 1.5rem);
+    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.02) 50%, transparent), var(--c-bg, #050505);
+  }
+  .scb--sm { --scb-py: 3rem; }
+  .scb--lg { --scb-py: 6.5rem; }
+  .scb__inner { max-width: 1180px; margin: 0 auto; }
+  .scb__title { margin: 0 0 2.5rem; text-align: center; font-size: 0.875rem; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-2, #a3a3a3); }
+  .scb__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
+  .scb__grid { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
+  .scb__item { display: flex; flex-direction: column-reverse; align-items: center; gap: 0.5rem; padding: 1.5rem 1rem; text-align: center; }
+  .scb--divided .scb__item + .scb__item { border-left: 1px solid rgba(255, 255, 255, 0.08); }
+  .scb--cards .scb__grid { gap: 1rem; }
+  .scb--cards .scb__item { border-radius: var(--r-lg, 20px); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--c-border, rgba(255, 255, 255, 0.07)); }
+  .scb__value {
+    margin: 0;
+    font-size: clamp(2.25rem, 5vw, 3.25rem);
+    font-weight: 800;
+    letter-spacing: -0.04em;
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
+    background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0.65));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+  .scb__label { font-size: 0.9375rem; color: var(--c-text-2, #a3a3a3); max-width: 220px; }
+  @media (max-width: 640px) {
+    .scb__grid { grid-template-columns: 1fr 1fr; }
+    .scb--divided .scb__item + .scb__item { border-left: 0; }
+    .scb--divided .scb__item:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, 0.08); }
+  }
+</style>

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

@@ -0,0 +1,83 @@
+---
+/**
+ * StatsDashboardSection — Complete analytics section: heading, KPI tile row and
+ * two charts (trend + ranked breakdown) composed from the kit's SVG charts.
+ *
+ * @param {string} eyebrow - Small label above the heading.
+ * @param {string} title - Section heading.
+ * @param {string} subtitle - Section description.
+ * @param {Array<{label: string, value: string, change: number, trend?: number[], invert?: boolean}>} kpis - KPI tiles.
+ * @param {string} variant - Chart card style (glass|solid|ghost).
+ * @param {string} size - Vertical rhythm (sm|md|lg).
+ * @param {string} className - Extra CSS class.
+ */
+import KpiStatTile from '../charts/KpiStatTile.astro';
+import StackedAreaChart from '../charts/StackedAreaChart.astro';
+import HorizontalBarChart from '../charts/HorizontalBarChart.astro';
+
+interface Kpi { label: string; value: string; change: number; trend?: number[]; invert?: boolean }
+interface Props {
+  eyebrow?: string;
+  title?: string;
+  subtitle?: string;
+  kpis?: Kpi[];
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  eyebrow = 'Live metrics',
+  title = 'Growth you can see',
+  subtitle = 'Real numbers from teams running on the kit, updated every build.',
+  kpis = [
+    { label: 'Monthly visitors', value: '1.2M', change: 18.4, trend: [60, 64, 70, 72, 80, 88, 95, 104, 120] },
+    { label: 'Conversion rate', value: '4.6%', change: 0.9, trend: [3.4, 3.6, 3.7, 3.9, 4, 4.2, 4.3, 4.5, 4.6] },
+    { label: 'Avg. load time', value: '0.8s', change: -22, invert: true, trend: [1.3, 1.25, 1.1, 1.05, 1, 0.95, 0.9, 0.85, 0.8] },
+    { label: 'Bounce rate', value: '31%', change: -4.2, invert: true, trend: [38, 37, 36, 35, 34, 33, 33, 32, 31] },
+  ],
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const id = `sds-${Math.random().toString(36).slice(2, 8)}`;
+---
+
+<section class={`sds sds--${size} ${className}`} aria-labelledby={id}>
+  <div class="sds__inner">
+    <header class="sds__head">
+      <p class="sds__eyebrow"><span class="sds__live" aria-hidden="true"></span>{eyebrow}</p>
+      <h2 id={id} class="sds__title">{title}</h2>
+      <p class="sds__subtitle">{subtitle}</p>
+    </header>
+    <div class="sds__kpis">
+      {kpis.map((k) => (
+        <KpiStatTile label={k.label} value={k.value} change={k.change} trend={k.trend} invert={k.invert} period="vs last quarter" variant={variant} size="sm" />
+      ))}
+    </div>
+    <div class="sds__charts">
+      <StackedAreaChart title="Sessions by channel" subtitle="Thousands per month" variant={variant} />
+      <HorizontalBarChart title="Top landing pages" subtitle="Visitors, last 30 days" variant={variant} />
+    </div>
+  </div>
+</section>
+
+<style>
+  .sds {
+    --sds-py: 5.5rem;
+    padding: var(--sds-py) var(--sp-6, 1.5rem);
+    background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(57, 135, 229, 0.08), transparent 70%), var(--c-bg, #050505);
+  }
+  .sds--sm { --sds-py: 3.5rem; }
+  .sds--lg { --sds-py: 7.5rem; }
+  .sds__inner { max-width: 1180px; margin: 0 auto; display: grid; gap: 1.25rem; }
+  .sds__head { text-align: center; max-width: 640px; margin: 0 auto 1.75rem; }
+  .sds__eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem; font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-2, #a3a3a3); }
+  .sds__live { width: 8px; height: 8px; border-radius: 50%; background: var(--chart-pos, #34c38f); box-shadow: 0 0 10px var(--chart-pos, #34c38f); }
+  .sds__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); }
+  .sds__subtitle { margin: 0; font-size: 1.0625rem; color: var(--c-text-2, #a3a3a3); }
+  .sds__kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.25rem; }
+  .sds__charts { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.25rem; }
+  @media (max-width: 900px) { .sds__charts { grid-template-columns: 1fr; } }
+</style>