Sections

Hero Split

Split-screen hero with content side and browser mockup visual side.

splitbrowser mockupstatsresponsive

Live Preview

Open Source · MIT

Ship Faster with Premium Components

Stop building from scratch. Use production-ready, accessible, and responsive components.

200+ Components

10K+ Downloads

5K+ Stars

Usage

Copy and paste this code into your Astro page:

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

<HeroSplit />

Manual Installation

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

---
// HeroSplit.astro
---
<section class="hero-split">
  <div class="hero-split__content">
    <span class="hero-split__badge">Open Source · MIT</span>
    <h1 class="hero-split__title">Ship Faster with Premium Components</h1>
    <p class="hero-split__subtitle">Stop building from scratch.</p>
    <div class="hero-split__actions">
      <button class="hero-split__btn hero-split__btn--primary">Start Building</button>
      <button class="hero-split__btn hero-split__btn--ghost">Documentation</button>
    </div>
    <div class="hero-split__stats">
      <div class="hero-split__stat">
        <span class="hero-split__stat-num">200+</span>
        <span class="hero-split__stat-label">Components</span>
      </div>
    </div>
  </div>
  <div class="hero-split__visual" aria-hidden="true">
    <!-- Browser mockup -->
  </div>
</section>

<style>
  .hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-12);
    align-items: center;
    min-height: 85vh;
    padding: var(--sp-12) var(--sp-8);
  }
  /* ... rest of styles ... */
</style>