Gemini 3.1 一次生成动效网站

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