Everything you need to build with Astro
A split hero with a feature checklist, action buttons, and social proof on the left — and a product image on the right.
- Zero-JS components by default
- shadcn-compatible installation
- Astro-first primitives
- Fully accessible and keyboard-navigable
AM
KL
SV
---
import Hero5Block from "@/components/blocks/hero-5.astro"
import avatarSil from "@/assets/avatar-sil-veltman.webp"
import placeholderImage from "@/assets/placeholder.webp"
---
<Hero5Block
title="Everything you need to build with Astro"
description="A split hero with a feature checklist, action buttons, and social proof on the left — and a product image on the right."
features={[
"Zero-JS components by default",
"shadcn-compatible installation",
"Astro-first primitives",
"Fully accessible and keyboard-navigable",
]}
buttons={[
{ label: "Get started", href: "/docs/", variant: "default" },
{ label: "Components", href: "/components/", variant: "secondary" },
]}
socialProof={{
avatars: [
{ image: avatarSil, initials: "AM", name: "Sil Veltman" },
{ image: avatarSil, initials: "KL", name: "Sil Veltman" },
{ image: avatarSil, initials: "SV", name: "Sil Veltman" },
],
rating: 5,
text: "4.9 from product teams",
}}
image={{ src: placeholderImage, alt: "Product screenshot" }}
/>