first commit

2026-07-30 12:15:17 +03:00
commit 1f29eead28
48 changed files with 10666 additions and 0 deletions
@@ -0,0 +1,120 @@
+'use client'
+
+import { useRef } from 'react'
+import { useTranslations } from 'next-intl'
+import { motion, useInView } from 'framer-motion'
+import Image from 'next/image'
+import { BedDouble, Bath, Maximize2 } from 'lucide-react'
+import { MOCK_UNITS } from '@/lib/mock'
+
+export default function UnitsSection() {
+  const t = useTranslations('units')
+  const ref = useRef<HTMLDivElement>(null)
+  const isInView = useInView(ref, { once: true, margin: '-80px' })
+
+  return (
+    <section id="daireler" className="bg-vesta-cream py-24 md:py-32">
+      <div ref={ref} className="container mx-auto px-6">
+        {/* Başlık */}
+        <div className="text-center mb-16">
+          <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-3"
+          >
+            {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-vesta-dark text-3xl md:text-5xl font-serif font-light"
+          >
+            {t('title')}
+          </motion.h2>
+        </div>
+
+        {/* Daire listesi */}
+        <div className="grid md:grid-cols-2 gap-8">
+          {MOCK_UNITS.map((unit, i) => (
+            <motion.div
+              key={unit.id}
+              initial={{ opacity: 0, y: 30 }}
+              animate={isInView ? { opacity: 1, y: 0 } : {}}
+              transition={{ duration: 0.6, delay: 0.1 * i }}
+              className="group bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-shadow duration-400"
+            >
+              {/* Görsel */}
+              <div className="relative aspect-video overflow-hidden">
+                <Image
+                  src={unit.imageUrl || 'https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?w=800'}
+                  alt={unit.typeTr}
+                  fill
+                  className="object-cover transition-transform duration-700 group-hover:scale-105"
+                />
+                {/* Müsaitlik badge */}
+                <div className={`absolute top-4 right-4 px-3 py-1 rounded-full text-xs font-medium ${
+                  unit.available
+                    ? 'bg-vesta-forest text-white'
+                    : 'bg-gray-400 text-white'
+                }`}>
+                  {unit.available ? t('available') : t('notAvailable')}
+                </div>
+              </div>
+
+              {/* İçerik */}
+              <div className="p-6">
+                <div className="flex items-start justify-between mb-3">
+                  <h3 className="text-vesta-dark text-xl font-serif font-medium">
+                    {unit.typeTr}
+                  </h3>
+                  <span className="text-vesta-earth text-2xl font-serif font-light">
+                    {unit.size} <span className="text-sm">{t('sqm')}</span>
+                  </span>
+                </div>
+
+                <p className="text-vesta-dark/60 text-sm leading-relaxed mb-5 line-clamp-2">
+                  {unit.descTr}
+                </p>
+
+                {/* Özellikler */}
+                <div className="flex items-center gap-5 pt-4 border-t border-gray-100">
+                  <div className="flex items-center gap-1.5 text-vesta-dark/50 text-sm">
+                    <BedDouble className="w-4 h-4" />
+                    <span>{unit.rooms} {t('rooms')}</span>
+                  </div>
+                  <div className="flex items-center gap-1.5 text-vesta-dark/50 text-sm">
+                    <Bath className="w-4 h-4" />
+                    <span>{unit.bathrooms} {t('bath')}</span>
+                  </div>
+                  <div className="flex items-center gap-1.5 text-vesta-dark/50 text-sm">
+                    <Maximize2 className="w-4 h-4" />
+                    <span>{unit.size} {t('sqm')}</span>
+                  </div>
+                </div>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+
+        {/* Katalog CTA */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.6, delay: 0.5 }}
+          className="text-center mt-12"
+        >
+          <a
+            href="https://indd.adobe.com/view/6b17e969-ae44-481c-861f-684806e8c3b2"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-2 bg-vesta-dark text-white px-8 py-4 rounded-full text-sm tracking-wide hover:bg-vesta-forest transition-colors duration-300"
+          >
+            Proje Kataloğunu İncele
+          </a>
+        </motion.div>
+      </div>
+    </section>
+  )
+}