astro-component-kit 0.2.2 → 0.3.1

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

@@ -0,0 +1,258 @@
+---
+/**
+ * CtaAppDownload — Full-page mobile app showcase and download CTA section with device mockup and store buttons.
+ * 
+ * @param {string} badge - Eyebrow badge text.
+ * @param {string} title - Main headline.
+ * @param {string} subtitle - Description text.
+ */
+interface Props {
+  badge?: string;
+  title?: string;
+  subtitle?: string;
+  className?: string;
+}
+
+const {
+  badge = "Mobile Experience",
+  title = "Manage Your Astro Deployments On the Go",
+  subtitle = "Download our native companion mobile application. Monitor real-time builds, latency metrics, and team notifications directly from your pocket.",
+  className = ""
+} = Astro.props;
+---
+
+<section class={`app-download-section ${className}`} aria-labelledby="app-title">
+  <div class="container">
+    <div class="app-card">
+      <div class="app-info">
+        {badge && <span class="app-badge">{badge}</span>}
+        <h2 id="app-title" class="app-title">{title}</h2>
+        <p class="app-subtitle">{subtitle}</p>
+
+        <div class="app-features-mini">
+          <div class="feat-pill">⚡ Instant Push Alerts</div>
+          <div class="feat-pill">📊 Real-Time Analytics</div>
+          <div class="feat-pill">🔒 Biometric Security</div>
+        </div>
+
+        <div class="store-buttons">
+          <a href="#app-store" class="store-btn">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M15.97 6.85c.66-.8 1.11-1.92.99-3.04-.96.04-2.13.64-2.82 1.44-.6.7-.99 1.83-1.02 2.98.08.01.16.02.24.02.88 0 1.95-.58 2.61-1.4z"/></svg>
+            <div class="store-btn__text">
+              <span class="store-btn__sub">Download on the</span>
+              <span class="store-btn__name">App Store</span>
+            </div>
+          </a>
+
+          <a href="#google-play" class="store-btn">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M3.609 1.814L13.792 12 3.61 22.186a2.227 2.227 0 0 1-.22-.968V2.782c0-.361.08-.696.22-.968zm11.24 11.24l2.128 2.129-12.03 6.946 9.902-9.075zm2.933-2.05l2.673 1.543c.876.505.876 1.332 0 1.837l-2.673 1.544-2.338-2.338 2.338-2.586zM4.947 1.87l12.031 6.947-2.128 2.128-9.903-9.075z"/></svg>
+            <div class="store-btn__text">
+              <span class="store-btn__sub">GET IT ON</span>
+              <span class="store-btn__name">Google Play</span>
+            </div>
+          </a>
+        </div>
+      </div>
+
+      <div class="app-visual">
+        <div class="phone-frame">
+          <div class="phone-notch"></div>
+          <div class="phone-screen">
+            <div class="phone-header">
+              <div class="phone-avatar"></div>
+              <span>Production Edge</span>
+              <span class="phone-live">100% UP</span>
+            </div>
+            <div class="phone-chart"></div>
+            <div class="phone-card-mini">✓ Build #402 deployed in 12s</div>
+            <div class="phone-card-mini">⚡ TTFB latency: 14ms</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<style>
+  .app-download-section {
+    padding: var(--sp-20, 5rem) var(--sp-6, 1.5rem);
+    background: var(--c-bg-primary, #030712);
+  }
+
+  .container {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .app-card {
+    background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(10, 15, 30, 0.9) 100%);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: var(--r-2xl, 24px);
+    padding: clamp(2rem, 5vw, 4rem);
+    display: grid;
+    grid-template-columns: 1.2fr 0.8fr;
+    gap: 3rem;
+    align-items: center;
+  }
+
+  .app-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);
+  }
+
+  .app-title {
+    font-size: clamp(2rem, 4vw, 2.8rem);
+    font-weight: 900;
+    color: #fff;
+    line-height: 1.2;
+    letter-spacing: -0.02em;
+    margin: 0 0 1rem;
+  }
+
+  .app-subtitle {
+    font-size: 1.05rem;
+    color: #94a3b8;
+    line-height: 1.6;
+    margin: 0 0 1.75rem;
+  }
+
+  .app-features-mini {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.6rem;
+    margin-bottom: 2rem;
+  }
+
+  .feat-pill {
+    padding: 0.4rem 0.85rem;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 9999px;
+    font-size: 0.82rem;
+    color: #cbd5e1;
+  }
+
+  .store-buttons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+  }
+
+  .store-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.65rem 1.25rem;
+    background: rgba(0, 0, 0, 0.6);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    border-radius: 12px;
+    color: #fff;
+    text-decoration: none;
+    transition: all 0.2s ease;
+  }
+
+  .store-btn:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.3);
+  }
+
+  .store-btn__text {
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+  }
+
+  .store-btn__sub {
+    font-size: 0.65rem;
+    color: #94a3b8;
+    text-transform: uppercase;
+  }
+
+  .store-btn__name {
+    font-size: 1rem;
+    font-weight: 700;
+  }
+
+  /* Phone visual mockup */
+  .app-visual {
+    display: flex;
+    justify-content: center;
+  }
+
+  .phone-frame {
+    width: 250px;
+    height: 400px;
+    background: #020617;
+    border: 3px solid rgba(255, 255, 255, 0.2);
+    border-radius: 36px;
+    padding: 12px;
+    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.8);
+    display: flex;
+    flex-direction: column;
+  }
+
+  .phone-notch {
+    width: 70px;
+    height: 12px;
+    background: #0f172a;
+    border-radius: 999px;
+    margin: 0 auto 12px;
+  }
+
+  .phone-screen {
+    flex: 1;
+    background: rgba(15, 23, 42, 0.8);
+    border-radius: 24px;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .phone-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 0.75rem;
+    color: #fff;
+    font-weight: 700;
+  }
+
+  .phone-live {
+    font-size: 0.65rem;
+    color: #10b981;
+    background: rgba(16, 185, 129, 0.15);
+    padding: 0.15rem 0.4rem;
+    border-radius: 999px;
+  }
+
+  .phone-chart {
+    height: 80px;
+    background: linear-gradient(180deg, rgba(99, 102, 241, 0.3) 0%, transparent 100%);
+    border-bottom: 2px solid #6366f1;
+    border-radius: 8px;
+  }
+
+  .phone-card-mini {
+    padding: 0.5rem;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    font-size: 0.72rem;
+    color: #cbd5e1;
+  }
+
+  @media (max-width: 960px) {
+    .app-card {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>

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

@@ -0,0 +1,267 @@
+---
+/**
+ * CtaGlowBanner — Full-width high-converting CTA section with radial cyber mesh and interactive action group.
+ * 
+ * @param {string} badge - Eyebrow badge.
+ * @param {string} title - Main headline.
+ * @param {string} subtitle - Description text.
+ * @param {string} primaryCtaText - Primary button text.
+ * @param {string} secondaryCtaText - Secondary button text.
+ */
+interface Props {
+  badge?: string;
+  title?: string;
+  subtitle?: string;
+  primaryCtaText?: string;
+  secondaryCtaText?: string;
+  className?: string;
+}
+
+const {
+  badge = "Get Started Today",
+  title = "Ready to Build Something Extraordinary?",
+  subtitle = "Join over 10,000 developers building modern, accessible, and blindingly fast Astro web applications.",
+  primaryCtaText = "Start Building Free",
+  secondaryCtaText = "View Components",
+  className = ""
+} = Astro.props;
+---
+
+<section class={`cta-banner-section ${className}`} aria-labelledby="cta-title">
+  <div class="container">
+    <div class="cta-banner-card">
+      <div class="cta-mesh-bg" aria-hidden="true"></div>
+
+      <div class="cta-content">
+        {badge && <span class="cta-badge">{badge}</span>}
+        <h2 id="cta-title" class="cta-title">{title}</h2>
+        <p class="cta-subtitle">{subtitle}</p>
+
+        <!-- CTA Action Buttons & Email Input -->
+        <div class="cta-actions">
+          <form class="cta-form" onsubmit="event.preventDefault(); alert('Thank you for subscribing!');">
+            <input 
+              type="email" 
+              placeholder="Enter your work email..." 
+              required 
+              class="cta-input" 
+              aria-label="Email address"
+            />
+            <button type="submit" class="cta-btn cta-btn--primary">
+              {primaryCtaText}
+            </button>
+          </form>
+          <a href="/docs/glass-button" class="cta-btn cta-btn--ghost">
+            {secondaryCtaText}
+          </a>
+        </div>
+
+        <!-- Trust Badges Row -->
+        <div class="cta-trust-row">
+          <div class="trust-item">
+            <svg width="16" height="16" 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"/></svg>
+            <span>SOC2 Type II Certified</span>
+          </div>
+          <div class="trust-item">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
+            <span>WCAG 2.1 AA Compliant</span>
+          </div>
+          <div class="trust-item">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg>
+            <span>100/100 Lighthouse Performance</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<style>
+  .cta-banner-section {
+    padding: var(--sp-20, 5rem) var(--sp-6, 1.5rem);
+    background: var(--c-bg-primary, #030712);
+  }
+
+  .container {
+    max-width: 1100px;
+    margin: 0 auto;
+  }
+
+  .cta-banner-card {
+    position: relative;
+    background: linear-gradient(135deg, rgba(20, 25, 55, 0.9) 0%, rgba(10, 15, 30, 0.95) 100%);
+    border: 1px solid rgba(234, 179, 8, 0.25);
+    border-radius: var(--r-2xl, 24px);
+    padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3rem);
+    text-align: center;
+    overflow: hidden;
+    box-shadow: 0 25px 60px -20px rgba(0, 0, 0, 0.8), 0 0 40px -15px rgba(234, 179, 8, 0.15);
+  }
+
+  .cta-mesh-bg {
+    position: absolute;
+    inset: -50%;
+    background: radial-gradient(circle at 50% 50%, rgba(234, 179, 8, 0.12) 0%, rgba(99, 102, 241, 0.1) 40%, transparent 70%);
+    filter: blur(80px);
+    pointer-events: none;
+    animation: rotateMesh 20s linear infinite;
+  }
+
+  @keyframes rotateMesh {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+  .cta-content {
+    position: relative;
+    z-index: 1;
+    max-width: 750px;
+    margin: 0 auto;
+  }
+
+  .cta-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.15);
+    color: #facc15;
+    border: 1px solid rgba(234, 179, 8, 0.3);
+    margin-bottom: var(--sp-4, 1.25rem);
+  }
+
+  .cta-title {
+    font-size: clamp(2.2rem, 5vw, 3.4rem);
+    font-weight: 900;
+    color: #fff;
+    line-height: 1.15;
+    letter-spacing: -0.03em;
+    margin: 0 0 var(--sp-4, 1.25rem);
+  }
+
+  .cta-subtitle {
+    font-size: clamp(1rem, 2vw, 1.2rem);
+    color: #94a3b8;
+    line-height: 1.6;
+    margin: 0 0 2.5rem;
+  }
+
+  .cta-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    margin-bottom: 2.5rem;
+  }
+
+  .cta-form {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: rgba(0, 0, 0, 0.4);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 12px;
+    padding: 0.35rem;
+    max-width: 460px;
+    width: 100%;
+  }
+
+  .cta-input {
+    flex: 1;
+    background: transparent;
+    border: none;
+    padding: 0.75rem 1rem;
+    font-size: 0.95rem;
+    color: #fff;
+    outline: none;
+  }
+
+  .cta-input::placeholder {
+    color: #64748b;
+  }
+
+  .cta-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.8rem 1.4rem;
+    border-radius: 8px;
+    font-size: 0.95rem;
+    font-weight: 700;
+    text-decoration: none;
+    cursor: pointer;
+    transition: all 0.25s ease;
+    white-space: nowrap;
+    border: none;
+  }
+
+  .cta-btn--primary {
+    background: linear-gradient(135deg, #eab308, #d97706);
+    color: #000;
+    box-shadow: 0 4px 15px rgba(234, 179, 8, 0.35);
+  }
+
+  .cta-btn--primary:hover {
+    filter: brightness(1.1);
+    box-shadow: 0 6px 20px rgba(234, 179, 8, 0.5);
+  }
+
+  .cta-btn--ghost {
+    background: rgba(255, 255, 255, 0.05);
+    color: #fff;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    height: 48px;
+    box-sizing: border-box;
+  }
+
+  .cta-btn--ghost:hover {
+    background: rgba(255, 255, 255, 0.12);
+    border-color: rgba(255, 255, 255, 0.25);
+  }
+
+  .cta-trust-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: 1.5rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+  }
+
+  .trust-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.82rem;
+    color: #94a3b8;
+    font-weight: 500;
+  }
+
+  .trust-item svg {
+    color: #eab308;
+  }
+
+  @media (max-width: 640px) {
+    .cta-form {
+      flex-direction: column;
+      background: transparent;
+      border: none;
+      padding: 0;
+    }
+    .cta-input {
+      width: 100%;
+      background: rgba(0, 0, 0, 0.4);
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      border-radius: 8px;
+      box-sizing: border-box;
+    }
+    .cta-btn {
+      width: 100%;
+    }
+  }
+</style>