534 lines
27 KiB
TypeScript
534 lines
27 KiB
TypeScript
import Image from "next/image";
|
||
import Link from "next/link";
|
||
import { ArrowRight, Wind, Anchor, Utensils, BedDouble, Sun, Star } from "lucide-react";
|
||
import ScrollReveal from "@/components/ScrollReveal";
|
||
|
||
import HeroVideo from "@/components/HeroVideo";
|
||
|
||
const features = [
|
||
{ icon: Wind, label: "Kitesurf Okulu", sub: "IKO Sertifikalı" },
|
||
{ icon: Anchor, label: "Yoga Platformu", sub: "Nehir Kenarı" },
|
||
{ icon: Utensils, label: "Restoran & Bar", sub: "Ege Mutfağı" },
|
||
{ icon: BedDouble, label: "Butik Odalar", sub: "3 Tip Konaklama" },
|
||
{ icon: Sun, label: "Gün Batımı Terası", sub: "Gökova Manzarası" },
|
||
];
|
||
|
||
const rooms = [
|
||
{
|
||
img: "https://images.unsplash.com/photo-1582719478250-c89404bb8a0e?q=80&w=2940&auto=format&fit=crop",
|
||
badge: "Standart",
|
||
badgeStyle: "bg-white/90 text-dark",
|
||
name: "Standart Oda",
|
||
desc: "Konforlu ve modern tasarımlı odamızda huzurlu bir konaklama.",
|
||
price: "₺4.500",
|
||
cta: "primary" as const,
|
||
},
|
||
{
|
||
img: "https://images.unsplash.com/photo-1566665797739-1674de7a421a?q=80&w=2874&auto=format&fit=crop",
|
||
badge: "Popüler",
|
||
badgeStyle: "bg-accent text-white",
|
||
name: "Nehir Manzaralı Oda",
|
||
desc: "Azmak nehrinin eşsiz manzarası eşliğinde güne uyanın.",
|
||
price: "₺5.500",
|
||
cta: "accent" as const,
|
||
},
|
||
{
|
||
img: "https://images.unsplash.com/photo-1499955085172-a104c9463ece?q=80&w=2940&auto=format&fit=crop",
|
||
badge: "Premium",
|
||
badgeStyle: "bg-white/90 text-dark",
|
||
name: "Ahşap Bungalow",
|
||
desc: "Doğayla tamamen iç içe, teraslı ve bağımsız girişli.",
|
||
price: "₺7.000",
|
||
cta: "primary" as const,
|
||
},
|
||
];
|
||
|
||
const testimonials = [
|
||
{
|
||
text: "Akyaka'da pek çok yerde kaldım ama Kite Beach bambaşka bir deneyimdi. Nehrin sesi, kitesurf dersleri ve muhteşem kahvaltı — her şey mükemmeldi.",
|
||
name: "Ayşe K.",
|
||
from: "İstanbul",
|
||
},
|
||
{
|
||
text: "Yoga seansları ahşap platformda, sabah erken saatte, nehir manzarası eşliğinde. Kelimelerle anlatmak zor — mutlaka yaşanmalı.",
|
||
name: "Marco B.",
|
||
from: "İtalya",
|
||
},
|
||
{
|
||
text: "Eğitmenler son derece ilgili. Kitesurf derslerimden sonra bağımlısı oldum. Önümüzdeki yaz mutlaka döneceğim.",
|
||
name: "Mehmet Ö.",
|
||
from: "Ankara",
|
||
},
|
||
];
|
||
|
||
export default function Home() {
|
||
return (
|
||
<div className="flex flex-col min-h-screen">
|
||
|
||
{/* ──────────────────────────────────────────
|
||
HERO
|
||
────────────────────────────────────────── */}
|
||
<section className="relative h-screen w-full flex items-center justify-center overflow-hidden">
|
||
<HeroVideo />
|
||
|
||
{/* Floating season badge
|
||
<div className="absolute top-32 right-6 md:right-16 z-20 animate-float hidden sm:block">
|
||
<div className="bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl px-5 py-4 text-white">
|
||
<span className="block text-accent font-bold text-[10px] tracking-[0.25em] uppercase mb-1">Sezon</span>
|
||
<span className="font-serif text-xl font-medium">Nisan — Ekim</span>
|
||
</div>
|
||
</div>
|
||
*/}
|
||
<div className="relative z-10 text-center px-4 max-w-5xl mx-auto">
|
||
<div className="animate-fade-up delay-100">
|
||
<span className="inline-block text-white/60 text-xs tracking-[0.35em] uppercase mb-8 font-light">
|
||
Akyaka · Muğla · Türkiye
|
||
</span>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-center gap-4 md:gap-6 mb-6 animate-fade-up delay-200">
|
||
<span
|
||
className="text-xs md:text-sm tracking-[0.4em] font-bold uppercase whitespace-nowrap text-white/90"
|
||
style={{ writingMode: 'vertical-rl', transform: 'rotate(180deg)' }}
|
||
>
|
||
WELCOME TO
|
||
</span>
|
||
<h1 className="font-sans font-black text-white leading-none tracking-tighter text-[clamp(4rem,10vw,10rem)] uppercase">
|
||
KITE BEACH
|
||
</h1>
|
||
</div>
|
||
|
||
<p className="animate-fade-up delay-500 text-white/75 text-base md:text-xl mb-10 font-light italic tracking-wide">
|
||
"Nehrin huzuru, denizin enerjisi — tek bir noktada."
|
||
</p>
|
||
|
||
<div className="animate-fade-up delay-600 flex flex-col sm:flex-row items-center justify-center gap-4">
|
||
<Link
|
||
href="/iletisim"
|
||
className="btn-shimmer bg-accent text-white px-10 py-4 rounded-full text-xs font-bold tracking-[0.15em] uppercase shadow-2xl hover:bg-accent/90 transition-colors w-full sm:w-auto text-center"
|
||
>
|
||
Rezervasyon Yap
|
||
</Link>
|
||
<Link
|
||
href="/aktiviteler"
|
||
className="bg-white/10 backdrop-blur-sm border border-white/30 text-white px-10 py-4 rounded-full text-xs font-bold tracking-[0.15em] uppercase hover:bg-white/20 transition-colors w-full sm:w-auto text-center"
|
||
>
|
||
Aktiviteleri Keşfet
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Scroll indicator */}
|
||
<div className="absolute bottom-10 left-1/2 -translate-x-1/2 z-20 flex flex-col items-center gap-3">
|
||
<span className="text-white/40 text-[10px] tracking-[0.3em] uppercase">Keşfet</span>
|
||
<div className="w-px h-12 bg-gradient-to-b from-white/40 to-transparent animate-scroll-bounce" />
|
||
</div>
|
||
</section>
|
||
|
||
{/* ──────────────────────────────────────────
|
||
FEATURES STRIP
|
||
────────────────────────────────────────── */}
|
||
<section className="bg-dark text-white py-8">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div className="grid grid-cols-2 md:grid-cols-5 divide-x divide-white/8">
|
||
{features.map(({ icon: Icon, label, sub }, i) => (
|
||
<div
|
||
key={i}
|
||
className={`flex flex-col items-center justify-center gap-2 py-6 px-4 group ${i >= 2 ? "hidden md:flex" : ""}`}
|
||
>
|
||
<Icon className="w-5 h-5 text-accent group-hover:scale-110 transition-transform duration-300" />
|
||
<span className="text-[13px] font-semibold text-center">{label}</span>
|
||
<span className="text-[11px] text-white/40 text-center">{sub}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ──────────────────────────────────────────
|
||
ABOUT
|
||
────────────────────────────────────────── */}
|
||
<section className="py-28 bg-background overflow-hidden">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24 items-center">
|
||
|
||
<ScrollReveal className="relative">
|
||
<div className="relative h-[540px] lg:h-[660px] rounded-3xl overflow-hidden shadow-2xl">
|
||
<Image
|
||
src="https://images.unsplash.com/photo-1544551763-46a013bb70d5?q=80&w=2940&auto=format&fit=crop"
|
||
alt="Akyaka Doğa"
|
||
fill
|
||
className="object-cover"
|
||
/>
|
||
</div>
|
||
{/* Stats card */}
|
||
<div className="absolute -bottom-5 -right-4 md:-right-8 bg-white rounded-2xl p-6 shadow-xl border border-sand">
|
||
<div className="grid grid-cols-2 gap-6 divide-x divide-sand">
|
||
<div className="text-center">
|
||
<span className="block font-serif text-3xl font-bold text-primary">500+</span>
|
||
<span className="block text-[10px] text-muted uppercase tracking-wider mt-1">Mutlu Misafir</span>
|
||
</div>
|
||
<div className="text-center pl-6">
|
||
<span className="block font-serif text-3xl font-bold text-primary">10+</span>
|
||
<span className="block text-[10px] text-muted uppercase tracking-wider mt-1">Yıl Deneyim</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/* IKO badge */}
|
||
<div className="absolute -top-4 -left-4 bg-accent text-white rounded-2xl p-4 shadow-lg">
|
||
<Star className="w-4 h-4 mb-1" fill="white" />
|
||
<span className="block text-xs font-bold leading-none">IKO</span>
|
||
<span className="block text-[10px] opacity-80 mt-0.5">Sertifikalı</span>
|
||
</div>
|
||
</ScrollReveal>
|
||
|
||
<ScrollReveal delay={200}>
|
||
<span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-5">
|
||
Hikayemiz
|
||
</span>
|
||
<h2 className="font-serif text-4xl md:text-5xl lg:text-6xl font-bold text-dark leading-[1.05] mb-8">
|
||
Doğanın<br />Kalbinde<br />
|
||
<span className="text-primary italic">Özel Bir Kaçış</span>
|
||
</h2>
|
||
<p className="text-gray-600 leading-relaxed mb-5">
|
||
Gökova Körfezi'nin kristal sularına dökülen Azmak Nehri'nin hemen kıyısında,
|
||
rüzgarın hiç eksik olmadığı eşsiz bir konumda yer alıyoruz.
|
||
</p>
|
||
<p className="text-gray-600 leading-relaxed mb-10">
|
||
Kite Beach Akyaka; kitesurf tutkusunu doğayla, konforla ve yerel lezzetlerle
|
||
bütünleştiren benzersiz bir yaşam alanı sunar.
|
||
</p>
|
||
<div className="section-line mb-8" />
|
||
<Link
|
||
href="/hakkimizda"
|
||
className="inline-flex items-center gap-2 text-dark font-bold text-sm tracking-wide group"
|
||
>
|
||
<span className="border-b-2 border-accent pb-0.5">Hikayemizi Okuyun</span>
|
||
<ArrowRight className="w-4 h-4 group-hover:translate-x-1.5 transition-transform" />
|
||
</Link>
|
||
</ScrollReveal>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ──────────────────────────────────────────
|
||
ROOMS
|
||
────────────────────────────────────────── */}
|
||
{/*
|
||
<section className="py-28 bg-white">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<ScrollReveal className="text-center mb-16">
|
||
<span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-4">
|
||
Konaklama
|
||
</span>
|
||
<h2 className="font-serif text-4xl md:text-5xl font-bold text-dark mb-6">Kite Beach Akyaka Otel</h2>
|
||
<p className="text-muted max-w-3xl mx-auto text-sm leading-relaxed">
|
||
Akyaka’nın en güzel köşesinde, nehrin dinginliği ile denizin sonsuz maviliğinin kucaklaştığı o özel noktadayız. Kapınızı açtığınız anda sizi karşılayan nehir kıyısının sessizliği, güne başlamak için en huzurlu davetiniz olacak. Doğanın kalbinde, nehir manzarasına karşı yaptığınız bir yoga seansıyla ruhunuzu dengelerken; hemen ardından Akyaka’nın meşhur rüzgarlarında Kite Surf ile adrenalini zirveye taşıyabilirsiniz. Günün yorgunluğunu ise, restoranımızın mutfağından çıkan lezzetlerle, Ege’nin kendine has o büyüleyici gün batımını izleyerek geride bırakın. Burada zaman, sadece sizin istediğiniz hızda akıyor.
|
||
</p>
|
||
</ScrollReveal>
|
||
|
||
<ScrollReveal stagger className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
|
||
{rooms.map((room, i) => (
|
||
<div
|
||
key={i}
|
||
className={`card-lift group rounded-2xl overflow-hidden bg-sand border border-sand ${i === 1 ? "md:-mt-4 md:shadow-xl" : ""
|
||
}`}
|
||
>
|
||
<div className="relative h-64 overflow-hidden">
|
||
<Image
|
||
src={room.img}
|
||
alt={room.name}
|
||
fill
|
||
className="object-cover group-hover:scale-105 transition-transform duration-700"
|
||
/>
|
||
<span className={`absolute top-4 left-4 text-[10px] font-bold px-3 py-1.5 rounded-full tracking-wider uppercase ${room.badgeStyle} backdrop-blur-sm`}>
|
||
{room.badge}
|
||
</span>
|
||
</div>
|
||
<div className="p-7">
|
||
<h3 className="font-serif text-xl font-bold text-dark mb-2">{room.name}</h3>
|
||
<p className="text-muted mb-6 text-[13px] leading-relaxed">{room.desc}</p>
|
||
<div className="flex justify-between items-center pt-5 border-t border-sand">
|
||
<div>
|
||
<span className="text-2xl font-bold text-dark">{room.price}</span>
|
||
<span className="text-muted text-xs ml-1">/gece</span>
|
||
</div>
|
||
<Link
|
||
href="/odalar"
|
||
className={`text-[11px] px-5 py-2.5 rounded-full font-bold tracking-wider uppercase transition-colors ${room.cta === "accent"
|
||
? "bg-accent text-white hover:bg-accent/90"
|
||
: "bg-primary text-white hover:bg-primary/90"
|
||
}`}
|
||
>
|
||
İncele
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</ScrollReveal>
|
||
|
||
<div className="text-center mt-12">
|
||
<Link
|
||
href="/odalar"
|
||
className="inline-flex items-center gap-2 border-2 border-dark text-dark text-xs px-8 py-3.5 rounded-full font-bold uppercase tracking-widest hover:bg-dark hover:text-white transition-colors"
|
||
>
|
||
Tüm Odaları Gör
|
||
<ArrowRight className="w-3.5 h-3.5" />
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
*/}
|
||
|
||
{/* ──────────────────────────────────────────
|
||
ACTIVITIES — BENTO GRID
|
||
────────────────────────────────────────── */}
|
||
<section className="py-28 bg-background">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<ScrollReveal className="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-10">
|
||
<div>
|
||
<span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-4">
|
||
Ne Yapacaksınız?
|
||
</span>
|
||
<h2 className="font-serif text-5xl font-bold text-dark">Aktiviteler</h2>
|
||
</div>
|
||
<Link
|
||
href="/aktiviteler"
|
||
className="inline-flex items-center gap-2 text-sm font-semibold text-primary hover:text-accent transition-colors"
|
||
>
|
||
Tümünü Gör <ArrowRight className="w-4 h-4" />
|
||
</Link>
|
||
</ScrollReveal>
|
||
|
||
{/* Bento rows */}
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
{/* Row 1 */}
|
||
<ScrollReveal className="md:col-span-2">
|
||
<Link href="/aktiviteler" className="group relative block h-[400px] rounded-3xl overflow-hidden">
|
||
<Image
|
||
src="https://images.unsplash.com/photo-1533000756353-909d73d2a3c7?q=80&w=2940&auto=format&fit=crop"
|
||
alt="Kitesurf"
|
||
fill
|
||
className="object-cover group-hover:scale-105 transition-transform duration-700"
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-t from-dark/90 via-dark/20 to-transparent" />
|
||
<div className="absolute bottom-0 p-8">
|
||
<span className="block text-accent text-[10px] tracking-[0.25em] uppercase font-bold mb-2">IKO Sertifikalı</span>
|
||
<h3 className="font-serif text-4xl text-white font-bold mb-2">Kitesurf</h3>
|
||
<p className="text-white/60 text-sm mb-4 max-w-xs opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-400">
|
||
Başlangıçtan ileri seviyeye. Akyaka'nın ünlü termik rüzgarında uçun.
|
||
</p>
|
||
<span className="inline-flex items-center gap-2 text-white text-sm font-semibold">
|
||
₺2.000/Saat <ArrowRight className="w-3.5 h-3.5" />
|
||
</span>
|
||
</div>
|
||
</Link>
|
||
</ScrollReveal>
|
||
|
||
<ScrollReveal delay={100}>
|
||
<Link href="/aktiviteler" className="group relative block h-[400px] rounded-3xl overflow-hidden">
|
||
<Image
|
||
src="https://images.unsplash.com/photo-1599901860904-17e08627c271?q=80&w=2940&auto=format&fit=crop"
|
||
alt="Yoga"
|
||
fill
|
||
className="object-cover group-hover:scale-105 transition-transform duration-700"
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-t from-dark/80 to-transparent" />
|
||
<div className="absolute bottom-0 p-7">
|
||
<h3 className="font-serif text-3xl text-white font-bold mb-1">Yoga</h3>
|
||
<span className="text-white/60 text-xs">₺400/Seans</span>
|
||
</div>
|
||
</Link>
|
||
</ScrollReveal>
|
||
|
||
{/* Row 2 */}
|
||
<ScrollReveal delay={150}>
|
||
<Link href="/aktiviteler" className="group relative block h-[280px] rounded-3xl overflow-hidden">
|
||
<Image
|
||
src="https://images.unsplash.com/photo-1544606771-46abcf9dbb83?q=80&w=2924&auto=format&fit=crop"
|
||
alt="SUP"
|
||
fill
|
||
className="object-cover group-hover:scale-105 transition-transform duration-700"
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-t from-dark/80 to-transparent" />
|
||
<div className="absolute bottom-0 p-7">
|
||
<h3 className="font-serif text-2xl text-white font-bold mb-1">Stand-Up Paddle</h3>
|
||
<span className="text-white/60 text-xs">₺300/Saat</span>
|
||
</div>
|
||
</Link>
|
||
</ScrollReveal>
|
||
|
||
<ScrollReveal className="md:col-span-2" delay={200}>
|
||
<Link href="/aktiviteler" className="group relative block h-[280px] rounded-3xl overflow-hidden">
|
||
<Image
|
||
src="https://images.unsplash.com/photo-1511994298241-608e28f14fde?q=80&w=2940&auto=format&fit=crop"
|
||
alt="Bisiklet"
|
||
fill
|
||
className="object-cover group-hover:scale-105 transition-transform duration-700"
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-t from-dark/80 to-transparent" />
|
||
<div className="absolute bottom-0 p-8">
|
||
<h3 className="font-serif text-3xl text-white font-bold mb-1">Bisiklet Kiralama</h3>
|
||
<span className="text-white/60 text-xs">₺250/Gün · Akyaka Köy Turu</span>
|
||
</div>
|
||
</Link>
|
||
</ScrollReveal>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ──────────────────────────────────────────
|
||
EVENTS (PREVIEW)
|
||
────────────────────────────────────────── */}
|
||
<section className="py-28 bg-dark text-white relative overflow-hidden">
|
||
{/* Background glow */}
|
||
<div className="absolute top-0 right-0 w-96 h-96 bg-accent/20 rounded-full blur-[120px] pointer-events-none" />
|
||
<div className="absolute bottom-0 left-0 w-[500px] h-[500px] bg-primary/20 rounded-full blur-[150px] pointer-events-none" />
|
||
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||
<ScrollReveal className="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-16">
|
||
<div>
|
||
<span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-4">
|
||
Takvim
|
||
</span>
|
||
<h2 className="font-serif text-5xl font-bold">Etkinlikler</h2>
|
||
</div>
|
||
<Link
|
||
href="/etkinlikler"
|
||
className="inline-flex items-center gap-2 text-sm font-semibold text-white/70 hover:text-white transition-colors border border-white/20 hover:border-white px-6 py-2.5 rounded-full"
|
||
>
|
||
Tüm Etkinlikler <ArrowRight className="w-4 h-4" />
|
||
</Link>
|
||
</ScrollReveal>
|
||
|
||
<ScrollReveal delay={100}>
|
||
<div className="group relative flex flex-col md:flex-row gap-8 bg-white/5 border border-white/10 rounded-3xl p-6 md:p-10 hover:bg-white/10 transition-colors backdrop-blur-sm">
|
||
<div className="relative w-full md:w-1/3 h-[250px] md:h-auto rounded-2xl overflow-hidden shrink-0">
|
||
<Image
|
||
src="https://images.unsplash.com/photo-1540039155732-680c74f07599?q=80&w=2832&auto=format&fit=crop"
|
||
alt="Mahmut Orhan Konseri"
|
||
fill
|
||
className="object-cover group-hover:scale-105 transition-transform duration-700"
|
||
/>
|
||
</div>
|
||
<div className="flex flex-col justify-center w-full md:w-2/3">
|
||
<div className="inline-block bg-accent/20 text-accent text-[10px] font-bold px-3 py-1.5 rounded-full tracking-widest uppercase mb-4 w-max">
|
||
Yaklaşan Etkinlik
|
||
</div>
|
||
<h3 className="font-serif text-3xl md:text-4xl font-bold mb-4">Mahmut Orhan - Sunset Session</h3>
|
||
<p className="text-white/60 leading-relaxed mb-6 max-w-xl">
|
||
Dünyaca ünlü DJ Mahmut Orhan, unutulmaz bir gün batımı performansı için Kite Beach Akyaka'da! Ege'nin muhteşem manzarasına karşı elektronik müziğin ritmini hissedeceğiniz bu özel geceyi kaçırmayın.
|
||
</p>
|
||
<div className="flex flex-wrap items-center gap-6 mb-8 text-sm text-white/80">
|
||
<span className="flex items-center gap-2">
|
||
<span className="w-2 h-2 rounded-full bg-accent" /> 15 Ağustos 2026
|
||
</span>
|
||
<span className="flex items-center gap-2">
|
||
<span className="w-2 h-2 rounded-full bg-accent" /> 18:00
|
||
</span>
|
||
<span className="flex items-center gap-2">
|
||
<span className="w-2 h-2 rounded-full bg-accent" /> Beach Club
|
||
</span>
|
||
</div>
|
||
<Link
|
||
href="/etkinlikler"
|
||
className="inline-flex items-center gap-2 text-xs font-bold tracking-widest uppercase text-accent hover:text-white transition-colors w-max"
|
||
>
|
||
Detayları İncele <ArrowRight className="w-4 h-4" />
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</ScrollReveal>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ──────────────────────────────────────────
|
||
TESTIMONIALS
|
||
────────────────────────────────────────── */}
|
||
<section className="py-28 bg-white">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<ScrollReveal className="text-center mb-16">
|
||
<span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-4">
|
||
Misafir Yorumları
|
||
</span>
|
||
<h2 className="font-serif text-5xl font-bold text-dark">Deneyimler</h2>
|
||
</ScrollReveal>
|
||
|
||
<ScrollReveal stagger className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
{testimonials.map((t, i) => (
|
||
<div key={i} className="relative bg-sand rounded-2xl p-8 border border-sand overflow-hidden">
|
||
{/* Large decorative quote */}
|
||
<span className="absolute top-3 right-5 font-serif text-[8rem] leading-none text-primary/8 select-none">
|
||
"
|
||
</span>
|
||
{/* Stars */}
|
||
<div className="flex gap-1 mb-5 relative z-10">
|
||
{Array.from({ length: 5 }).map((_, j) => (
|
||
<Star key={j} className="w-3.5 h-3.5 text-accent" fill="#E87040" />
|
||
))}
|
||
</div>
|
||
<p className="text-foreground/75 text-[13px] leading-relaxed mb-6 relative z-10 italic">
|
||
"{t.text}"
|
||
</p>
|
||
<div className="flex items-center gap-3 relative z-10">
|
||
<div className="w-9 h-9 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
|
||
<span className="text-primary font-bold text-sm">{t.name[0]}</span>
|
||
</div>
|
||
<div>
|
||
<span className="block font-semibold text-dark text-sm">{t.name}</span>
|
||
<span className="text-muted text-xs">{t.from}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</ScrollReveal>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ──────────────────────────────────────────
|
||
CTA BAND
|
||
────────────────────────────────────────── */}
|
||
<section className="relative py-28 overflow-hidden">
|
||
<div
|
||
className="absolute inset-0 animate-gradient-pan"
|
||
style={{
|
||
background:
|
||
"linear-gradient(135deg, #0D3D50 0%, #1A6B8A 35%, #0E1A24 60%, #1A4A60 100%)",
|
||
}}
|
||
/>
|
||
<div className="absolute inset-0 opacity-[0.04]">
|
||
<Image
|
||
src="https://images.unsplash.com/photo-1498623116890-37e912163d5d?q=80&w=2940&auto=format&fit=crop"
|
||
alt=""
|
||
fill
|
||
className="object-cover"
|
||
/>
|
||
</div>
|
||
|
||
<div className="relative z-10 max-w-3xl mx-auto px-4 text-center">
|
||
<ScrollReveal>
|
||
<span className="inline-block text-accent text-xs tracking-[0.3em] uppercase font-semibold mb-6">
|
||
Hemen Başlayın
|
||
</span>
|
||
<h2 className="font-serif text-5xl md:text-6xl font-bold text-white leading-tight mb-6">
|
||
Hayalindeki tatili<br />planlamaya hazır mısın?
|
||
</h2>
|
||
<p className="text-white/50 mb-10 text-base leading-relaxed">
|
||
Rüzgar seni çağırıyor. Hemen yerini ayırt ve bu eşsiz deneyimin bir parçası ol.
|
||
</p>
|
||
<Link
|
||
href="/iletisim"
|
||
className="btn-shimmer inline-block bg-accent text-white px-12 py-4 rounded-full text-xs font-bold tracking-[0.2em] uppercase shadow-2xl hover:bg-white hover:text-dark transition-colors"
|
||
>
|
||
Hemen Rezervasyon Yap
|
||
</Link>
|
||
</ScrollReveal>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
);
|
||
}
|