feat: update branding, SEO, slugs and social links for Fethiye location
This commit is contained in:
95
app/projects/[slug]/page.tsx
Normal file
95
app/projects/[slug]/page.tsx
Normal file
@@ -0,0 +1,95 @@
|
||||
'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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user