196 lines
12 KiB
TypeScript
196 lines
12 KiB
TypeScript
'use client'
|
|
|
|
import { useTranslations } from 'next-intl'
|
|
import { useEffect } from 'react'
|
|
|
|
export default function MenuPage() {
|
|
const t = useTranslations('menu')
|
|
|
|
useEffect(() => {
|
|
// Intersection Observer to highlight current menu category
|
|
const sections = document.querySelectorAll('section[id]');
|
|
const navLinks = document.querySelectorAll('a[href^="#"]');
|
|
|
|
const observerOptions = {
|
|
root: null,
|
|
threshold: 0.5,
|
|
rootMargin: '0px'
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
const id = entry.target.getAttribute('id');
|
|
navLinks.forEach(link => {
|
|
if (link.getAttribute('href') === `#${id}`) {
|
|
link.classList.add('text-tertiary', 'font-bold');
|
|
link.classList.remove('text-on-surface-variant');
|
|
} else {
|
|
link.classList.remove('text-tertiary', 'font-bold');
|
|
link.classList.add('text-on-surface-variant');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
sections.forEach(section => observer.observe(section));
|
|
|
|
// Subtle parallax effect on mouse move for cards
|
|
const handleMouseMove = (e: MouseEvent) => {
|
|
const cards = document.querySelectorAll('.copper-glow');
|
|
cards.forEach(card => {
|
|
const rect = card.getBoundingClientRect();
|
|
const cardX = rect.left + rect.width / 2;
|
|
const cardY = rect.top + rect.height / 2;
|
|
|
|
const angleX = (e.clientY - cardY) / 50;
|
|
const angleY = (cardX - e.clientX) / 50;
|
|
|
|
(card as HTMLElement).style.transform = `perspective(1000px) rotateX(${angleX}deg) rotateY(${angleY}deg)`;
|
|
});
|
|
};
|
|
|
|
document.addEventListener('mousemove', handleMouseMove);
|
|
return () => document.removeEventListener('mousemove', handleMouseMove);
|
|
}, [])
|
|
|
|
return (
|
|
<main className="relative">
|
|
{/* Hero Header */}
|
|
<section className="relative h-[614px] flex flex-col items-center justify-center text-center px-[var(--spacing-gutter)] overflow-hidden">
|
|
<div className="relative z-10 space-y-4">
|
|
<h1 className="font-display-lg text-display-lg-mobile md:text-display-lg italic">{t('title')}</h1>
|
|
<div className="w-32 h-px bg-tertiary mx-auto opacity-60"></div>
|
|
<p className="font-label-caps text-label-caps text-on-surface-variant tracking-[0.3em] uppercase">{t('subtitle')}</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Category Navigation (Sticky) */}
|
|
<div className="sticky top-[72px] z-40 bg-surface/80 backdrop-blur-xl border-b border-outline-variant/10">
|
|
<div className="max-w-[var(--spacing-container-max)] mx-auto px-[var(--spacing-gutter)] overflow-x-auto no-scrollbar">
|
|
<div className="flex justify-center gap-8 md:gap-16 py-4 whitespace-nowrap">
|
|
<a className="font-label-caps text-[10px] md:text-label-caps text-tertiary font-bold hover:text-tertiary transition-colors uppercase" href="#starters">{t('nav_starters')}</a>
|
|
<a className="font-label-caps text-[10px] md:text-label-caps text-on-surface-variant hover:text-tertiary transition-colors uppercase" href="#prime-cuts">{t('nav_prime_cuts')}</a>
|
|
<a className="font-label-caps text-[10px] md:text-label-caps text-on-surface-variant hover:text-tertiary transition-colors uppercase" href="#sides">{t('nav_sides')}</a>
|
|
<a className="font-label-caps text-[10px] md:text-label-caps text-on-surface-variant hover:text-tertiary transition-colors uppercase" href="#dessert">{t('nav_dessert')}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Menu Sections */}
|
|
<div className="max-w-[var(--spacing-container-max)] mx-auto px-[var(--spacing-gutter)] space-y-[var(--spacing-section-padding)] py-[var(--spacing-section-padding)]">
|
|
|
|
{/* Starters Section */}
|
|
<section className="scroll-mt-32" id="starters">
|
|
<div className="grid grid-cols-1 md:grid-cols-12 gap-[var(--spacing-gutter)] items-start">
|
|
<div className="md:col-span-4 sticky top-48">
|
|
<h2 className="font-headline-md text-headline-md mb-4 text-tertiary">{t('starters_title')}</h2>
|
|
<p className="font-body-md text-on-surface-variant leading-relaxed">{t('starters_desc')}</p>
|
|
<div className="mt-8 h-24 w-px bg-gradient-to-b from-tertiary to-transparent opacity-30 hidden md:block"></div>
|
|
</div>
|
|
<div className="md:col-span-8 space-y-12">
|
|
<div className="group border-b border-outline-variant/10 pb-8 hover:border-tertiary/30 transition-colors duration-500">
|
|
<div className="flex justify-between items-baseline mb-2">
|
|
<h3 className="font-headline-sm text-headline-sm group-hover:text-tertiary transition-colors">{t('starter1_title')}</h3>
|
|
<span className="font-label-caps text-label-caps text-tertiary">22</span>
|
|
</div>
|
|
<p className="font-body-md text-on-surface-variant">{t('starter1_desc')}</p>
|
|
</div>
|
|
<div className="group border-b border-outline-variant/10 pb-8 hover:border-tertiary/30 transition-colors duration-500">
|
|
<div className="flex justify-between items-baseline mb-2">
|
|
<h3 className="font-headline-sm text-headline-sm group-hover:text-tertiary transition-colors">{t('starter2_title')}</h3>
|
|
<span className="font-label-caps text-label-caps text-tertiary">34</span>
|
|
</div>
|
|
<p className="font-body-md text-on-surface-variant">{t('starter2_desc')}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Featured Highlight - Prime Cuts */}
|
|
<section className="scroll-mt-32" id="prime-cuts">
|
|
<div className="relative overflow-hidden rounded-lg aspect-[16/9] mb-16">
|
|
<img className="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBZQFwOXiMm8B7hPOumV-GiiGFbt3Pl5c6NEOUSC3JFlzzahLgcckvjpa46Q5Ro6XsUyQhroFuxT9OFJEAUt5EpHxEi-C4NXILyPUk-HfKRP2ljE5UAYHdVTAa3q7FP_Tfp0a7ZDvugWHsIjKJBLDDTOC2czJwnC5CvJGL_WYAjtnO5DiNQdQGYe_vDmgTbKnr07TgIu6KUjFnxNr5_3MyOA35vKePtjK51nR_IDbAkZu5GrxfQByM-CE8f8-lPoksDABh3Z2NQD83x" alt="Tomahawk" />
|
|
<div className="vignette-overlay-linear absolute inset-0 flex flex-col justify-end p-[var(--spacing-gutter)] md:p-12">
|
|
<div className="max-w-xl">
|
|
<span className="font-label-caps text-label-caps text-tertiary mb-4 block tracking-widest uppercase">{t('prime_cuts_tag')}</span>
|
|
<h2 className="font-display-lg text-display-lg-mobile md:text-headline-md text-white mb-4">{t('prime_cuts_title')}</h2>
|
|
<p className="font-body-lg text-on-surface-variant mb-6">{t('prime_cuts_desc')}</p>
|
|
<span className="font-label-caps text-label-caps text-tertiary border border-tertiary/40 px-6 py-2 inline-block">{t('mkt_price')}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[var(--spacing-gutter)]">
|
|
<div className="bg-surface-container-low p-8 copper-glow border border-outline-variant/20 hover:border-tertiary/40 transition-all duration-300">
|
|
<h3 className="font-headline-sm text-headline-sm mb-2">{t('cut1_title')}</h3>
|
|
<p className="font-body-md text-on-surface-variant mb-4">{t('cut1_desc')}</p>
|
|
<span className="font-label-caps text-label-caps text-tertiary">58</span>
|
|
</div>
|
|
<div className="bg-surface-container-low p-8 copper-glow border border-outline-variant/20 hover:border-tertiary/40 transition-all duration-300">
|
|
<h3 className="font-headline-sm text-headline-sm mb-2">{t('cut2_title')}</h3>
|
|
<p className="font-body-md text-on-surface-variant mb-4">{t('cut2_desc')}</p>
|
|
<span className="font-label-caps text-label-caps text-tertiary">145</span>
|
|
</div>
|
|
<div className="bg-surface-container-low p-8 copper-glow border border-outline-variant/20 hover:border-tertiary/40 transition-all duration-300">
|
|
<h3 className="font-headline-sm text-headline-sm mb-2">{t('cut3_title')}</h3>
|
|
<p className="font-body-md text-on-surface-variant mb-4">{t('cut3_desc')}</p>
|
|
<span className="font-label-caps text-label-caps text-tertiary">74</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Sides Section */}
|
|
<section className="scroll-mt-32" id="sides">
|
|
<div className="section-divider mb-16"></div>
|
|
<div className="text-center max-w-2xl mx-auto mb-16">
|
|
<h2 className="font-headline-md text-headline-md mb-4">{t('sides_title')}</h2>
|
|
<p className="font-body-md text-on-surface-variant">{t('sides_desc')}</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-16 gap-y-12">
|
|
<div className="flex justify-between items-start border-b border-outline-variant/10 pb-4">
|
|
<div>
|
|
<h4 className="font-label-caps text-label-caps uppercase tracking-wider mb-1">{t('side1_title')}</h4>
|
|
<p className="text-sm text-on-surface-variant">{t('side1_desc')}</p>
|
|
</div>
|
|
<span className="font-label-caps text-label-caps text-tertiary">18</span>
|
|
</div>
|
|
<div className="flex justify-between items-start border-b border-outline-variant/10 pb-4">
|
|
<div>
|
|
<h4 className="font-label-caps text-label-caps uppercase tracking-wider mb-1">{t('side2_title')}</h4>
|
|
<p className="text-sm text-on-surface-variant">{t('side2_desc')}</p>
|
|
</div>
|
|
<span className="font-label-caps text-label-caps text-tertiary">16</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Dessert Section */}
|
|
<section className="scroll-mt-32" id="dessert">
|
|
<div className="grid grid-cols-1 md:grid-cols-12 gap-[var(--spacing-gutter)] items-center">
|
|
<div className="md:col-span-7 order-2 md:order-1 space-y-12">
|
|
<div className="group border-l-2 border-tertiary/20 pl-8 pb-4 hover:border-tertiary transition-colors duration-500">
|
|
<h3 className="font-headline-sm text-headline-sm mb-2 group-hover:text-tertiary transition-colors">{t('dessert1_title')}</h3>
|
|
<p className="font-body-md text-on-surface-variant mb-2">{t('dessert1_desc')}</p>
|
|
<span className="font-label-caps text-label-caps text-tertiary">18</span>
|
|
</div>
|
|
<div className="group border-l-2 border-tertiary/20 pl-8 pb-4 hover:border-tertiary transition-colors duration-500">
|
|
<h3 className="font-headline-sm text-headline-sm mb-2 group-hover:text-tertiary transition-colors">{t('dessert2_title')}</h3>
|
|
<p className="font-body-md text-on-surface-variant mb-2">{t('dessert2_desc')}</p>
|
|
<span className="font-label-caps text-label-caps text-tertiary">16</span>
|
|
</div>
|
|
</div>
|
|
<div className="md:col-span-5 order-1 md:order-2 mb-8 md:mb-0">
|
|
<div className="relative group">
|
|
<div className="absolute -inset-4 bg-tertiary/10 blur-xl group-hover:bg-tertiary/20 transition-all duration-700"></div>
|
|
<img className="relative z-10 w-full h-80 object-cover rounded-lg" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBPy2xGbUE9MZqJC4F5ZVPD7fP5S1Eklhu3oZjiyREkC4_UyW4G5BxCOwOISwKzdsc3fVI-xIo_4DIV9frboEX0wEkj3mZvUKZBPXgB_I14udTZry1riWVcv1IrgaFtjN3GdtKy8SrIK03SCgZZ4kVzsBH-sxAsRpxBjgy8VU_w_-Ohc5n1x0yjyuNxrRWWM2PbFFA6mFv-4JV6qcV3cA9N-hd_TUVUsXGs9MGfQPNosGHEF_eiOd-Wecb6sNAUoiH_Rl0gl1l7IZLF" alt="Chocolate Fondant" />
|
|
<h2 className="font-headline-md text-headline-md mt-6 text-tertiary italic">{t('dessert_title')}</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
)
|
|
}
|