BlocksStable

Home Hero

Sourcecomponents/blocks/HomeHero.astro

The opener

The startpage opener as one continuous experience: a single fixed, page-wide image that blurs as you scroll, with the hero first, then the frosted testimonial cards floating over the same image below it. Built from our Button, Prompt Pill and the tokens.

Scroll inside the preview — the image blurs and the testimonial cards rise over it.

Startpage hero + testimonials

Built from

Button — the secondary / on-dark CTA.
Prompt Pill — the floating "Talk to Miriam".
Frosted testimonial cards — serif-italic quote, avatar, author & role, floating over the shared image.

Behaviour

One fixed background — the image is position: fixed; both the hero and the testimonials are transparent and scroll over it, so the blur reads as one depth effect.
Scroll blur — sharp through the first 40% of a viewport, then eases to soft (smoothstep) and drifts up. Plain scroll listener; disabled under prefers-reduced-motion.
≤680px — the CTA goes full-width, the pill hides, and the cards stack to one column.

Props

Prop	Type	Default	Notes
`titleLead`	string	`—`	First line of the title (sans). Required.
`titleAccent`	string	`—`	Second line — Tiempos serif italic. Required.
`bgImage`	string	`—`	The one fixed background both sections float over. Required.
`eyebrow`	string	`—`	On-dark label above the title.
`body`	string	`—`	Lead paragraph under the title.
`ctaLabel / ctaHref`	string	`'Work with us'`	The Button CTA and its destination.
`pill`	{ label, sub, avatar, href? }	`—`	The floating Prompt Pill (bottom-right of the hero).
`testimonials`	Item[]	`[]`	The frosted cards that scroll over the fixed image — { quote, author?, role?, avatar? }.

Usage

Drop it as the first block of the home page. It brings its own fixed background — don't wrap it in another section with a background of its own, or the blur won't show through.

<HomeHero
  eyebrow="Swiss Growth Lab"
  titleLead="More than just a"
  titleAccent="Brandingstudio."
  body="Lorem ipsum dolor sit amet…"
  ctaLabel="Work with us" ctaHref="/work-with-us"
  bgImage="/img/hero.jpg"
  pill={{ label: 'Talk to Miriam', sub: 'about your Brand', avatar: '/img/miriam.png', href: '/contact' }}
  testimonials={[
    { quote: 'Paying customers before we’d even launched.', author: 'Simon Tanner', role: 'Tanner', avatar: '/img/simon.webp' },
    { quote: 'A brand that is simply 100 % me.', author: 'Karin Muther', role: 'Coach', avatar: '/img/karin.webp' },
  ]}
/>

Rules

Use a dark, high-contrast image so both the white hero text and the frosted cards read.

Keep testimonials to short, one-line serif quotes.

Don't

Give the testimonials their own background — they float over the hero's.

Add a second CTA — one Button, plus the pill.