feat: integrate Cloudinary image upload, Instagram Feed, and fix Next.js warnings

2026-06-09 21:28:45 +03:00
parent 2b3392dcb1
commit a4ad9344a0
52 changed files with 4300 additions and 263 deletions
@@ -0,0 +1,84 @@
+"use client";
+
+import { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Utensils, Globe, X } from 'lucide-react';
+import Link from 'next/link';
+
+export default function WelcomePopup() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    // Sadece ilk ziyarette göstermek için sessionStorage kullanımı:
+    const hasSeenPopup = sessionStorage.getItem('kozmos-welcome-popup');
+    if (!hasSeenPopup) {
+      // Sayfa yüklendikten kısa süre sonra açılsın
+      const timer = setTimeout(() => setIsOpen(true), 600);
+      return () => clearTimeout(timer);
+    }
+  }, []);
+
+  const handleClose = () => {
+    setIsOpen(false);
+    sessionStorage.setItem('kozmos-welcome-popup', 'true');
+  };
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          className="fixed inset-0 z-[100] flex items-center justify-center bg-charcoal/80 backdrop-blur-md p-4"
+        >
+          <motion.div
+            initial={{ scale: 0.95, opacity: 0, y: 20 }}
+            animate={{ scale: 1, opacity: 1, y: 0 }}
+            exit={{ scale: 0.95, opacity: 0, y: 20 }}
+            className="bg-cream rounded-3xl shadow-2xl max-w-sm w-full p-8 relative overflow-hidden"
+          >
+            {/* Dekoratif Arka Plan */}
+            <div className="absolute -top-24 -right-24 w-48 h-48 bg-sand/30 rounded-full blur-3xl"></div>
+            
+            <button 
+              onClick={handleClose}
+              className="absolute top-4 right-4 text-charcoal/50 hover:text-charcoal transition-colors z-20"
+              aria-label="Kapat"
+            >
+              <X className="w-6 h-6" />
+            </button>
+
+            <div className="relative z-10 text-center space-y-6">
+              <div className="space-y-2">
+                <h2 className="text-3xl font-serif text-charcoal">Kozmos'a<br/>Hoş Geldiniz</h2>
+                <p className="text-charcoal/70">Nereye gitmek istersiniz?</p>
+              </div>
+
+              <div className="flex flex-col gap-4 pt-4">
+                {/* Menü Linki - QR menü için buradaki href değerini kendi menü linkinle değiştirebilirsin */}
+                <Link
+                  href="/menu" 
+                  onClick={handleClose}
+                  className="group relative flex items-center justify-center gap-3 w-full bg-turquoise text-white py-4 rounded-xl hover:bg-turquoise/90 transition-all font-medium overflow-hidden shadow-lg shadow-turquoise/20"
+                >
+                  <div className="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300 ease-out"></div>
+                  <Utensils className="w-5 h-5 relative z-10" />
+                  <span className="relative z-10">Menüye Git</span>
+                </Link>
+                
+                <button
+                  onClick={handleClose}
+                  className="group flex items-center justify-center gap-3 w-full bg-charcoal text-cream py-4 rounded-xl hover:bg-charcoal/90 transition-colors font-medium shadow-lg"
+                >
+                  <Globe className="w-5 h-5" />
+                  <span>Siteye Git</span>
+                </button>
+              </div>
+            </div>
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}