# Setup notes

## 1. Copy files
- `components/*` → your `components/` folder
- `app/page.tsx` → replace your existing `app/page.tsx`
- `public/images/*` → your `public/images/` folder

## 2. Tailwind config
Merge `tailwind.config.snippet.js` into your existing `tailwind.config.js`
(the `colors`, `fontFamily`, `keyframes`, and `animation` keys under
`theme.extend`). Don't overwrite the whole file — just merge these keys in.

## 3. Fonts (optional but recommended — matches the design as built)
In `app/layout.tsx`, add next/font and expose them as CSS variables that the
tailwind config's `fontFamily` reads from:

```tsx
import { Playfair_Display, Inter } from "next/font/google";

const display = Playfair_Display({
  subsets: ["latin"],
  weight: ["500", "600", "700"],
  variable: "--font-display",
});
const body = Inter({
  subsets: ["latin"],
  variable: "--font-body",
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={`${display.variable} ${body.variable}`}>
      <body className="font-sans">{children}</body>
    </html>
  );
}
```

If you'd rather skip next/font, everything still works — `font-serif` and
`font-sans` just fall back to system serif/sans stacks.

## 4. Path alias
Components import via `@/components/...`. Confirm your `tsconfig.json` has:
```json
"paths": { "@/*": ["./*"] }
```
If your project already uses a different alias (e.g. `src/`), adjust the
import paths in `app/page.tsx` accordingly.

## What's included
- **Header.tsx** — sticky, scroll-aware shrink/shadow, animated nav underline, mobile slide-menu
- **Hero.tsx** — masthead + live Countdown + rotating gear watermark (signature element)
- **Countdown.tsx** — client-side ticking countdown to the ceremony
- **EventDetails.tsx** — date / time / venue cards
- **Handover.tsx** — outgoing vs incoming board, gavel-pass layout
- **Guests.tsx** — Chief Guest & Guest of Honour cards
- **OfficeBearers.tsx** — full 46-role roster, tabbed (Leadership / Directors / Committee Chairs), dotted-leader rows
- **CtaBand.tsx** — gold RSVP band with shimmer animation
- **Footer.tsx** — club info, links, back-to-top
- **GearMotif.tsx** / **Reveal.tsx** — shared primitives (rotating SVG gear, scroll-reveal wrapper)

All animation is Tailwind-only: utility transitions, `animate-*` classes
from the extended config, and one small IntersectionObserver hook (`Reveal`)
for scroll-triggered fades — no animation library used.