From f6b4acb760e5e9ab087349b16636d0aba23f0cfb Mon Sep 17 00:00:00 2001
From: mstfyldz <mstfyldz@mstfyldz-MacBook-Air.local>
Date: Tue, 9 Jun 2026 13:06:58 +0300
Subject: [PATCH] ss

---
 app/aktiviteler/page.tsx      | 170 ++++++++++
 app/etkinlikler/page.tsx      | 179 +++++++++++
 app/galeri/page.tsx           | 115 +++++++
 app/globals.css               | 212 ++++++++++++-
 app/hakkimizda/page.tsx       | 155 +++++++++
 app/iletisim/page.tsx         | 178 +++++++++++
 app/layout.tsx                |  28 +-
 app/odalar/page.tsx           | 160 ++++++++++
 app/page.tsx                  | 576 ++++++++++++++++++++++++++++++----
 app/restoran/page.tsx         | 161 ++++++++++
 components/Footer.tsx         | 162 ++++++++++
 components/HeroVideo.tsx      |  38 +++
 components/Navbar.tsx         | 151 +++++++++
 components/ScrollReveal.tsx   |  51 +++
 components/WhatsAppButton.tsx |  28 ++
 docs/prd.md                   | 272 ++++++++++++++++
 next.config.ts                |  17 +-
 package-lock.json             |  53 ++++
 package.json                  |   2 +
 19 files changed, 2633 insertions(+), 75 deletions(-)
 create mode 100644 app/aktiviteler/page.tsx
 create mode 100644 app/etkinlikler/page.tsx
 create mode 100644 app/galeri/page.tsx
 create mode 100644 app/hakkimizda/page.tsx
 create mode 100644 app/iletisim/page.tsx
 create mode 100644 app/odalar/page.tsx
 create mode 100644 app/restoran/page.tsx
 create mode 100644 components/Footer.tsx
 create mode 100644 components/HeroVideo.tsx
 create mode 100644 components/Navbar.tsx
 create mode 100644 components/ScrollReveal.tsx
 create mode 100644 components/WhatsAppButton.tsx
 create mode 100644 docs/prd.md

