VAN Component Library

All page builder blocks and shared components available in the VAN website. Each block is a Sanity CMS schema that maps to a React component on the front end. Use this as a reference when building new pages.

18 Blocks8 SharedSanity v5

Page Builder Blocks

These blocks are available in the Sanity page builder. Each page document has a sections[] array field where editors can add any combination of these blocks to compose a page layout.

Hero Section

heroSectiondark/light

Large banner with headline, subtext, and up to two CTAs. Supports centered, left-aligned, or split layouts with optional background image.

Used on:HomepageAboutCapabilities

Field	Type	Notes
`heading`*	string
`subhead`	text
`background_image`	image
`cta_text`	string
`cta_url`	url
`secondary_cta_text`	string
`secondary_cta_url`	url
`layout`	string	centered \| left \| split

Text Section

textSectiondark/light

Rich text content block with optional inline images. Configurable alignment and max width.

Field	Type	Notes
`label`	string
`heading`	string
`body`*	array (block + image)
`alignment`	string	left \| center \| right
`max_width`	string	narrow \| medium \| wide \| full

Feature Grid

featureGriddark/light

Grid of feature cards with icon, title, description, and optional link. Configurable columns (2-4).

Used on:HomepageHow We Work

Field	Type	Notes
`heading`	string
`subhead`	text
`items[]`*	object array	icon, title, description, link
`columns`	number	2 \| 3 \| 4

Stats Bar

statsBar

Horizontal display of key metrics/KPIs. Each stat has a value, label, and optional context line.

Used on:HomepageAbout

Field	Type	Notes
`items[]`*	object array	value, label, context

Testimonial Section

testimonialSection

Display client testimonials with quote text, attribution, company, and optional headshot/logo.

Used on:Homepage

Field	Type	Notes
`heading`	string
`testimonials[]`*	object array	quote, name, title, company, logo, headshot

Logo Bar

logoBardark/light

Display partner/client logos in a static grid or infinite-scroll marquee.

Used on:Homepage

Field	Type	Notes
`label`	string
`heading`	string
`description`	text
`logos[]`*	image array
`style`	string	grid \| scroll

CTA Section

ctaSectiondark/light

Call-to-action block. Button variant links to a page; form variant embeds a HubSpot form. Optional background image and brand logos.

Used on:HomepageContactNewsletter

Field	Type	Notes
`heading`*	string
`body`	array (block)
`variant`	string	button \| form
`cta_text`	string
`cta_url`	url
`hubspot_form_id`	string
`background_image`	image
`show_brand_logos`	boolean

Content Carousel

contentCarouseldark/light

Carousel of blog posts, case studies, or podcast episodes. Can be manually curated or auto-filtered by tag.

Field	Type	Notes
`heading`	string
`content_type`*	string	blog \| case_study \| podcast
`items[]`	reference array
`filter_tag`	reference (tag)

Team Grid

teamGriddark/light

Display team members filtered by leadership status or manual selection.

Used on:About

Field	Type	Notes
`heading`	string
`filter`*	string	leadership \| all \| custom
`members[]`	reference array (teamMember)

Embed Section

embedSectiondark/light

Raw HTML embed for third-party widgets (HubSpot forms, Calendly, etc.).

Field	Type	Notes
`heading`	string
`embed_code`*	text

Two Column

twoColumndark/light

Split layout with independent rich text and image content in each column.

Field	Type	Notes
`left_content`*	array (block + image)
`right_content`*	array (block + image)

Video Section

videoSectiondark/light

Embedded video player (YouTube/Vimeo) with heading, description, and optional thumbnail.

Field	Type	Notes
`heading`	string
`body`	array (block)
`video_url`*	url
`thumbnail`	image

FAQ Section

faqSectiondark/light

Expandable accordion for frequently asked questions. Each item has a question and rich text answer.

Used on:WAIOCapabilities

Field	Type	Notes
`heading`	string
`items[]`*	object array	question (string), answer (block[])

Spacer

spacer

