Sections

Home header

Full-bleed, viewport-height media stage that cross-fades between slides, with the ALIX wordmark drawn so its X lands exactly on the central line — the 50% split the whole page hangs from.

Install

npx shadcn@latest add @alix/homeHeader

Preview

Usage

<HomepageHeader>
  <HomepageHeaderSlide
    left={<img src="/hero-left.jpg" alt="" className="size-full object-cover" />}
    right={<img src="/hero-right.jpg" alt="" className="size-full object-cover" />}
  />
</HomepageHeader>

Examples

Cross-fading between slides

Pass more than one slide and the stage auto-advances — the signature homepage move, cross-fading on a timer that respects reduced-motion.

<HomepageHeader>
  <HomepageHeaderSlide
    left={<div className="size-full bg-primary" />}
    right={<img src="/hero-a.jpg" alt="" className="size-full object-cover" />}
  />
  <HomepageHeaderSlide
    left={<img src="/hero-b.jpg" alt="" className="size-full object-cover" />}
    right={<div className="size-full bg-primary" />}
  />
</HomepageHeader>

Without the wordmark

Set showLogo to false when the ALIX mark already lives in the media or the page chrome, and you just want the two-column stage.

<HomepageHeader showLogo={false}>
  <HomepageHeaderSlide
    left={<img src="/hero-left.jpg" alt="" className="size-full object-cover" />}
    right={<img src="/hero-right.jpg" alt="" className="size-full object-cover" />}
  />
</HomepageHeader>

Video columns

The left and right slots take any node, so full-bleed muted loops drop straight in — give each element size-full object-cover to fill its half.

<HomepageHeader>
  <HomepageHeaderSlide
    left={
      <video
        src="/hero.mp4"
        poster="/hero-poster.jpg"
        autoPlay
        loop
        muted
        playsInline
        className="size-full object-cover"
      />
    }
    right={<img src="/hero-right.jpg" alt="" className="size-full object-cover" />}
  />
</HomepageHeader>

When to use it

Use it for

The full-bleed opening of a homepage or landing page — a viewport-height stage with the wordmark's X on the central line, where it starts the spine the sections below hang from.
Pairing the two columns as a deliberate duality — the macro view beside the micro, the data beside the reality it describes (the motif is specified in The website, W1).
Rotating between a few brand moments: pass several slides and let them cross-fade on their own.
Mixed media columns — an image beside a muted video loop, or a solid navy panel beside footage.

Reach for something else

A fixed-height banner between content sections — use MediaBanner.
A header that also needs a title, links, and search — use CareersHeader or a composed section.
Slot-shaped media fed from a CMS enum — HomepageHeader takes real nodes; blocks own the serializable-data contract.

Props

Prop	Type	Default	Description
children	ReactNode	—	One or more <HomepageHeaderSlide> elements. Pass several to auto cross-fade between them.
showLogo	boolean	true	Overlays the ALIX wordmark, its width computed so the “X” lands exactly on the 50% split (left + width × 0.8417 = 50%) — the origin of the page's central line.
left / right (HomepageHeaderSlide)	ReactNode	—	Media slots for each column. Pass an <img>, <video>, or Next <Image fill>; give it size-full object-cover to fill the column.