1045 lines
52 KiB
TypeScript
1045 lines
52 KiB
TypeScript
"use client";
|
||
|
||
import { motion, AnimatePresence } from "framer-motion";
|
||
import { useState, useEffect } from "react";
|
||
import type { DemoData } from "@/data/demos";
|
||
|
||
const fadeUp = {
|
||
hidden: { opacity: 0, y: 35 },
|
||
show: { opacity: 1, y: 0, transition: { duration: 0.75, ease: [0.25, 0.46, 0.45, 0.94] as [number, number, number, number] } },
|
||
};
|
||
|
||
const stagger = {
|
||
hidden: {},
|
||
show: { transition: { staggerChildren: 0.08 } },
|
||
};
|
||
|
||
const translations = {
|
||
tr: {
|
||
navHeritage: "Mirasımız",
|
||
navSpecial: "Şefin Seçimi",
|
||
navBakery: "Günlük Ekmekler",
|
||
navServices: "Ayrıcalıklar",
|
||
navBooking: "Rezervasyon",
|
||
badge: "SIGNATURE STEAKHOUSE & GASTRONOMY",
|
||
heroTitlePart1: "Lezzet",
|
||
heroTitlePart2: "Sanatı & Ateşin",
|
||
heroTitlePart3: "Mirasımız",
|
||
heroDesc: "Ateş, duman ve Palermo zanaatkarlığıyla şekillenen lezzet dolu bir yolculuk. Karaköy limanında, seçkin gurmeler için özenle tasarlanan imza steakhouse koordinatları.",
|
||
learnMore: "Heritage Keşfet",
|
||
reserveTable: "Rezervasyon Yap",
|
||
heritageTitle: "Zanaat Hikayesi",
|
||
heritageHeader: "LEZZETİN ANATOMİSİ",
|
||
heritageDesc: "Karaköy limanının en eski taş duvarları arasında, Palermo'nun asırlık pişirme tekniklerini modern gastronomi vizyonuyla harmanlıyoruz. Ağır ateşte dinlendirilmiş Wagyu etlerinden, odun fırınında pişen taze ekşi mayalara uzanan bir tutku.",
|
||
specialTitle: "Şefin İmzası",
|
||
specialHeader: "HAFTALIK SPESİYALLER",
|
||
specialDesc: "Taze mevsim otları, el yapımı soslar ve meşe odununda dinlendirilmiş Wagyu lezzetlerini keşfedin.",
|
||
bakeryTitle: "Zanaat Fırınımız",
|
||
bakeryHeader: "GÜNLÜK EKŞİ MAYALAR",
|
||
bakeryDesc: "Her sabah 05:00'te taş fırınımızda maya kokusuyla başlayan hikaye. İtalyan unları, doğal ekşi maya ve 48 saatlik fermantasyon ile elde açılan eşsiz ekmekler.",
|
||
servicesTitle: "Ayrıcalıklarımız",
|
||
servicesHeader: "MİSAFİRLERİMİZ İÇİN PREMIUM SEÇENEKLER",
|
||
reviewsTitle: "Gurme Değerlendirmeleri",
|
||
reviewsHeader: "MİSAFİRLERİMİZİN DİLİNDEN HİKAYELER",
|
||
bookingTitle: "Masa Rezervasyonu",
|
||
bookingHeader: "REZERVASYON YAPIN",
|
||
bookingDesc: "Seçkin caz akustiği ve loş kehribar aydınlatmalı salonumuzda masanızı şimdiden ayırtın.",
|
||
fieldsName: "Ad Soyad",
|
||
fieldsPhone: "Telefon Numarası",
|
||
fieldsDate: "Randevu Tarihi",
|
||
fieldsTime: "Rezervasyon Saati",
|
||
fieldsGuests: "Kişi Sayısı",
|
||
fieldsNotes: "Özel İstek / Not",
|
||
fieldsNotesPlaceholder: "Diyet hassasiyetleri, VIP uşak talepleri, yıldönümü vb...",
|
||
dispatchForm: "REZERVASYON TALEBİNİ GÖNDER",
|
||
guarantee: "Bu formu doldurarak doğrulanmış bir rezervasyon sağlarsınız. Masalar, rezervasyon saatinden itibaren 15 dakika boyunca adınıza tutulur.",
|
||
footerDesc: "Geleneksel zanaat, ağır ateşte meşe odununda dinlendirilmiş imza Wagyu bonfileleri ve Palermo fırıncılık mirası.",
|
||
privacyRegs: "Gizlilik Sözleşmesi",
|
||
termsStay: "Kullanım Şartları",
|
||
dismiss: "KAPAT",
|
||
contactTitle: "Hızlı Rezervasyon",
|
||
contactDesc: "Karaköy salon koordinatörümüzün sizi hemen araması için bilgilerinizi bırakın.",
|
||
submit: "Gönder",
|
||
alacarteTitle: "À la Carte Deneyimi",
|
||
alacarteDesc: "Seçkin malzemelerle hazırlanan meşe odununda dinlendirilmiş Wagyu imza yemeklerimizi keşfedin.",
|
||
specialEventTitle: "Özel Kutlamalar",
|
||
specialEventDesc: "Doğum günü, evlilik yıldönümü ve kutlamalar için kişiselleştirilmiş şef menüleri.",
|
||
cateringTitle: "Kurumsal Akustik",
|
||
cateringDesc: "İş yemekleri ve kurumsal lansman organizasyonları için premium gurme catering hizmeti.",
|
||
deliveryTitle: "Tavola Evinizde",
|
||
deliveryDesc: "Özel korumalı kuryelerimizle en taze gurme lezzetleri kapınıza getiriyoruz.",
|
||
categoryTitle1: "Başlangıçlar",
|
||
categoryTitle2: "Ana Yemekler",
|
||
categoryTitle3: "Tatlılar",
|
||
|
||
// Menus Localized
|
||
menuHummus: "Ev Yapımı Hummus",
|
||
menuHummusDesc: "Fırından taze lavaş ve soğuk sıkım İtalyan trüf yağı ile.",
|
||
menuBruschetta: "Karidesli Bruschetta",
|
||
menuBruschettaDesc: "Taze marine domates, fesleğen ve sarımsak emülsiyonu.",
|
||
menuBurrata: "Burrata Salatası",
|
||
menuBurrataDesc: "Cherry domates, fesleğen sosu ve taze roka yaprakları.",
|
||
menuWagyu: "Wagyu Bonfile",
|
||
menuWagyuDesc: "Fırınlanmış kuşkonmaz ve trüf mantarlı patates püresi eşliğinde.",
|
||
menuLevrek: "Levrek Fileto",
|
||
menuLevrekDesc: "Limonlu tereyağı sosu, kapari ve taze bahçe otları.",
|
||
menuRisotto: "Mantar Risotto",
|
||
menuRisottoDesc: "Yabani orman mantarları ve Parmigiano Reggiano peyniri ile.",
|
||
menuBrule: "Crème Brûlée",
|
||
menuBruleDesc: "Gerçek Madagaskar vanilyası ve karamelize şeker kıtırı.",
|
||
menuFondant: "Çikolatalı Fondant",
|
||
menuFondantDesc: "Belçika çikolatası dolgulu sıcak kek, vanilyalı dondurma.",
|
||
menuKunefe: "Karaköy Künefesi",
|
||
menuKunefeDesc: "Halis tereyağlı çıtır tel kadayıf ve manda kaymağı.",
|
||
},
|
||
en: {
|
||
navHeritage: "Our Heritage",
|
||
navSpecial: "Chef's Specials",
|
||
navBakery: "Daily Bakery",
|
||
navServices: "Leisures",
|
||
navBooking: "Reservation",
|
||
badge: "SIGNATURE STEAKHOUSE & GASTRONOMY",
|
||
heroTitlePart1: "Crafting",
|
||
heroTitlePart2: "Flame & Steak",
|
||
heroTitlePart3: "Heritage",
|
||
heroDesc: "A journey of raw ingredients transformed by fire, smoke, and Palermo craftsmanship. Exquisite coordinates situated at Karaköy docks designed for refined palates.",
|
||
learnMore: "Explore Heritage",
|
||
reserveTable: "Reserve Table",
|
||
heritageTitle: "Heritage Narrative",
|
||
heritageHeader: "ANATOMY OF FLAVOR",
|
||
heritageDesc: "Surrounded by Karaköy's historical stone walls, we merge Palermo's ancient wood-fired baking roots with modern culinary vision. A passion spanning oak-aged Wagyu steaks and sourdough crusts.",
|
||
specialTitle: "Signature Cuts",
|
||
specialHeader: "WEEKLY CULINARY SPECS",
|
||
specialDesc: "Discover fresh orchard herbs, house-made sauces, and oak-fired Wagyu steak creations.",
|
||
bakeryTitle: "Chalkboard Bakery",
|
||
bakeryHeader: "DAILY SOURDOUGH BOULES",
|
||
bakeryDesc: "Every morning at 05:00 AM, our stone ovens fill with sourdough fragrance. Hand-stretched using premium Italian flour and 48-hour fermentation.",
|
||
servicesTitle: "Boutique Leisures",
|
||
servicesHeader: "PREMIUM SERVICES FOR REFINED GUESTS",
|
||
reviewsTitle: "Gourmet Diaries",
|
||
reviewsHeader: "LOVED BY GLOBAL WRITERS",
|
||
bookingTitle: "Table Booking",
|
||
bookingHeader: "SECURE RESERVATION",
|
||
bookingDesc: "Reserve your private velvet booth or live-cooking counter inside our acoustic jazz lounge.",
|
||
fieldsName: "Full Name",
|
||
fieldsPhone: "Phone Number",
|
||
fieldsDate: "Target Date",
|
||
fieldsTime: "Reservation Time",
|
||
fieldsGuests: "Guest Count",
|
||
fieldsNotes: "Bespoke Requests",
|
||
fieldsNotesPlaceholder: "Dietary restrictions, VIP butler dispatch, anniversary settings...",
|
||
dispatchForm: "SEND RESERVATION REQUEST",
|
||
guarantee: "Submitting this form registers a verified priority slot. Tables are held exactly for 15 minutes beyond the scheduled time.",
|
||
footerDesc: "Traditional craft, signature oak-aged Wagyu beef cuts, and Palermo baking heritage.",
|
||
privacyRegs: "Privacy Policy",
|
||
termsStay: "Terms of Service",
|
||
dismiss: "DISMISS",
|
||
contactTitle: "Quick Reservation",
|
||
contactDesc: "Leave your contact details and our salon representative will call you back immediately.",
|
||
submit: "Submit",
|
||
alacarteTitle: "À la Carte Gastronomy",
|
||
alacarteDesc: "Savor our signature oak-aged Wagyu ribeye cuts built with the finest local ingredients.",
|
||
specialEventTitle: "Bespoke Gatherings",
|
||
specialEventDesc: "Custom tasting menus and sommelier coordination for birthdays and private lounges.",
|
||
cateringTitle: "Corporate Acoustics",
|
||
cateringDesc: "Professional gourmet catering configurations for corporate launches and executive dinners.",
|
||
deliveryTitle: "Tavola at Home",
|
||
deliveryDesc: "Delivering hot gourmet culinary setups directly to your address via priority dispatch.",
|
||
categoryTitle1: "Appetizers",
|
||
categoryTitle2: "Main Courses",
|
||
categoryTitle3: "Desserts",
|
||
|
||
// Menus Localized
|
||
menuHummus: "House-Crafted Hummus",
|
||
menuHummusDesc: "Served with hot wood-fired flatbread and cold pressed truffle oil mist.",
|
||
menuBruschetta: "Shrimp Bruschetta",
|
||
menuBruschettaDesc: "Marinated cherry tomatoes, botanical basil, garlic emulsion.",
|
||
menuBurrata: "Creamy Burrata",
|
||
menuBurrataDesc: "Heirloom tomatoes, organic basil pesto, taze baby wild rocket.",
|
||
menuWagyu: "A5 Wagyu Ribeye",
|
||
menuWagyuDesc: "Accompanied by fire-charred asparagus and black truffle potato mash.",
|
||
menuLevrek: "Sea Bass Filet",
|
||
menuLevrekDesc: "Citrus butter reduction, capillary capers, and taze orchard herbs.",
|
||
menuRisotto: "Wild Mushroom Risotto",
|
||
menuRisottoDesc: "Foraged forest mushrooms, aged Parmigiano Reggiano, micro greens.",
|
||
menuBrule: "Crème Brûlée",
|
||
menuBruleDesc: "Infused with organic Madagascar vanilla and caramelized sugar crust.",
|
||
menuFondant: "Molten Lava Fondant",
|
||
menuFondantDesc: "Rich Belgian chocolate cake shell with house vanilla bean gelato.",
|
||
menuKunefe: "Traditional Künefe",
|
||
menuKunefeDesc: "Crisp shredded pastry loaded with melted unsalted cheese, thick buffalo cream.",
|
||
}
|
||
};
|
||
|
||
export default function RestoranTemplate({ data }: { data: DemoData }) {
|
||
const { firma, istatistikler = [], hizmetler = [], menu = [], yorumlar = [] } = data;
|
||
const [showBookingModal, setShowBookingModal] = useState(false);
|
||
const [aktifKategori, setAktifKategori] = useState(0);
|
||
const [lang, setLang] = useState<"tr" | "en">("tr");
|
||
const [preloader, setPreloader] = useState(true);
|
||
|
||
const t = translations[lang];
|
||
|
||
// Lenis Smooth Scroll Integration
|
||
useEffect(() => {
|
||
let lenis: any;
|
||
import("@studio-freight/lenis").then(({ default: Lenis }) => {
|
||
lenis = new Lenis({ duration: 1.2, easing: (x: number) => Math.min(1, 1.001 - Math.pow(2, -10 * x)) });
|
||
function raf(time: number) { lenis.raf(time); requestAnimationFrame(raf); }
|
||
requestAnimationFrame(raf);
|
||
});
|
||
return () => lenis?.destroy();
|
||
}, []);
|
||
|
||
// Preloader Curtain Timer
|
||
useEffect(() => {
|
||
const timer = setTimeout(() => {
|
||
setPreloader(false);
|
||
}, 1500);
|
||
return () => clearTimeout(timer);
|
||
}, []);
|
||
|
||
// Localized stats label mappings
|
||
const getLocalizedStatLabel = (deger: string) => {
|
||
if (deger.includes("Heritage")) return lang === "tr" ? "Yıllık Köklü Miras" : "Years of Heritage";
|
||
if (deger.includes("Dishes")) return lang === "tr" ? "İmza Tabaklar" : "Signature Dishes";
|
||
if (deger.includes("Rating")) return lang === "tr" ? "Ortalama Değerlendirme" : "Average Guest Rating";
|
||
return lang === "tr" ? "Aylık Gurme Misafir" : "Monthly Diners";
|
||
};
|
||
|
||
// Localized services text mappings
|
||
const getLocalizedServiceText = (baslik: string) => {
|
||
if (baslik.includes("Carte")) return { title: t.alacarteTitle, desc: t.alacarteDesc };
|
||
if (baslik.includes("Günler")) return { title: t.specialEventTitle, desc: t.specialEventDesc };
|
||
if (baslik.includes("Kurumsal")) return { title: t.cateringTitle, desc: t.cateringDesc };
|
||
return { title: t.deliveryTitle, desc: t.deliveryDesc };
|
||
};
|
||
|
||
// Custom vector icons for services (No generic emojis)
|
||
const getServiceIconSvg = (ikon: string) => {
|
||
switch (ikon) {
|
||
case "alacarte":
|
||
return (
|
||
<svg className="w-6 h-6 stroke-[#C5A880] fill-none" viewBox="0 0 24 24" strokeWidth="1.5">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" />
|
||
</svg>
|
||
);
|
||
case "special":
|
||
return (
|
||
<svg className="w-6 h-6 stroke-[#C5A880] fill-none" viewBox="0 0 24 24" strokeWidth="1.5">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" />
|
||
</svg>
|
||
);
|
||
case "catering":
|
||
return (
|
||
<svg className="w-6 h-6 stroke-[#C5A880] fill-none" viewBox="0 0 24 24" strokeWidth="1.5">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
|
||
</svg>
|
||
);
|
||
default:
|
||
return (
|
||
<svg className="w-6 h-6 stroke-[#C5A880] fill-none" viewBox="0 0 24 24" strokeWidth="1.5">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M8.25 18.75a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM19.5 18.75a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" />
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
|
||
</svg>
|
||
);
|
||
}
|
||
};
|
||
|
||
// Localized menu items
|
||
const getLocalizedMenuItemText = (ad: string) => {
|
||
if (ad.includes("Hummus")) return { title: t.menuHummus, desc: t.menuHummusDesc };
|
||
if (ad.includes("Bruschetta")) return { title: t.menuBruschetta, desc: t.menuBruschettaDesc };
|
||
if (ad.includes("Burrata")) return { title: t.menuBurrata, desc: t.menuBurrataDesc };
|
||
if (ad.includes("Wagyu")) return { title: t.menuWagyu, desc: t.menuWagyuDesc };
|
||
if (ad.includes("Levrek")) return { title: t.menuLevrek, desc: t.menuLevrekDesc };
|
||
if (ad.includes("Risotto")) return { title: t.menuRisotto, desc: t.menuRisottoDesc };
|
||
if (ad.includes("Brûlée")) return { title: t.menuBrule, desc: t.menuBruleDesc };
|
||
if (ad.includes("Fondant")) return { title: t.menuFondant, desc: t.menuFondantDesc };
|
||
return { title: t.menuKunefe, desc: t.menuKunefeDesc };
|
||
};
|
||
|
||
const getLocalizedCategoryTitle = (kategori: string) => {
|
||
if (kategori.includes("Başlangıç")) return t.categoryTitle1;
|
||
if (kategori.includes("Ana")) return t.categoryTitle2;
|
||
return t.categoryTitle3;
|
||
};
|
||
|
||
const css = `
|
||
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Inter:wght@300;400;500;600;700;800&display=swap');
|
||
|
||
:root {
|
||
--color-restaurant-gold: #C5A880;
|
||
--color-restaurant-charcoal: #090A0C;
|
||
--color-restaurant-slate: #13151A;
|
||
}
|
||
|
||
.font-serif-editorial {
|
||
font-family: 'Playfair Display', Georgia, serif;
|
||
}
|
||
|
||
.font-sans-clean {
|
||
font-family: 'Inter', sans-serif;
|
||
}
|
||
|
||
.shadow-premium {
|
||
box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.4);
|
||
}
|
||
|
||
.grain-overlay {
|
||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.025'/%3E%3C/svg%3E");
|
||
}
|
||
|
||
.marquee-text-flow {
|
||
white-space: nowrap;
|
||
animation: marquee 25s linear infinite;
|
||
}
|
||
|
||
@keyframes marquee {
|
||
0% { transform: translateX(0%); }
|
||
100% { transform: translateX(-50%); }
|
||
}
|
||
|
||
.hero-title-clamp {
|
||
font-size: clamp(38px, 6vw, 90px);
|
||
letter-spacing: -0.01em;
|
||
line-height: 0.95;
|
||
}
|
||
`;
|
||
|
||
return (
|
||
<>
|
||
<style>{css}</style>
|
||
|
||
{/* ── IMZA AN: CURTAIN REVEAL PRELOADER ── */}
|
||
<AnimatePresence>
|
||
{preloader && (
|
||
<motion.div
|
||
className="fixed inset-0 z-50 bg-[#090A0C] 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-sans-clean font-black tracking-[4px] uppercase text-[#C5A880] block"
|
||
initial={{ opacity: 0, y: 10 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5 }}
|
||
>
|
||
LEZZET MUTFAĞI
|
||
</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-[#C5A880]"
|
||
initial={{ width: "0%" }}
|
||
animate={{ width: "100%" }}
|
||
transition={{ duration: 1.2, ease: "easeInOut" }}
|
||
/>
|
||
</div>
|
||
<motion.h2
|
||
className="font-serif-editorial text-white/50 text-xs italic tracking-wider"
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ delay: 0.4, duration: 0.5 }}
|
||
>
|
||
interactive prototype
|
||
</motion.h2>
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
|
||
<div className="bg-[#090A0C] text-white min-h-screen font-sans-clean selection:bg-[#C5A880] selection:text-black overflow-hidden relative pb-20">
|
||
|
||
{/* Grain texture */}
|
||
<div className="absolute inset-0 grain-overlay pointer-events-none z-0" />
|
||
|
||
{/* Ambient glow blobs */}
|
||
<div className="absolute top-[15%] right-[-15%] w-[600px] h-[600px] bg-[#C5A880]/3 blur-[120px] rounded-full pointer-events-none z-0" />
|
||
<div className="absolute bottom-[20%] left-[-15%] w-[600px] h-[600px] bg-white/2 blur-[130px] rounded-full pointer-events-none z-0" />
|
||
|
||
{/* ── FLOATING CONCEPT BANNER ── */}
|
||
<div className="fixed bottom-4 left-4 z-40 bg-[#090A0C]/90 backdrop-blur-md border border-white/10 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-[#C5A880] animate-pulse" />
|
||
<span className="text-[9px] font-sans-clean 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>
|
||
|
||
{/* ── 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.85, ease: [0.16, 1, 0.3, 1] }}
|
||
>
|
||
<div className="mx-auto max-w-7xl h-20 flex items-center justify-between px-8 bg-[#090A0C]/80 backdrop-blur-xl border border-white/5 rounded-2xl shadow-2xl">
|
||
{/* Logo */}
|
||
<a href="#" className="flex items-center gap-2.5 group">
|
||
<span className="text-xl font-bold tracking-[2px] text-white group-hover:text-[#C5A880] transition-colors font-serif-editorial uppercase">
|
||
{firma.adi}
|
||
</span>
|
||
</a>
|
||
|
||
{/* Links */}
|
||
<nav className="hidden lg:flex items-center gap-8">
|
||
{[
|
||
{ label: t.navHeritage, href: "#heritage" },
|
||
{ label: t.navSpecial, href: "#special" },
|
||
{ label: t.navBakery, href: "#bakery" },
|
||
{ label: t.navServices, href: "#services" }
|
||
].map(item => (
|
||
<a
|
||
key={item.label}
|
||
href={item.href}
|
||
className="text-[10px] font-black tracking-[2px] uppercase text-white/60 hover:text-[#C5A880] transition-colors relative py-1 cursor-pointer group"
|
||
>
|
||
{item.label}
|
||
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#C5A880] transition-all group-hover:w-full" />
|
||
</a>
|
||
))}
|
||
</nav>
|
||
|
||
{/* Language Selector + Reserve 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-sans-clean font-black px-2 py-1.5 rounded-lg transition-all cursor-pointer ${
|
||
lang === "tr" ? "bg-white text-slate-900 shadow-sm" : "text-white/60 hover:text-white"
|
||
}`}
|
||
>
|
||
TR
|
||
</button>
|
||
<button
|
||
onClick={() => setLang("en")}
|
||
className={`text-[9px] font-sans-clean font-black px-2 py-1.5 rounded-lg transition-all cursor-pointer ${
|
||
lang === "en" ? "bg-white text-slate-900 shadow-sm" : "text-white/60 hover:text-white"
|
||
}`}
|
||
>
|
||
EN
|
||
</button>
|
||
</div>
|
||
|
||
<motion.button
|
||
onClick={() => setShowBookingModal(true)}
|
||
className="text-[10px] font-sans-clean font-black tracking-[2.5px] uppercase text-black bg-[#C5A880] hover:bg-[#d5b990] px-6 py-3.5 rounded-xl transition-all cursor-pointer shadow-[0_4px_12px_rgba(197,168,128,0.15)] hidden sm:block"
|
||
whileHover={{ scale: 1.02 }}
|
||
whileTap={{ scale: 0.98 }}
|
||
>
|
||
{t.reserveTable}
|
||
</motion.button>
|
||
</div>
|
||
</div>
|
||
</motion.header>
|
||
|
||
{/* ── HERO SECTION WITH EDITORIAL BACKGROUND zoom ── */}
|
||
<section className="relative min-h-screen flex items-center justify-center px-6">
|
||
<div className="absolute inset-0 z-0 overflow-hidden pointer-events-none">
|
||
<div className="absolute inset-0 bg-[#090A0C]/75 z-10" />
|
||
<motion.img
|
||
src="/restaurant_hero_steak.png"
|
||
alt="Ribeye Steak cooking"
|
||
className="w-full h-full object-cover object-center scale-102"
|
||
initial={{ scale: 1.02 }}
|
||
animate={{ scale: 1.06 }}
|
||
transition={{ duration: 15, repeat: Infinity, repeatType: "reverse", ease: "easeInOut" }}
|
||
/>
|
||
</div>
|
||
|
||
<div className="max-w-5xl mx-auto w-full z-10 text-center">
|
||
<motion.div
|
||
variants={stagger}
|
||
initial="hidden"
|
||
animate="show"
|
||
className="flex flex-col items-center"
|
||
>
|
||
<motion.div
|
||
variants={fadeUp}
|
||
className="inline-flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-[#C5A880] mb-6 bg-[#C5A880]/10 border border-[#C5A880]/15 px-4 py-2 rounded-full"
|
||
>
|
||
<span className="w-1.5 h-1.5 rounded-full bg-[#C5A880] animate-pulse" />
|
||
{t.badge}
|
||
</motion.div>
|
||
|
||
<motion.h1
|
||
variants={fadeUp}
|
||
className="font-serif-editorial font-bold text-white mb-8 uppercase hero-title-clamp"
|
||
>
|
||
{t.heroTitlePart1}
|
||
<br />
|
||
<span className="italic font-light text-[#C5A880] lowercase">{t.heroTitlePart2}</span>
|
||
<br />
|
||
{t.heroTitlePart3}
|
||
</motion.h1>
|
||
|
||
<motion.p
|
||
variants={fadeUp}
|
||
className="text-[#8E929A] font-sans-clean font-semibold text-xs lg:text-sm leading-relaxed max-w-lg mb-12"
|
||
>
|
||
{t.heroDesc}
|
||
</motion.p>
|
||
|
||
<motion.div variants={fadeUp} className="flex gap-4">
|
||
<button
|
||
onClick={() => setShowBookingModal(true)}
|
||
className="px-8 py-4.5 rounded-xl bg-[#C5A880] hover:bg-[#d5b990] text-[#090A0C] font-black text-[10px] tracking-[2px] uppercase transition-all shadow-[0_5px_15px_rgba(197,168,128,0.2)] cursor-pointer"
|
||
>
|
||
{t.reserveTable}
|
||
</button>
|
||
<a
|
||
href="#heritage"
|
||
className="px-8 py-4.5 rounded-xl border border-white/10 bg-white/5 hover:bg-white/10 text-white font-black text-[10px] tracking-[2px] uppercase transition-all cursor-pointer flex items-center justify-center"
|
||
>
|
||
{t.learnMore}
|
||
</a>
|
||
</motion.div>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── IMZA AN: INFINITE MARQUEE BAND ── */}
|
||
<div className="w-full bg-[#13151A] border-y border-[#C5A880]/20 py-5 overflow-hidden z-10 relative">
|
||
<div className="flex marquee-text-flow uppercase font-serif-editorial text-xs tracking-[4px] text-[#C5A880] font-bold">
|
||
<span className="px-4">{lang === "tr" ? "Lezzet Mutfağı Karaköy" : "Karaköy Culinary Heritage"} ·</span>
|
||
<span className="px-4">{lang === "tr" ? "İmza Steakhouse ve Gastronomi" : "Signature Wagyu Steak cuts"} ·</span>
|
||
<span className="px-4">{lang === "tr" ? "Geleneksel Pişirme Teknikleri" : "Wood-Fired Fermented Sourdough"} ·</span>
|
||
<span className="px-4">{lang === "tr" ? "Palermo Zanaat Kültürü" : "Palermo Baking Roots"} ·</span>
|
||
|
||
<span className="px-4">{lang === "tr" ? "Lezzet Mutfağı Karaköy" : "Karaköy Culinary Heritage"} ·</span>
|
||
<span className="px-4">{lang === "tr" ? "İmza Steakhouse ve Gastronomi" : "Signature Wagyu Steak cuts"} ·</span>
|
||
<span className="px-4">{lang === "tr" ? "Geleneksel Pişirme Teknikleri" : "Wood-Fired Fermented Sourdough"} ·</span>
|
||
<span className="px-4">{lang === "tr" ? "Palermo Zanaat Kültürü" : "Palermo Baking Roots"} ·</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* ── SECTION 2: HERITAGE / ABOUT US (3 COLUMN SPLIT) ── */}
|
||
<section id="heritage" className="py-32 bg-[#090A0C] relative z-10 px-6">
|
||
<div className="max-w-7xl mx-auto">
|
||
|
||
<div className="grid lg:grid-cols-12 gap-16 items-center">
|
||
|
||
{/* Left text column */}
|
||
<motion.div
|
||
className="lg:col-span-6"
|
||
initial="hidden"
|
||
whileInView="show"
|
||
viewport={{ once: true }}
|
||
variants={stagger}
|
||
>
|
||
<motion.span
|
||
variants={fadeUp}
|
||
className="inline-block text-[10px] font-black uppercase tracking-widest text-[#C5A880] mb-4"
|
||
>
|
||
{t.heritageTitle}
|
||
</motion.span>
|
||
<motion.h2
|
||
variants={fadeUp}
|
||
className="font-serif-editorial text-4xl lg:text-5xl font-black tracking-widest text-white mb-6 uppercase"
|
||
>
|
||
{t.heritageHeader}
|
||
</motion.h2>
|
||
<motion.p
|
||
variants={fadeUp}
|
||
className="text-white/60 font-sans-clean text-xs lg:text-sm leading-relaxed font-semibold mb-10"
|
||
>
|
||
{t.heritageDesc}
|
||
</motion.p>
|
||
|
||
{/* Stat pile inside heritage */}
|
||
<motion.div
|
||
variants={fadeUp}
|
||
className="grid grid-cols-2 gap-6 mb-8 font-semibold"
|
||
>
|
||
{istatistikler.map((stat, sIdx) => (
|
||
<div key={sIdx} className="border-l border-[#C5A880]/30 pl-4 py-1">
|
||
<h4 className="font-serif-editorial font-bold text-white text-lg leading-none mb-1">{stat.deger}</h4>
|
||
<p className="text-white/40 text-[10px] uppercase tracking-wider">{getLocalizedStatLabel(stat.etiket)}</p>
|
||
</div>
|
||
))}
|
||
</motion.div>
|
||
</motion.div>
|
||
|
||
{/* Right layered imagery column */}
|
||
<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-[460px] lg:h-[530px] rounded-3xl overflow-hidden shadow-2xl border border-white/5 group"
|
||
initial={{ opacity: 0, scale: 0.95 }}
|
||
whileInView={{ opacity: 1, scale: 1 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.8 }}
|
||
>
|
||
<div className="absolute inset-0 bg-black/10 z-10" />
|
||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||
<img
|
||
src="/chef_plating_smoke.png"
|
||
alt="Chef Plating Wagyu Ribeye"
|
||
className="w-full h-full object-cover scale-102 group-hover:scale-105 transition-transform duration-1000"
|
||
/>
|
||
</motion.div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── SECTION 3: ŞEFİN SEÇİMİ (DOTTED MENU GRID) ── */}
|
||
<section id="special" className="py-32 bg-[#13151A] border-t border-[#C5A880]/15 relative z-10 px-6">
|
||
<div className="max-w-7xl mx-auto">
|
||
|
||
<div className="grid lg:grid-cols-12 gap-16 items-center">
|
||
|
||
{/* Left Col: Gourmet active sauté shot */}
|
||
<div className="lg:col-span-6 relative flex justify-center lg:justify-start">
|
||
<motion.div
|
||
className="relative w-full max-w-md lg:max-w-lg h-[460px] lg:h-[530px] rounded-3xl overflow-hidden shadow-2xl border border-[#C5A880]/20 group"
|
||
initial={{ opacity: 0, x: -30 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.8 }}
|
||
>
|
||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent z-10 pointer-events-none" />
|
||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||
<img
|
||
src="/gourmet_pasta_flame.png"
|
||
alt="Flaming Gourmet sauté preparation"
|
||
className="w-full h-full object-cover scale-102 group-hover:scale-105 transition-transform duration-1000"
|
||
/>
|
||
{/* Small tag inside photo */}
|
||
<div className="absolute bottom-6 left-6 right-6 z-20 bg-[#090A0C]/90 backdrop-blur-md p-5 rounded-2xl border border-white/5 flex justify-between items-center">
|
||
<div>
|
||
<h4 className="font-serif-editorial text-[#C5A880] text-xs font-bold uppercase tracking-wider mb-1">Flaming sauté</h4>
|
||
<p className="text-white/60 text-[9px] font-sans-clean font-bold tracking-widest uppercase">Live from karaköy kitchen</p>
|
||
</div>
|
||
<span className="w-9 h-9 rounded-full bg-[#C5A880]/10 border border-[#C5A880]/30 flex items-center justify-center text-white shrink-0 select-none">🔥</span>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
|
||
{/* Right Col: The Dotted Menu List */}
|
||
<motion.div
|
||
className="lg:col-span-6"
|
||
initial="hidden"
|
||
whileInView="show"
|
||
viewport={{ once: true }}
|
||
variants={stagger}
|
||
>
|
||
<motion.span
|
||
variants={fadeUp}
|
||
className="inline-block text-[10px] font-black uppercase tracking-widest text-[#C5A880] mb-4"
|
||
>
|
||
{t.specialTitle}
|
||
</motion.span>
|
||
<motion.h2
|
||
variants={fadeUp}
|
||
className="font-serif-editorial text-4xl lg:text-5xl font-black tracking-widest text-white mb-6 uppercase"
|
||
>
|
||
{t.specialHeader}
|
||
</motion.h2>
|
||
<motion.p
|
||
variants={fadeUp}
|
||
className="text-white/60 font-sans-clean text-xs leading-relaxed font-semibold mb-12 max-w-md"
|
||
>
|
||
{t.specialDesc}
|
||
</motion.p>
|
||
|
||
{/* Dotted lines menu item lists */}
|
||
<div className="space-y-6">
|
||
{menu[aktifKategori]?.urunler.map((item) => {
|
||
const text = getLocalizedMenuItemText(item.ad);
|
||
return (
|
||
<motion.div
|
||
key={item.ad}
|
||
variants={fadeUp}
|
||
className="flex flex-col group cursor-default"
|
||
>
|
||
<div className="flex items-end justify-between gap-4">
|
||
<span className="font-serif-editorial text-sm lg:text-base font-bold text-white group-hover:text-[#C5A880] transition-colors uppercase">
|
||
{text.title}
|
||
</span>
|
||
<div className="grow border-b border-dashed border-white/10 group-hover:border-[#C5A880]/30 transition-colors mx-2 mb-1.5" />
|
||
<span className="font-serif-editorial text-sm font-black text-[#C5A880] shrink-0 font-bold">
|
||
{item.fiyat}
|
||
</span>
|
||
</div>
|
||
<p className="text-white/50 text-[10px] mt-1 font-semibold leading-relaxed max-w-md">
|
||
{text.desc}
|
||
</p>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
{/* Menu categories tabs */}
|
||
<motion.div
|
||
variants={fadeUp}
|
||
className="flex items-center gap-4 mt-12 flex-wrap"
|
||
>
|
||
{menu.map((kat, idx) => (
|
||
<button
|
||
key={idx}
|
||
onClick={() => setAktifKategori(idx)}
|
||
className="text-[9px] font-sans-clean font-black tracking-[2px] uppercase px-5 py-3 rounded-lg border transition-all cursor-pointer"
|
||
style={aktifKategori === idx
|
||
? { backgroundColor: "#C5A880", color: "#090A0C", borderColor: "#C5A880" }
|
||
: { backgroundColor: "transparent", color: "rgba(255,255,255,0.4)", borderColor: "rgba(255,255,255,0.1)" }
|
||
}
|
||
>
|
||
{getLocalizedCategoryTitle(kat.kategori)}
|
||
</button>
|
||
))}
|
||
</motion.div>
|
||
</motion.div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── SECTION 4: CHALKBOARD BAKERY ── */}
|
||
<section id="bakery" className="py-32 bg-[#090A0C] border-t border-[#C5A880]/15 relative z-10 px-6">
|
||
<div className="max-w-7xl mx-auto">
|
||
|
||
<div className="grid lg:grid-cols-12 gap-16 items-center">
|
||
|
||
{/* Left Side: Sourdough Details */}
|
||
<motion.div
|
||
className="lg:col-span-6"
|
||
initial="hidden"
|
||
whileInView="show"
|
||
viewport={{ once: true }}
|
||
variants={stagger}
|
||
>
|
||
<motion.span
|
||
variants={fadeUp}
|
||
className="inline-block text-[10px] font-black uppercase tracking-widest text-[#C5A880] mb-4"
|
||
>
|
||
{t.bakeryTitle}
|
||
</motion.span>
|
||
<motion.h2
|
||
variants={fadeUp}
|
||
className="font-serif-editorial text-4xl lg:text-5xl font-black tracking-widest text-white mb-6 uppercase"
|
||
>
|
||
{t.bakeryHeader}
|
||
</motion.h2>
|
||
<motion.p
|
||
variants={fadeUp}
|
||
className="text-white/60 font-sans-clean text-xs lg:text-sm leading-relaxed font-semibold mb-10 max-w-md"
|
||
>
|
||
{t.bakeryDesc}
|
||
</motion.p>
|
||
|
||
{/* Sourdough Boule metrics */}
|
||
<div className="space-y-4 font-semibold">
|
||
{[
|
||
{ title: lang === "tr" ? "Geleneksel İtalyan Ciabatta" : "Traditional Italian Ciabatta", desc: "1250g | 45 min | 230°C", body: lang === "tr" ? "Altın çıtır kabuklu, bol gözenekli Palermo klasiği." : "Gold crispy crust, high hydration classic boules." },
|
||
{ title: lang === "tr" ? "Çavdar Sourdough Boule" : "Rye Sourdough Boule", desc: "750g | 38 min | 240°C", body: lang === "tr" ? "Aktif karbon, çavdar ve özel ekşi maya ile pişirilmiş tahıllı ekmek." : "Baked with active charcoal, organic rye, and local sourdough." }
|
||
].map((bread, bIdx) => (
|
||
<motion.div
|
||
key={bIdx}
|
||
variants={fadeUp}
|
||
className="p-5 bg-white/5 border border-white/5 rounded-2xl hover:border-[#C5A880]/20 transition-all duration-300"
|
||
>
|
||
<div className="flex justify-between items-start flex-wrap gap-2">
|
||
<h4 className="font-serif-editorial text-[#C5A880] text-sm font-bold uppercase tracking-wider">{bread.title}</h4>
|
||
<span className="font-sans-clean text-[9px] text-white/40 uppercase tracking-widest font-black">{bread.desc}</span>
|
||
</div>
|
||
<p className="text-white/50 text-[10px] leading-relaxed mt-2">{bread.body}</p>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Right Side: Flatlay image */}
|
||
<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-[460px] lg:h-[530px] rounded-3xl overflow-hidden shadow-2xl border border-white/5 group"
|
||
initial={{ opacity: 0, scale: 0.95 }}
|
||
whileInView={{ opacity: 1, scale: 1 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.8 }}
|
||
>
|
||
<div className="absolute inset-0 bg-black/10 z-10" />
|
||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||
<img
|
||
src="/bakery_heritage.png"
|
||
alt="Sourdough flatlay chalkboard"
|
||
className="w-full h-full object-cover scale-102 group-hover:scale-105 transition-transform duration-1000"
|
||
/>
|
||
</motion.div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── SECTION 5: SERVICES (SVG ICONS - NO EMOJIS) ── */}
|
||
<section id="services" className="py-32 bg-[#13151A] border-t border-[#C5A880]/15 relative z-10 px-6">
|
||
<div className="max-w-7xl mx-auto">
|
||
|
||
<div className="text-center mb-20">
|
||
<span className="text-[#C5A880] font-serif-editorial italic text-base tracking-wider block mb-3">{t.servicesTitle}</span>
|
||
<h2 className="font-serif-editorial text-3xl lg:text-4xl font-black tracking-widest text-white uppercase">
|
||
{t.servicesHeader}
|
||
</h2>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-4 gap-6">
|
||
{hizmetler.map((h, i) => {
|
||
const s = getLocalizedServiceText(h.baslik);
|
||
return (
|
||
<motion.div
|
||
key={i}
|
||
className="bg-[#090A0C] rounded-2xl p-8 border border-white/5 hover:border-[#C5A880]/30 hover:bg-[#090A0C]/80 transition-all duration-300 flex flex-col items-center text-center group cursor-default"
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.5, delay: i * 0.1 }}
|
||
whileHover={{ y: -4 }}
|
||
>
|
||
<div className="w-14 h-14 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center mb-6 transition-all group-hover:bg-[#C5A880]/10 group-hover:border-[#C5A880]/30">
|
||
{getServiceIconSvg(h.ikon)}
|
||
</div>
|
||
<h3 className="font-serif-editorial font-bold text-white text-sm mb-3 uppercase tracking-wider leading-snug">
|
||
{s.title}
|
||
</h3>
|
||
<p className="text-[#8E929A] font-sans-clean text-[10px] leading-relaxed font-semibold">
|
||
{s.desc}
|
||
</p>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── SECTION 6: TESTIMONIALS (YORUMLAR) ── */}
|
||
<section id="yorumlar" className="py-32 bg-[#090A0C] border-t border-[#C5A880]/15 px-6 relative z-10">
|
||
<div className="max-w-7xl mx-auto">
|
||
|
||
<div className="text-center mb-20">
|
||
<span className="text-[#C5A880] font-serif-editorial italic text-base tracking-wider block mb-3">{t.reviewsTitle}</span>
|
||
<h2 className="font-serif-editorial text-3xl lg:text-4xl font-black tracking-widest text-white uppercase">
|
||
{t.reviewsHeader}
|
||
</h2>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-3 gap-6">
|
||
{yorumlar.map((y, i) => (
|
||
<motion.div
|
||
key={i}
|
||
className="bg-[#13151A] border border-[#C5A880]/10 rounded-2xl p-8 flex flex-col justify-between"
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.5, delay: i * 0.1 }}
|
||
whileHover={{ y: -4, borderColor: "rgba(197,168,128,0.3)" }}
|
||
>
|
||
<div className="flex gap-1 mb-6">
|
||
{[...Array(y.puan || 5)].map((_, j) => (
|
||
<svg key={j} className="w-4 h-4 fill-[#C5A880]" 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/80 font-sans-clean text-xs leading-relaxed italic mb-8 font-semibold">
|
||
“{y.yorum}”
|
||
</p>
|
||
|
||
<div className="flex items-center gap-3 font-semibold">
|
||
<div className="w-10 h-10 rounded-full border border-[#C5A880]/30 flex items-center justify-center text-lg bg-[#090A0C] shrink-0 select-none">
|
||
{y.emoji}
|
||
</div>
|
||
<div>
|
||
<h4 className="font-serif-editorial text-[#C5A880] text-xs font-bold uppercase tracking-wider">
|
||
{y.yazar.split("—")[0]}
|
||
</h4>
|
||
<span className="font-sans-clean text-[9px] text-white/40 uppercase tracking-widest font-black">
|
||
{y.tarih}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── SECTION 7: RANDEVU AL / RESERVATION ── */}
|
||
<section id="randevu" className="py-32 bg-[#13151A] border-t border-[#C5A880]/15 relative z-10 px-6">
|
||
<div className="max-w-3xl mx-auto">
|
||
|
||
<div className="bg-[#090A0C] rounded-3xl p-8 md:p-12 shadow-2xl border border-[#C5A880]/20">
|
||
<div className="text-center mb-10">
|
||
<span className="text-[#C5A880] font-serif-editorial italic text-base tracking-wider block mb-3">{t.bookingTitle}</span>
|
||
<h2 className="font-serif-editorial text-3xl md:text-4xl font-black tracking-widest text-white uppercase">
|
||
{t.bookingHeader}
|
||
</h2>
|
||
<p className="text-[#8E929A] font-sans-clean text-xs mt-2 leading-relaxed font-semibold">
|
||
{t.bookingDesc}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4 font-semibold text-[#C5A880]">
|
||
{[
|
||
{ label: t.fieldsName, placeholder: lang === "tr" ? "Adınız Soyadınız" : "Your Full Name", type: "text", full: false },
|
||
{ label: t.fieldsPhone, placeholder: "05xx xxx xx xx", type: "tel", full: false },
|
||
{ label: t.fieldsDate, placeholder: "", type: "date", full: false },
|
||
{ label: t.fieldsTime, placeholder: "", type: "time", full: false },
|
||
{ label: t.fieldsGuests, placeholder: "2", type: "number", full: false },
|
||
{ label: t.fieldsNotes, placeholder: t.fieldsNotesPlaceholder, type: "text", full: true },
|
||
].map((field, i) => (
|
||
<div key={i} className={field.full ? "col-span-2" : "col-span-2 sm:col-span-1"}>
|
||
<label className="block text-[9px] font-sans-clean font-black uppercase tracking-widest mb-1.5">{field.label}</label>
|
||
<input
|
||
type={field.type}
|
||
placeholder={field.placeholder}
|
||
className="w-full px-4 py-3.5 rounded-xl border border-white/10 bg-[#13151A] text-xs text-white focus:outline-none focus:ring-1 focus:ring-[#C5A880] placeholder-white/20 transition-all font-sans-clean font-semibold cursor-pointer"
|
||
/>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="mt-8 pt-4 flex flex-col md:flex-row justify-between items-center gap-4 border-t border-white/5">
|
||
<p className="text-white/40 text-[10px] leading-relaxed font-semibold max-w-sm 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 text-[#090A0C] font-sans-clean font-black tracking-[2px] uppercase bg-[#C5A880] hover:bg-[#d5b990] transition-colors cursor-pointer text-xs shrink-0 shadow-[0_5px_15px_rgba(197,168,128,0.15)]"
|
||
whileHover={{ scale: 1.02 }}
|
||
whileTap={{ scale: 0.98 }}
|
||
>
|
||
{t.dispatchForm}
|
||
</motion.button>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── FOOTER ── */}
|
||
<footer className="bg-[#090A0C] border-t border-white/5 px-6 pt-24 pb-8 relative z-10">
|
||
<div className="max-w-7xl mx-auto font-semibold">
|
||
|
||
<div className="grid md:grid-cols-4 gap-12 pb-16 border-b border-white/5">
|
||
<div className="md:col-span-2">
|
||
<span className="font-serif-editorial text-2xl font-black text-[#C5A880] tracking-widest uppercase mb-4 block">
|
||
{firma.adi}
|
||
</span>
|
||
<p className="text-[#8E929A] font-sans-clean text-xs leading-relaxed max-w-sm mb-8">
|
||
{firma.slogan} — {t.footerDesc}
|
||
</p>
|
||
<div className="text-white/60 font-sans-clean text-xs space-y-3">
|
||
<p className="flex items-center gap-2">📍 <span className="text-white/80">{firma.adres}</span></p>
|
||
<p className="flex items-center gap-2">📞 <span className="text-white/80">{firma.telefon}</span></p>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 className="font-serif-editorial text-white text-xs font-bold uppercase tracking-wider mb-6">
|
||
{lang === "tr" ? "Şefin Menüsü" : "Tasting Menu"}
|
||
</h4>
|
||
{menu.map((kat, idx) => (
|
||
<a
|
||
key={idx}
|
||
href="#special"
|
||
className="block text-[#8E929A] hover:text-[#C5A880] text-xs mb-3 transition-colors font-sans-clean uppercase tracking-wider"
|
||
>
|
||
{getLocalizedCategoryTitle(kat.kategori)}
|
||
</a>
|
||
))}
|
||
</div>
|
||
|
||
<div>
|
||
<h4 className="font-serif-editorial text-white text-xs font-bold uppercase tracking-wider mb-6">
|
||
{lang === "tr" ? "Karaköy Restoran" : "Karakoy Steakhouse"}
|
||
</h4>
|
||
{[t.navHeritage, t.navSpecial, t.navBakery, t.navServices].map(item => (
|
||
<a
|
||
key={item}
|
||
href="#"
|
||
className="block text-[#8E929A] hover:text-[#C5A880] text-xs mb-3 transition-colors font-sans-clean uppercase tracking-wider"
|
||
>
|
||
{item}
|
||
</a>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex flex-col md:flex-row justify-between items-center pt-8 gap-4 font-sans-clean text-white/30 text-xs">
|
||
<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 BOOKING OVERLAY MODAL ── */}
|
||
<AnimatePresence>
|
||
{showBookingModal && (
|
||
<motion.div
|
||
className="fixed inset-0 z-50 flex items-center justify-center p-6 bg-black/80 backdrop-blur-sm"
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
exit={{ opacity: 0 }}
|
||
>
|
||
<motion.div
|
||
className="bg-[#13151A] rounded-3xl p-8 max-w-md w-full relative shadow-2xl border border-[#C5A880]/30"
|
||
initial={{ scale: 0.95, y: 20 }}
|
||
animate={{ scale: 1, y: 0 }}
|
||
exit={{ scale: 0.95, y: 20 }}
|
||
>
|
||
<button
|
||
className="absolute top-6 right-6 w-8 h-8 rounded-full bg-white/5 flex items-center justify-center text-white/60 hover:text-white transition-colors cursor-pointer"
|
||
onClick={() => setShowBookingModal(false)}
|
||
>
|
||
✕
|
||
</button>
|
||
|
||
<h3 className="font-serif-editorial font-black text-white text-2xl mb-1 uppercase tracking-wider leading-none">
|
||
{t.contactTitle}
|
||
</h3>
|
||
<p className="text-[#8E929A] font-sans-clean text-[10px] mb-6 uppercase tracking-widest font-black">
|
||
{lang === "tr" ? "Karaköy Rezervasyon Hattı" : "Karakoy Booking Desk"}
|
||
</p>
|
||
|
||
<div className="space-y-4 font-semibold text-[#C5A880]">
|
||
<div>
|
||
<label className="block text-[9px] font-sans-clean font-black uppercase tracking-wider mb-1.5">{t.fieldsName}</label>
|
||
<input type="text" className="w-full px-4 py-3.5 rounded-xl border border-white/10 bg-[#090A0C] text-xs text-white focus:outline-none focus:ring-1 focus:ring-[#C5A880]" placeholder="John Doe" />
|
||
</div>
|
||
<div>
|
||
<label className="block text-[9px] font-sans-clean font-black uppercase tracking-wider mb-1.5">{t.fieldsPhone}</label>
|
||
<input type="tel" className="w-full px-4 py-3.5 rounded-xl border border-white/10 bg-[#090A0C] text-xs text-white focus:outline-none focus:ring-1 focus:ring-[#C5A880]" placeholder="05xx xxx xx xx" />
|
||
</div>
|
||
<motion.button
|
||
className="w-full py-4 rounded-xl bg-[#C5A880] text-[#090A0C] font-sans-clean font-black text-xs uppercase tracking-widest mt-4 cursor-pointer shadow-[0_4px_12px_rgba(197,168,128,0.15)]"
|
||
whileHover={{ scale: 1.02 }}
|
||
whileTap={{ scale: 0.98 }}
|
||
onClick={() => setShowBookingModal(false)}
|
||
>
|
||
{t.submit}
|
||
</motion.button>
|
||
</div>
|
||
</motion.div>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|