The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].

# Drone Services Company Website

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
A one-page, crisp white services site for [BRAND], an aerial drone services company flying [SERVICE_REGION]. The hero is a full-bleed top-down aerial photograph with white typography and mono telemetry chips, drifting on subtle parallax. Then: three service cards with photos and deliverable chips (inspection, mapping and survey, filming and progress); the before/after mapping slider — one scene, a draggable divider, the processed side drawn live in canvas (survey grid, contours, false-color tint, orange waypoints); a three-step flight-day strip; an industries row with four proof lines; a six-photo gallery with mono captions; and a client-side quote form. All local, all static.

- Audience: [AUDIENCE] who need measurable aerial data or footage, plus drone operators, surveyors and field-services businesses adapting the template for their own book.
- Goal: Prove the quality of the work in one scroll — hero photo, deliverable chips, the interactive map slider and the gallery — and convert project briefs through the quote form.
- Tone: Plain-spoken and measurable. Short sentences, surveyor vocabulary (GSD, orthomosaic, contour), concrete invented numbers. No adventure-sport language, no regulation talk, no hype.

## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: react (MIT), react-dom (MIT), motion (motion.dev, import from motion/react) (MIT), lucide-react (ISC), tailwindcss (MIT), postcss (MIT), autoprefixer (MIT), vite (MIT), @vitejs/plugin-react (MIT), typescript (Apache-2.0), @fontsource-variable/space-grotesk (OFL-1.1), @fontsource-variable/archivo (OFL-1.1), @fontsource/ibm-plex-mono (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Scaffold with npm create vite@latest using the react-ts template. One page: index.html at the project root with entry src/main.tsx. package.json scripts: dev 'vite', build 'tsc -b && vite build', preview 'vite preview'.
  - vite.config.ts: base './', plugins [react()], build { outDir 'dist', sourcemap false, assetsInlineLimit 0 }. Images live in public/images/ referenced as './images/<file>' so they work under any sub-path. Keep dist/ under 6 MB.
  - Tailwind 3.4 through PostCSS, content ['./index.html', './src/**/*.{ts,tsx}']. In tailwind.config.ts extend colors (cloud, skywash, mist, line, ink, slate, faint, sky, signal, signal-deep, signal-tint), fontFamily display ['Space Grotesk Variable', 'system-ui', 'sans-serif'], sans ['Archivo Variable', 'system-ui', 'sans-serif'], mono ['IBM Plex Mono', 'ui-monospace', 'monospace'], maxWidth { container: '1200px' }, borderRadius { card: '14px', chip: '6px', frame: '16px' }.
  - src/fonts.ts imports @fontsource-variable/space-grotesk (500,600,700), @fontsource-variable/archivo (400,500,600) and @fontsource/ibm-plex-mono (400.css, 500.css); src/main.tsx imports src/fonts.ts and src/index.css. index.css holds the Tailwind layers, body background #FFFFFF and color #16242E, and a @media (prefers-reduced-motion: reduce) block shortening CSS animations and transitions to 0.01ms.
  - File layout: src/content.ts (all copy and data, typed), src/lib/brand.ts (brandSlug, emailDomain, companyName, address), src/lib/mulberry32.ts, src/components/ (Header.tsx, MobileMenu.tsx, Hero.tsx, Services.tsx, MapSlider.tsx, FlightDay.tsx, Industries.tsx, Gallery.tsx, QuoteForm.tsx, Footer.tsx, Button.tsx, Reveal.tsx), src/App.tsx composing them in page order.
  - MapSlider.tsx draws the processed side itself: a <canvas> layer over the raw image, rendered with the seeded algorithm in the Map slider section (mulberry32 seed 42), re-rendered on resize (debounced 150ms). No image-editing libraries.
  - Reveal.tsx wraps sections in Motion whileInView fade-up (opacity 0 -> 1, y 20 -> 0, duration 0.6, ease [0.22, 1, 0.36, 1], viewport once with amount 0.2), unanimated when reduced motion is on. Wrap the app in MotionConfig reducedMotion='user'.
  - index.html: lang en, <meta name='theme-color' content='#FFFFFF'>, <link rel='icon' href='./favicon.svg' type='image/svg+xml'>, <title>[BRAND] — Aerial inspection, mapping and filming</title>. public/favicon.svg is the logo mark (ink circle with the white descent-path chevrons and orange waypoint dot).
  - Download the six images with the curl commands under Assets into public/images/ before building, and write ASSETS.md at the project root as described under Assets.

