astro-component-kit 0.0.1 → 0.1.0

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

@@ -0,0 +1,202 @@
+---
+// HeroGlass.astro — Centered hero with glassmorphism card overlay
+interface Props {
+  title?: string;
+  subtitle?: string;
+}
+
+const {
+  title = "Your Complete Component Library",
+  subtitle = "Build stunning landing pages and apps with 200+ accessible, responsive, and customizable components.",
+} = Astro.props;
+---
+
+<section class="hero-glass">
+  <div class="hero-glass__bg" aria-hidden="true">
+    <div class="hero-glass__orb hero-glass__orb--1"></div>
+    <div class="hero-glass__orb hero-glass__orb--2"></div>
+    <div class="hero-glass__orb hero-glass__orb--3"></div>
+  </div>
+  <div class="container">
+    <div class="hero-glass__card">
+      <h1 class="hero-glass__title">{title}</h1>
+      <p class="hero-glass__subtitle">{subtitle}</p>
+      <div class="hero-glass__actions">
+        <button class="hero-glass__btn hero-glass__btn--primary">
+          Get Started Free
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+        </button>
+        <button class="hero-glass__btn hero-glass__btn--secondary">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+          Watch Demo
+        </button>
+      </div>
+      <div class="hero-glass__trust">
+        <span>Trusted by 5,000+ developers</span>
+        <div class="hero-glass__avatars">
+          <span class="hero-glass__avatar">A</span>
+          <span class="hero-glass__avatar">B</span>
+          <span class="hero-glass__avatar">C</span>
+          <span class="hero-glass__avatar">D</span>
+          <span class="hero-glass__avatar hero-glass__avatar--more">+</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<style>
+  .hero-glass {
+    position: relative;
+    min-height: 90vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--sp-8) var(--sp-6);
+    overflow: hidden;
+  }
+  .hero-glass__bg {
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(ellipse at 20% 50%, rgba(184,134,11,0.12) 0%, transparent 50%),
+                radial-gradient(ellipse at 80% 20%, rgba(184,134,11,0.08) 0%, transparent 50%),
+                radial-gradient(ellipse at 50% 80%, rgba(184,134,11,0.06) 0%, transparent 50%);
+  }
+  .hero-glass__orb {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(80px);
+    animation: orbFloat 10s ease-in-out infinite alternate;
+  }
+  .hero-glass__orb--1 {
+    width: 400px; height: 400px;
+    top: 10%; left: 15%;
+    background: rgba(184,134,11,0.15);
+  }
+  .hero-glass__orb--2 {
+    width: 300px; height: 300px;
+    top: 40%; right: 10%;
+    background: rgba(184,134,11,0.1);
+    animation-delay: 2s;
+  }
+  .hero-glass__orb--3 {
+    width: 250px; height: 250px;
+    bottom: 15%; left: 40%;
+    background: rgba(184,134,11,0.08);
+    animation-delay: 4s;
+  }
+  @keyframes orbFloat {
+    0% { transform: translate(0, 0) scale(1); }
+    50% { transform: translate(20px, -15px) scale(1.05); }
+    100% { transform: translate(-10px, 10px) scale(0.95); }
+  }
+  .hero-glass__card {
+    position: relative;
+    z-index: 1;
+    max-width: 700px;
+    margin: 0 auto;
+    padding: var(--sp-8);
+    background: rgba(10, 10, 10, 0.6);
+    backdrop-filter: blur(24px);
+    -webkit-backdrop-filter: blur(24px);
+    border: 1px solid rgba(255,255,255,0.1);
+    border-radius: var(--r-xl);
+    box-shadow: 0 24px 80px rgba(0,0,0,0.5),
+                inset 0 1px 0 rgba(255,255,255,0.05);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--sp-6);
+  }
+  .hero-glass__title {
+    font-size: clamp(2rem, 4vw, 3rem);
+    font-weight: 900;
+    color: var(--c-text-1);
+    letter-spacing: -0.03em;
+    line-height: 1.1;
+    margin: 0;
+    text-align: center;
+  }
+  .hero-glass__subtitle {
+    font-size: 1.05rem;
+    color: var(--c-text-2);
+    line-height: 1.6;
+    margin: 0;
+    text-align: center;
+    max-width: 500px;
+  }
+  .hero-glass__actions {
+    display: flex;
+    gap: var(--sp-4);
+    flex-wrap: wrap;
+    justify-content: center;
+    margin-top: var(--sp-4);
+  }
+  .hero-glass__btn {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--sp-2);
+    padding: 0.8rem 1.6rem;
+    font-size: 0.9rem;
+    font-weight: 600;
+    font-family: var(--font-sans);
+    border-radius: var(--r-md);
+    cursor: pointer;
+    transition: all 0.25s ease;
+  }
+  .hero-glass__btn--primary {
+    background: linear-gradient(135deg, var(--c-primary-light), var(--c-primary));
+    color: #0a0a0a;
+    border: none;
+    box-shadow: 0 4px 20px rgba(184,134,11,0.3);
+  }
+  .hero-glass__btn--primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 30px rgba(184,134,11,0.45);
+  }
+  .hero-glass__btn--secondary {
+    background: rgba(255,255,255,0.05);
+    color: var(--c-text-1);
+    border: 1px solid rgba(255,255,255,0.12);
+  }
+  .hero-glass__btn--secondary:hover {
+    background: rgba(255,255,255,0.1);
+    border-color: rgba(184,134,11,0.3);
+    transform: translateY(-2px);
+  }
+  .hero-glass__trust {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-3);
+    font-size: 0.8rem;
+    color: var(--c-text-3);
+    padding-top: var(--sp-3);
+    border-top: 1px solid rgba(255,255,255,0.06);
+  }
+  .hero-glass__avatars { display: flex; }
+  .hero-glass__avatar {
+    width: 28px; height: 28px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--c-primary), var(--c-primary-light));
+    color: #0a0a0a;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.65rem;
+    font-weight: 700;
+    border: 2px solid rgba(10,10,10,0.8);
+    margin-left: -8px;
+  }
+  .hero-glass__avatar:first-child { margin-left: 0; }
+  .hero-glass__avatar--more {
+    background: rgba(255,255,255,0.1);
+    color: var(--c-text-3);
+  }
+
+  @media (max-width: 640px) {
+    .hero-glass { min-height: 75vh; padding: var(--sp-8) var(--sp-4); }
+    .hero-glass__card { padding: var(--sp-6); }
+    .hero-glass__actions { flex-direction: column; width: 100%; max-width: 260px; }
+    .hero-glass__btn { width: 100%; justify-content: center; }
+  }
+</style>

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

