Sections Library

Compact left-aligned page header with eyebrow and title only.

Compact left-aligned page header with title and supporting text.

Compact centered page header with eyebrow and title only.

Compact centered page header with title and supporting text.

Editorial header with primary-color accent rules, oversized heading, and centered quote copy.

Centered hero layout with headline, supporting copy, and CTA group.

Background-led Hero_1 variant with left-aligned content and a simpler header feel.

Background-image hero with overlay copy and CTA handling.

Hero with parallax motion for more immersive top-of-page storytelling.

Split hero with content on one side and supporting media on the other.

Procedural WebGL orb hero with token-derived color, pointer gravity, and a deterministic static fallback.

Particle field hero that assembles a short visual word, repels around the pointer, and heals back into place.

Full-bleed low-resolution canvas world with token-derived color, compact signal labels, and pointer relighting.

Interactive spring-mesh hero with pointer deformation, quality tiers, and a stable static fallback.

Full-bleed generated terrain hero with layered depth, atmospheric motion, and restrained pointer surveying.

Spatial WebGL workflow hero with an extruded client mark, connected orchestration nodes, flowing signals, and deterministic fallbacks.

Side-by-side comparison cards for choosing between options or offers.

Dark immersive why-us band with four glass benefit cards over a background image and a centered CTA.

Four image-led consultation channels with calm dark footer bars for on-site, video, phone, and showroom advice.

Feature list on one side with supporting image or media on the other.

Compact benefit pillar grid with optional CTA for quick value communication.

Card grid for featured projects, curated entries, or highlighted CMS content picks.

Sticky intro copy with stacked highlight cards for emphasis and rhythm.

Standalone service, benefit, or process card stack with optional mobile sticky rhythm and 3/4/5-card layouts.

Centered intro with a clean principles or values card grid.

Four-up or multi-card overview section for services, offers, or programs.

Alternating timeline with media/content rhythm and central progress rail.

Visual comparison gallery for before-and-after transformations or outcomes.

Split layout with explanatory copy and a benefit checklist.

Editorial split section with a support card layered over media.

Collage-style image layout with editorial text and CTA support.

Horizontal CMS gallery for project detail pages with arrow, swipe, scroll-snap, and keyboard lightbox navigation.

Compact CMS-fed project media collection with grid or masonry layouts and an optional external action.

Straightforward split section with image, text, and CTA group.

Contained image-left/content-right service split with checklist bullets and one CTA.

Two-up CTA section for presenting distinct next-step actions side by side.

Editorial contact form with richer field set, consent, and submission states.

Full contact-page section with four compact method cards, a lead form, and a focused assist card for fast channels like WhatsApp.

Compact inquiry section composed with the shadcn-style Field API, React Hook Form, and Zod validation.

Contact-page split with a floating-label lead form and compact sticky aside for social/contact links.

Service-page contact CTA section with intro copy, benefit pills, booking/WhatsApp action, and a compact inquiry form panel.

Callback CTA section with benefit pills, direct-call phone row, divider, secondary configurator card, and a short stepped callback form.

Split contact section with intro copy, form, and direct contact details.

Guided multi-step form flow for longer qualification or request journeys.

Email-only newsletter or waitlist capture with explicit delivery states and no account credentials.

Four-step project brief with step-scoped schema validation, calm progress navigation, and a final review state.

Continuous single-track logo marquee for partners, clients, or certifications.

Statement-led trust section with supportive logo row beneath.

Single featured testimonial section with speaker context and authority framing.

Editorial testimonial grid with mixed card sizing and a featured trust block.

Three-up testimonial carousel with a dynamically featured center card, ratings, avatars, and compact arrow controls.

Carousel-style testimonial section with ratings and motion-based browsing.

Team or leadership grid with avatar-style portraits, bios, roles, and optional social links.

Team or leadership grid with square portrait cards for a more editorial team showcase.

Centered FAQ card with smooth accordion reveal and rotating plus-to-minus icon.

Split FAQ with left intro copy, CTA, card accordions, and independent multi-open answers.

Broad search and filtering section for products or structured content libraries.

Directory-style section for content indexes or structured inventories.

Offer landing section with facts, delivery options, and CTA framing.