## Variables
- [BRAND] — Brand name (default: "Ternbay"). Invented company name; the site brands itself '[BRAND] Aerial'. Never a real drone maker, operator or regulator.
- [SERVICE_REGION] — Service region (default: "the Pacific Northwest"). Where the crew flies. Used in the hero subhead, industries copy and footer; project locations in the gallery echo it.
- [AUDIENCE] — Client type (default: "civil engineering firms, county surveyors and film crews"). Plural noun phrase for who hires the company; drives the hero, industries proof lines and quote-form copy.
- [DAY_RATE] — Starting day rate (default: "$640"). Sample starting price shown as 'from [DAY_RATE] per flight day' on service cards and the quote form. Invented sample, any currency figure with a symbol.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/drone-services-company-website in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

## Design
### Colors
- cloud `#FFFFFF` — UI surface: header, cards, form, footer base
- skywash `#F2F6F9` — Alternate section background
- mist `#E3ECF2` — Chips background, inset panels, input fills
- line `#D3DEE6` — Hairline borders and dividers
- sky `#2F6DA8` — Cool data blue: links on white, contour tint base, small marks only
- ink `#16242E` — Headings, slider line, primary text on light
- slate `#4E6272` — Body copy
- faint `#8AA0AF` — Captions, mono labels, footnotes
- signal `#F25C05` — The single accent: CTAs, slider handle, waypoints, active states, proof numbers
- signal-deep `#C94804` — Hover and pressed states
- signal-tint `#FDEADD` — Soft orange highlights, selected chips

### Typography
- Display: H1 clamp(40px, 5vw, 68px) line-height 1.04 letter-spacing -0.02em weight 700; H2 clamp(30px, 3.6vw, 46px) weight 700; card titles 22px weight 600: Space Grotesk Variable (OFL), weights 500/600/700
- Text: body 16px/1.6, subheads 17-18px, nav 14px, buttons 15px weight 600: Archivo Variable (OFL), weights 400/500/600
- Mono: telemetry chips, deliverable chips, section labels (11-12px, letter-spacing 0.12em, uppercase), gallery captions, form labels: IBM Plex Mono (OFL), weights 400/500

### Layout & motion
- Spacing: 8px base. Container max-width 1200px with 24px side padding (20px below 640px). Sections 104px vertical padding on desktop, 72px on mobile. Section headers 48px below. Cards pad 24px; the slider frame is edge-to-edge within the container.
- Radius: Cards and photo cards 14px; chips 6px; inputs 8px; the slider frame 16px; primary and ghost buttons are full pills (999px); gallery tiles 10px.
- Motion: Hero parallax: the background photo translates 0 -> 8% of its height over the first 120vh of scroll (rAF, transform only), telemetry chips fade from 1 -> 0.7; disabled under reduced motion.
- Motion: Map slider: pointer or keyboard drag with the position clamped 0-100; a one-time hint sweep (50 -> 62 -> 40 -> 50 over 1.6s) when first 50% in view and not yet interacted; disabled under reduced motion.
- Motion: Scroll reveals: fade up 20px, 0.6s, ease [0.22, 1, 0.36, 1], once, stagger 0.06-0.1s.
- Motion: Card hovers: photo zooms 1 -> 1.04 (400ms), card lifts 3px; gallery captions underline in signal orange.
- Motion: prefers-reduced-motion: no parallax, no hint sweep, no zooms; reveals render in place; the slider still drags (it is direct manipulation).
- Imagery: Six generated aerial photographs that read as one operator's book: every image is a straight-down (nadir) view from about 120 meters in clear mid-morning light with crisp aligned shadows and a cool natural grade — estuary, solar array, striped farmland, forest-meets-lake, quarry terraces, small harbor. No people, no vehicles with readable plates, no signage, no readable text anywhere in the frames. The white UI sits over them; the survey overlay in the slider is code-drawn, not photographic.

