first commit

2026-07-30 12:15:17 +03:00
commit 1f29eead28
48 changed files with 10666 additions and 0 deletions
@@ -0,0 +1,91 @@
+'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>
+  )
+}