---
// HeroGradient.astro
---
<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">Build Beautiful Interfaces</h1>
    <p class="hero-gradient__subtitle">Premium open-source UI components for Astro.</p>
    <div class="hero-gradient__actions">
      <button class="hero-btn hero-btn--primary">Get Started</button>
      <button class="hero-btn hero-btn--glass">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); }
  }
  /* ... rest of styles ... */
</style>