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:

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:

"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.

2.5 KiB Raw Permalink Blame History