Subscription Agency

网站 · Hero · 免费
内容预览

**Create a single-page landing hero section for a creative agency called "Alwayzz" with a React + Vite + Tailwind CSS setup. Use custom CSS (not Tailwind utilities) for all styling. The design should be minimal, clean, black-and-white, with tight negative letter-spacing throughout.** --- ### Fonts (loaded via Google Fonts in index.html) ``` Inter: weights 400, 500, 600, 700 Source Serif 4: weights 400, 600 (both normal and italic) ``` Preconnect to `fonts.googleapis.com` and `fonts.gstatic.com`. --- ### CSS Variables ```css --bg: #ffffff; --text: #0a0a0a; --muted: #6b6b6b; --button-bg: #0a0a0a; --button-text: #ffffff; --border-soft: rgba(0, 0, 0, 0.08); --green: #17c964; ``` --- ### Components **1. Navbar (fixed top, z-index 100)** - Padding: `19px 36px`, max-width `1200px` centered. - Left: Logo text "Alwayzz" in `Source Serif 4`, 30px, weight 600, **italic**, letter-spacing `-0.08em`, with a registered trademark symbol in Inter 14px weight 600. - Right: "Menu" pill button (black bg, white text, rounded-full, 14px weight 500, Inter) with a `ChevronUp` icon (16px) from lucide-react. - Full-screen drawer overlay on click: white bg, fade transition 0.4s. Nav links centered vertically at 48px weight 500, letter-spacing `-0.04em`. Links: Projects, Plans, Team, FAQs, Get in Touch. Footer with copyright. **2. Hero Section** - Min-height: `850px`, padding: `160px 36px`, centered flex column. - **Background image** (via `::before` pseudo-element, covers full section): ``` https://ima

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