97 lines
3.4 KiB
TypeScript
97 lines
3.4 KiB
TypeScript
'use client'
|
|
|
|
import { useRef } from 'react'
|
|
import { useTranslations } from 'next-intl'
|
|
import { motion, useInView } from 'framer-motion'
|
|
import Image from 'next/image'
|
|
|
|
export default function AboutSection() {
|
|
const t = useTranslations('about')
|
|
const ref = useRef<HTMLDivElement>(null)
|
|
const isInView = useInView(ref, { once: true, margin: '-100px' })
|
|
|
|
const stats = [
|
|
{ label: t('stat1Label'), value: t('stat1Value') },
|
|
{ label: t('stat2Label'), value: t('stat2Value') },
|
|
{ label: t('stat3Label'), value: t('stat3Value') },
|
|
]
|
|
|
|
return (
|
|
<section id="proje" ref={ref} className="bg-vesta-dark py-24 md:py-32">
|
|
<div className="container mx-auto px-6">
|
|
<div className="grid md:grid-cols-2 gap-16 items-center">
|
|
{/* Sol: Görsel */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -40 }}
|
|
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
|
transition={{ duration: 0.9, ease: 'easeOut' }}
|
|
className="relative aspect-[4/5] rounded-2xl overflow-hidden"
|
|
>
|
|
<Image
|
|
src="https://images.unsplash.com/photo-1448375240586-882707db888b?w=800&q=80"
|
|
alt="Vesta Muğla - Orman"
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-vesta-dark/60 to-transparent" />
|
|
{/* Label */}
|
|
<div className="absolute bottom-6 left-6">
|
|
<span className="text-white/60 text-xs tracking-[0.3em] uppercase">
|
|
Emtisi İnşaat
|
|
</span>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Sağ: İçerik */}
|
|
<div>
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
|
transition={{ duration: 0.6, delay: 0.1 }}
|
|
className="text-vesta-earth text-xs tracking-[0.3em] uppercase mb-4"
|
|
>
|
|
{t('label')}
|
|
</motion.p>
|
|
|
|
<motion.h2
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
|
transition={{ duration: 0.7, delay: 0.2 }}
|
|
className="text-white text-3xl md:text-4xl font-serif font-light leading-snug mb-6"
|
|
>
|
|
{t('title')}
|
|
</motion.h2>
|
|
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
|
transition={{ duration: 0.7, delay: 0.3 }}
|
|
className="text-white/50 text-base leading-relaxed mb-12"
|
|
>
|
|
{t('desc')}
|
|
</motion.p>
|
|
|
|
{/* İstatistikler */}
|
|
<div className="grid grid-cols-3 gap-6">
|
|
{stats.map((stat, i) => (
|
|
<motion.div
|
|
key={stat.label}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
|
transition={{ duration: 0.6, delay: 0.4 + i * 0.1 }}
|
|
className="border-t border-white/10 pt-4"
|
|
>
|
|
<p className="text-white text-2xl md:text-3xl font-serif font-light">
|
|
{stat.value}
|
|
</p>
|
|
<p className="text-white/40 text-xs mt-1 tracking-wide">{stat.label}</p>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|