Wayfinder

Default

Case study

A better workflow for creative teams

Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. Mattis mauris semper sed amet vitae sed turpis id. Id dolor praesent donec est. Odio penatibus risus viverra tellus varius sit neque erat velit.

Et vitae blandit facilisi magna lacus commodo. Vitae sapien duis odio id et. Id blandit molestie auctor fermentum dignissim. Lacus diam tincidunt ac cursus in vel. Mauris varius vulputate et ultrices hac adipiscing egestas.

Get started

Screenshot / Image

Text only

Case study

A better workflow for creative teams

Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. Mattis mauris semper sed amet vitae sed turpis id. Id dolor praesent donec est. Odio penatibus risus viverra tellus varius sit neque erat velit.

Et vitae blandit facilisi magna lacus commodo. Vitae sapien duis odio id et. Id blandit molestie auctor fermentum dignissim. Lacus diam tincidunt ac cursus in vel. Mauris varius vulputate et ultrices hac adipiscing egestas.

Get started

No CTA

Case study

A better workflow for creative teams

Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. Mattis mauris semper sed amet vitae sed turpis id. Id dolor praesent donec est. Odio penatibus risus viverra tellus varius sit neque erat velit.

Et vitae blandit facilisi magna lacus commodo. Vitae sapien duis odio id et. Id blandit molestie auctor fermentum dignissim. Lacus diam tincidunt ac cursus in vel. Mauris varius vulputate et ultrices hac adipiscing egestas.

Single column body

Case study

A better workflow for creative teams

Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. Mattis mauris semper sed amet vitae sed turpis id. Id dolor praesent donec est. Odio penatibus risus viverra tellus varius sit neque erat velit.

Get started

Props

Prop	Type	Default	Description
eyebrow	string	—	Small label above the headline
headline	string	—	Required. Large Cal Sans heading
bodyLeft	string	—	Body copy — left column, or full-width if no bodyRight
bodyRight	string	—	Body copy — right column. Omit for single-column layout
button	{ label, href }	—	CTA button. Renders only when both fields are set
image	SanityImage	—	Screenshot/image with fade. Omit to hide entirely

Usage

tsx

import { HeroSection } from '@/components/sections/hero-section'

// From Sanity page builder (heroSection block)
<HeroSection block={block} />

// Standalone
<HeroSection
  block={{
    _type:     'heroSection',
    eyebrow:   'Case study',
    headline:  'A better workflow',
    bodyLeft:  'First column copy...',
    bodyRight: 'Second column copy...',
    button:    { label: 'Get started', href: '/contact' },
    image:     sanityImage,
  }}
/>

Sanity fields

Prop	Type	Default	Description
eyebrow	string	optional	Eyebrow label above headline
headline	string	required	Main heading
bodyLeft	text	optional	Left body column
bodyRight	text	optional	Right body column — leave blank for single column
button	object	optional	label + href fields
image	image	optional	Screenshot or feature image with hotspot