96 lines
3.5 KiB
TypeScript
96 lines
3.5 KiB
TypeScript
'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>
|
||
)
|
||
}
|