Cross-Border

应用 · Transportation · 免费

在云境TS 中打开并复制 →

内容预览

Create a mobile-first logistics company landing page for "CARGOX GROUP" displayed inside an iPhone 15 Pro mockup frame. Use React, TypeScript, Tailwind CSS, and the `motion` library (motion/react) for animations. Use Vite as the build tool. ## Structure The page is wrapped in a realistic iPhone 15 Pro mockup (aspect ratio 393:852) with: - Dark frame (#1a1a1a) with 54px border-radius, 8px border (#2a2a2a), inset highlight (#3a3a3a) - Dynamic Island (126x36px, centered at top, black, 20px border-radius, z-200) - Home indicator at bottom (134x5px, white 30% opacity) - Scrollable content area inside with hidden scrollbar and `container-type: size` The body background is #111111. The scrollable container uses `container-type: size; container-name: phone;` for container queries. ## Fonts - Import **Barlow Condensed 800** from Google Fonts - Body font: Helvetica, Arial, sans-serif ## SECTION 1: Hero (full viewport height of the container using `100cqb`) **Background:** Autoplaying, muted, looping video: ``` https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260620_185230_f7f71ef4-6655-469f-b9c6-efbdc1f7684a.mp4 ``` **Navbar (absolute, top):** - Left: "CARGOX" (white) / "GROUP" (yellow #ffda00) in Barlow Condensed 800, uppercase, clamp(22px, 6vw, 32px) - Right: Hamburger menu icon (lucide-react Menu/X, 28px, white) - Both slide in from left/right with 0.6s expo-out ease **Mobile menu overlay:** Fixed, z-99, background #6682c2, centered nav items (Services, Ind

……(完整源码请在站内查看)