{
  "slug": "olea-hero",
  "name": "Olea Restaurant Hero",
  "description": "Full-bleed dining-room hero with centred wordmark nav, giant serif headline, hours and address strip and a floating press quote.",
  "category": "hero",
  "tags": [
    "restaurant",
    "food",
    "hospitality",
    "photography",
    "serif"
  ],
  "author": {
    "name": "CopyPasteUI",
    "github": "copypasteui"
  },
  "license": "PolyForm-Shield-1.0.0",
  "createdAt": "2026-10-21",
  "featured": true,
  "collection": "olea-restaurant",
  "previewTheme": null,
  "images": {
    "thumbnail": "https://cdn.copypasteui.dev/thumbs/components/olea-hero.jpg",
    "preview": "https://cdn.copypasteui.dev/thumbs/components/olea-hero.webm#t=0.9"
  },
  "usesPhotos": true,
  "dependencies": {
    "lucide-react": ">=0.400.0",
    "motion": ">=12.0.0"
  },
  "exportName": "OleaHero",
  "code": "// 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    <section className=\"relative isolate min-h-[100svh] overflow-hidden bg-primary font-sans text-primary-foreground\">\n      <motion.img\n        initial={{ scale: 1.12 }}\n        animate={{ scale: 1 }}\n        transition={{ duration: 2.4, ease }}\n        src={img(\"photo-1776993298456-98c71c0e177e\", 2200)}\n        alt=\"Olea dining room with leather banquettes set for dinner\"\n        className=\"absolute inset-0 -z-10 size-full object-cover\"\n      />\n      <div className=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/85 via-black/35 to-black/50\" />\n\n      <header className=\"mx-auto flex max-w-7xl items-center justify-between px-6 py-6 text-white\">\n        <nav className=\"hidden flex-1 gap-8 text-sm font-medium md:flex\">\n          {[\"Menu\", \"Wine\", \"Private dining\"].map((l) => (\n            <a key={l} href=\"#\" className=\"opacity-85 hover:opacity-100\">\n              {l}\n            </a>\n          ))}\n        </nav>\n        <a href=\"#\" className=\"font-display text-3xl tracking-[0.2em]\">\n          OLEA\n        </a>\n        <div className=\"flex flex-1 items-center justify-end gap-6 text-sm font-medium\">\n          <a href=\"#\" className=\"hidden opacity-85 hover:opacity-100 md:inline\">\n            Gift cards\n          </a>\n          <a\n            href=\"#reserve\"\n            className=\"hidden rounded-full border border-white/40 px-5 py-2.5 backdrop-blur hover:bg-white hover:text-black sm:inline\"\n          >\n            Book a table\n          </a>\n          <button type=\"button\" aria-label=\"Open menu\" className=\"md:hidden\">\n            <Menu className=\"size-6\" />\n          </button>\n        </div>\n      </header>\n\n      <div className=\"mx-auto flex min-h-[calc(100svh-88px)] max-w-7xl flex-col justify-end px-6 pb-12 text-white\">\n        <motion.p\n          initial={{ opacity: 0, y: 10 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ delay: 0.3, duration: 0.8 }}\n          className=\"text-xs font-semibold tracking-[0.35em] text-white/75 uppercase\"\n        >\n          Coastal Mediterranean · Est. 2014\n        </motion.p>\n        <motion.h1\n          initial={{ opacity: 0, y: 10 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ delay: 0.15, duration: 1.1, ease }}\n          className=\"mt-5 max-w-5xl font-display text-[clamp(3rem,8.5vw,8rem)] leading-[0.92]\"\n        >\n          Long tables, wood fire &amp; the <em className=\"text-white/70 italic\">slow</em> Sunday lunch.\n        </motion.h1>\n\n        <div className=\"mt-10 grid gap-8 border-t border-white/20 pt-8 md:grid-cols-[1.4fr_1fr_1fr_auto] md:items-end\">\n          <p className=\"max-w-md text-white/80\">\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          </p>\n          <div className=\"flex items-start gap-3 text-sm\">\n            <Clock className=\"mt-0.5 size-4 shrink-0 text-white/60\" />\n            <p>\n              <span className=\"font-semibold\">Tue – Sun</span>\n              <br />\n              <span className=\"text-white/70\">Lunch 12–3 · Dinner 6–11</span>\n            </p>\n          </div>\n          <div className=\"flex items-start gap-3 text-sm\">\n            <MapPin className=\"mt-0.5 size-4 shrink-0 text-white/60\" />\n            <p>\n              <span className=\"font-semibold\">14 Harbour Row</span>\n              <br />\n              <span className=\"text-white/70\">Old Port, Brighton</span>\n            </p>\n          </div>\n          <a\n            href=\"#reserve\"\n            className=\"group inline-flex items-center justify-center gap-2 rounded-full bg-accent px-7 py-4 font-semibold text-accent-foreground\"\n          >\n            Reserve a table <ArrowRight className=\"size-4 transition-transform group-hover:translate-x-1\" />\n          </a>\n        </div>\n      </div>\n\n      <motion.div\n        initial={{ opacity: 0, x: 30 }}\n        animate={{ opacity: 1, x: 0 }}\n        transition={{ delay: 0.9, duration: 0.8 }}\n        className=\"absolute top-28 right-6 hidden w-60 rounded-[var(--radius)] bg-background/95 p-4 text-foreground shadow-2xl backdrop-blur lg:block\"\n      >\n        <div className=\"flex gap-0.5 text-accent\">\n          {Array.from({ length: 5 }).map((_, i) => (\n            <Star key={i} className=\"size-3.5 fill-current\" />\n          ))}\n        </div>\n        <p className=\"mt-2 font-display text-lg leading-snug\">“The best plate of fish on the south coast.”</p>\n        <p className=\"mt-2 text-xs text-muted-foreground\">The Coastal Food Guide, 2026</p>\n      </motion.div>\n    </section>\n  );\n}\n",
  "theme": "olea",
  "url": "https://copypasteui.dev/components/hero/olea-hero",
  "previewUrl": "https://copypasteui.dev/preview/olea-hero",
  "thumbnailUrl": "https://cdn.copypasteui.dev/thumbs/components/olea-hero.jpg",
  "ogImageUrl": "https://cdn.copypasteui.dev/thumbs/components/olea-hero.jpg",
  "previewVideoUrl": "https://cdn.copypasteui.dev/thumbs/components/olea-hero.webm#t=0.9",
  "installPath": "components/copypasteui/OleaHero.tsx",
  "installCommand": "npm install lucide-react motion",
  "shadcnUrl": "https://copypasteui.dev/r/shadcn/olea-hero.json",
  "prompt": "Add the \"Olea Restaurant Hero\" section to this project. It is a free component from CopyPasteUI (https://copypasteui.dev/components/hero/olea-hero). Free to use in this project, including commercial and client work (CopyPasteUI licence: PolyForm Shield 1.0.0). Keep the two notice lines at the top of the file.\n\n## Requirements\n- React 18+ with Tailwind CSS (v4 preferred, v3 works with the config below).\n- Install dependencies: `npm install lucide-react motion`\n\n## Steps\n1. Create `components/copypasteui/OleaHero.tsx` with the code below, unchanged.\n2. Make sure the theme tokens exist (see the Theme section).\n3. Render `<OleaHero />` where the section belongs on the page. In Next.js App Router it is already a client component.\n4. Replace placeholder copy, links and images with the project's real content. Keep the layout, spacing, motion and token classes.\n5. Photos are free Unsplash images hotlinked from images.unsplash.com (Unsplash License, no attribution required). Keep them, or swap in the project's own photos with the same aspect ratios. If the project uses next/image, add images.unsplash.com to images.remotePatterns or keep plain <img>.\n\n## Code\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    <section className=\"relative isolate min-h-[100svh] overflow-hidden bg-primary font-sans text-primary-foreground\">\n      <motion.img\n        initial={{ scale: 1.12 }}\n        animate={{ scale: 1 }}\n        transition={{ duration: 2.4, ease }}\n        src={img(\"photo-1776993298456-98c71c0e177e\", 2200)}\n        alt=\"Olea dining room with leather banquettes set for dinner\"\n        className=\"absolute inset-0 -z-10 size-full object-cover\"\n      />\n      <div className=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/85 via-black/35 to-black/50\" />\n\n      <header className=\"mx-auto flex max-w-7xl items-center justify-between px-6 py-6 text-white\">\n        <nav className=\"hidden flex-1 gap-8 text-sm font-medium md:flex\">\n          {[\"Menu\", \"Wine\", \"Private dining\"].map((l) => (\n            <a key={l} href=\"#\" className=\"opacity-85 hover:opacity-100\">\n              {l}\n            </a>\n          ))}\n        </nav>\n        <a href=\"#\" className=\"font-display text-3xl tracking-[0.2em]\">\n          OLEA\n        </a>\n        <div className=\"flex flex-1 items-center justify-end gap-6 text-sm font-medium\">\n          <a href=\"#\" className=\"hidden opacity-85 hover:opacity-100 md:inline\">\n            Gift cards\n          </a>\n          <a\n            href=\"#reserve\"\n            className=\"hidden rounded-full border border-white/40 px-5 py-2.5 backdrop-blur hover:bg-white hover:text-black sm:inline\"\n          >\n            Book a table\n          </a>\n          <button type=\"button\" aria-label=\"Open menu\" className=\"md:hidden\">\n            <Menu className=\"size-6\" />\n          </button>\n        </div>\n      </header>\n\n      <div className=\"mx-auto flex min-h-[calc(100svh-88px)] max-w-7xl flex-col justify-end px-6 pb-12 text-white\">\n        <motion.p\n          initial={{ opacity: 0, y: 10 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ delay: 0.3, duration: 0.8 }}\n          className=\"text-xs font-semibold tracking-[0.35em] text-white/75 uppercase\"\n        >\n          Coastal Mediterranean · Est. 2014\n        </motion.p>\n        <motion.h1\n          initial={{ opacity: 0, y: 10 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ delay: 0.15, duration: 1.1, ease }}\n          className=\"mt-5 max-w-5xl font-display text-[clamp(3rem,8.5vw,8rem)] leading-[0.92]\"\n        >\n          Long tables, wood fire &amp; the <em className=\"text-white/70 italic\">slow</em> Sunday lunch.\n        </motion.h1>\n\n        <div className=\"mt-10 grid gap-8 border-t border-white/20 pt-8 md:grid-cols-[1.4fr_1fr_1fr_auto] md:items-end\">\n          <p className=\"max-w-md text-white/80\">\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          </p>\n          <div className=\"flex items-start gap-3 text-sm\">\n            <Clock className=\"mt-0.5 size-4 shrink-0 text-white/60\" />\n            <p>\n              <span className=\"font-semibold\">Tue – Sun</span>\n              <br />\n              <span className=\"text-white/70\">Lunch 12–3 · Dinner 6–11</span>\n            </p>\n          </div>\n          <div className=\"flex items-start gap-3 text-sm\">\n            <MapPin className=\"mt-0.5 size-4 shrink-0 text-white/60\" />\n            <p>\n              <span className=\"font-semibold\">14 Harbour Row</span>\n              <br />\n              <span className=\"text-white/70\">Old Port, Brighton</span>\n            </p>\n          </div>\n          <a\n            href=\"#reserve\"\n            className=\"group inline-flex items-center justify-center gap-2 rounded-full bg-accent px-7 py-4 font-semibold text-accent-foreground\"\n          >\n            Reserve a table <ArrowRight className=\"size-4 transition-transform group-hover:translate-x-1\" />\n          </a>\n        </div>\n      </div>\n\n      <motion.div\n        initial={{ opacity: 0, x: 30 }}\n        animate={{ opacity: 1, x: 0 }}\n        transition={{ delay: 0.9, duration: 0.8 }}\n        className=\"absolute top-28 right-6 hidden w-60 rounded-[var(--radius)] bg-background/95 p-4 text-foreground shadow-2xl backdrop-blur lg:block\"\n      >\n        <div className=\"flex gap-0.5 text-accent\">\n          {Array.from({ length: 5 }).map((_, i) => (\n            <Star key={i} className=\"size-3.5 fill-current\" />\n          ))}\n        </div>\n        <p className=\"mt-2 font-display text-lg leading-snug\">“The best plate of fish on the south coast.”</p>\n        <p className=\"mt-2 text-xs text-muted-foreground\">The Coastal Food Guide, 2026</p>\n      </motion.div>\n    </section>\n  );\n}\n```\n\n{{THEME}}"
}