Build Kozmos QR menu site — full implementation
Next.js 16 App Router, TR/EN i18n via [lang] routing and proxy.ts, Tailwind v4, minimal list menu style, sticky bottom tab bar with Intersection Observer, PWA manifest, WhatsApp fixed button. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
mstfyldz
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
f879d65cfc
commit
718e0a6228
@@ -0,0 +1,16 @@
|
||||
import 'server-only'
|
||||
|
||||
const dictionaries = {
|
||||
tr: () => import('../../dictionaries/tr.json').then((m) => m.default),
|
||||
en: () => import('../../dictionaries/en.json').then((m) => m.default),
|
||||
}
|
||||
|
||||
export type Locale = keyof typeof dictionaries
|
||||
|
||||
export function hasLocale(locale: string): locale is Locale {
|
||||
return locale in dictionaries
|
||||
}
|
||||
|
||||
export async function getDictionary(locale: Locale) {
|
||||
return dictionaries[locale]()
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
import type { Metadata } from 'next'
|
||||
import { notFound } from 'next/navigation'
|
||||
import { getDictionary, hasLocale } from './dictionaries'
|
||||
|
||||
export async function generateStaticParams() {
|
||||
return [{ lang: 'tr' }, { lang: 'en' }]
|
||||
}
|
||||
|
||||
export async function generateMetadata({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ lang: string }>
|
||||
}): Promise<Metadata> {
|
||||
const { lang } = await params
|
||||
if (!hasLocale(lang)) return {}
|
||||
const dict = await getDictionary(lang)
|
||||
return {
|
||||
title: dict.meta.title,
|
||||
description: dict.meta.description,
|
||||
manifest: '/manifest.webmanifest',
|
||||
appleWebApp: {
|
||||
capable: true,
|
||||
statusBarStyle: 'black-translucent',
|
||||
title: 'Kozmos',
|
||||
},
|
||||
other: {
|
||||
'theme-color': '#3D2B1F',
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export default async function LangLayout({
|
||||
children,
|
||||
params,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
params: Promise<{ lang: string }>
|
||||
}) {
|
||||
const { lang } = await params
|
||||
if (!hasLocale(lang)) notFound()
|
||||
return <>{children}</>
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
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="bg-cream min-h-screen"
|
||||
style={{
|
||||
paddingTop: 'var(--header-h)',
|
||||
paddingBottom: 'calc(var(--tabbar-h) + 8px)',
|
||||
}}
|
||||
>
|
||||
{/* Subtle top fade from header */}
|
||||
<div
|
||||
className="h-4 bg-gradient-to-b from-beige/30 to-transparent"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
{categories.map((category) => (
|
||||
<CategorySection
|
||||
key={category.id}
|
||||
category={category}
|
||||
lang={lang}
|
||||
currency={dict.currency}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Bottom spacing */}
|
||||
<div className="h-6" aria-hidden="true" />
|
||||
</main>
|
||||
|
||||
<WhatsAppButton
|
||||
message={dict.whatsapp.message}
|
||||
label={dict.whatsapp.label}
|
||||
/>
|
||||
|
||||
<BottomTabBar categories={categories} lang={lang} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
+88
-14
@@ -1,26 +1,100 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
--cream: #F5F0E8;
|
||||
--beige: #E8DCC8;
|
||||
--beige-dark: #D4C8B0;
|
||||
--teal: #4AAFA8;
|
||||
--teal-dark: #3D9A94;
|
||||
--green: #5C8A5C;
|
||||
--coffee: #3D2B1F;
|
||||
--coffee-light: #5A3D2D;
|
||||
--muted: #8A7265;
|
||||
--header-h: 64px;
|
||||
--tabbar-h: 68px;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
--color-cream: var(--cream);
|
||||
--color-beige: var(--beige);
|
||||
--color-beige-dark: var(--beige-dark);
|
||||
--color-teal: var(--teal);
|
||||
--color-teal-dark: var(--teal-dark);
|
||||
--color-green: var(--green);
|
||||
--color-coffee: var(--coffee);
|
||||
--color-coffee-light: var(--coffee-light);
|
||||
--color-muted: var(--muted);
|
||||
--font-display: var(--font-playfair);
|
||||
--font-body: var(--font-inter);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Grain texture overlay */
|
||||
body::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 9998;
|
||||
opacity: 0.028;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E");
|
||||
background-repeat: repeat;
|
||||
background-size: 256px 256px;
|
||||
}
|
||||
|
||||
/* Category scroll offset for sticky header */
|
||||
.category-section {
|
||||
scroll-margin-top: calc(var(--header-h) + 12px);
|
||||
}
|
||||
|
||||
/* Menu item fade-up animation */
|
||||
@keyframes fadeUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
.menu-item-row {
|
||||
animation: fadeUp 0.35s ease both;
|
||||
animation-delay: calc(var(--item-index, 0) * 55ms);
|
||||
}
|
||||
|
||||
/* Tab bar active indicator */
|
||||
.tab-active-dot {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background: var(--teal);
|
||||
margin: 0 auto;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
/* Smooth tab color transition */
|
||||
.tab-item {
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
/* WhatsApp pulse ring */
|
||||
@keyframes pulse-ring {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 12px rgba(37, 211, 102, 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.wa-btn {
|
||||
animation: pulse-ring 2.5s ease-out infinite;
|
||||
}
|
||||
|
||||
+25
-21
@@ -1,33 +1,37 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import type { Metadata } from 'next'
|
||||
import { Playfair_Display, Inter } from 'next/font/google'
|
||||
import './globals.css'
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
const playfair = Playfair_Display({
|
||||
subsets: ['latin'],
|
||||
variable: '--font-playfair',
|
||||
display: 'swap',
|
||||
style: ['normal', 'italic'],
|
||||
weight: ['400', '500', '600', '700'],
|
||||
})
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
const inter = Inter({
|
||||
subsets: ['latin'],
|
||||
variable: '--font-inter',
|
||||
display: 'swap',
|
||||
})
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
};
|
||||
title: 'Kozmos Beach & More',
|
||||
description: 'Kozmos Beach & More dijital menüsü',
|
||||
}
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<html
|
||||
lang="en"
|
||||
className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
|
||||
lang="tr"
|
||||
className={`${playfair.variable} ${inter.variable}`}
|
||||
>
|
||||
<body className="min-h-full flex flex-col">{children}</body>
|
||||
<body className="bg-cream font-body antialiased">{children}</body>
|
||||
</html>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
import type { MetadataRoute } from 'next'
|
||||
|
||||
export default function manifest(): MetadataRoute.Manifest {
|
||||
return {
|
||||
name: 'Kozmos Beach & More',
|
||||
short_name: 'Kozmos',
|
||||
description: 'Kozmos Beach & More dijital menüsü',
|
||||
start_url: '/tr',
|
||||
display: 'standalone',
|
||||
orientation: 'portrait',
|
||||
background_color: '#F5F0E8',
|
||||
theme_color: '#3D2B1F',
|
||||
icons: [
|
||||
{
|
||||
src: '/icons/icon-192.png',
|
||||
sizes: '192x192',
|
||||
type: 'image/png',
|
||||
},
|
||||
{
|
||||
src: '/icons/icon-512.png',
|
||||
sizes: '512x512',
|
||||
type: 'image/png',
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
+3
-63
@@ -1,65 +1,5 @@
|
||||
import Image from "next/image";
|
||||
import { redirect } from 'next/navigation'
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
||||
<main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={100}
|
||||
height={20}
|
||||
priority
|
||||
/>
|
||||
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
|
||||
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
|
||||
To get started, edit the page.tsx file.
|
||||
</h1>
|
||||
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
|
||||
Looking for a starting point or more instructions? Head over to{" "}
|
||||
<a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Templates
|
||||
</a>{" "}
|
||||
or the{" "}
|
||||
<a
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Learning
|
||||
</a>{" "}
|
||||
center.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Deploy Now
|
||||
</a>
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Documentation
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
export default function RootPage() {
|
||||
redirect('/tr')
|
||||
}
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import type { Category } from '@/data/menu'
|
||||
|
||||
type Props = {
|
||||
categories: Category[]
|
||||
lang: string
|
||||
}
|
||||
|
||||
export default function BottomTabBar({ categories, lang }: Props) {
|
||||
const l = lang as 'tr' | 'en'
|
||||
const [activeId, setActiveId] = useState<string>(categories[0]?.id ?? '')
|
||||
|
||||
useEffect(() => {
|
||||
const observers: IntersectionObserver[] = []
|
||||
|
||||
categories.forEach((cat) => {
|
||||
const el = document.getElementById(cat.id)
|
||||
if (!el) return
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
setActiveId(cat.id)
|
||||
}
|
||||
})
|
||||
},
|
||||
{ rootMargin: '-20% 0px -75% 0px', threshold: 0 }
|
||||
)
|
||||
|
||||
observer.observe(el)
|
||||
observers.push(observer)
|
||||
})
|
||||
|
||||
return () => {
|
||||
observers.forEach((obs) => obs.disconnect())
|
||||
}
|
||||
}, [categories])
|
||||
|
||||
return (
|
||||
<nav
|
||||
className="fixed bottom-0 left-0 right-0 z-40 bg-coffee border-t border-coffee-light"
|
||||
style={{ height: 'var(--tabbar-h)' }}
|
||||
>
|
||||
<div className="flex items-start justify-around pt-2.5 h-full">
|
||||
{categories.map((cat) => {
|
||||
const isActive = activeId === cat.id
|
||||
return (
|
||||
<a
|
||||
key={cat.id}
|
||||
href={`#${cat.id}`}
|
||||
className={`tab-item flex flex-col items-center gap-0.5 flex-1 py-0.5 ${
|
||||
isActive ? 'text-teal' : 'text-cream/35'
|
||||
}`}
|
||||
>
|
||||
<span className="text-lg leading-none">{cat.emoji}</span>
|
||||
<span className="font-body text-[0.55rem] font-medium leading-none tracking-wide text-center px-0.5 truncate w-full text-center">
|
||||
{cat.label[l]}
|
||||
</span>
|
||||
<div
|
||||
className="tab-active-dot"
|
||||
style={{ opacity: isActive ? 1 : 0 }}
|
||||
/>
|
||||
</a>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
import type { Category } from '@/data/menu'
|
||||
import MenuItemRow from './MenuItemRow'
|
||||
|
||||
type Props = {
|
||||
category: Category
|
||||
lang: string
|
||||
currency: string
|
||||
}
|
||||
|
||||
export default function CategorySection({ category, lang, currency }: Props) {
|
||||
const l = lang as 'tr' | 'en'
|
||||
return (
|
||||
<section id={category.id} className="category-section px-4 pt-8 pb-2">
|
||||
{/* Category heading */}
|
||||
<div className="flex items-center gap-2.5 mb-4">
|
||||
<span className="text-xl">{category.emoji}</span>
|
||||
<h2 className="font-display text-coffee text-lg font-semibold italic">
|
||||
{category.label[l]}
|
||||
</h2>
|
||||
{/* Decorative line */}
|
||||
<div className="flex-1 h-px bg-beige-dark" />
|
||||
</div>
|
||||
|
||||
{/* Items */}
|
||||
<div>
|
||||
{category.items.map((item, i) => (
|
||||
<MenuItemRow
|
||||
key={item.id}
|
||||
item={item}
|
||||
lang={lang}
|
||||
currency={currency}
|
||||
index={i}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import Link from 'next/link'
|
||||
|
||||
type Dict = {
|
||||
header: { tagline: string }
|
||||
langSwitch: { current: string; other: string; otherHref: string }
|
||||
}
|
||||
|
||||
export default function Header({ dict }: { dict: Dict }) {
|
||||
return (
|
||||
<header
|
||||
className="fixed top-0 left-0 right-0 z-40 bg-coffee"
|
||||
style={{ height: 'var(--header-h)' }}
|
||||
>
|
||||
{/* Thin teal accent line at bottom */}
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-teal opacity-40" />
|
||||
|
||||
<div className="flex items-center justify-between h-full px-5">
|
||||
{/* Logo */}
|
||||
<div className="flex flex-col leading-none">
|
||||
<span className="font-display text-cream text-xl font-semibold tracking-[0.18em] uppercase">
|
||||
KOZMOS
|
||||
</span>
|
||||
<span className="font-body text-teal text-[0.6rem] font-medium tracking-[0.22em] uppercase mt-0.5">
|
||||
{dict.header.tagline}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Language switcher */}
|
||||
<Link
|
||||
href={dict.langSwitch.otherHref}
|
||||
className="flex items-center gap-1.5 group"
|
||||
aria-label={`Switch to ${dict.langSwitch.other}`}
|
||||
>
|
||||
<span className="font-body text-xs font-semibold text-cream/40 tracking-wider">
|
||||
{dict.langSwitch.current}
|
||||
</span>
|
||||
<span className="font-body text-xs text-cream/20">·</span>
|
||||
<span className="font-body text-xs font-semibold text-teal tracking-wider group-hover:text-cream transition-colors duration-200">
|
||||
{dict.langSwitch.other}
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
import type { MenuItem } from '@/data/menu'
|
||||
|
||||
type Props = {
|
||||
item: MenuItem
|
||||
lang: string
|
||||
currency: string
|
||||
index: number
|
||||
}
|
||||
|
||||
export default function MenuItemRow({ item, lang, currency, index }: Props) {
|
||||
const l = lang as 'tr' | 'en'
|
||||
return (
|
||||
<div
|
||||
className="menu-item-row flex items-center gap-3.5 py-3.5 border-b border-dashed border-beige last:border-0"
|
||||
style={{ '--item-index': index } as React.CSSProperties}
|
||||
>
|
||||
{/* Emoji circle */}
|
||||
<div className="w-10 h-10 rounded-full bg-beige flex items-center justify-center flex-shrink-0 text-lg">
|
||||
{item.emoji}
|
||||
</div>
|
||||
|
||||
{/* Text */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-display text-coffee text-sm font-semibold leading-snug">
|
||||
{item.name[l]}
|
||||
</p>
|
||||
<p className="font-body text-muted text-xs leading-relaxed mt-0.5 line-clamp-2">
|
||||
{item.description[l]}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Price */}
|
||||
<span className="font-body text-green text-sm font-semibold flex-shrink-0 pl-2">
|
||||
{currency}{item.price}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import { WHATSAPP_NUMBER } from '@/data/menu'
|
||||
|
||||
type Props = {
|
||||
message: string
|
||||
label: string
|
||||
}
|
||||
|
||||
export default function WhatsAppButton({ message, label }: Props) {
|
||||
const href = `https://wa.me/${WHATSAPP_NUMBER}?text=${encodeURIComponent(message)}`
|
||||
|
||||
return (
|
||||
<a
|
||||
href={href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label={label}
|
||||
className="wa-btn fixed right-4 z-50 w-14 h-14 rounded-full bg-[#25D366] flex items-center justify-center shadow-lg"
|
||||
style={{ bottom: 'calc(var(--tabbar-h) + 16px)' }}
|
||||
>
|
||||
{/* WhatsApp icon */}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="white"
|
||||
className="w-7 h-7"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 0 0-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z" />
|
||||
</svg>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
+253
@@ -0,0 +1,253 @@
|
||||
export type LocalizedString = { tr: string; en: string }
|
||||
|
||||
export type MenuItem = {
|
||||
id: string
|
||||
emoji: string
|
||||
name: LocalizedString
|
||||
description: LocalizedString
|
||||
price: number
|
||||
highlight?: boolean
|
||||
}
|
||||
|
||||
export type Category = {
|
||||
id: string
|
||||
emoji: string
|
||||
label: LocalizedString
|
||||
items: MenuItem[]
|
||||
}
|
||||
|
||||
export const WHATSAPP_NUMBER = '905XXXXXXXXXX'
|
||||
|
||||
export const categories: Category[] = [
|
||||
{
|
||||
id: 'starters',
|
||||
emoji: '🥗',
|
||||
label: { tr: 'Başlangıçlar', en: 'Starters' },
|
||||
items: [
|
||||
{
|
||||
id: 's1',
|
||||
emoji: '🥗',
|
||||
name: { tr: 'Akdeniz Salatası', en: 'Mediterranean Salad' },
|
||||
description: { tr: 'Domates, salatalık, zeytin, hellim peyniri', en: 'Tomato, cucumber, olives, halloumi' },
|
||||
price: 120,
|
||||
},
|
||||
{
|
||||
id: 's2',
|
||||
emoji: '🧀',
|
||||
name: { tr: 'Hellim Izgara', en: 'Grilled Halloumi' },
|
||||
description: { tr: 'Zeytinyağı, taze nane, limon', en: 'Olive oil, fresh mint, lemon' },
|
||||
price: 95,
|
||||
},
|
||||
{
|
||||
id: 's3',
|
||||
emoji: '🫙',
|
||||
name: { tr: 'Zeytinyağlı Meze Tabağı', en: 'Meze Platter' },
|
||||
description: { tr: 'Günlük hazır mezelerin seçimi', en: 'Daily selection of mezze' },
|
||||
price: 145,
|
||||
},
|
||||
{
|
||||
id: 's4',
|
||||
emoji: '🍆',
|
||||
name: { tr: 'Patlıcan Ezmesi', en: 'Smoked Eggplant Dip' },
|
||||
description: { tr: 'Közlenmiş patlıcan, sarımsak, zeytinyağı', en: 'Roasted eggplant, garlic, olive oil' },
|
||||
price: 85,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'mains',
|
||||
emoji: '🍽️',
|
||||
label: { tr: 'Ana Yemekler', en: 'Main Courses' },
|
||||
items: [
|
||||
{
|
||||
id: 'm1',
|
||||
emoji: '🐟',
|
||||
name: { tr: 'Balık Izgara', en: 'Grilled Fish' },
|
||||
description: { tr: 'Günlük taze balık, sebze garnitürü', en: 'Daily fresh catch, vegetable garnish' },
|
||||
price: 285,
|
||||
},
|
||||
{
|
||||
id: 'm2',
|
||||
emoji: '🐠',
|
||||
name: { tr: 'Levrek Buğulama', en: 'Steamed Sea Bass' },
|
||||
description: { tr: 'Sebzeli buğulama, zeytinyağlı sos', en: 'Steamed with vegetables, olive oil sauce' },
|
||||
price: 295,
|
||||
},
|
||||
{
|
||||
id: 'm3',
|
||||
emoji: '🐙',
|
||||
name: { tr: 'Ahtapot Izgara', en: 'Grilled Octopus' },
|
||||
description: { tr: 'Kekikli marinad, kapari sosu', en: 'Thyme marinade, caper sauce' },
|
||||
price: 320,
|
||||
},
|
||||
{
|
||||
id: 'm4',
|
||||
emoji: '🍢',
|
||||
name: { tr: 'Tavuk Şiş', en: 'Chicken Skewers' },
|
||||
description: { tr: 'Baharatlı tavuk, közlenmiş biber', en: 'Spiced chicken, roasted peppers' },
|
||||
price: 175,
|
||||
},
|
||||
{
|
||||
id: 'm5',
|
||||
emoji: '🥘',
|
||||
name: { tr: 'Vegetaryen Güveç', en: 'Vegetarian Stew' },
|
||||
description: { tr: 'Mevsim sebzeler, nohut, domates sos', en: 'Seasonal vegetables, chickpeas, tomato sauce' },
|
||||
price: 155,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'pizzas',
|
||||
emoji: '🍕',
|
||||
label: { tr: 'Pizzalar', en: 'Pizzas' },
|
||||
items: [
|
||||
{
|
||||
id: 'p1',
|
||||
emoji: '🍕',
|
||||
name: { tr: 'Margherita', en: 'Margherita' },
|
||||
description: { tr: 'San marzano domates, bufala mozarella, fesleğen', en: 'San marzano tomatoes, buffalo mozzarella, basil' },
|
||||
price: 165,
|
||||
},
|
||||
{
|
||||
id: 'p2',
|
||||
emoji: '🍕',
|
||||
name: { tr: 'Karışık Pizza', en: 'Mixed Pizza' },
|
||||
description: { tr: 'Salam, mantar, biber, mozarella', en: 'Salami, mushroom, pepper, mozzarella' },
|
||||
price: 185,
|
||||
},
|
||||
{
|
||||
id: 'p3',
|
||||
emoji: '🦐',
|
||||
name: { tr: 'Deniz Ürünleri', en: 'Seafood Pizza' },
|
||||
description: { tr: 'Karides, kalamar, fesleğen sosu', en: 'Shrimp, calamari, basil sauce' },
|
||||
price: 215,
|
||||
},
|
||||
{
|
||||
id: 'p4',
|
||||
emoji: '🌿',
|
||||
name: { tr: 'Fıstık Pesto', en: 'Pesto Pizza' },
|
||||
description: { tr: 'Fıstıklı pesto, roka, parmesan', en: 'Pistachio pesto, rocket, parmesan' },
|
||||
price: 175,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'mezze',
|
||||
emoji: '🫒',
|
||||
label: { tr: 'Mezeler', en: 'Mezze' },
|
||||
items: [
|
||||
{
|
||||
id: 'mz1',
|
||||
emoji: '🐟',
|
||||
name: { tr: 'Tarama', en: 'Tarama' },
|
||||
description: { tr: 'Balık yumurtası ezmesi, taze limon', en: 'Fish roe spread, fresh lemon' },
|
||||
price: 75,
|
||||
},
|
||||
{
|
||||
id: 'mz2',
|
||||
emoji: '🧄',
|
||||
name: { tr: 'Haydari', en: 'Haydari' },
|
||||
description: { tr: 'Yoğurt, sarımsak, dereotu', en: 'Yogurt, garlic, dill' },
|
||||
price: 65,
|
||||
},
|
||||
{
|
||||
id: 'mz3',
|
||||
emoji: '🥐',
|
||||
name: { tr: 'Sigara Böreği', en: 'Cheese Pastry Rolls' },
|
||||
description: { tr: 'Peynirli, 5 adet', en: 'Cheese-filled, 5 pieces' },
|
||||
price: 85,
|
||||
},
|
||||
{
|
||||
id: 'mz4',
|
||||
emoji: '🐚',
|
||||
name: { tr: 'Midye Tava', en: 'Fried Mussels' },
|
||||
description: { tr: 'Tarator sos ile servis', en: 'Served with tarator sauce' },
|
||||
price: 95,
|
||||
},
|
||||
{
|
||||
id: 'mz5',
|
||||
emoji: '🍤',
|
||||
name: { tr: 'Karides Güveç', en: 'Shrimp Casserole' },
|
||||
description: { tr: 'Domates sos, baharatlar, fırında', en: 'Tomato sauce, spices, oven-baked' },
|
||||
price: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'drinks',
|
||||
emoji: '🍹',
|
||||
label: { tr: 'İçecekler', en: 'Drinks' },
|
||||
items: [
|
||||
{
|
||||
id: 'd1',
|
||||
emoji: '🍸',
|
||||
name: { tr: 'Mojito', en: 'Mojito' },
|
||||
description: { tr: 'Nane, lime, soda, rum', en: 'Mint, lime, soda, rum' },
|
||||
price: 95,
|
||||
},
|
||||
{
|
||||
id: 'd2',
|
||||
emoji: '🍊',
|
||||
name: { tr: 'Aperol Spritz', en: 'Aperol Spritz' },
|
||||
description: { tr: 'Aperol, prosecco, portakal dilimi', en: 'Aperol, prosecco, orange slice' },
|
||||
price: 115,
|
||||
},
|
||||
{
|
||||
id: 'd3',
|
||||
emoji: '🍋',
|
||||
name: { tr: 'Limonata', en: 'Lemonade' },
|
||||
description: { tr: 'Taze sıkılmış, nane seçeneği ile', en: 'Freshly squeezed, optional mint' },
|
||||
price: 55,
|
||||
},
|
||||
{
|
||||
id: 'd4',
|
||||
emoji: '🥛',
|
||||
name: { tr: 'Ayran', en: 'Ayran' },
|
||||
description: { tr: 'Ev yapımı, taze çırpılmış', en: 'Homemade, freshly churned' },
|
||||
price: 35,
|
||||
},
|
||||
{
|
||||
id: 'd5',
|
||||
emoji: '🍵',
|
||||
name: { tr: 'Soğuk Çay', en: 'Iced Tea' },
|
||||
description: { tr: 'Şeftali veya limon aromalı', en: 'Peach or lemon flavored' },
|
||||
price: 45,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'desserts',
|
||||
emoji: '🍮',
|
||||
label: { tr: 'Tatlılar', en: 'Desserts' },
|
||||
items: [
|
||||
{
|
||||
id: 'dt1',
|
||||
emoji: '🍨',
|
||||
name: { tr: 'Dondurma', en: 'Ice Cream' },
|
||||
description: { tr: '3 top, günlük seçim', en: '3 scoops, daily selection' },
|
||||
price: 85,
|
||||
},
|
||||
{
|
||||
id: 'dt2',
|
||||
emoji: '🥮',
|
||||
name: { tr: 'Baklava', en: 'Baklava' },
|
||||
description: { tr: 'Antep fıstıklı, kaymak ile', en: 'Pistachio, with clotted cream' },
|
||||
price: 75,
|
||||
},
|
||||
{
|
||||
id: 'dt3',
|
||||
emoji: '🍮',
|
||||
name: { tr: 'Panna Cotta', en: 'Panna Cotta' },
|
||||
description: { tr: 'Çilek sosu, taze nane', en: 'Strawberry sauce, fresh mint' },
|
||||
price: 95,
|
||||
},
|
||||
{
|
||||
id: 'dt4',
|
||||
emoji: '🥞',
|
||||
name: { tr: 'Akıtma', en: 'Akıtma' },
|
||||
description: { tr: 'Geleneksel, nar ekşisi ile', en: 'Traditional, with pomegranate molasses' },
|
||||
price: 65,
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"meta": {
|
||||
"title": "Kozmos Beach & More — Menu",
|
||||
"description": "Kozmos Beach & More digital menu"
|
||||
},
|
||||
"header": {
|
||||
"tagline": "BEACH & MORE"
|
||||
},
|
||||
"nav": {
|
||||
"starters": "Starters",
|
||||
"mains": "Main Courses",
|
||||
"pizzas": "Pizzas",
|
||||
"mezze": "Mezze",
|
||||
"drinks": "Drinks",
|
||||
"desserts": "Desserts"
|
||||
},
|
||||
"whatsapp": {
|
||||
"label": "Reserve",
|
||||
"message": "Hello, I would like to make a reservation."
|
||||
},
|
||||
"currency": "₺",
|
||||
"langSwitch": {
|
||||
"current": "EN",
|
||||
"other": "TR",
|
||||
"otherHref": "/tr"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"meta": {
|
||||
"title": "Kozmos Beach & More — Menü",
|
||||
"description": "Kozmos Beach & More dijital menüsü"
|
||||
},
|
||||
"header": {
|
||||
"tagline": "BEACH & MORE"
|
||||
},
|
||||
"nav": {
|
||||
"starters": "Başlangıçlar",
|
||||
"mains": "Ana Yemekler",
|
||||
"pizzas": "Pizzalar",
|
||||
"mezze": "Mezeler",
|
||||
"drinks": "İçecekler",
|
||||
"desserts": "Tatlılar"
|
||||
},
|
||||
"whatsapp": {
|
||||
"label": "Rezervasyon",
|
||||
"message": "Merhaba, rezervasyon yapmak istiyorum."
|
||||
},
|
||||
"currency": "₺",
|
||||
"langSwitch": {
|
||||
"current": "TR",
|
||||
"other": "EN",
|
||||
"otherHref": "/en"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { NextResponse } from 'next/server'
|
||||
import type { NextRequest } from 'next/server'
|
||||
|
||||
const locales = ['tr', 'en']
|
||||
const defaultLocale = 'tr'
|
||||
|
||||
export function proxy(request: NextRequest) {
|
||||
const { pathname } = request.nextUrl
|
||||
|
||||
const hasLocale = locales.some(
|
||||
(locale) => pathname === `/${locale}` || pathname.startsWith(`/${locale}/`)
|
||||
)
|
||||
|
||||
if (!hasLocale) {
|
||||
request.nextUrl.pathname = `/${defaultLocale}${pathname}`
|
||||
return NextResponse.redirect(request.nextUrl)
|
||||
}
|
||||
}
|
||||
|
||||
export const config = {
|
||||
matcher: ['/((?!_next|favicon.ico|icons|manifest.webmanifest).*)'],
|
||||
}
|
||||
Reference in New Issue
Block a user