Page Layouts

Shell Layout

Every page is wrapped in the global shell:

app/(marketing)/layout.tsx

export default function MarketingLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <GlobalNav />
      <main>{children}</main>
      <Footer />
    </>
  );
}

Home Page Layout

The home page is a vertically stacked single-page layout:

┌───────────────────────────────────────────────────────────┐
│  GlobalNav (sticky)                                       │
├───────────────────────────────────────────────────────────┤
│  HeroSection          py-24 lg:py-32                      │
├───────────────────────────────────────────────────────────┤
│  MediaTickerBar       py-12   (auto-scroll logos)         │
├───────────────────────────────────────────────────────────┤
│  AboutSection         py-20   (3-column origin story)     │
├───────────────────────────────────────────────────────────┤
│  ServicesSection      py-20   (2×3 card grid)             │
├───────────────────────────────────────────────────────────┤
│  TestimonialsSection  py-20   (quote blocks)              │
├───────────────────────────────────────────────────────────┤
│  PodcastSection       py-20   (embed + episode list)      │
├───────────────────────────────────────────────────────────┤
│  ContactSection       py-20   (booking form)              │
├───────────────────────────────────────────────────────────┤
│  Footer               py-16                               │
└───────────────────────────────────────────────────────────┘

Inner Page Layout (Speaking, Media, etc.)

Interior pages use a narrower reading layout with a page header:

<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-20">
  {/* Page header */}
  <div className="mb-12 border-b border-brand-gray pb-8">
    <span className="text-xs font-mono uppercase tracking-wider text-brand-red">Speaking</span>
    <h1 className="mt-2 text-5xl font-bold tracking-tight text-white">{title}</h1>
    <p className="mt-4 max-w-2xl text-lg text-white/70">{description}</p>
  </div>

  {/* Page content */}
  {children}
</div>

Two-Column (Content + Sidebar)

Used on the media kit page and training portal:

<div className="grid grid-cols-1 gap-12 lg:grid-cols-[2fr_1fr]">
  <div>{/* Main content */}</div>
  <aside className="space-y-6">
    {/* Sidebar: downloads, quick links */}
  </aside>
</div>

Responsive Breakpoints

Breakpoint	Width	Layout change
sm	640px	Container padding increases
md	768px	Mobile nav → desktop nav
lg	1024px	Single column → multi-column grids
xl	1280px	Max container width reached

No layout changes occur beyond xl. The max-w-7xl container constrains the design.