ss
This commit is contained in:
mstfyldz
@@ -0,0 +1,873 @@
|
||||
"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 } },
|
||||
};
|
||||
|
||||
interface DrinkSpec {
|
||||
name: string;
|
||||
desc: string;
|
||||
capacity: string;
|
||||
alcohol: string;
|
||||
relax: string;
|
||||
color: string;
|
||||
}
|
||||
|
||||
const translations = {
|
||||
tr: {
|
||||
navSpecials: "İmza Serisi",
|
||||
navReserve: "Etkinlik Planla",
|
||||
navFlights: "Tadım Serileri",
|
||||
navReviews: "Gurme Yorumları",
|
||||
scheduleCall: "Görüşme Planla",
|
||||
ultimateExp: "EŞSİZ KOKTEYL DENEYİMİ",
|
||||
dedicationTitle: "PROFESYONEL MİKSOLOJİ VE",
|
||||
dedicationTail: "EL YAPIMI BAĞLILIK",
|
||||
heroDesc: "Zanaatkar viski tadım uçuşları, kişisel miksoloji eğitimleri ve kurumsal atölye buluşmalarına dahil olun. Ham meşe ağacı ve oyma taş tezgahlar üzerinde hazırlanır.",
|
||||
scheduleCallBtn: "GÖRÜŞME AYARLA",
|
||||
artisanalSelections: "SANATSAL SEÇENEKLER",
|
||||
signatureLiquors: "İmza İksirler",
|
||||
chooseDrink: "FAVORİ İÇKİNİZİ SEÇİN",
|
||||
sliderDesc: "Ustalıkla hazırlanan reçetelerimizi inceleyin. Aktif hacim, alkol derecesi ve gevşeme oranlarını görüntüleyin.",
|
||||
capacity: "HACİM",
|
||||
alcohol: "ALKOL",
|
||||
relax: "GEVŞEME",
|
||||
barrelhouseEvents: "Fıçı Evi Etkinlikleri",
|
||||
featuredServices: "SEÇKİN HİZMETLER",
|
||||
learnMore: "DAHA FAZLA KEŞFET →",
|
||||
masterclassBooking: "Rezervasyon",
|
||||
scheduleEvent: "BİR ETKİNLİK PLANLAYIN",
|
||||
formDesc: "Viski tadım serileri veya miksoloji dersleri organize etmek için sommelier koordinatörümüzle iletişime geçin.",
|
||||
fieldsName: "İsim Soyisim",
|
||||
fieldsEmail: "E-Posta Adresi",
|
||||
fieldsPhone: "İrtibat Numarası",
|
||||
fieldsEvent: "Etkinlik Kategorisi",
|
||||
fieldsNotes: "Özel İstekler",
|
||||
fieldsNotesPlaceholder: "Aroma tercihleri veya VIP mihmandar gereksinimleri...",
|
||||
dispatchRequest: "ETKİNLİK TALEBİNİ GÖNDER",
|
||||
sommelierReviews: "Gurme Yorumları",
|
||||
happyGuests: "MİSAFİR DENEYİMLERİ",
|
||||
happyGuestsDesc: "Yıllanmış tek malt ve fıçı serisi tadım etkinliklerimiz hakkında ne yazdıklarını keşfedin.",
|
||||
artisanalDials: "SANATSAL SERİ",
|
||||
vipServices: "VIP HİZMETLER",
|
||||
privacyRegs: "Gizlilik Sözleşmesi",
|
||||
termsStay: "Fıçı Koşulları",
|
||||
dismiss: "KAPAT",
|
||||
enquiryActive: "TALEBİNİZ GÖNDERİLDİ",
|
||||
ambassadorActive: "Mihmandar Sommelier Aktif",
|
||||
enquirySuccess: "Özel fıçı evi tadım/etkinlik talebinizi başarıyla kaydettik. Sertifikalı mihmandarımız tadım parametrelerinizi kesinleştirmek için sizinle iletişime geçecektir. Teşekkürler!",
|
||||
},
|
||||
en: {
|
||||
navSpecials: "Specials",
|
||||
navReserve: "Book experience",
|
||||
navFlights: "Sommelier flights",
|
||||
navReviews: "Sommelier reviews",
|
||||
scheduleCall: "Schedule call",
|
||||
ultimateExp: "THE ULTIMATE COCKTAIL EXPERIENCE",
|
||||
dedicationTitle: "DEDICATION TO",
|
||||
dedicationTail: "PROFESSIONAL CRAFT & SPIRIT",
|
||||
heroDesc: "Indulge in artisanal whiskey flights, custom mixology, and corporate masterclass gatherings. Staged on heavy raw oak and carved stones.",
|
||||
scheduleCallBtn: "SCHEDULE A CALL",
|
||||
artisanalSelections: "ARTISANAL SELECTIONS",
|
||||
signatureLiquors: "Signature Liquors",
|
||||
chooseDrink: "CHOOSE FAVORITE DRINK",
|
||||
sliderDesc: "Cycle through our mastercraft recipes. Toggle active stats, proof, and relax levels.",
|
||||
capacity: "CAPACITY",
|
||||
alcohol: "ALCOHOL",
|
||||
relax: "RELAX",
|
||||
barrelhouseEvents: "Barrelhouse Events",
|
||||
featuredServices: "FEATURED SERVICES",
|
||||
learnMore: "LEARN MORE →",
|
||||
masterclassBooking: "Masterclass booking",
|
||||
scheduleEvent: "SCHEDULE AN EVENT",
|
||||
formDesc: "Connect with our sommelier coordinator to arrange whiskey flights or mixology classes.",
|
||||
fieldsName: "Name",
|
||||
fieldsEmail: "Email",
|
||||
fieldsPhone: "Phone",
|
||||
fieldsEvent: "Event Type",
|
||||
fieldsNotes: "Special notes",
|
||||
fieldsNotesPlaceholder: "Flavor preferences or VIP requirements...",
|
||||
dispatchRequest: "DISPATCH EVENT REQUEST",
|
||||
sommelierReviews: "Sommelier Reviews",
|
||||
happyGuests: "HAPPY GUESTS",
|
||||
happyGuestsDesc: "Hear what craft enthusiasts write about our private aged single malt coordinates.",
|
||||
artisanalDials: "ARTISANAL DIALS",
|
||||
vipServices: "VIP SERVICES",
|
||||
privacyRegs: "Privacy Regulations",
|
||||
termsStay: "Terms of Cask",
|
||||
dismiss: "DISMISS",
|
||||
enquiryActive: "EVENT DISPATCHED",
|
||||
ambassadorActive: "Barrelhouse Sommelier Active",
|
||||
enquirySuccess: "We have registered your private barrelhouse coordinate request. A certified somatic host will contact you shortly to confirm whiskey flights or mixology parameters. Thank you!",
|
||||
}
|
||||
};
|
||||
|
||||
export default function BarTemplate2({ data }: { data: DemoData }) {
|
||||
const { firma, istatistikler = [], hizmetler = [], yorumlar = [] } = data;
|
||||
const [showBookingModal, setShowBookingModal] = useState(false);
|
||||
const [activeDrink, setActiveDrink] = useState<number>(1); // Mai Tai active by default
|
||||
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);
|
||||
}, []);
|
||||
|
||||
const getLocalizedDrinks = () => {
|
||||
return [
|
||||
{
|
||||
name: lang === "tr" ? "Mojito" : "Mojito",
|
||||
desc: lang === "tr" ? "Taze beyaz Küba romu, el ezmesi nane yaprakları, organik misket limonu suyu, ham kamış şekeri ve soğuk maden suyu." : "Fresh white cuban rum, hand-crushed spearmint, organic lime juice reduction, raw cane sugar, chilled splash of soda.",
|
||||
capacity: "350ml",
|
||||
alcohol: "12%",
|
||||
relax: "80%",
|
||||
color: "#00E5FF"
|
||||
},
|
||||
{
|
||||
name: lang === "tr" ? "Mai Tai" : "Mai Tai",
|
||||
desc: lang === "tr" ? "Premium Jamaika kehribar romu, üç kez damıtılmış portakal likörü, organik badem şurubu ve taze sıkılmış misket limonu." : "Premium Jamaican amber rum, triple-distilled orange curaçao, organic almond orgeat syrup, fresh lime squeeze.",
|
||||
capacity: "280ml",
|
||||
alcohol: "18%",
|
||||
relax: "90%",
|
||||
color: "#FF9F00"
|
||||
},
|
||||
{
|
||||
name: lang === "tr" ? "Rum Cosmo" : "Rum Cosmo",
|
||||
desc: lang === "tr" ? "Fıçıda yıllanmış koyu rom, dağ kızılcığı infüzyonu, organik portakal likörü ve portakal yağı buğusu." : "Cask-aged dark rum, wild mountain cranberry infusion, organic triple sec, orange oil mist garnish.",
|
||||
capacity: "200ml",
|
||||
alcohol: "22%",
|
||||
relax: "95%",
|
||||
color: "#FF007A"
|
||||
}
|
||||
];
|
||||
};
|
||||
|
||||
const getLocalizedService = (baslik: string, aciklama: string) => {
|
||||
if (baslik.toLowerCase().includes("whiskey") || baslik.toLowerCase().includes("flight") || baslik.toLowerCase().includes("tadim")) {
|
||||
return {
|
||||
title: lang === "tr" ? "VİSKİ TADIM UÇUŞLARI" : "WHISKEY FLIGHTS",
|
||||
desc: lang === "tr" ? "Dünyanın en seçkin fıçılarından gelen yıllanmış tek malt ve burbon viski serilerinin özel sunumu." : aciklama
|
||||
};
|
||||
}
|
||||
if (baslik.toLowerCase().includes("mixology") || baslik.toLowerCase().includes("class") || baslik.toLowerCase().includes("ders")) {
|
||||
return {
|
||||
title: lang === "tr" ? "MİKSOLOJİ EĞİTİMLERİ" : "MIXOLOGY CLASSES",
|
||||
desc: lang === "tr" ? "Profesyonel barmenlerimiz eşliğinde kendi taze şuruplarınızı ve kokteyllerinizi yapmayı öğrenin." : aciklama
|
||||
};
|
||||
}
|
||||
return {
|
||||
title: lang === "tr" ? "ÖZEL KOKTEYL HİZMETİ" : "PRIVATE COCKTAIL CATERING",
|
||||
desc: lang === "tr" ? "Kurumsal lansmanlar, VIP davetler ve butik etkinlikler için özel miksoloji menüsü ve servis ekibi." : aciklama
|
||||
};
|
||||
};
|
||||
|
||||
const drinks = getLocalizedDrinks();
|
||||
|
||||
// Custom visual styles & Google Fonts for our Rustic Chalk & Char 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-char-red: #E63946;
|
||||
--color-char-slate: #111215;
|
||||
--color-char-card: #18191E;
|
||||
--color-text-white: #FCFAF7;
|
||||
--color-text-muted: rgba(252, 252, 247, 0.5);
|
||||
}
|
||||
|
||||
.font-industrial {
|
||||
font-family: 'Cormorant Garamond', Georgia, serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.font-sans-clean {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
}
|
||||
|
||||
.bg-mesh-char {
|
||||
background-image:
|
||||
radial-gradient(circle at 10% 20%, rgba(230, 57, 70, 0.04) 0%, transparent 45%),
|
||||
radial-gradient(circle at 90% 80%, rgba(229, 169, 0, 0.03) 0%, transparent 50%),
|
||||
linear-gradient(rgba(255, 255, 255, 0.005) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.005) 1px, transparent 1px);
|
||||
background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
|
||||
}
|
||||
|
||||
.crimson-glow {
|
||||
box-shadow: 0 0 20px rgba(230, 57, 70, 0.25);
|
||||
}
|
||||
|
||||
/* Pulse animation for CTA strip */
|
||||
.pulse-glow-crimson {
|
||||
animation: crimsonPulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes crimsonPulse {
|
||||
0% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.4); }
|
||||
70% { box-shadow: 0 0 0 12px rgba(230, 57, 70, 0); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0); }
|
||||
}
|
||||
|
||||
.hero-title-clamp {
|
||||
font-size: clamp(42px, 7.5vw, 100px);
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 0.95;
|
||||
}
|
||||
`;
|
||||
|
||||
return (
|
||||
<>
|
||||
<style>{css}</style>
|
||||
|
||||
{/* ── IMZA AN: CURTAIN REVEAL PRELOADER ── */}
|
||||
<AnimatePresence>
|
||||
{preloader && (
|
||||
<motion.div
|
||||
className="fixed inset-0 z-50 bg-[#111215] 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-[#E63946] block font-sans-clean"
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
CHAR BARRELHOUSE
|
||||
</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-[#E63946]"
|
||||
initial={{ width: "0%" }}
|
||||
animate={{ width: "100%" }}
|
||||
transition={{ duration: 1.2, ease: "easeInOut" }}
|
||||
/>
|
||||
</div>
|
||||
<motion.h2
|
||||
className="font-industrial text-white text-lg font-light tracking-wider"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 0.4, duration: 0.5 }}
|
||||
>
|
||||
barrel aged mixology
|
||||
</motion.h2>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* ── CHALK & CHAR BARRELHOUSE ── */}
|
||||
<div className="bg-[#111215] text-[#FCFAF7] min-h-screen font-sans-clean selection:bg-[#E63946] selection:text-white overflow-hidden relative bg-mesh-char pb-20">
|
||||
|
||||
{/* Floating Ambient Red Orbs */}
|
||||
<div className="absolute top-[15%] left-[-15%] w-[600px] h-[600px] bg-[#E63946]/4 blur-[130px] rounded-full pointer-events-none z-0" />
|
||||
<div className="absolute bottom-[15%] right-[-15%] w-[600px] h-[600px] bg-[#E5A900]/2 blur-[140px] rounded-full pointer-events-none z-0" />
|
||||
|
||||
{/* ── MANDATORY FLOATING DEMO BANNER ── */}
|
||||
<div className="fixed bottom-4 left-4 z-40 bg-[#18191E]/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-[#E63946] 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>
|
||||
|
||||
{/* ── HIGH CONTRAST 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-[#18191E]/95 backdrop-blur-xl border border-white/5 rounded-2xl shadow-[0_15px_30px_rgba(0,0,0,0.5)]">
|
||||
{/* Logo */}
|
||||
<a href="#" className="flex items-center gap-2 group">
|
||||
<span className="text-xl font-bold tracking-[1.5px] text-white font-industrial flex items-center gap-2.5 uppercase">
|
||||
<svg className="w-5 h-5 text-[#E63946]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M5 3l1.5 15.5a2 2 0 0 0 2 1.5h7a2 2 0 0 0 2-1.5L19 3H5Z" />
|
||||
<path d="M6 10h12" />
|
||||
</svg>
|
||||
{firma.adi}
|
||||
</span>
|
||||
</a>
|
||||
|
||||
{/* Navigation Links */}
|
||||
<nav className="hidden lg:flex items-center gap-8">
|
||||
{[
|
||||
{ label: t.navSpecials, href: "#drink-selector" },
|
||||
{ label: t.navReserve, href: "#booking-flow" },
|
||||
{ label: t.navFlights, href: "#experiences" },
|
||||
{ label: t.navReviews, href: "#testimonials" }
|
||||
].map(item => (
|
||||
<a
|
||||
key={item.label}
|
||||
href={item.href}
|
||||
className="text-[10px] font-bold tracking-[2px] uppercase text-[#FCFAF7]/70 hover:text-[#E63946] transition-colors relative py-1 cursor-pointer group"
|
||||
>
|
||||
{item.label}
|
||||
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#E63946] 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-[#E63946] text-white 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-[#E63946] text-white 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-white bg-[#E63946] hover:bg-white hover:text-black px-6 py-3.5 rounded-xl transition-all cursor-pointer shadow-[0_5px_15px_rgba(230,57,70,0.2)] hidden sm:block"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
{t.scheduleCall}
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.header>
|
||||
|
||||
{/* ── HERO SECTION ── */}
|
||||
<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: Heading and description */}
|
||||
<motion.div
|
||||
className="lg:col-span-7 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-[#E63946] mb-6 bg-[#E63946]/10 border border-[#E63946]/20 px-4 py-2 rounded-full"
|
||||
>
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-[#E63946]" />
|
||||
{t.ultimateExp}
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
variants={fadeUp}
|
||||
className="font-industrial text-white leading-[0.95] tracking-tight mb-6 uppercase hero-title-clamp"
|
||||
>
|
||||
{t.dedicationTitle}
|
||||
<br />
|
||||
<span className="text-[#E63946]">{t.dedicationTail}</span>
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
variants={fadeUp}
|
||||
className="text-white/60 text-xs lg:text-sm leading-relaxed max-w-xl mb-10 font-medium"
|
||||
>
|
||||
{t.heroDesc}
|
||||
</motion.p>
|
||||
|
||||
{/* Quick actions */}
|
||||
<motion.div variants={fadeUp} className="flex gap-4">
|
||||
<motion.button
|
||||
onClick={() => setShowBookingModal(true)}
|
||||
className="px-8 py-4 rounded-xl bg-[#E63946] hover:bg-white hover:text-black text-white font-bold text-[10px] tracking-[2px] uppercase transition-all shadow-[0_5px_15px_rgba(230,57,70,0.25)] cursor-pointer"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
>
|
||||
{t.scheduleCallBtn}
|
||||
</motion.button>
|
||||
<a
|
||||
href="#drink-selector"
|
||||
className="px-8 py-4 rounded-xl border border-white/10 bg-white/5 hover:bg-white/10 text-white font-bold text-[10px] tracking-[2px] uppercase transition-all cursor-pointer text-center"
|
||||
>
|
||||
{t.artisanalSelections}
|
||||
</a>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
{/* Right Column: High-fidelity image (steak/drink counter) */}
|
||||
<div className="lg:col-span-5 relative flex justify-center lg:justify-end">
|
||||
<motion.div
|
||||
className="relative w-full max-w-md lg:max-w-lg h-[400px] lg:h-[480px] rounded-3xl overflow-hidden shadow-2xl border border-white/5 group"
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.8, ease: "easeOut" }}
|
||||
>
|
||||
{/* Using 8k Chef Plating Smoke image to represent premium cask smoking counter */}
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src="/chef_plating_smoke.png"
|
||||
alt="Char Barrelhouse Cask-Aged Spirits Smoking Counter"
|
||||
className="w-full h-full object-cover scale-102 group-hover:scale-105 transition-transform duration-[4000ms]"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-50" />
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── ARTISANAL CAROUSEL SLIDER ── */}
|
||||
<section id="drink-selector" className="py-28 relative z-10 px-6 bg-[#18191E]/60 border-t border-white/5">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
|
||||
<div className="text-center max-w-xl mx-auto mb-20">
|
||||
<span className="text-[#E63946] font-bold text-xs uppercase tracking-widest block mb-2 font-industrial">{t.signatureLiquors}</span>
|
||||
<h2 className="font-industrial text-3xl lg:text-4xl font-black uppercase text-white">
|
||||
{t.chooseDrink}
|
||||
</h2>
|
||||
<p className="text-white/40 text-xs mt-2 font-medium">
|
||||
{t.sliderDesc}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Slider container */}
|
||||
<div className="grid lg:grid-cols-12 gap-12 items-center">
|
||||
|
||||
{/* Left Column: Drink Tabs & Specifications */}
|
||||
<div className="lg:col-span-7 space-y-8">
|
||||
{/* Tabs */}
|
||||
<div className="flex gap-3 flex-wrap">
|
||||
{drinks.map((d, dIdx) => (
|
||||
<button
|
||||
key={d.name}
|
||||
onClick={() => setActiveDrink(dIdx)}
|
||||
className={`px-6 py-3.5 rounded-xl border text-xs font-bold uppercase tracking-widest transition-all cursor-pointer ${
|
||||
activeDrink === dIdx
|
||||
? "bg-[#E63946] text-white border-[#E63946] shadow-[0_4px_12px_rgba(230,57,70,0.2)]"
|
||||
: "bg-white/[0.02] text-white/60 border-white/5 hover:border-white/10"
|
||||
}`}
|
||||
>
|
||||
{d.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Active Drink Info */}
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={activeDrink}
|
||||
initial={{ opacity: 0, y: 15 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -15 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="space-y-6"
|
||||
>
|
||||
<h3 className="font-industrial text-4xl font-black text-white uppercase tracking-wider">
|
||||
{drinks[activeDrink].name}
|
||||
</h3>
|
||||
<p className="text-white/60 text-xs lg:text-sm leading-relaxed max-w-xl font-medium">
|
||||
{drinks[activeDrink].desc}
|
||||
</p>
|
||||
|
||||
{/* Circular Dials Indicators */}
|
||||
<div className="grid grid-cols-3 gap-4 pt-6 max-w-md">
|
||||
|
||||
{/* Dial 1: Capacity */}
|
||||
<div className="bg-white/[0.02] border border-white/5 p-4 rounded-xl flex flex-col items-center text-center">
|
||||
<span className="text-[#FCFAF7] font-industrial text-xl font-bold">{drinks[activeDrink].capacity}</span>
|
||||
<span className="text-white/30 text-[9px] uppercase tracking-widest font-bold mt-1">{t.capacity}</span>
|
||||
</div>
|
||||
|
||||
{/* Dial 2: Alcohol */}
|
||||
<div className="bg-white/[0.02] border border-white/5 p-4 rounded-xl flex flex-col items-center text-center">
|
||||
<span className="text-[#E63946] font-industrial text-xl font-bold">{drinks[activeDrink].alcohol}</span>
|
||||
<span className="text-white/30 text-[9px] uppercase tracking-widest font-bold mt-1">{t.alcohol}</span>
|
||||
</div>
|
||||
|
||||
{/* Dial 3: Relax */}
|
||||
<div className="bg-white/[0.02] border border-white/5 p-4 rounded-xl flex flex-col items-center text-center">
|
||||
<span className="text-[#E5A900] font-industrial text-xl font-bold">{drinks[activeDrink].relax}</span>
|
||||
<span className="text-white/30 text-[9px] uppercase tracking-widest font-bold mt-1">{t.relax}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
{/* Right Column: Large closeup beverage display */}
|
||||
<div className="lg:col-span-5 relative flex justify-center lg:justify-end">
|
||||
<motion.div
|
||||
className="relative w-full max-w-xs h-[420px] 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.7 }}
|
||||
>
|
||||
{/* Using 8k lemon/citrus flatlay to represent fresh botanical drink prep */}
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src="/sicilia_lemon_heritage.png"
|
||||
alt="Fresh citrus botanic preparation"
|
||||
className="w-full h-full object-cover scale-102 group-hover:scale-105 transition-transform duration-[4000ms]"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-40" />
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── FEATURED EXPERIENCES ── */}
|
||||
<section id="experiences" className="py-28 relative z-10 px-6 bg-[#111215]">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
|
||||
<div className="text-center max-w-xl mx-auto mb-20">
|
||||
<span className="text-[#E63946] font-bold text-xs uppercase tracking-widest block mb-2 font-industrial">{t.barrelhouseEvents}</span>
|
||||
<h2 className="font-industrial text-3xl lg:text-4xl font-black uppercase text-white">
|
||||
{t.featuredServices}
|
||||
</h2>
|
||||
<p className="text-white/40 text-xs mt-2 font-medium">
|
||||
{lang === "tr" ? "Özel viski tadım uçuşları ve sommelier eğitim paketleri ayırtın." : "Reserve custom whiskey flights and private sommelier masterclass packages."}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Bento Grid layout */}
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{hizmetler.map((experience, idx) => {
|
||||
const locServ = getLocalizedService(experience.baslik, experience.aciklama);
|
||||
return (
|
||||
<motion.div
|
||||
key={idx}
|
||||
className="bg-[#18191E] rounded-3xl border border-white/5 overflow-hidden transition-all duration-300 hover:border-[#E63946]/30 flex flex-col justify-between group shadow-sm"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: idx * 0.1 }}
|
||||
whileHover={{ y: -4 }}
|
||||
>
|
||||
{/* Header cover using chef smoke image to represent luxury experience */}
|
||||
<div className="h-48 overflow-hidden relative border-b border-white/5">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={idx === 1 ? "/sicilia_lemon_heritage.png" : "/chef_plating_smoke.png"}
|
||||
alt={locServ.title}
|
||||
className="w-full h-full object-cover scale-102 group-hover:scale-105 transition-transform duration-1000"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black/40" />
|
||||
</div>
|
||||
|
||||
<div className="p-8 space-y-4">
|
||||
<h3 className="font-industrial font-black text-xl text-white tracking-wider uppercase leading-snug">
|
||||
{locServ.title}
|
||||
</h3>
|
||||
<p className="text-white/50 text-[11px] leading-relaxed font-medium">
|
||||
{locServ.desc}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="px-8 pb-8">
|
||||
<motion.button
|
||||
onClick={() => setShowBookingModal(true)}
|
||||
className="text-[#E63946] group-hover:text-white transition-colors text-[10px] font-bold tracking-[2px] uppercase flex items-center gap-1.5 cursor-pointer"
|
||||
>
|
||||
{t.learnMore}
|
||||
</motion.button>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── RESERVATION RESERVATION RESERVATION ── */}
|
||||
<section id="booking-flow" className="py-24 relative z-10 px-6 border-t border-white/5 bg-[#18191E]/40">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
|
||||
<div className="bg-[#18191E] rounded-3xl p-8 md:p-12 shadow-2xl border border-white/5 relative">
|
||||
<div className="absolute top-0 left-12 right-12 h-0.5 bg-gradient-to-r from-transparent via-[#E63946] to-transparent glowing-bar" />
|
||||
|
||||
<div className="text-center mb-10">
|
||||
<span className="text-[#E63946] font-bold text-xs uppercase tracking-widest block mb-2 font-industrial">{t.masterclassBooking}</span>
|
||||
<h2 className="font-industrial text-3xl md:text-4xl font-black uppercase text-white">
|
||||
{t.scheduleEvent}
|
||||
</h2>
|
||||
<p className="text-white/40 text-xs mt-2 font-medium">
|
||||
{t.formDesc}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-5">
|
||||
{[
|
||||
{ label: t.fieldsName, placeholder: lang === "tr" ? "Adınız Soyadınız" : "Your Name", type: "text", full: false },
|
||||
{ label: t.fieldsEmail, placeholder: "you@company.com", type: "email", full: false },
|
||||
{ label: t.fieldsPhone, placeholder: lang === "tr" ? "İrtibat Numarası" : "Contact Number", type: "tel", full: false },
|
||||
{ label: t.fieldsEvent, placeholder: lang === "tr" ? "Viski Tadım Serisi" : "Whiskey Tasting Flight", type: "text", full: false },
|
||||
{ label: t.fieldsNotes, placeholder: t.fieldsNotesPlaceholder, type: "text", full: true },
|
||||
].map((field, idx) => (
|
||||
<div key={idx} className={field.full ? "col-span-2" : "col-span-1"}>
|
||||
<label className="block text-[10px] font-bold text-white/50 mb-1.5 uppercase tracking-widest">{field.label}</label>
|
||||
<input
|
||||
type={field.type}
|
||||
placeholder={field.placeholder}
|
||||
className="w-full px-4 py-3 rounded-xl border border-white/5 bg-[#111215] text-xs text-white placeholder-white/20 focus:outline-none focus:border-[#E63946] focus:ring-1 focus:ring-[#E63946] transition-all font-medium cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<motion.button
|
||||
onClick={() => setShowBookingModal(true)}
|
||||
className="mt-8 w-full py-4.5 rounded-xl bg-[#E63946] hover:bg-white hover:text-black text-white font-bold text-[10px] tracking-[2.5px] uppercase transition-colors cursor-pointer"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
{t.dispatchRequest}
|
||||
</motion.button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── TESTIMONIALS ── */}
|
||||
<section id="testimonials" className="py-28 relative z-10 px-6 bg-[#111215] border-t border-white/5">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
|
||||
<div className="text-center max-w-xl mx-auto mb-20">
|
||||
<span className="text-[#E63946] font-bold text-xs uppercase tracking-widest block mb-2 font-industrial">{t.sommelierReviews}</span>
|
||||
<h2 className="font-industrial text-3xl lg:text-4xl font-black uppercase text-white font-industrial tracking-widest">
|
||||
{t.happyGuests}
|
||||
</h2>
|
||||
<p className="text-white/40 text-xs mt-2 font-medium">
|
||||
{t.happyGuestsDesc}
|
||||
</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-[#18191E] border border-white/5 rounded-3xl p-8 flex flex-col justify-between transition-all duration-300 hover:border-[#E63946]/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(5)].map((_, starIdx) => (
|
||||
<svg key={starIdx} className="w-4.5 h-4.5 fill-[#E63946]" 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-[#111215] font-sans-clean select-none font-bold">
|
||||
{y.yazar.charAt(0)}
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-industrial 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-[#18191E] 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-industrial text-2xl font-black text-white tracking-wider uppercase mb-4 block">
|
||||
Char<span className="text-[#E63946]">Barrel</span>
|
||||
</span>
|
||||
<p className="text-white/50 text-xs leading-relaxed max-w-sm mb-8 font-medium">
|
||||
{firma.slogan} — Heavy rustic slate-crimson themed barrelhouse coordinates offering masterclass mixology and corporate single malt tastings.
|
||||
</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-[#E63946] 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-[#E63946] 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>
|
||||
|
||||
{/* Dials Column */}
|
||||
<div>
|
||||
<h4 className="font-industrial text-[#E63946] text-xs font-black uppercase tracking-wider mb-6">
|
||||
{t.artisanalDials}
|
||||
</h4>
|
||||
<div className="space-y-4">
|
||||
{drinks.map(d => (
|
||||
<a
|
||||
key={d.name}
|
||||
href="#drink-selector"
|
||||
className="block text-white/50 hover:text-[#E63946] text-xs transition-colors font-medium uppercase tracking-wider font-industrial"
|
||||
>
|
||||
{d.name} Signature
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Experiences Column */}
|
||||
<div>
|
||||
<h4 className="font-industrial text-[#E63946] text-xs font-black uppercase tracking-wider mb-6">
|
||||
{t.vipServices}
|
||||
</h4>
|
||||
<div className="space-y-4">
|
||||
{hizmetler.map((h, hIdx) => {
|
||||
const locS = getLocalizedService(h.baslik, h.aciklama);
|
||||
return (
|
||||
<a
|
||||
key={hIdx}
|
||||
href="#experiences"
|
||||
className="block text-white/50 hover:text-[#E63946] text-xs transition-colors font-medium"
|
||||
>
|
||||
{locS.title}
|
||||
</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 BOOKING SUCCESS 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-[#18191E] rounded-3xl p-8 max-w-md w-full relative shadow-2xl border border-[#E63946]/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-[#111215] border border-white/5 flex items-center justify-center text-white/40 hover:text-[#E63946] hover:border-[#E63946]/20 transition-all cursor-pointer font-bold"
|
||||
onClick={() => setShowBookingModal(false)}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
|
||||
{/* Success check indicator */}
|
||||
<div className="w-16 h-16 rounded-2xl bg-[#E63946]/10 border border-[#E63946]/20 flex items-center justify-center mb-6">
|
||||
<svg className="w-8 h-8 stroke-[#E63946] 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-industrial font-black text-white text-2xl mb-1 uppercase tracking-wider">
|
||||
{t.enquiryActive}
|
||||
</h3>
|
||||
<p className="text-[#E63946] 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-[#E63946] hover:bg-black hover:text-white text-white font-bold text-[10px] tracking-[2.5px] uppercase cursor-pointer shadow-md shadow-[#E63946]/15"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
onClick={() => setShowBookingModal(false)}
|
||||
>
|
||||
{t.dismiss}
|
||||
</motion.button>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user