Visual spacing element. Three sizes available for controlling vertical rhythm between sections.

Field	Type	Notes
`size`*	string	small \| medium \| large

Capabilities Section

capabilitiesSectiondark/light

Branded capability cards (1-6) with title, tagline, description, link, and agency tags.

Used on:HomepageCapabilities

Field	Type	Notes
`label`	string
`heading`*	string
`capabilities[]`*	object array	title, tagline, description, link_text, link_url, agencies[]

Differentiator Section

differentiatorSectiondark/light

Competitive differentiator cards with optional badge and supporting stats.

Used on:Homepage

Field	Type	Notes
`heading`*	string
`cards[]`*	object array (1-4)	title, badge, description, stats[]

Network Section

networkSectiondark/light

Display agency network brands with name, description, and optional CTA.

Used on:HomepageAgencies

Field	Type	Notes
`heading`*	string
`subheading`	text
`agencies[]`*	object array	name, description, link_url, cta_text, cta_url

Audience Section

audienceSectiondark/light

Target audience persona cards with Lucide icons, description, and CTAs. 1-4 personas.

Used on:Homepage

Field	Type	Notes
`heading`*	string
`subheading`	text
`personas[]`*	object array (1-4)	title, icon (Lucide name), description, cta_text, cta_url

Shared Components

Reusable React components used across multiple pages. These are not Sanity schemas but front-end components imported directly in page files.

PageLayout

components/shared/PageLayout.tsx

Root page wrapper. Renders Navbar, main content area, and Footer.

Prop	Type	Default / Notes
`children`	`ReactNode`

SectionWrapper

components/shared/SectionWrapper.tsx

Reusable section container with responsive padding, theme support, and max-width constraint (1440px).

Prop	Type	Default / Notes
`children`	`ReactNode`
`theme`	`'dark' \| 'light'`	`'light'`
`isDark`	`boolean`	Override for theme
`className`	`string`
`id`	`string`
`noPadding`	`boolean`

PageHero

components/shared/PageHero.tsx

Page header hero section with responsive typography, optional badge/pretitle, CTAs, and background image.

Prop	Type	Default / Notes
`heading / title`	`string`
`subhead / description`	`string`
`badge / pretitle`	`string`
`theme`	`'dark' \| 'light'`
`size`	`'large' \| 'compact'`
`cta_text`	`string`
`cta_url`	`string`
`backgroundImage`	`string`

Breadcrumbs

components/shared/Breadcrumbs.tsx

Navigation breadcrumb trail. Overlays onto hero section with negative margin. Monospace font, slash separators.

Prop	Type	Default / Notes
`items`	`Array<{ label, href? }>`
`theme`	`'dark' \| 'light'`	`'dark'`

PreFooterCTA

components/shared/PreFooterCTA.tsx

Call-to-action section before footer. Centered heading + button. Dark variant has background image.

Prop	Type	Default / Notes
`heading / title`	`string`	`"Book a Discovery Call"`
`body / description`	`string`
`buttonText`	`string`	`"Book a Discovery Call"`
`buttonHref`	`string`	`"/book-a-call"`
`theme`	`'dark' \| 'light'`

FAQAccordion

components/shared/FAQAccordion.tsx

Client-side expandable FAQ. Manages open/close state with smooth chevron rotation and border hover effects.

Prop	Type	Default / Notes
`items`	`Array<{ question, answer }>`
`theme`	`'dark' \| 'light'`
`isDark`	`boolean`

StatsBar

components/shared/StatsBar.tsx

Horizontal stats display with dynamic grid columns. Cyan accent on dark theme, teal on light.

Prop	Type	Default / Notes
`stats`	`Array<{ value?, label, description? }>`
`theme`	`'dark' \| 'light'`	`'dark'`

HubSpotForm

components/shared/HubSpotForm.tsx

HubSpot form embed with lazy script loading. Includes PlaceholderForm fallback component.

