first commit

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