From d6f14e93c6344dfc8c4203b7a23c59bfd6f15661 Mon Sep 17 00:00:00 2001
From: AyrisAI <ayris@ayris.tech>
Date: Sat, 4 Apr 2026 11:41:01 +0300
Subject: [PATCH] feat: complete responsive overhaul for all pages and
 components

---
 src/app/(main)/projeler/[id]/page.tsx |  6 +-
 src/app/(main)/projeler/page.tsx      |  6 +-
 src/components/footer.tsx             | 10 ++--
 src/components/landing-page.tsx       | 20 +++----
 src/components/navbar.tsx             | 85 ++++++++++++++++++++++-----
 5 files changed, 92 insertions(+), 35 deletions(-)

diff --git a/src/app/(main)/projeler/[id]/page.tsx b/src/app/(main)/projeler/[id]/page.tsx
index 8a309cb..daa46ba 100644
--- a/src/app/(main)/projeler/[id]/page.tsx
+++ b/src/app/(main)/projeler/[id]/page.tsx
@@ -27,7 +27,7 @@ export default async function ProjectDetailPage({ params }: { params: Promise<{
         <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-end mb-24">
           <div className="lg:col-span-8">
              <p className="label-editorial text-[#795900] mb-4">{project.status}</p>
-             <h1 className="text-6xl md:text-9xl font-inter font-black uppercase tracking-tighter leading-[0.9] break-words">
+             <h1 className="text-[clamp(3rem,8vw,8rem)] font-inter font-black uppercase tracking-tighter leading-[0.9] break-words">
                 {project.title}
              </h1>
           </div>
@@ -46,7 +46,7 @@ export default async function ProjectDetailPage({ params }: { params: Promise<{
         </div>
 
         {/* Main Image */}
-        <div className="relative aspect-[21/9] w-full overflow-hidden bg-gray-200 mb-24 shadow-2xl">
+        <div className="relative aspect-[16/9] md:aspect-[21/9] w-full overflow-hidden bg-gray-200 mb-16 md:mb-24 shadow-2xl">
            <Image 
             src={project.images[0] || "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?q=80&w=2070"} 
             alt={project.title} 
@@ -134,7 +134,7 @@ export default async function ProjectDetailPage({ params }: { params: Promise<{
         {/* CTA */}
         <section className="bg-[#1A1C1C] p-16 md:p-24 text-center text-white">
            <p className="label-editorial text-[#FFBF00] mb-8">Sıradaki Proje Sizinki Olabilir</p>
-           <h3 className="text-4xl md:text-6xl font-inter font-black uppercase mb-12">Benzer Bir Vizyonun<br />Varmı?</h3>
+           <h3 className="text-3xl md:text-6xl font-inter font-black uppercase mb-12">Benzer Bir Vizyonunuz<br />Var mı?</h3>
            <a href="/#iletisim" className="inline-block bg-[#FFBF00] text-[#1A1C1C] px-16 py-6 font-bold uppercase hover:bg-white transition-all shadow-2xl">Bize Ulaşın</a>
         </section>
       </div>
diff --git a/src/app/(main)/projeler/page.tsx b/src/app/(main)/projeler/page.tsx
index ab08929..b0d2ac4 100644
--- a/src/app/(main)/projeler/page.tsx
+++ b/src/app/(main)/projeler/page.tsx
@@ -13,7 +13,7 @@ export default async function ProjelerPage() {
       <div className="max-w-7xl mx-auto">
         <header className="mb-20">
           <p className="label-editorial text-[#795900] mb-4">Portfolyo Koleksiyonu</p>
-          <h1 className="text-6xl md:text-9xl font-inter font-black uppercase tracking-tighter leading-[0.9]">
+          <h1 className="text-[clamp(3rem,10vw,8rem)] font-inter font-black uppercase tracking-tighter leading-[0.9]">
             PROJELER
           </h1>
         </header>
@@ -23,7 +23,7 @@ export default async function ProjelerPage() {
               <Link 
                 href={`/projeler/${p.id}`} 
                 key={p.id} 
-                className={`group relative h-[600px] overflow-hidden ${i % 3 === 0 ? "md:col-span-2" : ""}`}
+                className={`group relative h-[400px] md:h-[600px] overflow-hidden ${i % 3 === 0 ? "md:col-span-2" : ""}`}
               >
                 <Image 
                   src={p.images[0] || "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?q=80&w=2070"} 
@@ -37,7 +37,7 @@ export default async function ProjelerPage() {
                 <div className="absolute bottom-12 left-12 right-12 flex justify-between items-end">
                   <div>
                       <div className="label-editorial text-[#FFBF00] mb-2">{p.status}</div>
-                      <h2 className="text-4xl font-inter font-black text-white uppercase tracking-tighter">{p.title}</h2>
+                      <h2 className="text-3xl md:text-4xl font-inter font-black text-white uppercase tracking-tighter">{p.title}</h2>
                       <div className="flex gap-6 mt-4 text-[10px] font-manrope uppercase tracking-widest text-white/60">
                           <span>{p.m2} m² Alan</span>
                           <span>Muğla / Menteşe</span>
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index 76cc029..f09822f 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -7,14 +7,14 @@ export function Footer() {
     <footer className="bg-[#0A0B0B] text-white py-24 px-6 md:px-24">
       <div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between gap-20">
         <div>
-          <div className="font-inter font-black text-4xl uppercase mb-8 tracking-tighter">
+          <div className="font-inter font-black text-3xl md:text-4xl uppercase mb-6 md:mb-8 tracking-tighter">
             UTKU <span className="text-[#FFBF00]">KIRKAN</span>
           </div>
           <p className="text-gray-500 max-w-sm font-manrope">
             Muğla genelinde modern mühendislik standartlarını estetik tasarım ile buluşturan küratörlüğünü üstlendiğimiz projelerle geleceği inşa ediyoruz.
           </p>
         </div>
-        <div className="grid grid-cols-2 gap-20">
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-12 sm:gap-20">
           <div className="space-y-6">
             <p className="label-editorial text-[#FFBF00]">Harita</p>
             <div className="text-sm font-manrope text-gray-400 space-y-2">
@@ -32,9 +32,9 @@ export function Footer() {
           </div>
         </div>
       </div>
-      <div className="max-w-7xl mx-auto mt-24 pt-12 border-t border-white/5 flex flex-col md:flex-row justify-between text-[10px] text-gray-600 tracking-widest uppercase">
-        <p>© 2024 UTKU KIRKAN ENGINEERING EXCELLENCE.</p>
-        <div className="flex gap-8">
+      <div className="max-w-7xl mx-auto mt-16 md:mt-24 pt-12 border-t border-white/5 flex flex-col md:flex-row justify-between text-[10px] text-gray-600 tracking-widest uppercase gap-8">
+        <p>© {new Date().getFullYear()} UTKU KIRKAN ENGINEERING EXCELLENCE.</p>
+        <div className="flex flex-wrap gap-x-8 gap-y-4">
           <span>Gizlilik Politikası</span>
           <span>KVKK Aydınlatma Metni</span>
         </div>
diff --git a/src/components/landing-page.tsx b/src/components/landing-page.tsx
index 1b1c02f..ddc1f6b 100644
--- a/src/components/landing-page.tsx
+++ b/src/components/landing-page.tsx
@@ -53,9 +53,9 @@ export function LandingPage({ projects }: { projects: Project[] }) {
             transition={{ duration: 1 }}
           >
             <p className="label-editorial text-[#FFBF00] mb-6">Muğla • Mühendislik & Müteahhitlik</p>
-            <h1 className="text-6xl md:text-9xl font-inter font-black text-white leading-[1.1] uppercase mb-8">
+            <h1 className="text-[clamp(2.5rem,10vw,8rem)] font-inter font-black text-white leading-[1.05] uppercase mb-8">
               Modern<br />
-              <span className="text-transparent border-t-2 border-b-2 border-white/20 inline-block py-4 my-2 font-bebas-neue tracking-normal">Mühendislik</span><br />
+              <span className="text-transparent border-t-2 border-b-2 border-white/20 inline-block py-2 md:py-4 my-2 font-bebas-neue tracking-normal">Mühendislik</span><br />
               Güçlü Yapılar
             </h1>
             <div className="flex flex-col sm:flex-row gap-6 mt-12">
@@ -79,9 +79,9 @@ export function LandingPage({ projects }: { projects: Project[] }) {
       <section id="hizmetler" className="py-32 bg-[#F9F9F9] px-6 md:px-24">
         <div className="max-w-7xl mx-auto">
           <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-24 items-start px-0">
-            <motion.div {...fadeInUp} className="lg:col-span-5 sticky top-32 z-10 bg-inherit">
+            <motion.div {...fadeInUp} className="lg:col-span-5 lg:sticky top-32 z-10 bg-inherit">
               <p className="label-editorial text-[#795900] mb-4">Uzmanlık Alanlarımız</p>
-              <h2 className="text-5xl md:text-6xl lg:text-7xl font-inter font-black uppercase leading-[1.1] mb-8 break-words">
+              <h2 className="text-5xl md:text-6xl lg:text-7xl font-inter font-black uppercase leading-[1.1] mb-6 md:mb-8 break-words">
                 Mimari<br />
                 <span className="bg-[#FFBF00] px-4 py-1 text-white inline-block mt-2">Mükemmeliyet</span>
               </h2>
@@ -140,7 +140,7 @@ export function LandingPage({ projects }: { projects: Project[] }) {
       <section id="projeler" className="py-32 bg-[#FFFFFF] px-6 md:px-24 overflow-hidden">
         <div className="max-w-7xl mx-auto">
           <motion.div {...fadeInUp} className="mb-20 flex flex-col md:flex-row justify-between items-end gap-10">
-            <h2 className="text-5xl md:text-9xl font-inter font-black uppercase leading-[0.9] tracking-tighter">
+            <h2 className="text-[clamp(3rem,8vw,8rem)] font-inter font-black uppercase leading-[0.9] tracking-tighter">
               PROJELER
             </h2>
             <div className="w-full md:w-1/3 h-px bg-gray-200 hidden md:block" />
@@ -205,14 +205,14 @@ export function LandingPage({ projects }: { projects: Project[] }) {
                 sizes="(max-width: 1024px) 100vw, 50vw"
               />
             </div>
-            <div className="absolute -bottom-10 -left-10 bg-[#FFBF00] p-12 text-[#1A1C1C]">
-               <span className="text-7xl font-inter font-black">10+</span>
-               <p className="label-editorial">Yıllık Güven</p>
+            <div className="absolute -bottom-6 -left-6 md:-bottom-10 md:-left-10 bg-[#FFBF00] p-8 md:p-12 text-[#1A1C1C] shadow-xl">
+               <span className="text-5xl md:text-7xl font-inter font-black">10+</span>
+               <p className="label-editorial text-xs md:text-base">Yıllık Güven</p>
             </div>
           </motion.div>
           <motion.div {...fadeInUp}>
             <p className="label-editorial text-[#795900] mb-8">Kurumsal Vizyon</p>
-            <h2 className="text-5xl md:text-7xl font-inter font-black uppercase leading-none mb-12">
+            <h2 className="text-4xl md:text-7xl font-inter font-black uppercase leading-none mb-8 md:mb-12">
               Disiplinli<br />
               İnşaat Kültürü
             </h2>
@@ -234,7 +234,7 @@ export function LandingPage({ projects }: { projects: Project[] }) {
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-32">
             <motion.div {...fadeInUp}>
               <p className="label-editorial text-[#FFBF00] mb-8">İletişim & Randevu</p>
-              <h2 className="text-5xl md:text-8xl font-inter font-black uppercase leading-[0.9] mb-12">
+              <h2 className="text-5xl md:text-8xl font-inter font-black uppercase leading-[0.9] mb-8 md:mb-12">
                 Projeyi<br />
                 Konuşalım
               </h2>
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 4a6b9f6..63cdcfa 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -1,21 +1,78 @@
 "use client";
 
-import { motion } from "framer-motion";
-import { ArrowUpRight } from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+import { ArrowUpRight, Menu, X } from "lucide-react";
+import { useState } from "react";
+import Link from "next/link";
 
 export function Navbar() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const navLinks = [
+    { name: "Hizmetler", href: "/#hizmetler" },
+    { name: "Projeler", href: "/projeler" },
+    { name: "Süreç", href: "/surec" },
+    { name: "Vizyon", href: "/#hakkimizda" },
+  ];
+
   return (
-    <nav className="fixed top-0 w-full z-50 glass-nav h-20 flex items-center px-6 md:px-12 justify-between">
-      <div className="font-inter font-black text-2xl tracking-tighter uppercase">
-        <a href="/">Utku <span className="text-[#795900]">Kırkan</span></a>
-      </div>
-      <div className="hidden md:flex items-center gap-10 label-editorial">
-        <a href="/#hizmetler" className="hover:text-[#795900] transition-colors">Hizmetler</a>
-        <a href="/projeler" className="hover:text-[#795900] transition-colors">Projeler</a>
-        <a href="/surec" className="hover:text-[#795900] transition-colors">Süreç</a>
-        <a href="/#hakkimizda" className="hover:text-[#795900] transition-colors">Vizyon</a>
-        <a href="/#iletisim" className="bg-[#1A1C1C] text-white px-6 py-2 hover:bg-[#795900] transition-all">İletişim</a>
-      </div>
-    </nav>
+    <>
+      <nav className="fixed top-0 w-full z-[100] glass-nav h-20 flex items-center px-6 md:px-12 justify-between">
+        <div className="font-inter font-black text-xl md:text-2xl tracking-tighter uppercase relative z-[101]">
+          <Link href="/">Utku <span className="text-[#795900]">Kırkan</span></Link>
+        </div>
+
+        {/* Desktop Menu */}
+        <div className="hidden md:flex items-center gap-10 label-editorial">
+          {navLinks.map((link) => (
+            <Link key={link.name} href={link.href} className="hover:text-[#795900] transition-colors">
+              {link.name}
+            </Link>
+          ))}
+          <Link href="/#iletisim" className="bg-[#1A1C1C] text-white px-6 py-2 hover:bg-[#795900] transition-all font-inter font-bold uppercase text-xs tracking-widest">
+            İletişim
+          </Link>
+        </div>
+
+        {/* Mobile Toggle */}
+        <button 
+          className="md:hidden relative z-[101] p-2 text-[#1A1C1C]"
+          onClick={() => setIsOpen(!isOpen)}
+          aria-label="Toggle Menu"
+        >
+          {isOpen ? <X size={28} /> : <Menu size={28} />}
+        </button>
+      </nav>
+
+      {/* Mobile Menu Overlay */}
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            initial={{ opacity: 0, y: -20 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -20 }}
+            className="fixed inset-0 z-[99] bg-white flex flex-col items-center justify-center gap-8 md:hidden"
+          >
+            {navLinks.map((link) => (
+              <Link 
+                key={link.name} 
+                href={link.href} 
+                onClick={() => setIsOpen(false)}
+                className="text-4xl font-inter font-black uppercase tracking-tighter hover:text-[#795900] transition-colors"
+              >
+                {link.name}
+              </Link>
+            ))}
+            <Link 
+              href="/#iletisim" 
+              onClick={() => setIsOpen(false)}
+              className="mt-4 text-4xl font-inter font-black uppercase tracking-tighter text-[#795900]"
+            >
+              İLETİŞİM
+            </Link>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </>
   );
 }