Heroes & Sections

AboutStatsSplit — two-column "about us" split: heading + supporting copy and a 2x2 stat-card grid on one side, a single image on the other.

Astro

AnimatedFeatureCardGrid — three labelled groups of three feature cards.

React

ApproachBentoGrid — an asymmetric bento grid of approach/process cards, each with a small generic mockup (a fake browser window, a stacked-layer illustration, or an animated bar chart) built from plain CSS and SVG — no screenshots, no image assets required.

Astro

Copy column paired with a one or two column checklist of benefits.

Astro

Accessible comparison table with a highlighted column and horizontal scroll on mobile.

Astro

Full-bleed brand-gradient CTA banner, the project's single-use-per-page gradient moment.

Astro

Centred call-to-action card with one or two buttons.

Astro

Final-page CTA with a subtle CSS dot-grid pattern masked behind the copy.

Astro

Bordered two-column section pairing a pitch with an inline newsletter signup form.

Astro

Rounded CTA card with copy on one side and an image or placeholder on the other.

Astro

Centred full-page error state with a large code, message and primary/secondary actions.

Astro

Responsive 3-up icon, title and description feature grid with a BYO-SVG icon slot.

Astro

Stack of copy/image feature rows that alternate sides per row.

Astro

Flagship single-feature section with heading, bullet list, CTA and a large visual.

Astro

GalleryGridTriptych — a full-bleed three-image showcase row, no headline or copy.

Astro

HeroAnimatedRouteMap — hero with a perspective SVG street-grid background that progressively draws a route between stops, each stop pinging a one-line "message" tooltip.

React

Centred hero with a linked pill announcement above the headline.

Astro

Full-bleed background image hero with a solid WCAG-AA scrim behind the copy.

Astro

HeroBlobGradient — centred hero over four soft, slowly morphing gradient blobs (pure SVG + CSS keyframes, no canvas/WebGL).

Astro

Centred eyebrow/headline/sub hero with two optional CTAs.

Astro

Product hero with a CSS-only browser or phone frame wrapping the screenshot.

Astro

Centred hero with an inline plain-HTML email capture form wired to any form action.

Astro

Centred hero with a large product screenshot card floating below the fold with a soft glow.

Astro

HeroFullscreenGlassCard — a single full-bleed background image with a centred frosted-glass content card (eyebrow/title/description/CTA).

Astro

Centred hero with a pure-CSS radial gradient mesh backdrop, no shader runtime.

Astro

HeroIntegrationNetwork — hero with a perspective circuit-board grid behind the copy: a spinning hub in the centre wires up to N integration icons, each with a stroke-dash line that draws in on reveal and a brief pulse.

React

HeroLiveDashboardPreview — two-column product hero: copy + bullet list on the left, an animated "live dashboard" mockup on the right (a schedule pane + a zone map with a travelling marker + two connector cards that suggest the product syncing with outside tools).

React

Undecorated headline/sub/CTA hero for editorial or brand pages.

Astro

Copy-left image-right hero with a gradient placeholder fallback when no image is supplied.

Astro

Centred hero with a grayscale-to-colour partner logo strip beneath the fold.

Astro

Full-bleed autoplaying muted video hero with a solid scrim and reduced-motion fallback to the poster frame.

Astro

HeroWireframeGlobe — centred hero with an endlessly spinning CSS/SVG wireframe sphere above the headline.

Astro

Numbered step sequence with a connecting line on desktop, stacked on mobile.

Astro

Grid of linkable integration/partner logo cards.

Astro

MediaGridIntroSection — short eyebrow/heading/body intro stacked above a 2-3up image grid.

Astro

ProcessChipTimeline — a static, zero-JS vertical timeline for a multi-step process.

Astro

ProcessStepsCardGrid — a 4-step process laid out as filled, icon-led cards in a 2-up grid (2x2 on desktop, single column on mobile).

Astro

ProcessStickyScroll — a sticky left panel that tracks whichever numbered step is currently in view on the scrolling right-hand list.

React

ServiceLinkIconGrid — a row of bordered, clickable icon+label cards that link out to service or feature pages (think a site's top-level "what we do" nav, not a features explainer).

Astro

ServicePlatformShowcase — a bento grid of service/offering tiles, a dark "flexibility" panel, and a row of integration initials.

Astro

Horizontal band of big numbers with labels, with a reversed dark-panel variant.

Astro

ToolStackMarquee — a full-bleed, multi-row CSS marquee of tools/technologies with a heading overlaid on top, scrimmed into the section background.

Astro

ValuePropCardsOffset — numbered, icon-free value-proposition cards in a two-column grid, with the second column offset downward for a light masonry feel.

Astro