feat: complete UI/UX improvements and localization

2026-07-15 14:42:51 +03:00
parent 2d149f1178
commit a36b833e00
32 changed files with 3667 additions and 348 deletions
@@ -0,0 +1,69 @@
+# Design Brief — Sitar Apart & Otel
+
+`/design-demo` skill'ine doğrudan girdi olarak verilebilir.
+
+---
+
+📐 **Estetik Yön: Warm Coastal** (Warm/Organic + kıyı tonu karışımı — lüks otel değil, samimi butik apart)
+
+- **Neden:** Broşürdeki gerçek görseller (ahşap balkonlar, yeşillik, deniz-dağ manzarası, havlu üzerine serpiştirilmiş buğunvil çiçekleri) samimi, ev sıcaklığında bir apart havası veriyor. "Luxury/Refined" bu işletme için fazla iddialı — 1+0/1+1 self-catering daireler satıyoruz, 5 yıldızlı otel değil.
+- **Karakter:** Yuvarlatılmış köşeler, toprak + turkuaz tonları, bol doğal ışık hissi, gerçekçi/samimi fotoğraf ağırlıklı
+
+🎨 **Palet (OKLCH):**
+```css
+:root {
+  --background:         oklch(0.97 0.012 80);   /* kirli beyaz/krem */
+  --foreground:          oklch(0.16 0.01 40);    /* koyu ahşap-kahve */
+  --primary:             oklch(0.62 0.09 200);   /* turkuaz — broşür logosu/bantları */
+  --primary-foreground:  oklch(0.98 0.01 80);
+  --secondary:           oklch(0.40 0.05 40);    /* koyu ahşap balkon tonu */
+  --accent:              oklch(0.68 0.14 15);    /* buğunvil pembe-mor — vurgu/CTA'da nokta atışı kullan */
+  --muted:               oklch(0.92 0.01 80);
+  --muted-foreground:    oklch(0.48 0.01 60);
+  --border:              oklch(0.87 0.01 80);
+  --radius:              0.75rem;                /* organik, yuvarlak */
+}
+.dark {
+  --background: oklch(0.14 0.01 40);
+  --foreground: oklch(0.95 0.01 80);
+  --primary:    oklch(0.68 0.10 200);
+  --border:     oklch(0.24 0.01 40);
+}
+```
+
+🔤 **Font:**
+- Başlık: **Lora** (700) — sıcak serif, otel siteleri için klişe olmayan seçim
+- Body: **Nunito** (400/600) — yuvarlak, samimi sans
+
+**Tipografi tonu:** Büyük başlıklarda serif ağırlık, gövde metinde yumuşak sans. Aşırı ince/keskin geometrik font yok — sıcaklık hissi korunmalı.
+
+---
+
+## Unforgettable Element (Farklılaştırıcı Detay)
+
+**Buğunvil çiçeği motifi** — broşürdeki gerçek fotoğraflarda havlu/yatak üzerine serpiştirilmiş çiçekler işletmenin kendine has, samimi bir dokunuşu. Bunu jenerik "gradient blob" yerine tekrar eden görsel imza olarak kullan:
+- Hero'da başlık etrafında ince, elle çizilmiş çiçek/dal SVG detayı (Magic UI değil, custom)
+- Section divider'larda minimal çiçek ikonu
+- Daire kartlarında hover'da hafif yaprak/çiçek parçacık animasyonu (abartısız, `prefers-reduced-motion` ile kapanır)
+
+Bu, "jenerik AI otel sitesi" hissinden kaçınmak için PRD'deki gerçek marka detayına dayanıyor — uydurma değil.
+
+---
+
+## Bölüm Bazlı Yönlendirme
+
+- **Hero:** Broşürdeki balkon/manzara fotoğrafı (veya benzeri) full-bleed, hafif koyu overlay, ortalanmış serif başlık + "Akyaka'nın Huzuru Sizinle" alt başlık + rezervasyon/iletişim CTA. Transparent navbar, scroll'da frosted glass.
+- **Daire kartları:** 3/2 oranlı büyük görsel, shadcn Carousel, `whileHover scale-[1.02]`, minimal metin (ad + kapasite + "Detaylar" linki)
+- **Olanaklar (Amenity) bandı:** Ana sayfada ikon + kısa etiket şeklinde yatay şerit (Havuz, Wifi, Özel Mutfak, Balkon)
+- **Konum/Galeri:** Editorial düzen, bol whitespace, masonry veya kategori tab'lı galeri
+- **Footer:** Koyu ahşap-kahve arka plan (`--secondary` bazlı), serif logo, adres + telefon + WhatsApp butonu
+
+## Anti-Klişe Kontrol
+- `bg-gradient-to-r from-blue-500 to-purple-600` yok — palet OKLCH sabitlerinden
+- Sistem fontu yok — `next/font` ile Lora + Nunito
+- Her section `py-20 text-center` tekrarı yok — ritim değişken
+- Stok "genel otel" görseli yerine broşürdeki gerçek fotoğraflar önceliklendirilir
+
+---
+
+**Sonraki adım:** Bu brief + `docs/prd.md` ile `/design-demo` çalıştırılabilir.