Nexora Automation
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 button: rounded-full px-5 text-sm font-medium using primary styling Hero Section
Background Video: Fullscreen muted autoplay loop video, absolute inset-0 w-full h-full object-cover z-0 Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260319_015952_e1deeb12-8fb7-4071-a42a-60779fc64ab6.mp4 All content wrapped in relative z-10 flex flex-col items-center w-full
- Badge (top)
Framer Motion: fade up from y:10, duration 0.5s inline-flex items-center gap-1.5 rounded-full border border-border bg-background px-4 py-1.5 text-sm text-muted-foreground font-body Text: "Now with GPT-5 support ✨" mb-6 2. Headline
Framer Motion: fade up from y:16, duration 0.6s, delay 0.1s text-center font-display text-5xl md:text-6xl lg:text-[5rem] leading-[0.95] tracking-tight text-foreground max-w-xl Content: The Future of Smarter Automation — the word "Smarter" renders in Instrument Serif italic 3. Subheadline
Framer Motion: fade up from y:16, duration 0.6s, delay 0.2s mt-4 text-center text-base md:text-lg text-muted-foreground max-w-[650px] leading-relaxed font-body Text: "Automate your busywork with intelligent agents that learn, adapt, and execute—so your team can focus on what matters most." 4. CTA Buttons
Framer Motion: fade up from y:16, duration 0.6s, delay 0.3s mt-5 flex items-center gap-3 Primary button: rounded-full px-6 py-5 text-sm font-medium font-body — text "Book a demo" Play button: ghost variant, h-11 w-11 rounded-full border-0 bg-background shadow-[0_2px_12px_rgba(0,0,0,0.08)] hover:bg-background/80 with a Play icon (lucide) h-4 w-4 fill-foreground 5. Dashboard Preview (custom coded, NOT an image)
Framer Motion: fade up from y:30, duration 0.8s, delay 0.5s Container: mt-8 w-full max-w-5xl Frosted glass wrapper: rounded-2xl overflow-hidden p-3 md:p-4 with inline styles: background: rgba(255, 255, 255, 0.4) border: 1px solid rgba(255, 255, 255, 0.5) boxShadow: var(--shadow-dashboard) Dashboard internals (all coded in React, text-[11px], select-none pointer-events-none):
Top bar: Logo "N" in rounded box + "Nexora" + chevron | Search bar with ⌘K shortcut | "Move Money" + bell + avatar "JB" Sidebar (w-40): Items — Home (active), Tasks (badge "10"), Transactions, Payments (chevron), Cards, Capital, Accounts (chevron). Section "Workflows": Trake rutes, Payments, Notifications, Settings Main content (bg-secondary/30): Greeting: "Welcome, Jane" — text-sm font-semibold Action buttons row: Send (primary/accent), Request, Transfer, Deposit, Pay Bill, Create Invoice — rounded-full pill buttons text-[10px], + "Customize" text Two equal-width cards (flex-1 basis-0) side by side: Balance card: "Mercury Balance" with checkmark, amount $8,450,190.32 (cents in text-xs text-muted-foreground), stats (Last 30 Days, +$1.8M green, -$900K red), SVG area chart (h-20) with smooth cubic Bézier curve, linear gradient fill from accent at 15% opacity to transparent, stroke in accent color strokeWidth="1.5" Accounts card: Header "Accounts" with + and ⋮ icons. Three rows (py-3, no dividers, text-xs, justify-between): Credit $98,125.50, Treasury $6,750,200.00, Operations $1,592,864.82 Transactions table: "Recent Transactions" heading, table with columns Date/Description/Amount/Status. 4 rows: AWS -$5,200 Pending (amber), Client Payment +$125,000 Completed (green), Payroll -$85,450 Completed, Office Supplies -$1,200 Completed Dependencies
framer-motion for all animations lucide-react for all icons shadcn/ui Button component Tailwind CSS with tailwindcss-animate plugin Key Design Decisions
The dashboard overflows toward the bottom of the viewport and is clipped by overflow-hidden on the parent No dark mode — light only All colors use semantic Tailwind tokens, never raw color values in components The SVG chart uses a hand-crafted cubic Bézier path, not a charting library