ayrisdev/utkukirkan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: optimize responsive spacing and grid gaps across all pages

Browse Source
This commit is contained in:
AyrisAI
2026-04-04 11:50:11 +03:00
parent d6f14e93c6
commit 677aa383cd
3 changed files with 24 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/app/(main)/projeler/[id]/page.tsx
View File

@@ -15,7 +15,7 @@ export default async function ProjectDetailPage({ params }: { params: Promise<{
} }
return ( 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"> <div className="max-w-7xl mx-auto">
{/* Back Link */} {/* 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"> <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> </Link>
{/* Hero Header */} {/* 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"> <div className="lg:col-span-8">
<p className="label-editorial text-[#795900] mb-4">{project.status}</p> <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"> <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> </h1>
</div> </div>
<div className="lg:col-span-4 pb-4"> <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> <div>
<p className="label-editorial text-gray-400">Konum</p> <p className="label-editorial text-gray-400">Konum</p>
<p className="text-xl font-bold uppercase">Menteşe, Muğla</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> </div>
{/* Main Image */} {/* 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 <Image
src={project.images[0] || "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?q=80&w=2070"} src={project.images[0] || "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?q=80&w=2070"}
alt={project.title} alt={project.title}
@@ -58,15 +58,15 @@ export default async function ProjectDetailPage({ params }: { params: Promise<{
</div> </div>
{/* Info Grid */} {/* 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="lg:col-span-4 space-y-12">
<div className="grid grid-cols-2 gap-8"> <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} /> <Maximize2 className="text-[#FFBF00] mb-4" size={24} />
<p className="label-editorial text-gray-400">Toplam Alan</p> <p className="label-editorial text-gray-400">Toplam Alan</p>
<p className="text-3xl font-black">{project.m2} m²</p> <p className="text-3xl font-black">{project.m2} m²</p>
</div> </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} /> <Layers className="text-[#1A1C1C] mb-4" size={24} />
<p className="label-editorial text-gray-400">Oda Sayısı</p> <p className="label-editorial text-gray-400">Oda Sayısı</p>
<p className="text-3xl font-black">{project.rooms}</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> </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"> <div className="relative aspect-square overflow-hidden bg-gray-100">
<Image <Image
src={project.images[1] || project.images[0]} src={project.images[1] || project.images[0]}
@@ -132,7 +132,7 @@ export default async function ProjectDetailPage({ params }: { params: Promise<{
</div> </div>
{/* CTA */} {/* 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> <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> <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> <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>

8
src/app/(main)/projeler/page.tsx
View File

@@ -9,16 +9,16 @@ export default async function ProjelerPage() {
}); });
return ( 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"> <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> <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]"> <h1 className="text-[clamp(3rem,10vw,8rem)] font-inter font-black uppercase tracking-tighter leading-[0.9]">
PROJELER PROJELER
</h1> </h1>
</header> </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) => ( {projects.map((p, i) => (
<Link <Link
href={`/projeler/${p.id}`} 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 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>
<div className="label-editorial text-[#FFBF00] mb-2">{p.status}</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> <h2 className="text-3xl md:text-4xl font-inter font-black text-white uppercase tracking-tighter">{p.title}</h2>

22
src/components/landing-page.tsx
View File

@@ -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 className="absolute inset-0 bg-gradient-to-r from-[#1A1C1C] via-[#1A1C1C]/40 to-transparent" />
</div> </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 <motion.div
initial={{ opacity: 0, x: -50 }} initial={{ opacity: 0, x: -50 }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, x: 0 }}
@@ -76,9 +76,9 @@ export function LandingPage({ projects }: { projects: Project[] }) {
</section> </section>
{/* Services Section - Architectural Excellence */} {/* 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="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"> <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> <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"> <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} key={i}
{...fadeInUp} {...fadeInUp}
transition={{ delay: i * 0.2 }} 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 flex-col md:flex-row justify-between items-start md:items-center gap-8 relative z-10">
<div className="flex gap-8 items-start"> <div className="flex gap-8 items-start">
@@ -137,7 +137,7 @@ export function LandingPage({ projects }: { projects: Project[] }) {
</section> </section>
{/* Projects Section - Horizontal Monolith */} {/* 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"> <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"> <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"> <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> <p className="label-editorial text-gray-400">2023 - 2024 Koleksiyonu</p>
</motion.div> </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) => ( {projects.length > 0 ? projects.map((p, i) => (
<motion.div <motion.div
key={p.id} key={p.id}
@@ -193,8 +193,8 @@ export function LandingPage({ projects }: { projects: Project[] }) {
</section> </section>
{/* About Section */} {/* About Section */}
<section id="hakkimizda" className="py-32 bg-[#F3F3F3] px-6 md:px-24"> <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-24 items-center"> <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"> <motion.div {...fadeInUp} className="relative aspect-square bg-[#FFFFFF] p-4 shadow-2xl">
<div className="relative w-full h-full overflow-hidden"> <div className="relative w-full h-full overflow-hidden">
<Image <Image
@@ -229,9 +229,9 @@ export function LandingPage({ projects }: { projects: Project[] }) {
</section> </section>
{/* Contact 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="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}> <motion.div {...fadeInUp}>
<p className="label-editorial text-[#FFBF00] mb-8">İletişim & Randevu</p> <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"> <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> </div>
</motion.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> <h3 className="text-3xl font-inter font-black uppercase mb-12">Ücretsiz Teklif Formu</h3>
<form className="space-y-8"> <form className="space-y-8">
<div className="space-y-2 group"> <div className="space-y-2 group">