Landing page and app shell polish for Next.js hackathon projects: Lenis smooth scroll, SEO and social images (favicon set, web manifest, Open Graph/Twitter banner from a seed asset), global selection styling, PWA basics, conversion-oriented copy frameworks, typography (Google Fonts + DaFont, Tailwind `font-*` utilities). Use when building or refining a marketing landing page, app metadata, installable PWA, favicons, or scroll/typography polish alongside hackathon-app-dev.
Apply when shipping or tightening the public landing and browser chrome for a Next.js app: smooth scrolling, favicons and manifest, OG/Twitter previews, PWA affordances, brand-colored text selection, and copy structure that converts.
Pair with hackathon-app-dev for the core stack; use frontend-design (or equivalent) for visual direction on the hero and layout.
pnpm add lenis (lenis/react).<ReactLenis root /> from lenis/react.raf to Motion’s frame loop per the Lenis React README — Framer Motion integration (autoRaf: false, frame.update / cancelFrame).options only if defaults feel wrong on the target devices.android-chrome-192x192.pngandroid-chrome-512x512.pngapple-touch-icon.pngfavicon-16x16.pngfavicon-32x32.pngfavicon.ico (multi-size ICO from the same mark)site.webmanifest (name, short_name, theme/background colors, icons pointing at the above)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.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.public/ unless the project standardizes elsewhere)android-chrome-192x192.png, android-chrome-512x512.pngapple-touch-icon.pngfavicon-16x16.png, favicon-32x32.png, favicon.icosite-banner.png (OG/Twitter)site.webmanifestIn 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.
site.webmanifest: name, short_name, start_url, display (standalone or browser), theme_color, background_color, icon entries.start_url.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.font-sans). Coolvetica (DaFont) for headings and hero type, applied with the utility font-coolvetica on heading elements (not on the whole document).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.