first commit

2026-06-03 03:59:46 +03:00
parent 5882fc12c1
commit bba389b513
30 changed files with 3153 additions and 149 deletions
@@ -0,0 +1,139 @@
+"use client";
+
+import { useTranslations } from 'next-intl';
+import { motion } from 'framer-motion';
+import Image from 'next/image';
+import { Sun } from 'lucide-react';
+
+export default function Beach() {
+  const t = useTranslations('Beach');
+
+  const openWhatsApp = () => {
+    const phone = process.env.NEXT_PUBLIC_WHATSAPP_NUMBER || '905000000000';
+    window.open(
+      `https://wa.me/${phone}?text=Merhaba,%20şezlong%20rezervasyonu%20yaptırmak%20istiyorum.`,
+      '_blank',
+    );
+  };
+
+  const stats = [
+    { value: '∞', label: 'Şezlong' },
+    { value: '7/7', label: 'Açık' },
+    { value: 'VIP', label: 'Cabana' },
+  ];
+
+  return (
+    <section id="beach" className="pt-28 pb-36 bg-sand text-midnight relative overflow-hidden">
+      <div className="container mx-auto px-6 lg:px-12">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+
+          {/* Left masonry photos */}
+          <div className="grid grid-cols-2 gap-3">
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              className="space-y-3"
+            >
+              <div className="relative h-64 rounded-2xl overflow-hidden shadow-md">
+                <Image
+                  src="https://picsum.photos/400/600?random=10"
+                  alt="Plaj"
+                  fill
+                  sizes="(max-width: 1024px) 50vw, 25vw"
+                  className="object-cover hover:scale-105 transition-transform duration-700"
+                />
+              </div>
+              <div className="relative h-48 rounded-2xl overflow-hidden shadow-md">
+                <Image
+                  src="https://picsum.photos/400/400?random=11"
+                  alt="Şezlong"
+                  fill
+                  sizes="(max-width: 1024px) 50vw, 25vw"
+                  className="object-cover hover:scale-105 transition-transform duration-700"
+                />
+              </div>
+            </motion.div>
+
+            <motion.div
+              initial={{ opacity: 0, y: 40 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ delay: 0.15 }}
+              className="space-y-3 pt-8"
+            >
+              <div className="relative h-48 rounded-2xl overflow-hidden shadow-md">
+                <Image
+                  src="https://picsum.photos/400/400?random=12"
+                  alt="Deniz"
+                  fill
+                  sizes="(max-width: 1024px) 50vw, 25vw"
+                  className="object-cover hover:scale-105 transition-transform duration-700"
+                />
+              </div>
+              <div className="relative h-64 rounded-2xl overflow-hidden shadow-md">
+                <Image
+                  src="https://picsum.photos/400/600?random=13"
+                  alt="Koy"
+                  fill
+                  sizes="(max-width: 1024px) 50vw, 25vw"
+                  className="object-cover hover:scale-105 transition-transform duration-700"
+                />
+              </div>
+            </motion.div>
+          </div>
+
+          {/* Right content */}
+          <motion.div
+            initial={{ opacity: 0, x: 30 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.7 }}
+            className="space-y-7"
+          >
+            <div className="inline-flex items-center gap-2 font-black text-amber tracking-wider uppercase text-sm">
+              <Sun size={18} />
+              Beach Club
+            </div>
+
+            <h2 className="font-heading text-5xl md:text-6xl font-black text-midnight leading-tight">
+              {t('title')}
+            </h2>
+
+            <p className="text-lg text-midnight/60 leading-relaxed">{t('description')}</p>
+
+            {/* Stats */}
+            <div className="grid grid-cols-3 gap-4 py-6 border-y border-sandy">
+              {stats.map(({ value, label }) => (
+                <div key={label} className="text-center">
+                  <div className="font-heading text-2xl font-black gradient-text-warm">{value}</div>
+                  <div className="text-[11px] text-midnight/45 mt-1 uppercase tracking-wider">{label}</div>
+                </div>
+              ))}
+            </div>
+
+            {/* Info & CTA */}
+            <div className="p-6 rounded-2xl bg-sandy/50 border border-sandy">
+              <p className="text-midnight/70 text-sm font-medium mb-5">{t('reservation_info')}</p>
+              <button
+                onClick={openWhatsApp}
+                className="px-8 py-3.5 rounded-full font-black text-sm text-midnight transition-all duration-300 hover:scale-105 hover:shadow-lg"
+                style={{ background: 'linear-gradient(135deg, #FFA827, #FFD166)' }}
+              >
+                {t('book_lounger')}
+              </button>
+            </div>
+          </motion.div>
+
+        </div>
+      </div>
+
+      {/* Wave → midnight */}
+      <div className="absolute bottom-0 left-0 w-full leading-none pointer-events-none">
+        <svg viewBox="0 0 1440 64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" className="w-full h-16">
+          <path d="M0,32 C240,64 480,0 720,32 C960,64 1200,0 1440,32 L1440,64 L0,64 Z" fill="#080D18" />
+        </svg>
+      </div>
+    </section>
+  );
+}