صفحة البرومت

Build a premium electric vehicle landing page with a dark, cinematic aesthetic. The entire site uses a black background (hsl(0,0%,0%)) with light text (hsl(0,0%,95%) as primary) and orange accents (hsl(25,100%,50%)). No default fonts — keep it minimal and editorial. Use shadcn/ui design tokens. Here are the sections in order: Design System (index.css) --background: 0 0% 0% --foreground: 0 0% 12% (used for dark elements like CTA button inner circles) --primary: 0 0% 95% (near-white, used for all text) --primary-foreground: 0 0% 12% --accent-warm: 25 90% 55% (orange accent) All section backgrounds are pure black hsl(0,0%,0%) Section 1: Navbar Fixed top, full-width, rounded-full pill shape Transparent initially, on scroll: black bg with backdrop-blur-xl, border primary/10 Logo left: "Electric" with an orange dot "." — logo color changes from black to white on scroll Nav links: Services, About, Team, Contact — hover has a scale-up rounded bg pill effect CTA button right: "Get Started" with a rounded-full pill, contains an ArrowUpRight icon inside a circular foreground bg CTA switches from black bg to white bg on scroll Mobile: hamburger menu, opens a rounded dark overlay with links + CTA Section 2: Hero Full viewport height, video background (/videos/hero_bg.mp4, autoplay, loop, muted) Large heading top-left: "Drive Beyond. / Unlock Pure Power" — white text, 78px on desktop Below heading: "Learn more" link with arrow icon, bordered button (border-foreground), no fill Section 3: Connected Systems (BigLinks) Top half: Video background (/videos/biglinks_bg.mp4) with 60% black overlay Left-aligned content: pill badge "Connected Systems", heading "Seamlessly Integrate / Every System", subtitle paragraph 12-column icon grid (4 cols mobile, 6 tablet, 12 desktop): each icon is 80x80px, rounded-xl, border white/10, bg white/5, backdrop-blur. Icons are orange with glow (drop-shadow-[0_0_8px_hsl(25,100%,50%)]). Icons: Gauge, Zap, Shield, Cog, Fuel, Navigation, Bluetooth, Wifi, Radio, Car, Wrench, Settings (from lucide-react) "Explore All" rounded pill border button Bottom half: 3 big full-width text links stacked vertically: "Find a dealer", "Fleet & lease", "Book a test drive" — each is huge text (110px desktop), with a ChevronRight icon right-aligned, separated by border-b border-primary/10, hover reduces opacity Section 4: Services Video background (/videos/services_card.mp4, autoplay, loop, muted) Centered content: pill badge "Next-Gen Driving", heading "Design, build and perfect / every single detail" Below: a glass-morphism card (max-w-2xl, centered, bg-primary/5 backdrop-blur-xl border-primary/10 rounded-2xl)Heading: "Effortless, All-Electric / Performance" Paragraph describing adaptive tech 3 bullet points with orange Zap icons (with glow): "Full-spectrum torque & drivetrain control", "Personalised driving & comfort profiles", "Track range & plan routes easily" Section 5: About Black bg, left-aligned Label: line + "About Us" text Heading: "Why You Absolutely Should / Experience Our Electric Range" (last part in primary/50) Below: two-column layoutLeft: 3 abstract shape images side by side (shape-1.png, shape-2.png, shape-3.png), each object-contain, 256px tall Right: two paragraphs of body text in primary/70 Section 6: Audience (For Whom?) Black bg, left-aligned Label: line + "For Whom?" Heading: "Who Should Experience / Our Electric Range" (second line in primary/50) 4-column grid of cards:First card: circular with a background image (audience-icon.png), aspect-square rounded-full border-primary/10 Other 3 cards: rounded-3xl bordered cards with lucide icons (Users, Gauge, Wrench) in primary/50, label text below Bottom: rounded info bar with descriptive paragraph Section 7: CTA Black outer bg, inner rounded-2xl card with video bg (/videos/services_card.mp4) + 50% black overlay Left-aligned content: heading "Experience the future / of driving today." Subtitle: "Book your test drive — one click, instant access. / No commitment, pure electric." Rounded-full CTA button: "Book a Test Drive" with ArrowUpRight in a circular foreground-colored badge, pill shape with bg-primary Assets needed: 4 videos: hero_bg.mp4, biglinks_bg.mp4, services_card.mp4 (used twice: services + CTA) 3 abstract shape PNGs: shape-1.png, shape-2.png, shape-3.png 1 audience icon image: audience-icon.png Use lucide-react for all icons Key design patterns: All section padding: px-7 py-16 md:px-12 lg:px-20 lg:py-24, max-w-7xl centered Label pattern: h-px w-6 bg-primary/40 line + small text Badge pattern: rounded-full pill with border primary/30, uppercase tracking-widest CTA button pattern: rounded-full, bg-primary text-primary-foreground, with inner circular icon badge Orange accent color used only for: logo dot, icon glows, specific highlights — always hsl(25,100%,50%) with optional drop-shadow glow Here's the exact prompt to recreate this landing page: PROMPT: Build a premium electric vehicle landing page with a dark, cinematic aesthetic. The entire site uses a black background (hsl(0,0%,0%)) with light text (hsl(0,0%,95%) as primary) and orange accents (hsl(25,100%,50%)). No default fonts — keep it minimal and editorial. Use shadcn/ui design tokens. Here are the sections in order: Design System (index.css) --background: 0 0% 0% --foreground: 0 0% 12% (used for dark elements like CTA button inner circles) --primary: 0 0% 95% (near-white, used for all text) --primary-foreground: 0 0% 12% --accent-warm: 25 90% 55% (orange accent) All section backgrounds are pure black hsl(0,0%,0%) Section 1: Navbar Fixed top, full-width, rounded-full pill shape Transparent initially, on scroll: black bg with backdrop-blur-xl, border primary/10 Logo left: "Electric" with an orange dot "." — logo color changes from black to white on scroll Nav links: Services, About, Team, Contact — hover has a scale-up rounded bg pill effect CTA button right: "Get Started" with a rounded-full pill, contains an ArrowUpRight icon inside a circular foreground bg CTA switches from black bg to white bg on scroll Mobile: hamburger menu, opens a rounded dark overlay with links + CTA Section 2: Hero Full viewport height, video background (/videos/hero_bg.mp4, autoplay, loop, muted) Large heading top-left: "Drive Beyond. / Unlock Pure Power" — white text, 78px on desktop Below heading: "Learn more" link with arrow icon, bordered button (border-foreground), no fill Section 3: Connected Systems (BigLinks) Top half: Video background (/videos/biglinks_bg.mp4) with 60% black overlay Left-aligned content: pill badge "Connected Systems", heading "Seamlessly Integrate / Every System", subtitle paragraph 12-column icon grid (4 cols mobile, 6 tablet, 12 desktop): each icon is 80x80px, rounded-xl, border white/10, bg white/5, backdrop-blur. Icons are orange with glow (drop-shadow-[0_0_8px_hsl(25,100%,50%)]). Icons: Gauge, Zap, Shield, Cog, Fuel, Navigation, Bluetooth, Wifi, Radio, Car, Wrench, Settings (from lucide-react) "Explore All" rounded pill border button Bottom half: 3 big full-width text links stacked vertically: "Find a dealer", "Fleet & lease", "Book a test drive" — each is huge text (110px desktop), with a ChevronRight icon right-aligned, separated by border-b border-primary/10, hover reduces opacity Section 4: Services Video background (/videos/services_card.mp4, autoplay, loop, muted) Centered content: pill badge "Next-Gen Driving", heading "Design, build and perfect / every single detail" Below: a glass-morphism card (max-w-2xl, centered, bg-primary/5 backdrop-blur-xl border-primary/10 rounded-2xl)Heading: "Effortless, All-Electric / Performance" Paragraph describing adaptive tech 3 bullet points with orange Zap icons (with glow): "Full-spectrum torque & drivetrain control", "Personalised driving & comfort profiles", "Track range & plan routes easily" Section 5: About Black bg, left-aligned Label: line + "About Us" text Heading: "Why You Absolutely Should / Experience Our Electric Range" (last part in primary/50) Below: two-column layoutLeft: 3 abstract shape images side by side (shape-1.png, shape-2.png, shape-3.png), each object-contain, 256px tall Right: two paragraphs of body text in primary/70 Section 6: Audience (For Whom?) Black bg, left-aligned Label: line + "For Whom?" Heading: "Who Should Experience / Our Electric Range" (second line in primary/50) 4-column grid of cards:First card: circular with a background image (audience-icon.png), aspect-square rounded-full border-primary/10 Other 3 cards: rounded-3xl bordered cards with lucide icons (Users, Gauge, Wrench) in primary/50, label text below Bottom: rounded info bar with descriptive paragraph Section 7: CTA Black outer bg, inner rounded-2xl card with video bg (/videos/services_card.mp4) + 50% black overlay Left-aligned content: heading "Experience the future / of driving today." Subtitle: "Book your test drive — one click, instant access. / No commitment, pure electric." Rounded-full CTA button: "Book a Test Drive" with ArrowUpRight in a circular foreground-colored badge, pill shape with bg-primary Assets needed: 4 videos: hero_bg.mp4, biglinks_bg.mp4, services_card.mp4 (used twice: services + CTA) 3 abstract shape PNGs: shape-1.png, shape-2.png, shape-3.png 1 audience icon image: audience-icon.png Use lucide-react for all icons Key design patterns: All section padding: px-7 py-16 md:px-12 lg:px-20 lg:py-24, max-w-7xl centered Label pattern: h-px w-6 bg-primary/40 line + small text Badge pattern: rounded-full pill with border primary/30, uppercase tracking-widest CTA button pattern: rounded-full, bg-primary text-primary-foreground, with inner circular icon badge Orange accent color used only for: logo dot, icon glows, specific highlights — always hsl(25,100%,50%) with optional drop-shadow glow