Hero Sections

Home Hero

The flagship hero section communicates the brand’s core proposition in a single view.

┌────────────────────────────────────────────────────────────────┐
│  ▓▓▓▓▓▓▓▓▓▓                                                    │
│  ▓  PHOTO ▓   BRETT JOHNSON                                    │
│  ▓  HIGH  ▓   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━               │
│  ▓  CONT  ▓   THE ORIGINAL INTERNET GODFATHER                  │
│  ▓▓▓▓▓▓▓▓▓▓   ─────────────────────────────────────           │
│                Named by the U.S. Secret Service                │
│                Founder of ShadowCrew. 39 Felonies. Most Wanted.│
│                The man who built modern cybercrime —           │
│                now helps Fortune 500s fight it.                │
│                                                                │
│  [ BOOK A SPEAKING ENGAGEMENT ]   [ DOWNLOAD MEDIA KIT ]      │
└────────────────────────────────────────────────────────────────┘

Grid Structure

<section className="relative min-h-[90vh] bg-brand-dark">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24 lg:py-32">
    <div className="grid grid-cols-1 gap-12 lg:grid-cols-[2fr_3fr] items-center">
      <HeroPhoto />
      <HeroCopy />
    </div>
  </div>
</section>

Copy Hierarchy

<div className="space-y-6">
  {/* Eyebrow */}
  <span className="text-xs font-mono uppercase tracking-widest text-brand-red">
    The Original Internet Godfather
  </span>

  {/* Primary heading */}
  <h1 className="text-5xl lg:text-6xl font-bold tracking-tight text-white leading-none">
    Brett Johnson
  </h1>

  {/* Divider */}
  <div className="w-20 h-px bg-brand-red" />

  {/* Sub-heading */}
  <p className="text-xl text-white/70 max-w-xl leading-relaxed">
    Named by the U.S. Secret Service as the most dangerous cybercriminal
    in the world. Now he helps Fortune 500s and federal agencies stop the
    criminals they can't catch.
  </p>

  {/* CTAs */}
  <div className="flex flex-wrap gap-4 pt-2">
    <Button variant="primary" size="lg">Book a Speaking Engagement</Button>
    <Button variant="secondary" size="lg">Download Media Kit</Button>
  </div>
</div>

Photo Treatment

<div className="relative aspect-[4/5] rounded-sm overflow-hidden border border-brand-gray">
  <Image
    src="/brett-hero.webp"
    alt="Brett Johnson — cybersecurity keynote speaker"
    fill
    className="object-cover object-top"
    priority
  />
  {/* Dark vignette on sides */}
  <div className="absolute inset-0 bg-gradient-to-r from-brand-dark/40 via-transparent to-brand-dark/40" />
</div>

Entrance Animation

const heroVariants = {
  hidden:  { opacity: 0, y: 32 },
  visible: { opacity: 1, y: 0 },
};

<motion.div
  variants={heroVariants}
  initial="hidden"
  animate="visible"
  transition={{ duration: 0.6, ease: [0, 0, 0.2, 1], delay: 0.1 }}
>
  {/* copy */}
</motion.div>

Photo fades in simultaneously at delay: 0. Copy stagger: delay: 0.15, delay: 0.25 for each child element.

Inner Page Heroes

Interior pages use a stripped-back hero — no photo, just headline and breadcrumb:

<div className="border-b border-brand-gray bg-brand-charcoal">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-16">
    <span className="text-xs font-mono uppercase tracking-widest text-brand-red">
      {section}
    </span>
    <h1 className="mt-3 text-4xl font-bold text-white">{title}</h1>
    {description && (
      <p className="mt-4 max-w-2xl text-lg text-white/60">{description}</p>
    )}
  </div>
</div>