Components and blocks built for Astro
Split layout with features, social proof, and a side-by-side image. Works for product pages and SaaS landing pages.
- Ship pages faster with blocks
- Consistent design system tokens
- Dark mode included
FD
AV
UI
---
import Hero6Block from "@/components/blocks/hero-6.astro"
import avatarSil from "@/assets/avatar-sil-veltman.webp"
import placeholderImage from "@/assets/placeholder.webp"
---
<Hero6Block
title="Components and blocks built for Astro"
description="Split layout with features, social proof, and a side-by-side image. Works for product pages and SaaS landing pages."
features={[
"Ship pages faster with blocks",
"Consistent design system tokens",
"Dark mode included",
]}
buttons={[
{ label: "Browse blocks", href: "/blocks/", variant: "default" },
{ label: "Documentation", href: "/docs/", variant: "secondary" },
]}
socialProof={{
avatars: [
{ image: avatarSil, initials: "FD", name: "Sil Veltman" },
{ image: avatarSil, initials: "AV", name: "Sil Veltman" },
{ image: avatarSil, initials: "UI", name: "Sil Veltman" },
],
rating: 5,
text: "Loved by Astro developers",
}}
image={{ src: placeholderImage, alt: "Product screenshot" }}
/>