Hero Split
Hero sections run through the same top inset, section-start spacing, and preview breakpoint logic.
Hero pattern references
Governed hero patterns rendered through the SaaS Core shared UI only.
Simple centered launch hero
The first hero stays deliberately minimal: clear headline, compact copy, primary action, and no auxiliary surface noise.
- Smallest valid hero shape
- Centered alignment with no secondary panel
- Copy remains safe for multilingual expansion
International launch surface
Ship one governed Tailwind 4 UI library across tenants and markets.
This hero proves the base rhythm first: headline, copy, and governed actions with no local spacing hacks.
Centered hero with compliance metrics
The second step adds structured proof through shared KPI tiles while keeping the centered primary rhythm intact.
- Shared KPI tiles only
- Locale, currency, timezone, accessibility, and theme proof stay content-driven
- Still no secondary panel or screenshot dependency
System proof
Add shared proof tiles before adding a second structural column.
This example stays centered and introduces operational proof through governed metric tiles instead of decorative one-off content.
Centered hero with proof rail
The third step introduces a secondary proof surface built from shared logos, badges, and alerts.
- Trust layer without screenshots
- Lucide and ARIA-compatible shared blocks
- Still lightweight enough for landing and campaign pages
Proof-led narrative
Add trust signals without inventing a second visual language.
The hero stays centered while the supporting proof block remains composed from shared badges, logo tiles, and alerts.
Search-led discovery hero
The fourth step turns the hero into a discovery surface with shared input, select, and CTA primitives.
- Shared filter bar only
- Good fit for modules, plugins, docs, and support entry points
- Supports localized search prompts and content expansion
Catalog discovery
Let buyers, tenants, and operators find the right surface faster.
This reference pairs a strong message with a governed search panel so the same pattern can serve marketplaces, docs, and support hubs.
Device-led hero with branded backdrop
The fifth step introduces atmospheric media and a compact device surface while preserving shared spacing and responsive truth.
- Media stays decorative and governed
- Device preview remains built from shared cards and stat surfaces
- Responsive collapse remains part of the shared hero contract
Mobile workflows
Design one responsive story for desk, tablet, and field teams.
This hero adds a branded backdrop and a controlled device frame without leaving the shared UI surface inventory.
Feature-led launch hero
The sixth step becomes a launch surface with structured roadmap and compliance guidance next to the message.
- First true split launch surface
- Balances product promise and rollout checklist
- Good fit for release, docs, and overview pages
Release-ready library
Move from hero, to features, to pricing without breaking the same governed shell.
This launch surface keeps the opening message compact while exposing roadmap and compliance guidance that matters to rollout teams.
Split hero with dashboard preview
A dashboard-led split hero for product marketing, feature launches, or executive overviews.
- Preview uses shared topbar and data surfaces
- Highlights stay reusable as stat cards
- Good fit for SaaS, analytics, and platform pages
Product overview
Put a believable workspace preview next to the platform promise.
This split reference pairs the main message with a compact dashboard composition so prospects understand the product immediately.
Split hero with implementation notes
A code-and-standards-oriented split hero for docs, engineering platforms, and implementation guides.
- Supports product plus implementation messaging
- Keeps code-adjacent proof in shared cards
- Useful for docs, API, and rollout guidance
Implementation guide
Explain the product and the rollout contract in the same hero without visual drift.
Use this reference when the hero needs to balance product value, standards language, and a compact implementation snapshot.
Split hero with signup conversion panel
A conversion-first hero for onboarding, trial, or waitlist entry with shared form primitives.
- Lead capture stays on the shared form contract
- CTA, input, and select atoms remain reusable
- Suitable for trials, demos, and guided rollouts
Guided onboarding
Turn a hero into a governed conversion surface without rebuilding the form stack.
The left side carries value and proof while the right side reuses the same input, select, and button language that appears deeper in the product.
Split hero with global rollout panel
The tenth step adds commercial and timezone-sensitive rollout context for international product teams.
- Internationalization, currencies, and handover windows stay explicit
- Final hero combines trust, operations, and commercial readiness
- Shared component output keeps previews consistent across themes and breakpoints
Global rollout operations
Balance market messaging with pricing, timezone, and handover clarity.
The final progression step combines brand promise with operational readiness for international teams without leaving the shared UI contract.