Dark editorial hero with photo background, serif headline, and email capture
Dark hero section for wellness and beauty brand landing pages with a full-width photo background, a large serif headline at top left, and an email capture form with an orange CTA button at the bottom. Paste into Bolt, Claude Code, Replit, or Lovable.
About this vibe coding template
A dark hero with a photographic warmth rendered entirely in CSS. The outer wrapper is near-black with 16px padding and a large border radius, creating a framed presentation. Inside, a warm brown gradient card uses a radial gradient to render a face silhouette — a CSS portrait with skin-tone highlights, a dark background, and a warm brown midtone, creating a photography-inspired visual without any image file. The headline uses Playfair Display serif at 52px in weight 400, positioned at top left with very tight letter-spacing and leading. At the bottom, an email capture form sits across the full card width with a serif-styled label, a Terms note, and an orange pill button. This template directly replicates the dark editorial hero pattern used by premium wellness, beauty, and longevity brand landing pages.
Common questions about this template
How do I change the headline?
Ask your vibe coding tool to update the text inside the h1 element. The headline uses Playfair Display serif at 52px. Change the copy to your brand's hero statement. Keep the br tag to maintain the two-line layout, or remove it for a single-line headline on wider screens.
How do I change the gradient and face silhouette colors?
Ask Bolt, Claude Code, Replit, or Lovable to update the color stops in the radial-gradient on the .face element. The first stop is the skin highlight color, the second and third are shadow tones, and the fourth is the card background. Adjust these to match a different skin tone or remove the face entirely.
How do I wire up the email form?
Ask your vibe coding tool to add a name attribute and an action or onSubmit handler to the form element. Connect it to your email marketing provider — Mailchimp, ConvertKit, Resend — or to a Supabase insert. Tell the AI which service you use and whether you want a success state after submission.
Use this AI coding template for
- ·Wellness and beauty brand landing page heroes that want a dark editorial look without a photo
- ·Premium consumer product pages where a serif headline and warm gradient establish brand tone
- ·Email capture sections on landing pages that want a visual-first layout with the form at the bottom