Sections

Hero Glass

Centered hero with glassmorphism card overlay, animated orbs, and trust indicators.

glassmorphismanimated orbstrust indicatorsresponsive

Live Preview

Your Complete Component Library

Build stunning landing pages and apps with 200+ accessible, responsive, and customizable components.

Trusted by 5,000+ developers

A B C D +

Usage

Copy and paste this code into your Astro page:

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

<HeroGlass />

Manual Installation

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

---
// HeroGlass.astro
---
<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>
  <div class="container">
    <div class="hero-glass__card">
      <div class="hero-glass__topbar">
        <div class="hero-glass__dots"><span></span><span></span><span></span></div>
        <span class="hero-glass__label">Astro Components</span>
      </div>
      <h1 class="hero-glass__title">Your Complete Component Library</h1>
      <p class="hero-glass__subtitle">Build stunning landing pages.</p>
      <div class="hero-glass__actions">
        <button class="hero-glass__btn hero-glass__btn--primary">Get Started</button>
        <button class="hero-glass__btn hero-glass__btn--secondary">Watch Demo</button>
      </div>
    </div>
  </div>
</section>

<style>
  .hero-glass {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .hero-glass__card {
    max-width: 700px;
    padding: var(--sp-10);
    background: rgba(10,10,10,0.6);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--r-xl);
  }
  /* ... rest of styles ... */
</style>