drone

byDeepak Patidar

Build a modern, dark-themed, scroll-driven website for a drone company called "AeroVex" (you can replace this name). The entire experience should be driven by scroll animations — elements animate in, transform, and transition as the user scrolls down the page. Tech stack: HTML, CSS, and vanilla JavaScript (or GSAP + ScrollTrigger via CDN). Single HTML file. Design language: Dark color palette: deep blacks (#050608, #0a0c10), dark navy surfaces, with electric blue (#00aaff) and white as accent colors Typography: clean sans-serif (use Google Fonts — "Inter" or "Syne") Subtle grid or noise texture on the hero background Glowing accent lines and borders (CSS box-shadow glow effects in blue) Smooth, cinematic scroll feel throughout Sections (in order): Hero Section Full-screen, centered Large headline: "The Future Flies With Us" Subheading about autonomous drone technology A CTA button: "Explore Our Fleet" On scroll: headline fades and scales up slightly as it exits (parallax effect) Optional: animated SVG or CSS drone silhouette floating in the background Stats / Numbers Bar Horizontal strip with 3–4 key metrics (e.g., "500+ Missions Completed", "40km Range", "99.8% Uptime") Animate numbers counting up when scrolled into view About / Mission Section Split layout: left = large text block, right = abstract geometric visual (CSS-drawn or SVG) Text slides in from the left, visual from the right on scroll Products / Drone Fleet Section 3 drone model cards in a horizontal row (dark cards with glowing blue border on hover) Each card: drone name, short specs, image placeholder or CSS drone icon Cards stagger-animate in from below as user scrolls How It Works Section 3-step vertical timeline (Deploy → Navigate → Deliver) Each step fades and slides in sequentially as you scroll past it Connecting animated vertical line draws itself on scroll Features Highlight Section Icon grid (6 features: e.g., AI Navigation, Real-Time Telemetry, Obstacle Avoidance, etc.) Icons and labels pop in with a staggered scale animation on scroll CTA / Contact Section Full-width dark section with a centered headline: "Ready to Launch?" Email input field + Submit button with glowing blue styling Background has subtle animated particles or a slow radial pulse effect (CSS only) Footer Logo, nav links, social icons, copyright line Minimal, clean Scroll animation rules: Use GSAP ScrollTrigger (load from CDN) for all scroll-driven animations Default animation pattern: opacity: 0, y: 40 → opacity: 1, y: 0 with ease: power2.out Hero parallax: pin the hero, animate child elements on scroll Timeline line: use scaleY from 0 to 1 triggered by scroll progress Stats counter: trigger number count-up animation on entering viewport Stagger delay of 0.15s between sibling elements in grids/cards Make the website fully responsive (mobile + desktop). All animations should degrade gracefully if GSAP fails to load. No external images needed — use CSS shapes, SVGs, or placeholder divs styled as visuals.