@@ -0,0 +1,143 @@
+---
+// HeroGradient.astro — Full-screen hero with animated gradient background
+interface Props {
+  title?: string;
+  subtitle?: string;
+}
+
+const {
+  title = "Build Beautiful Interfaces",
+  subtitle = "Premium open-source UI components for Astro. Copy, paste, and ship faster.",
+} = Astro.props;
+---
+
+<section class="hero-gradient">
+  <div class="hero-gradient__bg" aria-hidden="true"></div>
+  <div class="hero-gradient__content">
+    <span class="hero-gradient__badge">⚡ 200+ Components</span>
+    <h1 class="hero-gradient__title">{title}</h1>
+    <p class="hero-gradient__subtitle">{subtitle}</p>
+    <div class="hero-gradient__actions">
+      <button class="hero-btn hero-btn--primary">
+        Get Started
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+      </button>
+      <button class="hero-btn hero-btn--glass">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77 5.44 5.44 0 0 0 3.5 8.53a5.44 5.44 0 0 0-.09 2.61 3.37 3.37 0 0 0-.94 2.61s3.3 1.19 6.44 1.54"/><path d="M9 19c0 2.3 1.8 4.2 4 4.2s4-1.9 4-4.2"/></svg>
+        View on GitHub
+      </button>
+    </div>
+  </div>
+</section>
+
+<style>
+  .hero-gradient {
+    position: relative;
+    min-height: 90vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    padding: var(--sp-12) var(--sp-6);
+  }
+  .hero-gradient__bg {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      135deg,
+      rgba(184, 134, 11, 0.25) 0%,
+      transparent 40%,
+      transparent 60%,
+      rgba(184, 134, 11, 0.15) 100%
+    );
+    animation: gradientShift 8s ease-in-out infinite alternate;
+  }
+  @keyframes gradientShift {
+    0% { opacity: 0.6; transform: scale(1); }
+    100% { opacity: 1; transform: scale(1.1); }
+  }
+  .hero-gradient__content {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--sp-6);
+    text-align: center;
+    max-width: 800px;
+  }
+  .hero-gradient__badge {
+    display: inline-block;
+    padding: 0.4rem 1rem;
+    font-size: 0.8rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--c-primary-light);
+    background: rgba(184,134,11,0.12);
+    border: 1px solid rgba(184,134,11,0.3);
+    border-radius: var(--r-full);
+  }
+  .hero-gradient__title {
+    font-size: clamp(2.5rem, 5vw, 4rem);
+    font-weight: 900;
+    color: var(--c-text-1);
+    letter-spacing: -0.03em;
+    line-height: 1.1;
+    margin: 0;
+  }
+  .hero-gradient__subtitle {
+    font-size: clamp(1rem, 2vw, 1.2rem);
+    color: var(--c-text-2);
+    line-height: 1.6;
+    max-width: 550px;
+    margin: 0;
+  }
+  .hero-gradient__actions {
+    display: flex;
+    gap: var(--sp-4);
+    flex-wrap: wrap;
+    justify-content: center;
+    margin-top: var(--sp-2);
+  }
+  .hero-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--sp-2);
+    padding: 0.85rem 1.8rem;
+    font-size: 0.95rem;
+    font-weight: 600;
+    font-family: var(--font-sans);
+    border: none;
+    border-radius: var(--r-md);
+    cursor: pointer;
+    transition: all 0.25s ease;
+    text-decoration: none;
+  }
+  .hero-btn--primary {
+    background: linear-gradient(135deg, var(--c-primary-light), var(--c-primary));
+    color: #0a0a0a;
+    box-shadow: 0 4px 24px rgba(184,134,11,0.3);
+  }
+  .hero-btn--primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 32px rgba(184,134,11,0.45);
+  }
+  .hero-btn--glass {
+    background: rgba(255,255,255,0.05);
+    backdrop-filter: blur(12px);
+    color: var(--c-text-1);
+    border: 1px solid rgba(255,255,255,0.12);
+  }
+  .hero-btn--glass:hover {
+    background: rgba(255,255,255,0.1);
+    border-color: rgba(184,134,11,0.3);
+    transform: translateY(-2px);
+  }
+
+  @media (max-width: 640px) {
+    .hero-gradient { min-height: 70vh; padding: var(--sp-8) var(--sp-4); }
+    .hero-gradient__actions { flex-direction: column; width: 100%; max-width: 280px; }
+    .hero-btn { width: 100%; justify-content: center; }
+  }
+</style>

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

