[V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Montserrat, Italiana } from "next/font/google" import "./globals.css" // Load Italiana font (elegant, modern serif) const italiana = Italiana({ subsets: ["latin"], weight: ["400"], variable: "--font-italiana", display: "swap", }) // Load Montserrat font (clean, modern sans-serif) const montserrat = Montserrat({ subsets: ["latin"], weight: ["300", "400", "500", "600", "700"], variable: "--font-montserrat", display: "swap", }) export const metadata: Metadata = { title: "NOIR | Exclusive Dining Experience", description: "A culinary journey of exceptional taste", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; :root { --foreground-rgb: 0, 0, 0; --background-start-rgb: 214, 219, 220; --background-end-rgb: 255, 255, 255; } body { color: rgb(var(--foreground-rgb)); background: #0a0a0a; color: #f8f8f8; } @layer utilities { .text-balance { text-wrap: balance; } .font-display { font-family: var(--font-italiana); } .font-sans { font-family: var(--font-montserrat); } .text-stroke { -webkit-text-stroke: 1px #f8f8f8; color: transparent; } .mask-image-gradient { mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1.0) 50%, transparent 100%); } } @layer base { :root { --background: 0 0% 4%; --foreground: 0 0% 97%; --card: 0 0% 6%; --card-foreground: 0 0% 97%; --popover: 0 0% 4%; --popover-foreground: 0 0% 97%; --primary: 0 0% 97%; --primary-foreground: 0 0% 4%; --secondary: 0 0% 12%; --secondary-foreground: 0 0% 97%; --muted: 0 0% 12%; --muted-foreground: 0 0% 60%; --accent: 130 35% 60%; --accent-foreground: 0 0% 4%; --destructive: 0 84% 60%; --destructive-foreground: 0 0% 97%; --border: 0 0% 12%; --input: 0 0% 12%; --ring: 0 0% 97%; --radius: 0rem; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useState, useRef, useEffect, memo } from "react" import Spline from "@splinetool/react-spline/next" import { AnimatePresence, motion } from "framer-motion" import { MapPin, Clock, Phone, Instagram, ArrowRight, ArrowDown, ChevronRight } from "lucide-react" import Image from "next/image" // Memoized Spline component to prevent re-renders const MemoizedSpline = memo(function MemoizedSpline(props: { scene: string width: number height: number }) { return }) export default function Home() { const [menuOpen, setMenuOpen] = useState(false) const menuRef = useRef(null) const splineRef = useRef(null) const [activeSection, setActiveSection] = useState("tasting") const toggleMenu = () => { setMenuOpen(!menuOpen) } // Close menu when clicking outside useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if ( menuOpen && menuRef.current && !menuRef.current.contains(event.target as Node) && splineRef.current && !splineRef.current.contains(event.target as Node) ) { setMenuOpen(false) } } document.addEventListener("mousedown", handleClickOutside) return () => { document.removeEventListener("mousedown", handleClickOutside) } }, [menuOpen]) const navItems = [ { name: "Experience", href: "/experience" }, { name: "Menu", href: "/menu" }, { name: "Private Dining", href: "/private" }, { name: "Reservations", href: "/reservations" }, { name: "Journal", href: "/journal" }, ] const tastingMenu = [ { name: "Amuse-bouche", description: "Oyster, cucumber, yuzu", }, { name: "First", description: "Scallop crudo, black truffle, citrus", }, { name: "Second", description: "Foie gras terrine, brioche, seasonal fruit", }, { name: "Third", description: "Wild mushroom risotto, aged parmesan", }, { name: "Fourth", description: "A5 Wagyu, bone marrow, smoked potato", }, { name: "Pre-dessert", description: "Palate cleanser, seasonal sorbet", }, { name: "Dessert", description: "Chocolate soufflé, vanilla bean ice cream", }, ] const aLaCarteMenu = [ { category: "Starters", items: [ { name: "Caviar", description: "30g Ossetra, traditional garnishes", price: "$120" }, { name: "Foie Gras", description: "House-made terrine, brioche, seasonal fruit", price: "$32" }, { name: "Lobster", description: "Butter poached, saffron aioli", price: "$38" }, ], }, { category: "Mains", items: [ { name: "Wagyu Beef", description: "A5 Japanese, 120g, truffle jus", price: "$95" }, { name: "Dover Sole", description: "Meunière, brown butter, capers", price: "$68" }, { name: "Lamb", description: "Rack, herb crust, heirloom vegetables", price: "$72" }, ], }, ] return (

{/* Header */}

NOIR

{/* Menu Overlay */} {menuOpen && (

{/* Navigation Links */}

A Culinary Journey

An intimate dining experience crafted with precision, passion, and the finest seasonal ingredients.

Reserve a Table Explore Menu

{/* Experience Section */}

THE EXPERIENCE

Culinary Artistry

At NOIR, we believe dining is an art form. Our intimate 24-seat restaurant offers an immersive experience where every detail is meticulously crafted to engage all your senses.

Chef Laurent's innovative approach combines classical techniques with avant-garde presentation, creating dishes that are as visually stunning as they are delicious.

"Dining elevated to its highest form."

Learn More

Chef Laurent

Michelin-starred chef with a passion for innovative, seasonal cuisine.

{/* Menu Section */}

OUR OFFERINGS

The Menu

Our menu changes with the seasons, showcasing the finest ingredients at their peak. Each dish tells a story of tradition, innovation, and exceptional flavor.

{activeSection === "tasting" && (

Seven Course Journey

$195 per person

Wine Pairing: $95 additional

{tastingMenu.map((dish, index) => (

{dish.name}

{index + 1}/7

{dish.description}

))}

Reserve this Experience

)} {activeSection === "alacarte" && (

{aLaCarteMenu.map((section, sectionIndex) => (

{section.category}

{section.items.map((item, index) => (

{item.name}

{item.price}

{item.description}

))}

View Full Menu

)}

{/* Reservation CTA */}

JOIN US

Reserve Your Experience

With only 24 seats available each evening, we recommend securing your reservation well in advance to ensure your preferred date and time.

Book a Table Private Dining

{/* Footer */}

) }

Menu

A5 Wagyu Experience

About

About