drone
Deepak PatidarBuild 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.
Comments (0)
Sign in to leave a comment
Project Tasks21
Implement Navbar for Homepage
As a frontend developer, implement the Navbar section for the Homepage. Build the `Navbar` component with `useState` for `scrolled` (tracks `window.scrollY > 12` via passive scroll listener in `useEffect`) and `open` (mobile menu toggle). Render a `<header>` with class `nv-root` that gains `nv-scrolled` class on scroll. Include the AERONYX SVG logo mark (drone hub-and-arm icon with corner circles), a `NAV_LINKS` array (`Home`, `Products`, `About`) rendered as `<ul className='nv-links'>`, and a `nv-actions` div with an 'Explore Our Fleet' CTA anchor and a hamburger/close toggle button using inline SVG icons. Render a `<div className='nv-mobile'>` that gains `nv-open` when `open` is true, containing mobile nav links and CTA that close the menu on click. Import `Navbar.css` for all styles. Note: this component will be reused across all pages.
Enquiry Form Submission API
As a backend developer, implement the enquiry form submission API endpoint (POST /api/enquiry). Accept email, subject, and message fields. Validate inputs (email format, required fields, message length). Store enquiry records in the database with timestamp and status fields. Return appropriate success/error responses. Include rate limiting to prevent spam submissions. This endpoint is required by the EnquiryForm frontend section (task be533abe-ec96-4acc-b5a5-b8d7fe723b41).
Enquiry Database Model Migration
As a backend developer, create the database model and migration for storing enquiry submissions. Define the Enquiry model with fields: id (UUID), email (string, required), subject (string, optional), message (text, required), status (enum: new/read/responded), created_at, updated_at. Generate and run migration. Create seed data for development testing. This data layer supports the enquiry API endpoint.
Setup Design System Tokens
As a frontend developer, set up the global design system and CSS custom properties (tokens) for the entire site. Define CSS variables for all theme colors: --primary (#050608), --primary-light (#0a0c10), --secondary (#00aaff), --accent (#ffffff), --highlight (#00aaff), --bg (#050608), --surface (rgba(10,12,16,0.8)), --text (#ffffff), --text-muted (rgba(255,255,255,0.7)), --border (rgba(0,170,255,0.5)). Set up global typography (Inter/Syne via Google Fonts CDN), base resets, and shared animation utility classes. Create a shared CSS file imported by all section components. This must be completed before all other frontend section tasks can be finalized.
Deploy Static Site to CDN
As a DevOps engineer, configure deployment of the single-page static site (single HTML file with GSAP via CDN) to a static hosting provider (e.g., Netlify, Vercel, or AWS S3 + CloudFront). Set up environment-specific configuration for the backend API base URL. Ensure the backend API is accessible from the deployed frontend (CORS, base URL). Configure a CI/CD pipeline that builds and deploys on push to main. Set up preview deployments for pull requests.
Configure CORS and API Middleware
As a backend developer, set up global API middleware including CORS configuration (allow frontend origin), request body parsing (JSON), security headers (helmet or equivalent), request logging, and global error handling middleware. This is a prerequisite cross-cutting concern for all backend API endpoints including the enquiry submission API. Ensure rate limiting middleware is globally applied.
Implement HomepageHero for Homepage
As a frontend developer, implement the `HomepageHero` section. Use `useRef` for `rootRef`, `bgRef`, `accentRef`, `contentRef` and `useState` for `sparks`. Register `ScrollTrigger` with GSAP. In `useLayoutEffect`, build a GSAP timeline with `scrub: 0.6` that translates `bgRef` by `yPercent: 20`, `accentRef` by `yPercent: 50`, and scales/fades `contentRef` (`scale: 0.86`, `opacity: 0`, `y: -60`) on scroll — skipped if `prefers-reduced-motion` is set. Implement `fireBurst()` which generates 10 spark objects with radial `dx`/`dy` offsets and clears them after 650ms via `setSparks`. Render the `Drone` SVG component (body rect, 4 arms, 4 `hh-rotor` ellipses with per-origin transforms). Use `framer-motion` `motion` with stagger container and `wordVariant` (`opacity: 0, y: 28, filter: blur(8px)`) for `HEADLINE_LINE_ONE` (`Autonomous`, `Flight,`) and `HEADLINE_LINE_TWO` (`Engineered`, `for`, `Earth.`). Import `HomepageHero.css`.
Implement StatsBar for Homepage
As a frontend developer, implement the `StatsBar` section. Use `useRef` for `rootRef`, `cardRefs` (array), and `numRefs` (array). Register `ScrollTrigger`. In `useEffect`, iterate over 4 stat cards (`500+ Deployments`, `99.9% Fleet Uptime`, `50+ Countries`, `1.2M Flight Hours`) — for each, create a `ScrollTrigger` with `once: true` at `top 85%` that adds class `sb-in` and runs a GSAP counter tween (`power2.out`, duration 2s, staggered by `i * 0.2`), updating `numEl.textContent` via `onUpdate` with `toFixed(stat.decimals)`. On counter complete, animate `boxShadow` with `rgba(0,170,255,0.7)` pulsing 3 times (`yoyo`, `sine.inOut`) then settles to `rgba(0,170,255,0.22)`. Render `sb-glowline` top/bottom spans, `sb-decor` grid layer with CSS scroll variable parallax. Import `StatsBar.css`.
Implement MissionSection for Homepage
As a frontend developer, implement the `MissionSection`. Use `useRef` for `rootRef`, `morphRef` (SVG path), and `accentRef` (SVG path). In `useEffect` with GSAP context: animate `morphRef` path attribute from `SHAPE_A` ('M230 70 L360 150...hexagon') to `SHAPE_B` via `scrollTrigger` scrub over full section scroll. For `accentRef`, compute `getTotalLength()`, set `strokeDasharray`/`strokeDashoffset`, then animate `strokeDashoffset` to 0 on scroll. Render 4 `PILLARS` (`Autonomous Precision`, `Live Telemetry`, `Engineered Resilience`, `AI Navigation`) each with a unique SVG icon, using `framer-motion` `motion` for slide-in entrance animations. Include morphing SVG polygon and accent SVG path (`ACCENT_FROM` to `ACCENT_TO` bezier curves) as decorative elements. Import `MissionSection.css`.
Implement DroneFleet for Homepage
As a frontend developer, implement the `DroneFleet` section. Render 6 drone product cards from the `DRONES` array: `Scout X1` (Recon/Agile), `Cargo Lifter C9` (Heavy Payload/Industrial), `SurveyMap S5` (Mapping/Precision), `Sentinel P3` (Patrol/Autonomous), `Vortex V7` (Racing/High-Speed), `Atlas A11` (Endurance/Long-Range). Each card displays name, class, tag badge, 4 spec key-value pairs, and the `DroneIcon` SVG component (body rect, 4 arms via `<line>`, 4 rotor `<ellipse>` groups with class `df-blade-spin` and individual `transformOrigin` per rotor position). Use `framer-motion` with `containerVariants` (stagger `0.1`) and `cardVariants` (`y: 100 → 0`, `opacity: 0 → 1`, spring `stiffness: 90`, `damping: 16`) for entrance animation. Import `DroneFleet.css`.
Implement HowItWorks for Homepage
As a frontend developer, implement the `HowItWorks` section. Use `useRef` for `sectionRef` and `lineRef` (SVG connecting line element). In `useEffect`, compute `lineRef.getTotalLength()`, set `strokeDasharray`/`strokeDashoffset` to that length, then animate `strokeDashoffset` to 0 via GSAP tween (`power2.out`, duration 1.5s) with `ScrollTrigger` scrub `0.6` between `top 70%` and `bottom 70%` — call `ScrollTrigger.refresh()` after setup and kill both tween and trigger on cleanup. Render 3 `STEPS` (`Plan & Deploy Your Mission`, `Autonomous Flight & Live Telemetry`, `Capture, Analyze & Return`) with `tag`, `title`, and `desc`. Decorate with `hiw-glowline`, two `hiw-aura` spans, and two `hiw-drone` SVG spans using CSS scroll variable parallax (`-0.2px` and `-0.45px` multipliers). Import `HowItWorks.css`.
Implement FeaturesGrid for Homepage
As a frontend developer, implement the `FeaturesGrid` section. Render 8+ feature cards from the `FEATURES` array including `AI Navigation` (Autonomous), `Real-Time Telemetry` (Live Data), `Autonomous Flight` (Hands-Free), `Obstacle Avoidance` (360° Sensing), `Precision GPS Lock` (Centimeter), `Extended Range` (12km Link), and additional features — each with a unique inline SVG icon, `tag` badge, `title`, and `desc`. Use `framer-motion` `motion` components for entrance animations on each card. Lay out cards in a responsive CSS grid. Import `FeaturesGrid.css`.
Implement EnquiryForm for Homepage
As a frontend developer, implement the `EnquiryForm` section. Manage state: `email`, `subject`, `message` (controlled inputs), `status` (`idle | submitting | success`), and `burstKey`. Use `useMemo` keyed on `burstKey` to generate 12 spark objects with radial `x`/`y` offsets (angle-based, 60–110px dist). In `handleSubmit`, prevent default, increment `burstKey`, set status to `submitting`, then after 900ms set `success`, and after 3600ms reset to `idle` and clear fields. Render parallax decorative layers: slow layer (`-0.2px`) with `ef-grid`, `ef-orb--one`, `ef-orb--two`; mid layer (`-0.45px`) with `ef-scanline` and three `ef-drone` SVG spans (ellipse body + arm paths). Render form with `aria-labelledby='ef-title'` containing email, subject, message fields and submit button. Use `framer-motion` `AnimatePresence` for spark burst particles and success state transition. Import `EnquiryForm.css`.
Implement Footer for Homepage
As a frontend developer, implement the `Footer` section. Render `ftr-glowline`, `ftr-aura--one`, and `ftr-aura--two` decorative spans. Inside `ftr-inner`, render `ftr-top` with brand column (AERONYX logo using blade-arm SVG + `ftr-blade` path group + inner circle) and 3 `linkColumns` (`Products`, `Company`, `Support`) each with 4 anchor links. Render `socials` row with 4 icon-link buttons: `X` (cross SVG), `LinkedIn` (rect + path), `YouTube` (rect + play triangle), `Instagram` (rect + circle + dot). Render `ftr-bottom` bar with copyright using `new Date().getFullYear()` and legal links. Note: this component may already exist from a previous page and can be reused. Import `Footer.css`.
Setup GSAP ScrollTrigger Integration
As a frontend developer, configure the global GSAP and ScrollTrigger setup for the site. Load GSAP and ScrollTrigger via CDN with proper fallback handling if GSAP fails to load. Register ScrollTrigger plugin globally. Implement graceful animation degradation — all animations must work without GSAP (static fallback states). Set up reduced-motion media query handling globally. Create shared GSAP utility functions/constants reused across HowItWorks, StatsBar, HomepageHero, and MissionSection components. This must be completed before all scroll-animation section tasks.
Enquiry Email Notification Service
As a backend developer, implement an email notification service that sends a confirmation email to the visitor upon successful enquiry submission and an internal notification to the team. Integrate with a transactional email provider (e.g., SendGrid, Mailgun, or SMTP). This supports the POST /api/enquiry endpoint and the EnquiryForm frontend section. Depends on the Enquiry Form Submission API task (6bb97426-03f4-44cf-981c-92b260ef96c1).
Deploy Backend API Service
As a DevOps engineer, configure deployment of the backend API service (enquiry endpoint) to a cloud provider (e.g., Railway, Render, AWS ECS, or similar). Set up environment variables for database connection string, email provider API key, and rate-limiting config. Configure CORS to allow requests from the deployed frontend domain. Set up health check endpoint. Integrate with CI/CD pipeline for automated deploys on merge to main.
Implement Responsive Layout System
As a frontend developer, implement the global responsive layout system ensuring the entire site adapts to both mobile and desktop devices. Define breakpoints, fluid grid system, and responsive typography scale. Ensure all section components (Hero, StatsBar, MissionSection, DroneFleet, HowItWorks, FeaturesGrid, EnquiryForm, Footer) are fully responsive. Test at standard breakpoints (320px, 768px, 1024px, 1440px). Verify that animations scale and behave correctly on mobile (touch) devices. Note: this cross-cutting task must be verified against all frontend section tasks.
Integrate EnquiryForm with Backend
As a Tech Lead, verify the end-to-end integration between the EnquiryForm frontend implementation and the enquiry submission backend API. Ensure the form (email, subject, message) correctly POSTs to /api/enquiry, API responses (success/error) are handled and reflected in the frontend status states (idle/submitting/success), validation errors are displayed inline, rate limiting responses are handled gracefully, and the success animation/burst triggers only on confirmed API success. Verify on both mobile and desktop.
Integrate EnquiryForm API End-to-End
As a Tech Lead, verify the end-to-end integration between the EnquiryForm frontend implementation (be533abe-ec96-4acc-b5a5-b8d7fe723b41) and the Enquiry Form Submission backend API (6bb97426-03f4-44cf-981c-92b260ef96c1). Ensure data flows correctly from the form POST to the database, API responses (success/validation error/rate-limit) are handled and reflected in the frontend status states (idle/submitting/success), email confirmation is triggered on success, and the success animation/burst triggers only on confirmed API success. Verify on both mobile and desktop viewports. Note: this supersedes the existing integration task (479133be-19a6-49a8-80e8-c7233214e1e1) with a focus on the full stack including the email notification service.
Audit Performance and Accessibility
As a frontend developer, run Lighthouse audits (performance, accessibility, SEO) on the completed single-page site. Ensure GSAP animations respect `prefers-reduced-motion`. Verify all interactive elements have ARIA labels (enquiry form uses aria-labelledby='ef-title', CTA buttons are keyboard-accessible, social icons have aria-label). Optimize CSS for paint performance (use `will-change` sparingly, avoid layout thrash). Target Lighthouse score ≥90 for accessibility. This task depends on all frontend section tasks being complete.
No comments yet. Be the first!