f1 racing hub

在云境TS 中打开并复制 →

内容预览

# Recreate This Page Exactly — Lewis Hamilton / Silverstone F1 Hero ## Tech stack - React + TypeScript + Vite - Tailwind CSS (config extends `fontFamily.sans` = `['"Albert Sans"', 'sans-serif']`, plus custom `f1.dark = rgb(41,41,41)` and `f1.yellow = rgb(237,180,11)`) - lucide-react for icons (X, Menu used) - Google Font: **Albert Sans** weights 300;400;500;600;700;800, loaded in index.html via `https://fonts.googleapis.com/css2?family=Albert+Sans:wght@300;400;500;600;700;800&display=swap` - Body background: `#0a0e1c`, antialiased ## Overall layout A full-screen hero section (`relative w-full overflow-hidden font-sans`) with a page background image and dark overlay, then two responsive layouts: **Page background image (used for both page and inside phone screens):** ``` https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260709_152331_bd312d1a-1f20-46b9-9b68-12bcdcf6d53e.png&w=1280&q=85 ``` - Page: `<img>` absolute inset-0 w-full h-full object-cover z-0, then `<div className="absolute inset-0 bg-black/70 z-[1]" />` **Desktop (md+):** `hidden md:flex relative z-[2] w-full h-screen items-center justify-center py-6` → a flex row `items-end justify-center gap-[2vw]` containing three phone mockups, each wrapped in `animate-fade-slide-up` with delays 300/500/700. Middle phone has `-mb-6`. **Mobile (below md):** `md:hidden relati

……（完整源码请在站内查看）