92 lines
3.8 KiB
TypeScript
92 lines
3.8 KiB
TypeScript
'use client'
|
||
|
||
import { useRef } from 'react'
|
||
import { useTranslations } from 'next-intl'
|
||
import { motion, useInView } from 'framer-motion'
|
||
import { Waves, GraduationCap, Building2, Heart, Plane, Landmark } from 'lucide-react'
|
||
|
||
const locationItems = [
|
||
{ key: 'beach' as const, itemsKey: 'beachItems' as const, icon: Waves },
|
||
{ key: 'education' as const, itemsKey: 'educationItems' as const, icon: GraduationCap },
|
||
{ key: 'city' as const, itemsKey: 'cityItems' as const, icon: Building2 },
|
||
{ key: 'health' as const, itemsKey: 'healthItems' as const, icon: Heart },
|
||
{ key: 'airport' as const, itemsKey: 'airportItems' as const, icon: Plane },
|
||
{ key: 'tourism' as const, itemsKey: 'tourismItems' as const, icon: Landmark },
|
||
]
|
||
|
||
export default function LocationSection() {
|
||
const t = useTranslations('location')
|
||
const ref = useRef<HTMLDivElement>(null)
|
||
const isInView = useInView(ref, { once: true, margin: '-80px' })
|
||
|
||
return (
|
||
<section id="lokasyon" className="bg-vesta-dark py-24 md:py-32">
|
||
<div ref={ref} className="container mx-auto px-6">
|
||
<div className="grid md:grid-cols-2 gap-16 items-start">
|
||
{/* Sol: Başlık + Grid */}
|
||
<div>
|
||
<motion.p
|
||
initial={{ opacity: 0, y: 15 }}
|
||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||
transition={{ duration: 0.5 }}
|
||
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.6, delay: 0.1 }}
|
||
className="text-white text-3xl md:text-4xl font-serif font-light leading-snug mb-12"
|
||
>
|
||
{t('title')}
|
||
</motion.h2>
|
||
|
||
<div className="grid grid-cols-1 gap-5">
|
||
{locationItems.map((item, i) => {
|
||
const Icon = item.icon
|
||
return (
|
||
<motion.div
|
||
key={item.key}
|
||
initial={{ opacity: 0, x: -20 }}
|
||
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
||
transition={{ duration: 0.5, delay: 0.15 + i * 0.08 }}
|
||
className="flex items-start gap-4 border-b border-white/8 pb-5"
|
||
>
|
||
<div className="w-9 h-9 rounded-full bg-vesta-forest/30 flex items-center justify-center shrink-0 mt-0.5">
|
||
<Icon className="w-4 h-4 text-vesta-earth" />
|
||
</div>
|
||
<div>
|
||
<p className="text-white/80 text-sm font-medium mb-1">{t(item.key)}</p>
|
||
<p className="text-white/40 text-xs leading-relaxed">{t(item.itemsKey)}</p>
|
||
</div>
|
||
</motion.div>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Sağ: Harita embed */}
|
||
<motion.div
|
||
initial={{ opacity: 0, x: 40 }}
|
||
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
className="rounded-2xl overflow-hidden aspect-square md:aspect-auto md:h-[600px] sticky top-24"
|
||
>
|
||
<iframe
|
||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d50536.60905254124!2d28.3200!3d37.2153!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14be5ce7c5a5ccdb%3A0x1e3eb12f3c0f3c0a!2sMu%C4%9Fla%2C%20T%C3%BCrkiye!5e1!3m2!1str!2str!4v1700000000000"
|
||
width="100%"
|
||
height="100%"
|
||
style={{ border: 0 }}
|
||
allowFullScreen
|
||
loading="lazy"
|
||
referrerPolicy="no-referrer-when-downgrade"
|
||
className="grayscale"
|
||
/>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|