201 lines
5.8 KiB
Markdown
201 lines
5.8 KiB
Markdown
# Kozmos Beach & More — QR Menü Sitesi Tasarım Dokümanı
|
||
|
||
**Tarih:** 2026-06-03
|
||
**Proje:** kozmosqr
|
||
**Stack:** Next.js 16.2.7 · React 19.2 · Tailwind CSS v4 · TypeScript
|
||
|
||
---
|
||
|
||
## Amaç
|
||
|
||
Masa başında QR okutulunca açılan, uygulama gerektirmeyen, sadece görüntüleme amaçlı dijital menü. TR/EN dil desteği, mobil-first, PWA-ready.
|
||
|
||
---
|
||
|
||
## Tasarım Kararları (Brainstorming Özeti)
|
||
|
||
| Karar | Seçim | Gerekçe |
|
||
|---|---|---|
|
||
| Ürün kartı stili | Minimal liste (emoji + isim + açıklama + fiyat) | Hızlı taranır, fotoğraf zorunluluğu yok |
|
||
| Kategori navigasyon | Sticky alt tab bar | Başparmakla kolay erişim, native his |
|
||
| i18n yaklaşımı | URL tabanlı (`/tr`, `/en`) | Next.js native `[lang]` dynamic segment |
|
||
| Günün Önerisi / Rakı Gecesi | Sonraki sprint'e bırakıldı | Şimdilik kapsam dışı |
|
||
|
||
---
|
||
|
||
## Tasarım Dili
|
||
|
||
- **Renkler:** krem `#F5F0E8` · bej `#E8DCC8` · turkuaz `#4AAFA8` · yeşil `#5C8A5C` · koyu kahve `#3D2B1F`
|
||
- **Font:** Playfair Display (başlıklar, italic vurgu) + Inter (gövde, fiyat, etiketler)
|
||
- **His:** Bohem, Ege, hasır doku — Magic UI animasyon kalitesi ile desteklenmiş
|
||
- **Animasyon:** Minimal — scroll geçişleri, tab değiştirme fade
|
||
|
||
---
|
||
|
||
## Sayfa Yapısı
|
||
|
||
```
|
||
┌─────────────────────┐
|
||
│ KOZMOS Beach&More │ sticky header — bg: #3D2B1F
|
||
│ TR EN│ dil seçici sağ üst
|
||
├─────────────────────┤
|
||
│ │
|
||
│ [Aktif kategori │ scroll area — bg: #F5F0E8
|
||
│ içeriği] │
|
||
│ │
|
||
│ 🥗 Akdeniz Salatası│ minimal liste satırı
|
||
│ Taze sebzeler ₺120 │
|
||
│ ─ ─ ─ ─ ─ ─ ─ ─ ─ │
|
||
│ │
|
||
│ [WA btn] │ fixed, sağ alt, bg: #25D366
|
||
├─────────────────────┤
|
||
│ 🥗 🍽️ 🍕 🍹 🍮│ sticky bottom tab bar — bg: #3D2B1F
|
||
└─────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## Dosya Yapısı
|
||
|
||
```
|
||
app/
|
||
[lang]/
|
||
layout.tsx — font yükleme, html lang attr, meta tags
|
||
page.tsx — menü sayfası (Server Component)
|
||
manifest.ts — PWA web app manifest
|
||
proxy.ts — / → /tr yönlendirmesi (Next.js 16 proxy)
|
||
data/
|
||
menu.ts — tüm menü verisi (TR+EN, tip tanımlı)
|
||
dictionaries/
|
||
tr.json — UI string'leri Türkçe
|
||
en.json — UI string'leri İngilizce
|
||
public/
|
||
icons/ — PWA icon'ları (192x192, 512x512)
|
||
```
|
||
|
||
---
|
||
|
||
## Veri Modeli
|
||
|
||
```ts
|
||
// data/menu.ts
|
||
|
||
type LocalizedString = { tr: string; en: string }
|
||
|
||
type MenuItem = {
|
||
id: string
|
||
emoji: string
|
||
name: LocalizedString
|
||
description: LocalizedString
|
||
price: number // TL
|
||
highlight?: boolean // Günün Önerisi — sonraya hazır alan
|
||
}
|
||
|
||
type Category = {
|
||
id: string
|
||
emoji: string
|
||
label: LocalizedString
|
||
items: MenuItem[]
|
||
}
|
||
|
||
export const categories: Category[] = [ ... ]
|
||
```
|
||
|
||
**Kategoriler (6):** Başlangıçlar · Ana Yemekler · Pizzalar · Mezeler · İçecekler · Tatlılar
|
||
**Her kategoride:** 4–5 ürün, TR+EN isim ve açıklama
|
||
|
||
---
|
||
|
||
## i18n Mimarisi
|
||
|
||
**Routing:** `app/[lang]/page.tsx` — `/tr` ve `/en` URL'leri
|
||
|
||
**proxy.ts:**
|
||
- `/` → `/tr` yönlendirir (varsayılan locale)
|
||
- Desteklenmeyen locale → 404
|
||
|
||
**dictionaries/tr.json + en.json:**
|
||
```json
|
||
{
|
||
"nav": { "starters": "Başlangıçlar", "mains": "Ana Yemekler", ... },
|
||
"whatsapp": "Rezervasyon için yazın",
|
||
"currency": "₺"
|
||
}
|
||
```
|
||
|
||
**getDictionary (server-only):** `app/[lang]/dictionaries.ts`
|
||
- `import 'server-only'` ile client bundle'dan korunur
|
||
- `hasLocale()` ile geçersiz locale → `notFound()`
|
||
|
||
**Params:** Next.js 16 gereği `await params` — senkron erişim yok.
|
||
|
||
---
|
||
|
||
## Bileşen Mimarisi
|
||
|
||
Bileşenler varsayılan olarak Server Component'tir. `'use client'` yalnızca aktif tab detection için gereklidir.
|
||
|
||
```
|
||
app/[lang]/page.tsx
|
||
└─ <MenuPage lang dict categories /> — Server Component
|
||
├─ <Header lang /> — Server Component, dil linkleri
|
||
├─ <CategorySection id="starters" ...> — Server Component, her kategori için
|
||
│ └─ <MenuItemRow> — Server Component
|
||
├─ <WhatsAppButton phone /> — Server Component (statik link)
|
||
└─ <BottomTabBar categories /> — CLIENT Component ⚠️
|
||
```
|
||
|
||
**BottomTabBar neden client?**
|
||
Sayfa tek scroll alanı, tüm kategoriler alt alta sıralı. Tab'lar `href="#category-id"` anchor linkleri. Aktif tab'ı belirlemek için Intersection Observer kullanılır — bu `useEffect` + `useState` gerektirir.
|
||
|
||
**Sayfada sadece bu bir bileşen `'use client'` alır.**
|
||
|
||
---
|
||
|
||
## PWA
|
||
|
||
`app/manifest.ts`:
|
||
```ts
|
||
{ name: 'Kozmos Beach & More', short_name: 'Kozmos',
|
||
start_url: '/tr', display: 'standalone',
|
||
background_color: '#F5F0E8', theme_color: '#3D2B1F' }
|
||
```
|
||
|
||
`app/[lang]/layout.tsx` meta tags:
|
||
- `viewport` + `theme-color`
|
||
- `apple-mobile-web-app-capable`
|
||
|
||
---
|
||
|
||
## Tailwind v4 Yapılandırması
|
||
|
||
`app/globals.css` içinde `@theme inline` ile özel renkler:
|
||
```css
|
||
@import "tailwindcss";
|
||
|
||
@theme inline {
|
||
--color-cream: #F5F0E8;
|
||
--color-beige: #E8DCC8;
|
||
--color-teal: #4AAFA8;
|
||
--color-green: #5C8A5C;
|
||
--color-coffee: #3D2B1F;
|
||
--font-display: 'Playfair Display', serif;
|
||
--font-body: 'Inter', sans-serif;
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## WhatsApp Butonu
|
||
|
||
Fixed, sağ alt köşe. `href="https://wa.me/90XXXXXXXXXX"` — telefon numarası `data/menu.ts`'ten gelir, hardcode edilmez.
|
||
|
||
---
|
||
|
||
## Kapsam Dışı (Sonraki Sprint)
|
||
|
||
- Günün Önerisi özel kartı
|
||
- Perşembe Rakı Gecesi banner'ı
|
||
- Gerçek ürün fotoğrafları (Next.js Image optimizasyonu)
|
||
- Admin paneli / menü düzenleme arayüzü
|