Compact category grid for browsing tracks or disciplines.

Expandable curriculum section for module-by-module breakdowns.

Expert grid with topic badges for credibility and team visibility.

Compact card-based FAQ with readable question type and optional download support.

Split FAQ with a sticky intro and a compact question column.

Quiet divider-led FAQ for long pages and compact support areas.

Audience fit and outcomes section for readiness and expected results.

Lead expert profile split with portrait, bio, and credibility stats.

Schedule ledger section for upcoming sessions, statuses, and optional filters.

Grouped logo section for partners, supporters, or ecosystem members.

Promo banner section with background image, supporting copy, and single CTA.

Supportive waitlist or alternative section for secondary actions.

Upcoming session listings in detailed or compact schedule formats.

Featured project index section with media collage cards, tags, stats, and detail links.

Editorial case-study header with separated title, metadata, project media, and outcome rail.

Case-study narrative section with long-form story copy and process or outcome rows.

Editorial overview for article indexes and publishing hubs with featured-story and equal card-grid modes.

Post-entry hero with breadcrumbs, image, title, and article metadata.

Long-form article layout with table of contents, content column, and reading structure.

Calm Swiss B2B article content section with optional short answer, trust, FAQ, sources, related articles, and one CTA.

Separate premium article header with category, full-width title, metadata row, and 4:3 hero image.

Reusable section header stack with tagline, heading, supporting copy, and CTA group.

Default flat section surface for normal reusable sections without decorative backgrounds.

Quiet elevated section band for separating stacked content without decorative effects.

Subtle texture overlay on the normal surface layer for optional editorial/service bands.

Restrained grid section surface for structured strategy, comparison, or case-study sections.

Dapper-inspired token surface with a light/dark-safe texture overlay and token-colored pixel clusters.

CTA/footer-ready brand surface from tokens with the same subtle reusable texture overlay.

Fixed token-colored scroll progress indicator for long pages and editorial flows.

Opt-in outline cursor follower that expands over links, buttons, and marked interactive targets.

Precise pointer dot with an eased outer ring and compact pressed state for expressive interfaces.

Broad semantic-color pointer halo that adds atmosphere without obscuring the underlying target.

Pointer-following action bubble that reads short labels from data-cursor-label targets.

Fixed six-node pointer trail with bounded interpolation and no idle animation loop.

Structured legal, privacy, imprint, or policy page section with summary metadata and readable content blocks.

Primary site navbar with dropdowns, locale handling, theme toggle support, and mobile menu behavior.

Alternative premium navbar with simpler links, dual CTAs, and the shared responsive menu system.

Simple logo-left, links-right navbar with stable dropdowns, active states, and mobile menu behavior for lean marketing sites.

Default site footer with link groups, legal links, and system-level project metadata.

Single-color footer with link columns, contact information, and newsletter capture form.

Editorial footer with signup, oversized CTA rail, and a denser link/meta system.

Column-based footer with brand CTA, contact links, social icons, grouped navigation, and optional partner mark.

Lightweight cookie notice for informational consent flows with minimal interruption.

Full cookie banner with accept, reject, and settings controls for stronger consent handling.

Centered cookie consent manager with category-level preferences and stronger privacy controls.

Not-found state page with strong fallback messaging and recovery actions.

Full-bleed video hero with tokenized overlay, CTA pair, and optional preview card.

About/proof split with brand mark, lead statement, proof points, and CTA.

Feature tabs with a CMS-friendly content panel and supporting image.

Image-led portfolio cards with primary-color stat chips and optional all-projects CTA.

Customer quote paired with a video testimonial preview.

Split CTA with a video preview and tokenized action pair.

CMS-ready lead capture form with configurable fields, choice cards, endpoint, and submit label.

Image-led team grid with roles and optional social links; clean CMS collection shape.

Alternating history timeline with active sticky year and optional illustrations.

Filterable project/reference index with gallery cards, counts, metrics, and pagination.

Editorial project index with a lead case study, supporting cards, filters, and pagination.

Compact project highlight teaser for about/service pages, linked to a full project index.

Two-column comparison cards with bullets, badges, negative/positive states, and metric blocks.

