diff --git a/.gitignore b/.gitignore
index 5ef6a52..e36841c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,7 +9,7 @@
 !.yarn/plugins
 !.yarn/releases
 !.yarn/versions
-
+/docs
 # testing
 /coverage
 
diff --git a/app/[locale]/galeri/page.tsx b/app/[locale]/galeri/page.tsx
new file mode 100644
index 0000000..0859d97
--- /dev/null
+++ b/app/[locale]/galeri/page.tsx
@@ -0,0 +1,40 @@
+import { setRequestLocale } from "next-intl/server";
+import Image from "next/image";
+import { mockData } from "@/lib/mock-data";
+
+export default async function GaleriPage({ params }: { params: Promise<{ locale: string }> }) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+
+  // Combine hero slides and accommodation images for a rich gallery
+  const allImages = [
+    ...mockData.heroSlides.map((url, i) => ({ id: `slide-${i}`, url, title: "Kordon Apart" })),
+    ...mockData.accommodations.map(r => ({ id: r.id, url: r.image, title: r.name }))
+  ];
+  
+  return (
+    <div className="pt-32 min-h-screen max-w-7xl mx-auto px-4 md:px-12 pb-24">
+      <div className="mb-16 text-center max-w-2xl mx-auto">
+        <h1 className="font-heading text-4xl md:text-5xl font-bold text-primary dark:text-primary-fixed-dim mb-4">Galeri</h1>
+        <p className="font-body-md text-on-surface-variant dark:text-outline text-lg">
+          Kordon Apart'ın eşsiz atmosferini, mimarisini ve Fethiye'nin güzelliklerini keşfedin.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+        {allImages.map((img) => (
+          <div key={img.id} className="relative aspect-square w-full rounded-xl overflow-hidden group cursor-pointer shadow-md hover:shadow-xl transition-shadow duration-300">
+            <Image 
+              src={img.url}
+              alt={img.title}
+              fill
+              className="object-cover transition-transform duration-500 group-hover:scale-110"
+              sizes="(max-width: 640px) 100vw, (max-width: 768px) 50vw, 33vw"
+            />
+            <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/app/[locale]/iletisim/page.tsx b/app/[locale]/iletisim/page.tsx
new file mode 100644
index 0000000..8098af8
--- /dev/null
+++ b/app/[locale]/iletisim/page.tsx
@@ -0,0 +1,17 @@
+import { setRequestLocale, getTranslations } from 'next-intl/server';
+import { ContactContent } from '@/components/contact-content';
+
+export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }) {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: 'nav' });
+  return {
+    title: `${t('contact')} - Kordon Apart`,
+  };
+}
+
+export default async function ContactPage({ params }: { params: Promise<{ locale: string }> }) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+
+  return <ContactContent />;
+}
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index e64a5e9..760ceb7 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -1,24 +1,28 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Inter, Montserrat } from "next/font/google";
 import { NextIntlClientProvider } from 'next-intl';
 import { getMessages, setRequestLocale } from 'next-intl/server';
 import { notFound } from 'next/navigation';
 import { routing } from '@/i18n/routing';
+import { Navbar } from '@/components/navbar';
+import { Footer } from '@/components/footer';
+import { ThemeProvider } from "@/components/theme-provider";
+import { Toaster } from "sonner";
 import "../globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
+const inter = Inter({
+  variable: "--font-inter",
   subsets: ["latin"],
 });
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+const montserrat = Montserrat({
+  variable: "--font-montserrat",
   subsets: ["latin"],
 });
 
 export const metadata: Metadata = {
-  title: "Boilerplate App",
-  description: "Next.js boilerplate with next-intl and NextAuth",
+  title: "Kordon Apart - Fethiye",
+  description: "Kordon Apart Fethiye / Merkez - Delüks ve Premium Apart Odalar",
 };
 
 export function generateStaticParams() {
@@ -44,12 +48,25 @@ export default async function RootLayout({
   return (
     <html
       lang={locale}
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+      className={`${inter.variable} ${montserrat.variable} h-full antialiased`}
+      suppressHydrationWarning
     >
-      <body className="min-h-full flex flex-col" suppressHydrationWarning>
-        <NextIntlClientProvider messages={messages}>
-          {children}
-        </NextIntlClientProvider>
+      <body className="min-h-full flex flex-col bg-surface dark:bg-inverse-surface text-on-surface dark:text-inverse-on-surface transition-colors duration-300" suppressHydrationWarning>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange={false}
+        >
+          <NextIntlClientProvider messages={messages}>
+            <Navbar />
+            <main className="flex-1">
+              {children}
+            </main>
+            <Footer />
+            <Toaster position="bottom-right" richColors theme="system" />
+          </NextIntlClientProvider>
+        </ThemeProvider>
       </body>
     </html>
   );
diff --git a/app/[locale]/odalar/[slug]/page.tsx b/app/[locale]/odalar/[slug]/page.tsx
new file mode 100644
index 0000000..7a80f3c
--- /dev/null
+++ b/app/[locale]/odalar/[slug]/page.tsx
@@ -0,0 +1,50 @@
+import { notFound } from "next/navigation";
+import Image from "next/image";
+import { setRequestLocale } from "next-intl/server";
+import { mockData } from "@/lib/mock-data";
+
+export default async function RoomDetailPage({ 
+  params 
+}: { 
+  params: Promise<{ locale: string; slug: string }> 
+}) {
+  const { locale, slug } = await params;
+  setRequestLocale(locale);
+
+  const room = mockData.accommodations.find(r => r.slug === slug);
+  if (!room) {
+    notFound();
+  }
+
+  return (
+    <div className="pt-32 min-h-screen max-w-7xl mx-auto px-4 md:px-12 pb-24">
+      <div className="relative w-full h-[500px] rounded-xl overflow-hidden mb-12">
+        <Image 
+          src={room.image} 
+          alt={room.name} 
+          fill 
+          className="object-cover" 
+          priority
+        />
+        <div className="absolute inset-0 bg-gradient-to-t from-[#002045]/80 to-transparent" />
+        <div className="absolute bottom-0 left-0 p-12 text-white">
+          <span className="bg-[#CA8A04] text-white px-3 py-1 rounded-full font-label-sm text-[12px] uppercase font-bold tracking-wider mb-4 inline-block">
+            {room.type}
+          </span>
+          <h1 className="font-heading text-5xl md:text-6xl font-bold mb-4">{room.name}</h1>
+          <p className="font-body-lg text-xl text-white/90">
+            {room.location} • {room.bedrooms} Yatak Odası • {room.capacity} Kişi
+          </p>
+        </div>
+      </div>
+
+      <div className="max-w-3xl">
+        <h2 className="font-heading text-3xl text-primary dark:text-primary-fixed-dim font-bold mb-6">Oda Detayları</h2>
+        <p className="font-body-md text-lg text-on-surface-variant dark:text-outline leading-relaxed mb-8">
+          Bu oda, konforunuz için özenle tasarlanmış benzersiz bir yaşam alanı sunar. 
+          {room.name}, muhteşem Fethiye manzarasıyla birleşen lüks dokunuşlarla unutulmaz bir konaklama deneyimi vadediyor.
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/app/[locale]/odalar/page.tsx b/app/[locale]/odalar/page.tsx
new file mode 100644
index 0000000..ed94b2c
--- /dev/null
+++ b/app/[locale]/odalar/page.tsx
@@ -0,0 +1,14 @@
+import { useTranslations } from "next-intl";
+import { setRequestLocale } from "next-intl/server";
+import { RoomList } from "@/components/home/room-list";
+
+export default async function OdalarPage({ params }: { params: Promise<{ locale: string }> }) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+  
+  return (
+    <div className="pt-24 min-h-screen">
+      <RoomList />
+    </div>
+  );
+}
diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
index e86607f..d6fd96b 100644
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -1,48 +1,19 @@
-import { getTranslations, setRequestLocale } from 'next-intl/server'
-import Link from 'next/link'
+import { setRequestLocale } from 'next-intl/server';
+import { Hero } from '@/components/home/hero';
+import { RoomList } from '@/components/home/room-list';
+import { Services } from '@/components/home/services';
+import { Newsletter } from '@/components/home/newsletter';
 
 export default async function HomePage({ params }: { params: Promise<{ locale: string }> }) {
-  const { locale } = await params
-  setRequestLocale(locale)
-  
-  const t = await getTranslations('hero')
-  const nav = await getTranslations('nav')
-  const footer = await getTranslations('footer')
+  const { locale } = await params;
+  setRequestLocale(locale);
 
   return (
-    <div className="flex-1 flex flex-col min-h-screen">
-      <header className="px-6 py-4 border-b flex items-center justify-between">
-        <div className="font-bold text-xl">Boilerplate</div>
-        <nav className="space-x-4">
-          <Link href="/" className="text-gray-600 hover:text-gray-900">{nav('home')}</Link>
-          <Link href="/about" className="text-gray-600 hover:text-gray-900">{nav('about')}</Link>
-          <Link href="/contact" className="text-gray-600 hover:text-gray-900">{nav('contact')}</Link>
-          <Link href="/login" className="px-4 py-2 bg-blue-600 text-white rounded-md text-sm">Login</Link>
-        </nav>
-      </header>
-
-      <main className="flex-1 flex flex-col items-center justify-center text-center px-4">
-        <h1 className="text-5xl font-extrabold tracking-tight text-gray-900 sm:text-7xl mb-6">
-          {t('title')}
-        </h1>
-        <p className="mt-4 text-xl text-gray-500 max-w-2xl mx-auto mb-8">
-          This is a dummy landing page to demonstrate the localization setup using next-intl.
-        </p>
-        <div className="flex space-x-4">
-          <button className="px-8 py-3 bg-blue-600 text-white rounded-full font-medium hover:bg-blue-700 transition">
-            {t('cta')}
-          </button>
-          
-          <div className="flex bg-gray-100 rounded-full p-1">
-            <Link href="/tr" className={`px-4 py-2 rounded-full text-sm font-medium ${locale === 'tr' ? 'bg-white shadow-sm' : 'text-gray-500 hover:text-gray-900'}`}>TR</Link>
-            <Link href="/en" className={`px-4 py-2 rounded-full text-sm font-medium ${locale === 'en' ? 'bg-white shadow-sm' : 'text-gray-500 hover:text-gray-900'}`}>EN</Link>
-          </div>
-        </div>
-      </main>
-
-      <footer className="py-6 border-t text-center text-gray-500 text-sm">
-        <p>{footer('rights')} <a href="https://ayris.tech" className="hover:text-blue-600 transition">Created by ayris.tech</a></p>
-      </footer>
-    </div>
-  )
+    <>
+      <Hero />
+      <RoomList />
+      <Services />
+      <Newsletter />
+    </>
+  );
 }
diff --git a/app/globals.css b/app/globals.css
index c56032b..02e385c 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -5,116 +5,125 @@
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {
+  /* Shadcn UI Variables */
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-sans);
-  --font-mono: var(--font-geist-mono);
-  --font-heading: var(--font-sans);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
   --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  /* Luxe Stay Design Tokens - Clean High Contrast Luxury */
+  --color-surface: #ffffff;
+  --color-on-surface: #0f172a;
+  --color-on-surface-variant: #475569;
+  --color-surface-container-lowest: #ffffff;
+  --color-surface-container-low: #f8fafc;
+  --color-surface-container: #f1f5f9;
+  --color-surface-container-high: #e2e8f0;
+  --color-surface-container-highest: #cbd5e1;
+  --color-surface-variant: #f1f5f9;
+  --color-primary-container: #1e293b;
+  --color-on-primary-container: #f8fafc;
+  --color-on-primary: #ffffff;
+  --color-secondary-container: #e2e8f0;
+  --color-on-secondary-container: #0f172a;
+  --color-tertiary: #2d1d00;
+  --color-on-tertiary: #ffffff;
+  --color-tertiary-container: #493100;
+  --color-on-tertiary-container: #cb9524;
+  --color-tertiary-fixed: #ffdeaa;
+  --color-tertiary-fixed-dim: #f8bc4b;
+  --color-outline: #64748b;
+  --color-outline-variant: #cbd5e1;
+  --color-inverse-surface: #0f172a;
+  --color-inverse-on-surface: #f8fafc;
+  --color-primary-fixed-dim: #94a3b8;
+
+  /* Typography */
+  --font-sans: var(--font-inter);
+  --font-heading: var(--font-montserrat);
+  --font-label-sm: var(--font-inter);
+  --font-headline-md: var(--font-montserrat);
+  --font-display-lg-mobile: var(--font-montserrat);
+  --font-display-lg: var(--font-montserrat);
+  --font-body-lg: var(--font-inter);
+  --font-body-md: var(--font-inter);
+
+  /* Spacing */
+  --spacing-margin-desktop: 48px;
+  --spacing-margin-mobile: 16px;
+  --spacing-container-max: 1280px;
+  --spacing-stack-sm: 8px;
+  --spacing-stack-md: 24px;
+  --spacing-stack-lg: 48px;
+  --spacing-gutter: 24px;
+
+  /* Radius */
   --radius-sm: calc(var(--radius) * 0.6);
   --radius-md: calc(var(--radius) * 0.8);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) * 1.4);
-  --radius-2xl: calc(var(--radius) * 1.8);
-  --radius-3xl: calc(var(--radius) * 2.2);
-  --radius-4xl: calc(var(--radius) * 2.6);
 }
 
 :root {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.87 0 0);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
