astro-component-kit 0.2.2 → 0.3.1

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

@@ -0,0 +1,449 @@
+---
+/**
+ * FeatureBentoGrid — Full-page modern Bento-Grid features section with interactive widgets and metric cards.
+ * 
+ * @param {string} badge - Eyebrow badge text.
+ * @param {string} title - Main section heading.
+ * @param {string} subtitle - Supporting description text.
+ */
+interface Props {
+  badge?: string;
+  title?: string;
+  subtitle?: string;
+  className?: string;
+}
+
+const {
+  badge = "Core Capabilities",
+  title = "Engineered for Extreme Performance",
+  subtitle = "Everything you need to build next-generation Astro applications with zero runtime overhead.",
+  className = ""
+} = Astro.props;
+---
+
+<section class={`bento-section ${className}`} aria-labelledby="bento-title">
+  <div class="bento-bg" aria-hidden="true">
+    <div class="bento-glow bento-glow--1"></div>
+    <div class="bento-glow bento-glow--2"></div>
+  </div>
+
+  <div class="container">
+    <!-- Header -->
+    <div class="section-header">
+      {badge && <span class="section-badge">{badge}</span>}
+      <h2 id="bento-title" class="section-title">{title}</h2>
+      <p class="section-subtitle">{subtitle}</p>
+    </div>
+
+    <!-- Bento Grid Container -->
+    <div class="bento-grid">
+      <!-- Slot 1: Large Highlight (Span 2 col) -->
+      <article class="bento-card bento-card--wide">
+        <div class="bento-card__content">
+          <div class="bento-card__icon bento-card__icon--primary">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>
+          </div>
+          <span class="bento-tag">Zero Runtime JS</span>
+          <h3 class="bento-card__title">Pure Static Architecture</h3>
+          <p class="bento-card__desc">
+            Components ship zero client-side JavaScript by default, delivering perfect 100/100 Lighthouse performance scores out of the box.
+          </p>
+          <div class="bento-speed-stat">
+            <div class="speed-score">
+              <span class="score-number">100</span>
+              <span class="score-label">Lighthouse Score</span>
+            </div>
+            <div class="speed-bars">
+              <div class="speed-bar"><span class="bar-fill" style="width: 100%;"></span><span class="bar-name">Performance</span></div>
+              <div class="speed-bar"><span class="bar-fill" style="width: 100%;"></span><span class="bar-name">Accessibility</span></div>
+              <div class="speed-bar"><span class="bar-fill" style="width: 100%;"></span><span class="bar-name">Best Practices</span></div>
+            </div>
+          </div>
+        </div>
+      </article>
+
+      <!-- Slot 2: Security & Accessibility (Tall) -->
+      <article class="bento-card bento-card--tall">
+        <div class="bento-card__content">
+          <div class="bento-card__icon bento-card__icon--gold">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/><path d="m9 12 2 2 4-4"/></svg>
+          </div>
+          <span class="bento-tag">WCAG 2.1 AA</span>
+          <h3 class="bento-card__title">Accessible & Tested</h3>
+          <p class="bento-card__desc">
+            Every button, input, and modal conforms strictly to WCAG AA guidelines with keyboard navigation and ARIA attributes.
+          </p>
+          <div class="a11y-pill-list">
+            <div class="a11y-pill">✓ Focus Rings Built-in</div>
+            <div class="a11y-pill">✓ Keyboard Nav (Tab/Esc)</div>
+            <div class="a11y-pill">✓ Contrast Ratio ≥ 4.5:1</div>
+            <div class="a11y-pill">✓ Screen Reader Ready</div>
+          </div>
+        </div>
+      </article>
+
+      <!-- Slot 3: Design Tokens & Theming -->
+      <article class="bento-card">
+        <div class="bento-card__content">
+          <div class="bento-card__icon bento-card__icon--cyan">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/></svg>
+          </div>
+          <span class="bento-tag">CSS Tokens</span>
+          <h3 class="bento-card__title">Fluid Design Tokens</h3>
+          <p class="bento-card__desc">
+            Seamless global variables for colors, typography scales, glass blurs, and border radiuses.
+          </p>
+          <div class="tokens-preview">
+            <span class="color-dot color-dot--gold"></span>
+            <span class="color-dot color-dot--indigo"></span>
+            <span class="color-dot color-dot--emerald"></span>
+            <span class="color-dot color-dot--rose"></span>
+          </div>
+        </div>
+      </article>
+
+      <!-- Slot 4: TypeScript Strict -->
+      <article class="bento-card">
+        <div class="bento-card__content">
+          <div class="bento-card__icon bento-card__icon--blue">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M7 7h10"/><path d="M12 7v10"/></svg>
+          </div>
+          <span class="bento-tag">TypeScript 5.x</span>
+          <h3 class="bento-card__title">Strict Type Safety</h3>
+          <p class="bento-card__desc">
+            Full TypeScript IntelliSense with prop auto-completion and compile-time validation in your IDE.
+          </p>
+          <div class="code-snippet-mini">
+            <code>interface Props &#123; variant: 'glass' | 'glow' &#125;</code>
+          </div>
+        </div>
+      </article>
+
+      <!-- Slot 5: 3D & Particle Shaders (Wide) -->
+      <article class="bento-card bento-card--wide">
+        <div class="bento-card__content">
+          <div class="bento-card__icon bento-card__icon--purple">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
+          </div>
+          <span class="bento-tag">Three.js & WebGL</span>
+          <h3 class="bento-card__title">Interactive 3D Galaxy & Visuals</h3>
+          <p class="bento-card__desc">
+            GPU-accelerated particle galaxy backgrounds with smooth physics, mouse-follow damping, and hardware-accelerated shaders.
+          </p>
+          <div class="live-pill">
+            <span class="live-dot"></span>
+            <span>60 FPS Fluid Physics Engine</span>
+          </div>
+        </div>
+      </article>
+    </div>
+  </div>
+</section>
+
+<style>
+  .bento-section {
+    position: relative;
+    padding: var(--sp-20, 5rem) var(--sp-6, 1.5rem);
+    background: var(--c-bg-primary, #030712);
+    overflow: hidden;
+  }
+
+  .bento-bg {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  .bento-glow {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(120px);
+    opacity: 0.25;
+  }
+
+  .bento-glow--1 {
+    top: 10%;
+    left: 15%;
+    width: 400px;
+    height: 400px;
+    background: radial-gradient(circle, #6366f1, transparent 70%);
+  }
+
+  .bento-glow--2 {
+    bottom: 10%;
+    right: 15%;
+    width: 450px;
+    height: 450px;
+    background: radial-gradient(circle, #d97706, transparent 70%);
+  }
+
+  .container {
+    position: relative;
+    z-index: 1;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .section-header {
+    text-align: center;
+    max-width: 760px;
+    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;
+  }
+
+  /* Bento Grid */
+  .bento-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1.5rem;
+  }
+
+  .bento-card {
+    position: relative;
+    background: rgba(15, 23, 42, 0.6);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: var(--r-xl, 20px);
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
+    overflow: hidden;
+  }
+
+  .bento-card:hover {
+    transform: translateY(-4px);
+    border-color: rgba(255, 255, 255, 0.18);
+    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.6);
+  }
+
+  .bento-card--wide {
+    grid-column: span 2;
+  }
+
+  .bento-card--tall {
+    grid-row: span 2;
+  }
+
+  .bento-card__icon {
+    width: 48px;
+    height: 48px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 1.25rem;
+  }
+
+  .bento-card__icon--primary { background: rgba(99, 102, 241, 0.15); color: #818cf8; }
+  .bento-card__icon--gold { background: rgba(234, 179, 8, 0.15); color: #facc15; }
+  .bento-card__icon--cyan { background: rgba(6, 182, 212, 0.15); color: #22d3ee; }
+  .bento-card__icon--blue { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
+  .bento-card__icon--purple { background: rgba(168, 85, 247, 0.15); color: #c084fc; }
+
+  .bento-tag {
+    display: inline-block;
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: #64748b;
+    margin-bottom: 0.5rem;
+  }
+
+  .bento-card__title {
+    font-size: 1.35rem;
+    font-weight: 800;
+    color: #fff;
+    margin: 0 0 0.75rem;
+    line-height: 1.3;
+  }
+
+  .bento-card__desc {
+    font-size: 0.95rem;
+    color: #94a3b8;
+    line-height: 1.6;
+    margin: 0 0 1.5rem;
+  }
+
+  /* Internal mini-widgets */
+  .bento-speed-stat {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+    padding: 1rem;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+  }
+
+  .speed-score {
+    text-align: center;
+    padding-right: 1.5rem;
+    border-right: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .score-number {
+    display: block;
+    font-size: 2.2rem;
+    font-weight: 900;
+    color: #10b981;
+    line-height: 1;
+  }
+
+  .score-label {
+    font-size: 0.7rem;
+    color: #64748b;
+    font-weight: 600;
+    text-transform: uppercase;
+  }
+
+  .speed-bars {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .speed-bar {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  .bar-fill {
+    height: 6px;
+    background: #10b981;
+    border-radius: 999px;
+  }
+
+  .bar-name {
+    font-size: 0.75rem;
+    color: #cbd5e1;
+    font-weight: 600;
+  }
+
+  .a11y-pill-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+  }
+
+  .a11y-pill {
+    padding: 0.6rem 0.85rem;
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    border-radius: 8px;
+    font-size: 0.82rem;
+    color: #cbd5e1;
+    font-weight: 500;
+  }
+
+  .tokens-preview {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .color-dot {
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    border: 2px solid rgba(255, 255, 255, 0.2);
+  }
+  .color-dot--gold { background: #eab308; }
+  .color-dot--indigo { background: #6366f1; }
+  .color-dot--emerald { background: #10b981; }
+  .color-dot--rose { background: #f43f5e; }
+
+  .code-snippet-mini {
+    padding: 0.75rem;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    font-size: 0.8rem;
+    color: #93c5fd;
+    font-family: var(--font-mono, monospace);
+  }
+
+  .live-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.6rem;
+    padding: 0.5rem 1rem;
+    background: rgba(168, 85, 247, 0.1);
+    border: 1px solid rgba(168, 85, 247, 0.25);
+    border-radius: 9999px;
+    font-size: 0.82rem;
+    color: #d8b4fe;
+    font-weight: 600;
+  }
+
+  .live-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #a855f7;
+    box-shadow: 0 0 10px #a855f7;
+    animation: pulse 2s infinite ease-in-out;
+  }
+
+  @keyframes pulse {
+    0%, 100% { transform: scale(1); opacity: 1; }
+    50% { transform: scale(1.4); opacity: 0.6; }
+  }
+
+  @media (max-width: 960px) {
+    .bento-grid {
+      grid-template-columns: 1fr;
+    }
+    .bento-card--wide, .bento-card--tall {
+      grid-column: span 1;
+      grid-row: span 1;
+    }
+    .bento-speed-stat {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 1rem;
+    }
+    .speed-score {
+      border-right: none;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+      padding-right: 0;
+      padding-bottom: 0.75rem;
+      width: 100%;
+      text-align: left;
+    }
+  }
+</style>

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

@@ -0,0 +1,254 @@
+---
+/**
+ * FeatureTimelineFlow — Full-page step-by-step product architecture and workflow section with glowing nodes.
+ * 
+ * @param {string} badge - Eyebrow badge text.
+ * @param {string} title - Section main heading.
+ * @param {string} subtitle - Description text.
+ */
+interface Props {
+  badge?: string;
+  title?: string;
+  subtitle?: string;
+  className?: string;
+}
+
+const {
+  badge = "Step-by-Step Workflow",
+  title = "From Idea to Production in 3 Simple Steps",
+  subtitle = "Streamline your frontend engineering lifecycle with an intuitive, pre-tested architecture.",
+  className = ""
+} = Astro.props;
+
+const steps = [
+  {
+    number: "01",
+    tag: "Install & Setup",
+    title: "One Command Installation",
+    desc: "Add astro-component-kit to your Astro project with npm. Zero complex configuration files or build tool plugins required.",
+    code: "npm install astro-component-kit",
+    color: "#6366f1"
+  },
+  {
+    number: "02",
+    tag: "Compose & Theme",
+    title: "Import Modular Components",
+    desc: "Import accessible cards, navigation bars, interactive inputs, and 3D scenes directly into your Astro frontmatter with strict TypeScript typings.",
+    code: "import { GlassCard, StatCard } from 'astro-component-kit';",
+    color: "#eab308"
+  },
+  {
+    number: "03",
+    tag: "Build & Deploy",
+    title: "Deploy Anywhere at 100/100 Speed",
+    desc: "Generate static pre-rendered HTML with zero runtime JavaScript. Deploy effortlessly to Coolify, Vercel, Cloudflare Pages, or Docker.",
+    code: "npm run build && coolify deploy",
+    color: "#10b981"
+  }
+];
+---
+
+<section class={`timeline-section ${className}`} aria-labelledby="timeline-title">
+  <div class="timeline-bg" aria-hidden="true">
+    <div class="timeline-glow"></div>
+  </div>
+
+  <div class="container">
+    <!-- Header -->
+    <div class="section-header">
+      {badge && <span class="section-badge">{badge}</span>}
+      <h2 id="timeline-title" class="section-title">{title}</h2>
+      <p class="section-subtitle">{subtitle}</p>
+    </div>
+
+    <!-- Timeline Steps -->
+    <div class="steps-flow">
+      <div class="flow-line" aria-hidden="true"></div>
+
+      {steps.map((step) => (
+        <div class="step-card">
+          <div class="step-badge-circle" style={`--step-color: ${step.color};`}>
+            <span>{step.number}</span>
+          </div>
+          <div class="step-card__body">
+            <span class="step-tag" style={`color: ${step.color};`}>{step.tag}</span>
+            <h3 class="step-title">{step.title}</h3>
+            <p class="step-desc">{step.desc}</p>
+            <div class="step-code">
+              <code>{step.code}</code>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  </div>
+</section>
+
+<style>
+  .timeline-section {
+    position: relative;
+    padding: var(--sp-20, 5rem) var(--sp-6, 1.5rem);
+    background: var(--c-bg-primary, #030712);
+    overflow: hidden;
+  }
+
+  .timeline-bg {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  .timeline-glow {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 600px;
+    height: 500px;
+    background: radial-gradient(circle, rgba(99, 102, 241, 0.1), transparent 70%);
+    filter: blur(120px);
+  }
+
+  .container {
+    position: relative;
+    z-index: 1;
+    max-width: 1000px;
+    margin: 0 auto;
+  }
+
+  .section-header {
+    text-align: center;
+    max-width: 780px;
+    margin: 0 auto 4rem;
+  }
+
+  .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;
+  }
+
+  /* Steps Flow */
+  .steps-flow {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 2.5rem;
+  }
+
+  .flow-line {
+    position: absolute;
+    top: 30px;
+    bottom: 30px;
+    left: 27px;
+    width: 2px;
+    background: linear-gradient(180deg, #6366f1, #eab308, #10b981);
+    opacity: 0.3;
+    z-index: 0;
+  }
+
+  .step-card {
+    position: relative;
+    display: flex;
+    gap: 2rem;
+    align-items: flex-start;
+    z-index: 1;
+  }
+
+  .step-badge-circle {
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    background: #0f172a;
+    border: 2px solid var(--step-color, #6366f1);
+    box-shadow: 0 0 20px -3px var(--step-color, #6366f1);
+    display: grid;
+    place-items: center;
+    font-size: 1.1rem;
+    font-weight: 900;
+    color: #fff;
+    flex-shrink: 0;
+  }
+
+  .step-card__body {
+    flex: 1;
+    background: rgba(15, 23, 42, 0.6);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 20px;
+    padding: 2rem;
+    transition: transform 0.3s ease, border-color 0.3s ease;
+  }
+
+  .step-card__body:hover {
+    transform: translateX(4px);
+    border-color: rgba(255, 255, 255, 0.18);
+  }
+
+  .step-tag {
+    font-size: 0.78rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .step-title {
+    font-size: 1.35rem;
+    font-weight: 800;
+    color: #fff;
+    margin: 0.4rem 0 0.6rem;
+  }
+
+  .step-desc {
+    font-size: 0.95rem;
+    color: #94a3b8;
+    line-height: 1.6;
+    margin: 0 0 1.25rem;
+  }
+
+  .step-code {
+    padding: 0.75rem 1rem;
+    background: rgba(0, 0, 0, 0.5);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 10px;
+    font-family: var(--font-mono, monospace);
+    font-size: 0.85rem;
+    color: #93c5fd;
+    overflow-x: auto;
+  }
+
+  @media (max-width: 640px) {
+    .flow-line {
+      display: none;
+    }
+    .step-card {
+      flex-direction: column;
+      gap: 1rem;
+    }
+  }
+</style>