diff --git a/app/aktiviteler/page.tsx b/app/aktiviteler/page.tsx
new file mode 100644
index 0000000..118ea40
--- /dev/null
+++ b/app/aktiviteler/page.tsx
@@ -0,0 +1,170 @@
+import Image from "next/image";
+import Link from "next/link";
+import { ArrowRight, Clock, Users } from "lucide-react";
+import ScrollReveal from "@/components/ScrollReveal";
+
+const activities = [
+  {
+    img: "https://images.unsplash.com/photo-1533000756353-909d73d2a3c7?q=80&w=2940&auto=format&fit=crop",
+    tag: "IKO Sertifikalı",
+    tagColor: "bg-accent text-white",
+    name: "Kitesurf Okulu",
+    desc: "Akyaka'nın meşhur termal rüzgarında kitesurf yapmayı öğrenin. IKO sertifikalı eğitmenlerimizle başlangıç, orta ve ileri seviye ders seçenekleri sunuyoruz.",
+    duration: "2–4 Saat",
+    capacity: "1–3 Kişi",
+    price: "₺2.000",
+    unit: "Saat",
+    levels: ["Başlangıç", "Orta", "İleri"],
+  },
+  {
+    img: "https://images.unsplash.com/photo-1599901860904-17e08627c271?q=80&w=2940&auto=format&fit=crop",
+    tag: "Açık Hava",
+    tagColor: "bg-primary text-white",
+    name: "Yoga Seansları",
+    desc: "Nehir kıyısındaki özel ahşap platformumuzda güne yoga ile başlayın. Hafıza seansları, sunset yoga ve özel birebir dersler mevcuttur.",
+    duration: "60–90 Dak",
+    capacity: "Grup / Özel",
+    price: "₺400",
+    unit: "Kişi",
+    levels: ["Tüm Seviyeler"],
+  },
+  {
+    img: "https://images.unsplash.com/photo-1544606771-46abcf9dbb83?q=80&w=2924&auto=format&fit=crop",
+    tag: "Ekipman Dahil",
+    tagColor: "bg-dark text-white",
+    name: "Stand-Up Paddle (SUP)",
+    desc: "Azmak nehrinin berrak ve sakin sularında kürek çekerek doğanın gizli güzelliklerini keşfedin. Ekipman kiralama ve rehberli tur seçenekleri mevcuttur.",
+    duration: "1–3 Saat",
+    capacity: "Bireysel",
+    price: "₺300",
+    unit: "Saat",
+    levels: ["Kolay"],
+  },
+  {
+    img: "https://images.unsplash.com/photo-1511994298241-608e28f14fde?q=80&w=2940&auto=format&fit=crop",
+    tag: "Günlük Tur",
+    tagColor: "bg-primary text-white",
+    name: "Bisiklet Kiralama",
+    desc: "Akyaka'nın çam ormanları arasındaki yollarını ve mimarisiyle ünlü sokaklarını bisikletle gezin. Günlük ve saatlik kiralama seçenekleri ile rotaları keşfedin.",
+    duration: "Tam Gün",
+    capacity: "Bireysel / Grup",
+    price: "₺250",
+    unit: "Gün",
+    levels: ["Kolay"],
+  },
+];
+
+export default function AktivitelerPage() {
+  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-1533000756353-909d73d2a3c7?q=80&w=2940&auto=format&fit=crop"
+            alt="Aktiviteler"
+            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">
+            Deneyimler
+          </span>
+          <h1 className="font-serif text-5xl md:text-7xl text-white font-bold animate-fade-up delay-100">
+            Aktiviteler
+          </h1>
+          <p className="text-white/60 text-lg mt-3 font-light animate-fade-up delay-200">
+            Rüzgarı hisset, doğayla bir ol.
+          </p>
+        </div>
+      </section>
+
+      {/* Activities */}
+      <section className="py-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+          {activities.map((act, i) => (
+            <ScrollReveal key={i} delay={i * 80}>
+              <div className="card-lift group bg-white rounded-3xl overflow-hidden border border-sand flex flex-col h-full">
+                <div className="relative h-64 overflow-hidden">
+                  <Image
+                    src={act.img}
+                    alt={act.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-widest uppercase ${act.tagColor}`}>
+                    {act.tag}
+                  </span>
+                </div>
+
+                <div className="p-8 flex-grow flex flex-col">
+                  <h2 className="font-serif text-2xl font-bold text-dark mb-3">{act.name}</h2>
+                  <p className="text-gray-500 text-[14px] leading-relaxed mb-6 flex-grow">{act.desc}</p>
+
+                  {/* Meta */}
+                  <div className="flex gap-6 mb-6">
+                    <div className="flex items-center gap-2 text-[12px] text-muted">
+                      <Clock size={13} className="text-primary" />
+                      {act.duration}
+                    </div>
+                    <div className="flex items-center gap-2 text-[12px] text-muted">
+                      <Users size={13} className="text-primary" />
+                      {act.capacity}
+                    </div>
+                  </div>
+
+                  {/* Levels */}
+                  <div className="flex flex-wrap gap-2 mb-7">
+                    {act.levels.map((level) => (
+                      <span
+                        key={level}
+                        className="text-[10px] font-semibold bg-background text-primary px-3 py-1 rounded-full border border-primary/20 tracking-wide"
+                      >
+                        {level}
+                      </span>
+                    ))}
+                  </div>
+
+                  <div className="flex justify-between items-center pt-6 border-t border-sand">
+                    <div>
+                      <span className="text-2xl font-bold text-dark">{act.price}</span>
+                      <span className="text-muted text-xs ml-1">/ {act.unit}</span>
+                    </div>
+                    <Link
+                      href="/iletisim"
+                      className="inline-flex items-center gap-2 text-accent font-bold text-[12px] tracking-wider uppercase hover:text-primary transition-colors group/link"
+                    >
+                      Bilgi Al
+                      <ArrowRight size={14} className="group-hover/link:translate-x-1 transition-transform" />
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            </ScrollReveal>
+          ))}
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="py-20 bg-primary">
+        <div className="max-w-3xl mx-auto px-4 text-center">
+          <h3 className="font-serif text-4xl text-white font-bold mb-4">
+            Özel Paket Teklifi Al
+          </h3>
+          <p className="text-white/60 mb-8">
+            Kitesurf + konaklama veya yoga + SUP gibi özel aktivite paketleri için bizimle iletişime geçin.
+          </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"
+          >
+            İletişime Geç
+          </Link>
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/app/etkinlikler/page.tsx b/app/etkinlikler/page.tsx
new file mode 100644
index 0000000..c49862c
--- /dev/null
+++ b/app/etkinlikler/page.tsx
@@ -0,0 +1,179 @@
+import Image from "next/image";
+import Link from "next/link";
+import { ArrowRight, Calendar, Clock, MapPin, Music } from "lucide-react";
+import ScrollReveal from "@/components/ScrollReveal";
+
+const events = [
+  {
+    id: "mahmut-orhan",
+    title: "Mahmut Orhan - Sunset Session",
+    date: "15 Ağustos 2026",
+    time: "18:00 - 23:30",
+    location: "Kite Beach Akyaka, Beach Club",
+    category: "Elektronik Müzik / DJ Performans",
+    price: "Biletler Yakında",
+    image: "https://images.unsplash.com/photo-1540039155732-680c74f07599?q=80&w=2832&auto=format&fit=crop",
+    description: "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. Bilet detayları çok yakında açıklanacaktır.",
+    featured: true,
+  },
+  {
+    id: "kite-festival",
+    title: "Akyaka Kitesurf Festivali '26",
+    date: "20-22 Eylül 2026",
+    time: "Tüm Gün",
+    location: "Kite Beach Sahili",
+    category: "Spor & Festival",
+    price: "Ücretsiz Katılım",
+    image: "https://images.unsplash.com/photo-1533000756353-909d73d2a3c7?q=80&w=2940&auto=format&fit=crop",
+    description: "Geleneksel Kitesurf festivalimiz bu yıl daha da büyük! Profesyonel yarışçılar, amatör denemeler, gün boyu müzik ve sahil etkinlikleri ile rüzgarın tadını çıkarın.",
+    featured: false,
+  },
+  {
+    id: "yoga-retreat",
+    title: "Dolunay Yoga & Meditasyon",
+    date: "28 Ekim 2026",
+    time: "19:00 - 21:00",
+    location: "Nehir Platformu",
+    category: "Wellness",
+    price: "₺450",
+    image: "https://images.unsplash.com/photo-1599901860904-17e08627c271?q=80&w=2940&auto=format&fit=crop",
+    description: "Dolunayın büyüleyici enerjisinde, Azmak Nehri'nin sessizliğinde özel bir yoga ve ses banyosu meditasyonu. Tüm seviyeler için uygundur. Matlar tarafımızdan temin edilir.",
+    featured: false,
+  }
+];
+
+export const metadata = {
+  title: "Etkinlikler | Kite Beach Akyaka",
+  description: "Mahmut Orhan konserinden Kitesurf festivallerine, Akyaka'daki en özel etkinlikler ve gün batımı partileri.",
+};
+
+export default function EventsPage() {
+  return (
+    <div className="flex flex-col min-h-screen bg-background">
+      
+      {/* ──────────────────────────────────────────
+          HERO
+      ────────────────────────────────────────── */}
+      <section className="relative h-[60vh] min-h-[500px] w-full flex items-center justify-center overflow-hidden">
+        <div className="absolute inset-0 z-0">
+          <Image
+            src="https://images.unsplash.com/photo-1514525253161-7a46d19cd819?q=80&w=2874&auto=format&fit=crop"
+            alt="Kite Beach Akyaka Etkinlikler"
+            fill
+            className="object-cover"
+            priority
+          />
+          <div className="absolute inset-0 bg-dark/60" />
+        </div>
+
+        <div className="relative z-10 text-center px-4 max-w-4xl mx-auto mt-16">
+          <ScrollReveal>
+            <span className="inline-block text-accent text-xs tracking-[0.35em] uppercase mb-4 font-bold">
+              Kite Beach Akyaka
+            </span>
+            <h1 className="font-serif text-5xl md:text-7xl font-bold text-white mb-6">
+              Etkinlikler
+            </h1>
+            <p className="text-white/80 text-lg md:text-xl font-light max-w-2xl mx-auto leading-relaxed">
+              Müzik, spor ve doğanın iç içe geçtiği unutulmaz deneyimler.
+            </p>
+          </ScrollReveal>
+        </div>
+      </section>
+
+      {/* ──────────────────────────────────────────
+          EVENTS LIST
+      ────────────────────────────────────────── */}
+      <section className="py-24">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+          
+          <div className="space-y-16">
+            {events.map((event, index) => (
+              <ScrollReveal key={event.id} delay={index * 100}>
+                <div className={`flex flex-col ${index % 2 === 1 ? 'md:flex-row-reverse' : 'md:flex-row'} gap-8 lg:gap-12 bg-white rounded-3xl overflow-hidden shadow-sm border border-sand transition-all hover:shadow-xl`}>
+                  
+                  {/* Image Container */}
+                  <div className="w-full md:w-1/2 lg:w-[55%] relative h-[300px] md:h-auto min-h-[400px]">
+                    <Image
+                      src={event.image}
+                      alt={event.title}
+                      fill
+                      className="object-cover"
+                    />
+                    {event.featured && (
+                      <div className="absolute top-4 left-4 bg-accent text-white px-4 py-1.5 rounded-full text-xs font-bold tracking-widest uppercase flex items-center gap-2 shadow-lg backdrop-blur-md">
+                        <Music className="w-3.5 h-3.5" />
+                        Öne Çıkan
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Content Container */}
+                  <div className="w-full md:w-1/2 lg:w-[45%] p-8 md:p-10 flex flex-col justify-center">
+                    <span className="text-primary text-[10px] tracking-[0.2em] font-bold uppercase mb-3 block">
+                      {event.category}
+                    </span>
+                    <h2 className="font-serif text-3xl md:text-4xl font-bold text-dark mb-6 leading-tight">
+                      {event.title}
+                    </h2>
+                    
+                    <div className="space-y-3 mb-6">
+                      <div className="flex items-center gap-3 text-sm text-gray-600">
+                        <Calendar className="w-4 h-4 text-accent" />
+                        <span>{event.date}</span>
+                      </div>
+                      <div className="flex items-center gap-3 text-sm text-gray-600">
+                        <Clock className="w-4 h-4 text-accent" />
+                        <span>{event.time}</span>
+                      </div>
+                      <div className="flex items-center gap-3 text-sm text-gray-600">
+                        <MapPin className="w-4 h-4 text-accent" />
+                        <span>{event.location}</span>
+                      </div>
+                    </div>
+
+                    <p className="text-muted text-sm leading-relaxed mb-8">
+                      {event.description}
+                    </p>
+
+                    <div className="flex items-center justify-between mt-auto pt-6 border-t border-sand">
+                      <span className="font-bold text-dark text-lg">{event.price}</span>
+                      <Link 
+                        href="/iletisim" 
+                        className={`inline-flex items-center gap-2 text-xs font-bold tracking-widest uppercase transition-colors ${
+                          event.featured ? 'bg-accent text-white px-6 py-3 rounded-full hover:bg-accent/90' : 'text-primary hover:text-accent'
+                        }`}
+                      >
+                        Bilet / Bilgi <ArrowRight className="w-4 h-4" />
+                      </Link>
+                    </div>
+                  </div>
+
+                </div>
+              </ScrollReveal>
+            ))}
+          </div>
+
+        </div>
+      </section>
+
+      {/* CTA BAND */}
+      <section className="bg-dark text-white py-24 text-center px-4">
+        <ScrollReveal>
+          <span className="block text-accent text-xs font-bold tracking-[0.25em] uppercase mb-4">Organizasyon</span>
+          <h2 className="font-serif text-4xl md:text-5xl font-bold mb-6">Kendi Etkinliğinizi Planlayın</h2>
+          <p className="text-white/60 max-w-xl mx-auto mb-10 leading-relaxed text-sm">
+            Özel partiler, düğünler veya kurumsal etkinlikler için Kite Beach Akyaka'nın eşsiz atmosferini kiralayabilirsiniz. Detaylar için bizimle iletişime geçin.
+          </p>
+          <Link
+            href="/iletisim"
+            className="inline-block border-2 border-white/20 hover:border-white px-10 py-4 rounded-full text-xs font-bold tracking-[0.15em] uppercase transition-all"
+          >
+            Bize Ulaşın
+          </Link>
+        </ScrollReveal>
+      </section>
+
+    </div>
+  );
+}
diff --git a/app/galeri/page.tsx b/app/galeri/page.tsx
new file mode 100644
index 0000000..001e0f8
--- /dev/null
+++ b/app/galeri/page.tsx
@@ -0,0 +1,115 @@
+"use client";
+
+import Image from "next/image";
+import { useState } from "react";
+
+const filters = ["Tümü", "Odalar", "Aktiviteler", "Restoran", "Doğa"] as const;
+type Filter = (typeof filters)[number];
+
+const gallery: { src: string; alt: string; category: Exclude<Filter, "Tümü"> }[] = [
+  { src: "https://images.unsplash.com/photo-1582719478250-c89404bb8a0e?q=80&w=2940&auto=format&fit=crop",   alt: "Standart Oda",       category: "Odalar"      },
+  { src: "https://images.unsplash.com/photo-1533000756353-909d73d2a3c7?q=80&w=2940&auto=format&fit=crop",   alt: "Kitesurf",           category: "Aktiviteler" },
+  { src: "https://images.unsplash.com/photo-1544551763-46a013bb70d5?q=80&w=2940&auto=format&fit=crop",       alt: "Nehir Doğa",         category: "Doğa"        },
+  { src: "https://images.unsplash.com/photo-1566665797739-1674de7a421a?q=80&w=2874&auto=format&fit=crop",   alt: "Nehir Manzaralı Oda",category: "Odalar"      },
+  { src: "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?q=80&w=2940&auto=format&fit=crop",   alt: "Restoran",           category: "Restoran"    },
+  { src: "https://images.unsplash.com/photo-1599901860904-17e08627c271?q=80&w=2940&auto=format&fit=crop",   alt: "Yoga",               category: "Aktiviteler" },
+  { src: "https://images.unsplash.com/photo-1499955085172-a104c9463ece?q=80&w=2940&auto=format&fit=crop",   alt: "Bungalow",           category: "Odalar"      },
+  { src: "https://images.unsplash.com/photo-1544606771-46abcf9dbb83?q=80&w=2924&auto=format&fit=crop",       alt: "SUP",                category: "Aktiviteler" },
+  { src: "https://images.unsplash.com/photo-1551504734-5ee1c4a1479b?q=80&w=2940&auto=format&fit=crop",       alt: "Kahvaltı",           category: "Restoran"    },
+  { src: "https://images.unsplash.com/photo-1511994298241-608e28f14fde?q=80&w=2940&auto=format&fit=crop",   alt: "Bisiklet",           category: "Aktiviteler" },
+  { src: "https://images.unsplash.com/photo-1544148103-0773bf10d330?q=80&w=2940&auto=format&fit=crop",       alt: "Restoran Ambiyans",  category: "Restoran"    },
+  { src: "https://images.unsplash.com/photo-1498623116890-37e912163d5d?q=80&w=2940&auto=format&fit=crop",   alt: "Gün Batımı",         category: "Doğa"        },
+];
+
+export default function GaleriPage() {
+  const [active, setActive] = useState<Filter>("Tümü");
+  const [lightbox, setLightbox] = useState<string | null>(null);
+
+  const filtered =
+    active === "Tümü" ? gallery : gallery.filter((g) => g.category === active);
+
+  return (
+    <div className="min-h-screen bg-background pt-28 pb-20">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+
+        {/* Heading */}
+        <div className="text-center mb-12">
+          <span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-4">
+            Fotoğraflar
+          </span>
+          <h1 className="font-serif text-5xl font-bold text-dark mb-4">Galeri</h1>
+          <p className="text-muted max-w-md mx-auto text-sm leading-relaxed">
+            Kite Beach Akyaka'nın eşsiz doğasını, modern odalarını ve heyecan verici aktivitelerini keşfedin.
+          </p>
+        </div>
+
+        {/* Filter tabs */}
+        <div className="flex flex-wrap justify-center gap-2 mb-12">
+          {filters.map((f) => (
+            <button
+              key={f}
+              onClick={() => setActive(f)}
+              className={`px-6 py-2.5 rounded-full text-[12px] font-bold tracking-wider uppercase transition-all duration-300 ${
+                active === f
+                  ? "bg-primary text-white shadow-md shadow-primary/20"
+                  : "bg-white text-dark border border-sand hover:border-primary/40 hover:text-primary"
+              }`}
+            >
+              {f}
+            </button>
+          ))}
+        </div>
+
+        {/* Grid */}
+        <div className="columns-1 sm:columns-2 md:columns-3 gap-4 space-y-4">
+          {filtered.map((img, idx) => (
+            <div
+              key={`${active}-${idx}`}
+              className="break-inside-avoid relative rounded-2xl overflow-hidden group cursor-pointer"
+              onClick={() => setLightbox(img.src)}
+              style={{ animation: `scale-in 0.4s cubic-bezier(0.16,1,0.3,1) ${idx * 40}ms both` }}
+            >
+              <div className="relative w-full" style={{ paddingBottom: idx % 3 === 0 ? "133%" : "75%" }}>
+                <Image
+                  src={img.src}
+                  alt={img.alt}
+                  fill
+                  className="object-cover group-hover:scale-105 transition-transform duration-700"
+                />
+                <div className="absolute inset-0 bg-dark/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
+                  <span className="text-white font-semibold text-[13px] tracking-wider bg-dark/60 backdrop-blur-sm px-4 py-2 rounded-full">
+                    {img.alt}
+                  </span>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+      </div>
+
+      {/* Lightbox */}
+      {lightbox && (
+        <div
+          className="fixed inset-0 z-50 bg-dark/95 flex items-center justify-center p-4 cursor-zoom-out"
+          onClick={() => setLightbox(null)}
+        >
+          <div className="relative max-w-5xl w-full max-h-[90vh] aspect-video">
+            <Image
+              src={lightbox}
+              alt="Galeri"
+              fill
+              className="object-contain rounded-xl"
+            />
+          </div>
+          <button
+            className="absolute top-6 right-6 text-white/60 hover:text-white transition-colors text-3xl font-light"
+            onClick={() => setLightbox(null)}
+          >
+            ×
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/app/globals.css b/app/globals.css
index a2dc41e..739daea 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,26 +1,218 @@
 @import "tailwindcss";
 
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  --background: #F5EDD6;
+  --foreground: #1C1C1C;
+  --primary: #1A6B8A;
+  --accent: #E87040;
+  --card: #FFFFFF;
+  --dark: #0E1A24;
+  --sand: #FBF6EC;
+  --muted: #9A9490;
 }
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --color-primary: var(--primary);
+  --color-accent: var(--accent);
+  --color-card: var(--card);
+  --color-dark: var(--dark);
+  --color-sand: var(--sand);
+  --color-muted: var(--muted);
+
+  --font-sans: var(--font-inter);
+  --font-serif: var(--font-playfair);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+*, *::before, *::after {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-sans), sans-serif;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-serif), serif;
+}
+
+/* =====================
+   KEYFRAME ANIMATIONS
+   ===================== */
+
+@keyframes shimmer-pass {
+  0%   { left: -100%; }
+  100% { left: 200%;  }
+}
+
+@keyframes float-y {
+  0%, 100% { transform: translateY(0);    }
+  50%       { transform: translateY(-10px); }
+}
+
+@keyframes gradient-pan {
+  0%   { background-position: 0%   50%; }
+  50%  { background-position: 100% 50%; }
+  100% { background-position: 0%   50%; }
+}
+
+@keyframes scroll-bounce {
+  0%, 100% { transform: translateY(0); opacity: 0.9; }
+  55%       { transform: translateY(8px); opacity: 0.3; }
+}
+
+@keyframes fade-up {
+  from { opacity: 0; transform: translateY(28px); }
+  to   { opacity: 1; transform: translateY(0);    }
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes scale-in {
+  from { opacity: 0; transform: scale(0.94); }
+  to   { opacity: 1; transform: scale(1);    }
+}
+
+@keyframes line-grow {
+  from { transform: scaleX(0); }
+  to   { transform: scaleX(1); }
+}
+
+/* =====================
+   ANIMATION UTILITIES
+   ===================== */
+
+.animate-fade-up {
+  animation: fade-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.animate-fade-in {
+  animation: fade-in 1s ease both;
+}
+
+.animate-scale-in {
+  animation: scale-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.animate-float {
+  animation: float-y 5s ease-in-out infinite;
+}
+
+.animate-gradient-pan {
+  background-size: 400% 400%;
+  animation: gradient-pan 10s ease infinite;
+}
+
+.animate-scroll-bounce {
+  animation: scroll-bounce 2s ease-in-out infinite;
+}
+
+.delay-100 { animation-delay: 0.1s; }
+.delay-200 { animation-delay: 0.2s; }
+.delay-300 { animation-delay: 0.3s; }
+.delay-400 { animation-delay: 0.4s; }
+.delay-500 { animation-delay: 0.5s; }
+.delay-600 { animation-delay: 0.6s; }
+.delay-700 { animation-delay: 0.7s; }
+.delay-800 { animation-delay: 0.8s; }
+
+/* =====================
+   SCROLL REVEAL
+   ===================== */
+
+.reveal {
+  opacity: 0;
+  transform: translateY(32px);
+  transition:
+    opacity  0.8s cubic-bezier(0.16, 1, 0.3, 1),
+    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.reveal.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.reveal-stagger > * {
+  opacity: 0;
+  transform: translateY(24px);
+  transition:
+    opacity  0.7s cubic-bezier(0.16, 1, 0.3, 1),
+    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.reveal-stagger.visible > *:nth-child(1) { opacity:1; transform:translateY(0); transition-delay:0s;    }
+.reveal-stagger.visible > *:nth-child(2) { opacity:1; transform:translateY(0); transition-delay:0.1s;  }
+.reveal-stagger.visible > *:nth-child(3) { opacity:1; transform:translateY(0); transition-delay:0.2s;  }
+.reveal-stagger.visible > *:nth-child(4) { opacity:1; transform:translateY(0); transition-delay:0.3s;  }
+.reveal-stagger.visible > *:nth-child(5) { opacity:1; transform:translateY(0); transition-delay:0.4s;  }
+
+/* =====================
+   SHIMMER BUTTON
+   ===================== */
+
+.btn-shimmer {
+  position: relative;
+  overflow: hidden;
+}
+
+.btn-shimmer::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 55%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.28),
+    transparent
+  );
+  transform: skewX(-15deg);
+  animation: shimmer-pass 3.5s ease-in-out infinite;
+}
+
+/* =====================
+   CARD LIFT HOVER
+   ===================== */
+
+.card-lift {
+  transition:
+    transform    0.4s cubic-bezier(0.16, 1, 0.3, 1),
+    box-shadow   0.4s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.card-lift:hover {
+  transform: translateY(-6px);
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.1);
+}
+
+/* =====================
+   GRADIENT TEXT
+   ===================== */
+
+.gradient-text {
+  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* =====================
+   SECTION DIVIDER
+   ===================== */
+
+.section-line {
+  width: 48px;
+  height: 3px;
+  background: var(--accent);
+  border-radius: 999px;
 }
diff --git a/app/hakkimizda/page.tsx b/app/hakkimizda/page.tsx
new file mode 100644
index 0000000..4a9d3a4
--- /dev/null
+++ b/app/hakkimizda/page.tsx
@@ -0,0 +1,155 @@
+import Image from "next/image";
+import { Leaf, ChefHat, Award } from "lucide-react";
+import ScrollReveal from "@/components/ScrollReveal";
+
+const values = [
+  {
+    icon: Leaf,
+    title: "Doğaya Saygı",
+    desc: "Tesisimizdeki tüm süreçlerde sıfır atık ve sürdürülebilirlik ilkelerini benimsiyoruz. Geleceğe duyarlı bir konaklama deneyimi sunuyoruz.",
+  },
+  {
+    icon: ChefHat,
+    title: "Lokal Mutfak",
+    desc: "Malzemelerimizin büyük bir bölümünü yerel üreticilerden ve Ege köylerinden temin ediyoruz. Taze, mevsimsel ve sürdürülebilir.",
+  },
+  {
+    icon: Award,
+    title: "Premium Deneyim",
+    desc: "IKO sertifikalı kitesurf okulumuzdandan odalarımıza kadar her noktada en yüksek kalite standartlarını sunuyoruz.",
+  },
+];
+
+const stats = [
+  { value: "10+", label: "Yıllık Deneyim" },
+  { value: "500+", label: "Mutlu Misafir"  },
+  { value: "3",    label: "IKO Sertifikalı Eğitmen" },
+  { value: "4",    label: "Benzersiz Aktivite" },
+];
+
+export default function HakkimizdaPage() {
+  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-1544551763-46a013bb70d5?q=80&w=2940&auto=format&fit=crop"
+            alt="Hakkımızda"
+            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">
+            Biz Kimiz
+          </span>
+          <h1 className="font-serif text-5xl md:text-7xl text-white font-bold animate-fade-up delay-100">
+            Hikayemiz
+          </h1>
+          <p className="text-white/60 text-lg mt-3 font-light animate-fade-up delay-200">
+            Rüzgarın, denizin ve nehrin kesiştiği yerde.
+          </p>
+        </div>
+      </section>
+
+      {/* Story */}
+      <section className="py-24 bg-white">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+            <ScrollReveal>
+              <span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-5">
+                Akyaka'nın Kalbinde
+              </span>
+              <h2 className="font-serif text-4xl font-bold text-dark mb-6 leading-tight">
+                Bir Tutku<br />Yolculuğu
+              </h2>
+              <div className="space-y-4 text-gray-500 leading-relaxed text-[15px]">
+                <p>
+                  Kite Beach Akyaka, Gökova Körfezi'nin kristal sularına dökülen Azmak Nehri'nin
+                  hemen kıyısında doğdu. Amacımız, misafirlerimize sıradan bir konaklamadan çok
+                  daha fazlasını sunmak; rüzgar sörfü tutkusunu doğayla, konforla ve iyi yemekle
+                  bütünleştiren eşsiz bir yaşam alanı yaratmaktı.
+                </p>
+                <p>
+                  Doğaya saygılı mimarimiz, lokal üreticileri destekleyen mutfağımız ve IKO
+                  standartlarındaki eğitim merkezimizle, Akyaka'nın sürdürülebilir turizm yüzü
+                  olmayı hedefliyoruz.
+                </p>
+              </div>
+            </ScrollReveal>
+
+            <ScrollReveal delay={150}>
+              <div className="relative h-[460px] 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"
+                />
+              </div>
+            </ScrollReveal>
+          </div>
+        </div>
+      </section>
+
+      {/* Stats */}
+      <section className="py-20 bg-primary">
+        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+          <ScrollReveal stagger className="grid grid-cols-2 md:grid-cols-4 gap-0 divide-x divide-white/10">
+            {stats.map((s, i) => (
+              <div key={i} className="text-center py-8 px-6">
+                <span className="block font-serif text-4xl font-bold text-white mb-2">{s.value}</span>
+                <span className="block text-white/50 text-[12px] uppercase tracking-wider">{s.label}</span>
+              </div>
+            ))}
+          </ScrollReveal>
+        </div>
+      </section>
+
+      {/* Values */}
+      <section className="py-24 bg-background">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+          <ScrollReveal className="text-center mb-14">
+            <span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-4">
+              Ne İnanıyoruz
+            </span>
+            <h2 className="font-serif text-4xl font-bold text-dark">Değerlerimiz</h2>
+          </ScrollReveal>
+
+          <ScrollReveal stagger className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            {values.map((v, i) => {
+              const Icon = v.icon;
+              return (
+                <div key={i} className="bg-white rounded-2xl p-8 border border-sand card-lift">
+                  <div className="w-12 h-12 bg-primary/8 rounded-xl flex items-center justify-center mb-6">
+                    <Icon size={22} className="text-primary" />
+                  </div>
+                  <h3 className="font-serif text-xl font-bold text-dark mb-3">{v.title}</h3>
+                  <p className="text-gray-500 text-[14px] leading-relaxed">{v.desc}</p>
+                </div>
+              );
+            })}
+          </ScrollReveal>
+        </div>
+      </section>
+
+      {/* Vision */}
+      <section className="py-24 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">
+              Vizyonumuz
+            </span>
+            <blockquote className="font-serif text-3xl md:text-4xl font-bold leading-tight mb-8">
+              "Akyaka'nın sürdürülebilir turizm yüzü olmak ve her misafirimize benzersiz bir kaçış sunmak."
+            </blockquote>
+            <div className="section-line mx-auto" />
+          </ScrollReveal>
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/app/iletisim/page.tsx b/app/iletisim/page.tsx
new file mode 100644
index 0000000..ffb1cef
--- /dev/null
+++ b/app/iletisim/page.tsx
@@ -0,0 +1,178 @@
+import { MapPin, Phone, Mail, Clock } from "lucide-react";
+import ScrollReveal from "@/components/ScrollReveal";
+
+export default function IletisimPage() {
+  return (
+    <div className="min-h-screen bg-background pt-28 pb-20">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+
+        {/* Heading */}
+        <div className="text-center mb-16">
+          <span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-4">
+            Bize Ulaşın
+          </span>
+          <h1 className="font-serif text-5xl font-bold text-dark mb-4">
+            İletişim & Rezervasyon
+          </h1>
+          <p className="text-muted max-w-lg mx-auto text-sm leading-relaxed">
+            Sorularınız veya rezervasyon talepleriniz için bizimle iletişime geçin.
+            Ekibimiz en kısa sürede dönüş yapacaktır.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-5 gap-10">
+
+          {/* Form — takes 3 cols */}
+          <ScrollReveal className="lg:col-span-3">
+            <div className="bg-white rounded-3xl p-10 md:p-12 border border-sand shadow-sm">
+              <h2 className="font-serif text-2xl font-bold text-dark mb-8">Mesaj Gönderin</h2>
+              <form className="space-y-6">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+                  <div>
+                    <label htmlFor="name" className="block text-[12px] font-semibold text-foreground/60 mb-2 tracking-wider uppercase">
+                      Ad Soyad
+                    </label>
+                    <input
+                      type="text"
+                      id="name"
+                      className="w-full px-4 py-3 rounded-xl border border-sand focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all bg-background text-[14px]"
+                      placeholder="Adınız Soyadınız"
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="phone" className="block text-[12px] font-semibold text-foreground/60 mb-2 tracking-wider uppercase">
+                      Telefon
+                    </label>
+                    <input
+                      type="tel"
+                      id="phone"
+                      className="w-full px-4 py-3 rounded-xl border border-sand focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all bg-background text-[14px]"
+                      placeholder="+90 (5XX) XXX XX XX"
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <label htmlFor="email" className="block text-[12px] font-semibold text-foreground/60 mb-2 tracking-wider uppercase">
+                    E-posta
+                  </label>
+                  <input
+                    type="email"
+                    id="email"
+                    className="w-full px-4 py-3 rounded-xl border border-sand focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all bg-background text-[14px]"
+                    placeholder="ornek@email.com"
+                  />
+                </div>
+
+                <div>
+                  <label htmlFor="subject" className="block text-[12px] font-semibold text-foreground/60 mb-2 tracking-wider uppercase">
+                    Konu
+                  </label>
+                  <select
+                    id="subject"
+                    className="w-full px-4 py-3 rounded-xl border border-sand focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all bg-background text-[14px] text-foreground"
+                  >
+                    <option>Oda Rezervasyonu</option>
+                    <option>Kitesurf Dersi / Kiralama</option>
+                    <option>Restoran Rezervasyonu</option>
+                    <option>Aktivite Bilgisi</option>
+                    <option>Diğer</option>
+                  </select>
+                </div>
+
+                <div>
+                  <label htmlFor="message" className="block text-[12px] font-semibold text-foreground/60 mb-2 tracking-wider uppercase">
+                    Mesajınız
+                  </label>
+                  <textarea
+                    id="message"
+                    rows={5}
+                    className="w-full px-4 py-3 rounded-xl border border-sand focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all bg-background text-[14px] resize-none"
+                    placeholder="Talebinizi buraya yazabilirsiniz..."
+                  />
+                </div>
+
+                <button
+                  type="button"
+                  className="btn-shimmer w-full bg-accent text-white py-4 rounded-xl text-[12px] font-bold tracking-[0.15em] uppercase hover:bg-accent/90 transition-colors shadow-lg"
+                >
+                  Mesaj Gönder
+                </button>
+              </form>
+            </div>
+          </ScrollReveal>
+
+          {/* Sidebar — takes 2 cols */}
+          <ScrollReveal delay={200} className="lg:col-span-2 flex flex-col gap-6">
+
+            {/* Contact info card */}
+            <div className="bg-primary rounded-3xl p-8 text-white">
+              <h3 className="font-serif text-xl font-bold mb-7">İletişim Bilgileri</h3>
+              <ul className="space-y-6">
+                {[
+                  {
+                    icon: MapPin,
+                    label: "Adres",
+                    value: "Akyaka Mahallesi, Akçapınar Mevkii, Muğla",
+                    href: undefined,
+                  },
+                  {
+                    icon: Phone,
+                    label: "Telefon / WhatsApp",
+                    value: "+90 533 081 6181",
+                    href: "tel:+905330816181",
+                  },
+                  {
+                    icon: Mail,
+                    label: "E-posta",
+                    value: "info@kitebeachakyaka.com.tr",
+                    href: "mailto:info@kitebeachakyaka.com.tr",
+                  },
+                  {
+                    icon: Clock,
+                    label: "Resepsiyon",
+                    value: "Her gün 08:00 – 22:00",
+                    href: undefined,
+                  },
+                ].map(({ icon: Icon, label, value, href }) => (
+                  <li key={label} className="flex items-start gap-4">
+                    <div className="w-9 h-9 bg-white/10 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
+                      <Icon size={15} className="text-accent" />
+                    </div>
+                    <div>
+                      <span className="block text-[10px] font-bold tracking-[0.2em] uppercase text-white/40 mb-1">
+                        {label}
+                      </span>
+                      {href ? (
+                        <a href={href} className="text-white/80 hover:text-white transition-colors text-[13px]">
+                          {value}
+                        </a>
+                      ) : (
+                        <span className="text-white/80 text-[13px]">{value}</span>
+                      )}
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            {/* Map */}
+            <div className="rounded-3xl overflow-hidden border border-sand flex-grow min-h-[220px] relative">
+              <iframe
+                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12759.395175968393!2d28.3245!3d37.0564!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14bf76cd1f1f1d1f%3A0x1d1f1f1f1f1f1f1f!2sAkyaka%2C%20Ula%2FMuğla!5e0!3m2!1str!2str!4v1650000000000!5m2!1str!2str"
+                width="100%"
+                height="100%"
+                style={{ border: 0 }}
+                allowFullScreen
+                loading="lazy"
+                referrerPolicy="no-referrer-when-downgrade"
+                className="absolute inset-0"
+              />
+            </div>
+
+          </ScrollReveal>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index 976eb90..f8c9d80 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,20 +1,23 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Inter, Playfair_Display } from "next/font/google";
 import "./globals.css";
+import Navbar from "@/components/Navbar";
+import Footer from "@/components/Footer";
+import WhatsAppButton from "@/components/WhatsAppButton";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
+const inter = Inter({
+  variable: "--font-inter",
   subsets: ["latin"],
 });
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+const playfair = Playfair_Display({
+  variable: "--font-playfair",
   subsets: ["latin"],
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Kite Beach Akyaka | Kitesurf & Butik Otel",
+  description: "Nehrin huzuru, denizin enerjisi — tek bir noktada. Kite Beach Akyaka butik otel ve kitesurf merkezine hoş geldiniz.",
 };
 
 export default function RootLayout({
@@ -24,10 +27,15 @@ export default function RootLayout({
 }>) {
   return (
     <html
-      lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+      lang="tr"
+      className={`${inter.variable} ${playfair.variable} h-full antialiased scroll-smooth`}
     >
-      <body className="min-h-full flex flex-col">{children}</body>
+      <body className="min-h-full flex flex-col bg-background text-foreground">
+        <Navbar />
+        <main className="flex-grow">{children}</main>
+        <Footer />
+        <WhatsAppButton />
+      </body>
     </html>
   );
 }
diff --git a/app/odalar/page.tsx b/app/odalar/page.tsx
new file mode 100644
index 0000000..d835291
--- /dev/null
+++ b/app/odalar/page.tsx
@@ -0,0 +1,160 @@
+import Image from "next/image";
+import Link from "next/link";
+import { Check, Wifi, Wind, Coffee, Eye, Trees } from "lucide-react";
+import ScrollReveal from "@/components/ScrollReveal";
+
+const rooms = [
+  {
+    img: "https://images.unsplash.com/photo-1582719478250-c89404bb8a0e?q=80&w=2940&auto=format&fit=crop",
+    tag: "Standart",
+    name: "Standart Oda",
+    desc: "Konforlu ve modern tasarımlı standart odalarımızda rahatlığın tadını çıkarın. Çift kişilik yatak ve şık dekorasyon ile dinlendirici bir atmosfer.",
+    sqm: "20 m²",
+    price: "₺4.500",
+    features: [
+      { icon: Wifi,    label: "Ücretsiz Wi-Fi"  },
+      { icon: Wind,    label: "Klima"            },
+      { icon: Coffee,  label: "Minibar"          },
+      { icon: Eye,     label: "Bahçe Manzarası"  },
+    ],
+    reversed: false,
+  },
+  {
+    img: "https://images.unsplash.com/photo-1566665797739-1674de7a421a?q=80&w=2874&auto=format&fit=crop",
+    tag: "Popüler",
+    name: "Nehir Manzaralı Oda",
+    desc: "Güne Azmak nehrinin eşsiz manzarası eşliğinde uyanacağınız ferah odalar. Balkonunuzda sabah kahvenizi yudumlarken doğanın sesini dinleyin.",
+    sqm: "25 m²",
+    price: "₺5.500",
+    features: [
+      { icon: Eye,     label: "Nehir Manzarası"   },
+      { icon: Trees,   label: "Özel Balkon"        },
+      { icon: Coffee,  label: "Nespresso Makinesi" },
+      { icon: Wifi,    label: "Ücretsiz Wi-Fi"     },
+    ],
+    reversed: true,
+  },
+  {
+    img: "https://images.unsplash.com/photo-1499955085172-a104c9463ece?q=80&w=2940&auto=format&fit=crop",
+    tag: "Premium",
+    name: "Ahşap Bungalow",
+    desc: "Doğayla tamamen iç içe, bağımsız girişli ve teraslı ahşap tasarımlı yaşam alanı. Gizlilik ve huzur arayan çiftler için ideal.",
+    sqm: "35 m²",
+    price: "₺7.000",
+    features: [
+      { icon: Trees,   label: "Özel Teras"       },
+      { icon: Eye,     label: "Doğa Manzarası"   },
+      { icon: Coffee,  label: "Premium İkramlar" },
+      { icon: Wind,    label: "Klima"            },
+    ],
+    reversed: false,
+  },
+];
+
+export default function OdalarPage() {
+  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-1582719478250-c89404bb8a0e?q=80&w=2940&auto=format&fit=crop"
+            alt="Odalarımız"
+            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">
+            Konaklama
+          </span>
+          <h1 className="font-serif text-5xl md:text-7xl text-white font-bold animate-fade-up delay-100">
+            Odalarımız
+          </h1>
+          <p className="text-white/60 text-lg mt-3 font-light animate-fade-up delay-200">
+            Doğanın içinde, konforlu bir mola.
+          </p>
+        </div>
+      </section>
+
+      {/* Room Listings */}
+      <section className="py-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="space-y-16">
+          {rooms.map((room, i) => (
+            <ScrollReveal key={i}>
+              <div
+                className={`grid grid-cols-1 md:grid-cols-2 gap-0 bg-white rounded-3xl overflow-hidden shadow-sm border border-sand ${
+                  room.reversed ? "" : ""
+                }`}
+              >
+                {/* Image */}
+                <div className={`relative h-80 md:h-auto ${room.reversed ? "md:order-2" : ""}`}>
+                  <Image
+                    src={room.img}
+                    alt={room.name}
+                    fill
+                    className="object-cover"
+                  />
+                  {/* Tag */}
+                  <span className="absolute top-5 left-5 bg-dark/80 backdrop-blur-sm text-white text-[10px] font-bold px-3 py-1.5 rounded-full tracking-widest uppercase">
+                    {room.tag}
+                  </span>
+                </div>
+
+                {/* Content */}
+                <div className={`p-10 md:p-14 flex flex-col justify-center ${room.reversed ? "md:order-1" : ""}`}>
+                  <span className="text-muted text-xs tracking-[0.2em] uppercase mb-3 block">{room.sqm}</span>
+                  <h2 className="font-serif text-3xl font-bold text-dark mb-4">{room.name}</h2>
+                  <p className="text-gray-500 mb-8 leading-relaxed text-[15px]">{room.desc}</p>
+
+                  <div className="grid grid-cols-2 gap-3 mb-10">
+                    {room.features.map(({ icon: Icon, label }, j) => (
+                      <div key={j} className="flex items-center gap-2.5">
+                        <div className="w-7 h-7 rounded-full bg-primary/8 flex items-center justify-center flex-shrink-0">
+                          <Icon size={13} className="text-primary" />
+                        </div>
+                        <span className="text-[13px] text-foreground/70">{label}</span>
+                      </div>
+                    ))}
+                  </div>
+
+                  <div className="flex justify-between items-center pt-8 border-t border-sand">
+                    <div>
+                      <span className="text-muted text-xs block mb-1 uppercase tracking-wider">Gecelik</span>
+                      <span className="font-serif text-3xl font-bold text-dark">{room.price}</span>
+                    </div>
+                    <Link
+                      href="/iletisim"
+                      className="btn-shimmer bg-accent text-white px-7 py-3.5 rounded-full text-[11px] font-bold tracking-[0.12em] uppercase hover:bg-accent/90 transition-colors shadow-lg"
+                    >
+                      Rezervasyon Yap
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            </ScrollReveal>
+          ))}
+        </div>
+      </section>
+
+      {/* Info strip */}
+      <section className="py-16 bg-primary">
+        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <h3 className="font-serif text-3xl text-white font-bold mb-4">
+            Tüm odalarda dahil olanlar
+          </h3>
+          <div className="flex flex-wrap justify-center gap-4 mt-8">
+            {["Organik Serpme Kahvaltı", "Ücretsiz Otopark", "Plaj & Nehir Erişimi", "Şezlong & Havlu", "Wi-Fi", "24/7 Resepsiyon"].map((item) => (
+              <span key={item} className="inline-flex items-center gap-2 bg-white/10 text-white text-[13px] px-4 py-2 rounded-full border border-white/15">
+                <Check size={13} className="text-accent" />
+                {item}
+              </span>
+            ))}
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
index 3f36f7c..fd1eadc 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -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>
   );
 }
diff --git a/app/restoran/page.tsx b/app/restoran/page.tsx
new file mode 100644
index 0000000..35838b4
--- /dev/null
+++ b/app/restoran/page.tsx
@@ -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>
+  );
+}
diff --git a/components/Footer.tsx b/components/Footer.tsx
new file mode 100644
index 0000000..3ae4a57
--- /dev/null
+++ b/components/Footer.tsx
@@ -0,0 +1,162 @@
+import Link from "next/link";
+import { MapPin, Phone, Mail } from "lucide-react";
+
+const quickLinks = [
+  { name: "Ana Sayfa",   href: "/"           },
+  { name: "Odalar",      href: "/odalar"     },
+  { name: "Aktiviteler", href: "/aktiviteler"},
+  { name: "Restoran",    href: "/restoran"   },
+  { name: "Etkinlikler", href: "/etkinlikler"},
+  { name: "Galeri",      href: "/galeri"     },
+  { name: "Hakkımızda",  href: "/hakkimizda" },
+];
+
+function InstagramIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <rect width="20" height="20" x="2" y="2" rx="5" ry="5"/>
+      <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
+      <line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/>
+    </svg>
+  );
+}
+
+function FacebookIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
+    </svg>
+  );
+}
+
+function YoutubeIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17"/>
+      <path d="m10 15 5-3-5-3z"/>
+    </svg>
+  );
+}
+
+export default function Footer() {
+  return (
+    <footer className="bg-dark text-white">
+      {/* Top accent line */}
+      <div className="h-px bg-gradient-to-r from-transparent via-accent to-transparent opacity-40" />
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-16 pb-10">
+        <div className="grid grid-cols-1 md:grid-cols-12 gap-12 mb-12">
+
+          {/* Brand */}
+          <div className="md:col-span-4">
+            <Link href="/" className="inline-block mb-5">
+              <div>
+                <span className="font-serif text-2xl font-bold tracking-[0.08em] text-white block">
+                  KITE BEACH
+                </span>
+                <span className="text-[9px] tracking-[0.3em] text-white/30 uppercase">Akyaka</span>
+              </div>
+            </Link>
+            <p className="text-white/40 text-[13px] leading-relaxed mb-7 max-w-xs">
+              Nehrin huzuru, denizin enerjisi — tek bir noktada. Akyaka'nın kalbinde butik bir kaçış noktası.
+            </p>
+            {/* Social icons */}
+            <div className="flex gap-3">
+              {[
+                { icon: <InstagramIcon />, href: "#", label: "Instagram" },
+                { icon: <FacebookIcon />,  href: "#", label: "Facebook"  },
+                { icon: <YoutubeIcon />,   href: "#", label: "YouTube"   },
+              ].map(({ icon, href, label }) => (
+                <a
+                  key={label}
+                  href={href}
+                  aria-label={label}
+                  className="w-9 h-9 rounded-full border border-white/10 flex items-center justify-center text-white/40 hover:text-accent hover:border-accent/40 transition-all duration-300"
+                >
+                  {icon}
+                </a>
+              ))}
+            </div>
+          </div>
+
+          {/* Quick Links */}
+          <div className="md:col-span-3">
+            <h3 className="text-[11px] font-bold tracking-[0.25em] text-white/30 uppercase mb-6">
+              Sayfalar
+            </h3>
+            <ul className="space-y-3">
+              {quickLinks.map((link) => (
+                <li key={link.name}>
+                  <Link
+                    href={link.href}
+                    className="text-[13px] text-white/50 hover:text-white transition-colors"
+                  >
+                    {link.name}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Contact */}
+          <div className="md:col-span-5">
+            <h3 className="text-[11px] font-bold tracking-[0.25em] text-white/30 uppercase mb-6">
+              İletişim
+            </h3>
+            <ul className="space-y-5">
+              <li className="flex items-start gap-3">
+                <div className="mt-0.5 w-7 h-7 rounded-full bg-white/5 flex items-center justify-center flex-shrink-0">
+                  <MapPin size={13} className="text-accent" />
+                </div>
+                <span className="text-white/50 text-[13px] leading-relaxed">
+                  Akyaka Mahallesi, Akçapınar Mevkii<br />Muğla, Türkiye
+                </span>
+              </li>
+              <li className="flex items-center gap-3">
+                <div className="w-7 h-7 rounded-full bg-white/5 flex items-center justify-center flex-shrink-0">
+                  <Phone size={13} className="text-accent" />
+                </div>
+                <a
+                  href="tel:+905330816181"
+                  className="text-white/50 hover:text-white transition-colors text-[13px]"
+                >
+                  +90 533 081 6181
+                </a>
+              </li>
+              <li className="flex items-center gap-3">
+                <div className="w-7 h-7 rounded-full bg-white/5 flex items-center justify-center flex-shrink-0">
+                  <Mail size={13} className="text-accent" />
+                </div>
+                <a
+                  href="mailto:info@kitebeachakyaka.com.tr"
+                  className="text-white/50 hover:text-white transition-colors text-[13px]"
+                >
+                  info@kitebeachakyaka.com.tr
+                </a>
+              </li>
+            </ul>
+          </div>
+
+        </div>
+
+        {/* Bottom bar */}
+        <div className="border-t border-white/8 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
+          <p className="text-white/25 text-xs">
+            © 2026 Kite Beach Akyaka. Tüm hakları saklıdır.
+          </p>
+          <div className="flex gap-6">
+            {["KVKK", "Gizlilik Politikası", "Çerez Politikası"].map((item) => (
+              <Link
+                key={item}
+                href="#"
+                className="text-white/25 hover:text-white/60 transition-colors text-xs"
+              >
+                {item}
+              </Link>
+            ))}
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/components/HeroVideo.tsx b/components/HeroVideo.tsx
new file mode 100644
index 0000000..adbcb20
--- /dev/null
+++ b/components/HeroVideo.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+
+export default function HeroVideo() {
+  const [isVideoLoaded, setIsVideoLoaded] = useState(false);
+
+  return (
+    <div className="absolute inset-0 z-0 bg-dark overflow-hidden pointer-events-none">
+      <Image
+        src="https://img.youtube.com/vi/V9AhK54xsxY/maxresdefault.jpg"
+        alt="Kite Beach Akyaka Video Thumbnail"
+        fill
+        className={`object-cover transition-opacity duration-1000 ease-in-out ${
+          isVideoLoaded ? "opacity-0" : "opacity-80"
+        }`}
+        priority
+      />
+      <iframe
+        src="https://www.youtube.com/embed/V9AhK54xsxY?autoplay=1&mute=1&loop=1&playlist=V9AhK54xsxY&controls=0&showinfo=0&rel=0&iv_load_policy=3&modestbranding=1&start=140&disablekb=1"
+        title="Kite Beach Akyaka Video"
+        frameBorder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        allowFullScreen
+        onLoad={() => {
+          // Add a slight delay to ensure the video has actually started rendering
+          setTimeout(() => setIsVideoLoaded(true), 1500);
+        }}
+        className={`absolute top-1/2 left-1/2 w-[100vw] h-[56.25vw] min-h-[100vh] min-w-[177.77vh] -translate-x-1/2 -translate-y-1/2 object-cover transition-opacity duration-1000 ${
+          isVideoLoaded ? "opacity-80" : "opacity-0"
+        }`}
+      ></iframe>
+      <div className="absolute inset-0 bg-gradient-to-b from-black/40 via-transparent to-dark/90" />
+      <div className="absolute inset-0 bg-gradient-to-r from-dark/30 to-transparent" />
+    </div>
+  );
+}
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
new file mode 100644
index 0000000..9d5e4ca
--- /dev/null
+++ b/components/Navbar.tsx
@@ -0,0 +1,151 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { motion, AnimatePresence } from "framer-motion";
+import { Menu, X } from "lucide-react";
+
+const navLinks = [
+  // { name: "Odalar",     href: "/odalar"     },
+  { name: "Aktiviteler",href: "/aktiviteler"},
+  { name: "Restoran",   href: "/restoran"   },
+  { name: "Etkinlikler",href: "/etkinlikler"},
+  { name: "Galeri",     href: "/galeri"     },
+  { name: "Hakkımızda", href: "/hakkimizda" },
+  { name: "İletişim",   href: "/iletisim"   },
+];
+
+export default function Navbar() {
+  const [isOpen, setIsOpen]   = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+  const pathname = usePathname();
+
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 60);
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+
+  useEffect(() => { setIsOpen(false); }, [pathname]);
+
+  const isHome = pathname === "/";
+
+  return (
+    <nav
+      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${
+        scrolled
+          ? "bg-white/95 backdrop-blur-md shadow-sm py-4"
+          : "bg-transparent py-6"
+      }`}
+    >
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center">
+
+          {/* Logo */}
+          <Link href="/" className="flex-shrink-0 flex flex-col leading-none group">
+            <span
+              className={`font-serif text-xl font-bold tracking-[0.08em] transition-colors ${
+                scrolled ? "text-primary" : isHome ? "text-white" : "text-primary"
+              }`}
+            >
+              KITE BEACH
+            </span>
+            <span
+              className={`text-[9px] tracking-[0.3em] uppercase font-medium transition-colors ${
+                scrolled ? "text-muted" : isHome ? "text-white/50" : "text-muted"
+              }`}
+            >
+              Akyaka
+            </span>
+          </Link>
+
+          {/* Desktop links */}
+          <div className="hidden md:flex md:items-center md:gap-8">
+            {navLinks.map((link) => {
+              const active = pathname === link.href;
+              return (
+                <Link
+                  key={link.name}
+                  href={link.href}
+                  className={`text-[13px] font-medium transition-colors relative group ${
+                    scrolled
+                      ? active ? "text-primary" : "text-foreground hover:text-primary"
+                      : isHome
+                        ? active ? "text-accent" : "text-white/85 hover:text-white"
+                        : active ? "text-primary" : "text-foreground hover:text-primary"
+                  }`}
+                >
+                  {link.name}
+                  <span
+                    className={`absolute -bottom-0.5 left-0 h-px bg-current transition-all duration-300 ${
+                      active ? "w-full" : "w-0 group-hover:w-full"
+                    }`}
+                  />
+                </Link>
+              );
+            })}
+
+            <Link
+              href="/iletisim"
+              className="btn-shimmer bg-accent text-white px-6 py-2.5 rounded-full text-[11px] font-bold tracking-[0.12em] uppercase hover:bg-accent/90 transition-colors shadow-md"
+            >
+              Rezervasyon
+            </Link>
+          </div>
+
+          {/* Mobile toggle */}
+          <button
+            onClick={() => setIsOpen(!isOpen)}
+            className={`flex md:hidden p-1 transition-colors ${
+              scrolled ? "text-dark" : isHome ? "text-white" : "text-dark"
+            }`}
+            aria-label="Menü"
+          >
+            {isOpen ? <X size={26} /> : <Menu size={26} />}
+          </button>
+        </div>
+      </div>
+
+      {/* Mobile Menu */}
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            key="mobile-menu"
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: "auto" }}
+            exit={{ opacity: 0, height: 0 }}
+            transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
+            className="md:hidden overflow-hidden bg-white border-t border-sand"
+          >
+            <div className="px-5 py-5 flex flex-col gap-1">
+              {navLinks.map((link, i) => (
+                <motion.div
+                  key={link.name}
+                  initial={{ opacity: 0, x: -10 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  transition={{ delay: i * 0.05 }}
+                >
+                  <Link
+                    href={link.href}
+                    className={`block py-3 text-base font-medium border-b border-sand/60 transition-colors ${
+                      pathname === link.href ? "text-primary" : "text-dark hover:text-primary"
+                    }`}
+                  >
+                    {link.name}
+                  </Link>
+                </motion.div>
+              ))}
+              <Link
+                href="/iletisim"
+                className="mt-4 block w-full text-center bg-accent text-white px-6 py-3.5 rounded-full text-sm font-bold uppercase tracking-wider"
+              >
+                Rezervasyon Yap
+              </Link>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </nav>
+  );
+}
diff --git a/components/ScrollReveal.tsx b/components/ScrollReveal.tsx
new file mode 100644
index 0000000..cbb526b
--- /dev/null
+++ b/components/ScrollReveal.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+interface ScrollRevealProps {
+  children: React.ReactNode;
+  className?: string;
+  stagger?: boolean;
+  delay?: number;
+  threshold?: number;
+}
+
+export default function ScrollReveal({
+  children,
+  className = "",
+  stagger = false,
+  delay = 0,
+  threshold = 0.12,
+}: ScrollRevealProps) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            const trigger = () => el.classList.add("visible");
+            delay > 0 ? setTimeout(trigger, delay) : trigger();
+            observer.unobserve(entry.target);
+          }
+        });
+      },
+      { threshold }
+    );
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [delay, threshold]);
+
+  return (
+    <div
+      ref={ref}
+      className={`${stagger ? "reveal-stagger" : "reveal"} ${className}`}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/components/WhatsAppButton.tsx b/components/WhatsAppButton.tsx
new file mode 100644
index 0000000..6b1fe93
--- /dev/null
+++ b/components/WhatsAppButton.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import { MessageCircle } from "lucide-react";
+import { motion } from "framer-motion";
+
+export default function WhatsAppButton() {
+  return (
+    <motion.a
+      href="https://wa.me/905330816181"
+      target="_blank"
+      rel="noopener noreferrer"
+      className="fixed bottom-6 right-6 z-50 flex items-center justify-center w-14 h-14 bg-green-500 text-white rounded-full shadow-lg hover:shadow-2xl hover:bg-green-600 transition-all focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
+      aria-label="WhatsApp üzerinden bizimle iletişime geçin"
+      initial={{ scale: 0 }}
+      animate={{ scale: 1 }}
+      transition={{ 
+        type: "spring", 
+        stiffness: 260, 
+        damping: 20,
+        delay: 1 
+      }}
+      whileHover={{ scale: 1.1 }}
+      whileTap={{ scale: 0.9 }}
+    >
+      <MessageCircle size={28} />
+    </motion.a>
+  );
+}
diff --git a/docs/prd.md b/docs/prd.md
new file mode 100644
index 0000000..a46ade2
--- /dev/null
+++ b/docs/prd.md
@@ -0,0 +1,272 @@
+# 🌊 Kite Beach Akyaka — Web Sitesi Yenileme Promptu
+
+## 📋 Mevcut Site Analizi
+
+### Site Hakkında
+- **URL:** https://www.kitebeachakyaka.com.tr/
+- **İşletme Türü:** Butik otel + kitesurf merkezi, Akyaka / Muğla
+- **Platform:** WordPress tabanlı
+
+### Mevcut Site Yapısı
+- Tek sayfalık (one-page) basit bir web sitesi
+- **Navigasyon:** Sadece 1 menü öğesi var → "KURUMSAL" (dış siteye bağlantı: moygroup.com.tr)
+- **İçerik Bölümleri:**
+  1. Üst kısım: Logo + tek menü öğesi
+  2. Hero area: "KITE BEACH / WELCOME TO" metin + fotoğraf galerisi (siyah-beyaz görseller)
+  3. "KITE BEACH AKYAKA OTEL" başlığı + tanıtım metni
+  4. Oda/iç mekan fotoğrafları (renkli — oda ve banyo)
+  5. "Rezervasyon Yap" CTA butonu (telefona yönlendiriyor: tel:05330816181)
+  6. YouTube video embed
+  7. Google Maps harita
+  8. Footer: Sadece © 2026 Kite Beach Akyaka.
+- **Sabit Elementler:** Sol alt köşede "Hemen Ara" floating butonu
+
+---
+
+## 🔴 Tespit Edilen Sorunlar ve Eksiklikler
+
+### Yapısal Sorunlar
+- Navigasyon menüsü neredeyse boş — sadece 1 harici link var, hiç iç sayfa yok
+- "KURUMSAL" linki kendi sitesine değil, grup şirketi sitesine yönlendiriyor
+- Tek sayfa düzeni, SEO açısından son derece zayıf
+- Sayfa başlığı (hero) karanlık/eksik görünüyor — tam görsel hero slider yok
+
+### İçerik Eksiklikleri
+- Oda kategorileri ve detayları yok (oda tipleri, kapasite, fiyat)
+- Aktiviteler sayfası yok (Kitesurf dersleri, kamp seçenekleri, yoga vb.)
+- Restoran/yemek bilgisi yok
+- Hakkımızda / hikaye sayfası yok
+- İletişim formu yok — sadece telefon numarası var
+- Blog / haberler bölümü yok
+- Sosyal medya linkleri footer'da yer almıyor
+- Dil seçeneği yok (EN / TR)
+
+### Tasarım Sorunları
+- Siyah-beyaz fotoğraf kullanımı tutarsız: üst bölüm siyah-beyaz, oda fotoğrafları renkli
+- Renk paleti tanımsız — beyaz/siyah dışında marka rengi kullanılmıyor
+- Tipografi tek düze, hiyerarşi eksik
+- Fazla boş alan (beyaz boşluk) bölümler arası geçişlerde kullanıcıyı şaşırtıyor
+- Mobil uyumluluk kontrol edilmeli
+- "Rezervasyon Yap" butonu yalnızca telefona yönlendiriyor — online rezervasyon yok
+
+### UX/CX Sorunları
+- Online rezervasyon sistemi entegrasyonu yok
+- Fiyat bilgisi hiç yok
+- Misafir yorumları / testimonial bölümü yok
+- SSS (sık sorulan sorular) yok
+- Ulaşım bilgisi yetersiz (harita var ama yol tarifi/transfer yok)
+
+---
+
+## ✅ Güçlü Yönler (Korunacaklar)
+- Logo tasarımı özgün ve ilgi çekici (döngüsel kite teması)
+- "Hemen Ara" floating butonu kullanışlı
+- Google Maps entegrasyonu mevcut
+- YouTube video alanı var
+- Tanıtım metni duygusal ve akıcı yazılmış
+
+---
+
+## 🎯 YENİLEME PROMPTU
+
+> Aşağıdaki prompt, bir web tasarımcısı, geliştirici veya yapay zeka aracına (Cursor, Lovable, v0, Framer, vb.) verilebilir.
+
+---
+
+### PROMPT
+
+**Kite Beach Akyaka** için tamamen yeniden tasarlanmış, modern, dönüşüm odaklı ve SEO uyumlu bir web sitesi oluştur.
+
+---
+
+#### 🏨 İşletme Profili
+- **İsim:** Kite Beach Akyaka
+- **Tür:** Butik otel + kitesurf & outdoor aktivite merkezi
+- **Konum:** Akyaka, Muğla, Türkiye (nehir-deniz kesişim noktası)
+- **Hedef Kitle:** Macera seven yetişkinler, kitesurf meraklıları, doğa tatili arayanlar, yoga & wellness tutkunları
+- **Dil:** Türkçe (birincil) + İngilizce (ikincil — dil değiştirme butonu)
+- **Ton:** Minimal, doğaya saygılı, enerjik ama sakin, premium butik
+
+---
+
+#### 🗂️ Site Yapısı (Sayfalar)
+
+1. **Ana Sayfa (Home)**
+2. **Odalar & Bungalowlar**
+3. **Aktiviteler** (Kitesurf, Yoga, SUP, Bisiklet vb.)
+4. **Restoran & Bar**
+5. **Galeri**
+6. **Hakkımızda**
+7. **İletişim & Rezervasyon**
+
+---
+
+#### 🖥️ SAYFA SAYFA DETAYLAR
+
+##### 1. ANA SAYFA
+
+**Hero Section**
+- Tam ekran video veya yüksek çözünürlüklü slider (mavi gökyüzü, uçan uçurtma, nehir, günbatımı)
+- Üzerine: `KITE BEACH AKYAKA` büyük başlık + küçük tagline: _"Nehrin huzuru, denizin enerjisi — tek bir noktada."_
+- İki CTA butonu: `[Rezervasyon Yap]` ve `[Aktiviteleri Keşfet]`
+- Scroll-down animasyonu
+
+**Hızlı Özellikler Bandı** (ikonlarla, yatay şerit)
+- 🏄 Kitesurf Okulu | 🧘 Yoga Platformu | 🍽️ Nehir Manzaralı Restoran | 🛏️ Butik Odalar | 🌅 Gün Batımı Terrası
+
+**Hakkımızda Özet**
+- 2 kolonlu: sol → atmosferik fotoğraf, sağ → kısa metin + "Daha Fazlası" butonu
+
+**Odalar Önizleme**
+- 3 kart: oda tipi, fotoğraf, kısa açıklama, fiyat aralığı, "İncele" butonu
+
+**Aktiviteler Grid**
+- 4 kart (Kitesurf, Yoga, SUP, Plaj Voleybolu vb.) — hover animasyonlu
+
+**Misafir Yorumları (Testimonials)**
+- Carousel slider, Google/Booking yorumlarından alıntı, 5 yıldız gösterimi
+
+**Instagram Duvarı**
+- Son 6-9 Instagram gönderisi çekilen grid, @kitebeachakyaka bağlantısıyla
+
+**Rezervasyon CTA Bandı**
+- Koyu/gradyan arka plan üzerinde: _"Hayalindeki tatili planlamaya hazır mısın?"_
+- `[Hemen Rezervasyon Yap]` belirgin turuncu/altın buton
+
+---
+
+##### 2. ODALAR & BUNGALOWLAR
+
+- Her oda için: büyük fotoğraf galerisi, oda adı, m² bilgisi, max kapasite, özellikler listesi (klima, wifi, minibar, manzara vb.), gece başına fiyat
+- Oda tipleri (örnek): Standart Oda / Nehir Manzaralı Oda / Deluxe Suit / Bungalow
+- Odaların her birinde `[Rezervasyon Yap]` butonu
+- Tarih seçici widget (check-in / check-out) veya Booking.com / Tua entegrasyonu
+
+---
+
+##### 3. AKTİVİTELER
+
+- Her aktivite için ayrı kart veya accordion bölümü
+- **Kitesurf:** Seviye bilgisi (başlangıç / orta / ileri), ders süresi, fiyat, IKO sertifika bilgisi
+- **Yoga:** Açık hava platformu, grup/özel seanslar, haftalık program
+- **SUP (Stand-Up Paddle):** Kiralama & tur seçenekleri
+- **Bisiklet Kiralama:** Akyaka köy turu önerisi
+- **Yelken / Tekne Turu:** Gökova körfezi gün turları
+- Her aktivite kartında: fotoğraf, açıklama, süre, fiyat, `[Bilgi Al / Rezervasyon]` butonu
+
+---
+
+##### 4. RESTORAN & BAR
+
+- Ege mutfağı vurgusu, taze & yerel malzeme
+- Atmosfer fotoğrafları (nehir kenarı, ahşap terasa bakan açılar)
+- Menü kategorileri (Kahvaltı / Öğle / Akşam / İçecekler) — PDF menü indirme veya dijital menü
+- Özel günler için rezervasyon formu
+
+---
+
+##### 5. GALERİ
+
+- Masonry veya grid düzeni
+- Filtre butonları: Tümü | Odalar | Aktiviteler | Doğa | Sosyal Alanlar
+- Lightbox açılır görsel önizleme
+- Görseller **renkli** olacak (mevcut siyah-beyaz karışıklığı giderilecek)
+
+---
+
+##### 6. HAKKIMIZDA
+
+- İşletme hikayesi (kuruluş, vizyon, misyon)
+- Ekip tanıtımı (fotoğraflar + kısa biyografi)
+- Değerlerimiz (Sürdürülebilirlik, Doğaya Saygı, Misafirperver Hizmet)
+- Sertifikalar / Ödüller varsa
+
+---
+
+##### 7. İLETİŞİM & REZERVASYON
+
+- İletişim formu: Ad Soyad, E-posta, Telefon, Mesaj, `[Gönder]`
+- Adres, telefon, e-posta bilgileri
+- Google Maps embed (tam genişlik)
+- Ulaşım bilgisi: Muğla/Marmaris/Bodrum'dan mesafe ve yol tarifi
+- Transfer hizmeti varsa belirt
+- Sosyal medya linkleri (Instagram, Facebook, YouTube, TikTok)
+- WhatsApp butonu (direkt mesaj)
+
+---
+
+#### 🎨 TASARIM REHBERI
+
+**Renk Paleti:**
+| Renk | Hex | Kullanım |
+|------|-----|----------|
+| Okyanus Mavisi | `#1A6B8A` | Primary / butonlar |
+| Kum Bej | `#F5EDD6` | Arka plan |
+| Gün Batımı Turuncusu | `#E87040` | CTA butonları / vurgu |
+| Koyu Antrasit | `#1C1C1C` | Metin |
+| Beyaz | `#FFFFFF` | Kart arka planları |
+
+**Tipografi:**
+- Başlıklar: `Playfair Display` (serif, şık) veya `Cormorant Garamond`
+- Gövde metni: `Inter` veya `DM Sans` (okunabilir, modern sans-serif)
+- Butonlar: `Inter Semi-Bold`, büyük harf, letter-spacing: 0.05em
+
+**Stil Notları:**
+- Minimal ve havadar tasarım — çok element yok
+- Büyük, nefes alan beyaz alanlar (generous whitespace)
+- İnce çizgiler ve subtle animasyonlar (fade-in, parallax scroll)
+- Görseller %100 renkli — siyah-beyaz yalnızca özel efekt olarak kullanılabilir
+- Rounded corners: 8-12px kart köşeleri
+- Gölge: yumuşak box-shadow (`0 4px 24px rgba(0,0,0,0.08)`)
+
+---
+
+#### 📱 Teknik Gereksinimler
+
+- **Mobil öncelikli (mobile-first)** responsive tasarım
+- **Sayfa yükleme hızı:** Core Web Vitals hedefi — LCP < 2.5s
+- **SEO:** Her sayfa için meta title, description, OG tags, schema markup (Hotel, LocalBusiness)
+- **SSL:** Zorunlu (HTTPS)
+- **CMS:** WordPress + Elementor Pro veya Webflow
+- **Rezervasyon Entegrasyonu:** Booking.com channel manager veya Tua / Protel PMS
+- **Analytics:** Google Analytics 4 + Search Console
+- **Cookie Banner:** KVKK uyumlu
+- **WhatsApp Entegrasyonu:** Floating WhatsApp butonu (mevcut "Hemen Ara" ile beraber)
+- **Dil:** TR/EN toggle (WPML veya Polylang ile)
+- **Sitemap & Robots.txt** otomatik oluşturulacak
+
+---
+
+#### 🔗 Footer Yapısı
+Logo | Tagline
+Hızlı Linkler          İletişim              Sosyal Medya
+Ana Sayfa              Tel: +90 533 081 6181  Instagram
+Odalar                 info@kitebeachakyaka   Facebook
+Aktiviteler            Akyaka, Muğla          YouTube
+Restoran               [Google Maps]          TikTok
+Galeri
+İletişim
+© 2026 Kite Beach Akyaka | KVKK | Gizlilik Politikası | Çerez Politikası
+
+---
+
+#### ✨ Bonus Özellikler (İsteğe Bağlı)
+
+- [ ] Canlı sohbet (Tawk.to veya Crisp)
+- [ ] "Bu haftanın hava durumu" widget (Akyaka rüzgar hızı — kitesurf için kritik)
+- [ ] Erken rezervasyon / last-minute indirim bandı (header altında)
+- [ ] Sadakat programı veya newsletter kaydı
+- [ ] Blog: "Akyaka'da Yapılacaklar", "Kitesurf Başlangıç Rehberi" gibi SEO içerikleri
+- [ ] Tur paketleri sayfası (örn: "3 Gece + Kitesurf Kursu Paketi")
+- [ ] 360° sanal tur (oda ve ortak alanlar için)
+
+---
+
+#### 📌 Öncelik Sırası
+
+1. **Acil:** Online rezervasyon sistemi entegrasyonu
+2. **Yüksek:** Mobil uyumluluk & sayfa hızı optimizasyonu
+3. **Yüksek:** Çok sayfalı yapıya geçiş (oda/aktivite sayfaları)
+4. **Orta:** TR/EN dil desteği
+5. **Orta:** SEO altyapısı (meta, schema, blog)
+6. **Düşük:** Blog ve içerik pazarlaması
\ No newline at end of file
diff --git a/next.config.ts b/next.config.ts
index e9ffa30..5093c46 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,7 +1,22 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'images.unsplash.com',
+        port: '',
+        pathname: '/**',
+      },
+      {
+        protocol: 'https',
+        hostname: 'img.youtube.com',
+        port: '',
+        pathname: '/**',
+      },
+    ],
+  },
 };
 
 export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
