acreage-farming

## Offline media Copy the sibling `assets/` directory beside the generated HTML, retaining its relative paths (or embed these assets for a standalone file). Use the bundled images instead of remote media. Large video loops and animated previews are represented by local still images; render them as images or video posters without a video source. This offline-media rule overrides remote/video instructions below. See `assets/NOTICE.md` for attribution. # Acreage Farming — Precision Agriculture Landing Page Produce a premium **precision-farming landing page** with **dark/light alternating sections**, a **fullscreen hero video background**, an **animated stats grid**, an **infinite logo marquee**, and **image-backed service cards**. A complete, rendered reference implementation ships beside this skill at `example.html` — **start from it**. Copy `example.html`, then adjust copy and data; do not rewrite the CSS or invent a new visual language. The seed already encodes the exact tokens, layout, reveal animation, marquee, and responsive behavior below. This is the authoritative build brief. Follow it exactly — the named colors, radii, fonts, and animations are locked. ## Stack - Default output: a single self-contained HTML file (the `example.html` seed). It already includes everything inline. - If the user explicitly asks for a **React + TypeScript + Vite + Tailwind** project, port the seed faithfully: same tokens, same section order, same markup structure. Map vanilla features back up: the `IntersectionObserver` reveal → Framer-Motion `whileInView`; the passive scroll listener that toggles `.scrolled` on the nav → `useScroll`; the CSS marquee → a Framer-Motion loop or duplicated-track CSS keyframe. Do not change the design while porting. - **Motion loading (locked).** If you emit a single self-contained inline-JSX file instead of the Vite project, Motion's React hooks (`useScroll`, `useTransform`, `useAnimationFrame`, …) exist only in the **React** UMD build: load `<script src="https://unpkg.com/framer-motion@11.11.13/dist/framer-motion.js"></script>` and read them off `window.Motion` — never the vanilla `https://unpkg.com/motion@.../dist/motion.js` DOM bundle, which lacks `useScroll` and renders a blank page. (The Vite project imports from npm and is unaffected.) ## Fonts Load from Google Fonts: **Manrope** (weights 400, 500, 600, 700, 800) for UI/body and **Instrument Serif** (regular + italic) for editorial accent words. Manrope is the default body face; Instrument Serif italic is used only for the one or two emphasized words in the hero headline (`<span class="serif italic">`). ## CSS Variables (`:root`) — locked ``` --bg-dark: #0d120e; --bg-darker: #080b09; --bg-light: #f3f0e7; --bg-cream: #e9e4d6; --green: #6b8e3a; --green-bright: #9ec94a; --green-deep: #2e3b22; --soil: #c9a06a; --text-light: #f3f0e7; --text-muted-light: rgba(243,240,231,0.6); --text-dark: #1a1f17; --text-muted-dark: rgba(26,31,23,0.55); --radius: 28px; --radius-lg: 40px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1); ``` Body: Manrope, `background: var(--bg-dark)`, `color: var(--text-light)`, `overflow-x: hidden`. `html { scroll-behavior: smooth }`. The page is **dark by default**; only the stats section uses the light/cream palette. ## Sections (in order) ### 1. Nav (fixed) Pill that shrinks on scroll. At top: transparent, max-width 1240px, padding `22px 32px`. After `scrollY > 40` it gets `.scrolled`: floats inward (`top:14px; left:16px; right:16px`), gains `rgba(8,11,9,0.72)` + `backdrop-filter: blur(14px)`, a 1px `rgba(243,240,231,0.08)` border, and `border-radius:100px`. Left: brand = a `30px` gradient-mark (`linear-gradient(135deg, var(--green-bright), var(--green))`) holding an inline wheat/sprout SVG + "Acreage". Center: nav-links (Platform, Data, Services, Pricing), hidden ≤980px. Right: green-bright pill CTA "Book a demo". ### 2. Hero (fullscreen, video background) `min-height:100vh`, content bottom-aligned. A `<video autoplay muted loop playsinline>` fills `inset:0` with `object-fit:cover` and a poster still. A gradient `::after` (top transparent → bottom `rgba(8,11,9,0.92)`) keeps text legible. Headline: `clamp(3rem, 8vw, 6.5rem)`, weight 800, `letter-spacing:-0.03em`, with one word in Instrument Serif italic ("every"). Sub-paragraph in `--text-muted-light`. Actions: green-bright primary button + ghost outline "Watch the film". Below: a hero-meta row of three big stats (`2.4M+ acres`, `31% yield lift`, `−40% water`). - Hero video: `./assets/23211-720-e83442.webp` (large stable CDN — keep as remote URL). Poster: an Unsplash aerial-field still (remote URL OK). ### 3. Logo marquee Full-width band on `--bg-darker`, top+bottom hairline borders. Centered uppercase label, then an **infinite horizontal marquee**: a `.marquee-track` of duplicated partner logos animated `translateX(0 → -50%)` over `32s linear infinite`, paused on hover, edge-masked with a `linear-gradient` CSS mask. The track is built in JS by duplicating an 8-name partner array, each rendered as an inline leaf SVG + name. Logos are text + inline SVG only — **no remote logo images**. ### 4. Stats (light section) `.section-light` flips to the cream palette (`--bg-light` bg, `--text-dark` text, green eyebrow). Header row: eyebrow + big `h2` on the left, descriptive paragraph on the right. Then a **4-column stat grid** (`repeat(4,1fr)`, gap 20px). Each `.stat-card` is white, rounded `--radius`, min-height 220px, with an icon chip (top), a big `stat-num` (`3rem`, weight 800, with a smaller `.unit` span for %/k) pushed to the bottom via `margin-top:auto`, and a label. **The first card has `.accent`** → `--green-deep` background, light text, tinted icon chip. Hover lifts cards `translateY(-6px)` with a soft shadow. Icons are inline SVG (refresh-cycle, trend-up, droplet, clock). Values: `98%` coverage, `31%` yield, `40%` water, `11k` autonomous hours. ### 5. Services (dark, image cards) Back to `--bg-dark`. Centered head (eyebrow + h2 + paragraph). **3-column grid** of `.svc-card`, each `min-height:420px`, `--radius-lg`, an absolutely-positioned `.svc-bg` image that scales `1.06` on hover, a bottom gradient scrim, and bottom-aligned body: a green-tinted `.svc-tag` chip, `h3`, paragraph, and a green-bright "arrow" link. Three cards: **Sensing** (satellite & drone scouting), **Deciding** (variable-rate prescriptions), **Acting** (autonomous machinery). Card background images are Unsplash farm stills (remote URLs OK — large stable CDN). ### 6. CTA Band on `--bg-darker` containing a rounded-48px panel with a `linear-gradient(135deg, var(--green-deep), #1c2616)` fill, a green radial glow `::before`, eyebrow, huge headline ("Put your fields on autopilot."), one line of copy, and a green-bright primary button. ### 7. Footer `--bg-darker`, top hairline. Left: brand mark + one-line mission. Right: three link columns (Platform / Company / Resources). Bottom bar: copyright + legal links, separated by a hairline. ## Animations - **Reveal**: every `.reveal` element starts `opacity:0; translateY(34px)` and transitions to visible over `0.9s var(--ease)` when it enters the viewport. Implemented with one `IntersectionObserver` (`threshold:0.15`, `rootMargin:'0px 0px -8% 0px'`, unobserve after firing). A small stagger is applied via `transitionDelay = (index % 4) * 0.07s`. In a React port this is `whileInView` + `viewport={{ once: true }}`. - **Nav shrink**: passive `scroll` listener toggles `.scrolled` at `scrollY > 40`. - **Marquee**: `@keyframes scroll-x { translateX(0) → translateX(-50%) }`, `32s linear infinite`, `animation-play-state: paused` on `:hover`. - **Hover**: buttons lift `translateY(-2/-3px)` with green glow shadow; stat-cards and svc-cards lift `translateY(-6px)`; service background images scale `1.06` over `0.8s`. - All interactive transitions use `--transition` (`0.5s cubic-bezier(0.22, 1, 0.36, 1)`). ## Assets / hosts - **Inline (do not fetch remote):** all icons and partner logos are **inline SVG**. The brand mark, stat icons, service arrows, and marquee leaf are inline SVG. There are **no avatar images** in this template. - **Keep remote (large stable CDN):** the hero `.mp4` on `cdn.coverr.co`, and the Unsplash hero poster + service-card stills on `images.unsplash.com`. These may stay as URLs. - **Never** introduce `i.pravatar.cc`, `api.dicebear.com`, or any remote avatar host — none are needed here and they 403 in the sandbox. ## Responsive - ≤980px: stats grid → 2 columns, services grid → 1 column, nav-links hidden. - ≤620px: `.wrap` padding `0 20px`, stats grid → 1 column, tighter hero-meta gap, CTA panel padding reduced. ## Color Rules — hard Earthy agritech palette only: deep greens (`--green`, `--green-bright #9ec94a`, `--green-deep`), near-black greens (`--bg-dark #0d120e`, `--bg-darker #080b09`), warm cream/off-white (`--bg-light #f3f0e7`, `--bg-cream`), and a soil tan accent (`--soil #c9a06a`). **`--green-bright #9ec94a` is the locked accent** — do not substitute blue/teal/purple. Light text on dark, dark text on cream; all contrast-safe.