117 lines
4.3 KiB
TypeScript
117 lines
4.3 KiB
TypeScript
"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 & İç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>
|
|
);
|
|
}
|