Six-card benefit grid for financing, service, and USP explanations.

Image-led benefit cards with checklist bullets for service pages, offers, and visual proof blocks.

Split copy plus numbered process steps for explaining paths and workflows.

Compact process cards connected by directional arrows for short service and onboarding flows.

Numbered 2-4 tier cards for choosing a level of work before a quote, with one featured recommended tier and proof footers. No prices.

Centered 3-5 step icon timeline with tinted bubbles, number badges, and a shared connector line.

Rounded media with stacked dark proof badges beside eyebrow, heading, border-free checklist, and CTA.

Service outcome cards that pair concise benefit copy with editable proof metrics.

Image-led split section with overlaid quote, support cards, and optional CTA.

Google-style review cards with names, dates, rating text, and aggregate badge.

Editorial service hero with supporting statement, proof figures, and two clear actions.

Responsive service grid with icons, individual links, and an optional conversion card.

Comparison-ready package cards with prices, features, badges, and optional add-ons.

CMS-ready case-study section with scrollable desktop and mobile website captures.

Campaign proof section combining outcome figures with a compact social profile preview.

Full-width project outcome band with concise context and high-signal metrics.

Long-form case-study blocks with structured facts and an optional closing action.

Quiet project testimonial band with compact attribution.

Strong closing CTA band with brand surface, concise copy, and paired actions.

Editorial numbered service index with sticky intro, capability tags, desktop hover emphasis, and stable mobile in-view emphasis.

Problem-led service section with high-signal bottleneck cards and a closing response band.

Modular service suite with included deliverables, proof metrics, icons, and optional detail links.

Sticky-copy workflow section with numbered delivery rows and an operational aside.

Brand-surface assurance grid for governance, measurement, handoff, and launch readiness.

Responsive coverage table with regional overlap, outcomes, highlights, and closing note.

Form-emphasis six-step local-service qualification flow with honest step progress, one focused choice group per step, review, consent, and compatible endpoint delivery.

Image-forward service cards with a static grid for 3 or fewer items and shared swipe, keyboard, dots, and arrow carousel controls for 4+.

Contextual project image paired with concrete trust reasons and an optional direct phone card.

Wide project-image closing CTA with a readable overlay and primary plus optional secondary action.

Compact, logo-band-like row for verifiable regional service, response, insurance, and contact signals.

Centered company story framed by a responsive editorial orbit of project images.

Wide project photograph with a compact, high-contrast proof metric overlay.

Local-service campaign navigation with either a compact glass overlay or a utility bar and flat main navigation.

Editorial image/list/image service rail for campaigns where real work should carry as much weight as service copy.

Compact email signup framed by up to six contextual project images and delivered through the existing signup route.

Full-bleed local-service hero with overlay navigation, locality and review proof, mobile CTAs, and a desktop quick-quote card.

Two image-led service categories with detailed service links, per-card calls to action, and a closing conversion prompt.

Image-led primary service area with nearby-area cards, locality details, and a direct availability action.

High-intent contact section with phone, email, address, business hours, contextual image, and conversion action.

Image-led pool-builder campaign page with a compact 58vh split hero, qualification form, story collage, project proof, services, testimonials, image metrics, FAQ, and business footer.

Dark spotlight campaign page with gradient-accent hero, count-up numbers band, service carousel, process, testimonials, FAQ, panel CTA, mobile menu, and sticky mobile actions.

Full-bleed photo hero with glass badge, display heading with gradient accent words, trust row, dual pill CTAs, and star rating.

Scroll-triggered count-up proof numbers with labels for campaign pages.

Dismissible promo bar with periodic shine sweep and optional scroll collapse.

Persistent mobile-only bottom action bar pairing an outline call button with a solid primary CTA.

Lean roofing campaign page with a compact locality/review banner, calm image-overlay hero, early trust and services, and an intent-loaded self-hosted Cal.com booking flow.

Contractor campaign page with an inline quick quote, full lead qualification, service-category cards, company proof, local coverage, reviews, FAQ, contact hours, and final CTA.

Reference-led full campaign page with utility navigation, compact split hero, trust band, image story, asymmetric services, project proof, reviews, impact metrics, qualification form, blog, signup orbit, and rich footer.