109 lines
4.7 KiB
TypeScript
109 lines
4.7 KiB
TypeScript
'use client'
|
||
|
||
import { motion } from 'framer-motion'
|
||
import Image from 'next/image'
|
||
import Link from 'next/link'
|
||
|
||
export default function ProjectDetailClient({ project }: { project: any }) {
|
||
return (
|
||
<main className="min-h-screen bg-white selection:bg-black selection:text-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>
|
||
|
||
{/* Hero Section */}
|
||
<div className="flex flex-col md:flex-row min-h-screen">
|
||
<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 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
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">
|
||
{project.description || `Bu proje, modern mimari prensipleri ve fonksiyonel tasarım anlayışıyla hayata geçirilmiştir. Fethiye merkezli A.N.T Architecture vizyonuyla şekillenen bu yapı, çevresel dokuyla uyumlu bir estetik sunar.`}
|
||
</p>
|
||
</motion.div>
|
||
|
||
<div className="mt-12">
|
||
<div className="text-[10px] font-bold text-black uppercase tracking-[0.2em] mb-2 opacity-40">Kategori</div>
|
||
<div className="text-sm font-bold text-black uppercase tracking-widest">{project.category || 'Architecture'}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="w-full md:w-2/3 h-[70vh] md:h-screen relative overflow-hidden bg-zinc-100">
|
||
<motion.div
|
||
initial={{ scale: 1.1, opacity: 0 }}
|
||
animate={{ scale: 1, opacity: 1 }}
|
||
transition={{ duration: 1.5, ease: [0.76, 0, 0.24, 1] }}
|
||
className="w-full h-full"
|
||
>
|
||
<Image
|
||
src={project.image}
|
||
alt={project.title}
|
||
fill
|
||
sizes="(max-width: 768px) 100vw, 80vw"
|
||
priority
|
||
className="object-cover"
|
||
/>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Gallery Section */}
|
||
{project.gallery && project.gallery.length > 0 && (
|
||
<section className="py-20 md:py-40 px-6 md:px-10 bg-[#f9f9f9]">
|
||
<div className="max-w-[1400px] mx-auto">
|
||
<div className="mb-20">
|
||
<h2 className="text-[10px] font-bold text-black/30 uppercase tracking-[0.5em] mb-4">PROJE GÖRSELLERİ</h2>
|
||
<div className="h-[1px] w-full bg-black/5" />
|
||
</div>
|
||
|
||
<div className="columns-1 md:columns-2 gap-10 space-y-10">
|
||
{project.gallery.map((img: string, i: number) => (
|
||
<motion.div
|
||
key={i}
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true, margin: "-100px" }}
|
||
transition={{ duration: 0.8, delay: i * 0.1 }}
|
||
className="relative group overflow-hidden bg-white"
|
||
>
|
||
<Image
|
||
src={img}
|
||
alt={`${project.title} Gallery ${i}`}
|
||
width={1200}
|
||
height={800}
|
||
className="w-full h-auto object-cover grayscale group-hover:grayscale-0 transition-all duration-1000"
|
||
/>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{/* Back Link Footer */}
|
||
<footer className="py-20 flex flex-col items-center justify-center border-t border-black/5">
|
||
<Link href="/projects" className="group flex flex-col items-center gap-4">
|
||
<span className="text-[10px] font-bold uppercase tracking-[0.5em] text-black/40 group-hover:text-black transition-colors">SIRADAKİ PROJE</span>
|
||
<div className="w-px h-12 bg-black/10 group-hover:h-20 transition-all duration-700" />
|
||
</Link>
|
||
</footer>
|
||
</main>
|
||
)
|
||
}
|