{ "slug": "olea-restaurant", "name": "Olea — Restaurant & Bistro", "description": "A coastal Mediterranean restaurant: full-bleed dining-room hero, tabbed menus with dietary badges, chef story, guest and press reviews, a table-booking widget and a wordmark footer.", "brief": "a restaurant, bistro, trattoria or wine bar", "theme": "olea", "author": { "name": "CopyPasteUI", "github": "copypasteui" }, "sections": [ "olea-hero", "olea-menu", "olea-story", "olea-reviews", "olea-reservations", "olea-footer" ], "images": { "thumbnail": "https://cdn.copypasteui.dev/thumbs/templates/olea-restaurant.jpg", "fullPage": "https://cdn.copypasteui.dev/thumbs/templates/olea-restaurant-full.jpg", "preview": "https://cdn.copypasteui.dev/thumbs/templates/olea-restaurant.webm#t=0.9" }, "isCollection": true, "url": "https://copypasteui.dev/templates/olea-restaurant", "thumbnailUrl": "https://cdn.copypasteui.dev/thumbs/templates/olea-restaurant.jpg", "fullPageImageUrl": "https://cdn.copypasteui.dev/thumbs/templates/olea-restaurant-full.jpg", "ogImageUrl": "https://cdn.copypasteui.dev/thumbs/templates/olea-restaurant.jpg", "previewVideoUrl": "https://cdn.copypasteui.dev/thumbs/templates/olea-restaurant.webm#t=0.9", "prompt": "Build the \"Olea — Restaurant & Bistro\" landing page in this project from CopyPasteUI components (https://copypasteui.dev/templates/olea-restaurant). Everything is free to use in this project.\n\nA coastal Mediterranean restaurant: full-bleed dining-room hero, tabbed menus with dietary badges, chef story, guest and press reviews, a table-booking widget and a wordmark footer.\n\n## Requirements\n- React 18+ with Tailwind CSS.\n- Install dependencies: `npm install lucide-react motion`\n\n## Page structure (top to bottom)\n1. Olea Restaurant Hero — `components/copypasteui/OleaHero.tsx`\n2. Olea Tabbed Menu — `components/copypasteui/OleaMenu.tsx`\n3. Olea Chef Story — `components/copypasteui/OleaStory.tsx`\n4. Olea Guest Reviews — `components/copypasteui/OleaReviews.tsx`\n5. Olea Table Booking — `components/copypasteui/OleaReservations.tsx`\n6. Olea Footer — `components/copypasteui/OleaFooter.tsx`\n\nCreate each file below unchanged, then render them in this order on one page. Afterwards, rewrite the placeholder copy so the whole page tells one consistent story for: a restaurant, bistro, trattoria or wine bar.\n\n## Writing the copy\n- Be specific: prices, opening hours, the street and town, the services by name. If a detail is missing, ask for it or leave a clearly marked gap, and list the gaps at the end. Never invent reviews, ratings, awards or customer numbers.\n- Write the way the owner talks to a customer, in the trade's own words. Use the everyday word: \"use\", not \"utilise\".\n- Headings name what the section is about (\"Opening hours\", \"Prices\"). Buttons say what happens (\"Book a table\", \"Get a quote\"), never \"Learn more\" or \"Submit\".\n- Skip the phrases that make a site sound generated: \"Welcome to\", \"Elevate your\", \"Discover\", \"Look no further\", \"passionate about\", \"trusted by\", \"seamless\", and groups of three adjectives.\n- No em dashes and no exclamation marks. Vary sentence length by writing different sentences, not by chopping them into fragments.\n- Cards, features and FAQ answers can differ in length; they shouldn't all have the same shape.\n- Keep every price, time, condition and warning the owner gives you, at the same strength.\n\nThe footer ends with a small \"Built with CopyPasteUI\" link. It is optional and not part of the licence: keep it if the owner is happy to credit CopyPasteUI (it helps other small businesses find these free templates), or change or remove it if they prefer.\n\n### components/copypasteui/OleaHero.tsx\n```tsx\n// Olea Restaurant Hero from CopyPasteUI — PolyForm Shield 1.0.0: https://polyformproject.org/licenses/shield/1.0.0\n// Required Notice: Copyright 2026 Nidhin Radh P V and the CopyPasteUI contributors (https://copypasteui.dev)\n\"use client\";\n\nimport { motion } from \"motion/react\";\nimport { ArrowRight, Clock, MapPin, Menu, Star } from \"lucide-react\";\n\nconst img = (id: string, w = 1800) => `https://images.unsplash.com/${id}?auto=format&fit=crop&w=${w}&q=80`;\n\nconst ease = [0.22, 1, 0.36, 1] as const;\n\nexport default function OleaHero() {\n return (\n
\n \n
\n\n
\n \n \n OLEA\n \n
\n \n Gift cards\n \n \n Book a table\n \n \n
\n
\n\n
\n \n Coastal Mediterranean · Est. 2014\n \n \n Long tables, wood fire & the slow Sunday lunch.\n \n\n
\n

\n Charcoal-grilled fish, hand-rolled pasta and olive oil we press ourselves. Seasonal menus from chef Marta Ruiz, served to 64\n seats on the harbour.\n

\n
\n \n

\n Tue – Sun\n
\n Lunch 12–3 · Dinner 6–11\n

\n
\n
\n \n

\n 14 Harbour Row\n
\n Old Port, Brighton\n

\n
\n \n Reserve a table \n \n
\n
\n\n
\n );\n}\n```\n\n### components/copypasteui/OleaMenu.tsx\n```tsx\n// Olea Tabbed Menu from CopyPasteUI — PolyForm Shield 1.0.0: https://polyformproject.org/licenses/shield/1.0.0\n// Required Notice: Copyright 2026 Nidhin Radh P V and the CopyPasteUI contributors (https://copypasteui.dev)\n\"use client\";\n\nimport { useState } from \"react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { Download, Leaf, Wheat } from \"lucide-react\";\n\nconst img = (id: string, w = 1200) => `https://images.unsplash.com/${id}?auto=format&fit=crop&w=${w}&q=80`;\n\ntype Dish = { name: string; note: string; price: string; v?: boolean; gf?: boolean };\n\nconst menus: Record = {\n Dinner: {\n intro: \"Our evening menu changes with the boats. Plates are made to share; we suggest three or four for two people.\",\n photo: \"photo-1519233991914-26a44330ccd7\",\n alt: \"Charred sea bream with crushed potatoes and salsa verde\",\n courses: [\n {\n title: \"To start\",\n dishes: [\n { name: \"Focaccia & house oil\", note: \"Rosemary, flaked salt, first-press arbequina\", price: \"6\", v: true },\n { name: \"Crudo of sea bass\", note: \"Blood orange, fennel pollen, chilli\", price: \"14\", gf: true },\n { name: \"Burrata\", note: \"Roasted grapes, saba, toasted hazelnuts\", price: \"12\", v: true, gf: true },\n ],\n },\n {\n title: \"From the fire\",\n dishes: [\n { name: \"Whole grilled bream\", note: \"Salsa verde, crushed potatoes, lemon\", price: \"29\", gf: true },\n { name: \"Lamb shoulder\", note: \"Twelve hours, smoked yoghurt, pickled shallot\", price: \"32\", gf: true },\n { name: \"Hispi cabbage\", note: \"Anchovy butter, brown crab, crumbs\", price: \"16\" },\n ],\n },\n {\n title: \"Pasta\",\n dishes: [\n { name: \"Pici cacio e pepe\", note: \"Hand-rolled, aged pecorino, Tellicherry pepper\", price: \"17\", v: true },\n { name: \"Squid ink tagliolini\", note: \"Cuttlefish, ’nduja, parsley\", price: \"21\" },\n ],\n },\n ],\n },\n Lunch: {\n intro: \"Two courses for £24, three for £29, Tuesday to Saturday from noon until three.\",\n photo: \"photo-1505685509042-16b1b75030cf\",\n alt: \"Chef finishing a plated starter with a squeeze bottle\",\n courses: [\n {\n title: \"Set lunch\",\n dishes: [\n { name: \"Soup of the day\", note: \"With focaccia\", price: \"—\", v: true },\n { name: \"Mackerel escabeche\", note: \"Saffron, shallot, toasted bread\", price: \"—\" },\n { name: \"Gnocchi\", note: \"Brown butter, sage, pumpkin seeds\", price: \"—\", v: true },\n { name: \"Catch of the day\", note: \"Clams, white beans, gremolata\", price: \"—\", gf: true },\n { name: \"Olive oil cake\", note: \"Crème fraîche, poached quince\", price: \"—\", v: true },\n ],\n },\n ],\n },\n Sunday: {\n intro: \"Family-style Sunday lunch, served from 12:30. £42 a head, children under 10 eat free.\",\n photo: \"photo-1577106263724-2c8e03bfe9cf\",\n alt: \"Chef plating greens at the pass\",\n courses: [\n {\n title: \"For the table\",\n dishes: [\n { name: \"Antipasti board\", note: \"Cured meats, pickles, marinated olives\", price: \"\" },\n { name: \"Wood-roast chicken\", note: \"Or porchetta, with all the trimmings\", price: \"\", gf: true },\n { name: \"Garden plates\", note: \"Whatever the allotment gave us this week\", price: \"\", v: true },\n { name: \"Tiramisù\", note: \"Made at the table, as big as you dare\", price: \"\", v: true },\n ],\n },\n ],\n },\n};\n\nexport default function OleaMenu() {\n const [tab, setTab] = useState(\"Dinner\");\n const m = menus[tab]!;\n\n return (\n
\n
\n
\n
\n

