From 677aa383cd347e5473ed96ce977c39d17d576006 Mon Sep 17 00:00:00 2001
From: AyrisAI <ayris@ayris.tech>
Date: Sat, 4 Apr 2026 11:50:11 +0300
Subject: [PATCH] style: optimize responsive spacing and grid gaps across all
 pages

---
 src/app/(main)/projeler/[id]/page.tsx | 18 +++++++++---------
 src/app/(main)/projeler/page.tsx      |  8 ++++----
 src/components/landing-page.tsx       | 22 +++++++++++-----------
 3 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/app/(main)/projeler/[id]/page.tsx b/src/app/(main)/projeler/[id]/page.tsx
index daa46ba..2d868c9 100644
--- a/src/app/(main)/projeler/[id]/page.tsx
+++ b/src/app/(main)/projeler/[id]/page.tsx
@@ -15,7 +15,7 @@ export default async function ProjectDetailPage({ params }: { params: Promise<{
   }
 
   return (
-    <main className="min-h-screen bg-[#F9F9F9] pt-32 pb-24 px-6 md:px-24">
+    <main className="min-h-screen bg-[#F9F9F9] pt-24 md:pt-32 pb-16 md:pb-24 px-5 md:px-12 lg:px-24">
       <div className="max-w-7xl mx-auto">
         {/* Back Link */}
         <Link href="/projeler" className="group inline-flex items-center gap-3 label-editorial text-gray-400 hover:text-[#1A1C1C] transition-colors mb-12">
@@ -24,7 +24,7 @@ export default async function ProjectDetailPage({ params }: { params: Promise<{
         </Link>
 
         {/* Hero Header */}
-        <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-end mb-24">
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 md:gap-16 items-end mb-16 md:mb-24">
           <div className="lg:col-span-8">
              <p className="label-editorial text-[#795900] mb-4">{project.status}</p>
              <h1 className="text-[clamp(3rem,8vw,8rem)] font-inter font-black uppercase tracking-tighter leading-[0.9] break-words">
@@ -32,7 +32,7 @@ export default async function ProjectDetailPage({ params }: { params: Promise<{
              </h1>
           </div>
           <div className="lg:col-span-4 pb-4">
-             <div className="flex flex-col gap-6 border-l-2 border-[#1A1C1C] pl-8">
+             <div className="flex flex-col gap-6 border-l-2 border-[#1A1C1C] pl-6 md:pl-8">
                <div>
                   <p className="label-editorial text-gray-400">Konum</p>
                   <p className="text-xl font-bold uppercase">Menteşe, Muğla</p>
@@ -46,7 +46,7 @@ export default async function ProjectDetailPage({ params }: { params: Promise<{
         </div>
 
         {/* Main Image */}
-        <div className="relative aspect-[16/9] md:aspect-[21/9] w-full overflow-hidden bg-gray-200 mb-16 md:mb-24 shadow-2xl">
+        <div className="relative aspect-[16/9] md:aspect-[21/9] w-full overflow-hidden bg-gray-200 mb-12 md:mb-24 shadow-2xl">
            <Image 
             src={project.images[0] || "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?q=80&w=2070"} 
             alt={project.title} 
@@ -58,15 +58,15 @@ export default async function ProjectDetailPage({ params }: { params: Promise<{
         </div>
 
         {/* Info Grid */}
-        <div className="grid grid-cols-1 lg:grid-cols-12 gap-24 mb-32">
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 md:gap-24 mb-20 md:mb-32">
           <div className="lg:col-span-4 space-y-12">
              <div className="grid grid-cols-2 gap-8">
-               <div className="bg-white p-8 border-b-4 border-[#FFBF00] shadow-xl">
+               <div className="bg-white p-6 md:p-8 border-b-4 border-[#FFBF00] shadow-xl">
                   <Maximize2 className="text-[#FFBF00] mb-4" size={24} />
                   <p className="label-editorial text-gray-400">Toplam Alan</p>
                   <p className="text-3xl font-black">{project.m2} m²</p>
                </div>
-               <div className="bg-white p-8 border-b-4 border-[#1A1C1C] shadow-xl">
+               <div className="bg-white p-6 md:p-8 border-b-4 border-[#1A1C1C] shadow-xl">
                   <Layers className="text-[#1A1C1C] mb-4" size={24} />
                   <p className="label-editorial text-gray-400">Oda Sayısı</p>
                   <p className="text-3xl font-black">{project.rooms}</p>
@@ -107,7 +107,7 @@ export default async function ProjectDetailPage({ params }: { params: Promise<{
                    </div>
                 </div>
                 
-                <div className="grid grid-cols-2 gap-8 pt-12 border-t border-gray-100">
+                <div className="grid grid-cols-2 gap-4 md:gap-8 pt-8 md:pt-12 border-t border-gray-100">
                    <div className="relative aspect-square overflow-hidden bg-gray-100">
                       <Image 
                         src={project.images[1] || project.images[0]} 
@@ -132,7 +132,7 @@ export default async function ProjectDetailPage({ params }: { params: Promise<{
         </div>
 
         {/* CTA */}
-        <section className="bg-[#1A1C1C] p-16 md:p-24 text-center text-white">
+        <section className="bg-[#1A1C1C] p-10 md:p-16 lg:p-24 text-center text-white">
            <p className="label-editorial text-[#FFBF00] mb-8">Sıradaki Proje Sizinki Olabilir</p>
            <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>
diff --git a/src/app/(main)/projeler/page.tsx b/src/app/(main)/projeler/page.tsx
index b0d2ac4..279a77e 100644
--- a/src/app/(main)/projeler/page.tsx
+++ b/src/app/(main)/projeler/page.tsx
@@ -9,16 +9,16 @@ export default async function ProjelerPage() {
   });
 
   return (
-    <main className="pt-32 pb-24 px-6 md:px-24 bg-[#F3F3F3] min-h-screen">
+    <main className="pt-24 md:pt-32 pb-16 md:pb-24 px-5 md:px-12 lg:px-24 bg-[#F3F3F3] min-h-screen">
       <div className="max-w-7xl mx-auto">
-        <header className="mb-20">
+        <header className="mb-12 md:mb-20">
           <p className="label-editorial text-[#795900] mb-4">Portfolyo Koleksiyonu</p>
           <h1 className="text-[clamp(3rem,10vw,8rem)] font-inter font-black uppercase tracking-tighter leading-[0.9]">
             PROJELER
           </h1>
         </header>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-1 px-1 bg-white/5 shadow-2xl">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-4 px-1 bg-white/5 shadow-2xl">
            {projects.map((p, i) => (
               <Link 
                 href={`/projeler/${p.id}`} 
@@ -34,7 +34,7 @@ export default async function ProjelerPage() {
                 />
                 <div className="absolute inset-0 bg-gradient-to-t from-[#1A1C1C] via-transparent to-transparent opacity-60 group-hover:opacity-90 transition-opacity" />
                 
-                <div className="absolute bottom-12 left-12 right-12 flex justify-between items-end">
+                <div className="absolute bottom-6 left-6 right-6 md:bottom-12 md:left-12 md:right-12 flex justify-between items-end">
                   <div>
                       <div className="label-editorial text-[#FFBF00] mb-2">{p.status}</div>
                       <h2 className="text-3xl md:text-4xl font-inter font-black text-white uppercase tracking-tighter">{p.title}</h2>
diff --git a/src/components/landing-page.tsx b/src/components/landing-page.tsx
index ddc1f6b..98c38c9 100644
--- a/src/components/landing-page.tsx
+++ b/src/components/landing-page.tsx
@@ -46,7 +46,7 @@ export function LandingPage({ projects }: { projects: Project[] }) {
           <div className="absolute inset-0 bg-gradient-to-r from-[#1A1C1C] via-[#1A1C1C]/40 to-transparent" />
         </div>
         
-        <div className="relative z-10 px-6 md:px-24 w-full max-w-7xl mx-auto">
+        <div className="relative z-10 px-5 md:px-12 lg:px-24 w-full max-w-7xl mx-auto">
           <motion.div
             initial={{ opacity: 0, x: -50 }}
             animate={{ opacity: 1, x: 0 }}
@@ -76,9 +76,9 @@ export function LandingPage({ projects }: { projects: Project[] }) {
       </section>
 
       {/* Services Section - Architectural Excellence */}
-      <section id="hizmetler" className="py-32 bg-[#F9F9F9] px-6 md:px-24">
+      <section id="hizmetler" className="py-20 md:py-32 bg-[#F9F9F9] px-5 md:px-12 lg: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">
+          <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-24 items-start px-0">
             <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-6 md:mb-8 break-words">
@@ -115,7 +115,7 @@ export function LandingPage({ projects }: { projects: Project[] }) {
                   key={i} 
                   {...fadeInUp} 
                   transition={{ delay: i * 0.2 }}
-                  className="group relative bg-[#F3F3F3] p-12 overflow-hidden hover:bg-[#FFFFFF] transition-all duration-500"
+                  className="group relative bg-[#F3F3F3] p-8 md:p-12 overflow-hidden hover:bg-[#FFFFFF] transition-all duration-500"
                 >
                   <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-8 relative z-10">
                     <div className="flex gap-8 items-start">
@@ -137,7 +137,7 @@ export function LandingPage({ projects }: { projects: Project[] }) {
       </section>
 
       {/* Projects Section - Horizontal Monolith */}
-      <section id="projeler" className="py-32 bg-[#FFFFFF] px-6 md:px-24 overflow-hidden">
+      <section id="projeler" className="py-20 md:py-32 bg-[#FFFFFF] px-5 md:px-12 lg: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-[clamp(3rem,8vw,8rem)] font-inter font-black uppercase leading-[0.9] tracking-tighter">
@@ -147,7 +147,7 @@ export function LandingPage({ projects }: { projects: Project[] }) {
             <p className="label-editorial text-gray-400">2023 - 2024 Koleksiyonu</p>
           </motion.div>
 
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-12">
             {projects.length > 0 ? projects.map((p, i) => (
               <motion.div 
                 key={p.id} 
@@ -193,8 +193,8 @@ export function LandingPage({ projects }: { projects: Project[] }) {
       </section>
 
       {/* About Section */}
-      <section id="hakkimizda" className="py-32 bg-[#F3F3F3] px-6 md:px-24">
-        <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-24 items-center">
+      <section id="hakkimizda" className="py-20 md:py-32 bg-[#F3F3F3] px-5 md:px-12 lg:px-24">
+        <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12 md:gap-24 items-center">
           <motion.div {...fadeInUp} className="relative aspect-square bg-[#FFFFFF] p-4 shadow-2xl">
             <div className="relative w-full h-full overflow-hidden">
                <Image 
@@ -229,9 +229,9 @@ export function LandingPage({ projects }: { projects: Project[] }) {
       </section>
 
       {/* Contact Section */}
-      <section id="iletisim" className="py-32 bg-[#1A1C1C] text-white px-6 md:px-24">
+      <section id="iletisim" className="py-20 md:py-32 bg-[#1A1C1C] text-white px-5 md:px-12 lg:px-24">
         <div className="max-w-7xl mx-auto">
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-32">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 md: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-8 md:mb-12">
@@ -260,7 +260,7 @@ export function LandingPage({ projects }: { projects: Project[] }) {
               </div>
             </motion.div>
 
-            <motion.div {...fadeInUp} className="bg-[#FFFFFF] p-12 md:p-16 text-[#1A1C1C]">
+            <motion.div {...fadeInUp} className="bg-[#FFFFFF] p-8 md:p-12 lg:p-16 text-[#1A1C1C]">
               <h3 className="text-3xl font-inter font-black uppercase mb-12">Ücretsiz Teklif Formu</h3>
               <form className="space-y-8">
                 <div className="space-y-2 group">