Hackathon landing page, SEO, and PWA

SEO, icons, and social preview

Seed asset

1. Ask the user for a seed image (logo, mark, or hero graphic) as the single source of truth for the brand mark.
2. Vector: derive or simplify a SVG suitable for small sizes (favicon clarity). Use tracing/simplification in a design tool or an automated vectorizer if needed; avoid illegible detail at 16×16.
3. Rasters: export or generate from the seed/SVG at least:
   • android-chrome-192x192.png
   • android-chrome-512x512.png
   • apple-touch-icon.png
   • favicon-16x16.png
   • favicon-32x32.png
   • favicon.ico (multi-size ICO from the same mark)
   • site.webmanifest (name, short_name, theme/background colors, icons pointing at the above)
4. Open Graph / Twitter banner: produce site-banner.png (typical aspect 1200×630 or current platform recommendation). After the landing renders in the browser, use the Cursor browser tools to capture a screenshot of the landing (above-the-fold or full page per design) and save/export as site-banner.png for consistent social previews, unless the user supplies a designed asset instead.
5. Wire Next.js App Router metadata (or metadata API): title, description, openGraph.images, twitter.card / twitter.images, icons, manifest path. Remove reliance on the default app/favicon.ico from create-next-app once custom icons live in public/ and metadata points to them.

Checklist (files in public/ unless the project standardizes elsewhere)

• android-chrome-192x192.png, android-chrome-512x512.png
• apple-touch-icon.png
• favicon-16x16.png, favicon-32x32.png, favicon.ico
• site-banner.png (OG/Twitter)
• site.webmanifest
• Metadata + no duplicate stale default favicon

Global CSS: selection color

In global styles (e.g. app/globals.css), set ::selection (and ::-moz-selection) foreground/background to match the brand theme (CSS variables from Tailwind/shadcn theme tokens are ideal). Remove or override any default that clashes with the palette.

PWA (optimize the web app)

• site.webmanifest: name, short_name, start_url, display (standalone or browser), theme_color, background_color, icon entries.
• Service worker: add a maintained solution compatible with the project’s Next.js version (e.g. community Serwist / next-pwa patterns or the approach in current docs—verify against Next release notes; do not ship a dead config).
• Installability: HTTPS in production, maskable icons where applicable, and a clear start_url.
• Scope: for a hackathon, prefer a minimal SW (cache shell + offline fallback) over over-caching dynamic API routes.

Typography and fonts

1. Infer faces from app nature — Pick heading + body fonts that match the product (tone, industry, energy). Use the heuristics in reference.md; if still unsure, use the defaults below.
2. Sources — Google Fonts for body/UI via next/font/google (download is handled by Next). DaFont for display/heading files: use the curl zip URL pattern in reference.md (f=<slug> matches the font page, e.g. herkey for herkey.font), then unzip, convert to .woff2 when needed, place under e.g. app/fonts/, load with next/font/local.
3. Defaults when unsure — Inter as the global base / body (font-sans). Coolvetica (DaFont) for headings and hero type, applied with the utility font-coolvetica on heading elements (not on the whole document).
4. Tailwind convention (all custom fonts) — For every local or Google font you add, expose it as font-{kebab-case-name} in the Tailwind theme (e.g. font-coolvetica, font-safira-march). Map each to a CSS variable from next/font (variable: '--font-coolvetica') so utilities stay consistent across the app. Full layout + tailwind.config / @theme patterns: reference.md.

Copy (reference)

• Conversion copy: WHO/WHY/WHAT headlines, CTA → CTV (benefit-led), PAS, benefits over features, social proof, visual story. Full patterns and examples: reference.md.
• Font catalog (optional headings, Google body list): reference.md.

Handoff

• Core stack, auth, and MCPs: hackathon-app-dev and hackathon-app-dev/reference.md.