astro-component-kit 0.3.0 → 0.4.0

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

@@ -0,0 +1,165 @@
+---
+/**
+ * TestimonialCarousel — Scroll-snap testimonial carousel with previous/next
+ * buttons, keyboard support and no autoplay (respects user control).
+ *
+ * @param {string} title - Section heading.
+ * @param {Array<{quote: string, name: string, role: string, rating?: number}>} items - Testimonials.
+ * @param {string} variant - Card style (glass|solid|quote).
+ * @param {string} size - Vertical rhythm (sm|md|lg).
+ * @param {string} className - Extra CSS class.
+ */
+interface Item { quote: string; name: string; role: string; rating?: number }
+interface Props {
+  title?: string;
+  items?: Item[];
+  variant?: 'glass' | 'solid' | 'quote';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Loved by builders worldwide',
+  items = [
+    { quote: 'We rebuilt our marketing site in two days. The sections are gorgeous and Lighthouse went straight to 100.', name: 'Alicia Gómez', role: 'Head of Growth, Northwind', rating: 5 },
+    { quote: 'The SVG charts replaced a 200 kB library in our dashboard. Same features, zero runtime.', name: 'Marcus Lee', role: 'Staff Engineer, Lumen', rating: 5 },
+    { quote: 'Finally a component kit that takes accessibility seriously. Our audit came back clean.', name: 'Priya Natarajan', role: 'Accessibility Lead, Civic', rating: 5 },
+    { quote: 'Copy, paste, tweak tokens, done. It feels like a design system we built ourselves.', name: 'Tom Becker', role: 'Founder, Driftly', rating: 4 },
+    { quote: 'Our agency ships every client landing page on top of this kit now.', name: 'Sofía Ruiz', role: 'Creative Director, Studio Alba', rating: 5 },
+  ],
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const id = `tc-${Math.random().toString(36).slice(2, 8)}`;
+const initials = (n: string) => n.split(' ').map((p) => p[0]).slice(0, 2).join('');
+const hues = ['var(--chart-1, #3987e5)', 'var(--chart-2, #d95926)', 'var(--chart-3, #199e70)', 'var(--chart-5, #d55181)', 'var(--chart-7, #9085e9)'];
+---
+
+<section class={`tc tc--${variant} tc--${size} ${className}`} aria-labelledby={id} aria-roledescription="carousel" data-tc>
+  <div class="tc__inner">
+    <header class="tc__head">
+      <h2 id={id} class="tc__title">{title}</h2>
+      <div class="tc__controls">
+        <button type="button" class="tc__btn" data-dir="-1" aria-label="Previous testimonials">
+          <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="M15 18l-6-6 6-6" /></svg>
+        </button>
+        <button type="button" class="tc__btn" data-dir="1" aria-label="Next testimonials">
+          <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="M9 18l6-6-6-6" /></svg>
+        </button>
+      </div>
+    </header>
+
+    <ul class="tc__track" tabindex="0" aria-label="Testimonials, scroll horizontally">
+      {items.map((t, i) => (
+        <li class="tc__slide" aria-roledescription="slide" aria-label={`${i + 1} of ${items.length}`}>
+          <figure class="tc__card">
+            {t.rating && (
+              <div class="tc__stars" role="img" aria-label={`${t.rating} out of 5 stars`}>
+                {Array.from({ length: 5 }, (_, s) => (
+                  <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" class={(t.rating ?? 0) > s ? 'is-on' : ''}><path d="m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z" fill="currentColor" /></svg>
+                ))}
+              </div>
+            )}
+            <blockquote class="tc__quote"><p>“{t.quote}”</p></blockquote>
+            <figcaption class="tc__author">
+              <span class="tc__avatar" style={`background:${hues[i % hues.length]}`} aria-hidden="true">{initials(t.name)}</span>
+              <span><strong>{t.name}</strong><span class="tc__role">{t.role}</span></span>
+            </figcaption>
+          </figure>
+        </li>
+      ))}
+    </ul>
+  </div>
+</section>
+
+<script>
+  document.querySelectorAll<HTMLElement>('[data-tc]').forEach((root) => {
+    const track = root.querySelector<HTMLElement>('.tc__track');
+    const btns = root.querySelectorAll<HTMLButtonElement>('.tc__btn');
+    if (!track) return;
+    const update = () => {
+      const max = track.scrollWidth - track.clientWidth - 2;
+      btns[0].disabled = track.scrollLeft <= 2;
+      btns[1].disabled = track.scrollLeft >= max;
+    };
+    const step = () => (track.querySelector<HTMLElement>('.tc__slide')?.offsetWidth ?? 300) + 20;
+    btns.forEach((b) => b.addEventListener('click', () => {
+      const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+      track.scrollBy({ left: Number(b.dataset.dir) * step(), behavior: reduce ? 'auto' : 'smooth' });
+    }));
+    track.addEventListener('scroll', update, { passive: true });
+    window.addEventListener('resize', update);
+    update();
+  });
+</script>
+
+<style>
+  .tc {
+    --tc-py: 5.5rem;
+    padding: var(--tc-py) var(--sp-6, 1.5rem);
+    background: var(--c-bg, #050505);
+    overflow: hidden;
+  }
+  .tc--sm { --tc-py: 3.5rem; }
+  .tc--lg { --tc-py: 7.5rem; }
+  .tc__inner { max-width: 1180px; margin: 0 auto; }
+  .tc__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-bottom: 2rem; }
+  .tc__title { margin: 0; font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -0.03em; color: var(--c-text-1, #fff); max-width: 560px; }
+  .tc__controls { display: flex; gap: 0.5rem; flex-shrink: 0; }
+  .tc__btn {
+    display: grid;
+    place-items: center;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    border: 1px solid rgba(255, 255, 255, 0.14);
+    background: rgba(255, 255, 255, 0.03);
+    color: var(--c-text-1, #fff);
+    cursor: pointer;
+    transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
+  }
+  .tc__btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.3); }
+  .tc__btn:disabled { opacity: 0.35; cursor: not-allowed; }
+  .tc__btn:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 2px; }
+  .tc__track {
+    list-style: none;
+    margin: 0;
+    padding: 0.25rem 0 1rem;
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: min(380px, 85%);
+    gap: 20px;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+  }
+  .tc__track::-webkit-scrollbar { display: none; }
+  .tc__track:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 4px; border-radius: 12px; }
+  .tc__slide { scroll-snap-align: start; }
+  .tc__card {
+    height: 100%;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+    padding: 1.75rem;
+    border-radius: var(--r-lg, 20px);
+    box-sizing: border-box;
+  }
+  .tc--glass .tc__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)); }
+  .tc--solid .tc__card { background: var(--c-bg-2, #111); border: 1px solid rgba(255, 255, 255, 0.05); }
+  .tc--quote .tc__card { border-left: 2px solid var(--c-primary-light, #d4a017); border-radius: 0; padding-left: 1.5rem; }
+  .tc__stars { display: flex; gap: 2px; color: rgba(255, 255, 255, 0.15); }
+  .tc__stars .is-on { color: var(--c-primary-light, #d4a017); }
+  .tc__quote { margin: 0; flex: 1; }
+  .tc__quote p { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--c-text-1, #fff); }
+  .tc__author { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; }
+  .tc__author strong { display: block; color: var(--c-text-1, #fff); font-weight: 650; }
+  .tc__role { display: block; color: var(--c-text-2, #a3a3a3); font-size: 0.8125rem; }
+  .tc__avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 0.8125rem; flex-shrink: 0; }
+  @media (max-width: 560px) {
+    .tc__head { flex-direction: column; align-items: flex-start; }
+  }
+</style>

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

@@ -0,0 +1,120 @@
+---
+/**
+ * TestimonialFeatured — A single large customer quote paired with the company's
+ * headline results (case-study style), plus a link to the full story.
+ *
+ * @param {string} quote - The testimonial text.
+ * @param {string} name - Author name.
+ * @param {string} role - Author role and company.
+ * @param {string} company - Company wordmark text.
+ * @param {Array<{value: string, label: string}>} metrics - Outcome stats.
+ * @param {{label: string, href: string}} link - Case study link.
+ * @param {string} variant - Layout style (split|centered|card).
+ * @param {string} size - Vertical rhythm (sm|md|lg).
+ * @param {string} className - Extra CSS class.
+ */
+interface Props {
+  quote?: string;
+  name?: string;
+  role?: string;
+  company?: string;
+  metrics?: Array<{ value: string; label: string }>;
+  link?: { label: string; href: string };
+  variant?: 'split' | 'centered' | 'card';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  quote = 'We replaced three tools and a chart library with this kit. Our product pages load twice as fast and our conversion rate has never been higher.',
+  name = 'Elena Vasquez',
+  role = 'VP of Marketing, Orbitly',
+  company = 'Orbitly',
+  metrics = [
+    { value: '2.1×', label: 'faster page loads' },
+    { value: '+38%', label: 'trial conversion' },
+    { value: '−64%', label: 'front-end bundle size' },
+  ],
+  link = { label: 'Read the case study', href: '#' },
+  variant = 'split',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const initials = name.split(' ').map((p) => p[0]).slice(0, 2).join('');
+---
+
+<section class={`tf tf--${variant} tf--${size} ${className}`} aria-label={`Customer story: ${company}`}>
+  <div class="tf__inner">
+    <figure class="tf__figure">
+      <p class="tf__company" aria-hidden="true">
+        <svg width="22" height="22" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2" /><circle cx="12" cy="12" r="4" fill="currentColor" /></svg>
+        {company}
+      </p>
+      <svg class="tf__mark" width="48" height="36" viewBox="0 0 48 36" aria-hidden="true"><path d="M0 36V22C0 9 7 2 20 0l2 5C14 7 11 12 11 18h9v18H0zm28 0V22C28 9 35 2 48 0l2 5c-8 2-11 7-11 13h9v18H28z" fill="currentColor" /></svg>
+      <blockquote class="tf__quote"><p>{quote}</p></blockquote>
+      <figcaption class="tf__author">
+        <span class="tf__avatar" aria-hidden="true">{initials}</span>
+        <span><strong>{name}</strong><span class="tf__role">{role}</span></span>
+      </figcaption>
+    </figure>
+
+    <div class="tf__side">
+      <dl class="tf__metrics">
+        {metrics.map((mt) => (
+          <div class="tf__metric">
+            <dt>{mt.label}</dt>
+            <dd>{mt.value}</dd>
+          </div>
+        ))}
+      </dl>
+      {link && (
+        <a class="tf__link" href={link.href}>
+          {link.label}
+          <svg width="16" height="16" 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>
+      )}
+    </div>
+  </div>
+</section>
+
+<style>
+  .tf {
+    --tf-py: 5.5rem;
+    padding: var(--tf-py) var(--sp-6, 1.5rem);
+    background: var(--c-bg, #050505);
+  }
+  .tf--sm { --tf-py: 3.5rem; }
+  .tf--lg { --tf-py: 7.5rem; }
+  .tf__inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
+  .tf--card .tf__inner {
+    padding: clamp(2rem, 5vw, 3.5rem);
+    border-radius: var(--r-xl, 28px);
+    background: radial-gradient(circle at 0% 0%, var(--c-primary-glow, rgba(184, 134, 11, 0.14)), transparent 55%), rgba(255, 255, 255, 0.025);
+    border: 1px solid var(--c-border, rgba(255, 255, 255, 0.08));
+  }
+  .tf--centered .tf__inner { grid-template-columns: 1fr; text-align: center; max-width: 860px; }
+  .tf--centered .tf__author, .tf--centered .tf__company { justify-content: center; }
+  .tf--centered .tf__mark { margin-inline: auto; }
+  .tf__figure { margin: 0; }
+  .tf__company { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 2rem; font-size: 1.125rem; font-weight: 750; letter-spacing: -0.02em; color: var(--c-text-1, #fff); }
+  .tf__mark { display: block; color: var(--c-primary-light, #d4a017); opacity: 0.8; margin-bottom: 1.25rem; }
+  .tf__quote { margin: 0 0 2rem; }
+  .tf__quote p { margin: 0; font-size: clamp(1.35rem, 2.6vw, 1.875rem); font-weight: 550; line-height: 1.4; letter-spacing: -0.015em; color: var(--c-text-1, #fff); text-wrap: pretty; }
+  .tf__author { display: flex; align-items: center; gap: 0.85rem; }
+  .tf__author strong { display: block; color: var(--c-text-1, #fff); }
+  .tf__role { display: block; font-size: 0.875rem; color: var(--c-text-2, #a3a3a3); }
+  .tf__avatar { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--chart-7, #9085e9), var(--chart-1, #3987e5)); color: #fff; font-weight: 700; }
+  .tf__side { display: grid; gap: 1.5rem; }
+  .tf__metrics { margin: 0; display: grid; gap: 1px; border-radius: var(--r-lg, 20px); overflow: hidden; background: rgba(255, 255, 255, 0.07); }
+  .tf--centered .tf__metrics { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
+  .tf__metric { display: flex; flex-direction: column-reverse; gap: 0.25rem; padding: 1.25rem 1.5rem; background: var(--c-bg-1, #0a0a0a); }
+  .tf__metric dt { font-size: 0.875rem; color: var(--c-text-2, #a3a3a3); }
+  .tf__metric dd { margin: 0; font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; color: var(--c-text-1, #fff); font-variant-numeric: tabular-nums; }
+  .tf__link { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; font-weight: 650; color: var(--c-primary-light, #d4a017); text-decoration: none; }
+  .tf--centered .tf__link { justify-self: center; }
+  .tf__link svg { transition: transform 0.2s ease; }
+  .tf__link:hover svg { transform: translateX(3px); }
+  .tf__link:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 2px; border-radius: 4px; }
+  @media (max-width: 820px) { .tf__inner { grid-template-columns: 1fr; } }
+</style>

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

@@ -0,0 +1,188 @@
+---
+/**
+ * TestimonialGridSection — Bento grid showcase of verified customer reviews with dark glass styling and star ratings.
+ * 
+ * @param {string} eyebrow - Small uppercase category lead. Default is 'WALL OF LOVE'.
+ * @param {string} title - Section main headline. Default is 'Trusted by innovative engineering teams'.
+ * @param {string} subtitle - Subtitle description.
+ */
+interface Props {
+  eyebrow?: string;
+  title?: string;
+  subtitle?: string;
+}
+
+const {
+  eyebrow = 'WALL OF LOVE',
+  title = 'Trusted by thousands of Astro builders',
+  subtitle = 'Discover why developers, indie hackers, and creative agencies rely on Astro Components Kit for production websites.',
+} = Astro.props;
+
+const testimonials = [
+  {
+    name: 'Elena Rostova',
+    role: 'Principal Architect @ Veloce Labs',
+    avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&auto=format&fit=crop&q=80',
+    quote: 'The pure zero-JS philosophy with Astro 5 is game-changing. Our Core Web Vitals score hit 100 on every audited route without tweaking hydration.',
+    stars: 5,
+    highlight: true,
+  },
+  {
+    name: 'Marcus Vance',
+    role: 'Founder @ HyperSync',
+    avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&auto=format&fit=crop&q=80',
+    quote: 'Copying and pasting self-contained Astro components directly shaved two full sprints off our SaaS launch timeline.',
+    stars: 5,
+  },
+  {
+    name: 'Sofia Chen',
+    role: 'Senior UI/UX Designer',
+    avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&auto=format&fit=crop&q=80',
+    quote: 'The glassmorphic dark palette with gold accents feels extraordinarily premium right out of the box. Highly recommended.',
+    stars: 5,
+  },
+];
+---
+
+<section class="testi-section">
+  <div class="testi-section__header">
+    <span class="testi-section__eyebrow">{eyebrow}</span>
+    <h2 class="testi-section__title">{title}</h2>
+    <p class="testi-section__subtitle">{subtitle}</p>
+  </div>
+
+  <div class="testi-section__grid">
+    {testimonials.map((t) => (
+      <article class:list={['testi-card', { 'testi-card--highlight': t.highlight }]}>
+        <div class="testi-card__stars" aria-label={`${t.stars} out of 5 stars`}>
+          {Array.from({ length: t.stars }).map(() => (
+            <span>★</span>
+          ))}
+        </div>
+        <blockquote class="testi-card__quote">
+          "{t.quote}"
+        </blockquote>
+        <div class="testi-card__author">
+          <img src={t.avatar} alt={t.name} class="testi-card__avatar" loading="lazy" />
+          <div class="testi-card__meta">
+            <h5 class="testi-card__name">{t.name}</h5>
+            <span class="testi-card__role">{t.role}</span>
+          </div>
+        </div>
+      </article>
+    ))}
+  </div>
+</section>
+
+<style>
+  .testi-section {
+    padding: var(--sp-12, 3rem) var(--sp-6, 1.5rem);
+    max-width: 1200px;
+    margin: 0 auto;
+    font-family: var(--font-sans, system-ui, sans-serif);
+  }
+
+  .testi-section__header {
+    text-align: center;
+    max-width: 640px;
+    margin: 0 auto 3rem auto;
+  }
+
+  .testi-section__eyebrow {
+    display: inline-block;
+    font-size: 0.75rem;
+    font-weight: 800;
+    letter-spacing: 0.12em;
+    color: var(--c-primary-light, #d4a017);
+    padding: 0.35rem 0.8rem;
+    border: 1px solid rgba(184, 134, 11, 0.3);
+    border-radius: var(--r-sm, 8px);
+    margin-bottom: 1rem;
+    text-transform: uppercase;
+  }
+
+  .testi-section__title {
+    font-size: clamp(1.8rem, 4vw, 2.8rem);
+    font-weight: 900;
+    color: var(--c-text-1, #ffffff);
+    letter-spacing: -0.03em;
+    margin: 0 0 1rem 0;
+  }
+
+  .testi-section__subtitle {
+    font-size: 0.95rem;
+    color: var(--c-text-2, #a3a3a3);
+    line-height: 1.6;
+    margin: 0;
+  }
+
+  .testi-section__grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    gap: 1.5rem;
+  }
+
+  .testi-card {
+    display: flex;
+    flex-direction: column;
+    padding: var(--sp-8, 2rem);
+    background: rgba(255, 255, 255, 0.02);
+    backdrop-filter: blur(16px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: var(--r-xl, 24px);
+    transition: transform 0.3s ease, border-color 0.3s ease;
+  }
+
+  .testi-card:hover {
+    transform: translateY(-4px);
+    border-color: rgba(184, 134, 11, 0.3);
+  }
+
+  .testi-card--highlight {
+    background: radial-gradient(circle at top left, rgba(184, 134, 11, 0.1), rgba(255, 255, 255, 0.02) 70%);
+    border-color: rgba(184, 134, 11, 0.4);
+  }
+
+  .testi-card__stars {
+    color: #fbbf24;
+    font-size: 1rem;
+    letter-spacing: 2px;
+    margin-bottom: 1rem;
+  }
+
+  .testi-card__quote {
+    font-size: 0.95rem;
+    color: var(--c-text-1, #ffffff);
+    line-height: 1.65;
+    margin: 0 0 1.5rem 0;
+    flex: 1;
+    font-style: italic;
+  }
+
+  .testi-card__author {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-top: auto;
+  }
+
+  .testi-card__avatar {
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 2px solid rgba(184, 134, 11, 0.4);
+  }
+
+  .testi-card__name {
+    font-size: 0.92rem;
+    font-weight: 700;
+    color: var(--c-text-1, #ffffff);
+    margin: 0 0 2px 0;
+  }
+
+  .testi-card__role {
+    font-size: 0.75rem;
+    color: var(--c-text-3, #737373);
+  }
+</style>

package/src/components/lib/sections/index.ts

@@ -26,3 +26,32 @@ export { default as FaqAccordionSection } from './FaqAccordionSection.astro';
 export { default as StatsMetricShowcase } from './StatsMetricShowcase.astro';
 export { default as TeamGridSection } from './TeamGridSection.astro';
 export { default as ContactGlassForm } from './ContactGlassForm.astro';
+export { default as TestimonialGridSection } from './TestimonialGridSection.astro';
+export { default as LogoCloudSection } from './LogoCloudSection.astro';
+export { default as HeroShowcaseSplit } from './HeroShowcaseSplit.astro';
+
+// Additional sections (v0.4)
+export { default as HeroMinimalCentered } from './HeroMinimalCentered.astro';
+export { default as HeroTerminal } from './HeroTerminal.astro';
+export { default as HeroWaitlist } from './HeroWaitlist.astro';
+export { default as HeroDashboardPreview } from './HeroDashboardPreview.astro';
+export { default as FeatureIconGrid } from './FeatureIconGrid.astro';
+export { default as FeatureAlternatingRows } from './FeatureAlternatingRows.astro';
+export { default as FeatureTabsShowcase } from './FeatureTabsShowcase.astro';
+export { default as HowItWorksSteps } from './HowItWorksSteps.astro';
+export { default as IntegrationsGrid } from './IntegrationsGrid.astro';
+export { default as PricingToggleCards } from './PricingToggleCards.astro';
+export { default as PricingSinglePlan } from './PricingSinglePlan.astro';
+export { default as TestimonialCarousel } from './TestimonialCarousel.astro';
+export { default as TestimonialFeatured } from './TestimonialFeatured.astro';
+export { default as CtaNewsletterSection } from './CtaNewsletterSection.astro';
+export { default as CtaSplitImage } from './CtaSplitImage.astro';
+export { default as StatsCounterBand } from './StatsCounterBand.astro';
+export { default as StatsDashboardSection } from './StatsDashboardSection.astro';
+export { default as CareersOpenings } from './CareersOpenings.astro';
+export { default as FaqTwoColumn } from './FaqTwoColumn.astro';
+export { default as ContactSplitMap } from './ContactSplitMap.astro';
+export { default as LogoWallGrid } from './LogoWallGrid.astro';
+export { default as BlogGridSection } from './BlogGridSection.astro';
+export { default as ChangelogSection } from './ChangelogSection.astro';
+export { default as FooterMegaSection } from './FooterMegaSection.astro';

package/src/components/lib/typography/AnimatedCounterText.astro

@@ -0,0 +1,102 @@
+---
+/**
+ * AnimatedCounterText — Kinetic statistic counter display with animated number progression and unit suffixes.
+ * 
+ * @param {number} target - Numerical target value (e.g. 99, 120, 2400). Default is 120.
+ * @param {string} prefix - Optional string prefix (e.g. '$', '+').
+ * @param {string} suffix - Optional string suffix (e.g. '%', 'k', '+'). Default is '+'.
+ * @param {string} label - Descriptive text below the counter.
+ * @param {string} color - Text accent color. Default is '#d4a017'.
+ */
+interface Props {
+  target?: number;
+  prefix?: string;
+  suffix?: string;
+  label?: string;
+  color?: string;
+}
+
+const {
+  target = 120,
+  prefix = '',
+  suffix = '+',
+  label = 'Components Ready to Ship',
+  color = '#d4a017',
+} = Astro.props;
+---
+
+<div class="stat-counter" data-counter-wrap style={`--counter-color: ${color};`}>
+  <div class="stat-counter__number">
+    {prefix && <span class="affix">{prefix}</span>}
+    <span class="value" data-counter-target={target}>0</span>
+    {suffix && <span class="affix">{suffix}</span>}
+  </div>
+  {label && <p class="stat-counter__label">{label}</p>}
+</div>
+
+<style>
+  .stat-counter {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    font-family: var(--font-sans, system-ui, sans-serif);
+    user-select: none;
+  }
+
+  .stat-counter__number {
+    display: inline-flex;
+    align-items: baseline;
+    font-size: clamp(2.5rem, 6vw, 4.2rem);
+    font-weight: 900;
+    line-height: 1;
+    letter-spacing: -0.04em;
+    color: var(--counter-color);
+    text-shadow: 0 0 24px rgba(212, 160, 23, 0.35);
+  }
+
+  .stat-counter__label {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--c-text-2, #a3a3a3);
+    margin-top: 6px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+</style>
+
+<script>
+  function setupCounters() {
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (!entry.isIntersecting) return;
+        const targetEl = entry.target.querySelector('[data-counter-target]') as HTMLElement;
+        if (!targetEl || targetEl.getAttribute('data-counted')) return;
+
+        targetEl.setAttribute('data-counted', 'true');
+        const finalVal = parseInt(targetEl.getAttribute('data-counter-target') || '0', 10);
+        const duration = 1500;
+        const start = performance.now();
+
+        function step(now: number) {
+          const progress = Math.min((now - start) / duration, 1);
+          // Ease out cubic
+          const eased = 1 - Math.pow(1 - progress, 3);
+          targetEl.textContent = Math.floor(eased * finalVal).toLocaleString();
+
+          if (progress < 1) {
+            requestAnimationFrame(step);
+          } else {
+            targetEl.textContent = finalVal.toLocaleString();
+          }
+        }
+
+        requestAnimationFrame(step);
+      });
+    }, { threshold: 0.2 });
+
+    document.querySelectorAll('[data-counter-wrap]').forEach((el) => observer.observe(el));
+  }
+
+  setupCounters();
+  document.addEventListener('astro:page-load', setupCounters);
+</script>