first commit

Dockerfile

@@ -0,0 +1,61 @@
+# 1. Base image
+FROM node:20-alpine AS base
+
+# 2. Dependencies
+FROM base AS deps
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json package-lock.json* ./
+RUN npm ci --legacy-peer-deps
+
+
+# 3. Builder
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Environment variables must be present at build time for Next.js
+ARG NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME
+ARG CLOUDINARY_API_KEY
+ARG CLOUDINARY_API_SECRET
+
+ENV NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=$NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME
+ENV CLOUDINARY_API_KEY=$CLOUDINARY_API_KEY
+ENV CLOUDINARY_API_SECRET=$CLOUDINARY_API_SECRET
+ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN npm run build
+
+# 4. Runner
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT=3000
+# set hostname to localhost
+ENV HOSTNAME="0.0.0.0"
+
+CMD ["node", "server.js"]

app/accommodation/[slug]/page.tsx

@@ -0,0 +1,154 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { resortData } from "@/src/data/resort";
+import Image from "next/image";
+import Link from "next/link";
+import { notFound, useParams } from "next/navigation";
+
+const getCloudinaryUrl = (publicId: string) => {
+  return `https://res.cloudinary.com/du7xohbct/image/upload/q_auto,f_auto,w_2000/${publicId}`;
+};
+
+export default function RoomDetailsPage() {
+  const params = useParams();
+  const slug = params.slug as string;
+  const lang = "tr"; // Mocked locale
+
+  const room = resortData.rooms.find((r) => r.slug === slug);
+
+  if (!room) {
+    notFound();
+  }
+
+  return (
+    <div className="bg-[#FAF9F6] min-h-screen">
+      {/* Hero Header */}
+      <section className="relative h-[65vh] w-full overflow-hidden">
+        <motion.div 
+          initial={{ scale: 1.1 }}
+          animate={{ scale: 1 }}
+          transition={{ duration: 1.5 }}
+          className="absolute inset-0"
+        >
+          <Image
+            src={getCloudinaryUrl(room.mainImageId)}
+            alt={room.name[lang]}
+            fill
+            className="object-cover brightness-75"
+            priority
+          />
+        </motion.div>
+        
+        <div className="absolute inset-0 flex flex-col items-center justify-center text-center z-10 px-6">
+          <motion.span 
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="text-white text-xs tracking-[0.5em] font-bold uppercase mb-4"
+          >
+            {room.size} — {room.capacity}
+          </motion.span>
+          <motion.h1 
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.2 }}
+            className="text-white text-5xl md:text-8xl font-serif"
+          >
+            {room.name[lang]}
+          </motion.h1>
+        </div>
+      </section>
+
+      {/* Content Section */}
+      <section className="max-w-7xl mx-auto px-6 py-32">
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-20">
+          
+          {/* Left: Description & Details */}
+          <div className="lg:col-span-2 space-y-16">
+            <div className="space-y-6">
+              <h2 className="text-sm font-bold tracking-[0.3em] text-gold uppercase">ODA HAKKINDA</h2>
+              <p className="text-2xl md:text-3xl font-serif text-gray-900 leading-relaxed font-light italic">
+                {room.description[lang]}
+              </p>
+            </div>
+
+            <div className="grid grid-cols-2 md:grid-cols-3 gap-8 pt-10 border-t border-black/5">
+              {room.features.map((f) => {
+                const feat = resortData.featureIcons[f];
+                return feat ? (
+                  <div key={f} className="flex items-center gap-4 group">
+                    <div className="w-12 h-12 rounded-full border border-black/5 flex items-center justify-center text-xl bg-white transition-colors group-hover:border-gold group-hover:bg-gold/5">
+                      {feat.icon}
+                    </div>
+                    <span className="text-[10px] font-bold tracking-widest text-gray-400 uppercase">
+                      {feat.label[lang]}
+                    </span>
+                  </div>
+                ) : null;
+              })}
+            </div>
+          </div>
+
+          {/* Right: Sticky Sidebar / Call to Action */}
+          <div className="lg:col-span-1">
+            <div className="sticky top-32 bg-white p-10 shadow-2xl shadow-black/5 border border-black/5">
+              <div className="space-y-8">
+                <div>
+                  <h4 className="text-[10px] font-bold tracking-widest text-gray-400 uppercase mb-2">KONAKLAMA TİPİ</h4>
+                  <p className="text-xl font-serif text-gray-900">{room.capacity}</p>
+                </div>
+                
+                <div>
+                  <h4 className="text-[10px] font-bold tracking-widest text-gray-400 uppercase mb-2">ODA BÜYÜKLÜĞÜ</h4>
+                  <p className="text-xl font-serif text-gray-900">{room.size}</p>
+                </div>
+
+                <div className="pt-8">
+                  <Link 
+                    href={resortData.bookingUrl}
+                    className="block w-full bg-[#5C6353] text-white text-center py-5 text-[10px] font-bold tracking-[0.3em] uppercase hover:bg-gold transition-all"
+                  >
+                    ŞİMDİ REZERVASYON YAP
+                  </Link>
+                  <p className="mt-4 text-[9px] text-gray-400 text-center tracking-tight leading-normal">
+                    * En iyi fiyat garantisi ve resmi web sitesi avantajları ile yerinizi ayırtın.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+        </div>
+      </section>
+
+      {/* Gallery Highlight */}
+      <section className="bg-white py-24 pb-48">
+        <div className="max-w-7xl mx-auto px-6">
+           <div className="grid grid-cols-1 md:grid-cols-3 gap-1">
+              {room.galleryImageIds.slice(0, 3).map((id, i) => (
+                <div key={id} className="relative aspect-square overflow-hidden group">
+                  <Image
+                    src={getCloudinaryUrl(id)}
+                    alt={`${room.name[lang]} Gallery ${i + 1}`}
+                    fill
+                    className="object-cover grayscale hover:grayscale-0 transition-all duration-700"
+                  />
+                </div>
+              ))}
+           </div>
+           
+           <div className="mt-20 text-center">
+             <Link 
+              href="/accommodation"
+              className="text-[10px] font-bold tracking-[0.4em] text-gray-400 hover:text-gold transition-colors inline-flex items-center gap-4"
+             >
+               <span className="w-12 h-px bg-current" />
+               GERİ DÖN
+               <span className="w-12 h-px bg-current" />
+             </Link>
+           </div>
+        </div>
+      </section>
+    </div>
+  );
+}

app/accommodation/page.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { resortData } from "@/src/data/resort";
+import { useState } from "react";
+import AccommodationCard from "../components/AccommodationCard";
+
+export default function AccommodationPage() {
+  const lang = "tr";
+  const [filter, setFilter] = useState<"all" | "rooms" | "residence">("all");
+
+  const filteredRooms = resortData.rooms.filter(room => {
+    if (filter === "all") return true;
+    if (filter === "rooms") return !room.slug.includes("rezidans");
+    if (filter === "residence") return room.slug.includes("rezidans");
+    return true;
+  });
+
+  return (
+    <div className="bg-[#ECE7E1] min-h-screen pt-72 md:pt-96 pb-48  flex flex-col items-center">
+      <div className="max-w-[1600px] mx-auto px-6 ">
+
+        {/* Header Section */}
+        <div className="space-y-12 mb-32 mt-40">
+          <div className="space-y-6">
+            <motion.div
+              initial={{ opacity: 0, x: -20 }}
+              animate={{ opacity: 1, x: 0 }}
+              className="flex items-center gap-4"
+            >
+              <div className="w-12 h-px bg-gold" />
+              <span className="text-gold text-[10px] tracking-[0.5em] font-bold uppercase block">
+                KONAKLAMA DENEYİMİ
+              </span>
+            </motion.div>
+
+            <motion.h1
+              initial={{ y: 30, opacity: 0 }}
+              animate={{ y: 0, opacity: 1 }}
+              transition={{ delay: 0.1, duration: 0.8 }}
+              className="text-6xl md:text-8xl font-serif text-gray-900 leading-[0.85] tracking-tight"
+            >
+              Zarafet & <br /><span className="italic font-light">Ege Serüveni</span>
+            </motion.h1>
+
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: 0.3 }}
+              className="pt-10 border-t border-black/5"
+            >
+              <p className="text-gray-500 font-light text-2xl leading-relaxed italic border-l-4 border-gold/20 pl-8 max-w-2xl">
+                &ldquo;Bardakçı Koyu&apos;nun büyüleyici manzarasında, lüksün ve huzurun buluştuğu noktada sizi ağırlıyoruz.&rdquo;
+              </p>
+            </motion.div>
+          </div>
+
+          <div className="flex bg-white p-2 rounded-full shadow-sm border border-black/5 w-fit">
+            {["all", "rooms", "residence"].map((id) => (
+              <button
+                key={id}
+                onClick={() => setFilter(id as any)}
+                className={`px-10 py-3 rounded-full text-[10px] font-bold tracking-[0.2em] transition-all duration-500 ${filter === id ? "bg-[#5C6353] text-white shadow-lg" : "text-gray-400 hover:text-gray-900"
+                  }`}
+              >
+                {id === "all" ? "HEPSİ" : id === "rooms" ? "ODALAR" : "REZİDANS"}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Accommodation Grid - Single Column for Wide Mode */}
+        <div className="flex flex-col gap-y-16">
+          {filteredRooms.map((room) => (
+            <motion.div
+              key={room.slug}
+              layout
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.8 }}
+            >
+              <AccommodationCard room={room} lang={lang} />
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

app/activities/page.tsx

@@ -0,0 +1,13 @@
+export default function PlaceholderPage() {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-white py-32 section-padding">
+      <div className="max-w-4xl mx-auto text-center space-y-8">
+        <h1 className="text-6xl font-serif text-bodrum-blue tracking-widest opacity-20">COMING SOON</h1>
+        <div className="w-24 h-px bg-turquoise mx-auto" />
+        <p className="text-xl text-gray-400 italic font-light">
+          Bu bölüm çok yakında yayına girecektir.
+        </p>
+      </div>
+    </div>
+  );
+}

app/beach/page.tsx

@@ -0,0 +1,13 @@
+export default function PlaceholderPage() {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-zinc-50 py-32 section-padding">
+      <div className="max-w-4xl mx-auto text-center">
+        <h1 className="text-6xl font-serif text-bodrum-blue mb-8 uppercase tracking-widest">SOON</h1>
+        <p className="text-xl text-gray-400 italic font-light leading-relaxed">
+          &ldquo;Ege'nin turkuaz sularında eşsiz bir sahil deneyimi çok yakında.&rdquo;
+        </p>
+        <div className="mt-12 h-px w-24 bg-turquoise mx-auto" />
+      </div>
+    </div>
+  );
+}

app/components/AccommodationCard.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { resortData } from "@/src/data/resort";
+import { motion } from "framer-motion";
+import { useRef } from "react";
+
+interface AccommodationCardProps {
+  room: any;
+  lang: "tr";
+}
+
+const getCloudinaryUrl = (publicId: string, width = 1200) => {
+  if (!publicId) return "https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&q=80&w=1200";
+  return `https://res.cloudinary.com/du7xohbct/image/upload/q_auto,f_auto,w_${width}/${publicId}`;
+};
+
+export default function AccommodationCard({ room, lang }: AccommodationCardProps) {
+  const allImages = [
+    room.mainImageId,
+    ...(room.galleryImageIds || [])
+  ];
+
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <div className="flex flex-col w-full bg-[#ECE7E1] mb-12 shadow-sm">
+      {/* Precision Header Section */}
+      <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center px-10 py-12 gap-10">
+        
+        {/* Left: Title & Descriptions */}
+        <div className="flex-[2] space-y-3">
+          <h3 className="text-[#4F5B3A] text-2xl font-serif tracking-tight leading-none mb-1">
+            {room.name[lang]} <span className="text-sm font-sans opacity-60">({room.size})</span>
+          </h3>
+          <p className="text-[13px] leading-relaxed text-[#4F5B3A] opacity-90 font-light max-w-2xl">
+            {room.description[lang]}
+          </p>
+        </div>
+
+        {/* Right: Booking Button */}
+        <div className="flex-shrink-0 w-full lg:w-auto">
+          <Link 
+            href={`/accommodation/${room.slug}`}
+            className="block w-full lg:w-auto bg-[#C87E4B] hover:bg-[#A6693E] text-black px-12 py-4 text-[11px] font-bold tracking-[0.2em] rounded-md transition-all duration-300 transform hover:-translate-y-1 shadow-xl hover:shadow-[#C87E4B]/20 text-center uppercase"
+          >
+            Odayı İncele
+          </Link>
+        </div>
+      </div>
+
+      {/* DRAGGABLE SLIDER */}
+      <div 
+        style={{ height: '550px', position: 'relative', width: '100vw', left: '50%', right: '50%', marginLeft: '-50vw', marginRight: '-50vw' }}
+        className="overflow-hidden cursor-grab active:cursor-grabbing bg-zinc-200"
+      >
+        <motion.div 
+            ref={scrollRef}
+            drag="x"
+            dragConstraints={{ right: 80, left: -((allImages.length - 1) * 720) }}
+            className="flex h-full gap-4 px-[15vw]"
+        >
+            {allImages.map((id, idx) => (
+              <div 
+                key={`${id}-${idx}`}
+                style={{ height: '100%', position: 'relative', minWidth: '700px', flexShrink: 0 }}
+                className="rounded-sm overflow-hidden shadow-sm group"
+              >
+                <Image
+                  src={getCloudinaryUrl(id, 1200)}
+                  alt="Gallery"
+                  fill
+                  style={{ objectFit: 'cover' }}
+                  sizes="(max-width: 1024px) 100vw, 80vw"
+                  className="transition-transform duration-700 group-hover:scale-105 pointer-events-none"
+                  draggable={false}
+                  priority={idx < 2}
+                />
+              </div>
+            ))}
+        </motion.div>
+      </div>
+    </div>
+  );
+}