The menu

\n

What’s cooking

\n
\n
\n {Object.keys(menus).map((k) => (\n setTab(k)}\n className={`relative rounded-full px-5 py-2 text-sm font-semibold transition-colors ${tab === k ? \"text-primary-foreground\" : \"text-muted-foreground hover:text-foreground\"}`}\n >\n {tab === k && (\n \n )}\n {k}\n \n ))}\n
\n
\n\n \n \n
\n
\n {m.alt}\n
\n

{m.intro}

\n
\n\n
\n {m.courses.map((c) => (\n
\n

{c.title}

\n
    \n {c.dishes.map((d) => (\n
  • \n
    \n

    \n {d.name}\n {d.v && (\n \n \n \n )}\n {d.gf && (\n \n \n \n )}\n

    \n

    {d.note}

    \n
    \n {d.price && {d.price === \"—\" ? \"—\" : `£${d.price}`}}\n
    • \n ))}\n
\n
\n ))}\n
\n \n Vegetarian\n \n \n Gluten free\n \n \n Full menu & allergens (PDF)\n \n
\n
\n \n \n
\n
\n );\n}\n```\n\n### components/copypasteui/OleaStory.tsx\n```tsx\n// Olea Chef Story from CopyPasteUI — PolyForm Shield 1.0.0: https://polyformproject.org/licenses/shield/1.0.0\n// Required Notice: Copyright 2026 Nidhin Radh P V and the CopyPasteUI contributors (https://copypasteui.dev)\n\"use client\";\n\nimport { motion } from \"motion/react\";\n\nconst img = (id: string, w = 1400) => `https://images.unsplash.com/${id}?auto=format&fit=crop&w=${w}&q=80`;\n\nconst facts = [\n { n: \"64\", l: \"seats on the harbour\" },\n { n: \"11\", l: \"local boats we buy from\" },\n { n: \"2,400\", l: \"litres of our own olive oil a year\" },\n];\n\nconst strip = [\n { id: \"photo-1578425570232-bf51f753dd5e\", cap: \"Service, 7:40pm\" },\n { id: \"photo-1564844536308-50b114a1d946\", cap: \"Seasoning the greens\" },\n { id: \"photo-1552960226-639240203497\", cap: \"The back room, lit for dinner\" },\n { id: \"photo-1653259038915-7cf0b7a4dd6c\", cap: \"Private dining, up to 18\" },\n { id: \"photo-1776993298422-5b7df704c2c1\", cap: \"Lunch light\" },\n];\n\nexport default function OleaStory() {\n return (\n
\n
\n \n
\n \n
\n
\n \n
\n \n\n
\n

