Nexora Automation

网站 · SaaS · 免费
内容预览

Create a SaaS landing page hero section with the following exact specifications: Page Layout The entire page is h-screen flex flex-col bg-background overflow-hidden — the Navbar + Hero fill exactly 100vh with no scroll. The page uses two Google Fonts imported via CSS: Instrument Serif (display/headings, including italic) and Inter (body text). Fonts & Design Tokens (index.css) Import fonts: @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600&display=swap'); CSS variables (:root): --background: 0 0% 100% (white) --foreground: 210 14% 17% (dark charcoal) --primary: 210 14% 17% / --primary-foreground: 0 0% 100% --secondary: 0 0% 96% / --secondary-foreground: 0 0% 9% --muted: 0 0% 96% / --muted-foreground: 184 5% 55% --accent: 239 84% 67% (indigo/blue) / --accent-foreground: 0 0% 100% --border: 0 0% 90% --ring: 239 84% 67% --radius: 0.5rem --font-display: 'Instrument Serif', serif --font-body: 'Inter', sans-serif --shadow-dashboard: 0 25px 80px -12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.06) Tailwind config extends fontFamily with display and body mapped to the CSS vars. All colors use hsl(var(--token)) pattern. Navbar flex items-center justify-between px-6 md:px-12 lg:px-20 py-5 font-body Left: Logo text ✦ Nexora — text-xl font-semibold tracking-tight text-foreground Right (hidden on mobile): Nav links "Home", "Pricing", "About", "Contact" — text-sm text-muted-foreground hover:text-foreground with gap-8 CTA butto

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