main-hero-headline

Summary

Full-bleed hero with a dark-overlaid background photo, a two-line headline ("Best way to build / great website.") where the second line drops a 105px h1 with the word great in main-color (orange) plus an inline blurb to its right. Underneath, a row pairs a giant down-arrow icon with a 12k + projects KPI. GSAP enters the whole header from y: 200 2.5s after the page mounts (overlapping the preloader exit).

HTML structure (minimal)

<div class="header main-header bg-img valign"
     data-background="/assets/imgs/background/bg5.jpg"
     data-overlay-dark="7">
  <div class="container ontop">
    <div class="row">
      <div class="col-lg-11">
        <div class="caption">
          <h1>Best way to build</h1>
          <div class="d-flex align-items-end">
            <h1 class="nowrap"><span class="main-color">great</span> website.</h1>
            <div class="text ml-30">
              <p>We back the founders of new forms of network, digital organisations…</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row mt-80">
      <div class="col-lg-6 order-md-2">
        <div class="icon-img"><img src="/assets/imgs/icon-img/arrow-down-big.png" alt="" /></div>
      </div>
      <div class="col-lg-6 d-flex justify-content-end order-md-1">
        <div class="info">
          <h2 class="mb-10">12k +</h2>
          <h6>Projects completed <br /><span class="main-color">successfully</span></h6>
        </div>
      </div>
    </div>
  </div>
</div>

Key SCSS tokens

.main-header {
  padding: 180px 0 100px;
  min-height: 100vh;
  background-size: cover;
  background-position: center center;
  position: relative;
  overflow: hidden;

  .caption h1 { font-size: 105px; }
  .icon-img { width: 160px; }
}
.bg-img { background-size: cover; background-position: 50% 50%; }
.valign { display: flex; align-items: center; }
[data-overlay-dark="7"]::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .7);
}
.ontop { position: relative; z-index: 2; }

Animation logic

// components/home-main/Header.jsx
useLayoutEffect(() => {
  const tl = gsap.timeline();
  tl.fromTo('.header', { y: 200 }, { y: 0 }, '+=2.5');
  tl.fromTo('.header .container',
            { opacity: 0, translateY: 40 },
            { opacity: 1, translateY: 0 },
            '-=0');
  return () => tl.kill();
}, []);

useEffect(() => { loadBackgroudImages(); }, []);

Notable details

• Background image is set via data-background attribute and applied at runtime by loadBackgroudImages. Lets a single CSS class drive arbitrary images per-section.
• 105px headline reads as a poster, not a paragraph — paired with a small body p block to its right rather than under it for an editorial split.
• Hero entrance is timed (+=2.5s) so it arrives just as the SVG-curtain preloader unmounts; the choreography is what sells the cinematic feel.
• data-overlay-dark="7" is a custom attribute interpreted by an ::before overlay in CSS — saves manual <div class="overlay"> wrappers.

Use when

• Agency / portfolio sites that lean on a single hero photo and want a confident "magazine cover" headline.
• Pages where you want the hero to land after a preloader rather than at first paint.

Caveats

• 105px h1 is fragile under translation — verify long Ukrainian / German strings don't wrap awkwardly.
• The .header GSAP entrance assumes the preloader took ~2.5s — without it the hero feels delayed for no reason.