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

feat: complete responsive overhaul for all pages and components

Browse Source
This commit is contained in:
AyrisAI
2026-04-04 11:41:01 +03:00
parent add36c2619
commit d6f14e93c6
5 changed files with 92 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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="grid grid-cols-1 lg:grid-cols-12 gap-16 items-end 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-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} {project.title}
</h1> </h1>
</div> </div>
@@ -46,7 +46,7 @@ export default async function ProjectDetailPage({ params }: { params: Promise<{
</div> </div>
{/* Main Image */} {/* 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 <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}
@@ -134,7 +134,7 @@ export default async function ProjectDetailPage({ params }: { params: Promise<{
{/* CTA */} {/* CTA */}
<section className="bg-[#1A1C1C] p-16 md:p-24 text-center text-white"> <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> <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> <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> </section>
</div> </div>

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

@@ -13,7 +13,7 @@ export default async function ProjelerPage() {
<div className="max-w-7xl mx-auto"> <div className="max-w-7xl mx-auto">
<header className="mb-20"> <header className="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-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 PROJELER
</h1> </h1>
</header> </header>
@@ -23,7 +23,7 @@ export default async function ProjelerPage() {
<Link <Link
href={`/projeler/${p.id}`} href={`/projeler/${p.id}`}
key={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 <Image
src={p.images[0] || "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?q=80&w=2070"} 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 className="absolute bottom-12 left-12 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-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"> <div className="flex gap-6 mt-4 text-[10px] font-manrope uppercase tracking-widest text-white/60">
<span>{p.m2} m² Alan</span> <span>{p.m2} m² Alan</span>
<span>Muğla / Menteşe</span> <span>Muğla / Menteşe</span>

10
src/components/footer.tsx
View File

@@ -7,14 +7,14 @@ export function Footer() {
<footer className="bg-[#0A0B0B] text-white py-24 px-6 md:px-24"> <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 className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between gap-20">
<div> <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> UTKU <span className="text-[#FFBF00]">KIRKAN</span>
</div> </div>
<p className="text-gray-500 max-w-sm font-manrope"> <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. 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> </p>
</div> </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"> <div className="space-y-6">
<p className="label-editorial text-[#FFBF00]">Harita</p> <p className="label-editorial text-[#FFBF00]">Harita</p>
<div className="text-sm font-manrope text-gray-400 space-y-2"> <div className="text-sm font-manrope text-gray-400 space-y-2">
@@ -32,9 +32,9 @@ export function Footer() {
</div> </div>
</div> </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"> <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>© 2024 UTKU KIRKAN ENGINEERING EXCELLENCE.</p> <p>© {new Date().getFullYear()} UTKU KIRKAN ENGINEERING EXCELLENCE.</p>
<div className="flex gap-8"> <div className="flex flex-wrap gap-x-8 gap-y-4">
<span>Gizlilik Politikası</span> <span>Gizlilik Politikası</span>
<span>KVKK Aydınlatma Metni</span> <span>KVKK Aydınlatma Metni</span>
</div> </div>

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

@@ -53,9 +53,9 @@ export function LandingPage({ projects }: { projects: Project[] }) {
transition={{ duration: 1 }} transition={{ duration: 1 }}
> >
<p className="label-editorial text-[#FFBF00] mb-6">Muğla • Mühendislik & Müteahhitlik</p> <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 /> 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 Güçlü Yapılar
</h1> </h1>
<div className="flex flex-col sm:flex-row gap-6 mt-12"> <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"> <section id="hizmetler" className="py-32 bg-[#F9F9F9] px-6 md: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-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> <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 /> Mimari<br />
<span className="bg-[#FFBF00] px-4 py-1 text-white inline-block mt-2">Mükemmeliyet</span> <span className="bg-[#FFBF00] px-4 py-1 text-white inline-block mt-2">Mükemmeliyet</span>
</h2> </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"> <section id="projeler" className="py-32 bg-[#FFFFFF] px-6 md: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-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 PROJELER
</h2> </h2>
<div className="w-full md:w-1/3 h-px bg-gray-200 hidden md:block" /> <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" sizes="(max-width: 1024px) 100vw, 50vw"
/> />
</div> </div>
<div className="absolute -bottom-10 -left-10 bg-[#FFBF00] p-12 text-[#1A1C1C]"> <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-7xl font-inter font-black">10+</span> <span className="text-5xl md:text-7xl font-inter font-black">10+</span>
<p className="label-editorial">Yıllık Güven</p> <p className="label-editorial text-xs md:text-base">Yıllık Güven</p>
</div> </div>
</motion.div> </motion.div>
<motion.div {...fadeInUp}> <motion.div {...fadeInUp}>
<p className="label-editorial text-[#795900] mb-8">Kurumsal Vizyon</p> <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 /> Disiplinli<br />
İnşaat Kültürü İnşaat Kültürü
</h2> </h2>
@@ -234,7 +234,7 @@ export function LandingPage({ projects }: { projects: Project[] }) {
<div className="grid grid-cols-1 lg:grid-cols-2 gap-32"> <div className="grid grid-cols-1 lg:grid-cols-2 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-12"> <h2 className="text-5xl md:text-8xl font-inter font-black uppercase leading-[0.9] mb-8 md:mb-12">
Projeyi<br /> Projeyi<br />
Konuşalım Konuşalım
</h2> </h2>

77
src/components/navbar.tsx
View File

@@ -1,21 +1,78 @@
"use client"; "use client";
import { motion } from "framer-motion"; import { motion, AnimatePresence } from "framer-motion";
import { ArrowUpRight } from "lucide-react"; import { ArrowUpRight, Menu, X } from "lucide-react";
import { useState } from "react";
import Link from "next/link";
export function Navbar() { 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 ( 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"> <nav className="fixed top-0 w-full z-[100] glass-nav h-20 flex items-center px-6 md:px-12 justify-between">
<a href="/">Utku <span className="text-[#795900]">Kırkan</span></a> <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> </div>
{/* Desktop Menu */}
<div className="hidden md:flex items-center gap-10 label-editorial"> <div className="hidden md:flex items-center gap-10 label-editorial">
<a href="/#hizmetler" className="hover:text-[#795900] transition-colors">Hizmetler</a> {navLinks.map((link) => (
<a href="/projeler" className="hover:text-[#795900] transition-colors">Projeler</a> <Link key={link.name} href={link.href} className="hover:text-[#795900] transition-colors">
<a href="/surec" className="hover:text-[#795900] transition-colors">Süreç</a> {link.name}
<a href="/#hakkimizda" className="hover:text-[#795900] transition-colors">Vizyon</a> </Link>
<a href="/#iletisim" className="bg-[#1A1C1C] text-white px-6 py-2 hover:bg-[#795900] transition-all">İletişim</a> ))}
<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> </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> </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>
</>
); );
} }