astro-component-kit 0.2.2 → 0.3.0

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

@@ -0,0 +1,406 @@
+---
+/**
+ * TestimonialWallGlass — Full-page social proof testimonial wall with verified customer cards and stats.
+ * 
+ * @param {string} badge - Eyebrow badge text.
+ * @param {string} title - Section main heading.
+ * @param {string} subtitle - Supporting description text.
+ */
+interface Props {
+  badge?: string;
+  title?: string;
+  subtitle?: string;
+  className?: string;
+}
+
+const {
+  badge = "Customer Love",
+  title = "Trusted by 10,000+ Developers Worldwide",
+  subtitle = "See how engineering teams ship faster and build beautiful Astro products with our component kit.",
+  className = ""
+} = Astro.props;
+---
+
+<section class={`testimonials-section ${className}`} aria-labelledby="testimonials-title">
+  <div class="testimonials-bg" aria-hidden="true">
+    <div class="test-glow test-glow--1"></div>
+    <div class="test-glow test-glow--2"></div>
+  </div>
+
+  <div class="container">
+    <!-- Header -->
+    <div class="section-header">
+      {badge && <span class="section-badge">{badge}</span>}
+      <h2 id="testimonials-title" class="section-title">{title}</h2>
+      <p class="section-subtitle">{subtitle}</p>
+
+      <!-- Trust Metrics Bar -->
+      <div class="trust-bar">
+        <div class="trust-stat">
+          <span class="trust-stat__num">4.9 / 5.0</span>
+          <div class="trust-stars">★★★★★</div>
+          <span class="trust-stat__label">Over 1,200 Reviews</span>
+        </div>
+        <div class="trust-sep"></div>
+        <div class="trust-stat">
+          <span class="trust-stat__num">99.8%</span>
+          <span class="trust-stat__sub">Satisfaction Rate</span>
+          <span class="trust-stat__label">Based on 2026 Survey</span>
+        </div>
+        <div class="trust-sep"></div>
+        <div class="trust-stat">
+          <span class="trust-stat__num">3.5x</span>
+          <span class="trust-stat__sub">Faster Shipping</span>
+          <span class="trust-stat__label">Average Team Velocity</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Testimonials Grid / Wall -->
+    <div class="testimonial-wall">
+      <!-- Card 1 -->
+      <article class="test-card">
+        <div class="test-card__stars">★★★★★</div>
+        <p class="test-card__quote">
+          "The UI/UX quality is astounding. We built our entire SaaS marketing site in a weekend and our Lighthouse scores went from 78 to a solid 100."
+        </p>
+        <div class="test-card__author">
+          <div class="author-avatar author-avatar--1">SK</div>
+          <div class="author-info">
+            <span class="author-name">Sarah Kowalski</span>
+            <span class="author-role">Staff Frontend Engineer at CloudScale</span>
+          </div>
+        </div>
+      </article>
+
+      <!-- Card 2 (Featured Highlight) -->
+      <article class="test-card test-card--featured">
+        <span class="featured-badge">Featured Case Study</span>
+        <div class="test-card__stars">★★★★★</div>
+        <p class="test-card__quote">
+          "Zero client runtime JS combined with modern glassmorphic aesthetics is exactly what our agency needed. It cut our design-to-production turnaround by 70%."
+        </p>
+        <div class="test-card__author">
+          <div class="author-avatar author-avatar--2">MA</div>
+          <div class="author-info">
+            <span class="author-name">Marc Andersson</span>
+            <span class="author-role">Founder & Design Lead at HyperStudio</span>
+          </div>
+        </div>
+      </article>
+
+      <!-- Card 3 -->
+      <article class="test-card">
+        <div class="test-card__stars">★★★★★</div>
+        <p class="test-card__quote">
+          "Strict TypeScript support made integrating these components into our existing Astro 5 monorepo completely frictionless."
+        </p>
+        <div class="test-card__author">
+          <div class="author-avatar author-avatar--3">DL</div>
+          <div class="author-info">
+            <span class="author-name">David Lin</span>
+            <span class="author-role">CTO at NexusFintech</span>
+          </div>
+        </div>
+      </article>
+
+      <!-- Card 4 -->
+      <article class="test-card">
+        <div class="test-card__stars">★★★★★</div>
+        <p class="test-card__quote">
+          "The accessible form controls and micro-interactions feel like custom handcrafted components. Our users constantly compliment the new dashboard."
+        </p>
+        <div class="test-card__author">
+          <div class="author-avatar author-avatar--4">EV</div>
+          <div class="author-info">
+            <span class="author-name">Elena Vega</span>
+            <span class="author-role">Head of Product at DevMetrics</span>
+          </div>
+        </div>
+      </article>
+
+      <!-- Card 5 -->
+      <article class="test-card">
+        <div class="test-card__stars">★★★★★</div>
+        <p class="test-card__quote">
+          "Finally a component library that doesn't force bloated heavy dependencies. Pure Astro, pure CSS, ultra clean."
+        </p>
+        <div class="test-card__author">
+          <div class="author-avatar author-avatar--5">TH</div>
+          <div class="author-info">
+            <span class="author-name">Thomas Huber</span>
+            <span class="author-role">Senior Systems Architect</span>
+          </div>
+        </div>
+      </article>
+
+      <!-- Card 6 -->
+      <article class="test-card">
+        <div class="test-card__stars">★★★★★</div>
+        <p class="test-card__quote">
+          "The interactive 3D Galaxy hero alone saved our team weeks of WebGL experimentation. Outstanding work!"
+        </p>
+        <div class="test-card__author">
+          <div class="author-avatar author-avatar--6">AR</div>
+          <div class="author-info">
+            <span class="author-name">Aria Rossi</span>
+            <span class="author-role">Creative Director at OrbitLabs</span>
+          </div>
+        </div>
+      </article>
+    </div>
+  </div>
+</section>
+
+<style>
+  .testimonials-section {
+    position: relative;
+    padding: var(--sp-20, 5rem) var(--sp-6, 1.5rem);
+    background: var(--c-bg-primary, #030712);
+    overflow: hidden;
+  }
+
+  .testimonials-bg {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  .test-glow {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(120px);
+    opacity: 0.2;
+  }
+
+  .test-glow--1 {
+    top: 20%;
+    left: 10%;
+    width: 450px;
+    height: 450px;
+    background: radial-gradient(circle, #6366f1, transparent 70%);
+  }
+
+  .test-glow--2 {
+    bottom: 20%;
+    right: 10%;
+    width: 450px;
+    height: 450px;
+    background: radial-gradient(circle, #eab308, transparent 70%);
+  }
+
+  .container {
+    position: relative;
+    z-index: 1;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .section-header {
+    text-align: center;
+    max-width: 800px;
+    margin: 0 auto var(--sp-12, 3rem);
+  }
+
+  .section-badge {
+    display: inline-flex;
+    padding: 0.35rem 0.9rem;
+    border-radius: 9999px;
+    font-size: 0.78rem;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    background: rgba(184, 134, 11, 0.12);
+    color: #eab308;
+    border: 1px solid rgba(234, 179, 8, 0.25);
+    margin-bottom: var(--sp-4, 1rem);
+  }
+
+  .section-title {
+    font-size: clamp(2rem, 4vw, 3rem);
+    font-weight: 900;
+    color: #fff;
+    line-height: 1.15;
+    letter-spacing: -0.02em;
+    margin: 0 0 var(--sp-4, 1rem);
+  }
+
+  .section-subtitle {
+    font-size: 1.1rem;
+    color: #94a3b8;
+    line-height: 1.6;
+    margin: 0 0 2rem;
+  }
+
+  /* Trust Bar */
+  .trust-bar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 2rem;
+    padding: 1.25rem 2rem;
+    background: rgba(15, 23, 42, 0.7);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 16px;
+    backdrop-filter: blur(12px);
+    max-width: 750px;
+    margin: 0 auto;
+  }
+
+  .trust-stat {
+    text-align: center;
+  }
+
+  .trust-stat__num {
+    display: block;
+    font-size: 1.5rem;
+    font-weight: 900;
+    color: #fff;
+    line-height: 1.2;
+  }
+
+  .trust-stars {
+    color: #eab308;
+    font-size: 0.9rem;
+    letter-spacing: 2px;
+    margin: 0.1rem 0;
+  }
+
+  .trust-stat__sub {
+    display: block;
+    font-size: 0.85rem;
+    font-weight: 700;
+    color: #10b981;
+  }
+
+  .trust-stat__label {
+    display: block;
+    font-size: 0.72rem;
+    color: #64748b;
+    font-weight: 500;
+  }
+
+  .trust-sep {
+    width: 1px;
+    height: 40px;
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  /* Wall Grid */
+  .testimonial-wall {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1.5rem;
+  }
+
+  .test-card {
+    position: relative;
+    background: rgba(15, 23, 42, 0.55);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: var(--r-xl, 18px);
+    padding: 1.75rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    transition: transform 0.3s ease, border-color 0.3s ease;
+  }
+
+  .test-card:hover {
+    transform: translateY(-4px);
+    border-color: rgba(255, 255, 255, 0.2);
+  }
+
+  .test-card--featured {
+    background: rgba(25, 30, 60, 0.75);
+    border-color: rgba(99, 102, 241, 0.4);
+    box-shadow: 0 10px 30px -10px rgba(99, 102, 241, 0.25);
+  }
+
+  .featured-badge {
+    position: absolute;
+    top: -10px;
+    right: 20px;
+    padding: 0.2rem 0.65rem;
+    background: #6366f1;
+    color: #fff;
+    font-size: 0.7rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    border-radius: 9999px;
+  }
+
+  .test-card__stars {
+    color: #eab308;
+    font-size: 0.95rem;
+    letter-spacing: 2px;
+    margin-bottom: 0.75rem;
+  }
+
+  .test-card__quote {
+    font-size: 0.95rem;
+    color: #cbd5e1;
+    line-height: 1.6;
+    margin: 0 0 1.5rem;
+    font-style: italic;
+  }
+
+  .test-card__author {
+    display: flex;
+    align-items: center;
+    gap: 0.85rem;
+    padding-top: 1rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.06);
+  }
+
+  .author-avatar {
+    width: 42px;
+    height: 42px;
+    border-radius: 50%;
+    display: grid;
+    place-items: center;
+    font-weight: 800;
+    font-size: 0.85rem;
+    color: #fff;
+    border: 2px solid rgba(255, 255, 255, 0.15);
+  }
+
+  .author-avatar--1 { background: linear-gradient(135deg, #6366f1, #a855f7); }
+  .author-avatar--2 { background: linear-gradient(135deg, #eab308, #f97316); }
+  .author-avatar--3 { background: linear-gradient(135deg, #06b6d4, #3b82f6); }
+  .author-avatar--4 { background: linear-gradient(135deg, #ec4899, #8b5cf6); }
+  .author-avatar--5 { background: linear-gradient(135deg, #10b981, #059669); }
+  .author-avatar--6 { background: linear-gradient(135deg, #f43f5e, #be123c); }
+
+  .author-info {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .author-name {
+    font-size: 0.92rem;
+    font-weight: 700;
+    color: #fff;
+  }
+
+  .author-role {
+    font-size: 0.75rem;
+    color: #64748b;
+  }
+
+  @media (max-width: 960px) {
+    .trust-bar {
+      flex-direction: column;
+      gap: 1rem;
+    }
+    .trust-sep {
+      width: 80%;
+      height: 1px;
+    }
+    .testimonial-wall {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>

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

@@ -1,6 +1,28 @@
 // src/components/lib/sections/index.ts
 // Barrel export for section components
 
+export { default as ButtonsShowcase } from './ButtonsShowcase.astro';
+export { default as CardsShowcase } from './CardsShowcase.astro';
+export { default as DataShowcase } from './DataShowcase.astro';
+export { default as FeedbackShowcase } from './FeedbackShowcase.astro';
+export { default as FormsShowcase } from './FormsShowcase.astro';
+export { default as LayoutShowcase } from './LayoutShowcase.astro';
+export { default as NavigationShowcase } from './NavigationShowcase.astro';
+export { default as OverlaysShowcase } from './OverlaysShowcase.astro';
+export { default as TypographyShowcase } from './TypographyShowcase.astro';
+
+// Full Landing Page Section Components
 export { default as HeroGradient } from './HeroGradient.astro';
 export { default as HeroSplit } from './HeroSplit.astro';
 export { default as HeroGlass } from './HeroGlass.astro';
+export { default as FeatureBentoGrid } from './FeatureBentoGrid.astro';
+export { default as FeatureTimelineFlow } from './FeatureTimelineFlow.astro';
+export { default as PricingComparisonMatrix } from './PricingComparisonMatrix.astro';
+export { default as PricingTierCards } from './PricingTierCards.astro';
+export { default as TestimonialWallGlass } from './TestimonialWallGlass.astro';
+export { default as CtaGlowBanner } from './CtaGlowBanner.astro';
+export { default as CtaAppDownload } from './CtaAppDownload.astro';
+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';

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

@@ -1,3 +1,6 @@
+// src/components/lib/typography/index.ts
+// Barrel export for typography components
+
 export { default as AnimatedUnderlineLink } from './AnimatedUnderlineLink.astro';
 export { default as BackgroundClipMask } from './BackgroundClipMask.astro';
 export { default as CodeInlineGlass } from './CodeInlineGlass.astro';

package/src/components/lib/AnimatedInput.astro

@@ -1,82 +0,0 @@
----
-// src/components/lib/AnimatedInput.astro
-interface Props {
-  label: string;
-  id: string;
-  type?: string;
-  placeholder?: string;
-  required?: boolean;
-  name?: string;
-}
-
-const {
-  label,
-  id,
-  type = 'text',
-  placeholder = ' ',
-  required = false,
-  name,
-} = Astro.props;
----
-
-<div class="anim-input-wrap">
-  <input
-    {id}
-    {name}
-    {type}
-    {placeholder}
-    {required}
-    class="anim-input"
-    autocomplete="off"
-  />
-  <label for={id} class="anim-input-label">{label}</label>
-</div>
-
-<style>
-  .anim-input-wrap {
-    position: relative;
-    width: 100%;
-  }
-
-  .anim-input {
-    width: 100%;
-    padding: 1.1rem 1rem 0.5rem;
-    font-family: inherit;
-    font-size: 0.95rem;
-    color: #e2e8f0;
-    background: rgba(255, 255, 255, 0.04);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 12px;
-    outline: none;
-    box-sizing: border-box;
-    transition: border-color 0.25s ease, background 0.25s ease;
-  }
-
-  .anim-input::placeholder { color: transparent; }
-
-  .anim-input:focus {
-    background: rgba(99, 102, 241, 0.06);
-    border-color: rgba(99, 102, 241, 0.5);
-    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
-  }
-
-  .anim-input-label {
-    position: absolute;
-    top: 0.9rem;
-    left: 1rem;
-    font-size: 0.9rem;
-    color: #64748b;
-    pointer-events: none;
-    transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
-  }
-
-  .anim-input:focus ~ .anim-input-label,
-  .anim-input:not(:placeholder-shown) ~ .anim-input-label {
-    top: 0.28rem;
-    font-size: 0.68rem;
-    color: #818cf8;
-    font-weight: 600;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-  }
-</style>

package/src/components/lib/Badge.astro

@@ -1,52 +0,0 @@
----
-// src/components/lib/Badge.astro
-interface Props {
-  variant?: 'default' | 'success' | 'warning' | 'danger' | 'info';
-  dot?: boolean;
-  pulse?: boolean;
-}
-
-const { variant = 'default', dot = false, pulse = false } = Astro.props;
----
-
-<span class:list={['badge', `badge--${variant}`]}>
-  {dot && <span class:list={['badge__dot', { 'badge__dot--pulse': pulse }]}></span>}
-  <slot />
-</span>
-
-<style>
-  .badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.4rem;
-    padding: 0.25rem 0.7rem;
-    border-radius: 100px;
-    font-size: 0.72rem;
-    font-weight: 600;
-    letter-spacing: 0.05em;
-    text-transform: uppercase;
-    white-space: nowrap;
-  }
-
-  .badge--default { background: rgba(100,116,139,0.18); color: #94a3b8; border: 1px solid rgba(100,116,139,0.25); }
-  .badge--success { background: rgba(16,185,129,0.12); color: #34d399; border: 1px solid rgba(16,185,129,0.25); }
-  .badge--warning { background: rgba(245,158,11,0.12); color: #fbbf24; border: 1px solid rgba(245,158,11,0.25); }
-  .badge--danger  { background: rgba(239,68,68,0.12);  color: #f87171; border: 1px solid rgba(239,68,68,0.25); }
-  .badge--info    { background: rgba(99,102,241,0.12); color: #818cf8; border: 1px solid rgba(99,102,241,0.25); }
-
-  .badge__dot {
-    width: 6px; height: 6px;
-    border-radius: 50%;
-    background: currentColor;
-    flex-shrink: 0;
-  }
-
-  .badge__dot--pulse {
-    animation: dot-pulse 1.8s ease-in-out infinite;
-  }
-
-  @keyframes dot-pulse {
-    0%, 100% { opacity: 1; transform: scale(1); }
-    50% { opacity: 0.4; transform: scale(0.7); }
-  }
-</style>

package/src/components/lib/GlassButton.astro

@@ -1,87 +0,0 @@
----
-// src/components/lib/GlassButton.astro
-interface Props {
-  href?: string;
-  variant?: 'primary' | 'secondary' | 'ghost';
-  size?: 'sm' | 'md' | 'lg';
-  disabled?: boolean;
-}
-
-const { href, variant = 'primary', size = 'md', disabled = false } = Astro.props;
-const Tag = href ? 'a' : 'button';
----
-
-<Tag
-  href={href}
-  disabled={disabled}
-  class={`glass-btn glass-btn--${variant} glass-btn--${size}`}
->
-  <slot />
-</Tag>
-
-<style>
-  .glass-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    font-family: inherit;
-    font-weight: 600;
-    letter-spacing: 0.02em;
-    border-radius: 12px;
-    cursor: pointer;
-    text-decoration: none;
-    border: 1px solid transparent;
-    position: relative;
-    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
-    overflow: hidden;
-  }
-
-  .glass-btn::before {
-    content: '';
-    position: absolute;
-    inset: -1px;
-    border-radius: inherit;
-    padding: 1px;
-    background: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(255,255,255,0.05));
-    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-    -webkit-mask-composite: xor;
-    mask-composite: exclude;
-  }
-
-  .glass-btn:hover:not(:disabled) {
-    transform: translateY(-2px);
-    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.35);
-  }
-
-  .glass-btn:active:not(:disabled) { transform: translateY(0); }
-  .glass-btn:disabled { opacity: 0.4; cursor: not-allowed; }
-
-  .glass-btn--primary {
-    background: linear-gradient(135deg, #6366f1, #8b5cf6);
-    color: #fff;
-    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.25);
-  }
-
-  .glass-btn--secondary {
-    background: rgba(255, 255, 255, 0.08);
-    backdrop-filter: blur(12px);
-    color: #e2e8f0;
-    border-color: rgba(255, 255, 255, 0.12);
-  }
-
-  .glass-btn--ghost {
-    background: transparent;
-    color: #a5b4fc;
-    border-color: rgba(99, 102, 241, 0.4);
-  }
-
-  .glass-btn--ghost:hover:not(:disabled) {
-    background: rgba(99, 102, 241, 0.12);
-    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.2);
-  }
-
-  .glass-btn--sm { padding: 0.4rem 0.9rem; font-size: 0.8rem; }
-  .glass-btn--md { padding: 0.65rem 1.4rem; font-size: 0.9rem; }
-  .glass-btn--lg { padding: 0.85rem 1.9rem; font-size: 1rem; }
-</style>