@@ -0,0 +1,210 @@
+---
+// HeroSplit.astro — Split-screen hero with image/media side
+interface Props {
+  title?: string;
+  subtitle?: string;
+}
+
+const {
+  title = "Ship Faster with Premium Components",
+  subtitle = "Stop building from scratch. Use production-ready, accessible, and responsive components.",
+} = Astro.props;
+---
+
+<section class="hero-split">
+  <div class="hero-split__content">
+    <span class="hero-split__badge">Open Source · MIT</span>
+    <h1 class="hero-split__title">{title}</h1>
+    <p class="hero-split__subtitle">{subtitle}</p>
+    <div class="hero-split__actions">
+      <button class="hero-split__btn hero-split__btn--primary">
+        Start Building
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+      </button>
+      <button class="hero-split__btn hero-split__btn--ghost">
+        Documentation
+      </button>
+    </div>
+    <div class="hero-split__stats">
+      <div class="hero-split__stat">
+        <span class="hero-split__stat-num">200+</span>
+        <span class="hero-split__stat-label">Components</span>
+      </div>
+      <div class="hero-split__stat">
+        <span class="hero-split__stat-num">10K+</span>
+        <span class="hero-split__stat-label">Downloads</span>
+      </div>
+      <div class="hero-split__stat">
+        <span class="hero-split__stat-num">5K+</span>
+        <span class="hero-split__stat-label">Stars</span>
+      </div>
+    </div>
+  </div>
+  <div class="hero-split__visual" aria-hidden="true">
+    <div class="hero-split__visual-inner">
+      <div class="hero-split__mock-card">
+        <div class="hero-split__mock-body">
+          <div class="hero-split__mock-line hero-split__mock-line--wide"></div>
+          <div class="hero-split__mock-line hero-split__mock-line--medium"></div>
+          <div class="hero-split__mock-line hero-split__mock-line--short"></div>
+          <div class="hero-split__mock-grid">
+            <div class="hero-split__mock-box"></div>
+            <div class="hero-split__mock-box"></div>
+            <div class="hero-split__mock-box"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<style>
+  .hero-split {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--sp-12);
+    align-items: center;
+    min-height: 85vh;
+    padding: var(--sp-12) var(--sp-8);
+    position: relative;
+  }
+  .hero-split__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sp-6);
+    max-width: 560px;
+  }
+  .hero-split__badge {
+    display: inline-block;
+    width: fit-content;
+    padding: 0.35rem 0.8rem;
+    font-size: 0.7rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--c-primary-light);
+    background: rgba(184,134,11,0.1);
+    border: 1px solid rgba(184,134,11,0.25);
+    border-radius: var(--r-full);
+  }
+  .hero-split__title {
+    font-size: clamp(2rem, 4vw, 3.2rem);
+    font-weight: 900;
+    color: var(--c-text-1);
+    letter-spacing: -0.03em;
+    line-height: 1.1;
+    margin: 0;
+  }
+  .hero-split__subtitle {
+    font-size: 1.05rem;
+    color: var(--c-text-2);
+    line-height: 1.6;
+    margin: 0;
+  }
+  .hero-split__actions {
+    display: flex;
+    gap: var(--sp-4);
+    flex-wrap: wrap;
+    margin-top: var(--sp-4);
+  }
+  .hero-split__btn {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--sp-2);
+    padding: 0.75rem 1.5rem;
+    font-size: 0.9rem;
+    font-weight: 600;
+    font-family: var(--font-sans);
+    border-radius: var(--r-md);
+    cursor: pointer;
+    transition: all 0.25s ease;
+    text-decoration: none;
+  }
+  .hero-split__btn--primary {
+    background: linear-gradient(135deg, var(--c-primary-light), var(--c-primary));
+    color: #0a0a0a;
+    border: none;
+    box-shadow: 0 4px 20px rgba(184,134,11,0.25);
+  }
+  .hero-split__btn--primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 30px rgba(184,134,11,0.4);
+  }
+  .hero-split__btn--ghost {
+    background: transparent;
+    color: var(--c-text-2);
+    border: 1px solid var(--c-border);
+  }
+  .hero-split__btn--ghost:hover {
+    color: var(--c-text-1);
+    border-color: var(--c-primary-light);
+  }
+  .hero-split__stats {
+    display: flex;
+    gap: var(--sp-6);
+    margin-top: var(--sp-2);
+    padding-top: var(--sp-5);
+    border-top: 1px solid var(--c-border);
+  }
+  .hero-split__stat { display: flex; flex-direction: column; gap: 2px; }
+  .hero-split__stat-num {
+    font-size: 1.5rem;
+    font-weight: 800;
+    color: var(--c-primary-light);
+  }
+  .hero-split__stat-label {
+    font-size: 0.8rem;
+    color: var(--c-text-3);
+  }
+
+  /* Visual side */
+  .hero-split__visual {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .hero-split__visual-inner {
+    width: 100%;
+    max-width: 500px;
+  }
+  .hero-split__mock-card {
+    background: rgba(255,255,255,0.03);
+    border: 1px solid var(--c-border);
+    border-radius: var(--r-lg);
+    overflow: hidden;
+    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
+  }
+  .hero-split__mock-body { padding: var(--sp-5); }
+  .hero-split__mock-line {
+    height: 8px;
+    border-radius: 4px;
+    background: rgba(255,255,255,0.06);
+    margin-bottom: var(--sp-3);
+  }
+  .hero-split__mock-line--wide { width: 80%; }
+  .hero-split__mock-line--medium { width: 60%; }
+  .hero-split__mock-line--short { width: 40%; }
+  .hero-split__mock-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--sp-3);
+    margin-top: var(--sp-4);
+  }
+  .hero-split__mock-box {
+    height: 60px;
+    border-radius: var(--r-sm);
+    background: rgba(184,134,11,0.08);
+    border: 1px solid rgba(184,134,11,0.15);
+  }
+
+  @media (max-width: 768px) {
+    .hero-split {
+      grid-template-columns: 1fr;
+      gap: var(--sp-8);
+      padding: var(--sp-8) var(--sp-4);
+    }
+    .hero-split__visual { order: -1; }
+    .hero-split__visual-inner { max-width: 100%; }
+    .hero-split__stats { gap: var(--sp-4); }
+  }
+</style>