779 lines
36 KiB
TypeScript
779 lines
36 KiB
TypeScript
"use client";
|
||
|
||
import { motion, AnimatePresence } from "framer-motion";
|
||
import { useRef, useState, useEffect } from "react";
|
||
import type { DemoData } from "@/data/demos";
|
||
|
||
const fadeUp = {
|
||
hidden: { opacity: 0, y: 40 },
|
||
show: { opacity: 1, y: 0, transition: { duration: 0.7, ease: [0.25, 0.46, 0.45, 0.94] as [number, number, number, number] } },
|
||
};
|
||
|
||
const stagger = {
|
||
hidden: {},
|
||
show: { transition: { staggerChildren: 0.1 } },
|
||
};
|
||
|
||
const translations = {
|
||
tr: {
|
||
navReserve: "Rezervasyon",
|
||
navHours: "Çalışma Saatleri",
|
||
navCurator: "Kokteyl Menüsü",
|
||
navReviews: "Değerlendirmeler",
|
||
bookTable: "Masa Ayırt",
|
||
exclusiveLounge: "ÖZEL KOKTEYL SALONU",
|
||
cocktailStage: "KOKTEYL SAHNESİ",
|
||
evenings: "geceleri",
|
||
heroDesc: "Noir Velvet Lounge'a adım atın. Klasik karışımlar, botanik aromalar ve yıllanmış özel içkilerin loş kehribar akustiği altındaki benzersiz sunumunu keşfedin.",
|
||
discoverMenu: "MENÜYÜ KEŞFET",
|
||
reserveTableTitle: "Stage Booking",
|
||
reserveTableHeader: "MASA AYIRTIN",
|
||
reserveTableDesc: "Ana sahne akustik çizgilerinin altında, size özel bar tezgahı veya lounge masanızı şimdiden ayırtın.",
|
||
fieldsName: "İsim Soyisim",
|
||
fieldsPhone: "İletişim Numarası",
|
||
fieldsDate: "Tarih",
|
||
fieldsTime: "Saat",
|
||
guarantee: "Bu formu doldurarak doğrulanmış bir rezervasyon sağlarsınız. Masalar, rezervasyon saatinden itibaren 15 dakika boyunca adınıza tutulur.",
|
||
secureRes: "REZERVASYON YAP",
|
||
curatorSpecials: "Küratörün Seçtikleri",
|
||
weRecommend: "TAVSİYE EDİLENLER",
|
||
signature: "İmza",
|
||
loungeStories: "LOUNGE HİKAYELERİ",
|
||
loungeStoriesDesc: "Seçkin miksolojistlerin ve caz akustiği kuratörlerinin salon hakkındaki yorumlarını keşfedin.",
|
||
loungeHours: "ÇALIŞMA SAATLERİ",
|
||
loungeDials: "İMZA KOKTEYLLER",
|
||
privacyRegs: "Gizlilik Sözleşmesi",
|
||
termsStay: "Salon Koşulları",
|
||
dismiss: "KAPAT",
|
||
enquiryActive: "REZERVASYON YAPILDI",
|
||
ambassadorActive: "Sahne Mihmandarı Aktif",
|
||
enquirySuccess: "Bar tezgahı veya lounge masası rezervasyonunuzu başarıyla kaydettik. Özel mihmandarımız giriş koordinatlarınızı doğrulamak için sizinle iletişime geçecektir. Teşekkürler!",
|
||
},
|
||
en: {
|
||
navReserve: "Reserve Table",
|
||
navHours: "Hours",
|
||
navCurator: "Curator's Specials",
|
||
navReviews: "Reviews",
|
||
bookTable: "Book a table",
|
||
exclusiveLounge: "EXCLUSIVE LOUNGE SERVICE",
|
||
cocktailStage: "COCKTAIL STAGE",
|
||
evenings: "evenings",
|
||
heroDesc: "Step into Noir Velvet Lounge. Indulge in classic mixes, botanic blends, and aged private reserve spirits staged under moody amber acoustics.",
|
||
discoverMenu: "DISCOVER STAGE MENU",
|
||
reserveTableTitle: "Stage Booking",
|
||
reserveTableHeader: "RESERVE A TABLE",
|
||
reserveTableDesc: "Allocate your private counter or lounge table under the main stage acoustic lines.",
|
||
fieldsName: "Name",
|
||
fieldsPhone: "Phone",
|
||
fieldsDate: "Date",
|
||
fieldsTime: "Time",
|
||
guarantee: "By submitting this form, you secure a verified reservation. Tables are held for 15 minutes past the booking coordinates.",
|
||
secureRes: "SECURE RESERVATION",
|
||
curatorSpecials: "Curator's Specials",
|
||
weRecommend: "WE RECOMMEND",
|
||
signature: "Signature",
|
||
loungeStories: "LOUNGE STORIES",
|
||
loungeStoriesDesc: "Hear what prominent mixologists and jazz acoustic curators write about the lounge.",
|
||
loungeHours: "OPEN HOURS",
|
||
loungeDials: "SPECIAL DIALS",
|
||
privacyRegs: "Privacy Regulations",
|
||
termsStay: "Terms of Lounge",
|
||
dismiss: "DISMISS",
|
||
enquiryActive: "TABLE RESERVED",
|
||
ambassadorActive: "Stage Concierge Active",
|
||
enquirySuccess: "We have secured your counter or lounge table reservation. A private host has registered your parameters. Thank you!",
|
||
}
|
||
};
|
||
|
||
export default function BarTemplate({ data }: { data: DemoData }) {
|
||
const { firma, istatistikler = [], hizmetler = [], yorumlar = [] } = data;
|
||
const [showBookingModal, setShowBookingModal] = useState(false);
|
||
const [menuOpen, setMenuOpen] = useState(false);
|
||
const [lang, setLang] = useState<"tr" | "en">("tr");
|
||
const [preloader, setPreloader] = useState(true);
|
||
|
||
const t = translations[lang];
|
||
|
||
// 1. Lenis Smooth Scroll Integration
|
||
useEffect(() => {
|
||
let lenis: any;
|
||
import("@studio-freight/lenis").then(({ default: Lenis }) => {
|
||
lenis = new Lenis({ duration: 1.2, easing: (t: number) => Math.min(1, 1.001 - Math.pow(2, -10 * t)) });
|
||
function raf(time: number) { lenis.raf(time); requestAnimationFrame(raf); }
|
||
requestAnimationFrame(raf);
|
||
});
|
||
return () => lenis?.destroy();
|
||
}, []);
|
||
|
||
// 2. Preloader Curtain Timer
|
||
useEffect(() => {
|
||
const timer = setTimeout(() => {
|
||
setPreloader(false);
|
||
}, 1500);
|
||
return () => clearTimeout(timer);
|
||
}, []);
|
||
|
||
// Localized statistics/hours
|
||
const getLocalizedStat = (deger: string, etiket: string) => {
|
||
if (deger.toLowerCase().includes("weekdays") || etiket.toLowerCase().includes("weekdays") || etiket.toLowerCase().includes("pazartesi")) {
|
||
return {
|
||
deger: lang === "tr" ? "Hafta İçi" : "Weekdays",
|
||
etiket: lang === "tr" ? "Pazartesi - Cuma · 16:00 - 02:00" : "Monday - Friday · 4:00 PM - 2:00 AM"
|
||
};
|
||
}
|
||
if (deger.toLowerCase().includes("weekends") || etiket.toLowerCase().includes("weekends") || etiket.toLowerCase().includes("cumartesi")) {
|
||
return {
|
||
deger: lang === "tr" ? "Hafta Sonu" : "Weekends",
|
||
etiket: lang === "tr" ? "Cumartesi - Pazar · 16:00 - 04:00" : "Saturday - Sunday · 4:00 PM - 4:00 AM"
|
||
};
|
||
}
|
||
if (deger.toLowerCase().includes("happy") || etiket.toLowerCase().includes("happy")) {
|
||
return {
|
||
deger: lang === "tr" ? "Happy Hour" : "Happy Hour",
|
||
etiket: lang === "tr" ? "Her gün 17:00 - 19:00 arası imza kokteyllerde %20 indirim" : "Daily 5:00 PM - 7:00 PM · 20% off signature mixology"
|
||
};
|
||
}
|
||
return {
|
||
deger: lang === "tr" ? "Özel Karışımlar" : deger,
|
||
etiket: lang === "tr" ? "Taze botanik şuruplar ve el yapımı bitters infüzyonları." : etiket
|
||
};
|
||
};
|
||
|
||
// Localized services/beverages
|
||
const getLocalizedService = (baslik: string, aciklama: string) => {
|
||
if (baslik.toLowerCase().includes("velvet") || baslik.toLowerCase().includes("velvet kiss")) {
|
||
return {
|
||
title: lang === "tr" ? "VELVET KISS KOKTEYLİ" : "VELVET KISS COCKTAIL",
|
||
desc: lang === "tr" ? "Kendi yapımımız taze vişne likörü, vanilya şurubu ve dumanlanmış ardıç aromaları ile hazırlanan imza içkimiz." : aciklama
|
||
};
|
||
}
|
||
if (baslik.toLowerCase().includes("amber") || baslik.toLowerCase().includes("amber smoke") || baslik.toLowerCase().includes("smoke")) {
|
||
return {
|
||
title: lang === "tr" ? "KEHRİBAR DUMANI" : "AMBER SMOKE",
|
||
desc: lang === "tr" ? "Ağaç talaşı isi ile tütsülenmiş viski, botanik acı otlar ve karamelize portakal dilimi." : aciklama
|
||
};
|
||
}
|
||
return {
|
||
title: lang === "tr" ? "BOTANİK RÜYA" : "BOTANICAL DREAM",
|
||
desc: lang === "tr" ? "Taze biberiye infüzyonu, narenciye asidi ve organik zencefil gazozu ile canlandırıcı hafif bir karışım." : aciklama
|
||
};
|
||
};
|
||
|
||
// Custom visual styles & Google Fonts for our Classic Noir Velvet aesthetic
|
||
const css = `
|
||
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,400&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
|
||
|
||
:root {
|
||
--color-velvet-gold: #D4AF37;
|
||
--color-velvet-black: #09090C;
|
||
--color-velvet-card: #14141A;
|
||
--color-text-white: #E8E8E8;
|
||
--color-text-muted: rgba(232, 232, 232, 0.6);
|
||
}
|
||
|
||
.font-serif-editorial {
|
||
font-family: 'Cormorant Garamond', Georgia, serif;
|
||
}
|
||
|
||
.font-serif-lux {
|
||
font-family: 'Cormorant Garamond', Georgia, serif;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.font-sans-clean {
|
||
font-family: 'Space Grotesk', sans-serif;
|
||
}
|
||
|
||
.bg-mesh-velvet {
|
||
background-image:
|
||
radial-gradient(circle at 5% 5%, rgba(212, 175, 55, 0.03) 0%, transparent 40%),
|
||
radial-gradient(circle at 95% 95%, rgba(212, 175, 55, 0.02) 0%, transparent 50%);
|
||
}
|
||
|
||
.gold-glow {
|
||
box-shadow: 0 0 20px rgba(212, 175, 55, 0.15);
|
||
}
|
||
|
||
/* Slow pulse for active indicators */
|
||
.pulse-gold {
|
||
animation: goldPulse 2.5s infinite;
|
||
}
|
||
|
||
@keyframes goldPulse {
|
||
0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4); }
|
||
70% { box-shadow: 0 0 0 10px rgba(212, 175, 55, 0); }
|
||
100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
|
||
}
|
||
|
||
.hero-title-clamp {
|
||
font-size: clamp(48px, 8vw, 110px);
|
||
letter-spacing: -0.03em;
|
||
line-height: 0.9;
|
||
}
|
||
`;
|
||
|
||
return (
|
||
<>
|
||
<style>{css}</style>
|
||
|
||
{/* ── IMZA AN: CURTAIN REVEAL PRELOADER ── */}
|
||
<AnimatePresence>
|
||
{preloader && (
|
||
<motion.div
|
||
className="fixed inset-0 z-50 bg-[#09090C] flex flex-col items-center justify-center p-6"
|
||
exit={{
|
||
clipPath: "polygon(0 0, 100% 0, 100% 0, 0 0)",
|
||
transition: { duration: 0.85, ease: [0.16, 1, 0.3, 1] }
|
||
}}
|
||
>
|
||
<div className="max-w-md text-center space-y-6">
|
||
<motion.span
|
||
className="text-[9px] font-black tracking-[4px] uppercase text-[#D4AF37] block font-sans-clean"
|
||
initial={{ opacity: 0, y: 10 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5 }}
|
||
>
|
||
NOIR VELVET LOUNGE
|
||
</motion.span>
|
||
<div className="h-[1px] w-48 bg-white/10 mx-auto relative overflow-hidden">
|
||
<motion.div
|
||
className="absolute inset-y-0 left-0 bg-[#D4AF37]"
|
||
initial={{ width: "0%" }}
|
||
animate={{ width: "100%" }}
|
||
transition={{ duration: 1.2, ease: "easeInOut" }}
|
||
/>
|
||
</div>
|
||
<motion.h2
|
||
className="font-serif-editorial text-white text-lg italic font-light tracking-wider"
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ delay: 0.4, duration: 0.5 }}
|
||
>
|
||
mixology & acoustic lounge
|
||
</motion.h2>
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
|
||
{/* ── NOIR VELVET LOUNGE ── */}
|
||
<div className="bg-[#09090C] text-[#E8E8E8] min-h-screen font-sans-clean selection:bg-[#D4AF37] selection:text-black overflow-hidden relative bg-mesh-velvet pb-20">
|
||
|
||
{/* Floating Ambient Gold Orbs */}
|
||
<div className="absolute top-[25%] left-[-10%] w-[500px] h-[500px] bg-[#D4AF37]/3 blur-[120px] rounded-full pointer-events-none z-0" />
|
||
<div className="absolute bottom-[25%] right-[-10%] w-[500px] h-[500px] bg-[#D4AF37]/3 blur-[130px] rounded-full pointer-events-none z-0" />
|
||
|
||
{/* ── MANDATORY FLOATING DEMO BANNER ── */}
|
||
<div className="fixed bottom-4 left-4 z-40 bg-[#09090C]/95 backdrop-blur-md border border-white/5 px-4 py-2.5 rounded-xl shadow-2xl flex items-center gap-2.5 max-w-sm pointer-events-none select-none">
|
||
<div className="w-1.5 h-1.5 rounded-full bg-[#D4AF37] animate-pulse" />
|
||
<span className="text-[9px] font-black uppercase tracking-[1.5px] text-white/90">
|
||
{lang === "tr" ? "Bu web sitesi Ayris Tech tarafından hazırlanmış bir konsept çalışmasıdır." : "This website is a premium concept prototype designed by Ayris Tech."}
|
||
</span>
|
||
</div>
|
||
|
||
{/* ── GOLD FLOATING NAVBAR ── */}
|
||
<motion.header
|
||
className="fixed top-4 left-4 right-4 z-50 px-4"
|
||
initial={{ y: -80, opacity: 0 }}
|
||
animate={{ y: 0, opacity: 1 }}
|
||
transition={{ duration: 0.7, ease: "easeOut" }}
|
||
>
|
||
<div className="mx-auto max-w-7xl h-20 flex items-center justify-between px-8 bg-[#09090C]/80 backdrop-blur-xl border border-[#D4AF37]/10 rounded-2xl shadow-[0_15px_30px_rgba(0,0,0,0.6)]">
|
||
{/* Logo */}
|
||
<a href="#" className="flex items-center gap-2 group">
|
||
<span className="text-xl font-bold tracking-[2px] text-white font-serif-lux flex items-center gap-2.5 uppercase">
|
||
<svg className="w-5 h-5 text-[#D4AF37]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
<path d="M12 22V12" />
|
||
<path d="M5 12h14" />
|
||
<path d="M21 3H3l9 9Z" />
|
||
<path d="M12 12H7.5" />
|
||
</svg>
|
||
{firma.adi}
|
||
</span>
|
||
</a>
|
||
|
||
{/* Navigation Links */}
|
||
<nav className="hidden lg:flex items-center gap-8">
|
||
{[
|
||
{ label: t.navReserve, href: "#booking-flow" },
|
||
{ label: t.navHours, href: "#hours-happy" },
|
||
{ label: t.navCurator, href: "#curated-menu" },
|
||
{ label: t.navReviews, href: "#testimonials" }
|
||
].map(item => (
|
||
<a
|
||
key={item.label}
|
||
href={item.href}
|
||
className="text-[10px] font-bold tracking-[2px] uppercase text-[#E8E8E8]/70 hover:text-[#D4AF37] transition-colors relative py-1 cursor-pointer group"
|
||
>
|
||
{item.label}
|
||
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#D4AF37] transition-all group-hover:w-full" />
|
||
</a>
|
||
))}
|
||
</nav>
|
||
|
||
{/* Action button */}
|
||
<div className="flex items-center gap-4">
|
||
{/* Language Switcher */}
|
||
<div className="flex items-center gap-1 bg-white/5 border border-white/10 rounded-xl p-1 shrink-0">
|
||
<button
|
||
onClick={() => setLang("tr")}
|
||
className={`text-[9px] font-black px-2 py-1.5 rounded-lg transition-all cursor-pointer ${
|
||
lang === "tr" ? "bg-[#D4AF37] text-black shadow-sm" : "text-white/60 hover:text-white"
|
||
}`}
|
||
>
|
||
TR
|
||
</button>
|
||
<button
|
||
onClick={() => setLang("en")}
|
||
className={`text-[9px] font-black px-2 py-1.5 rounded-lg transition-all cursor-pointer ${
|
||
lang === "en" ? "bg-[#D4AF37] text-black shadow-sm" : "text-white/60 hover:text-white"
|
||
}`}
|
||
>
|
||
EN
|
||
</button>
|
||
</div>
|
||
|
||
<motion.button
|
||
onClick={() => setShowBookingModal(true)}
|
||
className="text-[10px] font-bold tracking-[2.5px] uppercase text-black bg-[#D4AF37] hover:bg-white px-6 py-3.5 rounded-xl transition-all cursor-pointer shadow-[0_5px_15px_rgba(212,175,55,0.15)] hidden sm:block"
|
||
whileHover={{ scale: 1.02 }}
|
||
whileTap={{ scale: 0.98 }}
|
||
>
|
||
{t.bookTable}
|
||
</motion.button>
|
||
</div>
|
||
</div>
|
||
</motion.header>
|
||
|
||
{/* ── HERO & HOURS BLOCK ── */}
|
||
<section className="relative min-h-screen pt-32 pb-20 flex items-center z-10 px-6">
|
||
<div className="max-w-7xl mx-auto w-full">
|
||
<div className="grid lg:grid-cols-12 gap-12 items-center">
|
||
|
||
{/* Left Column: Headings & Hours details */}
|
||
<motion.div
|
||
className="lg:col-span-6 z-20"
|
||
variants={stagger}
|
||
initial="hidden"
|
||
animate="show"
|
||
>
|
||
<motion.div
|
||
variants={fadeUp}
|
||
className="inline-flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-[#D4AF37] mb-6 bg-[#D4AF37]/5 border border-[#D4AF37]/15 px-4 py-2 rounded-full"
|
||
>
|
||
<span className="w-1.5 h-1.5 rounded-full bg-[#D4AF37]" />
|
||
{t.exclusiveLounge}
|
||
</motion.div>
|
||
|
||
<motion.h1
|
||
variants={fadeUp}
|
||
className="font-serif-lux text-white leading-[0.95] tracking-tight mb-8 uppercase hero-title-clamp"
|
||
>
|
||
{t.cocktailStage}
|
||
<br />
|
||
<span className="italic font-serif-editorial font-light text-[#D4AF37] lowercase">{t.evenings}</span>
|
||
</motion.h1>
|
||
|
||
<motion.p
|
||
variants={fadeUp}
|
||
className="text-white/60 text-xs lg:text-sm leading-relaxed max-w-md mb-12 font-medium"
|
||
>
|
||
{t.heroDesc}
|
||
</motion.p>
|
||
|
||
{/* Grid details (Open Hours & Happy Hour) */}
|
||
<motion.div
|
||
id="hours-happy"
|
||
variants={fadeUp}
|
||
className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12"
|
||
>
|
||
{istatistikler.map((stat, idx) => {
|
||
const locStat = getLocalizedStat(stat.deger, stat.etiket);
|
||
return (
|
||
<div key={idx} className="border-l border-[#D4AF37]/30 pl-4 py-1">
|
||
<h4 className="font-serif-lux font-bold text-white text-xs uppercase tracking-widest mb-2 text-[#D4AF37]">
|
||
{locStat.deger}
|
||
</h4>
|
||
<p className="text-white/50 text-[11px] leading-relaxed font-medium">
|
||
{locStat.etiket}
|
||
</p>
|
||
</div>
|
||
);
|
||
})}
|
||
</motion.div>
|
||
|
||
{/* Action CTA */}
|
||
<motion.div variants={fadeUp}>
|
||
<a
|
||
href="#curated-menu"
|
||
className="inline-flex items-center gap-3 px-8 py-4 rounded-xl bg-[#D4AF37] hover:bg-white text-black font-bold text-[10px] tracking-[2px] uppercase transition-all shadow-[0_5px_15px_rgba(212,175,55,0.2)] cursor-pointer animate-pulse"
|
||
>
|
||
{t.discoverMenu}
|
||
</a>
|
||
</motion.div>
|
||
</motion.div>
|
||
|
||
{/* Right Column: Parallax Moody Graphic Counter */}
|
||
<div className="lg:col-span-6 relative flex justify-center lg:justify-end">
|
||
<motion.div
|
||
className="relative w-full max-w-md lg:max-w-lg h-[450px] lg:h-[520px] rounded-3xl overflow-hidden shadow-2xl border border-[#D4AF37]/15 group"
|
||
initial={{ opacity: 0, scale: 0.95 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 0.8, ease: "easeOut" }}
|
||
>
|
||
{/* Outer glowing gold ring */}
|
||
<div className="absolute inset-4 rounded-[20px] border border-dashed border-[#D4AF37]/10 animate-[spin_80s_linear_infinite] pointer-events-none" />
|
||
|
||
{/* Using 8k Fresh Citrus flatlay to represent natural ingredients and botanical prep */}
|
||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||
<img
|
||
src="/sicilia_lemon_heritage.png"
|
||
alt="Noir Velvet Fresh Citrus & Botanical Garnishes"
|
||
className="w-full h-full object-cover scale-102 group-hover:scale-105 transition-transform duration-[4000ms] brightness-[0.75]"
|
||
/>
|
||
|
||
{/* Overlay velvet glow */}
|
||
<div className="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-80" />
|
||
</motion.div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── RESERVATION TABLE BUILDER ── */}
|
||
<section id="booking-flow" className="py-24 relative z-10 px-6 border-t border-[#D4AF37]/15 bg-[#09090C]/90">
|
||
<div className="max-w-5xl mx-auto">
|
||
|
||
<div className="bg-[#14141A] rounded-3xl border border-white/5 p-8 md:p-12 shadow-2xl relative">
|
||
|
||
{/* Thin gold line connector indicator */}
|
||
<div className="absolute top-0 left-12 right-12 h-0.5 bg-gradient-to-r from-transparent via-[#D4AF37] to-transparent" />
|
||
|
||
<div className="text-center max-w-xl mx-auto mb-12">
|
||
<span className="text-[#D4AF37] font-bold text-[10px] tracking-[2px] uppercase block mb-2 font-serif-lux">{t.reserveTableTitle}</span>
|
||
<h2 className="font-serif-lux text-3xl font-black uppercase text-white">
|
||
{t.reserveTableHeader}
|
||
</h2>
|
||
<p className="text-white/40 text-xs mt-2 font-medium">
|
||
{t.reserveTableDesc}
|
||
</p>
|
||
</div>
|
||
|
||
{/* Form Grid */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
{[
|
||
{ label: t.fieldsName, placeholder: lang === "tr" ? "Adınız Soyadınız" : "Your Name", type: "text" },
|
||
{ label: t.fieldsPhone, placeholder: lang === "tr" ? "İrtibat Numarası" : "Contact Number", type: "tel" },
|
||
{ label: t.fieldsDate, placeholder: "", type: "date" },
|
||
{ label: t.fieldsTime, placeholder: "", type: "time" },
|
||
].map((field, idx) => (
|
||
<div key={idx} className="flex flex-col">
|
||
<label className="text-[10px] font-bold text-white/50 mb-1.5 uppercase tracking-widest">{field.label}</label>
|
||
<input
|
||
type={field.type}
|
||
placeholder={field.placeholder}
|
||
className="px-4 py-3.5 rounded-xl border border-white/5 bg-[#09090C] text-xs text-white placeholder-white/20 focus:outline-none focus:border-[#D4AF37] focus:ring-1 focus:ring-[#D4AF37] transition-all font-medium cursor-pointer"
|
||
/>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Form Submit Row */}
|
||
<div className="mt-8 pt-4 flex flex-col md:flex-row justify-between items-center gap-4">
|
||
<p className="text-white/40 text-xs font-medium max-w-md text-center md:text-left">
|
||
{t.guarantee}
|
||
</p>
|
||
<motion.button
|
||
onClick={() => setShowBookingModal(true)}
|
||
className="w-full md:w-auto px-10 py-4.5 rounded-xl bg-[#D4AF37] hover:bg-white text-black font-bold text-[10px] tracking-[2px] uppercase transition-all cursor-pointer shadow-[0_5px_15px_rgba(212,175,55,0.2)] shrink-0"
|
||
whileHover={{ scale: 1.02 }}
|
||
whileTap={{ scale: 0.98 }}
|
||
>
|
||
{t.secureRes}
|
||
</motion.button>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── CURATOR'S SPECIALS MENU (DOTTED CONNECTORS) ── */}
|
||
<section id="curated-menu" className="py-32 relative z-10 px-6 bg-[#09090C]">
|
||
<div className="max-w-7xl mx-auto">
|
||
|
||
<div className="grid lg:grid-cols-12 gap-16 items-center">
|
||
|
||
{/* Left Column: Fine dotted Menu lists */}
|
||
<motion.div
|
||
className="lg:col-span-7 flex flex-col justify-center"
|
||
initial="hidden"
|
||
whileInView="show"
|
||
viewport={{ once: true, amount: 0.2 }}
|
||
variants={stagger}
|
||
>
|
||
<motion.span
|
||
variants={fadeUp}
|
||
className="text-[#D4AF37] font-serif-lux italic text-xs tracking-[2px] uppercase block mb-4"
|
||
>
|
||
{t.curatorSpecials}
|
||
</motion.span>
|
||
<motion.h2
|
||
variants={fadeUp}
|
||
className="font-serif-lux text-4xl lg:text-5xl font-black tracking-tight text-white uppercase mb-16"
|
||
>
|
||
{t.weRecommend}
|
||
</motion.h2>
|
||
|
||
{/* Dotted menu */}
|
||
<div className="space-y-8">
|
||
{hizmetler.map((item, idx) => {
|
||
const locBeverage = getLocalizedService(item.baslik, item.aciklama);
|
||
return (
|
||
<motion.div
|
||
key={idx}
|
||
variants={fadeUp}
|
||
className="flex flex-col cursor-pointer group"
|
||
>
|
||
<div className="flex items-end justify-between gap-4">
|
||
<span className="font-serif-lux text-base lg:text-lg font-bold text-white group-hover:text-[#D4AF37] transition-colors uppercase tracking-wider">
|
||
{locBeverage.title}
|
||
</span>
|
||
{/* Fine dotted line */}
|
||
<div className="grow border-b border-dashed border-[#D4AF37]/25 mb-2.5 mx-2" />
|
||
<span className="font-serif-lux text-base lg:text-lg font-black text-[#D4AF37]">
|
||
$19
|
||
</span>
|
||
</div>
|
||
<p className="text-white/50 text-[11px] mt-1.5 leading-relaxed max-w-lg font-medium">
|
||
{locBeverage.desc}
|
||
</p>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Right Column: Close-up action image counter */}
|
||
<div className="lg:col-span-5 relative flex justify-center lg:justify-end">
|
||
<motion.div
|
||
className="relative w-full max-w-sm h-[480px] lg:h-[550px] rounded-3xl overflow-hidden shadow-2xl border border-white/5 group"
|
||
initial={{ opacity: 0, x: 40 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.8, ease: "easeOut" }}
|
||
>
|
||
{/* Using 8k Chef Plating Smoke image to represent curator mixology and smoky vapor */}
|
||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||
<img
|
||
src="/chef_plating_smoke.png"
|
||
alt="Curator liquid smoke mixology stage"
|
||
className="w-full h-full object-cover scale-102 group-hover:scale-105 transition-transform duration-[4000ms] brightness-[0.8]"
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-60" />
|
||
</motion.div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── TESTIMONIALS ── */}
|
||
<section id="testimonials" className="py-28 relative z-10 px-6 bg-[#09090C]/90 border-t border-[#D4AF37]/10">
|
||
<div className="max-w-7xl mx-auto">
|
||
|
||
<div className="text-center max-w-xl mx-auto mb-20">
|
||
<span className="text-[#D4AF37] font-bold text-[10px] tracking-[2px] uppercase block mb-2 font-serif-lux">{t.navReviews}</span>
|
||
<h2 className="font-serif-lux text-3xl lg:text-4xl font-black uppercase text-white tracking-widest">
|
||
{t.loungeStories}
|
||
</h2>
|
||
<p className="text-white/40 text-xs mt-2 font-medium">
|
||
{t.loungeStoriesDesc}
|
||
</p>
|
||
</div>
|
||
|
||
{/* Testimonials 2-Column Grid */}
|
||
<div className="grid md:grid-cols-2 gap-8">
|
||
{yorumlar.map((y, yIdx) => (
|
||
<motion.div
|
||
key={yIdx}
|
||
className="bg-[#14141A] border border-white/5 rounded-3xl p-8 flex flex-col justify-between transition-all duration-300 hover:border-[#D4AF37]/30 group shadow-lg"
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.5, delay: yIdx * 0.1 }}
|
||
whileHover={{ y: -4 }}
|
||
>
|
||
{/* Rating Stars SVG */}
|
||
<div className="flex gap-1.5 mb-6">
|
||
{[...Array(y.puan)].map((_, starIdx) => (
|
||
<svg key={starIdx} className="w-4 h-4 fill-[#D4AF37]" viewBox="0 0 24 24">
|
||
<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
|
||
</svg>
|
||
))}
|
||
</div>
|
||
|
||
<p className="text-white/70 text-xs leading-relaxed italic mb-8 font-medium font-serif-editorial">
|
||
“{y.yorum}”
|
||
</p>
|
||
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-10 h-10 rounded-full border border-white/10 flex items-center justify-center text-lg bg-[#09090C] font-sans-clean select-none font-bold">
|
||
{y.yazar.charAt(0)}
|
||
</div>
|
||
<div>
|
||
<h4 className="font-serif-lux text-white text-xs font-black uppercase tracking-wider">
|
||
{y.yazar}
|
||
</h4>
|
||
<span className="text-[9px] text-white/40 uppercase tracking-widest font-bold font-sans-clean">
|
||
{y.tarih}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── FOOTER ── */}
|
||
<footer className="bg-[#09090C] border-t border-white/5 pt-24 pb-8 px-6 relative z-10">
|
||
<div className="max-w-7xl mx-auto">
|
||
|
||
<div className="grid md:grid-cols-4 gap-12 pb-16 border-b border-white/5">
|
||
|
||
{/* About Column */}
|
||
<div className="md:col-span-2">
|
||
<span className="font-serif-lux text-2xl font-black text-white tracking-wider uppercase mb-4 block">
|
||
Noir<span className="text-[#D4AF37]">Velvet</span>
|
||
</span>
|
||
<p className="text-white/50 text-xs leading-relaxed max-w-sm mb-8 font-medium">
|
||
{firma.slogan} — Classic dark luxury lounge delivering organic mixology under curated acoustic stage lines.
|
||
</p>
|
||
<div className="text-white/60 text-xs font-medium space-y-3">
|
||
<p className="flex items-center gap-2">
|
||
<svg className="w-4 h-4 text-[#D4AF37] shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
|
||
<circle cx="12" cy="10" r="3" />
|
||
</svg>
|
||
<span className="text-white/80">{firma.adres}</span>
|
||
</p>
|
||
<p className="flex items-center gap-2">
|
||
<svg className="w-4 h-4 text-[#D4AF37] shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
<rect width="20" height="16" x="2" y="4" rx="2" />
|
||
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
|
||
</svg>
|
||
<span className="text-white/80">{firma.email}</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Hours Column */}
|
||
<div>
|
||
<h4 className="font-serif-lux text-[#D4AF37] text-xs font-black uppercase tracking-wider mb-6">
|
||
{t.loungeHours}
|
||
</h4>
|
||
<div className="space-y-4 text-xs text-white/50 font-medium">
|
||
<p>{lang === "tr" ? "Pazartesi - Cuma" : "Monday - Friday"} <br /> <span className="text-white/70">4:00 PM - 2:00 AM</span></p>
|
||
<p>{lang === "tr" ? "Cumartesi - Pazar" : "Saturday - Sunday"} <br /> <span className="text-white/70">4:00 PM - 4:00 AM</span></p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Specials Column */}
|
||
<div>
|
||
<h4 className="font-serif-lux text-[#D4AF37] text-xs font-black uppercase tracking-wider mb-6">
|
||
{t.loungeDials}
|
||
</h4>
|
||
<div className="space-y-4">
|
||
{hizmetler.map((h, hIdx) => {
|
||
const locB = getLocalizedService(h.baslik, h.aciklama);
|
||
return (
|
||
<a
|
||
key={hIdx}
|
||
href="#curated-menu"
|
||
className="block text-white/50 hover:text-[#D4AF37] text-xs transition-colors font-medium"
|
||
>
|
||
{locB.title} {t.signature}
|
||
</a>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div className="flex flex-col md:flex-row justify-between items-center pt-8 gap-4 text-white/30 text-xs font-medium">
|
||
<p>© 2026 {firma.adi}. All rights reserved.</p>
|
||
<div className="flex gap-4">
|
||
<a href="#" className="hover:text-white transition-colors">{t.privacyRegs}</a>
|
||
<span>·</span>
|
||
<a href="#" className="hover:text-white transition-colors">{t.termsStay}</a>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</footer>
|
||
|
||
{/* ── FAST TABLE SUCCESS MODAL ── */}
|
||
<AnimatePresence>
|
||
{showBookingModal && (
|
||
<motion.div
|
||
className="fixed inset-0 z-50 flex items-center justify-center p-6 bg-black/85 backdrop-blur-sm"
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
exit={{ opacity: 0 }}
|
||
>
|
||
<motion.div
|
||
className="bg-[#14141A] rounded-3xl p-8 max-w-md w-full relative shadow-2xl border border-[#D4AF37]/20"
|
||
initial={{ scale: 0.95, y: 20 }}
|
||
animate={{ scale: 1, y: 0 }}
|
||
exit={{ scale: 0.95, y: 20 }}
|
||
>
|
||
{/* Close Button */}
|
||
<button
|
||
className="absolute top-6 right-6 w-8 h-8 rounded-full bg-[#09090C] border border-white/5 flex items-center justify-center text-white/40 hover:text-[#D4AF37] hover:border-[#D4AF37]/20 transition-all cursor-pointer font-bold"
|
||
onClick={() => setShowBookingModal(false)}
|
||
>
|
||
✕
|
||
</button>
|
||
|
||
{/* Success check indicator */}
|
||
<div className="w-16 h-16 rounded-2xl bg-[#D4AF37]/10 border border-[#D4AF37]/20 flex items-center justify-center mb-6">
|
||
<svg className="w-8 h-8 stroke-[#D4AF37] fill-none" viewBox="0 0 24 24" strokeWidth="1.5">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
||
</svg>
|
||
</div>
|
||
|
||
<h3 className="font-serif-lux font-black text-white text-2xl mb-1 uppercase tracking-wider">
|
||
{t.enquiryActive}
|
||
</h3>
|
||
<p className="text-[#D4AF37] font-mono text-[10px] mb-6 uppercase tracking-widest font-bold">
|
||
{t.ambassadorActive}
|
||
</p>
|
||
|
||
<p className="text-white/60 text-xs leading-relaxed mb-8 font-medium">
|
||
{t.enquirySuccess}
|
||
</p>
|
||
|
||
<motion.button
|
||
className="w-full py-4.5 rounded-xl bg-[#D4AF37] hover:bg-white text-black font-bold text-[10px] tracking-[2px] uppercase cursor-pointer shadow-md shadow-[#D4AF37]/15"
|
||
whileHover={{ scale: 1.02 }}
|
||
whileTap={{ scale: 0.98 }}
|
||
onClick={() => setShowBookingModal(false)}
|
||
>
|
||
{t.dismiss}
|
||
</motion.button>
|
||
</motion.div>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
|
||
</div>
|
||
</>
|
||
);
|
||
}
|