85 lines
3.4 KiB
TypeScript
85 lines
3.4 KiB
TypeScript
"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>
|
||
);
|
||
}
|