Our story

\n

\n A fisherman’s daughter, a wood oven and ten years of Sundays.\n

\n
\n

\n Marta grew up gutting her father’s catch on the quay at Cádiz. She opened Olea in an old net loft with one oven, eight tables\n and no sign on the door.\n

\n

\n We still cook over oak and olive wood, still buy whatever the boats bring in, and still close on Mondays so the team can eat\n dinner with their families.\n

\n
\n
\n {facts.map((f) => (\n
\n
{f.n}
\n
{f.l}
\n
\n ))}\n
\n

— Marta Ruiz, chef & owner

\n
\n
\n\n
\n {[...strip, ...strip].map((s, i) => (\n
= strip.length}>\n
\n \n
\n
{s.cap}
\n
\n ))}\n
\n \n
\n );\n}\n```\n\n### components/copypasteui/OleaReviews.tsx\n```tsx\n// Olea Guest Reviews from CopyPasteUI — PolyForm Shield 1.0.0: https://polyformproject.org/licenses/shield/1.0.0\n// Required Notice: Copyright 2026 Nidhin Radh P V and the CopyPasteUI contributors (https://copypasteui.dev)\n\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { Star } from \"lucide-react\";\n\nconst reviews = [\n {\n quote: \"We came for the bream and stayed four hours. The kind of place you start planning to come back to before the bill arrives.\",\n name: \"Hannah & Joe\",\n meta: \"Anniversary dinner · Google\",\n },\n {\n quote: \"Proper hospitality. They remembered my dad’s birthday from last year and brought out a candle in the olive oil cake.\",\n name: \"Priya S.\",\n meta: \"Sunday lunch · OpenTable\",\n },\n {\n quote: \"The cacio e pepe alone is worth the train from London. Ask to sit at the counter and watch the fire.\",\n name: \"Tom W.\",\n meta: \"Dinner for two · Tripadvisor\",\n },\n];\n\nconst press = [\n { name: \"The Coastal Food Guide\", award: \"Best Seafood 2026\" },\n { name: \"Harbour Times\", award: \"★★★★★\" },\n { name: \"Good Table Awards\", award: \"Top 50 UK\" },\n { name: \"Sussex Life\", award: \"Restaurant of the Year\" },\n];\n\nexport default function OleaReviews() {\n const [i, setI] = useState(0);\n useEffect(() => {\n const t = setInterval(() => setI((n) => (n + 1) % reviews.length), 6500);\n return () => clearInterval(t);\n }, []);\n const r = reviews[i]!;\n\n return (\n
\n
\n
\n \n {Array.from({ length: 5 }).map((_, k) => (\n \n ))}\n \n 4.7 from 2,180 guest reviews\n
\n\n
\n \n \n
“{r.quote}”
\n
\n {r.name}\n — {r.meta}\n
\n \n \n
\n\n
\n {reviews.map((_, k) => (\n setI(k)}\n className=\"h-1.5 rounded-full bg-primary-foreground transition-all\"\n style={{ width: k === i ? 32 : 10, opacity: k === i ? 1 : 0.35 }}\n />\n ))}\n
\n
\n\n
\n {press.map((p) => (\n
\n

{p.name}

\n

{p.award}

\n
\n ))}\n
\n
\n );\n}\n```\n\n### components/copypasteui/OleaReservations.tsx\n```tsx\n// Olea Table Booking from CopyPasteUI — PolyForm Shield 1.0.0: https://polyformproject.org/licenses/shield/1.0.0\n// Required Notice: Copyright 2026 Nidhin Radh P V and the CopyPasteUI contributors (https://copypasteui.dev)\n\"use client\";\n\nimport { useState } from \"react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { Check, Clock, MapPin, Minus, Phone, Plus, Users } from \"lucide-react\";\n\nconst days = [\n { d: \"Thu\", n: \"22\" },\n { d: \"Fri\", n: \"23\" },\n { d: \"Sat\", n: \"24\" },\n { d: \"Sun\", n: \"25\" },\n { d: \"Tue\", n: \"27\" },\n { d: \"Wed\", n: \"28\" },\n];\nconst times = [\"18:00\", \"18:30\", \"19:00\", \"19:30\", \"20:00\", \"20:30\", \"21:00\", \"21:30\"];\nconst full = new Set([\"19:30\", \"20:00\"]);\n\nexport default function OleaReservations() {\n const [guests, setGuests] = useState(2);\n const [day, setDay] = useState(1);\n const [time, setTime] = useState(\"19:00\");\n const [done, setDone] = useState(false);\n\n return (\n
\n
\n
\n

