astro-component-kit 0.0.1 → 0.1.1

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

@@ -0,0 +1,376 @@
+---
+// CardsShowcase.astro — Premium cards category showcase section with live preview
+interface Props {
+  title?: string;
+  subtitle?: string;
+}
+
+const { title = "Cards", subtitle = "Versatile card containers for content display." } = Astro.props;
+---
+
+<section class="cards-showcase">
+  <div class="container">
+    <div class="showcase-header">
+      <span class="showcase-eyebrow">🃏 Cards</span>
+      <h2 class="showcase-title">{title}</h2>
+      <p class="showcase-subtitle">{subtitle}</p>
+    </div>
+
+    <div class="preview-stage">
+      <div class="preview-stage__inner">
+        <div class="card-grid">
+          <!-- Glass Card -->
+          <div class="preview-card preview-card--glass">
+            <div class="glass-card">
+              <div class="glass-card__icon">✨</div>
+              <h3 class="glass-card__title">Glass Card</h3>
+              <p class="glass-card__desc">Frosted glass effect with subtle borders and backdrop blur for a modern aesthetic.</p>
+            </div>
+          </div>
+
+          <!-- Profile Card -->
+          <div class="preview-card preview-card--profile">
+            <div class="profile-card">
+              <div class="profile-card__avatar">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="profile-card__avatar-icon">
+                  <path d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.5 20.25a8.25 8.25 0 0115 0" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+              </div>
+              <h4 class="profile-card__name">Jane Doe</h4>
+              <p class="profile-card__role">Senior Developer</p>
+              <p class="profile-card__bio">Building beautiful interfaces with modern design systems and component libraries.</p>
+              <div class="profile-card__stats">
+                <span class="profile-card__stat"><strong>142</strong> Projects</span>
+                <span class="profile-card__stat"><strong>2.4k</strong> Followers</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Pricing Card -->
+          <div class="preview-card preview-card--pricing">
+            <div class="pricing-card">
+              <span class="pricing-card__badge">Popular</span>
+              <h4 class="pricing-card__plan">Pro Plan</h4>
+              <div class="pricing-card__price">
+                <span class="pricing-card__currency">$</span>
+                <span class="pricing-card__amount">29</span>
+                <span class="pricing-card__period">/mo</span>
+              </div>
+              <ul class="pricing-card__features">
+                <li>Unlimited projects</li>
+                <li>Priority support</li>
+                <li>Advanced analytics</li>
+                <li>Custom branding</li>
+              </ul>
+              <button class="pricing-card__cta">Get Started</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="usage-code">
+      <code>&lt;GlassCard variant="glass"&gt;Content here&lt;/GlassCard&gt;</code>
+    </div>
+  </div>
+</section>
+
+<style>
+  .cards-showcase {
+    padding: var(--sp-16) 0;
+    position: relative;
+  }
+  .showcase-header {
+    text-align: center;
+    margin-bottom: var(--sp-10);
+  }
+  .showcase-eyebrow {
+    display: inline-block;
+    padding: 0.35rem 0.8rem;
+    font-size: 0.75rem;
+    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);
+    margin-bottom: var(--sp-4);
+  }
+  .showcase-title {
+    font-size: clamp(2rem, 4vw, 3rem);
+    font-weight: 800;
+    color: var(--c-text-1);
+    margin-bottom: var(--sp-3);
+  }
+  .showcase-subtitle {
+    font-size: 1.05rem;
+    color: var(--c-text-2);
+    max-width: 500px;
+    margin: 0 auto;
+  }
+
+  /* Preview Stage */
+  .preview-stage {
+    padding: var(--sp-12);
+    background: rgba(10, 10, 10, 0.6);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(255,255,255,0.08);
+    border-radius: var(--r-xl);
+    margin-bottom: var(--sp-6);
+    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
+  }
+  .preview-stage__inner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 320px;
+  }
+  .card-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--sp-6);
+    width: 100%;
+    max-width: 960px;
+  }
+
+  /* Preview Card Wrapper */
+  .preview-card {
+    display: flex;
+    align-items: stretch;
+  }
+
+  /* Glass Card */
+  .glass-card {
+    width: 100%;
+    padding: var(--sp-6);
+    background: rgba(255,255,255,0.05);
+    backdrop-filter: blur(16px);
+    border: 1px solid rgba(255,255,255,0.1);
+    border-radius: var(--r-lg);
+    text-align: center;
+    transition: all 0.3s ease;
+  }
+  .glass-card:hover {
+    background: rgba(255,255,255,0.08);
+    border-color: rgba(184,134,11,0.3);
+    transform: translateY(-4px);
+    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
+  }
+  .glass-card__icon {
+    font-size: 2rem;
+    margin-bottom: var(--sp-3);
+  }
+  .glass-card__title {
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: var(--c-text-1);
+    margin-bottom: var(--sp-2);
+  }
+  .glass-card__desc {
+    font-size: 0.85rem;
+    color: var(--c-text-2);
+    line-height: 1.5;
+    margin: 0;
+  }
+
+  /* Profile Card */
+  .profile-card {
+    width: 100%;
+    padding: var(--sp-6);
+    background: rgba(255,255,255,0.04);
+    border: 1px solid rgba(255,255,255,0.08);
+    border-radius: var(--r-lg);
+    text-align: center;
+    transition: all 0.3s ease;
+  }
+  .profile-card:hover {
+    background: rgba(255,255,255,0.06);
+    border-color: rgba(184,134,11,0.25);
+    transform: translateY(-4px);
+    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
+  }
+  .profile-card__avatar {
+    width: 64px;
+    height: 64px;
+    margin: 0 auto var(--sp-4);
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--c-primary-light), var(--c-primary));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #0a0a0a;
+  }
+  .profile-card__avatar-icon {
+    width: 32px;
+    height: 32px;
+  }
+  .profile-card__name {
+    font-size: 1.05rem;
+    font-weight: 700;
+    color: var(--c-text-1);
+    margin: 0 0 var(--sp-1);
+  }
+  .profile-card__role {
+    font-size: 0.8rem;
+    color: var(--c-primary-light);
+    margin: 0 0 var(--sp-3);
+    font-weight: 500;
+  }
+  .profile-card__bio {
+    font-size: 0.8rem;
+    color: var(--c-text-2);
+    line-height: 1.5;
+    margin: 0 0 var(--sp-4);
+  }
+  .profile-card__stats {
+    display: flex;
+    justify-content: center;
+    gap: var(--sp-4);
+    border-top: 1px solid rgba(255,255,255,0.08);
+    padding-top: var(--sp-3);
+  }
+  .profile-card__stat {
+    font-size: 0.75rem;
+    color: var(--c-text-2);
+  }
+  .profile-card__stat strong {
+    color: var(--c-text-1);
+    font-weight: 700;
+  }
+
+  /* Pricing Card */
+  .pricing-card {
+    width: 100%;
+    padding: var(--sp-6);
+    background: rgba(255,255,255,0.04);
+    border: 1px solid rgba(184,134,11,0.2);
+    border-radius: var(--r-lg);
+    text-align: center;
+    position: relative;
+    transition: all 0.3s ease;
+  }
+  .pricing-card:hover {
+    background: rgba(255,255,255,0.06);
+    border-color: rgba(184,134,11,0.4);
+    transform: translateY(-4px);
+    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
+  }
+  .pricing-card__badge {
+    display: inline-block;
+    padding: 0.25rem 0.7rem;
+    font-size: 0.65rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: #0a0a0a;
+    background: linear-gradient(135deg, var(--c-primary-light), var(--c-primary));
+    border-radius: var(--r-full);
+    margin-bottom: var(--sp-3);
+  }
+  .pricing-card__plan {
+    font-size: 1rem;
+    font-weight: 700;
+    color: var(--c-text-1);
+    margin: 0 0 var(--sp-3);
+  }
+  .pricing-card__price {
+    display: flex;
+    align-items: baseline;
+    justify-content: center;
+    gap: 2px;
+    margin-bottom: var(--sp-4);
+  }
+  .pricing-card__currency {
+    font-size: 1.2rem;
+    font-weight: 600;
+    color: var(--c-text-1);
+    align-self: flex-start;
+    margin-top: 8px;
+  }
+  .pricing-card__amount {
+    font-size: 3rem;
+    font-weight: 800;
+    color: var(--c-text-1);
+    line-height: 1;
+  }
+  .pricing-card__period {
+    font-size: 0.85rem;
+    color: var(--c-text-2);
+    font-weight: 500;
+  }
+  .pricing-card__features {
+    list-style: none;
+    padding: 0;
+    margin: 0 0 var(--sp-5);
+    text-align: left;
+  }
+  .pricing-card__features li {
+    font-size: 0.8rem;
+    color: var(--c-text-2);
+    padding: 0.4rem 0;
+    border-bottom: 1px solid rgba(255,255,255,0.04);
+    position: relative;
+    padding-left: 1.2rem;
+  }
+  .pricing-card__features li::before {
+    content: "✓";
+    position: absolute;
+    left: 0;
+    color: var(--c-primary-light);
+    font-weight: 700;
+  }
+  .pricing-card__features li:last-child {
+    border-bottom: none;
+  }
+  .pricing-card__cta {
+    width: 100%;
+    padding: 0.7rem 1.5rem;
+    font-size: 0.85rem;
+    font-weight: 700;
+    font-family: var(--font-sans);
+    color: #0a0a0a;
+    background: linear-gradient(135deg, var(--c-primary-light), var(--c-primary));
+    border: none;
+    border-radius: var(--r-md);
+    cursor: pointer;
+    transition: all 0.25s ease;
+    box-shadow: 0 4px 16px rgba(184,134,11,0.25);
+  }
+  .pricing-card__cta:hover {
+    box-shadow: 0 6px 24px rgba(184,134,11,0.4);
+    transform: translateY(-1px);
+  }
+
+  /* Usage Code */
+  .usage-code {
+    text-align: center;
+    padding: var(--sp-4);
+    background: rgba(255,255,255,0.02);
+    border-radius: var(--r-md);
+  }
+  .usage-code code {
+    font-family: var(--font-mono);
+    font-size: 0.85rem;
+    color: var(--c-primary-light);
+  }
+
+  @media (max-width: 900px) {
+    .card-grid {
+      grid-template-columns: 1fr;
+      max-width: 380px;
+      gap: var(--sp-5);
+    }
+    .preview-stage__inner {
+      min-height: auto;
+    }
+    .preview-stage {
+      padding: var(--sp-8) var(--sp-4);
+    }
+  }
+  @media (max-width: 640px) {
+    .card-grid {
+      max-width: 100%;
+    }
+  }
+</style>

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