Prop	Type	Default / Notes
`formId`	`string`	required
`portalId`	`string`	optional, defaults to VAN portal
`className`	`string`

VAN Component Library

18 Blocks8 SharedSanity v5

Page Builder Blocks

These blocks are available in the Sanity page builder. Each page document has a sections[] array field where editors can add any combination of these blocks to compose a page layout.

Hero Section

heroSectiondark/light

Large banner with headline, subtext, and up to two CTAs. Supports centered, left-aligned, or split layouts with optional background image.

Used on:HomepageAboutCapabilities

Field	Type	Notes
`heading`*	string
`subhead`	text
`background_image`	image
`cta_text`	string
`cta_url`	url
`secondary_cta_text`	string
`secondary_cta_url`	url
`layout`	string	centered \| left \| split

Text Section

textSectiondark/light

Rich text content block with optional inline images. Configurable alignment and max width.

Field	Type	Notes
`label`	string
`heading`	string
`body`*	array (block + image)
`alignment`	string	left \| center \| right
`max_width`	string	narrow \| medium \| wide \| full

Feature Grid

featureGriddark/light

Grid of feature cards with icon, title, description, and optional link. Configurable columns (2-4).

Used on:HomepageHow We Work

Field	Type	Notes
`heading`	string
`subhead`	text
`items[]`*	object array	icon, title, description, link
`columns`	number	2 \| 3 \| 4

Stats Bar

statsBar

Horizontal display of key metrics/KPIs. Each stat has a value, label, and optional context line.

Used on:HomepageAbout

Field	Type	Notes
`items[]`*	object array	value, label, context

Testimonial Section

testimonialSection

Display client testimonials with quote text, attribution, company, and optional headshot/logo.

Used on:Homepage

Field	Type	Notes
`heading`	string
`testimonials[]`*	object array	quote, name, title, company, logo, headshot

Logo Bar

logoBardark/light

Display partner/client logos in a static grid or infinite-scroll marquee.

Used on:Homepage

Field	Type	Notes
`label`	string
`heading`	string
`description`	text
`logos[]`*	image array
`style`	string	grid \| scroll

CTA Section

ctaSectiondark/light

Call-to-action block. Button variant links to a page; form variant embeds a HubSpot form. Optional background image and brand logos.

Used on:HomepageContactNewsletter

Field	Type	Notes
`heading`*	string
`body`	array (block)
`variant`	string	button \| form
`cta_text`	string
`cta_url`	url
`hubspot_form_id`	string
`background_image`	image
`show_brand_logos`	boolean

Content Carousel

contentCarouseldark/light

Carousel of blog posts, case studies, or podcast episodes. Can be manually curated or auto-filtered by tag.

Field	Type	Notes
`heading`	string
`content_type`*	string	blog \| case_study \| podcast
`items[]`	reference array
`filter_tag`	reference (tag)

Team Grid

teamGriddark/light

Display team members filtered by leadership status or manual selection.

Used on:About

Field	Type	Notes
`heading`	string
`filter`*	string	leadership \| all \| custom
`members[]`	reference array (teamMember)

Embed Section

embedSectiondark/light

Raw HTML embed for third-party widgets (HubSpot forms, Calendly, etc.).

Field	Type	Notes
`heading`	string
`embed_code`*	text

Two Column

twoColumndark/light

Split layout with independent rich text and image content in each column.

Field	Type	Notes
`left_content`*	array (block + image)
`right_content`*	array (block + image)

Video Section

videoSectiondark/light

Embedded video player (YouTube/Vimeo) with heading, description, and optional thumbnail.

Field	Type	Notes
`heading`	string
`body`	array (block)
`video_url`*	url
`thumbnail`	image

FAQ Section

faqSectiondark/light

Expandable accordion for frequently asked questions. Each item has a question and rich text answer.

Used on:WAIOCapabilities

Field	Type	Notes
`heading`	string
`items[]`*	object array	question (string), answer (block[])

Spacer

spacer

Visual spacing element. Three sizes available for controlling vertical rhythm between sections.