## Pages & Sections
### Home (`index.html`)
1. **Content file and copy rules** — All copy in this prompt is written for the default values ([BRAND] = Ternbay, [SERVICE_REGION] = the Pacific Northwest, [AUDIENCE] = civil engineering firms, county surveyors and film crews, [DAY_RATE] = $640). Put every string, number, service, chip, industry line, gallery caption, form label and footer link in src/content.ts and render from it; components contain no copy. If any variable value differs, rewrite every headline, subhead, service line, industry proof line, gallery caption and form intro so it is specific and believable for the new company and region, keeping the same structure, item counts (3 services, 3 steps, 4 industries, 6 gallery tiles) and approximate lengths; gallery captions must still describe what their photo actually shows. Derived values in src/lib/brand.ts: brandSlug = [BRAND] lowercased with non-alphanumeric runs replaced by '-'; emailDomain = brandSlug without hyphens + '.com' (ternbay.com); companyName = [BRAND] + ' Aerial LLC'; address = '1180 Falkner Quay, Suite 2, Bremerton, WA 98337' (rewrite for the new region). Every number (GSD, acreage, rates) is an invented sample for the invented brand; no client logos, no testimonials, no regulator or certification references.
   Layout: No visual output. content.ts exports typed objects: brand, nav, hero, services, mapSlider, flightDay, industries, gallery, quote, footer. Section order: Header, Hero, Services, Map slider, Flight day, Industries, Gallery, Quote, Footer.
