This commit is contained in:
mstfyldz
2026-06-09 13:06:58 +03:00
parent 13b77ee54f
commit f6b4acb760
19 changed files with 2633 additions and 75 deletions
+161
View File
@@ -0,0 +1,161 @@
import Image from "next/image";
import Link from "next/link";
import { Coffee, Wine, UtensilsCrossed, Clock } from "lucide-react";
import ScrollReveal from "@/components/ScrollReveal";
const menuCategories = [
{
icon: Coffee,
name: "Serpme Kahvaltı",
desc: "Yöresel peynirler, ev yapımı reçeller, organik zeytinyağı ve taze pişmiş köy ekmeği ile güne enerjik başlayın.",
hours: "08:30 11:30",
highlight: "Yöresel Ürünler",
},
{
icon: UtensilsCrossed,
name: "Öğle & Akşam",
desc: "Günlük taze deniz ürünleri, zeytinyağlı Ege mezeleri ve İtalyan mutfağından seçkin makarnalar ile akşam yemeği.",
hours: "12:00 23:00",
highlight: "Taze Ege Mutfağı",
},
{
icon: Wine,
name: "Lounge & Bar",
desc: "Gün batımına karşı mixologist'lerimizin hazırladığı imza kokteyller, yerel şaraplar ve Türk rakısı ile keyifli anlar.",
hours: "16:00 01:00",
highlight: "Gün Batımı Manzarası",
},
];
export default function RestoranPage() {
return (
<div className="min-h-screen bg-background">
{/* Page Header */}
<section className="relative h-[55vh] w-full flex items-end overflow-hidden">
<div className="absolute inset-0">
<Image
src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?q=80&w=2940&auto=format&fit=crop"
alt="Restoran & Bar"
fill
className="object-cover"
/>
<div className="absolute inset-0 bg-gradient-to-t from-dark/85 via-dark/30 to-black/20" />
</div>
<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-14 w-full">
<span className="block text-accent text-xs tracking-[0.3em] uppercase font-semibold mb-3 animate-fade-up">
Lezzetler
</span>
<h1 className="font-serif text-5xl md:text-7xl text-white font-bold animate-fade-up delay-100">
Restoran & Bar
</h1>
<p className="text-white/60 text-lg mt-3 font-light animate-fade-up delay-200">
Ege lezzetleri ve nehir manzarası.
</p>
</div>
</section>
{/* Intro */}
<section className="py-20 bg-white">
<div className="max-w-3xl mx-auto px-4 sm:px-6 text-center">
<ScrollReveal>
<span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-5">
Mutfağımız
</span>
<h2 className="font-serif text-4xl font-bold text-dark mb-6">
Tazeden, Yerelden, Sevgiyle
</h2>
<p className="text-gray-500 leading-relaxed text-[15px]">
Şeflerimizin özenle hazırladığı taze Ege mutfağı lezzetleri, organik kahvaltılıklar ve
imza kokteyllerimizle Kite Beach Restoran'da günün her saati kendinizi şımartın.
Azmak nehrinin hemen kenarında, ahşap terasımızda yemeğinizin tadını çıkarın.
</p>
</ScrollReveal>
</div>
</section>
{/* Menu Categories */}
<section className="pb-20 bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<ScrollReveal stagger className="grid grid-cols-1 md:grid-cols-3 gap-6">
{menuCategories.map((cat, i) => {
const Icon = cat.icon;
return (
<div
key={i}
className="card-lift bg-background rounded-2xl p-8 border border-sand flex flex-col"
>
<div className="w-12 h-12 bg-primary/8 rounded-xl flex items-center justify-center mb-6">
<Icon className="text-primary" size={22} />
</div>
<span className="text-accent text-[10px] font-bold tracking-[0.2em] uppercase mb-2">
{cat.highlight}
</span>
<h3 className="font-serif text-xl font-bold text-dark mb-3">{cat.name}</h3>
<p className="text-gray-500 text-[13px] leading-relaxed flex-grow mb-6">{cat.desc}</p>
<div className="flex items-center gap-2 text-primary text-[12px] font-semibold">
<Clock size={12} />
{cat.hours}
</div>
</div>
);
})}
</ScrollReveal>
</div>
</section>
{/* Atmosphere Photos */}
<section className="py-20 bg-background">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<ScrollReveal className="text-center mb-12">
<h2 className="font-serif text-4xl font-bold text-dark">Atmosfer</h2>
</ScrollReveal>
<ScrollReveal>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="relative h-80 rounded-2xl overflow-hidden md:col-span-2 group">
<Image
src="https://images.unsplash.com/photo-1544148103-0773bf10d330?q=80&w=2940&auto=format&fit=crop"
alt="Restoran atmosferi"
fill
className="object-cover group-hover:scale-105 transition-transform duration-700"
/>
</div>
<div className="relative h-80 rounded-2xl overflow-hidden group">
<Image
src="https://images.unsplash.com/photo-1551504734-5ee1c4a1479b?q=80&w=2940&auto=format&fit=crop"
alt="Kahvaltı"
fill
className="object-cover group-hover:scale-105 transition-transform duration-700"
/>
</div>
</div>
</ScrollReveal>
</div>
</section>
{/* Special Events */}
<section className="py-20 bg-dark text-white">
<div className="max-w-3xl mx-auto px-4 text-center">
<ScrollReveal>
<span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-5">
Özel Günler
</span>
<h3 className="font-serif text-4xl font-bold mb-5">
Özel Etkinlikler & Rezervasyonlar
</h3>
<p className="text-white/50 mb-8 leading-relaxed">
Doğum günü, yıl dönümü veya özel grup yemekleriniz için nehir manzaralı
terasımızı rezerve edebilirsiniz. Ekibimiz organizasyonunuzu özel kılmak için burada.
</p>
<Link
href="/iletisim"
className="btn-shimmer inline-block bg-accent text-white px-10 py-4 rounded-full text-xs font-bold tracking-[0.15em] uppercase"
>
Masa Rezervasyonu Yap
</Link>
</ScrollReveal>
</div>
</section>
</div>
);
}