Sections

Hero Gradient

Full-screen hero with animated gradient background and glassmorphism badge.

gradientanimatedglassfullscreen

Live Preview

⚡ 200+ Components

Build Beautiful Interfaces

Premium open-source UI components for Astro. Copy, paste, and ship faster.

Usage

Copy and paste this code into your Astro page:

---
import { HeroGradient } from 'astro-component-kit';
---

<HeroGradient />

Manual Installation

If you are not using the npm package, create a new file src/components/sections/HeroGradient.astro and paste the following code:

---
// 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>