@@ -0,0 +1,329 @@
+---
+// DataShowcase.astro — Premium data display section with live preview
+interface Props {
+  title?: string;
+  subtitle?: string;
+}
+
+const { title = "Data Display", subtitle = "Stats, tables, and visualization elements." } = Astro.props;
+---
+
+<section class="data-showcase">
+  <div class="container">
+    <div class="showcase-header">
+      <span class="showcase-eyebrow">📊 Data Display</span>
+      <h2 class="showcase-title">{title}</h2>
+      <p class="showcase-subtitle">{subtitle}</p>
+    </div>
+
+    <div class="preview-stage">
+      <div class="preview-stage__inner">
+        <div class="data-mockups">
+          <!-- Stats Row -->
+          <div class="stats-row">
+            <div class="stat-card">
+              <span class="stat-value">12,847</span>
+              <span class="stat-label">Total Users</span>
+            </div>
+            <div class="stat-card">
+              <span class="stat-value">94.2%</span>
+              <span class="stat-label">Uptime</span>
+            </div>
+            <div class="stat-card">
+              <span class="stat-value">3.6s</span>
+              <span class="stat-label">Avg. Response</span>
+            </div>
+          </div>
+
+          <!-- Mini Table -->
+          <div class="mini-table">
+            <div class="table-header">
+              <span class="col col--name">Endpoint</span>
+              <span class="col col--status">Status</span>
+              <span class="col col--latency">Latency</span>
+            </div>
+            <div class="table-row">
+              <span class="col col--name">/api/users</span>
+              <span class="col col--status"><span class="badge badge--ok">200</span></span>
+              <span class="col col--latency">12ms</span>
+            </div>
+            <div class="table-row">
+              <span class="col col--name">/api/products</span>
+              <span class="col col--status"><span class="badge badge--warn">301</span></span>
+              <span class="col col--latency">48ms</span>
+            </div>
+            <div class="table-row">
+              <span class="col col--name">/api/orders</span>
+              <span class="col col--status"><span class="badge badge--err">500</span></span>
+              <span class="col col--latency">210ms</span>
+            </div>
+          </div>
+
+          <!-- Progress Bar / Chart -->
+          <div class="progress-section">
+            <div class="progress-labels">
+              <span class="progress-label">CPU Usage</span>
+              <span class="progress-value">73%</span>
+            </div>
+            <div class="progress-track">
+              <div class="progress-fill"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="usage-code">
+      <code set:html={`&lt;DataTable data={items} variant="glass" /&gt;`}></code>
+    </div>
+  </div>
+</section>
+
+<style>
+  .data-showcase {
+    padding: var(--sp-16) 0;
+    position: relative;
+  }
+  .showcase-header {
+    text-align: center;
+    margin-bottom: var(--sp-10);
+  }
+  .showcase-eyebrow {
+    display: inline-block;
+    padding: 0.35rem 0.8rem;
+    font-size: 0.75rem;
+    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);
+    margin-bottom: var(--sp-4);
+  }
+  .showcase-title {
+    font-size: clamp(2rem, 4vw, 3rem);
+    font-weight: 800;
+    color: var(--c-text-1);
+    margin-bottom: var(--sp-3);
+  }
+  .showcase-subtitle {
+    font-size: 1.05rem;
+    color: var(--c-text-2);
+    max-width: 500px;
+    margin: 0 auto;
+  }
+
+  /* Preview Stage */
+  .preview-stage {
+    padding: var(--sp-12);
+    background: rgba(10, 10, 10, 0.6);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(255,255,255,0.08);
+    border-radius: var(--r-xl);
+    margin-bottom: var(--sp-6);
+    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
+  }
+  .preview-stage__inner {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--sp-8);
+  }
+  .data-mockups {
+    width: 100%;
+    max-width: 600px;
+    display: flex;
+    flex-direction: column;
+    gap: var(--sp-8);
+  }
+
+  /* Stats Row */
+  .stats-row {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--sp-4);
+  }
+  .stat-card {
+    padding: var(--sp-5);
+    background: rgba(255,255,255,0.04);
+    backdrop-filter: blur(12px);
+    border: 1px solid rgba(255,255,255,0.08);
+    border-radius: var(--r-lg);
+    text-align: center;
+    transition: all 0.25s ease;
+  }
+  .stat-card:hover {
+    background: rgba(255,255,255,0.07);
+    border-color: rgba(184,134,11,0.25);
+    transform: translateY(-2px);
+  }
+  .stat-value {
+    display: block;
+    font-size: 1.6rem;
+    font-weight: 800;
+    color: var(--c-text-1);
+    margin-bottom: var(--sp-1);
+  }
+  .stat-label {
+    display: block;
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--c-text-2);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  /* Mini Table */
+  .mini-table {
+    background: rgba(255,255,255,0.04);
+    backdrop-filter: blur(12px);
+    border: 1px solid rgba(255,255,255,0.08);
+    border-radius: var(--r-lg);
+    overflow: hidden;
+  }
+  .table-header {
+    display: grid;
+    grid-template-columns: 1.5fr 0.8fr 1fr;
+    padding: var(--sp-3) var(--sp-5);
+    background: rgba(255,255,255,0.06);
+    border-bottom: 1px solid rgba(255,255,255,0.08);
+    font-size: 0.7rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--c-text-2);
+  }
+  .table-row {
+    display: grid;
+    grid-template-columns: 1.5fr 0.8fr 1fr;
+    padding: var(--sp-3) var(--sp-5);
+    border-bottom: 1px solid rgba(255,255,255,0.04);
+    font-size: 0.85rem;
+    align-items: center;
+    transition: background 0.2s ease;
+  }
+  .table-row:last-child {
+    border-bottom: none;
+  }
+  .table-row:hover {
+    background: rgba(255,255,255,0.03);
+  }
+  .col--name {
+    color: var(--c-text-1);
+    font-family: var(--font-mono);
+    font-size: 0.8rem;
+  }
+  .col--status {
+    display: flex;
+    justify-content: center;
+  }
+  .col--latency {
+    color: var(--c-text-2);
+    text-align: right;
+    font-family: var(--font-mono);
+    font-size: 0.8rem;
+  }
+  .badge {
+    display: inline-block;
+    padding: 0.2rem 0.5rem;
+    font-size: 0.65rem;
+    font-weight: 700;
+    border-radius: var(--r-sm);
+  }
+  .badge--ok {
+    background: rgba(34,197,94,0.15);
+    color: #22c55e;
+    border: 1px solid rgba(34,197,94,0.3);
+  }
+  .badge--warn {
+    background: rgba(234,179,8,0.15);
+    color: #eab308;
+    border: 1px solid rgba(234,179,8,0.3);
+  }
+  .badge--err {
+    background: rgba(239,68,68,0.15);
+    color: #ef4444;
+    border: 1px solid rgba(239,68,68,0.3);
+  }
+
+  /* Progress Bar */
+  .progress-section {
+    padding: var(--sp-5);
+    background: rgba(255,255,255,0.04);
+    backdrop-filter: blur(12px);
+    border: 1px solid rgba(255,255,255,0.08);
+    border-radius: var(--r-lg);
+  }
+  .progress-labels {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: var(--sp-3);
+  }
+  .progress-label {
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: var(--c-text-2);
+  }
+  .progress-value {
+    font-size: 0.8rem;
+    font-weight: 700;
+    color: var(--c-primary-light);
+    font-family: var(--font-mono);
+  }
+  .progress-track {
+    height: 8px;
+    background: rgba(255,255,255,0.08);
+    border-radius: var(--r-full);
+    overflow: hidden;
+  }
+  .progress-fill {
+    width: 73%;
+    height: 100%;
+    background: linear-gradient(90deg, var(--c-primary-light), var(--c-primary), rgba(184,134,11,0.4));
+    border-radius: var(--r-full);
+    box-shadow: 0 0 12px rgba(184,134,11,0.3);
+    animation: progress-pulse 2.5s ease-in-out infinite;
+  }
+  @keyframes progress-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.8; }
+  }
+
+  .usage-code {
+    text-align: center;
+    padding: var(--sp-4);
+    background: rgba(255,255,255,0.02);
+    border-radius: var(--r-md);
+  }
+  .usage-code code {
+    font-family: var(--font-mono);
+    font-size: 0.85rem;
+    color: var(--c-primary-light);
+  }
+
+  @media (max-width: 640px) {
+    .stats-row {
+      grid-template-columns: 1fr;
+      gap: var(--sp-3);
+    }
+    .stat-card {
+      padding: var(--sp-4);
+    }
+    .stat-value {
+      font-size: 1.3rem;
+    }
+    .table-header,
+    .table-row {
+      grid-template-columns: 1.2fr 0.6fr 0.8fr;
+      padding: var(--sp-3) var(--sp-4);
+      font-size: 0.75rem;
+    }
+    .preview-stage {
+      padding: var(--sp-8) var(--sp-4);
+    }
+    .data-mockups {
+      gap: var(--sp-6);
+    }
+  }
+</style>