Agrivanna Website v2
A fresh rebuild of the Agrivanna site, inspired by greenlyte.tech. Dark editorial look, Geist type, bright lime accent, interactive hero, rotating partners, magazine-grid news, and a roadmap timeline.
Zero styling is carried from the previous site. Only the functional pieces (HubSpot portal/form IDs, Vercel caching headers, redirects) were preserved.
Stack
- Next.js 15 (App Router, TypeScript)
- Tailwind CSS v3
- Geist (Vercel variable font — Sans + Mono)
- motion /
motion/react (Framer Motion successor) — used by VariableProximity and Reveal
- lucide-react icons
- HubSpot Forms embed (
portalId 342489770, formId 7a9b5027-edb2-4e96-96cd-840d6cd13b1d)
- Vercel Analytics
Run locally
cd "Agrivanna Website v2"
npm install
npm run dev
Open http://localhost:3000.
Pages
| Route | Purpose |
|---|
/ | Video hero (components/home/HomeHero, files in public/video), partners, product tabs, how it works, built with ranchers, your data |
/product | The software on one page: web app, iOS app, pasture, herd and grazing management, then all features. The old /product/voice, /offline, /pasture, /web and /features redirect to its sections |
/product/virtual-fencing | Virtual fencing hardware — in R&D, not for sale; 3D herd hero (components/herd) and the scanned-cow credit in its footer; collar photos carry an R&D label |
/pricing | Custom pricing per ranch, first month free, "software only for now", FAQ |
/news | Press and awards |
/company | About us: team (co-founders, advisors), our story timeline, partners. /team redirects to /company#team |
/contact | Trial form and email |
/faq | Help & FAQ |
The top menu (Product · Pricing · News · Company · Help & FAQ) and the footer columns are built from one list, lib/site-nav.ts.
To add a news item: add it to lib/news.ts (link, photo, tag) and its title, date and summary to both dictionaries under news.items.
Languages (English and French)
English is at the normal URLs (/pricing). French is the same page under /fr (/fr/pricing). The EN | FR switch sits top right; on phones it is inside the menu.
- To change any wording: edit
lib/dictionaries/en.ts, then the same line in lib/dictionaries/fr.ts. If French is missing a line, npm run build fails and names it.
- Legal pages are whole documents per language:
content/legal/<page>.en.tsx and <page>.fr.tsx.
- Trial emails (the team's copy and the rancher's confirmation) are in
lib/cta.ts. The team's copy is always English and says "(FR)" in the subject when the rancher used the French site.
- Which language a visitor gets: what they last picked with the switch (saved in the
NEXT_LOCALE cookie), otherwise their browser's language, otherwise English. See middleware.ts.
- The app itself only understands English speech today, so the French home page says so and keeps the dictation example in English. Remove
appLanguageNote in fr.ts when that changes.
Key design choices
Color palette (from supplied reference image)
- Ink (backgrounds):
#050607, #0A0B0D, #111316, #1A1D21
- Lime (accent):
#A6FF3D · #8AF51E
- Bone (text):
#F6F6F4, #9A9A93
Typography
- Geist Sans 400 for body and headlines (matches inspiration site)
- Geist Mono for eyebrows, labels, timecodes
- Tracking is deliberately tight on display headlines (
tracking-tightest = -0.04em)
Interactions
- VariableProximity — the exact component from the brief. Used in the home hero on the word "fence." It lives in
components/VariableProximity.tsx and uses motion/react via useAnimationFrame + mouse-position proximity to interpolate font variation settings letter by letter.
- Reveal — a lightweight
motion wrapper for scroll-in staggers across every page.
- PartnersMarquee — horizontal rotating slider of trusted partners with transparent logos, hover to pause, edge fades, each logo is a link directly relevant to Agrivanna's relationship (NuWest → nuwestinteriors.com, Plug and Play → LinkedIn cohort post, THRIVE → Academy Cohort VII, Hunter Hub → Liftoff post). Hover reveals a context caption.
- Navbar — floating pill navbar that compacts on scroll, blurs, and highlights active route.
- HubSpotFormPopup — same portal/form IDs as v1 so leads keep flowing to the existing CRM; completely restyled.
Code organization (intentionally varied)
Three distinct patterns are used so the codebase doesn't feel templated:
- Hooks-heavy interactive —
Navbar.tsx, HubSpotFormPopup.tsx, VariableProximity.tsx (client-side, effects, refs)
- Config-object-driven layout —
Footer.tsx, PartnersMarquee.tsx, app/solutions/page.tsx (arrays → map → UI, easy to edit content without touching JSX structure)
- Data in
/lib, UI in /components — /team, /news pull typed data from lib/team.ts and lib/news.ts into dedicated card components (PersonCard.tsx)
What carries over from the old site
Only the plumbing:
- HubSpot portal ID
342489770 / form ID 7a9b5027-edb2-4e96-96cd-840d6cd13b1d / region na3
- Calendly demo link
- Vercel caching headers for
/:path*.mp4 and image paths
- Social link URLs (LinkedIn / Instagram / YouTube / Mail)
No CSS, components, or page structure was reused.
Assets
All imagery lives in public/:
team/ — founders and advisorsproducts/ — collar, drone, PRS software (transparent backgrounds)partners/ — NuWest, Plug and Play, THRIVE SVGstory/ — team ranch shots, pitch comp wins, rancher interviewslogos/ — Agrivanna wordmark + markvideo/collar-loop.mp4 — hero-ready collar footage
Things to edit later
- Add a real
favicon.ico
- Drop in a hero video behind the headline if desired (there's a
public/video/collar-loop.mp4 ready to wire up)
- The advisor photos are grayscale-on-default; if you'd rather they stay color, remove
grayscale from PersonCard.tsx
- Press summaries in
lib/news.ts were written from the article titles — update the copy if you want specific quotes