Reservations

\n

Book a table

\n\n \n {done ? (\n \n
\n \n
\n

\n See you {days[day]!.d} {days[day]!.n} at {time}.\n

\n

Table for {guests}. A confirmation is on its way to your inbox.

\n \n \n ) : (\n {\n e.preventDefault();\n setDone(true);\n }}\n className=\"mt-8 space-y-8\"\n >\n
\n \n Guests\n \n
\n setGuests((g) => Math.max(1, g - 1))}\n className=\"grid size-9 place-items-center rounded-full border border-border bg-card hover:border-foreground\"\n >\n \n \n \n {guests}\n \n setGuests((g) => Math.min(8, g + 1))}\n className=\"grid size-9 place-items-center rounded-full border border-border bg-card hover:border-foreground\"\n >\n \n \n
\n
\n\n
\n October\n
\n {days.map((d, k) => (\n setDay(k)}\n className={`rounded-[var(--radius)] border py-3 text-center transition ${day === k ? \"border-primary bg-primary text-primary-foreground\" : \"border-border hover:border-foreground\"}`}\n >\n {d.d}\n {d.n}\n \n ))}\n
\n
\n\n
\n Time\n
\n {times.map((t) => {\n const off = full.has(t);\n return (\n setTime(t)}\n className={`rounded-full border py-2.5 text-sm font-semibold tabular-nums transition disabled:cursor-not-allowed disabled:line-through disabled:opacity-40 ${time === t ? \"border-accent bg-accent text-accent-foreground\" : \"border-border hover:border-foreground\"}`}\n >\n {t}\n \n );\n })}\n
\n
\n\n
\n \n \n \n
\n\n \n Reserve for {guests} · {days[day]!.d} {days[day]!.n}, {time}\n \n