-  --radius: 0.625rem;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  /* Mapping Shadcn to Luxe Stay */
+  --background: #ffffff;
+  --foreground: #0f172a;
+  --card: #ffffff;
+  --card-foreground: #0f172a;
+  --popover: #ffffff;
+  --popover-foreground: #0f172a;
+  --primary: #0f172a;
+  --primary-foreground: #ffffff;
+  --secondary: #f1f5f9;
+  --secondary-foreground: #0f172a;
+  --muted: #f8fafc;
+  --muted-foreground: #64748b;
+  --accent: #f1f5f9;
+  --accent-foreground: #0f172a;
+  --destructive: #ef4444;
+  --destructive-foreground: #ffffff;
+  --border: #e2e8f0;
+  --input: #c4c6cf;
+  --ring: #002045;
+  --radius: 0.5rem;
 }
 
 .dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.87 0 0);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
+  /* Inverse for Dark Mode */
+  --background: #020617;
+  --foreground: #f8fafc;
+  --card: #0f172a;
+  --card-foreground: #f8fafc;
+  --popover: #0f172a;
+  --popover-foreground: #f8fafc;
+  --primary: #f8fafc;
+  --primary-foreground: #0f172a;
+  --secondary: #1e293b;
+  --secondary-foreground: #f8fafc;
+  --muted: #1e293b;
+  --muted-foreground: #94a3b8;
+  --accent: #1e293b;
+  --accent-foreground: #f8fafc;
+  --destructive: #7f1d1d;
+  --destructive-foreground: #f8fafc;
+  --border: #1e293b;
+  --input: #1e293b;
+  --ring: #f8fafc;
 }
 
 @layer base {
@@ -122,9 +131,27 @@
     @apply border-border outline-ring/50;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-surface text-on-surface font-body-md;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
   }
   html {
     @apply font-sans;
+    scroll-behavior: smooth;
+  }
+  ::selection {
+    @apply bg-primary text-primary-foreground;
+  }
+}
+
+/* Accessibility: Respect reduced motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
   }
 }
\ No newline at end of file
diff --git a/components/contact-content.tsx b/components/contact-content.tsx
new file mode 100644
index 0000000..e9dbfee
--- /dev/null
+++ b/components/contact-content.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+import * as React from "react";
+import { motion } from "framer-motion";
+import { mockData } from "@/lib/mock-data";
+import { useTranslations } from "next-intl";
+import { toast } from "sonner";
+import { Loader2 } from "lucide-react";
+
+export function ContactContent() {
+  const t = useTranslations("contact");
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+
+    // Simulate network request
+    await new Promise((resolve) => setTimeout(resolve, 1500));
+    
+    setIsLoading(false);
+    toast.success("Talebiniz başarıyla alındı!", {
+      description: "En kısa sürede size dönüş yapacağız.",
+    });
+  };
+
+  return (
+    <div className="container mx-auto px-4 py-24 relative overflow-hidden">
+      {/* Decorative background blob */}
+      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[400px] bg-slate-200/50 dark:bg-slate-800/30 rounded-full blur-[100px] -z-10 opacity-50" />
+
+      <motion.h1 
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.6 }}
+        className="text-5xl font-black text-slate-900 dark:text-white mb-16 text-center tracking-tight"
+      >
+        {t("title")}
+      </motion.h1>
+      
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-6xl mx-auto">
+        {/* Contact Info */}
+        <motion.div 
+          initial={{ opacity: 0, x: -30 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.6, delay: 0.2 }}
+          className="bg-white/60 dark:bg-slate-900/60 backdrop-blur-3xl p-10 rounded-[2rem] border border-white dark:border-slate-800 shadow-[0_8px_30px_rgb(0,0,0,0.04)]"
+        >
+          <h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-10">{t("title")}</h2>
+          
+          <div className="space-y-8">
+            <div className="group">
+              <p className="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-2 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">{t("email")}</p>
+              <p className="text-xl font-medium text-slate-800 dark:text-slate-200">{mockData.contact.email}</p>
+            </div>
+            <div className="group">
+              <p className="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-2 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">{t("phone")}</p>
+              <p className="text-xl font-medium text-slate-800 dark:text-slate-200">{mockData.contact.phone}</p>
+            </div>
+            <div className="group">
+              <p className="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-2 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">{t("address")}</p>
+              <p className="text-xl font-medium text-slate-800 dark:text-slate-200 leading-relaxed max-w-xs">{mockData.contact.address}</p>
+            </div>
+          </div>
+        </motion.div>
+
+        {/* Contact Form */}
+        <motion.div 
+          initial={{ opacity: 0, x: 30 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.6, delay: 0.4 }}
+          className="bg-white dark:bg-slate-900 p-10 rounded-[2rem] shadow-[0_20px_50px_rgb(0,0,0,0.08)] border border-slate-100 dark:border-slate-800"
+        >
+          <h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-10">{t("reservationReq")}</h2>
+          
+          <form className="space-y-6" onSubmit={handleSubmit}>
+            <div>
+              <label className="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">{t("email")}</label>
+              <input 
+                type="email" 
+                required
+                className="w-full border-none bg-slate-50 dark:bg-slate-950 rounded-xl px-5 py-4 focus:ring-2 focus:ring-slate-900 dark:focus:ring-slate-100 outline-none transition-all hover:bg-slate-100 dark:hover:bg-slate-800 placeholder:text-slate-400 dark:placeholder:text-slate-600 text-slate-900 dark:text-white" 
+                placeholder="ornek@email.com" 
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">{t("reservationNo")} <span className="text-slate-400 dark:text-slate-500 font-normal">(Opsiyonel)</span></label>
+              <input 
+                type="text" 
+                className="w-full border-none bg-slate-50 dark:bg-slate-950 rounded-xl px-5 py-4 focus:ring-2 focus:ring-slate-900 dark:focus:ring-slate-100 outline-none transition-all hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-900 dark:text-white" 
+              />
+            </div>
+            <div className="pt-4">
+              <button 
+                type="submit" 
+                disabled={isLoading}
+                className="w-full flex justify-center items-center gap-2 bg-slate-900 dark:bg-white text-white dark:text-slate-900 hover:bg-slate-800 dark:hover:bg-slate-100 px-8 py-5 rounded-xl font-bold text-lg tracking-wide transition-all hover:shadow-xl hover:-translate-y-1 active:translate-y-0 disabled:opacity-70 disabled:hover:translate-y-0 disabled:hover:shadow-none"
+              >
+                {isLoading ? <Loader2 className="w-6 h-6 animate-spin" /> : t("send")}
+              </button>
+            </div>
+          </form>
+        </motion.div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/footer.tsx b/components/footer.tsx
new file mode 100644
index 0000000..35e8ea4
--- /dev/null
+++ b/components/footer.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import Link from "next/link";
+import { mockData } from "@/lib/mock-data";
+import { Share2, Mail } from "lucide-react";
+
+const FacebookIcon = ({ className }: { className?: string }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
+    <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
+  </svg>
+);
+
+const InstagramIcon = ({ className }: { className?: string }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
+    <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
+    <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
+    <line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line>
+  </svg>
+);
+
+export function Footer() {
+  const t = useTranslations("footer");
+
+  return (
+    <footer className="w-full bg-surface-container-high dark:bg-inverse-surface border-t border-outline-variant/20 dark:border-outline/20">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 px-4 md:px-12 py-24 max-w-7xl mx-auto">
+        <div className="space-y-6">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img src={mockData.logos.main} alt="Kordon Apart Logo" className="h-10 w-auto" />
+          <p className="font-body-md text-on-surface-variant dark:text-outline pr-4">
+            {t("desc")}
+          </p>
+          <div className="flex gap-4">
+            <Link href={mockData.contact.social.facebook} className="w-10 h-10 rounded-full bg-primary/5 dark:bg-primary-fixed-dim/10 flex items-center justify-center text-primary dark:text-primary-fixed-dim hover:bg-primary dark:hover:bg-primary-fixed-dim hover:text-white dark:hover:text-primary-fixed transition-all">
+              <FacebookIcon className="w-5 h-5" />
+            </Link>
+            <Link href={mockData.contact.social.instagram} className="w-10 h-10 rounded-full bg-primary/5 dark:bg-primary-fixed-dim/10 flex items-center justify-center text-primary dark:text-primary-fixed-dim hover:bg-primary dark:hover:bg-primary-fixed-dim hover:text-white dark:hover:text-primary-fixed transition-all">
+              <InstagramIcon className="w-5 h-5" />
+            </Link>
+          </div>
+        </div>
+        
+        <div className="space-y-6">
+          <h4 className="font-label-sm text-[12px] text-primary dark:text-primary-fixed-dim uppercase font-bold tracking-widest">{t("pages")}</h4>
+          <ul className="space-y-3">
+            <li><Link className="font-body-md text-on-surface-variant dark:text-outline hover:text-secondary dark:hover:text-primary-fixed transition-colors" href="/">{t("accommodations")}</Link></li>
+            <li><Link className="font-body-md text-on-surface-variant dark:text-outline hover:text-secondary dark:hover:text-primary-fixed transition-colors" href="/">{t("about")}</Link></li>
+            <li><Link className="font-body-md text-on-surface-variant dark:text-outline hover:text-secondary dark:hover:text-primary-fixed transition-colors" href="/">{t("reviews")}</Link></li>
+          </ul>
+        </div>
+        
+        <div className="space-y-6">
+          <h4 className="font-label-sm text-[12px] text-primary dark:text-primary-fixed-dim uppercase font-bold tracking-widest">{t("legal")}</h4>
+          <ul className="space-y-3">
+            <li><Link className="font-body-md text-on-surface-variant dark:text-outline hover:text-secondary dark:hover:text-primary-fixed transition-colors" href="/">{t("privacyPolicy")}</Link></li>
+            <li><Link className="font-body-md text-on-surface-variant dark:text-outline hover:text-secondary dark:hover:text-primary-fixed transition-colors" href="/">{t("userAgreement")}</Link></li>
+            <li><Link className="font-body-md text-on-surface-variant dark:text-outline hover:text-secondary dark:hover:text-primary-fixed transition-colors" href="/">{t("cookiePolicy")}</Link></li>
+          </ul>
+        </div>
+        
+        <div className="space-y-6">
+          <h4 className="font-label-sm text-[12px] text-primary dark:text-primary-fixed-dim uppercase font-bold tracking-widest">{t("contact")}</h4>
+          <p className="font-body-md text-on-surface-variant dark:text-outline">{mockData.contact.address}</p>
+          <p className="font-body-md text-on-surface-variant dark:text-outline">{mockData.contact.phone}</p>
+          <p className="font-body-md text-on-surface-variant dark:text-outline">{mockData.contact.email}</p>
+        </div>
+      </div>
+      
+      <div className="max-w-7xl mx-auto px-4 md:px-12 py-8 border-t border-outline-variant/30 dark:border-outline/20 flex flex-col md:flex-row justify-between items-center gap-4">
+        <span className="font-body-md text-on-surface-variant/70 dark:text-outline/70">
+          © {new Date().getFullYear()} Kordon Apart. {t("rights")}
+        </span>
+        <div className="flex gap-8 items-center">
+          <Link href="https://ayris.tech" target="_blank" rel="noopener noreferrer" className="text-primary dark:text-primary-fixed-dim font-semibold font-body-md hover:underline">
+            Created by ayris.tech
+          </Link>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/components/home/hero.tsx b/components/home/hero.tsx
new file mode 100644
index 0000000..91c243f
--- /dev/null
+++ b/components/home/hero.tsx
@@ -0,0 +1,108 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { motion } from "framer-motion";
+import { mockData } from "@/lib/mock-data";
+import Link from "next/link";
+import Image from "next/image";
+
+export function Hero() {
+  const t = useTranslations("hero");
+
+  return (
+    <>
+      <section 
+        className="relative h-[921px] min-h-[600px] w-full overflow-hidden"
+        aria-label="Hero Section"
+      >
+        {/* Background Image - Using Next.js Image for optimization */}
+        <div className="absolute inset-0 z-0">
+          <motion.div 
+            initial={{ scale: 1.05 }}
+            animate={{ scale: 1 }}
+            transition={{ duration: 15, ease: "easeOut" }}
+            style={{ willChange: "transform" }}
+            className="relative w-full h-full motion-reduce:!transform-none"
+          >
+            <Image 
+              src={mockData.heroSlides[1]}
+              alt="Kordon Apart - Fethiye Marina manzarası"
+              fill
+              className="object-cover object-[center_top]"
+              priority
+              sizes="100vw"
+            />
+          </motion.div>
+          {/* Gradient Overlay */}
+          <div className="absolute inset-0 bg-gradient-to-b from-[#002045]/80 via-[#002045]/50 to-[#002045]/90" />
+        </div>
+
+        {/* Hero Content */}
+        <div className="relative z-10 h-full max-w-7xl mx-auto px-4 md:px-12 flex flex-col justify-center items-start pt-20">
+          <motion.div 
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+            className="max-w-2xl motion-reduce:!transform-none motion-reduce:!opacity-100"
+          >
+            <span className="font-label-sm text-[12px] text-white/80 uppercase tracking-widest mb-4 block font-bold">
+              {t("subtitle")}
+            </span>
+            <h1 className="font-heading text-5xl md:text-6xl lg:text-7xl text-white mb-6 leading-tight font-extrabold tracking-tight">
+              {t("title")}
+            </h1>
+            <p className="font-body-lg text-lg text-white/90 mb-8 max-w-lg leading-relaxed" style={{ maxWidth: "65ch" }}>
+              {t("desc")}
+            </p>
+            <div className="flex flex-wrap gap-4">
+              <Link 
+                href="#" 
+                className="bg-[#CA8A04] text-white px-8 py-4 rounded-lg font-label-sm uppercase tracking-widest text-[12px] hover:bg-[#CA8A04]/90 transition-colors duration-200 shadow-lg cursor-pointer focus:ring-2 focus:ring-[#CA8A04]/50 focus:outline-none min-h-[48px] flex items-center"
+                role="button"
+              >
+                {t("explore")}
+              </Link>
+              <Link 
+                href="#" 
+                className="bg-white/10 backdrop-blur-md border border-white/20 text-white px-8 py-4 rounded-lg font-label-sm uppercase tracking-widest text-[12px] hover:bg-white/20 transition-colors duration-200 cursor-pointer focus:ring-2 focus:ring-white/50 focus:outline-none min-h-[48px] flex items-center"
+                role="button"
+              >
+                {t("virtualTour")}
+              </Link>
+            </div>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Search Bar Utility (Floating over Hero bottom) */}
+      <div className="relative z-20 max-w-5xl mx-auto px-4 -mt-24 hidden md:block">
+        <motion.div 
+          initial={{ opacity: 0, y: 40 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.5 }}
+          className="bg-white p-8 rounded-xl shadow-2xl shadow-black/10 grid grid-cols-4 gap-6 items-end border border-gray-100 motion-reduce:!transform-none motion-reduce:!opacity-100"
+        >
+          <div className="space-y-2">
+            <label htmlFor="check-in" className="block font-label-sm text-[12px] text-gray-500 uppercase tracking-widest">{t("checkIn")}</label>
+            <input id="check-in" className="w-full bg-transparent border-0 border-b border-gray-200 py-2 focus:ring-0 focus:border-gray-900 transition-colors duration-200 text-gray-900 cursor-pointer min-h-[44px]" type="date" />
+          </div>
+          <div className="space-y-2">
+            <label htmlFor="check-out" className="block font-label-sm text-[12px] text-gray-500 uppercase tracking-widest">{t("checkOut")}</label>
+            <input id="check-out" className="w-full bg-transparent border-0 border-b border-gray-200 py-2 focus:ring-0 focus:border-gray-900 transition-colors duration-200 text-gray-900 cursor-pointer min-h-[44px]" type="date" />
+          </div>
+          <div className="space-y-2">
+            <label htmlFor="guests" className="block font-label-sm text-[12px] text-gray-500 uppercase tracking-widest">{t("guests")}</label>
+            <select id="guests" className="w-full bg-transparent border-0 border-b border-gray-200 py-2 focus:ring-0 focus:border-gray-900 transition-colors duration-200 text-gray-900 cursor-pointer min-h-[44px]">
+              <option value="1">{t("adult1")}</option>
+              <option value="2">{t("adult2")}</option>
+              <option value="3+">{t("adult3")}</option>
+            </select>
+          </div>
+          <button className="bg-[#CA8A04] text-white min-h-[48px] rounded-lg font-label-sm uppercase tracking-widest text-[12px] hover:bg-[#CA8A04]/90 transition-colors duration-200 font-bold cursor-pointer shadow-lg focus:ring-2 focus:ring-[#CA8A04]/50 focus:outline-none">
+            {t("checkAvailability")}
+          </button>
+        </motion.div>
+      </div>
+    </>
+  );
+}
diff --git a/components/home/newsletter.tsx b/components/home/newsletter.tsx
new file mode 100644
index 0000000..87a505e
--- /dev/null
+++ b/components/home/newsletter.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { motion } from "framer-motion";
+
+export function Newsletter() {
+  const t = useTranslations("newsletter");
+
+  return (
+    <section className="py-24 bg-[#002045] text-white overflow-hidden relative" aria-label={t("title")}>
+      {/* Decorative Background Elements */}
+      <div className="absolute top-0 left-0 w-full h-full overflow-hidden z-0" aria-hidden="true">
+        <div className="absolute -top-[20%] -left-[10%] w-[50%] h-[150%] bg-white/5 blur-3xl transform rotate-12 rounded-full" />
+        <div className="absolute -bottom-[20%] -right-[10%] w-[50%] h-[150%] bg-[#CA8A04]/10 blur-3xl transform -rotate-12 rounded-full" />
+      </div>
+
+      <motion.div 
+        initial={{ opacity: 0, y: 30 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true, margin: "-50px" }}
+        transition={{ duration: 0.6 }}
+        className="max-w-7xl mx-auto px-4 md:px-12 relative z-10 text-center motion-reduce:!transform-none motion-reduce:!opacity-100"
+      >
+        <h2 className="font-heading text-4xl md:text-5xl text-white mb-6 font-bold tracking-tight">
+          {t("title")}
+        </h2>
+        <p className="font-body-lg text-lg text-white/70 mb-10 max-w-xl mx-auto" style={{ maxWidth: "65ch" }}>
+          {t("desc")}
+        </p>
+        
+        <form className="max-w-md mx-auto flex flex-col md:flex-row gap-4" onSubmit={(e) => e.preventDefault()}>
+          <label htmlFor="newsletter-email" className="sr-only">{t("label")}</label>
+          <input 
+            id="newsletter-email"
+            className="flex-1 bg-white/10 border border-white/20 text-white placeholder-white/40 rounded-lg px-6 py-4 focus:ring-2 focus:ring-[#CA8A04]/50 focus:border-[#CA8A04] outline-none transition-colors duration-200 min-h-[48px]" 
+            placeholder={t("placeholder")} 
+            type="email" 
+            required
+            autoComplete="email"
+          />
+          <button 
+            type="submit"
+            className="bg-[#CA8A04] text-white px-8 py-4 rounded-lg font-label-sm text-[12px] uppercase tracking-widest font-bold hover:bg-[#CA8A04]/90 transition-colors duration-200 shadow-lg cursor-pointer focus:ring-2 focus:ring-[#CA8A04]/50 focus:outline-none min-h-[48px]"
+          >
+            {t("subscribe")}
+          </button>
+        </form>
+      </motion.div>
+    </section>
+  );
+}
diff --git a/components/home/room-list.tsx b/components/home/room-list.tsx
new file mode 100644
index 0000000..621c476
--- /dev/null
+++ b/components/home/room-list.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { mockData } from "@/lib/mock-data";
+import Link from "next/link";
+import Image from "next/image";
+import { motion } from "framer-motion";
+import { ArrowRight } from "lucide-react";
+
+export function RoomList() {
+  const t = useTranslations("accommodations");
+
+  // We take the first 3 rooms for the bento grid
+  const featuredRoom = mockData.accommodations[0];
+  const sideRooms = mockData.accommodations.slice(1, 3);
+
+  return (
+    <section className="py-24 max-w-7xl mx-auto px-4 md:px-12" aria-label="Odalarımız">
+      <div className="flex justify-between items-end mb-12">
+        <motion.div 
+          initial={{ opacity: 0, x: -20 }}
+          whileInView={{ opacity: 1, x: 0 }}
+          viewport={{ once: true, margin: "-100px" }}
+          transition={{ duration: 0.6 }}
+          className="space-y-2 motion-reduce:!transform-none motion-reduce:!opacity-100"
+        >
+          <h2 className="font-heading text-3xl md:text-4xl font-bold text-primary dark:text-primary-fixed-dim">{t("title")}</h2>
+          <p className="font-body-md text-on-surface-variant dark:text-outline text-lg" style={{ maxWidth: "65ch" }}>{t("desc")}</p>
+        </motion.div>
+        
+        <motion.div
+          initial={{ opacity: 0, x: 20 }}
+          whileInView={{ opacity: 1, x: 0 }}
+          viewport={{ once: true, margin: "-100px" }}
+          transition={{ duration: 0.6 }}
+          className="motion-reduce:!transform-none motion-reduce:!opacity-100"
+        >
+          <Link href="/odalar" className="font-label-sm text-[12px] uppercase tracking-widest text-primary dark:text-primary-fixed-dim flex items-center gap-2 group font-bold cursor-pointer focus:ring-2 focus:ring-primary/30 focus:outline-none rounded-md px-2 py-1 min-h-[44px]">
+            {t("viewAll")} 
+            <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform duration-200" />
+          </Link>
+        </motion.div>
+      </div>
+
+      {/* Bento-style Grid */}
+      <motion.div 
+        initial={{ opacity: 0, y: 30 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true, margin: "-100px" }}
+        transition={{ duration: 0.6 }}
+        className="grid grid-cols-1 md:grid-cols-12 gap-6 h-auto md:h-[600px] motion-reduce:!transform-none motion-reduce:!opacity-100"
+      >
+        <Link 
+          href={`/odalar/${featuredRoom.slug}`} 
+          className="md:col-span-8 group relative overflow-hidden rounded-xl cursor-pointer focus:ring-2 focus:ring-primary/50 focus:outline-none"
+          aria-label={`${featuredRoom.name} - ${featuredRoom.type}`}
+        >
+          <div className="relative w-full h-full min-h-[300px]">
+            <Image 
+              src={featuredRoom.image} 
+              alt={`${featuredRoom.name} - ${featuredRoom.type} oda görseli`}
+              fill
+              className="object-cover transition-transform duration-500 group-hover:scale-105"
+              sizes="(max-width: 768px) 100vw, 66vw"
+              loading="lazy"
+            />
+          </div>
+          <div className="absolute inset-0 bg-gradient-to-t from-[#002045]/90 via-[#002045]/20 to-transparent opacity-80" />
+          
+          <div className="absolute bottom-0 left-0 p-8 text-white w-full">
+            <div className="flex gap-2 mb-3">
+              <span className="bg-[#CA8A04] text-white px-3 py-1 rounded-full font-label-sm text-[10px] uppercase font-bold tracking-wider">
+                {t("bestseller")}
+              </span>
+            </div>
+            <h3 className="font-heading text-3xl md:text-4xl font-bold mb-2">{featuredRoom.name}</h3>
+            <p className="font-body-md text-white/80 text-lg">
+              {featuredRoom.type} • {t("bedrooms", { count: featuredRoom.bedrooms })} • {t("persons", { count: featuredRoom.capacity })}
+            </p>
+          </div>
+        </Link>
+
+        {/* Side Stacked Items */}
+        <div className="md:col-span-4 grid grid-rows-2 gap-6">
+          {sideRooms.map((room) => (
+            <Link 
+              href={`/odalar/${room.slug}`} 
+              key={room.id} 
+              className="group relative overflow-hidden rounded-xl cursor-pointer focus:ring-2 focus:ring-primary/50 focus:outline-none"
+              aria-label={`${room.name} - ${room.type}`}
+            >
+              <div className="relative w-full h-full min-h-[150px]">
+                <Image 
+                  src={room.image} 
+                  alt={`${room.name} - ${room.type} oda görseli`}
+                  fill
+                  className="object-cover transition-transform duration-500 group-hover:scale-105"
+                  sizes="(max-width: 768px) 100vw, 33vw"
+                  loading="lazy"
+                />
+              </div>
+              <div className="absolute inset-0 bg-gradient-to-t from-[#002045]/80 to-transparent opacity-90" />
+              <div className="absolute bottom-0 left-0 p-6 text-white w-full">
+                <h4 className="font-label-sm text-[12px] uppercase tracking-wider font-bold text-[#CA8A04] mb-1">{room.type}</h4>
+                <h3 className="font-heading text-xl font-semibold mb-1">{room.name}</h3>
+                <p className="font-body-md text-white/80 text-sm">
+                  {t("persons", { count: room.capacity })}
+                </p>
+              </div>
+            </Link>
+          ))}
+        </div>
+      </motion.div>
+    </section>
+  );
+}
diff --git a/components/home/services.tsx b/components/home/services.tsx
new file mode 100644
index 0000000..06c2473
--- /dev/null
+++ b/components/home/services.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { motion } from "framer-motion";
+import { Waves, UtensilsCrossed, ConciergeBell } from "lucide-react";
+
+export function Services() {
+  const t = useTranslations("services");
+
+  const container = {
+    hidden: { opacity: 0 },
+    show: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.15,
+      }
+    }
+  };
+
+  const item = {
+    hidden: { opacity: 0, y: 20 },
+    show: { opacity: 1, y: 0, transition: { duration: 0.5, ease: "easeOut" } }
+  };
+
+  const services = [
+    {
+      icon: Waves,
+      title: t("service1_title"),
+      desc: t("service1_desc"),
+    },
+    {
+      icon: UtensilsCrossed,
+      title: t("service2_title"),
+      desc: t("service2_desc"),
+    },
+    {
+      icon: ConciergeBell,
+      title: t("service3_title"),
+      desc: t("service3_desc"),
+    },
+  ];
+
+  return (
+    <section className="bg-surface-container-low dark:bg-inverse-surface/50 py-24" aria-label="Hizmetlerimiz">
+      <div className="max-w-7xl mx-auto px-4 md:px-12">
+        <div className="text-center max-w-2xl mx-auto mb-16">
+          <motion.span 
+            initial={{ opacity: 0, y: 10 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5 }}
+            className="font-label-sm text-[12px] text-[#CA8A04] dark:text-[#F8BC4B] uppercase tracking-widest mb-4 block font-bold motion-reduce:!transform-none motion-reduce:!opacity-100"
+          >
+            {t("subtitle")}
+          </motion.span>
+          <motion.h2 
+            initial={{ opacity: 0, y: 10 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay: 0.1 }}
+            className="font-heading text-4xl text-primary dark:text-primary-fixed-dim mb-4 font-bold motion-reduce:!transform-none motion-reduce:!opacity-100"
+          >
+            {t("title")}
+          </motion.h2>
+          <motion.p 
+            initial={{ opacity: 0, y: 10 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+            className="font-body-md text-on-surface-variant dark:text-outline text-lg motion-reduce:!transform-none motion-reduce:!opacity-100"
+            style={{ maxWidth: "65ch", margin: "0 auto" }}
+          >
+            {t("desc")}
+          </motion.p>
+        </div>
+        
+        <motion.div 
+          variants={container}
+          initial="hidden"
+          whileInView="show"
+          viewport={{ once: true, margin: "-50px" }}
+          className="grid grid-cols-1 md:grid-cols-3 gap-12"
+          role="list"
+        >
+          {services.map((service) => (
+            <motion.div 
+              variants={item} 
+              key={service.title} 
+              className="text-center space-y-6 px-4 motion-reduce:!transform-none motion-reduce:!opacity-100"
+              role="listitem"
+            >
+              <div className="w-20 h-20 bg-white dark:bg-primary-container rounded-full flex items-center justify-center mx-auto shadow-md text-primary dark:text-primary-fixed-dim" aria-hidden="true">
+                <service.icon className="w-8 h-8" strokeWidth={1.5} />
+              </div>
+              <div>
+                <h3 className="font-heading text-2xl text-primary dark:text-primary-fixed-dim mb-3 font-semibold">{service.title}</h3>
+                <p className="font-body-md text-on-surface-variant dark:text-outline leading-relaxed" style={{ maxWidth: "45ch", margin: "0 auto" }}>
+                  {service.desc}
+                </p>
+              </div>
+            </motion.div>
+          ))}
+        </motion.div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/navbar.tsx b/components/navbar.tsx
new file mode 100644
index 0000000..b60cec6
--- /dev/null
+++ b/components/navbar.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import Link from "next/link";
+import Image from "next/image";
+import { mockData } from "@/lib/mock-data";
+import { ThemeToggle } from "@/components/theme-toggle";
+
+export function Navbar() {
+  const t = useTranslations("nav");
+
+  return (
+    <header className="fixed top-0 w-full z-50 bg-surface/80 dark:bg-inverse-surface/80 backdrop-blur-md shadow-sm shadow-primary-container/5 transition-colors duration-200">
+      <nav className="flex justify-between items-center px-4 md:px-12 py-4 max-w-7xl mx-auto" aria-label="Main Navigation">
+        <div className="flex items-center gap-4">
+          <Link href="/" className="flex items-center space-x-2 group cursor-pointer focus:ring-2 focus:ring-primary/30 focus:outline-none rounded-md min-h-[44px]" aria-label="Ana Sayfa - Kordon Apart">
+            <Image src={mockData.logos.main} alt="Kordon Apart Logo" width={120} height={40} className="h-10 w-auto group-hover:opacity-80 transition-opacity duration-200" priority />
+          </Link>
+        </div>
+        
+        <div className="hidden md:flex items-center gap-8">
+          <Link href="/" className="text-primary dark:text-primary-fixed-dim font-bold border-b border-primary dark:border-primary-fixed-dim font-label-sm uppercase tracking-widest text-[12px] cursor-pointer focus:ring-2 focus:ring-primary/30 focus:outline-none rounded-sm py-1 min-h-[44px] flex items-center">{t("home")}</Link>
+          <Link href="/odalar" className="text-on-surface-variant dark:text-outline hover:text-primary dark:hover:text-primary-fixed-dim transition-colors duration-200 font-label-sm uppercase tracking-widest text-[12px] cursor-pointer focus:ring-2 focus:ring-primary/30 focus:outline-none rounded-sm py-1 min-h-[44px] flex items-center">{t("accommodations")}</Link>
+          <Link href="/galeri" className="text-on-surface-variant dark:text-outline hover:text-primary dark:hover:text-primary-fixed-dim transition-colors duration-200 font-label-sm uppercase tracking-widest text-[12px] cursor-pointer focus:ring-2 focus:ring-primary/30 focus:outline-none rounded-sm py-1 min-h-[44px] flex items-center">{t("gallery")}</Link>
+          <Link href="/iletisim" className="text-on-surface-variant dark:text-outline hover:text-primary dark:hover:text-primary-fixed-dim transition-colors duration-200 font-label-sm uppercase tracking-widest text-[12px] cursor-pointer focus:ring-2 focus:ring-primary/30 focus:outline-none rounded-sm py-1 min-h-[44px] flex items-center">{t("contact")}</Link>
+        </div>
+        
+        <div className="flex items-center gap-6">
+          <div className="hidden md:flex gap-3 text-on-surface-variant dark:text-outline font-label-sm text-[12px]">
+            <Link href="/tr" className="hover:text-primary dark:hover:text-primary-fixed-dim transition-colors duration-200 cursor-pointer focus:ring-2 focus:ring-primary/30 focus:outline-none rounded-sm min-h-[44px] min-w-[44px] flex items-center justify-center" aria-label="Türkçe">TR</Link>
+            <Link href="/en" className="hover:text-primary dark:hover:text-primary-fixed-dim transition-colors duration-200 cursor-pointer focus:ring-2 focus:ring-primary/30 focus:outline-none rounded-sm min-h-[44px] min-w-[44px] flex items-center justify-center" aria-label="English">EN</Link>
+          </div>
+          <div className="w-px h-4 bg-outline-variant dark:bg-outline mx-2 hidden md:block" aria-hidden="true" />
+          <ThemeToggle />
+          <Link 
+            href="/iletisim" 
+            className="hidden md:flex bg-[#CA8A04] text-white px-6 py-2 rounded-full font-label-sm uppercase tracking-widest text-[12px] hover:bg-[#CA8A04]/90 transition-colors duration-200 shadow-md cursor-pointer focus:ring-2 focus:ring-[#CA8A04]/50 focus:outline-none min-h-[44px] items-center"
+          >
+            {t("bookNow")}
+          </Link>
+        </div>
+      </nav>
+    </header>
+  );
+}
diff --git a/components/theme-provider.tsx b/components/theme-provider.tsx
new file mode 100644
index 0000000..ec6d108
--- /dev/null
+++ b/components/theme-provider.tsx
@@ -0,0 +1,90 @@
+"use client"
+
+import * as React from "react"
+
+type Theme = "light" | "dark" | "system"
+
+const ThemeContext = React.createContext<{
+  theme: Theme
+  setTheme: (theme: Theme) => void
+  resolvedTheme: "light" | "dark"
+}>({
+  theme: "system",
+  setTheme: () => {},
+  resolvedTheme: "light",
+})
+
+export function useTheme() {
+  return React.useContext(ThemeContext)
+}
+
+function getSystemTheme(): "light" | "dark" {
+  if (typeof window === "undefined") return "light"
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
+}
+
+export function ThemeProvider({
+  children,
+  attribute = "class",
+  defaultTheme = "system",
+  enableSystem = true,
+}: {
+  children: React.ReactNode
+  attribute?: string
+  defaultTheme?: Theme
+  enableSystem?: boolean
+  disableTransitionOnChange?: boolean
+}) {
+  const [theme, setThemeState] = React.useState<Theme>(defaultTheme)
+  const [resolvedTheme, setResolvedTheme] = React.useState<"light" | "dark">("light")
+  const [mounted, setMounted] = React.useState(false)
+
+  // Read saved theme from localStorage on mount
+  React.useEffect(() => {
+    const saved = localStorage.getItem("theme") as Theme | null
+    if (saved) {
+      setThemeState(saved)
+    }
+    setMounted(true)
+  }, [])
+
+  // Resolve system theme and apply to document
+  React.useEffect(() => {
+    const resolved = theme === "system" ? getSystemTheme() : theme
+    setResolvedTheme(resolved)
+
+    const root = document.documentElement
+    root.classList.remove("light", "dark")
+    root.classList.add(resolved)
+  }, [theme])
+
+  // Listen for system theme changes
+  React.useEffect(() => {
+    if (!enableSystem) return
+
+    const mql = window.matchMedia("(prefers-color-scheme: dark)")
+    const handler = () => {
+      if (theme === "system") {
+        const resolved = getSystemTheme()
+        setResolvedTheme(resolved)
+        const root = document.documentElement
+        root.classList.remove("light", "dark")
+        root.classList.add(resolved)
+      }
+    }
+
+    mql.addEventListener("change", handler)
+    return () => mql.removeEventListener("change", handler)
+  }, [theme, enableSystem])
+
+  const setTheme = React.useCallback((newTheme: Theme) => {
+    setThemeState(newTheme)
+    localStorage.setItem("theme", newTheme)
+  }, [])
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme, resolvedTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}
diff --git a/components/theme-toggle.tsx b/components/theme-toggle.tsx
new file mode 100644
index 0000000..d34e474
--- /dev/null
+++ b/components/theme-toggle.tsx
@@ -0,0 +1,54 @@
+"use client"
+
+import * as React from "react"
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "@/components/theme-provider"
+import { motion } from "framer-motion"
+
+export function ThemeToggle() {
+  const { theme, setTheme, resolvedTheme } = useTheme()
+  const [mounted, setMounted] = React.useState(false)
+
+  React.useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return <div className="w-9 h-9" />
+  }
+
+  const isDark = resolvedTheme === "dark"
+
+  return (
+    <button
+      onClick={() => setTheme(isDark ? "light" : "dark")}
+      className="relative p-2 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary overflow-hidden"
+      aria-label="Toggle theme"
+    >
+      <motion.div
+        initial={false}
+        animate={{
+          scale: isDark ? 0 : 1,
+          opacity: isDark ? 0 : 1,
+          rotate: isDark ? -90 : 0
+        }}
+        transition={{ duration: 0.3, ease: "easeInOut" }}
+        className="absolute inset-0 flex items-center justify-center"
+      >
+        <Sun className="h-4 w-4" />
+      </motion.div>
+      <motion.div
+        initial={false}
+        animate={{
+          scale: isDark ? 1 : 0,
+          opacity: isDark ? 1 : 0,
+          rotate: isDark ? 0 : 90
+        }}
+        transition={{ duration: 0.3, ease: "easeInOut" }}
+        className="relative flex items-center justify-center"
+      >
+        <Moon className="h-4 w-4" />
+      </motion.div>
+    </button>
+  )
+}
diff --git a/lib/mock-data.ts b/lib/mock-data.ts
new file mode 100644
index 0000000..13b9cd1
--- /dev/null
+++ b/lib/mock-data.ts
@@ -0,0 +1,82 @@
+export const mockData = {
+  logos: {
+    main: "https://kordonaparts.com/tema/assets/images/logo.png",
+    footer: "https://kordonaparts.com/tema/assets/images/footer-logo.png"
+  },
+  heroSlides: [
+    "https://kordonaparts.com/media/images/slide/1669728563.jpg",
+    "https://kordonaparts.com/media/images/slide/1669728527.jpg",
+    "https://kordonaparts.com/media/images/slide/1669728539.jpg",
+    "https://kordonaparts.com/media/images/slide/1669728553.jpg",
+    "https://kordonaparts.com/media/images/slide/1669728576.jpg"
+  ],
+  contact: {
+    email: "info@kordonapart.com",
+    phone: "+90 532 345 15 96",
+    address: "Atatürk Cad. No:10 48300 Fethiye MUĞLA TURKEY",
+    social: {
+      facebook: "https://www.facebook.com/fethiyekordonapart/",
+      twitter: "https://twitter.com/kordonaparts",
+      instagram: "https://www.instagram.com/kordonaparts",
+      youtube: "https://www.youtube.com/kordonaparts"
+    }
+  },
+  accommodations: [
+    {
+      id: "kordon-apart-11",
+      slug: "kordon-apart-11",
+      name: "Kordon Apart 11",
+      type: "Delüks Apart",
+      bedrooms: 2,
+      capacity: 4,
+      location: "Fethiye / Merkez",
+      image: "https://kordonaparts.com/media/images/villa/kordon-apart-1.jpg"
+    },
+    {
+      id: "kordon-apart-21",
+      slug: "kordon-apart-21",
+      name: "Kordon Apart 21",
+      type: "Premium Apart Oda",
+      bedrooms: 1,
+      capacity: 3,
+      location: "Fethiye / Merkez",
+      image: "https://kordonaparts.com/media/images/villa/kordon-apart-2.jpg"
+    },
+    {
+      id: "kordon-apart-22",
+      slug: "kordon-apart-22",
+      name: "Kordon Apart 22",
+      type: "Standart Apart Oda",
+      bedrooms: 1,
+      capacity: 2,
+      location: "Fethiye / Merkez",
+      image: "https://kordonaparts.com/media/images/villa/kordon-apart-3.jpg"
+    },
+    {
+      id: "kordon-apart-23",
+      slug: "kordon-apart-23",
+      name: "Kordon Apart 23",
+      type: "Standart Apart Oda",
+      bedrooms: 1,
+      capacity: 3,
+      location: "Fethiye / Merkez",
+      image: "https://kordonaparts.com/media/images/villa/kordon-apart-3.jpg" // Using 22's image as fallback since PRD had lazy.png
+    },
+    {
+      id: "kordon-apart-12",
+      slug: "kordon-apart-12",
+      name: "Kordon Apart 12",
+      type: "Meerblick",
+      bedrooms: 2,
+      capacity: 4,
+      location: "Fethiye / Merkez",
+      image: "https://kordonaparts.com/media/images/villa/kordon-apart-1.jpg" // Using 11's image as fallback since PRD had lazy.png
+    }
+  ],
+  accommodationTypes: [
+    "Delüks Apart",
+    "Premium Apart Oda",
+    "Standart Apart Oda",
+    "Meerblick"
+  ]
+};
diff --git a/messages/de.json b/messages/de.json
new file mode 100644
index 0000000..9371f2d
--- /dev/null
+++ b/messages/de.json
@@ -0,0 +1,46 @@
+{
+  "nav": {
+    "home": "Homepage",
+    "accommodations": "Unsere Unterkünfte",
+    "accommodationTypes": "Unterkunft",
+    "gallery": "Galerie",
+    "blog": "Blog",
+    "contact": "Kommunikation"
+  },
+  "hero": {
+    "title": "Kordon Apart",
+    "region": "Fethiye / Merkez",
+    "checkInCheckOut": "Check in - Check out Datum",
+    "persons": "Anzahl der Personen Auswählen",
+    "search": "Suche",
+    "reservation": "Reservierungsanfrage"
+  },
+  "accommodations": {
+    "title": "Unsere Unterkünfte",
+    "viewAll": "Alle anzeigen",
+    "bedrooms": "{count} Schlafzimmer",
+    "persons": "{count} Personen",
+    "view": "Ansehen"
+  },
+  "footer": {
+    "rights": "Alle Rechte vorbehalten.",
+    "contact": "Kontakt",
+    "pages": "Seiten",
+    "accommodations": "Unsere Unterkünfte",
+    "social": "Social-Media-Konten",
+    "cookiePolicy": "Cookie-Richtlinie",
+    "userAgreement": "Kullanıcı Sözleşmesi",
+    "privacyPolicy": "Gizlilik Politikası",
+    "about": "Über Uns",
+    "reviews": "Kundenrezensionen"
+  },
+  "contact": {
+    "title": "Kommunikation",
+    "email": "E-Mail-Adresse",
+    "phone": "Telefon",
+    "address": "Adresse",
+    "reservationReq": "Reservierungsanfrage",
+    "reservationNo": "Reservierungs-Nr.",
+    "send": "Senden"
+  }
+}
diff --git a/messages/en.json b/messages/en.json
index f793be6..777224d 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -1,14 +1,72 @@
 {
   "nav": {
     "home": "Home",
-    "about": "About Us",
-    "contact": "Contact"
+    "accommodations": "Suites",
+    "gallery": "Gallery",
+    "contact": "Contact",
+    "bookNow": "BOOK NOW"
   },
   "hero": {
-    "title": "Welcome",
-    "cta": "Learn More"
+    "subtitle": "Boutique Hospitality",
+    "title": "Architecture of Serenity.",
+    "desc": "Experience curated living in the heart of Fethiye. Luxury is in the details we choose to leave out.",
+    "explore": "EXPLORE SUITES",
+    "virtualTour": "VIRTUAL TOUR",
+    "checkIn": "Check In",
+    "checkOut": "Check Out",
+    "guests": "Guests",
+    "checkAvailability": "CHECK AVAILABILITY",
+    "adult1": "1 Adult",
+    "adult2": "2 Adults",
+    "adult3": "3+ Adults"
+  },
+  "accommodations": {
+    "title": "Curated Residences",
+    "desc": "Each space is a unique architectural study.",
+    "viewAll": "VIEW ALL SUITES",
+    "bedrooms": "{count} Bedrooms",
+    "persons": "{count} Persons",
+    "bestseller": "Bestseller"
+  },
+  "services": {
+    "subtitle": "The Experience",
+    "title": "Beyond the Four Walls",
+    "desc": "We curate moments of stillness and connection through bespoke services designed for the modern nomad.",
+    "service1_title": "Rooftop Wellness",
+    "service1_desc": "A heated infinity pool and sauna overlooking the historical district skyline.",
+    "service2_title": "In-Suite Dining",
+    "service2_desc": "Chef-prepared meals delivered to your door, celebrating local seasonal ingredients.",
+    "service3_title": "Digital Concierge",
+    "service3_desc": "24/7 contactless assistance for bookings, transport, and local recommendations."
+  },
+  "newsletter": {
+    "title": "Join the Luxe Collective",
+    "desc": "Be the first to know about new property openings and exclusive seasonal offers.",
+    "placeholder": "YOUR EMAIL ADDRESS",
+    "subscribe": "SUBSCRIBE",
+    "label": "Your email address"
   },
   "footer": {
-    "rights": "All rights reserved."
+    "rights": "All rights reserved.",
+    "contact": "Contact",
+    "pages": "Pages",
+    "accommodations": "Suites",
+    "social": "Social Media Accounts",
+    "cookiePolicy": "Cookie Policy",
+    "userAgreement": "User Agreement",
+    "privacyPolicy": "Privacy Policy",
+    "about": "About Us",
+    "reviews": "Customer Reviews",
+    "legal": "Legal",
+    "desc": "Boutique apart-hotels redefined through architectural clarity and premium hospitality."
+  },
+  "contact": {
+    "title": "Contact",
+    "email": "E-mail Address",
+    "phone": "Phone",
+    "address": "Address",
+    "reservationReq": "Reservation Request",
+    "reservationNo": "Reservation No",
+    "send": "Send"
   }
 }
diff --git a/messages/ru.json b/messages/ru.json
new file mode 100644
index 0000000..0851259
--- /dev/null
+++ b/messages/ru.json
@@ -0,0 +1,46 @@
+{
+  "nav": {
+    "home": "Главная",
+    "accommodations": "Наши апартаменты",
+    "accommodationTypes": "Проживание",
+    "gallery": "Галерея",
+    "blog": "Блог",
+    "contact": "Контакты"
+  },
+  "hero": {
+    "title": "Kordon Apart",
+    "region": "Фетхие / Центр",
+    "checkInCheckOut": "Дата заезда - выезда",
+    "persons": "Количество человек",
+    "search": "Поиск",
+    "reservation": "Запрос на бронирование"
+  },
+  "accommodations": {
+    "title": "Наши апартаменты",
+    "viewAll": "Смотреть все",
+    "bedrooms": "{count} Спальни",
+    "persons": "{count} Человек",
+    "view": "Смотреть"
+  },
+  "footer": {
+    "rights": "Все права защищены.",
+    "contact": "Контакты",
+    "pages": "Страницы",
+    "accommodations": "Наши апартаменты",
+    "social": "Социальные сети",
+    "cookiePolicy": "Политика использования файлов cookie",
+    "userAgreement": "Пользовательское соглашение",
+    "privacyPolicy": "Политика конфиденциальности",
+    "about": "О нас",
+    "reviews": "Отзывы клиентов"
+  },
+  "contact": {
+    "title": "Контакты",
+    "email": "Адрес электронной почты",
+    "phone": "Телефон",
+    "address": "Адрес",
+    "reservationReq": "Запрос на бронирование",
+    "reservationNo": "Номер бронирования",
+    "send": "Отправить"
+  }
+}
diff --git a/messages/tr.json b/messages/tr.json
index 1994c6c..ac56d34 100644
--- a/messages/tr.json
+++ b/messages/tr.json
@@ -1,14 +1,72 @@
 {
   "nav": {
     "home": "Ana Sayfa",
-    "about": "Hakkımızda",
-    "contact": "İletişim"
+    "accommodations": "Odalarımız",
+    "gallery": "Galeri",
+    "contact": "İletişim",
+    "bookNow": "REZERVASYON"
   },
   "hero": {
-    "title": "Hoş Geldiniz",
-    "cta": "Daha Fazla Bilgi"
+    "subtitle": "Butik Konaklama",
+    "title": "Huzurun Mimarisi.",
+    "desc": "Fethiye'nin kalbinde özenle seçilmiş bir yaşamı deneyimleyin. Lüks, dışarıda bıraktığımız detaylarda gizlidir.",
+    "explore": "ODALARI KEŞFET",
+    "virtualTour": "SANAL TUR",
+    "checkIn": "Giriş Tarihi",
+    "checkOut": "Çıkış Tarihi",
+    "guests": "Misafirler",
+    "checkAvailability": "MÜSAİTLİK KONTROLÜ",
+    "adult1": "1 Yetişkin",
+    "adult2": "2 Yetişkin",
+    "adult3": "3+ Yetişkin"
+  },
+  "accommodations": {
+    "title": "Odalarımız",
+    "desc": "Her mekan benzersiz bir mimari çalışmadır.",
+    "viewAll": "TÜM ODALARI GÖR",
+    "bedrooms": "{count} Yatak Odası",
+    "persons": "{count} Kişi",
+    "bestseller": "En Çok Tercih Edilen"
+  },
+  "services": {
+    "subtitle": "Deneyim",
+    "title": "Dört Duvarın Ötesinde",
+    "desc": "Modern göçebeler için tasarlanmış özel hizmetlerle dinginlik ve bağlantı anları yaratıyoruz.",
+    "service1_title": "Teras Wellness",
+    "service1_desc": "Tarihi bölge silüetine bakan ısıtmalı sonsuzluk havuzu ve sauna.",
+    "service2_title": "Oda İçi Yemek",
+    "service2_desc": "Yerel mevsimlik malzemeleri kutlayan, kapınıza teslim şef yapımı yemekler.",
+    "service3_title": "Dijital Concierge",
+    "service3_desc": "Rezervasyonlar, ulaşım ve yerel öneriler için 7/24 temassız asistan."
+  },
+  "newsletter": {
+    "title": "Luxe Collective'e Katılın",
+    "desc": "Yeni tesis açılışları ve özel sezonluk tekliflerden ilk siz haberdar olun.",
+    "placeholder": "E-POSTA ADRESİNİZ",
+    "subscribe": "ABONE OL",
+    "label": "E-posta adresiniz"
   },
   "footer": {
-    "rights": "Tüm hakları saklıdır."
+    "rights": "Tüm hakları saklıdır.",
+    "contact": "İletişim",
+    "pages": "Sayfalar",
+    "accommodations": "Odalarımız",
+    "social": "Sosyal Medya Hesaplarımız",
+    "cookiePolicy": "Çerez Politikası",
+    "userAgreement": "Kullanıcı Sözleşmesi",
+    "privacyPolicy": "Gizlilik Sözleşmesi",
+    "about": "Hakkımızda",
+    "reviews": "Müşteri Yorumları",
+    "legal": "Yasal",
+    "desc": "Mimari netlik ve üst düzey misafirperverlik ile yeniden tanımlanmış butik apart oteller."
+  },
+  "contact": {
+    "title": "İletişim",
+    "email": "E-Posta Adresi",
+    "phone": "Telefon",
+    "address": "Adres",
+    "reservationReq": "Rezervasyon Talebi",
+    "reservationNo": "Rezervasyon No",
+    "send": "Gönder"
   }
 }
diff --git a/next.config.ts b/next.config.ts
index 8dff980..9e638f3 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -9,6 +9,7 @@ const nextConfig: NextConfig = {
     remotePatterns: [
       { protocol: 'https', hostname: 'res.cloudinary.com' },
       { protocol: 'https', hostname: 'images.unsplash.com' },
+      { protocol: 'https', hostname: 'kordonaparts.com' },
     ],
   },
 }
diff --git a/package-lock.json b/package-lock.json
index b36e112..9a57965 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "fethiye-holiday",
+  "name": "kordonaparts",
   "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "fethiye-holiday",
+      "name": "kordonaparts",
       "version": "0.1.0",
       "dependencies": {
         "@base-ui/react": "^1.5.0",
@@ -19,9 +19,11 @@
         "next": "16.2.9",
         "next-auth": "^5.0.0-beta.31",
         "next-intl": "^4.13.0",
+        "next-themes": "^0.4.6",
         "react": "19.2.4",
         "react-dom": "19.2.4",
         "shadcn": "^4.11.0",
+        "sonner": "^2.0.7",
         "tailwind-merge": "^3.6.0",
         "tw-animate-css": "^1.4.0"
       },
@@ -8590,6 +8592,16 @@
         }
       }
     },
+    "node_modules/next-themes": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
+      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -10223,6 +10235,16 @@
       "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
       "license": "MIT"
     },
+    "node_modules/sonner": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz",
+      "integrity": "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
diff --git a/package.json b/package.json
index 2e615fe..2947666 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "fethiye-holiday",
+  "name": "kordonaparts",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -20,9 +20,11 @@
     "next": "16.2.9",
     "next-auth": "^5.0.0-beta.31",
     "next-intl": "^4.13.0",
+    "next-themes": "^0.4.6",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "shadcn": "^4.11.0",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.6.0",
     "tw-animate-css": "^1.4.0"
   },