Landing Utility

Hero Section Generator

This tool generates configurable landing page hero sections with multiple layout families, full copy control, palette controls, and optional background image support.

What it does

• Supports Split, Spotlight, and Centered hero families.
• Lets you edit badge, headline, subheadline, CTA text, and support panel copy.
• Includes background, accent, soft accent, and text color controls.
• Allows a background image URL to be layered into the hero preview.
• Exports ready-to-use HTML and CSS separately.

How to use it

• Open /HeroSectionGenerator/.
• Choose the hero family and write the main copy.
• Adjust the support panel content and palette.
• Optionally add a background image URL.
• Review the full-width preview and copy the generated HTML/CSS blocks.

Notes

• The preview is intentionally wide because hero sections need more horizontal breathing room than standard UI cards.
• Background images are layered as decorative support behind the main hero content.