This page mirrors the current header and hero seed options used in the generator. Send exact seed IDs and desired changes, and we can patch the system deterministically.
Centered command-bar header with dense nav utility, prominent call/inquiry action, and strong contrast shell.
Elegant editorial masthead with centered brand presence, refined typography rhythm, and split utility controls.
Left brand rail + right action/navigation cluster for high-clarity enterprise and local-service positioning.
Detached floating pill header with cinematic blur, premium shadows, and smooth sticky shrink behavior.
Two-layer business header: utility information strip plus primary navigation row optimized for conversion.
Text + CTA cluster offset against a dominant media panel with intentional asymmetry and layered depth.
Immersive full-bleed hero image treatment with guarded text panel and cinematic contrast scrim.
Large editorial headline stack with rhythm-driven spacing and supporting visual block for storytelling.
Lead message with modular supporting KPI/media tiles for productized, technical, or trust-focused pages.
Conversion-first hero with promise, CTA, and compact 3-step process preview for service/trades businesses.
[
{
"id": "header_command_dock",
"header_style_id": "command_dock",
"label": "Command Dock",
"concept": "Centered command-bar header with dense nav utility, prominent call/inquiry action, and strong contrast shell.",
"desktop_structure": "single-row centered dock; logo left, nav center, primary CTA right",
"mobile_structure": "compact top bar with logo + CTA + menu toggle; drawer navigation",
"sizing": {
"container_max_width": 1220,
"gutter_mobile_px": 18,
"gutter_desktop_px": 28,
"height_mobile_px": 66,
"height_desktop_px": 82
}
},
{
"id": "header_editorial_masthead",
"header_style_id": "editorial_center_masthead",
"label": "Editorial Masthead",
"concept": "Elegant editorial masthead with centered brand presence, refined typography rhythm, and split utility controls.",
"desktop_structure": "logo/title centered, secondary links left, primary CTA right",
"mobile_structure": "logo centered with floating CTA chip and compact nav tray",
"sizing": {
"container_max_width": 1180,
"gutter_mobile_px": 16,
"gutter_desktop_px": 32,
"height_mobile_px": 72,
"height_desktop_px": 96
}
},
{
"id": "header_split_brand_rail",
"header_style_id": "split_brand_rail",
"label": "Split Brand Rail",
"concept": "Left brand rail + right action/navigation cluster for high-clarity enterprise and local-service positioning.",
"desktop_structure": "left persistent brand rail, right stacked utility+nav, CTA at far right",
"mobile_structure": "brand strip + condensed actions; full-width slide panel nav",
"sizing": {
"container_max_width": 1260,
"gutter_mobile_px": 18,
"gutter_desktop_px": 30,
"height_mobile_px": 68,
"height_desktop_px": 88
}
},
{
"id": "header_floating_glass_pill",
"header_style_id": "floating_glass_pill_nav",
"label": "Floating Glass Pill",
"concept": "Detached floating pill header with cinematic blur, premium shadows, and smooth sticky shrink behavior.",
"desktop_structure": "floating centered pill with logo, nav, CTA in one row",
"mobile_structure": "short floating capsule with logo + toggle + CTA icon/short label",
"sizing": {
"container_max_width": 1120,
"gutter_mobile_px": 14,
"gutter_desktop_px": 24,
"height_mobile_px": 62,
"height_desktop_px": 78
}
},
{
"id": "header_utility_primary",
"header_style_id": "utility_plus_primary",
"label": "Utility + Primary",
"concept": "Two-layer business header: utility information strip plus primary navigation row optimized for conversion.",
"desktop_structure": "utility strip (phone/hours) above main nav with strong call CTA",
"mobile_structure": "utility condensed into badges; primary row with logo + CTA + menu",
"sizing": {
"container_max_width": 1240,
"gutter_mobile_px": 16,
"gutter_desktop_px": 28,
"height_mobile_px": 84,
"height_desktop_px": 112
}
}
]
[
{
"id": "hero_asymmetric_split",
"label": "Asymmetric Split",
"concept": "Text + CTA cluster offset against a dominant media panel with intentional asymmetry and layered depth.",
"desktop_layout": "5/7 or 6/6 weighted split with media overflow and anchored content stack",
"mobile_layout": "stacked text-first then media with preserved visual hierarchy",
"hero_animation_style": "fade_up",
"sizing": {
"min_height_mobile_px": 560,
"min_height_desktop_vh": 82,
"top_padding_mobile_px": 106,
"top_padding_desktop_px": 132,
"headline_max_width_ch": 18
}
},
{
"id": "hero_overlay_statement",
"label": "Overlay Statement",
"concept": "Immersive full-bleed hero image treatment with guarded text panel and cinematic contrast scrim.",
"desktop_layout": "full-bleed media with floating statement block and layered gradient guards",
"mobile_layout": "media retained; statement panel shifts lower with stronger overlay",
"hero_animation_style": "stagger_in",
"sizing": {
"min_height_mobile_px": 580,
"min_height_desktop_vh": 88,
"top_padding_mobile_px": 112,
"top_padding_desktop_px": 140,
"headline_max_width_ch": 16
}
},
{
"id": "hero_stacked_editorial",
"label": "Stacked Editorial",
"concept": "Large editorial headline stack with rhythm-driven spacing and supporting visual block for storytelling.",
"desktop_layout": "headline stack leading, supporting visual offset beneath or adjacent",
"mobile_layout": "single-column typographic stack with compact media follow-up",
"hero_animation_style": "fade_up",
"sizing": {
"min_height_mobile_px": 520,
"min_height_desktop_vh": 78,
"top_padding_mobile_px": 98,
"top_padding_desktop_px": 124,
"headline_max_width_ch": 20
}
},
{
"id": "hero_bento_lead",
"label": "Bento Lead",
"concept": "Lead message with modular supporting KPI/media tiles for productized, technical, or trust-focused pages.",
"desktop_layout": "lead block + adjacent bento tiles (media, KPI, trust badges)",
"mobile_layout": "lead block followed by single-column tile stack",
"hero_animation_style": "stagger_in",
"sizing": {
"min_height_mobile_px": 600,
"min_height_desktop_vh": 84,
"top_padding_mobile_px": 104,
"top_padding_desktop_px": 130,
"headline_max_width_ch": 17
}
},
{
"id": "hero_process_lead",
"label": "Process Lead",
"concept": "Conversion-first hero with promise, CTA, and compact 3-step process preview for service/trades businesses.",
"desktop_layout": "lead copy + CTA + horizontal process chips with supporting hero media",
"mobile_layout": "lead + CTA + vertical step chips before media",
"hero_animation_style": "stagger_in",
"sizing": {
"min_height_mobile_px": 620,
"min_height_desktop_vh": 86,
"top_padding_mobile_px": 110,
"top_padding_desktop_px": 136,
"headline_max_width_ch": 18
}
}
]