Stonehaven — Landscape Studio Marketing Site

A reference build for a premium service-business marketing site with first-class AI integration. Fictional client (Stonehaven Landscape Studio, a Hudson, NY landscape architecture practice), but the architecture, content modeling, performance budget, design system, and AI assistant are shaped to match what I'd ship to a real high-end services client.

Two patterns built together:

1. A production-shaped marketing site a non-technical owner can update without touching code.

Astro 5 static output with sub-second loads, near-zero client JS, Lighthouse 95+

Astro content collections as the default data source (version-controlled, runs out of the box)

Sanity Studio v3 schemas included for the production swap (the owner edits content with image uploads and the site rebuilds automatically)

Netlify Functions /api/quote endpoint for the lead form, with Resend for delivery

Programmatic per-town landing pages for local SEO (8 today, 50 just as easy)

LocalBusiness JSON-LD, OpenGraph, sitemap, robots.txt, canonical URLs

2. An AI Studio Assistant that pre-qualifies leads 24/7.

Streaming chat at /api/chat via OpenAI Chat Completions with gpt-4o-mini, Server-Sent Events for token-by-token delivery

Function calling into the portfolio (the assistant references real Stonehaven work by name when a prospect describes something similar)

Brand-trained system prompt that knows the studio's services, voice, and boundaries

Zero-JS-discipline UI: vanilla TypeScript chat panel, no React island, ~3KB of client code

Graceful offline fallback when no API key is set

sessionStorage continuity (refreshing the page doesn't lose the conversation)

Astro 5 with static output + Netlify adapter

Tailwind 4 via @tailwindcss/vite, design tokens in CSS

Astro content collections (JSON + markdown) with Sanity Studio v3 schemas for production swap

OpenAI Chat Completions with streaming SSE and function calling

Resend for lead form delivery

Netlify (static + serverless functions)

Restrained type pairing (Fraunces + Inter), warm-neutral palette, asymmetric editorial layouts, generous whitespace. Tokens declared in CSS inside Tailwind 4's @theme block. The aesthetic is deliberately premium and editorial, a stylistic counter-balance to the functional developer-tool feel of First Read in the same portfolio.