Sections glassmorphismanimated orbstrust indicatorsresponsive

Hero Glass

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

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 the full block below to use this component with its imports.

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

<HeroGlass />
--- import { HeroGlass } from 'astro-component-kit'; --- <HeroGlass />

Manual Installation

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

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

Quick Info

Category
Sections
Filename
HeroGlass.astro
Dependencies
None — pure Astro + CSS
Tags
glassmorphismanimated orbstrust indicatorsresponsive