File: src/blocks/hero/Hero02.astro

Same split layout as Hero01, but replaces the eyebrow with a review row: overlapping avatars, star rating, and “from {reviewCount} reviews”.

Config (blocks.ts → hero02)

hero02: {
  heading: "I build fast marketing sites",
  subheading: "Astro, Tailwind, and performance-first delivery.",
  primaryCta: "View work",
  primaryCtaUrl: "/work/",
  secondaryCta: "Contact",
  secondaryCtaUrl: "/contact/",
  showStats: false,
  image: "/images/hero.svg",
  imageAlt: "Workspace preview",
  imageAspectRatio: "4/3",
  imagePosition: "right",
  rating: 5,
  reviewCount: 128,
  reviewAvatars: [
    { src: "/images/testimonials/sarah.svg", alt: "Sarah Chen" },
    { src: "/images/testimonials/marcus.svg", alt: "Marcus Webb" },
    { initials: "ER", alt: "Elena Ruiz" },
  ],
},

Pass as many reviewAvatars as you need — there is no hard limit. Use src and/or initials.

Add to a page

---
import Hero02 from "@/blocks/hero/Hero02.astro";
---

<Hero02 />

<Hero02
  reviewCount={240}
  rating={5}
  reviewAvatars={[
    { src: "/images/testimonials/sarah.svg", alt: "Sarah" },
    { src: "/images/testimonials/marcus.svg", alt: "Marcus" },
  ]}
/>

Props

← Hero versions · Blocks overview