app/components/ExperienceCard.tsx

@@ -0,0 +1,41 @@
+import { ExperienceSection } from "@/src/data/resort";
+import { getCloudinaryUrl } from "@/src/lib/cloudinary";
+import Link from "next/link";
+import Image from "next/image";
+
+interface ExperienceCardProps {
+  experience: ExperienceSection;
+  lang: "tr" | "en" | "de";
+}
+
+export default function ExperienceCard({ experience, lang }: ExperienceCardProps) {
+  return (
+    <Link 
+      href={experience.href}
+      className="group relative overflow-hidden rounded-2xl aspect-square block"
+    >
+      <Image
+        src={getCloudinaryUrl(experience.imageId, { width: 800, height: 800, crop: "fill" })}
+        alt={experience.title[lang]}
+        fill
+        className="object-cover transition-transform duration-1000 group-hover:scale-110 group-hover:rotate-1"
+      />
+      
+      {/* Dark Overlay */}
+      <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-60 transition-opacity duration-700 group-hover:opacity-40" />
+      
+      {/* Minimal Gold Border Hover */}
+      <div className="absolute inset-4 border border-white/0 transition-all duration-700 group-hover:border-gold/30 group-hover:backdrop-blur-[2px] flex items-center justify-center">
+        <span className="text-white text-xs font-bold tracking-[0.4em] opacity-0 translate-y-4 transition-all duration-700 group-hover:opacity-100 group-hover:translate-y-0 border-b border-gold pb-1">
+          {lang === "tr" ? "KEŞFET" : lang === "en" ? "EXPLORE" : "ENTDECKEN"}
+        </span>
+      </div>
+
+      {/* Content */}
+      <div className="absolute bottom-8 left-8 text-white group-hover:opacity-0 transition-opacity duration-500">
+        <h3 className="text-2xl font-serif font-bold mb-1 tracking-wider">{experience.title[lang]}</h3>
+        <p className="text-white/70 text-[10px] uppercase tracking-[0.2em] font-medium">{experience.subtitle[lang]}</p>
+      </div>
+    </Link>
+  );
+}

app/components/FloatingBookingBar.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { resortData } from "@/src/data/resort";
+import Link from "next/link";
+
+export default function FloatingBookingBar() {
+  // Normally would have state for dates, but following PRD's "minimal bar"
+  const lang = "tr"; // Mocked locale
+
+  return (
+    <div className="fixed bottom-6 left-0 right-0 z-40 px-6 animate-fade-in-up">
+      <div className="max-w-4xl mx-auto glass-dark text-white rounded-full p-2 flex items-center shadow-2xl">
+        <div className="flex-1 flex items-center divide-x divide-white/10 px-4 overflow-x-auto no-scrollbar">
+          {/* Check In */}
+          <div className="px-4 py-2 flex flex-col min-w-[120px]">
+            <span className="text-[10px] uppercase tracking-widest text-white/50">
+              {resortData.floatingBar.checkIn[lang]}
+            </span>
+            <span className="text-sm font-semibold italic">Select Date</span>
+          </div>
+          
+          {/* Check Out */}
+          <div className="px-4 py-2 flex flex-col min-w-[120px]">
+            <span className="text-[10px] uppercase tracking-widest text-white/50">
+              {resortData.floatingBar.checkOut[lang]}
+            </span>
+            <span className="text-sm font-semibold italic">Select Date</span>
+          </div>
+
+          {/* Guests */}
+          <div className="px-4 py-2 flex flex-col min-w-[100px]">
+            <span className="text-[10px] uppercase tracking-widest text-white/50">
+              {resortData.floatingBar.guests[lang]}
+            </span>
+            <span className="text-sm font-semibold">2 Adults</span>
+          </div>
+        </div>
+
+        <Link
+          href={resortData.bookingUrl}
+          target="_blank"
+          className="bg-gold text-white px-8 py-3 rounded-full font-bold text-sm hover:bg-gold-dark transition-all whitespace-nowrap"
+        >
+          {resortData.floatingBar.search[lang]}
+        </Link>
+      </div>
+    </div>
+  );
+}

