mstfyldzandClaude Sonnet 4.6
bc8bd747ff
- Body: radial gradient orbs (teal + green) + dot grid overlay + grain - Header: dark mesh gradient, shimmer logo animation, animated gradient tagline, frosted glass lang-switcher pill - CategorySection: glow-ring emoji badge, gradient top line, frosted glass card container, teal/gold decorative divider - MenuItemRow: gradient emoji circle, magic-card CSS hover spotlight, price pill with green gradient border - BottomTabBar: blur/glass tabbar, active emoji glow + scale + pill bg - Page: welcome strip with teal gradient border, hero fade from header Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
92 lines
2.6 KiB
TypeScript
92 lines
2.6 KiB
TypeScript
import { notFound } from 'next/navigation'
|
||
import { getDictionary, hasLocale } from './dictionaries'
|
||
import { categories } from '@/data/menu'
|
||
import Header from '@/components/Header'
|
||
import CategorySection from '@/components/CategorySection'
|
||
import BottomTabBar from '@/components/BottomTabBar'
|
||
import WhatsAppButton from '@/components/WhatsAppButton'
|
||
|
||
export default async function MenuPage({
|
||
params,
|
||
}: {
|
||
params: Promise<{ lang: string }>
|
||
}) {
|
||
const { lang } = await params
|
||
if (!hasLocale(lang)) notFound()
|
||
|
||
const dict = await getDictionary(lang)
|
||
|
||
return (
|
||
<>
|
||
<Header dict={dict} />
|
||
|
||
<main
|
||
className="relative min-h-screen"
|
||
style={{
|
||
paddingTop: 'var(--header-h)',
|
||
paddingBottom: 'calc(var(--tabbar-h) + 8px)',
|
||
}}
|
||
>
|
||
{/* Hero gradient fade from header */}
|
||
<div
|
||
aria-hidden="true"
|
||
className="h-8 w-full"
|
||
style={{
|
||
background:
|
||
'linear-gradient(180deg, rgba(31,20,10,0.12) 0%, transparent 100%)',
|
||
}}
|
||
/>
|
||
|
||
{/* Decorative welcome strip */}
|
||
<div className="px-4 pt-2 pb-1">
|
||
<div
|
||
className="rounded-2xl px-4 py-3 flex items-center gap-3"
|
||
style={{
|
||
background:
|
||
'linear-gradient(135deg, rgba(74,175,168,0.10) 0%, rgba(200,168,80,0.07) 100%)',
|
||
border: '1px solid rgba(74,175,168,0.18)',
|
||
}}
|
||
>
|
||
<span className="text-2xl">🌊</span>
|
||
<div>
|
||
<p
|
||
className="font-display italic text-coffee font-semibold leading-tight"
|
||
style={{ fontSize: '0.95rem' }}
|
||
>
|
||
Kozmos Beach & More
|
||
</p>
|
||
<p
|
||
className="font-body text-muted leading-snug mt-0.5"
|
||
style={{ fontSize: '0.68rem' }}
|
||
>
|
||
{lang === 'tr'
|
||
? 'Taze malzemeler · Ege lezzetleri · Deniz kenarı'
|
||
: 'Fresh ingredients · Aegean flavours · Seaside'}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Category sections */}
|
||
{categories.map((category) => (
|
||
<CategorySection
|
||
key={category.id}
|
||
category={category}
|
||
lang={lang}
|
||
currency={dict.currency}
|
||
/>
|
||
))}
|
||
|
||
<div className="h-4" aria-hidden="true" />
|
||
</main>
|
||
|
||
<WhatsAppButton
|
||
message={dict.whatsapp.message}
|
||
label={dict.whatsapp.label}
|
||
/>
|
||
|
||
<BottomTabBar categories={categories} lang={lang} />
|
||
</>
|
||
)
|
||
}
|