P Purpose

Primary conversion surface for services, solutions, and campaign landing pages. Split layout: messaging left, interactive canvas animation right. Recognition strip (Forbes, EY, Deloitte) and compact client logo grid below for immediate social proof.

W When to Use

• Services pages (/agentic-ai, /automation, /consulting) as top-of-page hero
• Solution landing pages for specific verticals (healthcare, financial services)
• Campaign landing pages where a CTA pair (primary + secondary) is critical
• High-intent pages where decisive conversion action matters
• Not for the homepage — use HERO-HOME-01 there

L Layout

Two-column grid (1fr 1fr) inside --content-max. Left: eyebrow, headline with morph slot cycling 3 words on 2.8s intervals, description, two CTAs, recognition strip. Right: canvas-based LLM token animation with mouse parallax. Full-bleed particle field background at 3% opacity. Collapses to single column below 960px.

I Required Inputs

• Eyebrow — mono, uppercase, e.g. "Agentic AI Consulting"
• Headline — static part + 2–3 morph words cycling every 2.8s
• Description — 1–2 sentences, max-width 480px
• Primary CTA — red button ("Book a Discovery Call")
• Secondary CTA — bordered button ("See How We Work")
• Recognition logos — max 3 SVG marks, 18px height
• Logo grid — 10 client cells with popover data (compact variant)

V Variants

• Standard — white background, ink text, red primary CTA
• Dark (planned) — ink background, white text, ghost-light secondary CTA

F Typical Page Flow

• After: Navigation
• Before: Content sections, case studies, problem/solution sections
• Services: Hero Selling → Logo Grid → TriStorm → Case Studies → CTA
• Campaign: Hero Selling → Problem Statement → Solution → Pricing → CTA

P Purpose

Primary entrance hero for vstorm.co home page only. Centred single-column layout, no split columns, no right-side visual. Full-width dot-wave background animation adds subtle motion without competing with copy. Brand statement front-and-centre.

W When to Use

• Main site home page only
• When brand statement and confidence matter more than a product showcase
• Not for services or internal landing pages — use HERO-SELL-01 or HERO-SPLIT-01
• Not for pages with strong visual assets — use HERO-SPLIT-01

L Layout

• Canvas background — full-bleed dot-wave formation, mouse-interactive
• Centred content — max-width 760px, stacked vertically
• Eyebrow — pill badge with pulsing red dot, centred
• Headline — morph-cycling, centred, clamp(2.2rem, 5vw, 3.6rem)
• Proof strip — 3 stat highlights separated by dot dividers
• Actions — two CTAs side-by-side, centred
• Recognition strip — "Recognized by" + 3 logos, centred
• Logo grid — 5-column compact grid with popovers below

I Required Inputs

• Eyebrow — category label ("Agentic AI Consulting")
• Headline — static text + morph slot + static text
• Morph words — 3 cycling terms, 2.8s interval
• Description — 1–2 sentences max
• Proof stats — 3 short metric strings (e.g. "50+ agents deployed")
• Primary CTA — ink button with 45° arrow
• Secondary CTA — bordered button
• Recognition logos — 3 SVG marks, 18px height
• Logo grid — 10 client cells with popover data

V Variants

• Standard — white background, centred, dot-wave animation
• Dark (planned) — ink background, white text, inverted animation

F Typical Page Flow

• After: Navigation (and Announcement Bar if present)
• Before: Logo Cloud, Metrics Bar, or first featured content section
• Homepage: Hero Centred → Logo Slider → Capabilities → Case Studies → CTA

P Purpose

Workhorse two-column hero: content left, visual asset right. Text side includes headline, subline, optional checklist, and CTA pair. Visual side (screenshot, mockup, dashboard, abstract gradient) shares the stage equally with copy. Use when seeing the output alongside the promise accelerates conversion.

W When to Use

• Service pages where showing the output or interface helps conversion
• Landing pages from paid ads where the visual reinforces the specific offer
• When you have a strong visual asset (screenshot, mockup, dashboard) worth featuring
• Feature showcases, product comparisons, or workflow demonstrations
• When the headline alone can't convey the service — the visual does heavy lifting

I Required Inputs

• Overline — optional category/service label
• Headline — max 60 chars. Shorter because the visual shares the stage
• Subline — 1–2 sentences, max 120 chars
• Primary + Secondary CTAs — see variant table for correct styles per background
• Checklist — optional, max 4 short benefit lines
• Visual — screenshot, mockup, gradient. 4:3 ratio recommended

V Variants

• Light — white background, ink primary CTA, red accent secondary
• Dark — ink background, red primary CTA, ghost-light secondary. Visual pops more against dark canvas

F Typical Page Flow

• After: Navigation (and Announcement Bar)
• Before: Logo Cloud, Metrics Bar, or problem/solution content
• Best for: service pages, solution pages, ad landing pages, feature showcases

P Purpose

Centers the hero around a video or demo embed. Copy stays short — headline and one line — because the video is the argument. Use when a demo or walkthrough is more persuasive than any copy could be.

W When to Use

• When you have a compelling product demo or service walkthrough
• Specific service pages where a 60-second video explains value better than text
• Webinar landing pages where the recording is the primary content
• Audiences who prefer watching over reading (ops teams, executives, technical decision-makers)
• Only if the video is production-quality — a bad video is worse than no video
• Not for the homepage unless video is exceptional (≤30s, professional production)

I Required Inputs

• Overline — optional, e.g. "See It in Action"
• Headline — max 50 chars. Short because the video shares the stage
• Subline — 1 sentence, max 100 chars
• Video source — YouTube/Vimeo embed URL or self-hosted MP4 path
• Thumbnail — custom poster frame image. Do not use auto-generated thumbnails
• Duration — displayed near the play button, e.g. "1:34"

V Variants

• Centred (default) — single column, headline above, full-width video below. Only variant

F Typical Page Flow

• After: Navigation
• Before: Logo Cloud, Problem Statement, or service content
• Best for: product demo pages, webinar replays, service deep-dives, case study walkthroughs