Navigation: [/sitemap.md](/sitemap.md)

---
type: block
category: hero
title: Hero 4
description: A taller version of the background image hero that fills the viewport. Includes a feature checklist for quick scanning.
---

```astro live props={{ name: 'hero-4' }}
---
import Hero4Block from "@/components/blocks/hero-4.astro"
import placeholderImage from "@/assets/placeholder.webp"
---

<Hero4Block
  title="Full-screen impact for product launches and events"
  description="A taller version of the background image hero that fills the viewport. Includes a feature checklist for quick scanning."
  features={[
    "Zero-JS components by default",
    "Astro-first primitives",
    "Dark mode included",
  ]}
  buttons={[
    { label: "Learn more", href: "/docs/", variant: "default" },
    { label: "Contact sales", href: "#", variant: "secondary" },
  ]}
  image={{ src: placeholderImage, alt: "Abstract background" }}
/>
```