65 lines
2.5 KiB
Markdown
65 lines
2.5 KiB
Markdown
# 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.
|