Heroes

The first thing on the page. Every hero here stacks its buttons full-width on a phone and puts them side by side from 640px up.

CenteredSplit with imagePhoto backdropWith a formAnnouncement and screenshot

Centered

sections/heroes/centered.html

Headline, one line of supporting text, two buttons. The safe default when you don't have a strong image.

<section class="px-6 py-20 text-center sm:py-28">
  <div class="mx-auto max-w-3xl">
    <p class="my-0! text-sm font-semibold text-brand-600 dark:text-brand-50">Garden design and care</p>
    <h1 class="mt-3! mb-0! text-4xl! font-bold! leading-tight! tracking-tight sm:text-6xl!">Landscapes people stop to look at</h1>
    <p class="mx-auto! mt-6! mb-0! max-w-xl text-lg leading-relaxed! text-black/70 dark:text-white/70">Lawn care, garden design and seasonal cleanup for homes nearby. A real price in writing, usually the same day.</p>
    <div class="mx-auto mt-10 flex max-w-xs flex-col gap-3 sm:max-w-none sm:flex-row sm:justify-center">
      <a href="#" class="inline-flex items-center justify-center rounded-md bg-brand-500 px-5 py-3 text-sm font-semibold text-white! no-underline! shadow-sm hover:bg-brand-600">Get a free quote</a>
      <a href="#" class="inline-flex items-center justify-center rounded-md px-5 py-3 text-sm font-semibold text-black! no-underline! ring-1 ring-black/15 ring-inset hover:bg-black/5 dark:text-white! dark:ring-white/20 dark:hover:bg-white/10">See our work</a>
    </div>
  </div>
</section>

Split with image

sections/heroes/split-image.html

Text on the left, a photo on the right, stacked with the text first on a phone.

<section class="mx-auto grid max-w-6xl items-center gap-12 px-6 py-16 sm:py-24 lg:grid-cols-2">
  <div>
    <p class="my-0! text-sm font-semibold text-brand-600 dark:text-brand-50">Freelance product designer</p>
    <h1 class="mt-3! mb-0! text-4xl! font-bold! leading-tight! tracking-tight sm:text-5xl!">Interfaces for small teams that ship</h1>
    <p class="mt-6! mb-0! max-w-lg text-lg leading-relaxed! text-black/70 dark:text-white/70">I design and build product UI for teams who need a senior designer part-time, not a full-time hire.</p>
    <div class="mt-10 flex max-w-xs flex-col gap-3 sm:max-w-none sm:flex-row">
      <a href="#" class="inline-flex items-center justify-center rounded-md bg-brand-500 px-5 py-3 text-sm font-semibold text-white! no-underline! shadow-sm hover:bg-brand-600">See my work</a>
      <a href="#" class="inline-flex items-center justify-center rounded-md px-5 py-3 text-sm font-semibold text-black! no-underline! ring-1 ring-black/15 ring-inset hover:bg-black/5 dark:text-white! dark:ring-white/20 dark:hover:bg-white/10">Hire me</a>
    </div>
  </div>
  <img src="https://picsum.photos/seed/split-desk/1200/900" alt="" class="aspect-[4/3] w-full rounded-2xl object-cover shadow-lg">
</section>

Photo backdrop

sections/heroes/backdrop.html

A full-width photo behind the text, with a dark overlay so white text stays readable on any picture. Grows with its content instead of clipping it.

  • The overlay (bg-black/55) is what makes the text readable. On a very bright photo, raise it to bg-black/65.
<section class="relative isolate flex min-h-[420px] items-center justify-center overflow-hidden bg-cover bg-center px-6 py-20 text-center sm:min-h-[520px]" style="background-image: url(https://picsum.photos/seed/backdrop-coast/1920/1080)">
  <div class="absolute inset-0 -z-10 bg-black/55"></div>
  <div class="mx-auto max-w-3xl">
    <h1 class="mt-0! mb-0! text-4xl! font-bold! leading-tight! tracking-tight text-white! sm:text-6xl!">Five Palms Villa</h1>
    <p class="mx-auto! mt-6! mb-0! max-w-xl text-lg leading-relaxed! text-white/85!">Five bedrooms for up to twelve guests, a private pool and a garden on the coast. Book directly, with no platform fees.</p>
    <div class="mx-auto mt-10 flex max-w-xs flex-col gap-3 sm:max-w-none sm:flex-row sm:justify-center">
      <a href="#" class="inline-flex items-center justify-center rounded-md bg-brand-500 px-5 py-3 text-sm font-semibold text-white! no-underline! shadow-sm hover:bg-brand-600">See the rooms</a>
      <a href="#" class="inline-flex items-center justify-center rounded-md bg-white/10 px-5 py-3 text-sm font-semibold text-white! no-underline! ring-1 ring-white/40 ring-inset hover:bg-white/20">Check availability</a>
    </div>
  </div>
</section>

With a form

sections/heroes/with-form.html

The pitch on the left and a short quote-request form on the right. For a local business whose whole goal is one enquiry.

  • Replace __YOUR_FORM_ID__ with your own form ID. Keep the hidden _honeypot input: spam filtering depends on it being submitted empty.
