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,116 @@
+"use client";
+
+import { useTranslations } from 'next-intl';
+import { motion } from 'framer-motion';
+import { Utensils, Wine, Coffee, ArrowRight } from 'lucide-react';
+
+const CARDS = [
+  { id: 'seafood',   icon: Utensils, accent: '#FF5A36' },
+  { id: 'cocktails', icon: Wine,     accent: '#00BFA5' },
+  { id: 'breakfast', icon: Coffee,   accent: '#FFA827' },
+];
+
+export default function Dining() {
+  const t = useTranslations('Dining');
+  const menuUrl = process.env.NEXT_PUBLIC_MENU_URL || '#';
+
+  return (
+    <section
+      id="dining"
+      className="pt-20 pb-28 text-white relative overflow-hidden"
+      style={{ background: '#080D18' }}
+    >
+      {/* Background blobs */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <div
+          className="absolute bottom-0 left-1/4 w-[500px] h-[500px] rounded-full opacity-20"
+          style={{ background: 'radial-gradient(circle, #FF5A36 0%, transparent 70%)' }}
+        />
+        <div
+          className="absolute top-0 right-1/4 w-[400px] h-[400px] rounded-full opacity-15"
+          style={{ background: 'radial-gradient(circle, #00BFA5 0%, transparent 70%)' }}
+        />
+      </div>
+
+      <div className="container mx-auto px-6 lg:px-12 relative z-10">
+        <div className="text-center max-w-3xl mx-auto mb-16">
+          <motion.span
+            initial={{ opacity: 0, y: 10 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            className="text-xs tracking-[0.4em] uppercase font-black text-amber mb-4 block"
+          >
+            — Yeme &amp; İçme
+          </motion.span>
+
+          <motion.h2
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            className="font-heading text-5xl md:text-6xl font-black mb-6"
+          >
+            <span className="gradient-text">{t('title')}</span>
+          </motion.h2>
+
+          <motion.p
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ delay: 0.1 }}
+            className="text-lg text-white/50 mb-8"
+          >
+            {t('description')}
+          </motion.p>
+
+          <motion.a
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ delay: 0.2 }}
+            href={menuUrl}
+            target={menuUrl !== '#' ? '_blank' : '_self'}
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-2 px-8 py-3.5 rounded-full font-black text-sm text-midnight transition-all hover:scale-105"
+            style={{ background: 'linear-gradient(135deg, #FFA827, #FFD166)' }}
+          >
+            {t('view_menu')}
+            <ArrowRight size={15} />
+          </motion.a>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {CARDS.map(({ id, icon: Icon, accent }, index) => (
+            <motion.div
+              key={id}
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ delay: index * 0.1 + 0.2 }}
+              className="group relative p-8 rounded-3xl border border-white/10 hover:border-white/25 transition-all duration-300"
+              style={{ background: 'rgba(255,255,255,0.04)' }}
+            >
+              {/* Icon */}
+              <div
+                className="w-14 h-14 rounded-2xl mb-6 flex items-center justify-center"
+                style={{ background: `${accent}18`, color: accent }}
+              >
+                <Icon size={26} />
+              </div>
+
+              <h3 className="font-heading text-2xl font-black mb-3 text-white">
+                {t(`cards.${id}.title`)}
+              </h3>
+              <p className="text-white/45 text-sm leading-relaxed">{t(`cards.${id}.desc`)}</p>
+
+              {/* Bottom accent line on hover */}
+              <div
+                className="absolute bottom-0 left-8 right-8 h-[1px] opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-full"
+                style={{ background: `linear-gradient(90deg, transparent, ${accent}, transparent)` }}
+              />
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}