index d1bc87b..c708622 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,8 @@
       "name": "kitebeach",
       "version": "0.1.0",
       "dependencies": {
+        "framer-motion": "^12.40.0",
+        "lucide-react": "^1.17.0",
         "next": "16.2.7",
         "react": "19.2.4",
         "react-dom": "19.2.4"
@@ -3762,6 +3764,33 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.40.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.40.0.tgz",
+      "integrity": "sha512-uaBd3qC1v3KQqBEjwTUd183K6PbS+j0yR9w9VmEOLWA/tnUcSn8Xa3uck7t4dgpDoUss8xQTcj8W2L07lrnLFg==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.40.0",
+        "motion-utils": "^12.39.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -5032,6 +5061,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.17.0.tgz",
+      "integrity": "sha512-9FA9evdox/JQL5PT57fdA1x/yg8T7knJ98+zjTL3UfKza6pflQUUh3XtaQIHKvnsJw1lmsEyHVlt5jchYxOQ5w==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -5099,6 +5137,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "12.40.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.40.0.tgz",
+      "integrity": "sha512-HxU3ZaBwNPVQUBQf1xxgq+7JrPNZvjLVxgbpEZL7RrWJnsxOf0/OM+yrHG9ogLQ31Do/r57Oz2gQWPK+6q62mg==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.39.0"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.39.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.39.0.tgz",
+      "integrity": "sha512-8nadJAJjTtqRkmRF36FoJTrywK9nnFmnPwnSMyxaOCU7GDjN9RTMJIxx9De8ErM+vpPhMccr/6fo5WciyQLnMQ==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
diff --git a/package.json b/package.json
index e38c5c7..0cce798 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,8 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "framer-motion": "^12.40.0",
+    "lucide-react": "^1.17.0",
     "next": "16.2.7",
     "react": "19.2.4",
     "react-dom": "19.2.4"