2. **Header (shared, sticky)** — Left: logo mark + wordmark '[BRAND] Aerial' (Space Grotesk 700, 18px). Logo mark: 30px inline SVG — an ink (#16242E) circle containing two white downward chevrons stacked with 6px gap (like a descent path) and a 4px signal-orange dot centered below the lower chevron. Nav links (Archivo 500, 14px, #4E6272, hover #16242E): Services (#services), Map room (#mapping), Industries (#industries), Work (#work). Right: signal-orange pill 'Get a quote' (href #quote).
   Layout: Fixed top, height 68px, full width; inner container 1200px, padding-x 24px, flex justify-between items-center. Over the hero it is transparent with white text and a white-bordered mark variant (ink circle swaps to white circle with ink chevrons); after 24px of scroll it gets background rgba(255,255,255,0.92), backdrop-filter blur(12px), 1px bottom border #D3DEE6 and the light variant (transition 200ms). Below 900px: nav hides; show the pill (small) and a 40px icon button with Lucide Menu (white over the hero, ink after scroll) opening a full-width sheet from under the header (background #FFFFFF, border-bottom #D3DEE6) with the four links at 18px, 56px rows, plus a full-width 'Get a quote' button; X closes, Escape closes, link taps close it. Anchors scroll smoothly with a 76px offset.
   Motion: Sheet: Motion height/opacity 240ms ease-out. Header variant is a CSS transition. No motion beyond that.
3. **Hero: full-bleed top-down aerial** — Kicker (mono 12px, uppercase, letter-spacing 0.14em, white/85): 'AERIAL INSPECTION · MAPPING · FILMING'. H1, two lines, white: 'The ground truth,' / 'from 120 meters up.' — '120 meters' in signal orange. Sub (18px, rgba(255,255,255,0.85), max-width 560px): '[BRAND] flies inspection, mapping and film missions across [SERVICE_REGION] and hands you data you can measure — orthomosaics at 1.2 cm per pixel, inspection sets you can zoom into, and footage that opens a video.' Buttons: signal pill 'Get a quote' (href #quote) and ghost pill 'Try the map slider' (white 1.5px border, white text, href #mapping). Telemetry chips, mono 12px uppercase: 'ALT 120 M', 'GSD 1.2 CM', 'FRAMES 2,400', 'WIND 9 KT'. Bottom-right scroll cue: mono 11px 'SCROLL' + Lucide ChevronDown in a slow 1.2s bob.
   Layout: Full-viewport hero (min-height 92vh). Background: img hero-coast.webp, position absolute inset-0, object-fit cover, object-position center; over it a gradient overlay linear-gradient(180deg, rgba(10,20,26,0.30) 0%, rgba(10,20,26,0.05) 40%, rgba(10,20,26,0.78) 100%). Content container 1200px positioned at the bottom-left: padding-bottom 96px; kicker, H1, sub, buttons in a left column (max-width 640px). Telemetry chips: a row of four chips pinned to the top-right under the header (inset-top 92px, right 24px on desktop) — each chip background rgba(255,255,255,0.85), backdrop blur 8px, radius 6px, padding 6px 10px, ink text. Scroll cue bottom-right 24px. Mobile (<900px): H1 40px; chips wrap into a 2x2 grid under the buttons (static, not pinned); scroll cue hidden.
   Motion: Parallax: the photo layer translates from 0 to 8% of its height downward as the section scrolls out of view (requestAnimationFrame, transform only, no layout); chips fade 1 -> 0.7 with scroll. Entry: kicker, H1, sub and buttons fade up (y 20 -> 0, stagger 0.08s) after 100ms. REDUCED MOTION: photo fixed, chips static, content renders in place.
4. **Services (#services)** — Section label (mono 12px, uppercase, letter-spacing 0.14em, #8AA0AF): 'WHAT WE FLY'. H2: 'Three services. Measurable deliverables.' Sub (17px, #4E6272): 'Every flight ends in files your team can open — not a pile of pretty frames.' Card 01, mono index '01 / INSPECTION', title 'Aerial Inspection' — 'Close looks at what no one can walk to: roof arrays, flare stacks, bridge decks, catwalks.' Chips: 4K ZOOM STILLS · THERMAL PAIRS · DEFECT MARKUP. Rate line (mono 12px, signal): 'from [DAY_RATE] per flight day'. Card 02 '02 / MAPPING', 'Mapping & Survey' — 'Orthomosaics, contours and volume reports you can drop straight into CAD.' Chips: ORTHOMOSAIC · 0.5 M CONTOURS · VOLUME REPORT. Card 03 '03 / FILMING', 'Filming & Progress' — 'One flight a month, a hyperlapse your whole team can scrub, and footage that opens a video.' Chips: 4K60 · HYPERLAPSE · PROGRESS GRID.
   Layout: Section padding 104px 0 (72px mobile), background #FFFFFF. Header left-aligned max-width 640px, margin-bottom 48px. Three cards in a 3-column grid (gap 24px; single column below 900px). Card: background #F2F6F9, 1px border #D3DEE6, radius 14px, overflow hidden. Photo top: aspect-ratio 4/3, object-fit cover (svc-inspection.webp, svc-mapping.webp, svc-filming.webp in order), with the mono index chip overlaid top-left (white chip, radius 6px). Body padding 20px: title (Space Grotesk 600, 22px, #16242E), body (15px, #4E6272, line-height 1.6), chips row (mono 10px uppercase, #4E6272 on #E3ECF2, radius 6px, padding 4px 8px, wrap), rate line at the bottom.
   Motion: Cards fade up stagger 0.08s (once). Hover: photo scales 1 -> 1.04 (400ms ease-out), card lifts 3px. Reduced motion: static.
5. **Map slider: before/after mapping (#mapping)** — Section label: 'MAP ROOM'. H2: 'One flight, two truths.' Sub (max-width 620px): 'Drag the divider. The left is the raw frame; the right is the same frame processed into a survey map — contours, grid and flight line drawn live in your browser.' Corner labels (mono 11px chips): left 'RAW FRAME', right 'SURVEY PASS'. Under the frame: caption (13px, #8AA0AF): 'A sample pair from one training flight — the same photo processed two ways in the browser, with sample data for this demo.' and a chips row (mono 11px, #4E6272 on #E3ECF2): 'GSD 2.4 CM', '18 CONTOURS', '3 WAYPOINTS', 'GRID 8×6'.
   Layout: Section padding 104px 0, background #F2F6F9. Header centered max-width 680px, margin 0 auto 32px. Slider frame: margin-top 24px, width 100%, aspect-ratio 16/9, radius 16px, overflow hidden, 1px border #D3DEE6, position relative, touch-action pan-y, cursor ew-resize. AFTER layer: img svc-mapping.webp object-fit cover. BEFORE layer: a <canvas> on top of the same size, clipped with clip-path inset(0 calc(100% - var(--pos)) 0 0), showing the raw photo. The canvas renders deterministically with mulberry32(42): 1) draw svc-mapping.webp cover-fit at canvas size with ctx.filter 'saturate(1.0) contrast(1.02)' (the raw look — no processing); the AFTER processing is a second canvas stacked under the raw one, also drawn from the same image with the survey treatment: ctx.filter 'saturate(0.55) brightness(1.06)', then a 'multiply' fill of rgba(47,109,168,0.16), then the survey grid (verticals every width/8, horizontals every height/6, stroke #16242E at alpha 0.12, setLineDash [2,6]), then 8 contour polylines: for k in 0..7, the path y(x) = height*(0.12 + 0.10*k) + 18*sin(x*0.008 + k*1.7) + 9*sin(x*0.021 + k*0.9), stroke #16242E alpha 0.55 width 1.5 (every 4th contour width 2.5 alpha 0.8), then the flight line: three waypoint circles at (0.22w, 0.30h), (0.55w, 0.62h), (0.78w, 0.28h) — each r7 stroke #F25C05 2.5px with a 2.5px center dot — connected by a dashed #F25C05 path (dash [8,6], width 2, alpha 0.9), then four L-shaped corner crop marks (#16242E, alpha 0.5). Layer stack in the frame: after-canvas (bottom), raw-canvas clipped by --pos (top). Both canvases size with the frame at devicePixelRatio capped at 2, re-rendered on resize (debounced 150ms). Handle: 2px vertical white line (#FFFFFF, box-shadow 0 0 10px rgba(0,0,0,0.5)) at var(--pos), with a 44px signal-orange circular knob (2px white ring) holding Lucide ChevronsLeftRight 18px in white. Corner labels: white chips radius 6px, 16px inset, top-left and top-right. Accessibility: knob is role='slider', tabindex 0, aria-label 'Compare raw frame and survey pass', aria-valuemin 0 max 100 valuenow = pos; ArrowLeft/Right move 5, Shift+Arrow 10, Home 0, End 100; visible 2px signal focus ring offset 3px. Pointer: pointerdown anywhere jumps and setPointerCapture drags; clamp 0-100; default pos 50. Mobile: aspect-ratio 4/3.
   Motion: When the frame first reaches 50% in view and has not been interacted with, a one-time hint sweeps pos 50 -> 62 -> 40 -> 50 over 1.6s (easeInOut); skipped under reduced motion or after any interaction. Nothing else animates inside the frame.
6. **Flight-day strip** — Three steps in one row, mono numbers: 01 PLAN — 'We scope the grid, the GSD you need and the corners to avoid before anyone leaves the truck.' 02 FLY — 'One pilot, one spotter, battery-and-swap rhythm — about 40 minutes of useful air per pack.' 03 DELIVER — 'Ortho, contours and a web folder in your inbox within 48 hours of wheels-up.' Small closing line (13px, #8AA0AF): 'Deliverables are samples of format, not promises of acreage.'
   Layout: Section padding 72px 0, background #FFFFFF, border-top 1px #D3DEE6. Container 1200px; three columns with 32px gaps, each: mono step number (14px, signal), title (Space Grotesk 600, 18px), body (15px, #4E6272). Mobile: single column with 24px gaps.
   Motion: Columns fade up stagger 0.08s (once). No other motion.
7. **Industries (#industries)** — Section label: 'WHO HIRES US'. H2: 'Built for teams that measure.' Sub: 'Four kinds of work, four invented proof lines from the log book.' Cards: 1) Construction & Earthworks (chip 'PROGRESS') — 'Bimonthly progress grids across 14 active sites, delivered as a scrub-able hyperlapse.' 2) Energy & Grid (chip 'THERMAL') — 'Corridor flights along 60 km of line, with a thermal pair for every span.' 3) Agriculture (chip 'PLANT HEALTH') — 'Field health maps over 3,000 leased acres, four flights a season.' 4) Coastal & Environment (chip 'CHANGE DETECTION') — 'Quarterly shoreline change surveys for two county programs, contour-matched year over year.' Each proof number (14, 60 km, 3,000, two) renders in signal orange.
   Layout: Section padding 104px 0, background #F2F6F9. Header left-aligned max-width 620px, margin-bottom 48px. Cards: 2x2 grid (gap 20px; single column below 900px). Card: background #FFFFFF, 1px border #D3DEE6, radius 14px, padding 24px, a 3px signal-orange left rule (border-left), title (Space Grotesk 600, 20px), body (15px, #4E6272), chip top-right (mono 10px on #E3ECF2).
   Motion: Cards fade up stagger (once). No hover motion beyond border darkening.
8. **Project gallery (#work)** — Section label: 'FROM THE LOG BOOK'. H2: 'Six flights, one light.' Sub: 'Every frame top-down, every mission mapped.' Tiles in order (photo | aspect | caption): 1) hero-coast.webp | 16:9 | 'FALLOW FLATS ESTUARY · MAPPING · GSD 1.2 CM'; 2) svc-inspection.webp | 4:3 | 'ARRAY 12 · INSPECTION · 2,400 FRAMES'; 3) svc-mapping.webp | 4:3 | 'STRIPED FIELDS · SURVEY · 0.5 M CONTOURS'; 4) gallery-quarry.webp | 4:3 | 'QUARRY 04 · VOLUMES · GSD 2.0 CM'; 5) svc-filming.webp | 4:3 | 'RIDGE PINE LAKE · FILM · 4K60'; 6) gallery-harbor.webp | 4:3 | 'WEST HARBOR DOCKS · CHANGE · QUARTERLY'. Caption format is mono 11px uppercase: invented project name · deliverable · metric.
   Layout: Section padding 104px 0, background #FFFFFF. Header left-aligned. Grid: 3 columns at >=1024px, 2 below (390px included), gap 20px. Tile: figure; image radius 10px, aspect-ratio per tile (16:9 or 4:3), object-fit cover, 1px border #D3DEE6; caption under the image, mono 11px, #8AA0AF, margin-top 8px, with the project name in #4E6272. Images loading lazy except the first two. Alt text describes the photo (e.g. 'Top-down aerial photo of a braided estuary').
   Motion: Tiles fade up stagger 0.05s (once). Hover: image scale 1 -> 1.04 inside its frame (overflow hidden), caption's project name underlines in signal. Reduced motion: static.
9. **Quote form (#quote)** — Left column: section label 'START A BRIEF'. H2: 'Tell us about the site.' Body (16px, #4E6272): 'Send the outline — acres or kilometers, terrain, and what you need back. We reply with a flight plan and a firm day rate, from [DAY_RATE], within one business day.' Contact block (mono 13px): hello@ + emailDomain; the company address; 'Mon-Sat, weather permitting.' Right column, form fields (labels mono 11px uppercase): Name (text, required), Email (email, required), Company (text, optional), Service (select: Aerial inspection / Mapping & survey / Filming & progress), Site size (select: Under 5 acres / 5-50 acres / 50+ acres / Linear corridor), Notes (textarea, placeholder 'Terrain, access, deadlines — anything useful.'). Submit: signal pill 'Send the brief'. Success panel replaces the form: a 40px signal-tint circle with a signal Check, heading 'Brief received', text 'Thanks — expect a flight plan and a firm day rate from hello@' + emailDomain + ' within one business day.' and a text button 'Send another brief'. Errors: inline notes 'Required' and 'Enter a valid email address' in signal under the fields, aria-invalid set.
   Layout: Section padding 104px 0, background #F2F6F9. Two columns: copy col-span-5, form col-span-7. Form card: background #FFFFFF, 1px border #D3DEE6, radius 14px, padding 28px; fields in a 2-column grid (Name+Email, Company+Service, Site size full width, Notes full width); inputs background #FFFFFF, 1px #D3DEE6, radius 8px, padding 12px 14px, focus ring 2px signal; selects styled the same with a chevron. Mobile: single column, card below the copy.
   Motion: Card fades up (once). Success panel fades and scales 0.98 -> 1 (220ms). The form calls preventDefault and only changes local state; nothing is sent.
10. **Footer** — Left: logo mark + '[BRAND] Aerial', one line 'Aerial inspection, mapping and filming for [AUDIENCE].' (rewrite from the variables), then the address '1180 Falkner Quay, Suite 2, Bremerton, WA 98337' with hello@ + emailDomain. Three link columns: Services (Inspection, Mapping & survey, Filming -> #services), Work (Map room #mapping, Gallery #work, Industries #industries), Company (About, Safety notes, Contact -> #top, Contact as mailto). Bottom row: '© ' + companyName on the left (no year, no date); right: text links Terms, Privacy (#top) and a 36px icon button with Lucide Mail (mailto). Then the optional [CREDIT] link if provided.
   Layout: Padding 64px 0 36px, background #FFFFFF, border-top 1px #D3DEE6. Container 1200px; grid 12 columns: brand block col-span-5, link columns col-span-2 each (heading Archivo 600 13px uppercase letter-spacing 0.08em #16242E; links 14px #4E6272 hover #16242E). Bottom row margin-top 48px, padding-top 20px, border-top 1px #D3DEE6, 13px #8AA0AF, flex justify-between. Mobile: brand block full width, link columns 2-column grid, bottom row stacks.
   Motion: None beyond link color transitions.

## Assets
- image: Six template images generated for this design (Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template), all one look: top-down aerial photographs, clear mid-morning light, cool natural grade, no people, no readable text, no logos. Download each with curl -L -o into public/images/ and reference as './images/<file>': https://media.vibefather.ai/assets/6a046743-4fa8-4fa2-bd23-d0d4074eb7c6/hero-coast.webp -> public/images/hero-coast.webp (hero background and gallery tile 1; alt 'Top-down aerial photo of a braided coastal estuary'); https://media.vibefather.ai/assets/6a046743-4fa8-4fa2-bd23-d0d4074eb7c6/svc-inspection.webp -> public/images/svc-inspection.webp (service card 01, gallery tile 2; alt 'Top-down aerial photo of a solar panel array in ordered rows'); https://media.vibefather.ai/assets/6a046743-4fa8-4fa2-bd23-d0d4074eb7c6/svc-mapping.webp -> public/images/svc-mapping.webp (service card 02, both layers of the map slider, gallery tile 3; alt 'Top-down aerial photo of striped plowed farmland'); https://media.vibefather.ai/assets/6a046743-4fa8-4fa2-bd23-d0d4074eb7c6/svc-filming.webp -> public/images/svc-filming.webp (service card 03, gallery tile 5; alt 'Top-down aerial photo of a pine forest meeting a lake'); https://media.vibefather.ai/assets/6a046743-4fa8-4fa2-bd23-d0d4074eb7c6/gallery-quarry.webp -> public/images/gallery-quarry.webp (gallery tile 4; alt 'Top-down aerial photo of terraced quarry benches with turquoise water'); https://media.vibefather.ai/assets/6a046743-4fa8-4fa2-bd23-d0d4074eb7c6/gallery-harbor.webp -> public/images/gallery-harbor.webp (gallery tile 6; alt 'Top-down aerial photo of a small harbor with parallel docks'). Six files total; do not substitute other images.
- image: Drawn in code, no bitmaps: the logo mark and public/favicon.svg (ink circle, white descent chevrons, orange waypoint dot), the survey-pass canvas overlay in the map slider (grid, contours, tint, flight line, crop marks — seeded algorithm in the Map slider section), and all UI chips.
- icon: lucide-react (ISC), imported per icon: ChevronDown, ChevronsLeftRight, Search, Map, Film, Timer, Check, Menu, X, Mail, ArrowRight, MapPin. No brand logos, no Simple Icons.
- font: Install @fontsource-variable/space-grotesk, @fontsource-variable/archivo and @fontsource/ibm-plex-mono (all OFL-1.1) and import them in src/fonts.ts. Vite bundles the woff2 files into dist/.
- image: Write ASSETS.md at the project root with a table (path, source URL, author, license): one row per image in public/images/ with its media.vibefather.ai URL, author 'VibeFather', license 'Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template'; rows for the three Fontsource packages (OFL-1.1, https://fontsource.org) and lucide-react (Lucide contributors, ISC, https://lucide.dev); and a line noting the logo, favicon and survey overlay are drawn in code for this project.

## Don'ts
- No backend of any kind: no server code, API routes, databases, auth, email services, analytics or third-party APIs. The quote form calls preventDefault and only changes local UI state; nothing is submitted or sent.
- No real drone makers, operators, regulators or certification names (no manufacturer or agency trademarks, no license-class badges or rule references); the company, projects, clients and flights are invented.
- No airspace, regulation, certification or insurance claims anywhere in copy or chips.
- The aerial photos contain no identifiable people, no readable text, no signage, no logos, no landmarks used as a brand — use exactly the six listed files and do not supplement with stock photos or placeholder-image services.
- The before/after pair is one scene processed two ways, with the survey side drawn live in canvas as described; keep the honest sample caption under the slider and never present the processed frame as a real client deliverable.
- Do not load fonts from fonts.googleapis.com, fonts.gstatic.com, Adobe Fonts or any CDN. Self-host through the three Fontsource packages only. No commercial fonts.
- No CDN script or link tags; every script, style, font, icon and image is installed or downloaded into the project and bundled into dist/. Never hotlink the media.vibefather.ai URLs at runtime; download them first.
- No source maps in the production build (build.sourcemap false), and src/ is not copied into dist/.
- Relative asset paths (Vite base './', images as ./images/<file>). Internal links are hash anchors (#services, #mapping, #industries, #work, #quote, #top) or ./index.html, never a bare directory or a leading slash.
- No dates or years anywhere on the site: no copyright year, no flight dates, no seasons pinned to a calendar. The footer copyright line carries only companyName.
- Rates and metrics are invented sample values for the fictional company; do not present them as market data or quotes.
- Do not use code or components from Aceternity UI, Tailwind Plus / Tailwind UI or any purchased template for the slider, parallax or reveals. Re-implement everything as described here.
- Respect prefers-reduced-motion: no parallax, hint sweep, zooms or reveals; direct manipulation (the slider drag, the form) keeps working.
- Animate only transform and opacity on HTML elements; never animate width, height, top or left directly.
- Must work at 1440x900 and 390x844 with zero console errors and no horizontal scroll; the hero photo must not crop the headline on mobile.
- Do not mention VibeFather anywhere in the site except the optional [CREDIT] footer link.

---
— Prompt by VibeFather · https://vibefather.ai/t/drone-services-company-website · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown

Free for personal projects under CC BY-NC 4.0. Commercial use comes with Pro.