ss
This commit is contained in:
mstfyldz
+522
-54
@@ -1,65 +1,533 @@
|
||||
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 flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
||||
<main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={100}
|
||||
height={20}
|
||||
priority
|
||||
/>
|
||||
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
|
||||
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
|
||||
To get started, edit the page.tsx file.
|
||||
</h1>
|
||||
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
|
||||
Looking for a starting point or more instructions? Head over to{" "}
|
||||
<a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
<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)' }}
|
||||
>
|
||||
Templates
|
||||
</a>{" "}
|
||||
or the{" "}
|
||||
<a
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Learning
|
||||
</a>{" "}
|
||||
center.
|
||||
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>
|
||||
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Deploy Now
|
||||
</a>
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Documentation
|
||||
</a>
|
||||
|
||||
{/* 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>
|
||||
</main>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user