app/components/Footer.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import Link from "next/link";
+import { resortData } from "@/src/data/resort";
+
+export default function Footer() {
+  return (
+    <footer className="bg-[#EAE5D8] pt-24 pb-8 px-6 overflow-hidden border-t border-black/5">
+      <div className="max-w-7xl mx-auto">
+        {/* Main Footer Content */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12 mb-20">
+          
+          {/* Column 1: Brand & Newsletter */}
+          <div className="lg:col-span-1 space-y-8">
+            <h2 className="text-3xl font-serif text-gray-900 tracking-tighter">SALMAKIS</h2>
+            
+            <div className="space-y-4">
+              <div className="relative group">
+                <input 
+                  type="email" 
+                  placeholder="E-Posta Adresiniz"
+                  className="w-full bg-white border-none py-4 px-6 pr-32 text-xs tracking-widest outline-none focus:ring-1 focus:ring-gold transition-all"
+                />
+                <button className="absolute right-1 top-1 bottom-1 bg-[#C59D5F] text-white px-6 text-[10px] font-bold tracking-widest hover:bg-gold transition-all">
+                  ABONE OL
+                </button>
+              </div>
+              
+              <label className="flex items-center gap-3 cursor-pointer group">
+                <input type="checkbox" className="w-3 h-3 accent-gold border-gray-300" />
+                <span className="text-[10px] text-gray-400 font-light tracking-wider group-hover:text-gray-600 transition-colors">
+                  Kişisel verilerimin işlenmesini kabul ediyorum.
+                </span>
+              </label>
+            </div>
+
+            <div className="flex gap-4 pt-4">
+              {resortData.social.map((social) => (
+                <Link 
+                  key={social.platform} 
+                  href={social.url}
+                  className="text-gray-900 hover:text-gold transition-colors text-lg"
+                >
+                  <i className={`fab fa-${social.platform.toLowerCase()}`}></i>
+                </Link>
+              ))}
+            </div>
+          </div>
+
+          {/* Column 2: Salmakis */}
+          <div className="space-y-6">
+            <h4 className="text-[10px] font-bold tracking-[0.3em] text-gray-400 uppercase">SALMAKIS</h4>
+            <ul className="space-y-3">
+              {["Doğada.", "Sofrada.", "Odalarda.", "Bizimle."].map((item) => (
+                <li key={item}>
+                  <Link href="#" className="text-sm font-light text-gray-600 hover:text-gold transition-colors">{item}</Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Column 3: Sayfalar */}
+          <div className="space-y-6">
+            <h4 className="text-[10px] font-bold tracking-[0.3em] text-gray-400 uppercase">SAYFALAR</h4>
+            <ul className="space-y-3">
+              {["Konaklama", "S.S.S", "Sürdürülebilirlik", "Resim Galerisi", "Fiyat Listesi"].map((item) => (
+                <li key={item}>
+                  <Link href="#" className="text-sm font-light text-gray-600 hover:text-gold transition-colors">{item}</Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Column 4: Yasal */}
+          <div className="space-y-6">
+            <h4 className="text-[10px] font-bold tracking-[0.3em] text-gray-400 uppercase">VERİ KORUMA</h4>
+            <ul className="space-y-3">
+              {["Künye", "Gizlilik Politikası", "KVKK", "Çerez Ayarları"].map((item) => (
+                <li key={item}>
+                  <Link href="#" className="text-sm font-light text-gray-600 hover:text-gold transition-colors">{item}</Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Column 5: İletişim */}
+          <div className="space-y-6">
+            <h4 className="text-[10px] font-bold tracking-[0.3em] text-gray-400 uppercase">İLETİŞİM</h4>
+            <ul className="space-y-3">
+              <li><Link href="#" className="text-sm font-light text-gray-600 hover:text-gold transition-colors">Oda Rezerve Et</Link></li>
+              <li><Link href="#" className="text-sm font-light text-gray-600 hover:text-gold transition-colors">Yol Tarifi Al</Link></li>
+              <li><Link href="#" className="text-sm font-light text-gray-600 hover:text-gold transition-colors">İletişime Geç</Link></li>
+              <li className="pt-2 text-sm text-gray-900 font-medium tracking-wider">{resortData.contact.phone}</li>
+              <li className="text-sm text-gray-400 font-light">{resortData.contact.email}</li>
+            </ul>
+          </div>
+        </div>
+
+        {/* Brand Logos / Partners */}
+        <div className="border-t border-black/5 py-16 flex flex-wrap justify-center items-center gap-12 md:gap-24 opacity-40 grayscale hover:grayscale-0 transition-all duration-700">
+           {/* Placeholder Logos reflecting the style in the image */}
+           <div className="text-2xl font-serif tracking-widest text-[#1a2e1e]">BODRUM</div>
+           <div className="text-sm font-bold tracking-[0.4em] text-[#1a2e1e]">EGE MUTFAĞI</div>
+           <div className="text-xl font-serif text-[#1a2e1e] border border-current px-2">S</div>
+           <div className="text-2xl font-sans font-extralight tracking-[0.3em] text-[#1a2e1e]">BLUE FLAG</div>
+        </div>
+
+        {/* Bottom copyright area */}
+        <div className="relative pt-12 flex flex-col md:flex-row justify-between items-center gap-4 text-[9px] tracking-[0.2em] font-medium text-gray-400 uppercase">
+          <div>© 2026 — HER HAKKI SAKLIDIR.</div>
+          
+          {/* Decorative Mountain Line (SVG) */}
+          <div className="absolute bottom-[-20px] left-1/2 -translate-x-1/2 w-full max-w-4xl opacity-10 -z-10">
+            <svg viewBox="0 0 1000 100" className="w-full">
+              <path d="M0 100 L200 60 L400 90 L600 40 L800 70 L1000 50 L1000 100 Z" fill="none" stroke="currentColor" strokeWidth="1" />
+            </svg>
+          </div>
+          
+          <div>SALMAKIS RESORT & SPA</div>
+        </div>
+      </div>
+    </footer>
+  );
+}

app/components/Navbar.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import Link from "next/link";
+
+export default function Navbar() {
+  const lang = "tr"; // Mocked locale
+
+  const navLinks = [
+    { label: { tr: "KONAKLAMA", en: "ACCOMMODATION", de: "UNTERKUNFT" }, href: "/accommodation", side: "left" },
+    { label: { tr: "YİYECEK & İÇECEK", en: "FOOD & BEVERAGE", de: "FOOD & BEVERAGE" }, href: "/dining", side: "left" },
+    { label: { tr: "AKTİVİTE", en: "ACTIVITIES", de: "AKTIVITÄTEN" }, href: "/activities", side: "left" },
+    { label: { tr: "ORGANİZASYON", en: "ORGANIZER", de: "ORGANISATION" }, href: "/organizations", side: "right" },
+    { label: { tr: "GALERİ", en: "GALLERY", de: "GALERIE" }, href: "/gallery", side: "right" },
+    { label: { tr: "SPA CENTER", en: "SPA CENTER", de: "SPA CENTER" }, href: "/spa", side: "right" },
+  ];
+
+  return (
+    <nav className=" top-0 left-0 right-0 z-50 transition-all duration-500 py-6 bg-white shadow-sm border-b border-gray-50">
+      <div className="max-w-[1600px] mx-auto px-10 flex items-center justify-between">
+
+        {/* Left Menu */}
+        <div className="hidden lg:flex items-center space-x-12 flex-1">
+          {navLinks.filter(l => l.side === "left").map((link) => (
+            <Link
+              key={link.href}
+              href={link.href}
+              className="group relative text-[11px] font-medium tracking-[0.2em] transition-all text-gray-900 overflow-hidden"
+            >
+              <span className="relative z-10 block transition-transform duration-300 group-hover:-translate-y-full">
+                {link.label[lang as "tr"]}
+              </span>
+              <span className="absolute inset-0 z-20 block transition-transform duration-300 translate-y-full group-hover:translate-y-0 text-gold italic">
+                {link.label[lang as "tr"]}
+              </span>
+            </Link>
+          ))}
+        </div>
+
+        {/* Centered Logo */}
+        <div className="flex flex-col items-center">
+          <Link href="/" className="flex flex-col items-center group">
+            <span className="text-3xl md:text-5xl font-serif font-light tracking-[0.3em] text-gray-900 leading-none">
+              SALMAKIS
+            </span>
+            <span className="text-[10px] tracking-[0.6em] mt-2 text-gray-400 font-sans uppercase">
+              Resort & Spa
+            </span>
+          </Link>
+        </div>
+
+        {/* Right Menu */}
+        <div className="hidden lg:flex items-center justify-end space-x-12 flex-1">
+          {navLinks.filter(l => l.side === "right").map((link) => (
+            <Link
+              key={link.href}
+              href={link.href}
+              className="group relative text-[11px] font-medium tracking-[0.2em] transition-all text-gray-900 overflow-hidden"
+            >
+              <span className="relative z-10 block transition-transform duration-300 group-hover:-translate-y-full">
+                {link.label[lang as "tr"]}
+              </span>
+              <span className="absolute inset-0 z-20 block transition-transform duration-300 translate-y-full group-hover:translate-y-0 text-gold italic">
+                {link.label[lang as "tr"]}
+              </span>
+            </Link>
+          ))}
+        </div>
+
+        {/* Mobile Menu */}
+        <div className="lg:hidden">
+          <button className="p-2 text-gray-900">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1} stroke="currentColor" className="w-8 h-8">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 9h16.5m-16.5 6.75h16.5" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </nav>
+  );
+}

app/components/ScrollVideo.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { useRef } from "react";
+import { motion, useScroll, useTransform, useSpring } from "framer-motion";
+
+export default function ScrollVideo() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  
+  // Use scroll progress within this section
+  const { scrollYProgress } = useScroll({
+    target: containerRef,
+    offset: ["start start", "end end"]
+  });
+
+  // Smooth out the scroll value
+  const smoothProgress = useSpring(scrollYProgress, {
+    stiffness: 100,
+    damping: 30,
+    restDelta: 0.001
+  });
+
+  // Calculate the expansion: Starts at 25% circle, grows to 150% (to fully cover screen)
+  const clipPathValue = useTransform(smoothProgress, [0, 1], ["circle(25% at 50% 50%)", "circle(100% at 50% 50%)"]);
+  
+  // Also fade the overlay
+  const overlayOpacity = useTransform(smoothProgress, [0, 0.8], [0.3, 0]);
+
+  return (
+    <section 
+      ref={containerRef} 
+      className="relative h-[250vh] bg-white"
+    >
+      <div className="sticky top-0 h-screen w-full flex items-center justify-center overflow-hidden z-30">
+        <motion.div 
+          style={{ clipPath: clipPathValue }}
+          className="relative w-full h-full flex items-center justify-center bg-white will-change-transform shadow-2xl"
+        >
+          {/* YouTube Embed with Hardware Acceleration */}
+          <div className="absolute inset-0 pointer-events-none scale-110 will-change-transform">
+            <iframe
+              className="absolute top-1/2 left-1/2 w-[115vw] h-[115vh] -translate-x-1/2 -translate-y-1/2 object-cover pointer-events-none"
+              src="https://www.youtube.com/embed/avqL1kRkX0c?autoplay=1&mute=1&controls=0&loop=1&playlist=avqL1kRkX0c&playsinline=1&rel=0&modestbranding=1"
+              allow="autoplay; encrypted-media"
+              allowFullScreen
+            ></iframe>
+          </div>
+          
+          {/* Subtle Overlay */}
+          <motion.div 
+            style={{ opacity: overlayOpacity }}
+            className="absolute inset-0 bg-black/20 z-10 pointer-events-none" 
+          />
+        </motion.div>
+      </div>
+    </section>
+  );
+}

app/components/SecurityBadge.tsx

@@ -0,0 +1,22 @@
+import { resortData } from "@/src/data/resort";
+
+export default function SecurityBadge({ lang }: { lang: "tr" | "en" | "de" }) {
+  return (
+    <div className="flex flex-col items-center text-center max-w-2xl mx-auto py-12 px-6 border-t border-gray-100">
+      <div className="w-16 h-16 bg-bodrum-blue rounded-full mb-6 flex items-center justify-center text-white shadow-xl shadow-bodrum-blue/20">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-8 h-8">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21a3.745 3.745 0 0 1-3.127-1.593 3.745 3.745 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.745 3.745 0 0 1 3.296-1.043A3.745 3.745 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z" />
+        </svg>
+      </div>
+      <h4 className="text-xl font-bold text-bodrum-blue mb-2">
+        {resortData.securityBadge.title[lang]}
+      </h4>
+      <p className="text-gray-500 text-sm leading-relaxed mb-4">
+        {resortData.securityBadge.description[lang]}
+      </p>
+      <div className="text-[10px] uppercase tracking-[0.2em] font-bold text-gray-400">
+        Official Website Protection • Verified Secure
+      </div>
+    </div>
+  );
+}

app/components/SmoothScroll.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { ReactLenis } from "lenis/react";
+import { ReactNode } from "react";
+
+export default function SmoothScroll({ children }: { children: ReactNode }) {
+  return (
+    <ReactLenis root options={{ 
+      lerp: 0.05,
+      duration: 1.5,
+      smoothWheel: true 
+    }}>
+      {children}
+    </ReactLenis>
+  );
+}

app/components/SplitSection.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { getCloudinaryUrl } from "@/src/lib/cloudinary";
+import { motion } from "framer-motion";
+
+interface SplitSectionProps {
+  title: string;
+  subtitle: string;
+  description: string;
+  mainImage: string;
+  secondImage: string;
+  href: string;
+  reverse?: boolean;
+}
+
+export default function SplitSection({
+  title,
+  subtitle,
+  description,
+  mainImage,
+  secondImage,
+  href,
+  reverse = false
+}: SplitSectionProps) {
+  return (
+    <section className={`flex flex-col ${reverse ? 'md:flex-row-reverse' : 'md:flex-row'} min-h-screen w-full bg-[#FAF9F6] overflow-hidden`}>
+      
+      {/* Text Side */}
+      <motion.div 
+        initial={{ opacity: 0, y: 50 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true, margin: "-100px" }}
+        transition={{ duration: 0.8, ease: "easeOut" }}
+        className="w-full md:w-1/2 flex flex-col justify-center px-10 md:px-24 py-20"
+      >
+        <span className="text-gold text-xs tracking-[0.4em] font-bold uppercase mb-6 block">
+          {subtitle}
+        </span>
+        <h2 className="text-5xl md:text-7xl font-serif text-gray-900 leading-tight mb-8">
+          {title}
+        </h2>
+        <p className="text-gray-500 text-lg leading-relaxed max-w-md mb-12 font-light">
+          {description}
+        </p>
+        <div>
+          <Link 
+            href={href}
+            className="group relative inline-block overflow-hidden bg-[#C59D5F] text-white px-10 py-4 rounded-md text-[10px] font-bold tracking-widest transition-all hover:bg-gold uppercase active:scale-95"
+          >
+            <span className="relative z-10">KEŞFET</span>
+            <motion.div 
+              className="absolute inset-0 bg-white/20 -translate-x-full group-hover:translate-x-full transition-transform duration-700 ease-in-out"
+            />
+          </Link>
+        </div>
+      </motion.div>
+
+      {/* Image Side */}
+      <div className="w-full md:w-1/2 relative min-h-[500px] md:min-h-screen">
+        <motion.div 
+          initial={{ scale: 1.1, opacity: 0 }}
+          whileInView={{ scale: 1, opacity: 1 }}
+          viewport={{ once: true }}
+          transition={{ duration: 1.5, ease: "easeOut" }}
+          className="relative w-full h-full"
+        >
+          <Image
+            src={getCloudinaryUrl(mainImage, { width: 1200, height: 1600, crop: "fill" })}
+            alt={title}
+            fill
+            className="object-cover"
+          />
+        </motion.div>
+        
+        {/* Floating Secondary Image with Parallax-ish Scroll Effect */}
+        <motion.div 
+          initial={{ opacity: 0, x: reverse ? -100 : 100, y: 50 }}
+          whileInView={{ opacity: 1, x: reverse ? "-40px" : "40px", y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 1, delay: 0.4, ease: "easeOut" }}
+          className={`absolute bottom-20 ${reverse ? 'left-0' : 'right-0'} z-10 w-48 md:w-80 aspect-[3/4] shadow-2xl hidden md:block`}
+        >
+          <Image
+            src={getCloudinaryUrl(secondImage, { width: 600, height: 800, crop: "fill" })}
+            alt={`${title} detail`}
+            fill
+            className="object-cover border-[10px] border-white"
+          />
+        </motion.div>
+      </div>
+    </section>
+  );
+}

app/components/TestimonialsSlider.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { useRef, useState, useEffect } from "react";
+
+const testimonials = [
+  {
+    name: "Ayşe Y.",
+    location: "Türkiye",
+    text: "Bardakçı Koyu'nun büyüleyici manzarasında unutulmaz bir tatil geçirdik. Personelin ilgisi ve otelin zarafeti bizi mest etti.",
+    stars: 5
+  },
+  {
+    name: "John D.",
+    location: "United Kingdom",
+    text: "An absolutely stunning resort. The spa treatment was world-class, and the breakfast by the sea was the highlight of our stay.",
+    stars: 5
+  },
+  {
+    name: "Klaus M.",
+    location: "Germany",
+    text: "Sehr schönes Hotel mit exzellentem Service. Der Privatstrand ist kristallklar ve sehr ruhig. Wir kommen auf jeden Fall wieder!",
+    stars: 5
+  },
+  {
+    name: "Elena S.",
+    location: "Italy",
+    text: "Un posto magico. La colazione è fantastica e la camera con vista mare ha superato le nostre aspettative. Grazie Salmakis!",
+    stars: 5
+  },
+  {
+    name: "Mehmet A.",
+    location: "Türkiye",
+    text: "Gastronomi anlamında gerçekten çok başarılı. Her akşam farklı bir lezzet şöleni yaşadık. Sahili ise kelimenin tam anlamıyla kusursuz.",
+    stars: 5
+  }
+];
+
+export default function TestimonialsSlider() {
+  const constraintsRef = useRef<HTMLDivElement>(null);
+  const [width, setWidth] = useState(0);
+
+  useEffect(() => {
+    if (constraintsRef.current) {
+      // Calculate how much we can drag: total width - container width
+      setWidth(constraintsRef.current.scrollWidth - constraintsRef.current.offsetWidth);
+    }
+  }, []);
+
+  return (
+    <section className="bg-[#EAE5D8] py-24 overflow-hidden">
+      <div className="max-w-7xl mx-auto px-6 mb-16">
+        <div className="flex flex-col md:flex-row justify-between items-end gap-8">
+          <div className="space-y-4">
+            <span className="text-gold text-xs tracking-[0.4em] font-bold uppercase">
+              MİSAFİR YORUMLARI
+            </span>
+            <h2 className="text-5xl md:text-7xl font-serif text-gray-900 leading-tight">
+              Misafirlerimiz <br /> Ne Diyor?
+            </h2>
+          </div>
+          
+          <div className="max-w-md text-right md:text-right flex flex-col items-end gap-6 pb-4">
+            <p className="text-gray-600 font-light leading-relaxed">
+              Gerçek deneyimler ve samimi sözler. Salmakis Resort & Spa&apos;daki anıların 
+              her türlü tanımdan daha fazlasını anlattığına inanıyoruz.
+            </p>
+            <button className="bg-[#C59D5F] text-white px-8 py-3 rounded-md text-[10px] font-bold tracking-[0.2em] hover:bg-gold transition-all uppercase">
+              DENEYİMİNİZİ PAYLAŞIN
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Slider Container */}
+      <div className="relative w-full overflow-hidden pb-10">
+        <motion.div 
+          ref={constraintsRef}
+          drag="x"
+          dragConstraints={{ right: 0, left: -width }}
+          dragElastic={0.1}
+          whileTap={{ cursor: "grabbing" }}
+          className="flex gap-6 px-6 md:px-[calc((100vw-1280px)/2)] cursor-grab whitespace-nowrap"
+          initial={{ x: 100, opacity: 0 }}
+          whileInView={{ x: 0, opacity: 1 }}
+          transition={{ duration: 1 }}
+        >
+          {testimonials.map((item, i) => (
+            <div 
+              key={i}
+              className="min-w-[320px] md:min-w-[400px] bg-[#3A4D3F] p-10 flex flex-col justify-between h-[450px] shadow-2xl select-none"
+            >
+              <div className="space-y-6">
+                <div className="flex gap-1">
+                  {[...Array(item.stars)].map((_, i) => (
+                    <span key={i} className="text-white text-sm">★</span>
+                  ))}
+                </div>
+                <div className="space-y-4">
+                  <span className="text-white/40 text-[10px] tracking-widest font-bold uppercase">
+                    {item.location}
+                  </span>
+                  <p className="text-white/90 text-lg md:text-xl font-light leading-relaxed italic whitespace-normal">
+                    &ldquo;{item.text}&rdquo;
+                  </p>
+                </div>
+              </div>
+              
+              <div className="pt-6 border-t border-white/10">
+                <span className="text-white text-xs tracking-[0.2em] font-bold uppercase">
+                  {item.name}
+                </span>
+              </div>
+            </div>
+          ))}
+        </motion.div>
+      </div>
+    </section>
+  );
+}

app/contact/page.tsx

@@ -0,0 +1,30 @@
+export default function Contact() {
+  return (
+    <div className="min-h-screen py-32 section-padding bg-white">
+      <div className="max-w-7xl mx-auto flex flex-col md:flex-row items-start justify-between gap-20">
+        <div className="flex-1 space-y-8">
+          <span className="text-turquoise uppercase tracking-widest text-xs font-bold">CONTACT</span>
+          <h1 className="text-5xl md:text-7xl font-serif text-bodrum-blue leading-tight">
+            Let&apos;s talk about your <br /> next getaway.
+          </h1>
+          <div className="space-y-4 pt-12">
+            <p className="text-2xl text-gray-400 font-light hover:text-turquoise transition-colors cursor-pointer">info@salmakis.com.tr</p>
+            <p className="text-2xl text-gray-400 font-light">+90 252 316 65 06</p>
+          </div>
+        </div>
+        
+        <div className="w-full md:w-1/3 bg-zinc-50 p-12 rounded-3xl shadow-2xl shadow-black/5">
+          <h3 className="text-xl font-bold mb-8">Location</h3>
+          <p className="text-gray-500 leading-relaxed mb-12 italic">
+            Bardakçı Koyu, <br />
+            Bodrum, Muğla, <br />
+            Türkiye
+          </p>
+          <div className="aspect-square bg-white rounded-2xl border border-gray-100 flex items-center justify-center text-gray-300">
+             [Interactive Map Placeholder]
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/dining/page.tsx

@@ -0,0 +1,13 @@
+export default function PlaceholderPage({ params }: { params: { slug: string } }) {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-zinc-50 py-32 section-padding">
+      <div className="max-w-4xl mx-auto text-center">
+        <h1 className="text-6xl font-serif text-bodrum-blue mb-8 uppercase tracking-widest">SOON</h1>
+        <p className="text-xl text-gray-400 italic font-light leading-relaxed">
+          &ldquo;Ege'nin kalbindeki bu deneyimi çok yakında keşfedeceksiniz.&rdquo;
+        </p>
+        <div className="mt-12 h-px w-24 bg-turquoise mx-auto" />
+      </div>
+    </div>
+  );
+}

app/gallery/page.tsx

@@ -0,0 +1,13 @@
+export default function PlaceholderPage() {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-white py-32 section-padding">
+      <div className="max-w-4xl mx-auto text-center space-y-8">
+        <h1 className="text-6xl font-serif text-bodrum-blue tracking-widest opacity-20">COMING SOON</h1>
+        <div className="w-24 h-px bg-turquoise mx-auto" />
+        <p className="text-xl text-gray-400 italic font-light">
+          Bu bölüm çok yakında yayına girecektir.
+        </p>
+      </div>
+    </div>
+  );
+}

app/globals.css

@@ -1,26 +1,81 @@
 @import "tailwindcss";
 
-:root {
+@theme {
-  --background: #ffffff;
+  --font-sans: var(--font-oswald), ui-sans-serif, system-ui;
-  --foreground: #171717;
+  --font-serif: var(--font-playfair), ui-serif, Georgia;
+  
+  --color-gold: #C5A059;
+  --color-gold-dark: #A67C00;
+  --color-bodrum-blue: #002B45;
+  --color-sand: #FAF9F6;
+  
+  --radius-xl: 1rem;
+  --radius-2xl: 1.5rem;
 }
 
-@theme inline {
+@layer base {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-@media (prefers-color-scheme: dark) {
   :root {
-    --background: #0a0a0a;
+    --background: #ffffff;
-    --foreground: #ededed;
+    --foreground: #111111;
+  }
+
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+    font-feature-settings: "ss01", "ss02", "cv01", "cv02";
   }
 }
 
-body {
+@layer components {
-  background: var(--background);
+  .glass {
-  color: var(--foreground);
+    @apply bg-white/70 backdrop-blur-md border border-white/20;
-  font-family: Arial, Helvetica, sans-serif;
+  }
+  
+  .glass-dark {
+    @apply bg-black/50 backdrop-blur-md border border-white/10;
+  }
+
+  .btn-primary {
+    @apply px-6 py-3 bg-gold text-white rounded-full font-medium transition-all hover:bg-gold-dark hover:scale-105 active:scale-95 shadow-lg shadow-gold/10;
+  }
+
+  .section-padding {
+    @apply py-20 px-6 md:px-12 lg:px-24;
+  }
+}
+
+/* Custom Animations */
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in-up {
+  animation: fade-in-up 0.8s ease-out forwards;
+}
+
+.delay-100 { animation-delay: 100ms; }
+.delay-200 { animation-delay: 200ms; }
+.delay-300 { animation-delay: 300ms; }
+
+/* Portrait Card Aspect Ratio */
+.aspect-portrait {
+  aspect-ratio: 3 / 4;
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.no-scrollbar {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
 }

app/layout.tsx

@@ -1,20 +1,25 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Oswald, Playfair_Display } from "next/font/google";
 import "./globals.css";
+import Navbar from "./components/Navbar";
 
-const geistSans = Geist({
+import Footer from "./components/Footer";
-  variable: "--font-geist-sans",
+import SmoothScroll from "./components/SmoothScroll";
-  subsets: ["latin"],
+
+const oswald = Oswald({
+  variable: "--font-oswald",
+  subsets: ["latin", "latin-ext"],
+  weight: ["200", "300", "400", "500", "600", "700"],
 });
 
-const geistMono = Geist_Mono({
+const playfair = Playfair_Display({
-  variable: "--font-geist-mono",
+  variable: "--font-playfair",
-  subsets: ["latin"],
+  subsets: ["latin", "latin-ext"],
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
+  title: "Salmakis Resort & Spa | Official Website",
-  description: "Generated by create next app",
+  description: "Experience the magic of the Aegean at Salmakis Resort & Spa Bodrum. Luxury accommodation, spa, and beach experience.",
 };
 
 export default function RootLayout({
@@ -23,11 +28,17 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html
+    <html lang="tr" className={`${oswald.variable} ${playfair.variable}`}>
-      lang="en"
+      <body className="antialiased min-h-screen flex flex-col font-sans selection:bg-gold/30">
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+        <Navbar />
-    >
+        <SmoothScroll>
-      <body className="min-h-full flex flex-col">{children}</body>
+          <main className="flex-grow">
+            {children}
+          </main>
+          <Footer />
+
+        </SmoothScroll>
+      </body>
     </html>
   );
 }

app/organizations/page.tsx

@@ -0,0 +1,13 @@
+export default function PlaceholderPage() {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-white py-32 section-padding">
+      <div className="max-w-4xl mx-auto text-center space-y-8">
+        <h1 className="text-6xl font-serif text-bodrum-blue tracking-widest opacity-20">COMING SOON</h1>
+        <div className="w-24 h-px bg-turquoise mx-auto" />
+        <p className="text-xl text-gray-400 italic font-light">
+          Bu bölüm çok yakında yayına girecektir.
+        </p>
+      </div>
+    </div>
+  );
+}

app/page.tsx

@@ -1,65 +1,244 @@
+"use client";
+
+import { useMemo, useRef } from "react";
+import Link from "next/link";
 import Image from "next/image";
+import { motion, useScroll, useTransform } from "framer-motion";
+import { resortData } from "@/src/data/resort";
+import ScrollVideo from "./components/ScrollVideo";
+import SplitSection from "./components/SplitSection";
+import TestimonialsSlider from "./components/TestimonialsSlider";
 
 export default function Home() {
+  const portfolioRef = useRef(null);
+  
+  const { scrollYProgress } = useScroll({
+    target: portfolioRef,
+    offset: ["start end", "end start"]
+  });
+
+  const portfolioBgY = useTransform(scrollYProgress, [0, 1], ["0%", "15%"]);
+  const portfolioScale = useTransform(scrollYProgress, [0, 0.5, 1], [1.05, 1, 1.05]);
+
   return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+    <div className="flex flex-col">
-      <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">
+      <section className="relative h-[85vh] w-full bg-[#FAF9F6] flex flex-col items-center justify-center pt-20 overflow-hidden">
-        <Image
+        <motion.div 
-          className="dark:invert"
+          initial={{ scale: 0.8, opacity: 0 }}
-          src="/next.svg"
+          animate={{ scale: 1, opacity: 1 }}
-          alt="Next.js logo"
+          transition={{ duration: 1.5, ease: "easeOut" }}
-          width={100}
+          className="absolute bottom-[-20%] w-[1200px] h-[1200px] bg-white rounded-full" 
-          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">
+        <div className="relative z-20 flex flex-col items-center text-center px-6">
-            To get started, edit the page.tsx file.
+          <motion.h1 
-          </h1>
+            initial={{ y: 30, opacity: 0 }}
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
+            animate={{ y: 0, opacity: 1 }}
-            Looking for a starting point or more instructions? Head over to{" "}
+            transition={{ duration: 1, ease: "easeOut" }}
-            <a
+            className="flex flex-col items-center"
-              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"
+            <span className="text-gray-900 text-6xl md:text-9xl font-sans font-medium tracking-[0.1em] leading-none mb-2 uppercase">
+              KUSURSUZ
+            </span>
+            <motion.span 
+              initial={{ x: -20, opacity: 0 }}
+              animate={{ x: 0, opacity: 1 }}
+              transition={{ delay: 0.5, duration: 1 }}
+              className="text-gray-900 text-6xl md:text-9xl font-serif italic font-light tracking-[0.05em] leading-none"
             >
-              Templates
+              BİR KAÇIŞ
-            </a>{" "}
+            </motion.span>
-            or the{" "}
+          </motion.h1>
-            <a
+
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          <motion.div 
-              className="font-medium text-zinc-950 dark:text-zinc-50"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 1, duration: 1 }}
+            className="mt-16"
+          >
+            <Link
+              href={resortData.bookingUrl}
+              className="bg-[#5C6353] text-white px-10 py-4 rounded-full text-[10px] font-bold tracking-[0.3em] hover:bg-gold transition-all shadow-xl shadow-black/5"
             >
-              Learning
+              REZERVASYON YAP
-            </a>{" "}
+            </Link>
-            center.
+          </motion.div>
+        </div>
+      </section>
+
+      <ScrollVideo />
+
+      <section className="bg-white py-32 md:py-48 px-6 text-center">
+        <motion.div 
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: "-100px" }}
+          transition={{ duration: 1 }}
+          className="max-w-5xl mx-auto space-y-12"
+        >
+          <p className="text-3xl md:text-5xl font-serif text-gray-900 leading-[1.6] font-light">
+            Ege&apos;nin kalbinde, tarihin ve denizin kucaklaştığı özel bir dünyada, 
+            <span className="italic"> unutulmaz anılar</span> biriktirmek için tasarlandı.
           </p>
+          <div className="w-16 h-px bg-gold mx-auto opacity-60" />
+        </motion.div>
+      </section>
+
+      <section ref={portfolioRef} className="relative min-h-[120vh] py-32 flex flex-col justify-between overflow-hidden">
+        <motion.div 
+          style={{ y: portfolioBgY, scale: portfolioScale }}
+          className="absolute inset-0 z-0 h-full w-full"
+        >
+          <Image
+            src="https://images.unsplash.com/photo-1510414842594-a61c69b5ae57?auto=format&fit=crop&q=80&w=2000"
+            alt="Palms"
+            fill
+            className="object-cover brightness-50"
+            priority
+          />
+        </motion.div>
+
+        <motion.div 
+          initial={{ opacity: 0 }}
+          whileInView={{ opacity: 1 }}
+          className="relative z-10 text-center"
+        >
+          <span className="text-white text-[10px] tracking-[0.5em] font-bold uppercase opacity-70">
+            HAYATI KEŞFEDİN
+          </span>
+        </motion.div>
+
+        <div className="relative z-10 flex flex-col items-center text-center px-6">
+          <h2 className="flex flex-col items-center">
+            <motion.span 
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 1 }}
+              className="text-white text-4xl md:text-7xl font-sans font-extralight tracking-[0.2em] uppercase leading-tight"
+            >
+              YAVAŞ YAŞAMANIN <span className="font-serif italic font-light lowercase">lüksü</span>
+            </motion.span>
+            <motion.span 
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.2, duration: 1 }}
+              className="text-white text-5xl md:text-8xl font-sans font-medium tracking-[0.1em] uppercase leading-tight"
+            >
+              SALMAKIS&apos;TE
+            </motion.span>
+          </h2>
         </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
+
-          <a
+        <div className="relative z-10 max-w-[1600px] mx-auto w-full px-10 grid grid-cols-1 md:grid-cols-3 gap-12 text-center md:text-left border-t border-white/20 pt-12">
-            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"
+            { tag: "ÖZEL KOYUNUZ", title: "KUSURSUZ SAHİL" },
-            target="_blank"
+            { tag: "RİTÜELLER", title: "SPA CENTER" },
-            rel="noopener noreferrer"
+            { tag: "GURME", title: "DENİZ MUTFAĞI" },
-          >
+          ].map((item, i) => (
-            <Image
+            <motion.div 
-              className="dark:invert"
+              key={i} 
-              src="/vercel.svg"
+              initial={{ opacity: 0, x: -20 }}
-              alt="Vercel logomark"
+              whileInView={{ opacity: 1, x: 0 }}
-              width={16}
+              transition={{ delay: i * 0.1, duration: 0.8 }}
-              height={16}
+              className="group cursor-pointer"
-            />
+            >
-            Deploy Now
+              <span className="text-white/40 text-[9px] tracking-[0.4em] font-bold block mb-2 transition-colors group-hover:text-gold">
-          </a>
+                {item.tag}
-          <a
+              </span>
-            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]"
+              <h4 className="text-white text-xl md:text-2xl font-sans font-light tracking-[0.2em] group-hover:italic transition-all">
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+                {item.title}
-            target="_blank"
+              </h4>
-            rel="noopener noreferrer"
+            </motion.div>
-          >
+          ))}
-            Documentation
-          </a>
         </div>
-      </main>
+      </section>
+
+      <section className="bg-white py-32 md:py-48 px-6 text-center">
+        <motion.div 
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: "-100px" }}
+          transition={{ duration: 1 }}
+          className="max-w-5xl mx-auto space-y-12"
+        >
+          <p className="text-3xl md:text-5xl font-serif text-gray-900 leading-[1.6] font-light">
+            Salmakis Resort & Spa olarak biz, sadece bir tatil değil, dönüştürücü bir deneyim sunuyoruz. 
+            Halikarnassos&apos;un antik büyüsünü modern lüksle birleştiren benzersiz konumumuz ve misafirperverliğimizle, 
+            Ege&apos;nin en özel köşesinde sizi ağırlıyoruz.
+          </p>
+          <div className="w-16 h-px bg-gold mx-auto opacity-60" />
+          <p className="text-lg md:text-2xl font-serif text-gray-400 italic font-light tracking-[0.2em] uppercase">
+            SESSİZ ZARAFETİN VE KALİTENİN BULUŞMA NOKTASI.
+          </p>
+        </motion.div>
+      </section>
+
+      <SplitSection 
+        title="KONAKLAMA"
+        subtitle="LÜKS & KONFOR"
+        description="Ege'nin kalbinde, her detayı huzurla işlenmiş odalarımızda lüksü ve konforu yeniden tanımlayın. Maviye uyanmanın en şık hali."
+        mainImage="salmakis/rooms/deluxe_room_1"
+        secondImage="salmakis/rooms/superior_room_1"
+        href="/accommodation"
+      />
+
+      <SplitSection 
+        title="YİYECEK & İÇECEK"
+        subtitle="GURME DENEYİM"
+        description="Denizden gelen tazeliğin Ege otlarıyla buluştuğu, her lokmada ayrı bir hikaye anlatan gastronomi yolculuğuna hazır olun."
+        mainImage="salmakis/experiences/dining"
+        secondImage="salmakis/experiences/dining"
+        href="/dining"
+        reverse
+      />
+
+      <SplitSection 
+        title="SPA CENTER"
+        subtitle="RUHSAL YENİLENME"
+        description="Bedeninizi ve ruhunuzu antik ritüellerle yenileyin. Salmakis'in şifalı sularında ve uzman ellerde kendinizi yeniden keşfedeceksiniz."
+        mainImage="salmakis/experiences/spa"
+        secondImage="salmakis/spa/turkish_bath"
+        href="/spa"
+      />
+
+      <SplitSection 
+        title="MAVİ KOY"
+        subtitle="SAHİL & BEACH"
+        description="Mavi bayraklı kristal sularımızda, Bodrum güneşinin ve denizin en saf halini keşfedin. Gününüzü turkuaz sularda sonlandırın."
+        mainImage="salmakis/experiences/beach"
+        secondImage="salmakis/experiences/beach"
+        href="/beach"
+        reverse
+      />
+
+      <TestimonialsSlider />
+
+      <section className="py-24 bg-zinc-50 overflow-hidden">
+        <motion.div 
+          initial={{ opacity: 0, scale: 0.95 }}
+          whileInView={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 1.2 }}
+          className="max-w-4xl mx-auto text-center space-y-8 px-6"
+        >
+          <span className="text-gold uppercase tracking-[0.5em] text-xs font-bold">
+            MİRASIMIZ
+          </span>
+          <h2 className="text-4xl md:text-5xl font-serif text-[#1D3557]">
+            {resortData.legend.title.tr}
+          </h2>
+          <div className="relative">
+            <div className="absolute -top-12 -left-12 text-9xl text-gold/10 font-serif -z-10">
+              &ldquo;
+            </div>
+            <p className="text-lg md:text-xl text-gray-600 leading-relaxed font-light italic">
+              {resortData.legend.text.tr}
+            </p>
+          </div>
+          <div className="pt-8">
+            <div className="w-16 h-px bg-gold mx-auto" />
+          </div>
+        </motion.div>
+      </section>
     </div>
   );
 }

