Marketing Site · Restaurant
A complete, mobile-first website for a modern Italian trattoria: menu, online order, reservations, gallery, and contact — with the menu rendered as real, indexable HTML and full schema.org structured data.
Osteria Fiorella is a full marketing site for a fictional modern Italian trattoria in Carroll Gardens, Brooklyn — built end to end through a real design, architecture, and code workflow rather than dropped into a template.
It covers everything a restaurant actually needs online: a hero and story, a real menu, online ordering, reservations, a gallery, and contact details that a search engine can read as cleanly as a human.
Most restaurant sites bury their menu in a PDF, which is invisible to search and miserable on a phone. The menu here had to be real, structured HTML that's indexable, accessible, and the single source of truth for both the page and its structured data.
And the interactive flows — ordering, reservations, contact — had to feel real and complete without taking real payments or collecting card data in a portfolio context.
The restaurant's details and menu live in typed data files that drive both the rendered pages and the schema, so the menu, prices, and dietary flags can never drift out of sync with the JSON-LD. Ordering and reservations are realistic mock flows — client-side state with simulated confirmation — clearly scoped so no real payment ever happens.
The whole thing is mobile-first and accessible by construction: semantic HTML, a skip link, visible focus rings, ≥44px tap targets, and reduced-motion support, with meaning never carried by color alone.
The site delivers rich SEO out of the box — per-page metadata, Open Graph, sitemap, robots, and deep JSON-LD: Restaurant plus a full Menu and MenuItem graph and site-wide AggregateRating, with a FAQPage on contact.
It's documented with a clear 'going live' path to wire in real ordering, reservations, and payments — a portfolio piece that's genuinely deploy-ready rather than a mockup.
Next.js 16 (App Router) + TypeScript + Tailwind CSS v4, deployable to Vercel. A single `restaurant.ts` holds name, hours, geo, and rating; a structured `menu.ts` drives both the menu page and its schema.
Pages are real, indexable HTML throughout — the menu especially — so the SEO benefits aren't bolted on but fall out of how the content is modeled.
// Gallery
// Next step
The next case study could be yours. Tell us what you're building and we'll tell you honestly how we'd ship it.