Hero C · The Grid

Centered layout: drifting dot-grid background, breathing chip, word-rise H1 with italic accent, stat row, logo cloud at the bottom. Reads as 'social proof at every scale.' Skip the mockup right column, let the type + logos carry it.

by FWONhero compositevanilla

Get a site with blocks like this

Live preview

open in new tab ↗

<div class="a43">
  <div class="a43-bg"></div>
  <span class="h43-chip"><span class="dot"></span>Live now · 47 people watching</span>
  <h1 class="h43-h">
    <span class="w">Ship</span>
    <span class="w">a</span>
    <span class="w">real</span>
    <span class="w"><em>page</em></span>
    <span class="w">tonight.</span>
  </h1>
  <div class="h43-stats">
    <div class="st"><span class="n">547</span><span class="l">sites shipped</span></div>
    <div class="st"><span class="n">12h</span><span class="l">avg turnaround</span></div>
    <div class="st"><span class="n">4.9</span><span class="l">Google reviews</span></div>
  </div>
  <div class="h43-logos">
    <div class="track">
      <span class="lg">HUBSPOT</span><span class="lg">LOVABLE</span><span class="lg">CAPCUT</span><span class="lg">EMERGENT</span><span class="lg">HEYGEN</span><span class="lg">SUBMAGIC</span>
      <span class="lg">HUBSPOT</span><span class="lg">LOVABLE</span><span class="lg">CAPCUT</span><span class="lg">EMERGENT</span><span class="lg">HEYGEN</span><span class="lg">SUBMAGIC</span>
    </div>
  </div>
</div>

Block id: tim-43-hero-c-the-gridvanilla · swap-content

More hero blocks

Split hero with booking-card mockup

cal.com

Split hero with glowing app mockup

linear

Staggered blur word-reveal headline

linear

Hero video dialog with thumbnail

magicui

Want the whole site, not just the block?

We ship real client sites in 3 weeks — with blocks like this one, wired to your brand.

Get my free 15-min audit Book a Discovery Call