Olive Green — a single-page React site for a marriage garden opening in 2026

Olive Green opens in 2026 and had to start taking wedding bookings before the venue itself was finished. The site needed to sell the garden's four spaces with capacities and best uses, feel warm and premium on a phone — where most enquiries begin — and make the enquiry a single tap.

Client site · Marriage garden & event venue, Rewa (MP)

Approach

• Build a single-page app with a route per venue so each space (grand lawn, banquet hall, poolside terrace, mandap courtyard) has its own page with capacity, seated and standing numbers and what it is best for.
• Design light-only — ivory, olive and gold — and opt out of browser auto-dark and Dark Reader recolouring so the palette is the palette.
• Treat the hero photograph as the largest contentful paint: preload it with a responsive srcset and fetchpriority high from the image CDN.
• Send enquiries to WhatsApp and publish the venue as EventVenue structured data so it can appear as a place, not just a page.

A Vite-built React single-page application served as static files. React Router handles seven routes on the client, Framer Motion drives the section and page transitions, and all copy — venues, celebrations, amenities, story, testimonials quoted on the site — lives in one content file. Metadata and JSON-LD are in the static HTML shell; enquiries open WhatsApp.

• 01Vite + React with React Router routes for home, venues, each venue by slug, celebrations, gallery, about and contact.
• 02Tailwind CSS with the brand as tokens — olive, olive deep, sage, gold, gold soft, ivory, cream, ink — and Cormorant Garamond with Jost as the type pair.
• 03Framer Motion for reveals and transitions; number tickers for the venue statistics.
• 04`color-scheme: only light` and a Dark Reader lock so the design is not recoloured; theme colour set for browser chrome.
• 05Hero image preloaded with `imagesrcset` and `fetchpriority="high"`; Open Graph tags and EventVenue JSON-LD in the static shell.

olivegreen.up.railway.app

This project did not use AI — a deliberate choice. Not every system needs a model.

• React
• Vite
• React Router
• Framer Motion
• Tailwind CSS
• JSON-LD
• Railway

Outcome to be added. Results are only published here when they can be stated factually — no estimated metrics.

• A single-page app is fine for a small brochure site as long as the static shell carries the metadata and structured data crawlers need.
• Preloading the hero image is the single biggest LCP win on a photograph-led page.
• Opting out of forced dark mode is a real design decision for brands whose palette is the brand.