app/spa/page.tsx

@@ -0,0 +1,102 @@
+import { resortData } from "@/src/data/resort";
+import { getCloudinaryUrl } from "@/src/lib/cloudinary";
+import Image from "next/image";
+
+export default function Spa() {
+  const lang = "tr"; // Mocked locale
+
+  return (
+    <div className="bg-white">
+      {/* Immersive Hero Header */}
+      <section className="relative h-[60vh] w-full flex items-center justify-center overflow-hidden">
+        <Image
+          src={getCloudinaryUrl("salmakis/spa/spa_hero", { width: 1920, height: 1080, crop: "fill", quality: 90 })}
+          alt="SPA Center"
+          fill
+          className="object-cover brightness-90 animate-fade-in-up"
+        />
+        <div className="absolute inset-0 bg-gradient-to-b from-black/30 to-transparent" />
+        <div className="relative z-10 text-center text-white px-6">
+          <span className="text-turquoise uppercase tracking-[1em] text-xs font-bold mb-4 block">
+            REJUVENATE
+          </span>
+          <h1 className="text-5xl md:text-7xl font-serif font-bold tracking-tight mb-4">
+            {resortData.nav.spa[lang]}
+          </h1>
+          <div className="w-24 h-px bg-white mx-auto" />
+        </div>
+      </section>
+
+      {/* Intro Section - White Marble Aesthetic */}
+      <section className="py-24 section-padding bg-gradient-to-b from-zinc-50 to-white">
+        <div className="max-w-4xl mx-auto text-center space-y-12">
+          <div className="inline-block p-4 border border-turquoise/20 rounded-full">
+             <div className="w-12 h-12 flex items-center justify-center bg-turquoise/10 rounded-full text-turquoise text-2xl">✨</div>
+          </div>
+          <h2 className="text-3xl md:text-5xl font-serif text-bodrum-blue font-medium leading-tight">
+            {lang === "tr" 
+              ? "Saf beyaz mermerin huzuru ve asırlık şifa gelenekleriyle ruhunuzu arındırın."
+              : "Purify your soul with the peace of pure white marble and centuries-old healing traditions."}
+          </h2>
+          <p className="text-gray-500 text-lg font-light leading-relaxed max-w-2xl mx-auto">
+            {lang === "tr"
+              ? "Salmakis SPA & Wellness, modern terapileri geleneksel Türk hamamı ritüelleriyle birleştirerek size eşsiz bir yenilenme deneyimi sunuyor."
+              : "Salmakis SPA & Wellness offers you a unique rejuvenation experience by combining modern therapies with traditional Turkish bath rituals."}
+          </p>
+        </div>
+      </section>
+
+      {/* Masonry-Style Treatments Gallery */}
+      <section className="pb-32 section-padding bg-white">
+        <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12">
+          {resortData.spaTreatments.map((item, idx) => (
+            <div 
+              key={item.slug} 
+              className={`flex flex-col group ${idx % 2 === 1 ? 'md:mt-24' : ''} animate-fade-in-up`}
+              style={{ animationDelay: `${idx * 150}ms` }}
+            >
+              <div className="relative aspect-video rounded-3xl overflow-hidden mb-8 shadow-2xl shadow-black/5">
+                <Image
+                  src={getCloudinaryUrl(item.imageId, { width: 1200, height: 800, crop: "fill" })}
+                  alt={item.name[lang]}
+                  fill
+                  className="object-cover grayscale-[20%] group-hover:grayscale-0 transition-all duration-700 group-hover:scale-105"
+                />
+                <div className="absolute top-6 right-6 bg-white/90 backdrop-blur-md px-4 py-2 rounded-full text-[10px] font-bold tracking-widest text-turquoise">
+                  {item.duration}
+                </div>
+              </div>
+              <div className="px-4">
+                <h3 className="text-3xl font-serif font-bold text-gray-900 mb-4">{item.name[lang]}</h3>
+                <p className="text-gray-500 leading-relaxed font-light mb-6">
+                  {item.description[lang]}
+                </p>
+                <button className="text-xs font-black tracking-[0.2em] text-turquoise border-b-2 border-turquoise pb-1 hover:text-bodrum-blue hover:border-bodrum-blue transition-colors uppercase">
+                  {lang === "tr" ? "DETAYLARI İNCELE" : "VIEW DETAILS"}
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Marble Callout */}
+      <section className="h-screen relative flex items-center justify-center">
+        <Image
+          src={getCloudinaryUrl("salmakis/spa/marble_texture", { width: 1920, height: 1080, crop: "fill" })}
+          alt="White Marble"
+          fill
+          className="object-cover opacity-20"
+        />
+        <div className="relative z-10 max-w-2xl text-center px-6">
+           <h4 className="text-turquoise uppercase tracking-[0.4em] text-sm font-bold mb-8">Bodrum Tradition</h4>
+           <p className="text-4xl font-serif italic text-bodrum-blue leading-normal">
+             {lang === "tr" 
+               ? "&ldquo;Güneşin sıcaklığı ve suyun huzuru burada birleşiyor.&rdquo;"
+               : "&ldquo;Where the warmth of the sun and the peace of the water unite.&rdquo;"}
+           </p>
+        </div>
+      </section>
+    </div>
+  );
+}

docs/konaklama/odalar/aileodası/aileodası.md

@@ -0,0 +1,21 @@
+AİLE ODASI - Oda Özellikleri
+Deniz veya Bahçe manzaralı bu odalar 40 m2 dir ve ayrı bir yatak odası ile salondan oluşmaktadır. Teras veya balkona sahiptir.
+
+Oturma grubu
+Klima
+Ücretsiz kablosuz internet
+LCD TV
+Mini bar
+Oda içi kasa
+Telefon
+Küvet
+Saç kurutma makinesi
+
+Konaklama
+
+2 yetişkin
+3 yetişkin
+1 yetişkin + 3 çocuk
+2 yetişkin + 1 çocuk
+3 yetişkin + 1 çocuk
+2 yetişkin + 2 çocuk 

docs/konaklama/odalar/juniorsuite/juniorsuite.md

@@ -0,0 +1,21 @@
+JUNIOR SUITE - Oda Özellikleri
+Eşsiz bir deniz manzarasına sahip ulan bu suite oda 74m2’dir ve deniz manzaralı geniş bir yatak odası, rahat ve kullanışlı bir salon ve jakuzili tasarım bir banyodan oluşmaktadır.
+
+Oturma grubu
+Yemek masası
+Klima
+Ücretsiz kablosuz internet
+LCD TV
+Buzdolabı
+Oda içi kasa
+Telefon
+Jakuzi
+Saç kurutma makinesi
+
+Konaklama
+
+2 yetişkin
+3 yetişkin
+2 yetişkin + 1 çocuk
+2 yetişkin + 2 çocuk
+3 yetişkin + 1 çocuk

docs/konaklama/odalar/kingsuite/kingsuite.md

@@ -0,0 +1,21 @@
+KING SUITE - Oda Özellikleri
+Eşsiz bir deniz manzarasına sahip olan bu suite oda 94 m2’dir ve deniz manzaralı geniş bir yatak odası, rahat ve kullanışlı bir salon ve jakuzili tasarım bir banyodan oluşmaktadır.
+
+Oturma grubu
+Yemek masası
+Klima
+Ücretsiz kablosuz internet
+LCD TV
+Buzdolabı
+Oda içi kasa
+Telefon
+Jakuzi
+Saç kurutma makinesi
+
+Konaklama
+
+2 yetişkin
+3 yetişkin
+2 yetişkin + 1 çocuk
+2 yetişkin + 2 çocuk
+3 yetişkin + 1 çocuk

docs/konaklama/odalar/penthousesuite/penthousesuite.md

@@ -0,0 +1,22 @@
+PENTHOUSE - Oda Özellikleri
+Eşsiz bir deniz manzarasına sahip olan bu suite oda 164 m2 dir. Rahat ve kullanışlı deniz manzaralı bir salon, çalışma bölümü, mutfak, geniş ve jakuzili bir yatak odası ve giyinme alanı ile antreden oluşmaktadır.
+
+Oturma grubu
+Yemek masası
+Tam donanımlı mutfak
+Klima
+Ücretsiz kablosuz internet
+LCD Tv
+Mini bar
+Oda içi kasa
+Telefon
+Jakuzi
+Saç Kurutma Makinası
+
+Konaklama
+
+2 yetişkin
+3 yetişkin
+2 yetişkin + 1 çocuk
+2 yetişkin + 2 çocuk
+3 yetişkin + 1 çocuk

docs/konaklama/odalar/standartoda/standartoda.md

@@ -0,0 +1,36 @@
+Standart Oda
+Deniz veya Bahçe manzaralı - 25 m2 oda
+
+Hizmetler
+
+Oturma grubu
+Klima
+Ücretsiz kablosuz internet
+LCD TV
+Mini bar
+Oda içi kasa
+Telefon
+Küvet
+Saç kurutma makinesi
+
+STANDART Oda Özellikleri
+Deniz veya Bahçe manzaralı bu odalar 25 m2 dir ve teras veya balkona sahiptir.
+
+Oturma grubu
+Klima
+Ücretsiz kablosuz internet
+LCD TV
+Mini bar
+Oda içi kasa
+Telefon
+Küvet
+Saç kurutma makinesi
+
+
+Konaklama
+
+1 yetişkin
+2 yetişkin
+3 yetişkin
+1 yetişkin + 2 çocuk
+2 yetişkin + 1 çocuk 

docs/konaklama/rezidans/rezidans1+1/1+1.md

@@ -0,0 +1,18 @@
+rezıdans daire 1+1 - Özellikleri
+Otel binasına 100 metre mesafede yer alan 70 m2 genişliğindeki bu modern deniz manzaralı daire 1 yatak odası ile 1 banyo/WC ve tam donanımlı mutfak içeren bir oturma odasından oluşmaktadır.
+
+Oturma grubu
+Tam donanımlı mutfak
+Klima
+Ücretsiz kablosuz internet
+LCD TV
+Oda içi kasa
+Telefon
+Saç kurutma makinesi
+
+Konaklama
+
+2 yetişkin
+2 yetişkin + 1 çocuk
+3 yetişkin
+3 yetişkin + 1 çocuk

docs/konaklama/rezidans/rezidans2+1/2+1.md

@@ -0,0 +1,19 @@
+rezıdans daire 2+1 - Özellikleri
+Otel binasına 100 metre mesafede yer alan 110 m2 genişliğindeki bu modern deniz manzaralı daire 2 yatak odası, 2 banyo/WC ve tam donanımlı mutfak içeren bir oturma odasından oluşmaktadır. 
+
+Oturma grubu
+Tam donanımlı mutfak
+Klima
+Ücretsiz kablosuz internet
+LCD TV
+Oda içi kasa
+
+Konaklama
+
+2 yetişkin
+3 yetişkin
+4 yetişkin
+2 yetişkin + 1 çocuk
+3 yetişkin + 1 çocuk
+4 yetişkin + 1 çocuk
+2 yetişkin + 2 çocuk

docs/prd.md

@@ -0,0 +1,61 @@
+BÖLÜM 1: Ürün Gereksinim Dokümanı (PRD)
+1. Proje Vizyonu
+Kullanıcının siteye girdiği an Bodrum'un turkuaz sularını ve beyaz mimarisini hissedeceği, "nefes alan", ultra hızlı ve güvenli bir dijital Resort deneyimi.
+
+2. Sayfa Yapısı ve Akış (Fresh Design)
+A. Global Elements (Tüm Sayfalar)
+Navbar: Şeffaf (Glassmorphism), üzerine gelince hafifçe beyazlaşan. Logo sol, menü orta, sağ tarafta dil seçici (TR|EN|DE) ve "Rezervasyon Yap" butonu.
+
+Floating Booking Bar: Sayfanın en altında sabit duran, mobil uyumlu, tarih ve kişi seçip dış linke atan minimal bar.
+
+B. Landing Page (Giriş)
+Immersive Hero: Ekranı kaplayan, Cloudinary'den optimize edilmiş, ağır çekim deniz ve sahil videosu. Üzerinde sadece: "Ege'nin Kalbinde Mükemmel Bir Kaçış" (The Perfect Escape in the Heart of the Aegean).
+
+Experience Grid: Dört ana bölümün (Rooms, Dining, Spa, Beach) büyük, kare, hafif yuvarlak köşeli kartlar halinde sunumu. Resimlerin üzerine gelince turkuaz bir filtre ve "Keşfet" yazısı belirir.
+
+The Legend (Salmakis Efsanesi): Sayfanın ortasında, bol beyaz boşlukla (whitespaces) çevrili, hikayeyi anlatan sanatsal bir metin bloğu.
+
+Official Website Badge: Sahte sitelere karşı uyarıyı, "Salmakis Resort & Spa Resmi Web Sitesi Güvencesi" başlığıyla, sayfanın altına şık bir mühür veya ikon olarak ekleyerek güven veriyoruz.
+
+C. Accommodation (Konaklama)
+Rooms List: Odaların yan yana dikey (portrait) kartlar halinde listelenmesi (Eski sitenin yatay kutu yapısı yerine).
+
+Oda Özellikleri: .ts dosyasından çekilen ikonik özellikler (WiFi, Manzara, Balkon, Safe).
+
+D. SPA Center
+Fresh vibe'a uygun, aydınlık, beyaz mermer ve masaj deneyimi odaklı devasa fotoğraflar.
+
+3. Teknik Mimari (TypeScript & Cloudinary)
+Cloudinary Optimize: Sitedeki tüm görseller .jpg olarak yüklenecek ama URL'lerine f_auto,q_auto,w_auto parametreleri Next.js Image bileşeni veya bir helper fonksiyonu ile eklenecek.
+
+Data Structure (src/data/resort.ts): SQL yerine veri bu dosyada tutulacak.
+
+TypeScript
+// src/data/resort.ts
+export interface Room {
+  slug: string;
+  name: { tr: string; en: string; de: string };
+  description: { tr: string; en: string; de: string };
+  features: string[]; // ['sea_view', 'balcony', 'minibar']
+  // Sadece Cloudinary Public ID'si tutulacak (Format ve optimizasyon URL'de yapılacak)
+  mainImageId: string; // 'resort/rooms/standard_sea_view_main'
+}
+
+export const resortData = {
+  // Global Güvenlik Notu
+  securityBadge: {
+    tr: "Resmi Web Sitesi Güvencesi",
+    en: "Official Website Protection",
+    de: "Offizieller Website-Schutz"
+  },
+  rooms: [
+    {
+      slug: "deluxe-room",
+      name: { tr: "Deluxe Oda", en: "Deluxe Room", de: "Deluxe Zimmer" },
+      description: { tr: "Maviye uyanmanın en şık yolu...", en: "Meeting comfort and elegance." },
+      features: ["WiFi", "TV", "Safe Box"],
+      mainImageId: "salmakis/rooms/deluxe_room_1"
+    },
+    // Diğer odalar...
+  ]
+}

docs/restaurant/anarestoran/anarestoran.md

@@ -0,0 +1,2 @@
+Ana Restaurant
+Türk ve Dünya Mutfaklarının buluştuğu, görsel dizaynlarla hazırlanan açık büfe restoranımızda, bol çeşitli özel lezzetleri ile yemek deneyiminizi başlangıçtan tatlılara kadar heyecan verici bir yolculuk haline getirebilirsiniz. Osmanlı stiline özgü dekore edilmiş ana restoran; açık ve kapalı alanlara sahip olup muhteşem Bodrum ve deniz manzarası eşliğinde sizleri ağırlar.

docs/restaurant/poseidonalacarte/poseidonalacarte.md

@@ -0,0 +1,2 @@
+Poseidon A La Carte Restoran
+Salmakis Resort & Spa’da deniz ürünlerinin özel örneklerini sunan Poseidon A La Carte Restoran eşsiz Bodrum gecelerinde konuklarını büyülüyor. Muhteşem deniz ve Bodrum manzarası eşliğinde, Ege Bölgesine özel meze ve taze deniz ürünlerini tadabileceğiniz restoranımız Lobby terasında Bodrum Kalesi’ne karşı hizmet vermektedir.

html/SALMAKİS BODRUM RESORT.html

@@ -0,0 +1,433 @@
+<!DOCTYPE html>
+<!-- saved from url=(0035)https://salmakishotel.com/rest.html -->
+<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    
+    <!-- TITLE -->
+    <title>SALMAKİS BODRUM RESORT</title>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <meta name="format-detection" content="telephone=no">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <link rel="shortcut icon" href="https://salmakishotel.com/images/favicon.png">
+
+    <!-- GOOGLE FONT -->
+    <!-- GOOGLE FONT -->
+    <link href="./SALMAKİS BODRUM RESORT_files/css" rel="stylesheet" type="text/css">
+
+    <!-- CSS LIBRARY -->
+    <link rel="stylesheet" type="text/css" href="./SALMAKİS BODRUM RESORT_files/font-awesome.min.css">
+    <link rel="stylesheet" type="text/css" href="./SALMAKİS BODRUM RESORT_files/font-lotusicon.css">
+    <link rel="stylesheet" type="text/css" href="./SALMAKİS BODRUM RESORT_files/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="./SALMAKİS BODRUM RESORT_files/owl.carousel.css">
+    <link rel="stylesheet" type="text/css" href="./SALMAKİS BODRUM RESORT_files/jquery-ui.min.css">
+    <link rel="stylesheet" type="text/css" href="./SALMAKİS BODRUM RESORT_files/magnific-popup.css">
+    <link rel="stylesheet" type="text/css" href="./SALMAKİS BODRUM RESORT_files/settings.css">
+    <link rel="stylesheet" type="text/css" href="./SALMAKİS BODRUM RESORT_files/bootstrap-select.min.css">
+
+    <!-- MAIN STYLE -->
+    <link rel="stylesheet" type="text/css" href="./SALMAKİS BODRUM RESORT_files/style.css">
+    
+    <!--[if lt IE 9]>
+        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+        <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
+    <![endif]-->
+<script type="text/javascript" charset="UTF-8" src="./SALMAKİS BODRUM RESORT_files/common.js.indir"></script><script type="text/javascript" charset="UTF-8" src="./SALMAKİS BODRUM RESORT_files/util.js.indir"></script></head>
+
+<!--[if IE 7]> <body class="ie7 lt-ie8 lt-ie9 lt-ie10"> <![endif]-->
+<!--[if IE 8]> <body class="ie8 lt-ie9 lt-ie10"> <![endif]-->
+<!--[if IE 9]> <body class="ie9 lt-ie10"> <![endif]-->
+<!--[if (gt IE 9)|!(IE)]><!--> <body style=""> <!--<![endif]-->
+
+    <!-- PRELOADER -->
+    <div id="preloader" style="display: none;">
+        <span class="preloader-dot"></span>
+    </div>
+    <!-- END / PRELOADER -->
+
+    <!-- PAGE WRAP -->
+    <div id="page-wrap">
+
+        <!-- HEADER -->
+        <header id="header" class="">
+            
+            <!-- HEADER TOP -->
+            <div class="header_top">
+              <div class="container">
+                    
+                    <div class="header_right float-right">
+<div class="dropdown">
+                            <a href="https://salmakishotel.com/kvkk.html"><i class="fa fa-info-circle" aria-hidden="true"></i> KVKK</a>
+
+                            
+                        </div>
+                        <div class="dropdown language">
+                            <span>TR</span>
+
+                            <ul>
+                   <li class="active"><a href="https://salmakishotel.com/index.html">TR</a></li>
+                                <li><a href="https://salmakishotel.com/index-ing.html">ENG</a></li>
+                                <li><a href="https://salmakishotel.com/index-de.html">DE</a></li>
+                            </ul>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+            <!-- END / HEADER TOP -->
+            
+            <!-- HEADER LOGO & MENU -->
+            <div class="header_content" id="header_content">
+
+              <div class="container">
+                    <!-- HEADER LOGO -->
+                    <div class="header_logo">
+                        <a href="https://salmakishotel.com/index.html"><img src="./SALMAKİS BODRUM RESORT_files/logo-header.png" alt=""></a>
+                    </div>
+                    <!-- END / HEADER LOGO -->
+                    
+                    <!-- HEADER MENU -->
+                    <nav class="header_menu">
+                        <ul class="menu">
+                            
+                            <li>
+                                <a href="https://salmakishotel.com/rest.html#">Konaklama <span class="fa fa-caret-down"></span></a>
+                                <ul class="sub-menu">
+                                    <li><a href="https://salmakishotel.com/odalar.html">Odalar</a></li>
+                                    <li><a href="https://salmakishotel.com/rezidans.html">Rezidans</a></li>
+                                </ul>
+                            </li>
+                            <li>
+                                </li><li><a href="https://salmakishotel.com/rest.html">YİYECEK &amp; İÇECEK</a></li>
+                            <li>
+                                <a href="https://salmakishotel.com/aktiviteler.html">Aktiviteler <span class="fa fa-caret-down"></span></a>
+                                <ul class="sub-menu">
+                                    <li><a href="https://salmakishotel.com/cocuklaricin.html">Çocuklar için</a></li>
+                                    <li><a href="https://salmakishotel.com/spor.html">Spor Aktiviteleri</a></li>
+                                    <li><a href="https://salmakishotel.com/animasyon.html">Eğlence &amp; Animasyon</a></li>
+                                </ul>
+                            </li>
+                            <li>
+                                <a href="https://salmakishotel.com/organizasyon.html">Organizasyon <span class="fa fa-caret-down"></span></a>
+                                <ul class="sub-menu">
+                                    <li>
+                                        <a href="https://salmakishotel.com/toplanti.html">Toplantı</a>
+                                    </li>
+
+                                    <li><a href="https://salmakishotel.com/dugun.html">Düğün</a></li>
+
+                                </ul>
+                            </li>
+                            <li>
+                                <a href="https://salmakishotel.com/rest.html#">Galeri <span class="fa fa-caret-down"></span></a>
+                                <ul class="sub-menu">
+                                    <li><a href="https://salmakishotel.com/genelgorunum.html">Genel Görünüm</a></li>
+                               <li><a href="https://salmakishotel.com/odagaleri.html">Odalar</a></li>
+                               <li><a href="https://salmakishotel.com/havuz.html">Havuz&amp;Plaj </a></li>
+                               <li><a href="https://salmakishotel.com/aktivitelergaleri.html">Aktiviteler </a></li>
+                               <li><a href="https://salmakishotel.com/mini.html">Mini Club </a></li>
+                               <li><a href="https://salmakishotel.com/yeme.html">Yeme&amp;İçme </a></li>
+                              
+                                </ul>
+                            </li>
+                             <li><a href="https://salmakishotel.com/spa/index.html" target="_blank">Spa Center</a></li>
+                            <li><a href="https://salmakishotel.com/iletisim.html">İLETİŞİM</a></li>
+                        </ul>
+                    </nav>
+                    <!-- END / HEADER MENU -->
+
+                    <!-- MENU BAR -->
+                    <span class="menu-bars">
+                        <span></span>
+                    </span>
+                    <!-- END / MENU BAR -->
+
+                </div>
+            </div>
+            <!-- END / HEADER LOGO & MENU -->
+
+        </header>
+        <!-- END / HEADER -->
+        
+        <!-- SUB BANNER -->
+        <section class="section-sub-banner bg-10">
+           
+            <div class="sub-banner">
+                <div class="container">
+                    <div class="text text-center">
+                     
+                    </div>
+                </div>
+
+            </div>
+
+        </section>
+        <!-- END / SUB BANNER -->
+        
+        <!-- ABOUT -->
+        <section class="section-about">
+            <div class="container">
+
+                <div class="about">
+
+                    <!-- ITEM -->
+                    <div class="about-item">
+
+                        <div class="img owl-single owl-carousel owl-theme" style="display: block; opacity: 1;">
+                            <div class="owl-wrapper-outer"><div class="owl-wrapper" style="width: 4680px; left: 0px; display: block; transition: 800ms; transform: translate3d(-1170px, 0px, 0px);"><div class="owl-item" style="width: 585px;"><img src="./SALMAKİS BODRUM RESORT_files/1.jpg" alt=""></div><div class="owl-item" style="width: 585px;"><img src="./SALMAKİS BODRUM RESORT_files/2.jpg" alt=""></div><div class="owl-item" style="width: 585px;"><img src="./SALMAKİS BODRUM RESORT_files/3.jpg" alt=""></div><div class="owl-item" style="width: 585px;"><img src="./SALMAKİS BODRUM RESORT_files/4.jpg" alt=""></div></div></div>
+                            
+                            
+                            
+                        <div class="owl-controls clickable"><div class="owl-pagination"><div class="owl-page"><span class=""></span></div><div class="owl-page"><span class=""></span></div><div class="owl-page active"><span class=""></span></div><div class="owl-page"><span class=""></span></div></div><div class="owl-buttons"><div class="owl-prev"><i class="lotus-icon-left-arrow"></i></div><div class="owl-next"><i class="lotus-icon-right-arrow"></i></div></div></div></div>
+
+                        <div class="text">
+                            <h2 class="heading">Ana Restaurant</h2>
+                            <div class="desc">
+                                <p>Türk ve Dünya Mutfaklarının buluştuğu, görsel dizaynlarla hazırlanan açık büfe restoranımızda, bol çeşitli özel lezzetleri ile yemek deneyiminizi başlangıçtan tatlılara kadar heyecan verici bir yolculuk haline getirebilirsiniz. Osmanlı stiline özgü dekore edilmiş ana restoran; açık ve kapalı alanlara sahip olup muhteşem Bodrum ve deniz manzarası eşliğinde sizleri ağırlar.</p>
+                            </div>
+                        </div>
+
+                    </div>
+                    <!-- END / ITEM -->
+
+                    <!-- ITEM -->
+                    <div class="about-item about-right">
+
+                        <div class="img owl-single owl-carousel owl-theme" style="display: block; opacity: 1;">
+                            <div class="owl-wrapper-outer"><div class="owl-wrapper" style="width: 4680px; left: 0px; display: block; transition: 800ms; transform: translate3d(-1170px, 0px, 0px);"><div class="owl-item" style="width: 585px;"><img src="./SALMAKİS BODRUM RESORT_files/1p.jpg" alt=""></div><div class="owl-item" style="width: 585px;"><img src="./SALMAKİS BODRUM RESORT_files/2p.jpg" alt=""></div><div class="owl-item" style="width: 585px;"><img src="./SALMAKİS BODRUM RESORT_files/3p.jpg" alt=""></div><div class="owl-item" style="width: 585px;"><img src="./SALMAKİS BODRUM RESORT_files/4p.jpg" alt=""></div></div></div>
+                            
+                            
+                            
+                        <div class="owl-controls clickable"><div class="owl-pagination"><div class="owl-page"><span class=""></span></div><div class="owl-page"><span class=""></span></div><div class="owl-page active"><span class=""></span></div><div class="owl-page"><span class=""></span></div></div><div class="owl-buttons"><div class="owl-prev"><i class="lotus-icon-left-arrow"></i></div><div class="owl-next"><i class="lotus-icon-right-arrow"></i></div></div></div></div>
+
+                        <div class="text">
+                            <h2 class="heading">Poseidon A La Carte Restoran</h2>
+                            <div class="desc">
+                                <p>Salmakis Resort &amp; Spa’da deniz ürünlerinin özel örneklerini sunan Poseidon A La Carte Restoran eşsiz Bodrum gecelerinde konuklarını büyülüyor. Muhteşem deniz ve Bodrum manzarası eşliğinde, Ege Bölgesine özel meze ve taze deniz ürünlerini tadabileceğiniz restoranımız Lobby terasında Bodrum Kalesi’ne karşı hizmet vermektedir.</p>
+                            </div>
+                        </div>
+
+                    </div>
+                    <!-- END / ITEM -->
+                    <!-- ITEM -->
+                    <div class="about-item">
+
+                        <div class="img owl-single owl-carousel owl-theme" style="display: block; opacity: 1;">
+                            <div class="owl-wrapper-outer"><div class="owl-wrapper" style="width: 4680px; left: 0px; display: block; transition: 800ms; transform: translate3d(-1170px, 0px, 0px);"><div class="owl-item" style="width: 585px;"><img src="./SALMAKİS BODRUM RESORT_files/1a.jpg" alt=""></div><div class="owl-item" style="width: 585px;"><img src="./SALMAKİS BODRUM RESORT_files/2a.jpg" alt=""></div><div class="owl-item" style="width: 585px;"><img src="./SALMAKİS BODRUM RESORT_files/3a.jpg" alt=""></div><div class="owl-item" style="width: 585px;"><img src="./SALMAKİS BODRUM RESORT_files/4a.jpg" alt=""></div></div></div>
+                            
+                            
+                            
+                        <div class="owl-controls clickable"><div class="owl-pagination"><div class="owl-page"><span class=""></span></div><div class="owl-page"><span class=""></span></div><div class="owl-page active"><span class=""></span></div><div class="owl-page"><span class=""></span></div></div><div class="owl-buttons"><div class="owl-prev"><i class="lotus-icon-left-arrow"></i></div><div class="owl-next"><i class="lotus-icon-right-arrow"></i></div></div></div></div>
+
+                        <div class="text">
+                            <h2 class="heading">Pastane</h2>
+                            <div class="desc">
+                                <p>Gün içerisinde damağınızı tatlandıracak lezzetler arıyorsanız özenle hazırlanmış birçok alternatifi pastanemizde bulabilirsiniz. Nefis kurabiyeler, tatlılar ve pastaların sunulduğu Pastanemizde muhteşem Bardakçı koyuna bakan manzarasıyla kısa bir çay molası verebilirsiniz.</p>
+                            </div>
+                        </div>
+
+                    </div>
+                    <!-- END / ITEM -->
+                    <!-- ITEM -->
+                    <div class="about-item about-right">
+
+                        <div class="img owl-single owl-carousel owl-theme" style="display: block; opacity: 1;">
+                            <div class="owl-wrapper-outer"><div class="owl-wrapper" style="width: 4680px; left: 0px; display: block; transition: 800ms; transform: translate3d(-1170px, 0px, 0px);"><div class="owl-item" style="width: 585px;"><img src="./SALMAKİS BODRUM RESORT_files/1l.jpg" alt=""></div><div class="owl-item" style="width: 585px;"><img src="./SALMAKİS BODRUM RESORT_files/2l.jpg" alt=""></div><div class="owl-item" style="width: 585px;"><img src="./SALMAKİS BODRUM RESORT_files/3l.jpg" alt=""></div><div class="owl-item" style="width: 585px;"><img src="./SALMAKİS BODRUM RESORT_files/4l.jpg" alt=""></div></div></div>
+                            
+                            
+                            
+                        <div class="owl-controls clickable"><div class="owl-pagination"><div class="owl-page"><span class=""></span></div><div class="owl-page"><span class=""></span></div><div class="owl-page active"><span class=""></span></div><div class="owl-page"><span class=""></span></div></div><div class="owl-buttons"><div class="owl-prev"><i class="lotus-icon-left-arrow"></i></div><div class="owl-next"><i class="lotus-icon-right-arrow"></i></div></div></div></div>
+
+                        <div class="text">
+                            <h2 class="heading">Lobby Bar</h2>
+                            <div class="desc">
+                                <p>Modern Osmanlı mimarisi ile dizayn edilmiş dekorasyonu, nezih atmosferi ve Bodrum denizinden esinlenilen rahatlatıcı rengi ile Lobby Bar’da dilerseniz sıcak içecek ve pasta çeşitlerini tadabilir ya da içkilerinizi keyifle yudumlayabilirsiniz. Keyifli bir sohbet ortamı olarak tasarlanan Lobby Bar 24 saat boyunca büyüleyici bir atmosfere sahiptir..</p>
+                            </div>
+                        </div>
+
+                    </div>
+                    <!-- END / ITEM -->
+                     <!-- ITEM -->
+                    <div class="about-item">
+
+                        <div class="img owl-single owl-carousel owl-theme" style="display: block; opacity: 1;">
+                            <div class="owl-wrapper-outer"><div class="owl-wrapper" style="width: 4680px; left: 0px; display: block; transition: 800ms; transform: translate3d(-1170px, 0px, 0px);"><div class="owl-item" style="width: 585px;"><img src="./SALMAKİS BODRUM RESORT_files/1d.jpg" alt=""></div><div class="owl-item" style="width: 585px;"><img src="./SALMAKİS BODRUM RESORT_files/2d.jpg" alt=""></div><div class="owl-item" style="width: 585px;"><img src="./SALMAKİS BODRUM RESORT_files/3d.jpg" alt=""></div><div class="owl-item" style="width: 585px;"><img src="./SALMAKİS BODRUM RESORT_files/4d.jpg" alt=""></div></div></div>
+                            
+                            
+                            
+                        <div class="owl-controls clickable"><div class="owl-pagination"><div class="owl-page"><span class=""></span></div><div class="owl-page"><span class=""></span></div><div class="owl-page active"><span class=""></span></div><div class="owl-page"><span class=""></span></div></div><div class="owl-buttons"><div class="owl-prev"><i class="lotus-icon-left-arrow"></i></div><div class="owl-next"><i class="lotus-icon-right-arrow"></i></div></div></div></div>
+
+                        <div class="text">
+                            <h2 class="heading">Pool Bar</h2>
+                            <div class="desc">
+                                <p>Salmakis Resort &amp; Spa’nın tam kalbinde bulunan Pool Bar'da sunulan zengin içki çeşitleriyle serinleyin. Arkadaşlarınızla vakit geçirmek, gün içinde ailenizle birlikte dinlenmek ya da uzun yaz akşamlarında Pool Bar’da yemek öncesi veya sonrası içeceklerinizi müzik eşliğinde keyifle yudumlayabilirsiniz.</p>
+                            </div>
+                        </div>
+
+                    </div>
+                    <!-- END / ITEM -->
+                     <!-- ITEM -->
+                    <div class="about-item about-right">
+
+                        <div class="img owl-single owl-carousel owl-theme" style="display: block; opacity: 1;">
+                            <div class="owl-wrapper-outer"><div class="owl-wrapper" style="width: 3510px; left: 0px; display: block; transition: 1000ms; transform: translate3d(0px, 0px, 0px);"><div class="owl-item" style="width: 585px;"><img src="./SALMAKİS BODRUM RESORT_files/1b.jpg" alt=""></div><div class="owl-item" style="width: 585px;"><img src="./SALMAKİS BODRUM RESORT_files/2b.jpg" alt=""></div><div class="owl-item" style="width: 585px;"><img src="./SALMAKİS BODRUM RESORT_files/3b.jpg" alt=""></div></div></div>
+                            
+                            
+                            
+                        <div class="owl-controls clickable"><div class="owl-pagination"><div class="owl-page active"><span class=""></span></div><div class="owl-page"><span class=""></span></div><div class="owl-page"><span class=""></span></div></div><div class="owl-buttons"><div class="owl-prev"><i class="lotus-icon-left-arrow"></i></div><div class="owl-next"><i class="lotus-icon-right-arrow"></i></div></div></div></div>
+
+                        <div class="text">
+                            <h2 class="heading">Beach Bar</h2>
+                            <div class="desc">
+                                <p>Plajın nabzını tutan Beach Bar, gündüzleri deniz kenarında kalmayı tercih edenlere keyifli içeceklerin yanında Snack Bar'ın lezzetli menüsünü de sunan; akşamları da canlı şovların sunulduğu, yaz akşamlarının coşkusunun yaşandığı hoş bir ortam sunuyor.</p>
+                            </div>
+                        </div>
+
+                    </div>
+                    <!-- END / ITEM -->
+
+                </div>
+
+            </div>
+        </section>
+        <!-- END / ABOUT -->
+        
+        
+
+        
+
+        <!-- FOOTER -->
+        <footer id="footer">
+
+            <!-- FOOTER TOP -->
+            <div class="footer_top">
+              <div class="container">
+                    <div class="row">
+
+                        <!-- WIDGET MAILCHIMP -->
+                        
+                        <!-- END / WIDGET MAILCHIMP -->
+                        
+                        <!-- WIDGET SOCIAL -->
+                        
+		<div id="social">
+        <h2>Sosyal Medya'da Bizi Takip Edin!</h2>
+        	<a class="facebookBtn smGlobalBtn" href="https://www.facebook.com/SalmakisResortSpa" target="_blank"></a>
+            <a class="instagramBtn smGlobalBtn" href="https://www.instagram.com/salmakisspafitness/" target="_blank"></a>
+			<a class="twitterBtn smGlobalBtn" href="https://twitter.com/SalmakisRS" target="_blank"></a>
+			<a class="googleplusBtn smGlobalBtn" href="https://salmakishotel.com/rest.html#"></a>
+            <a class="pinterestBtn smGlobalBtn" href="https://salmakishotel.com/rest.html#"></a>
+			<a class="linkedinBtn smGlobalBtn" href="https://salmakishotel.com/rest.html#"></a>
+			
+			
+			
+		</div>
+	
+                      <!-- END / WIDGET SOCIAL -->
+
+                    </div>
+                </div>
+            </div>
+            <!-- END / FOOTER TOP -->
+
+            <!-- FOOTER CENTER -->
+            <div class="footer_center">
+              <div class="container">
+                    <div class="row">
+
+                        <div class="col-xs-12 col-lg-5">
+                            <div class="widget widget_logo">
+                                <div class="widget-logo">
+                                    <div class="img">
+                                        <a href="https://salmakishotel.com/rest.html#"><img src="./SALMAKİS BODRUM RESORT_files/logo-footer.png" alt=""></a>
+                                    </div>
+                                    <div class="text">
+                                        <p><i class="lotus-icon-location"></i> Bardakçı Koyu / Bodrum / Türkiye</p>
+                                        <p><i class="lotus-icon-phone"></i> +90 (252) 316 65 07</p>
+                                        <p><i class="fa fa-envelope-o"></i> <a href="mailto:salmakis@salmakis.com.tr">salmakis@salmakis.com.tr</a></p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="col-xs-4 col-lg-2">
+                            <div class="widget">
+                                <h4 class="widget-title">Kurumsal</h4>
+                                <ul>
+                                    <li><a href="https://salmakishotel.com/rest.html#">Viyon &amp; Misyonumuz</a></li>
+                                    <li><a href="https://salmakishotel.com/rest.html#">Basın Kiti</a></li>
+                                    <li></li>
+                                  
+                                </ul>
+                            </div>
+                        </div>
+
+                        <div class="col-xs-4 col-lg-2">
+                            <div class="widget">
+                                <h4 class="widget-title">Salmakis Resort Bodrum </h4>
+                                <ul>
+                                    <li><a href="https://salmakishotel.com/rest.html">Basında Biz</a></li>
+                                    <li><a href="https://salmakishotel.com/rest.html">İnsan Kaynakları</a></li>
+                                    <li></li>
+                                    
+                                </ul>
+                            </div>
+                        </div>
+
+                        <div class="col-xs-4 col-lg-3">
+                            <div class="widget widget_tripadvisor">
+                                <h4 class="widget-title">Tripadvisor</h4>
+                                <div class="tripadvisor">
+
+                                    <img src="./SALMAKİS BODRUM RESORT_files/tripadvisor.png" alt="">
+                                    <span class="tripadvisor-circle">
+                                        <i></i>
+                                        <i></i>
+                                        <i></i>
+                                        <i></i>
+                                        <i class="part"></i>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+
+
+                    </div>
+                </div>
+            </div>
+            <!-- END / FOOTER CENTER -->
+
+            <!-- FOOTER BOTTOM -->
+            <div class="footer_bottom">
+              <div class="container">
+                    <p>© 2017 Salmakis Bodrum Resort</p>
+                </div>
+            </div>
+            <!-- END / FOOTER BOTTOM -->
+
+      </footer>
+        <!-- END / FOOTER -->
+
+    </div>
+    <!-- END / PAGE WRAP -->
+
+
+    <!-- LOAD JQUERY -->
+    <script type="text/javascript" src="./SALMAKİS BODRUM RESORT_files/jquery-1.11.0.min.js.indir"></script>
+    <script type="text/javascript" src="./SALMAKİS BODRUM RESORT_files/jquery-ui.min.js.indir"></script>
+    <script type="text/javascript" src="./SALMAKİS BODRUM RESORT_files/bootstrap.min.js.indir"></script>
+    <script type="text/javascript" src="./SALMAKİS BODRUM RESORT_files/bootstrap-select.js.indir"></script>
+    <script src="./SALMAKİS BODRUM RESORT_files/js" type="text/javascript"></script>
+    <script type="text/javascript" src="./SALMAKİS BODRUM RESORT_files/isotope.pkgd.min.js.indir"></script>
+    <script type="text/javascript" src="./SALMAKİS BODRUM RESORT_files/jquery.themepunch.revolution.min.js.indir"></script>
+    <script type="text/javascript" src="./SALMAKİS BODRUM RESORT_files/jquery.themepunch.tools.min.js.indir"></script>
+    <script type="text/javascript" src="./SALMAKİS BODRUM RESORT_files/owl.carousel.js.indir"></script>
+    <script type="text/javascript" src="./SALMAKİS BODRUM RESORT_files/jquery.appear.min.js.indir"></script>
+    <script type="text/javascript" src="./SALMAKİS BODRUM RESORT_files/jquery.countTo.js.indir"></script>
+    <script type="text/javascript" src="./SALMAKİS BODRUM RESORT_files/jquery.countdown.min.js.indir"></script>
+    <script type="text/javascript" src="./SALMAKİS BODRUM RESORT_files/jquery.parallax-1.1.3.js.indir"></script>
+    <script type="text/javascript" src="./SALMAKİS BODRUM RESORT_files/jquery.magnific-popup.min.js.indir"></script>
+    <script type="text/javascript" src="./SALMAKİS BODRUM RESORT_files/SmoothScroll.js.indir"></script>
+    <script type="text/javascript" src="./SALMAKİS BODRUM RESORT_files/scripts.js.indir"></script>
+<script defer="" src="./SALMAKİS BODRUM RESORT_files/v8c78df7c7c0f484497ecbca7046644da1771523124516" integrity="sha512-8DS7rgIrAmghBFwoOTujcf6D9rXvH8xm8JQ1Ja01h9QX8EzXldiszufYa4IFfKdLUKTTrnSFXLDkUEOTrZQ8Qg==" data-cf-beacon="{&quot;version&quot;:&quot;2024.11.0&quot;,&quot;token&quot;:&quot;0cc623579a794381b04a6a4b10592f4e&quot;,&quot;r&quot;:1,&quot;server_timing&quot;:{&quot;name&quot;:{&quot;cfCacheStatus&quot;:true,&quot;cfEdge&quot;:true,&quot;cfExtPri&quot;:true,&quot;cfL4&quot;:true,&quot;cfOrigin&quot;:true,&quot;cfSpeedBrain&quot;:true},&quot;location_startswith&quot;:null}}" crossorigin="anonymous"></script>
+
+<div class="awe-popup-overlay" id="awe-popup-overlay"></div><div class="awe-popup-wrap" id="awe-popup-wrap"><div class="awe-popup-content"></div><span class="awe-popup-close" id="awe-popup-close"></span></div></body></html>