Field	Type	Notes
`size`*	string	small \| medium \| large

Capabilities Section

capabilitiesSectiondark/light

Branded capability cards (1-6) with title, tagline, description, link, and agency tags.

Used on:HomepageCapabilities

Field	Type	Notes
`label`	string
`heading`*	string
`capabilities[]`*	object array	title, tagline, description, link_text, link_url, agencies[]

Differentiator Section

differentiatorSectiondark/light

Competitive differentiator cards with optional badge and supporting stats.

Used on:Homepage

Field	Type	Notes
`heading`*	string
`cards[]`*	object array (1-4)	title, badge, description, stats[]

Network Section

networkSectiondark/light

Display agency network brands with name, description, and optional CTA.

Used on:HomepageAgencies

Field	Type	Notes
`heading`*	string
`subheading`	text
`agencies[]`*	object array	name, description, link_url, cta_text, cta_url

Audience Section

audienceSectiondark/light

Target audience persona cards with Lucide icons, description, and CTAs. 1-4 personas.

Used on:Homepage

Field	Type	Notes
`heading`*	string
`subheading`	text
`personas[]`*	object array (1-4)	title, icon (Lucide name), description, cta_text, cta_url

Shared Components

Reusable React components used across multiple pages. These are not Sanity schemas but front-end components imported directly in page files.

PageLayout

components/shared/PageLayout.tsx

Root page wrapper. Renders Navbar, main content area, and Footer.

Prop	Type	Default / Notes
`children`	`ReactNode`

SectionWrapper

components/shared/SectionWrapper.tsx

Reusable section container with responsive padding, theme support, and max-width constraint (1440px).

Prop	Type	Default / Notes
`children`	`ReactNode`
`theme`	`'dark' \| 'light'`	`'light'`
`isDark`	`boolean`	Override for theme
`className`	`string`
`id`	`string`
`noPadding`	`boolean`

PageHero

components/shared/PageHero.tsx

Page header hero section with responsive typography, optional badge/pretitle, CTAs, and background image.

Prop	Type	Default / Notes
`heading / title`	`string`
`subhead / description`	`string`
`badge / pretitle`	`string`
`theme`	`'dark' \| 'light'`
`size`	`'large' \| 'compact'`
`cta_text`	`string`
`cta_url`	`string`
`backgroundImage`	`string`

Breadcrumbs

components/shared/Breadcrumbs.tsx

Navigation breadcrumb trail. Overlays onto hero section with negative margin. Monospace font, slash separators.

Prop	Type	Default / Notes
`items`	`Array<{ label, href? }>`
`theme`	`'dark' \| 'light'`	`'dark'`

PreFooterCTA

components/shared/PreFooterCTA.tsx

Call-to-action section before footer. Centered heading + button. Dark variant has background image.

Prop	Type	Default / Notes
`heading / title`	`string`	`"Book a Discovery Call"`
`body / description`	`string`
`buttonText`	`string`	`"Book a Discovery Call"`
`buttonHref`	`string`	`"/book-a-call"`
`theme`	`'dark' \| 'light'`

FAQAccordion

components/shared/FAQAccordion.tsx

Client-side expandable FAQ. Manages open/close state with smooth chevron rotation and border hover effects.

Prop	Type	Default / Notes
`items`	`Array<{ question, answer }>`
`theme`	`'dark' \| 'light'`
`isDark`	`boolean`

StatsBar

components/shared/StatsBar.tsx

Horizontal stats display with dynamic grid columns. Cyan accent on dark theme, teal on light.

Prop	Type	Default / Notes
`stats`	`Array<{ value?, label, description? }>`
`theme`	`'dark' \| 'light'`	`'dark'`

HubSpotForm

components/shared/HubSpotForm.tsx

HubSpot form embed with lazy script loading. Includes PlaceholderForm fallback component.

Prop	Type	Default / Notes
`formId`	`string`	required
`portalId`	`string`	optional, defaults to VAN portal
`className`	`string`