Affini Consult — Website (Next.js)

Marketing site for Affini Consult, a coastal-Kenya property advisory. Built with Next.js (Pages Router) + React and plain CSS — no CSS framework, no database.

Quick start

npm install
npm run dev
# open http://localhost:3000

Production build:

npm run build
npm start

Deploy

1. git init && git add . && git commit -m "Initial commit"
2. Push to GitHub.
3. Import the repo on Vercel (zero config) or Netlify (build command next build). No environment variables are required to run the site.

Project structure

affini-consult/
├─ pages/
│  ├─ index.jsx                Home (video hero, services, featured, process, testimonials, CTA)
│  ├─ about.jsx                About Us
│  ├─ contact.jsx              Contact + consultation form
│  ├─ 404.jsx                  Custom not-found page
│  ├─ services/
│  │  ├─ index.jsx             Services overview
│  │  └─ [slug].jsx            Service detail (sourcing / assessment / diligence / support)
│  └─ properties/
│     ├─ index.jsx             Properties listing + region filter
│     └─ [slug].jsx            Property detail (market snapshot, gallery, specs, related)
├─ components/                 Header, Footer, Layout, Hero, Cards, Form, Placeholder
├─ data/                       site / services / properties / testimonials content
├─ styles/globals.css          Full design system (brand tokens + responsive)
└─ public/videos/              Drop hero.mp4 + hero-poster.jpg here (see its README)

Design notes

• Brand palette: Forest Green #01200F, Gold #CC9E0A, Cream #F5F4EE, White.
• Type: Playfair Display (headlines) + Inter (body) via Google Fonts.
• Heroes are full-bleed (cover the whole viewport) with the text on the left. The home hero uses a background video; interior heroes use a labelled placeholder until you add real photography.
• Images across the site are styled placeholders (components/Placeholder.jsx). Swap them for real <img> / next/image when your assets are ready.
• Fully responsive for mobile, tablet and desktop; the nav collapses into a toggle menu on small screens.

Wiring the contact form

components/ConsultationForm.jsx validates on the client and shows a success state. Connect the onSubmit handler to your email service or an API route to go live.