Parties of 9 or more: call us or ask about private dining.

\n \n )}\n \n
\n\n
\n
\n \n \n \n {[40, 100, 160].map((y) => (\n \n ))}\n {[80, 210, 320].map((x) => (\n \n ))}\n \n
\n \n O\n \n \n
\n \n Harbour, 2 min walk from the pier\n \n
\n
    \n
  • \n \n \n 14 Harbour Row, Old Port\n
    \n Brighton BN1 1PT\n     \n
    • \n
  • \n \n \n Tue–Sat 12–3 & 6–11\n
    \n Sun 12:30–5 · Closed Mon\n     \n
    • \n
  • \n \n \n 01273 000 000\n \n
    • \n
\n
\n
\n
\n );\n}\n```\n\n### components/copypasteui/OleaFooter.tsx\n```tsx\n// Olea Footer from CopyPasteUI — PolyForm Shield 1.0.0: https://polyformproject.org/licenses/shield/1.0.0\n// Required Notice: Copyright 2026 Nidhin Radh P V and the CopyPasteUI contributors (https://copypasteui.dev)\n\"use client\";\n\nimport { motion } from \"motion/react\";\nimport { ArrowUpRight, AtSign, Gift } from \"lucide-react\";\n\nconst cols = [\n { title: \"Visit\", links: [\"Menu\", \"Wine list\", \"Sunday lunch\", \"Private dining\", \"Gift cards\"] },\n { title: \"Olea\", links: [\"Our story\", \"Suppliers\", \"Careers\", \"Press\", \"Contact\"] },\n];\n\nexport default function OleaFooter() {\n return (\n \n );\n}\n```\n\n{{THEME}}" }