69 lines
3.7 KiB
Markdown
69 lines
3.7 KiB
Markdown
# 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. |