<section class="mx-auto grid max-w-6xl items-center gap-12 px-6 py-16 sm:py-24 lg:grid-cols-2">
  <div>
    <h1 class="mt-0! mb-0! text-4xl! font-bold! leading-tight! tracking-tight sm:text-5xl!">A tidy garden, without giving up your weekends</h1>
    <p class="mt-6! mb-0! max-w-lg text-lg leading-relaxed! text-black/70 dark:text-white/70">Tell us what you need and we will send a real price in writing, usually the same day.</p>
    <ul class="mt-8! mb-0! flex list-none! flex-col gap-3 pl-0! text-sm">
      <li class="mt-0! flex items-center gap-3"><svg class="size-5 shrink-0 text-brand-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Fully insured, local crew</li>
      <li class="mt-0! flex items-center gap-3"><svg class="size-5 shrink-0 text-brand-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>No contract, cancel any time</li>
      <li class="mt-0! flex items-center gap-3"><svg class="size-5 shrink-0 text-brand-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Quotes within one working day</li>
    </ul>
  </div>
  <form action="https://f.bootform.com/__YOUR_FORM_ID__" method="POST" class="flex flex-col gap-4 rounded-2xl border border-black/10 bg-white p-6 shadow-sm sm:p-8 dark:border-white/10 dark:bg-white/5">
    <p class="my-0! text-lg font-semibold">Get a free quote</p>
    <label class="flex flex-col gap-1 text-sm font-medium">Your name
      <input name="name" type="text" required autocomplete="name" class="rounded-md border border-black/20! bg-white! px-3! py-2! text-base font-normal outline-none focus:border-brand-500! focus:ring-2 focus:ring-brand-500/25 dark:border-white/20! dark:bg-white/5!">
    </label>
    <label class="flex flex-col gap-1 text-sm font-medium">Your email
      <input name="email" type="email" required autocomplete="email" class="rounded-md border border-black/20! bg-white! px-3! py-2! text-base font-normal outline-none focus:border-brand-500! focus:ring-2 focus:ring-brand-500/25 dark:border-white/20! dark:bg-white/5!">
    </label>
    <label class="flex flex-col gap-1 text-sm font-medium">What do you need done?
      <textarea name="message" rows="3" required class="rounded-md border border-black/20! bg-white! px-3! py-2! text-base font-normal outline-none focus:border-brand-500! focus:ring-2 focus:ring-brand-500/25 dark:border-white/20! dark:bg-white/5!"></textarea>
    </label>
    <input type="text" name="_honeypot" tabindex="-1" autocomplete="off" class="hidden" aria-hidden="true">
    <button type="submit" class="rounded-md bg-brand-500! px-5! py-3! text-sm font-semibold text-white hover:bg-brand-600!">Send my request</button>
  </form>
</section>

Announcement and screenshot

sections/heroes/announcement.html

A small badge linking to news, a centered headline, and a product screenshot in a browser frame underneath.

<section class="px-6 pt-20 pb-16 text-center sm:pt-28">
  <div class="mx-auto max-w-3xl">
    <a href="#" class="inline-flex items-center gap-2 rounded-full bg-brand-50 px-3 py-1 text-sm font-medium text-brand-600! no-underline! ring-1 ring-brand-500/20 ring-inset hover:bg-brand-500/15 dark:bg-brand-500/15 dark:text-white!"><span class="rounded-full bg-brand-500 px-2 py-0.5 text-xs font-semibold text-white">New</span>Online booking is here<span aria-hidden="true">&rarr;</span></a>
    <h1 class="mt-6! mb-0! text-4xl! font-bold! leading-tight! tracking-tight sm:text-6xl!">Your whole week of bookings, on one screen</h1>
    <p class="mx-auto! mt-6! mb-0! max-w-xl text-lg leading-relaxed! text-black/70 dark:text-white/70">See every appointment, reschedule with a drag, and let clients book themselves in at any hour.</p>
    <div class="mx-auto mt-10 flex max-w-xs flex-col gap-3 sm:max-w-none sm:flex-row sm:justify-center">
      <a href="#" class="inline-flex items-center justify-center rounded-md bg-brand-500 px-5 py-3 text-sm font-semibold text-white! no-underline! shadow-sm hover:bg-brand-600">Start free</a>
      <a href="#" class="inline-flex items-center justify-center rounded-md px-5 py-3 text-sm font-semibold text-black! no-underline! ring-1 ring-black/15 ring-inset hover:bg-black/5 dark:text-white! dark:ring-white/20 dark:hover:bg-white/10">Watch a 2 minute demo</a>
    </div>
  </div>
  <div class="mx-auto mt-16 max-w-5xl overflow-hidden rounded-xl border border-black/10 bg-white shadow-2xl dark:border-white/10 dark:bg-neutral-900">
    <div class="flex items-center gap-1.5 border-b border-black/10 px-4 py-3 dark:border-white/10">
      <span class="size-3 rounded-full bg-black/15 dark:bg-white/20"></span><span class="size-3 rounded-full bg-black/15 dark:bg-white/20"></span><span class="size-3 rounded-full bg-black/15 dark:bg-white/20"></span>
    </div>
    <img src="https://picsum.photos/seed/announcement-app/1600/900" alt="" class="aspect-video w-full object-cover">
  </div>
</section>