feat: update branding, SEO, slugs and social links for Fethiye location

app/about/page.tsx

@@ -7,39 +7,38 @@ import Link from 'next/link'
 
 const services = [
   {
-    title: 'Mimari Hizmetler',
-    description: 'A.N.Tarchitecture, proaktif entegre tasarım yaklaşımıyla kapsamlı bir profesyonel mimari hizmet yelpazesi sunar:',
+    title: 'Mimari Tasarım',
+    description: 'A.N.T Architecture, Fethiye merkezli modern bir mimari yaklaşım ile kapsamlı tasarım hizmetleri sunar:',
     list: [
-      'Proje Geliştirme: Saha analizi, potansiyel çalışma, sosyal kabul edilebilirlik stratejileri ve planlama',
-      'Plan ve Şartnamelerin Tasarımı ve Üretimi.',
-      'Proje Modelleme Yönetimi: Entegre BIM (Yapı Bilgi Modellemesi) tasarımı',
-      'Düzenleyici Stratejiler: Yönetmelikler, saha çalışması, enerji ve güneş ışığı analizi',
-      'Kentsel Tasarım: Master planlama, peyzaj tasarımı ve inşaat mühendisliği işleri',
-      '3D Görselleştirme: 3D perspektifler, modelleme ve animasyonlar',
-      'İnşaat Hizmeti ve Yönetimi: İnşaat yönetimi ve saha denetimi'
+      'Konsept Tasarımı ve Geliştirme: Saha analizi, potansiyel çalışmaları ve master planlama',
+      'Mimari Plan ve Proje Hazırlama: Detaylı uygulama projeleri ve teknik şartnameler',
+      'BIM Destekli Tasarım: Yapı Bilgi Modellemesi ile entegre proje yönetimi',
+      'Ruhsat ve İzin Süreçleri: Yerel yönetmeliklere uygun strateji geliştirme',
+      '3D Görselleştirme: Fotorealistik renderlar, 360° turlar ve video animasyonlar',
+      'Şantiye Yönetimi ve Denetimi: Projenin uygulama aşamasında sahada kalite kontrolü'
     ],
     button: 'PROJELERİ GÖRÜNTÜLE',
     image: 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=2070&auto=format&fit=crop'
   },
   {
-    title: 'İç Mimari Hizmetleri',
-    description: 'A.N.Tarchitecture, sürdürülebilirlik, zarafet ve işlevselliği şirketinizin değerleriyle uyumlu akıllı düzenlerle birleştirerek, imajını ve işe alım kapasitesini artıran iç mimari konusunda derin bir uzmanlık sunar:',
+    title: 'İç Mimari ve Dekorasyon',
+    description: 'A.N.T Architecture, yaşam alanlarınıza ruh katan, işlevsel ve estetik iç mekan çözümleri üretir. Fethiye ve çevresindeki lüks villa ve ticari projelerde derin uzmanlık sunuyoruz:',
     list: [
-      'Aktif Müşteri Dinleme: Alan programlama ve planlama, bütçe analizi',
-      'Konsept Geliştirme: Plan ve şartnamelerin üretimi, malzeme seçimi, entegre mobilya ve özel objelerin kavramsallaştırılması',
-      'Entegre Tabela: Plan ve şartnamelerin modellenmesi ve üretimi',
-      '3D Görselleştirme: 3D perspektifler, modelleme ve animasyonlar'
+      'Mekan Planlama: İhtiyaç analizi ve fonksiyonel yerleşim planları',
+      'Malzeme ve Mobilya Seçimi: Kişiye özel mobilya tasarımı ve malzeme kürasyonu',
+      'Aydınlatma Tasarımı: Atmosferik ve teknik aydınlatma çözümleri',
+      'Anahtar Teslim Uygulama: Tasarımdan montaj aşamasına kadar tam kontrol'
     ],
     button: 'TÜM PROJELER',
     image: 'https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?q=80&w=2070&auto=format&fit=crop'
   },
   {
-    title: 'Planlama ve Uzmanlık Hizmetleri',
-    description: 'A.N.Tarchitecture, bina planlama, programlama ve denetleme konularında, müşteri ihtiyaçlarını ve gereksinimlerini net bir şekilde tanımlamak için titiz ve sistematik yöntemler kullanarak çeşitli uzmanlıklar sunar.',
+    title: 'Danışmanlık ve Uzmanlık',
+    description: 'Gayrimenkul yatırımlarınızdan önce teknik ve mimari değerlendirmeler yaparak riskleri minimize etmenize yardımcı oluyoruz.',
     list: [
-      'Fonksiyonel ve Teknik Programların (FTP) Geliştirilmesi: Müdahale stratejileri, organizasyonun genel özellikleri, işlevsellik ve alanlar',
-      'Fizibilite Çalışması ve Ön Konseptler: Teknik ve düzenleyici koşulların ve kısıtlamaların analizi',
-      'Teknik Uzmanlık: Su yalıtım sorunlarının ve erken yaşlanmanın tespiti, yaşam döngüsü analizi'
+      'Fizibilite Çalışmaları: Teknik ve yasal kısıtlamaların analizi',
+      'Yatırım Danışmanlığı: Arsa ve bina potansiyel değerlendirmesi',
+      'Yenileme ve Restorasyon: Mevcut yapıların modernizasyonu ve korunması'
     ],
     button: null,
     image: 'https://images.unsplash.com/photo-1518780664697-55e3ad937233?q=80&w=2070&auto=format&fit=crop'
@@ -47,12 +46,12 @@ const services = [
 ]
 
 const projectPhases = [
-  { num: '00', title: 'ÖN KAVRAMSAL ÇALIŞMALAR', desc: 'Bir binanın kapsamını belirlemek için ihtiyaçlarını ve işlevlerini anlamaya ve belgelemeye yardımcı olan hazırlık aşaması.' },
-  { num: '01', title: 'TASARIM AŞAMASI', desc: 'Bu aşama saha incelemesi, program incelemesi, ilk eskiz tasarımı ve ön bütçe analizini içerir.' },
-  { num: '02', title: 'TASARIM GELİŞTİRME', desc: 'Eskizler onaylandıktan sonra, gerekli ön planları, kesitleri ve görünüşleri oluşturarak projeyi daha detaylı geliştiriyoruz.' },
-  { num: '03', title: 'İNŞAAT BELGELERİ', desc: 'Bu inşaat için gerekli olan teknik planların gerçek geliştirilme aşamasıdır.' },
-  { num: '04', title: 'İHALE', desc: 'Genel yüklenici tekliflerinin analizinde ve inşaat sözleşmesinin imzalanmasında müşteriye yardımcı oluyor ve danışmanlık yapıyoruz.' },
-  { num: '05', title: 'SAHA DENETİMİ', desc: 'Projenin planlara sadık kalarak yürütülmesini sağlıyoruz. İnşaat sahasındaki öngörülemeyen sorunlara tasarımı uyarlamak için çözümler sunuyoruz.' }
+  { num: '00', title: 'ÖN ANALİZ VE KONCEPT', desc: 'İhtiyaçların belirlenmesi, arazi etüdü ve ilk fikirlerin eskizlerle somutlaştırıldığı hazırlık aşaması.' },
+  { num: '01', title: 'TASARIM SÜRECİ', desc: 'Saha incelemeleri, program analizi ve bütçe planlamasının yapıldığı temel tasarım aşaması.' },
+  { num: '02', title: 'DETAYLI GELİŞTİRME', desc: 'Taslakların onaylanmasının ardından plan, kesit ve görünüşlerin teknik detaylarla zenginleştirilmesi.' },
+  { num: '03', title: 'UYGULAMA PROJELERİ', desc: 'İnşaat aşamasında kullanılacak tüm teknik detayların ve imalat çizimlerinin hazırlanması.' },
+  { num: '04', title: 'TEKLİF VE SÖZLEŞME', desc: 'Yüklenici firma seçimi, maliyet analizi ve inşaat sözleşmelerinin yönetimi konusunda danışmanlık.' },
+  { num: '05', title: 'SAHA DENETİMİ', desc: 'Uygulamanın projeye uygun ilerlemesinin sağlanması ve sahada karşılaşılan sorunlara mimari çözümler üretilmesi.' }
 ]
 
 export default function AboutPage() {
@@ -93,9 +92,10 @@ export default function AboutPage() {
             transition={{ duration: 1.2, ease: [0.22, 1, 0.36, 1] }}
           >
             <p className="text-[24px] md:text-[36px] lg:text-[42px] leading-[1.2] font-normal tracking-tight text-white/95">
-              Mimariyi, teknik disiplin ile yaratıcı vizyonun kusursuz dengesi olarak tanımlıyorum. Tasarım sürecimde hem iç hem de dış mekân projelerinde bütüncül bir yaklaşımı benimsiyor; projelerimi sadece birer yapı olarak değil, çevresiyle nefes alan yaşam alanları olarak tasarlıyorum.
-
-              Projelerimin teknik omurgasını AutoCAD üzerinde detaylı plan ve kesit çalışmalarıyla oluştururken, 3D modelleme ve görselleştirme süreçlerinde sunduğum gerçekçi sunumlarla tasarıma derinlik kazandırıyorum. Konsept tasarımından uygulama detaylarına kadar her aşamada, mekânın işlevselliğini estetik bir değerle harmanlamayı amaçlıyorum.  </p>
+              Mimariyi, teknik disiplin ile yaratıcı vizyonun kusursuz dengesi olarak tanımlıyorum. Fethiye merkezli tasarım sürecimde, her projemde bütüncül bir yaklaşımı benimsiyor; yapıları sadece betonarme kütleler değil, çevresiyle nefes alan yaşam alanları olarak tasarlıyorum.
+              <br /><br />
+              Projelerimin teknik omurgasını AutoCAD üzerinde detaylı plan ve kesit çalışmalarıyla kurgularken, 3D modelleme süreçlerinde sunduğum gerçekçi sunumlarla hayalleri somuta dönüştürüyorum. Konseptten uygulamaya her aşamada işlevselliği estetik bir değerle harmanlamayı amaçlıyorum.
+            </p>
           </motion.div>
 
           <motion.div
@@ -105,8 +105,8 @@ export default function AboutPage() {
             transition={{ duration: 1.2, delay: 0.3, ease: [0.22, 1, 0.36, 1] }}
             className="flex flex-col space-y-12 lg:space-y-16 mt-4"
           >
-            <p className="text-[13px] md:text-[14px] leading-relaxed text-zinc-400 font-medium">
-              2006 yılında Toronto'da CGBWstudio adıyla Charles-Bernard Gagnon tarafından kurulan ve 2008'de Quebec City'ye taşınan firma, felsefesi ve sürecin her aşamasında yüksek kaliteli profesyonel hizmet sunma taahhüdü sayesinde bölge pazarında öne çıkmıştır. Bu yaklaşım, firmanın yenilikçi projelerden oluşan bir portföy oluşturmasını sağlamıştır. 2013 yılında ekip, daha anlamlı bir isim olan A.N.Tarchitecture adını seçmiştir.
+            <p className="text-[14px] md:text-[15px] leading-relaxed text-zinc-300 font-medium italic border-l border-white/20 pl-6">
+              2025 yılında Fethiye'de temelleri atılan A.N.T Architecture, mimar Ayça Nur Turhan'ın modern tasarım vizyonunu ve teknik disiplinini bir araya getirerek kurulmuştur. Yerel dokuyu modern çizgilerle buluşturan ofisimiz, villa projelerinden ticari mekanlara kadar her ölçekte mimari ve iç mimari çözümler sunmaktadır.
             </p>
 
             <div className="flex flex-col space-y-6">
@@ -120,7 +120,7 @@ export default function AboutPage() {
                 />
               </div>
               <div className="text-[10px] md:text-[11px] font-bold uppercase tracking-[0.2em] leading-[1.5] text-white/60">
-                AYÇA NUR TURHAN KURUCU <br />MİMAR, OAQ
+                AYÇA NUR TURHAN <br />KURUCU MİMAR
               </div>
             </div>
           </motion.div>
@@ -189,8 +189,8 @@ export default function AboutPage() {
           style={{ padding: bottomPadding }}
           className="flex justify-between items-end"
         >
-          <motion.h1 style={{ fontSize: cargoFontSize }} className="font-bebas leading-[0.8] text-black mix-blend-difference tracking-tighter">A.N.T</motion.h1>
-          <motion.h1 style={{ fontSize: archFontSize }} className="font-bebas leading-[0.8] text-black mix-blend-difference tracking-tighter">ARCHITECTURE</motion.h1>
+          <motion.h1 style={{ fontSize: cargoFontSize }} className="font-bebas leading-[0.8] text-white mix-blend-difference tracking-tighter">A.N.T</motion.h1>
+          <motion.h1 style={{ fontSize: archFontSize }} className="font-bebas leading-[0.8] text-white mix-blend-difference tracking-tighter">ARCHITECTURE</motion.h1>
         </motion.div>
       </motion.div>
 
@@ -199,16 +199,11 @@ export default function AboutPage() {
 }
 
 function ServiceCard({ service, index, scrollYProgress }: { service: any, index: number, scrollYProgress: any }) {
-  // Cards start visible but at different Y positions (staggered cascade)
-  // Card 0: y=0 (top), Card 1: y=200px lower, Card 2: y=400px lower
-  // As user scrolls, each card slides UP to y=0 to align with Card 0
   const initialOffsets = [0, 200, 400]
-
-  // Sequential timing: Card 1 arrives first, Card 2 arrives after
   const ranges: [number, number][] = [
-    [0, 0.01],    // Card 0: always in place
-    [0, 0.50],    // Card 1: slides up during first half
-    [0.15, 0.85], // Card 2: starts after Card 1 is moving, arrives by 85%
+    [0, 0.01],
+    [0, 0.50],
+    [0.15, 0.85],
   ]
 
   const y = useTransform(
@@ -220,17 +215,16 @@ function ServiceCard({ service, index, scrollYProgress }: { service: any, index:
   return (
     <motion.div
       style={{ y }}
-      className="relative w-full h-full bg-white text-black flex flex-col rounded-2xl overflow-hidden"
+      className="relative w-full h-full bg-white text-black flex flex-col rounded-2xl overflow-hidden shadow-2xl"
     >
-      {/* Content Area */}
       <div className="flex-1 p-10 lg:p-14 overflow-hidden">
-        <h2 className="text-[32px] lg:text-[40px] mb-10 font-normal tracking-tight leading-[1.1]">
+        <h2 className="text-[32px] lg:text-[40px] mb-8 font-normal tracking-tight leading-[1.1]">
           {service.title}
         </h2>
-        <p className="text-[15px] mb-10 text-black/80 leading-relaxed font-medium">
+        <p className="text-[15px] mb-8 text-black/80 leading-relaxed font-medium">
           {service.description}
         </p>
-        <ul className="space-y-4 mb-12">
+        <ul className="space-y-4 mb-10">
           {service.list.map((item: string, i: number) => (
             <li key={i} className="text-[14px] text-black/70 flex items-start border-b border-black/5 pb-2 last:border-0 leading-snug">
               <span className="mr-3 text-black/30">•</span>
@@ -245,7 +239,6 @@ function ServiceCard({ service, index, scrollYProgress }: { service: any, index:
         )}
       </div>
 
-      {/* Fixed Image at Bottom */}
       <div className="h-[35%] lg:h-[40%] relative w-full overflow-hidden grayscale group hover:grayscale-0 transition-all duration-700">
         <Image
           src={service.image}

app/contact/page.tsx

@@ -3,10 +3,8 @@
 import Link from 'next/link'
 
 const socialLinks = [
-  { name: 'FACEBOOK', href: 'https://facebook.com' },
-  { name: 'INSTAGRAM', href: 'https://instagram.com' },
-  { name: 'LINKEDIN', href: 'https://linkedin.com' },
-  { name: '***', href: '**' },
+  { name: 'INSTAGRAM (MİMAR)', href: 'https://www.instagram.com/mimaraycanurturan_/' },
+  { name: 'INSTAGRAM (KİŞİSEL)', href: 'https://www.instagram.com/aycanurturan_/' },
 ]
 
 const offices = [

app/layout.tsx

@@ -25,8 +25,32 @@ const oswald = Oswald({
 });
 
 export const metadata: Metadata = {
-  title: "A.N.T ARCHITECTURE",
-  description: "Ayça Nur Turhan - Mimarlık ve Tasarım",
+  title: {
+    template: '%s | A.N.T Architecture',
+    default: 'A.N.T Architecture | Ayça Nur Turhan - Fethiye Mimarlık ve Tasarım',
+  },
+  description: 'Ayça Nur Turhan tarafından Fethiye\'de kurulan A.N.T Architecture, modern mimari ve yenilikçi tasarım çözümleri sunar. Villa projeleri, iç mekan tasarımı ve uygulama hizmetleri.',
+  keywords: ['Fethiye Mimarlık', 'Ayça Nur Turhan', 'Ant Architecture', 'Modern Mimari', 'Villa Tasarımı', 'İç Mimarlık Fethiye'],
+  authors: [{ name: 'Ayça Nur Turhan' }],
+  creator: 'Ayça Nur Turhan',
+  publisher: 'A.N.T Architecture',
+  formatDetection: {
+    email: false,
+    address: true,
+    telephone: true,
+  },
+  openGraph: {
+    title: 'A.N.T Architecture | Ayça Nur Turhan',
+    description: 'Fethiye merkezli modern mimari ve tasarım ofisi.',
+    url: 'https://aycanurturhan.com', // Change this to actual URL if known
+    siteName: 'A.N.T Architecture',
+    locale: 'tr_TR',
+    type: 'website',
+  },
+  robots: {
+    index: true,
+    follow: true,
+  },
 };
 
 export default function RootLayout({

app/projects/[slug]/page.tsx

@@ -0,0 +1,95 @@
+'use client'
+
+import { useParams } from 'next/navigation'
+import { projects } from '@/data/projects'
+import { motion } from 'framer-motion'
+import Image from 'next/image'
+import Link from 'next/link'
+import { notFound } from 'next/navigation'
+
+export default function ProjectDetailPage() {
+  const params = useParams()
+  const slug = params.slug as string
+  
+  const project = projects.find(p => p.slug === slug)
+
+  if (!project) {
+    notFound()
+  }
+
+  return (
+    <main className="min-h-screen bg-white">
+      {/* Navigation */}
+      <nav className="fixed top-0 left-0 w-full z-50 p-6 md:p-10 flex justify-between items-center mix-blend-difference text-white pointer-events-none">
+        <Link href="/" className="pointer-events-auto font-bebas text-2xl tracking-tighter hover:opacity-70 transition-opacity">
+          A.N.T
+        </Link>
+        <Link href="/projects" className="pointer-events-auto text-[10px] font-bold uppercase tracking-[0.2em] hover:opacity-70 transition-opacity">
+          Tüm Projeler
+        </Link>
+      </nav>
+
+      <div className="flex flex-col md:flex-row min-h-screen">
+        {/* Left Side: Info */}
+        <div className="w-full md:w-1/3 pt-32 pb-10 px-6 md:px-10 flex flex-col justify-between">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+          >
+            <div className="text-[10px] font-bold text-black/40 uppercase tracking-[0.3em] mb-4">
+              {project.year} — {project.location}
+            </div>
+            <h1 className="text-4xl md:text-6xl font-bebas text-black leading-none tracking-tighter uppercase mb-6">
+              {project.title}
+            </h1>
+            <div className="h-[1px] w-12 bg-black mb-6" />
+            <p className="text-sm text-black/60 leading-relaxed max-w-sm">
+              Bu proje, modern mimari prensipleri ve fonksiyonel tasarım anlayışıyla hayata geçirilmiştir. 
+              Detaylar ve uygulama süreçleri hakkında daha fazla bilgi için bizimle iletişime geçebilirsiniz.
+            </p>
+          </motion.div>
+
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 0.4, duration: 0.8 }}
+            className="hidden md:block"
+          >
+            <div className="text-[10px] font-bold text-black uppercase tracking-[0.2em]">
+              Kategori: {project.category || 'Belirtilmemiş'}
+            </div>
+          </motion.div>
+        </div>
+
+        {/* Right Side: Image */}
+        <div className="w-full md:w-2/3 h-[70vh] md:h-screen relative">
+          <motion.div 
+            initial={{ opacity: 0, scale: 1.1 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 1.2, ease: [0.76, 0, 0.24, 1] }}
+            className="w-full h-full"
+          >
+            <Image 
+              src={project.image}
+              alt={project.title}
+              fill
+              priority
+              className="object-cover"
+            />
+          </motion.div>
+          
+          {/* Subtle Overlay */}
+          <div className="absolute inset-0 bg-black/5 pointer-events-none" />
+        </div>
+      </div>
+
+      {/* Mobile Footer Info */}
+      <div className="md:hidden p-6 border-t border-black/5">
+        <div className="text-[10px] font-bold text-black uppercase tracking-[0.2em]">
+          Kategori: {project.category || 'Belirtilmemiş'}
+        </div>
+      </div>
+    </main>
+  )
+}

app/projects/page.tsx

@@ -2,6 +2,7 @@
 
 import { motion, useScroll, useTransform } from 'framer-motion'
 import Image from 'next/image'
+import Link from 'next/link'
 import { projects } from '@/data/projects'
 import { useState, useEffect } from 'react'
 
@@ -28,33 +29,34 @@ export default function ProjectsPage() {
     <main className="relative min-h-screen bg-white pt-32 pb-60 px-6 md:px-10">
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
         {projects.map((project, idx) => (
-          <motion.div 
-            key={project.id}
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.6, delay: idx * 0.05 }}
-            className="group cursor-pointer"
-          >
-            <div className="relative aspect-[4/3] overflow-hidden rounded-[1px] bg-zinc-100">
-              <Image 
-                src={project.image}
-                alt={project.title}
-                fill
-                className="object-cover grayscale group-hover:grayscale-0 transition-all duration-700 ease-in-out scale-105 group-hover:scale-100"
-              />
-            </div>
-            <div className="mt-4 flex flex-col space-y-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
-              <span className="text-[10px] font-bold text-black/60 uppercase tracking-wider">
-                {project.year} — {project.location}
-              </span>
-              <div className="flex justify-between items-center">
-                <span className="text-[10px] font-bold text-black uppercase tracking-widest">
-                  {project.title}
-                </span>
-                <span className="text-sm">→</span>
+          <Link key={project.slug} href={`/projects/${project.slug}`}>
+            <motion.div 
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: idx * 0.05 }}
+              className="group cursor-pointer"
+            >
+              <div className="relative aspect-[4/3] overflow-hidden rounded-[1px] bg-zinc-100">
+                <Image 
+                  src={project.image}
+                  alt={project.title}
+                  fill
+                  className="object-cover grayscale group-hover:grayscale-0 transition-all duration-700 ease-in-out scale-105 group-hover:scale-100"
+                />
               </div>
-            </div>
-          </motion.div>
+              <div className="mt-4 flex flex-col space-y-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                <span className="text-[10px] font-bold text-black/60 uppercase tracking-wider">
+                  {project.year} — {project.location}
+                </span>
+                <div className="flex justify-between items-center">
+                  <span className="text-[10px] font-bold text-black uppercase tracking-widest">
+                    {project.title}
+                  </span>
+                  <span className="text-sm">→</span>
+                </div>
+              </div>
+            </motion.div>
+          </Link>
         ))}
       </div>
 

components/ProjectSlider.tsx

@@ -3,6 +3,7 @@
 import { useRef, useEffect } from 'react'
 import { motion, useAnimationFrame } from 'framer-motion'
 import Image from 'next/image'
+import Link from 'next/link'
 import { Project } from '@/data/projects'
 
 interface ProjectSliderProps {
@@ -43,9 +44,10 @@ export default function ProjectSlider({ projects }: ProjectSliderProps) {
     >
       <div className="flex space-x-6 md:space-x-12 px-6 md:px-10">
         {doubledProjects.map((project, idx) => (
-          <div 
-            key={`${project.id}-${idx}`} 
-            className="group relative flex-shrink-0 w-[80vw] sm:w-[500px] md:w-[600px]"
+          <Link
+            href={`/projects/${project.slug}`}
+            key={`${project.slug}-${idx}`} 
+            className="group relative flex-shrink-0 w-[80vw] sm:w-[500px] md:w-[600px] block"
           >
             {/* Image Container */}
             <div className="relative aspect-[4/3] overflow-hidden rounded-[1px]">
@@ -68,7 +70,7 @@ export default function ProjectSlider({ projects }: ProjectSliderProps) {
                 <span className="text-sm md:text-lg">→</span>
               </div>
             </div>
-          </div>
+          </Link>
         ))}
       </div>
     </div>

data/projects.ts

@@ -1,5 +1,6 @@
 export interface Project {
   id: number;
+  slug: string;
   year: string;
   location: string;
   title: string;
@@ -10,6 +11,7 @@ export interface Project {
 export const projects: Project[] = [
   {
     id: 1,
+    slug: 'jdhm-genel-merkez',
     year: '2018',
     location: 'SAINT-AUGUSTIN-DE-DESMAURES',
     title: 'JDHM – GENEL MERKEZ',
@@ -18,6 +20,7 @@ export const projects: Project[] = [
   },
   {
     id: 2,
+    slug: 'sale',
     year: '2019',
     location: 'MONTREAL, QC',
     title: 'ŞALE',
@@ -26,22 +29,17 @@ export const projects: Project[] = [
   },
   {
     id: 3,
+    slug: 'modern-muze',
     year: '2020',
     location: 'QUEBEC CITY, QC',
     title: 'MODERN MÜZE',
     image: 'https://images.unsplash.com/photo-1511818966892-d7d671e672a2?q=80&w=2070&auto=format&fit=crop',
     category: 'Kültürel'
   },
+
   {
     id: 4,
-    year: '2021',
-    location: 'TORONTO, ON',
-    title: 'ŞEHİR KULESİ',
-    image: 'https://images.unsplash.com/photo-1449156001533-cb39414bb589?q=80&w=2070&auto=format&fit=crop',
-    category: 'Konut'
-  },
-  {
-    id: 5,
+    slug: 'orman-evi',
     year: '2022',
     location: 'VANCOUVER, BC',
     title: 'ORMAN EVİ',
@@ -49,7 +47,8 @@ export const projects: Project[] = [
     category: 'Konut'
   },
   {
-    id: 6,
+    id: 5,
+    slug: 'kocina',
     year: '2023',
     location: 'SAINTE-FOY, QC',
     title: 'KOCINA',
@@ -57,7 +56,8 @@ export const projects: Project[] = [
     category: 'Ticari'
   },
   {
-    id: 7,
+    id: 6,
+    slug: 'yamac-evi',
     year: '2022',
     location: 'MONT-TREMBLANT, QC',
     title: 'YAMAÇ EVİ',
@@ -65,7 +65,8 @@ export const projects: Project[] = [
     category: 'Konut'
   },
   {
-    id: 8,
+    id: 7,
+    slug: 'makusham-studyo',
     year: '2021',
     location: 'LÉVIS, QC',
     title: 'MAKUSHAM STÜDYO',
@@ -73,19 +74,13 @@ export const projects: Project[] = [
     category: 'Kültürel'
   },
   {
-    id: 9,
+    id: 8,
+    slug: 'must-societe',
     year: '2023',
     location: 'BROSSARD, QC',
     title: 'MUST SOCIÉTÉ',
     image: 'https://images.unsplash.com/photo-1504384308090-c894fdcc538d?q=80&w=2070&auto=format&fit=crop',
     category: 'Ticari'
   },
-  {
-    id: 10,
-    year: '2022',
-    location: 'RIMOUSKI, QC',
-    title: 'GÖL KENARI KULÜBESİ',
-    image: 'https://images.unsplash.com/photo-1449156001533-cb39414bb589?q=80&w=2070&auto=format&fit=crop',
-    category: 'Konut'
-  }
+
 ];