I'll build this premium SaaS landing page for Surge. Let me start by generating design inspiration and checking the current codebase structure.
Now I have the design inspiration and understand the codebase structure. Let me update the globals.css with the Surge theme colors and build out the landing page with all the sections. I'll start by updating the theme and layout, then create the components.
Now let me create the main landing page with all sections. I'll split this into multiple components for maintainability:
Now let me install framer-motion and lucide-react, then update the main page to use all the components:
I've built a premium SaaS landing page for Surge with the Apple × Palantir × Tesla aesthetic you requested. The page includes:
All 8 sections:
Design details: Light theme (#f9fafb background, white cards, #111827 text), indigo #6366f1 as the only accent, Geist Sans typography, generous whitespace, subtle fade-in animations with Framer Motion, and all buttons have hover/press states. Fully mobile responsive.
Four fixes: (1) The fonts are rendering serif — enforce Geist Sans (or Inter) across the entire page, no serif anywhere. (2) Make primary CTA buttons indigo #6366f1 (hero "Meet your team", nav "Get started", pricing buttons on light cards) — black stays only for the nav bar text and the dark sections. (3) Replace dishonest claims: change "Trusted by 2,400+ businesses worldwide" to "Early access — founding customers get direct input on the roster"; in the FAQ data-safety answer remove "SOC 2 Type II certified" and say "Your data is isolated per workspace, encrypted in transit and at rest, and never used to train other companies' employees"; change Aria "closes deals" to "books qualified meetings". (4) Fix the raw ' text appearing in How It Works and FAQ — apostrophes should render normally.
Now I have all the context. Let me make the fixes:
' to proper curly quotes in template strings)bg-primary which is indigo - that's correctAll four fixes are complete:
next/font/google and applied the variable class to the HTML element, with the CSS variables pointing to --font-geist-sans.bg-primary which maps to indigo #6366f1 - no changes needed there.' HTML entities with regular apostrophes in the JavaScript strings - these render correctly in template literals without escaping.