fix ui style

2026-05-21 11:59:02 +07:00
parent 22e66ce493
commit f84d0e3726
51 changed files with 1035 additions and 347 deletions
@@ -0,0 +1,198 @@
+# 🎨 SeTrip — UI Style Guide
+
+Panduan visual untuk membuat tampilan SeTrip terasa **natural, manusiawi, dan tidak "AI-generated"** — tanpa mengorbankan SEO.
+
+> Prinsip utama: **clean, calm, earthy.** SeTrip itu social-companion platform ("pergi bareng, bukan sendiri"), bukan marketplace booking. UI harus terasa hangat & tenang, bukan ramai & promosi.
+
+---
+
+## 1. Filosofi Desain
+
+| Hindari (kesan AI-generated) | Gunakan (kesan natural) |
+| --- | --- |
+| ❌ Gradient berlebihan | ✅ Background putih bersih / `neutral-50` |
+| ❌ Neumorphism | ✅ Soft green / earthy tone |
+| ❌ Glassmorphism ekstrem | ✅ Border tipis 1px + shadow lembut |
+| ❌ Icon 3D / emoji sebagai UI icon | ✅ Stroke icon tipis (lucide-react) |
+| ❌ Card mengambang dengan blur tebal | ✅ Simple rounded card, datar, jelas |
+| ❌ Warna saturasi tinggi di mana-mana | ✅ 1 warna aksen, sisanya netral |
+
+**Tiga kata kunci:** *bersih · tenang · jujur.* Kalau sebuah elemen terasa "ingin pamer", kemungkinan besar perlu disederhanakan.
+
+---
+
+## 2. Warna
+
+Token warna sudah tersedia di [app/globals.css](app/globals.css) — **gunakan token, jangan hardcode hex.**
+
+| Peran | Token | Catatan |
+| --- | --- | --- |
+| Aksi utama / brand | `primary-600` (#16A34A) | Hijau gunung — earthy, tidak neon |
+| Hover aksi utama | `primary-700` | Hindari `primary-500` (terlalu terang) untuk hover tombol |
+| Aksen sekunder | `secondary-600` (#0EA5E9) | Pakai hemat — info, link, badge vibe |
+| Teks utama | `neutral-800` | |
+| Teks sekunder | `neutral-500` | |
+| Border | `neutral-200` | Selalu 1px |
+| Background halaman | `neutral-50` | |
+| Surface / card | `white` | |
+
+### Aturan warna
+
+- **Satu aksen per layar.** Hijau adalah bintangnya. Biru hanya bumbu.
+- **Maksimal 1 area gradient per halaman**, dan harus halus (mis. hero). Sisanya warna solid.
+- Surface = putih solid. Jangan pakai `bg-white/80 + backdrop-blur` untuk card biasa.
+- Earthy tone tambahan diperbolehkan sebagai background section (`primary-50`, `amber-50`) tapi jangan dijadikan blok besar warna-warni.
+
+---
+
+## 3. Sistem Ikon — lucide-react
+
+`lucide-react` sudah terpasang. **Stroke icon = wajah baru SeTrip.**
+
+### Aturan ikon
+
+- **Stroke icon, bukan filled.** Lucide default sudah stroke — jangan ganti `fill`.
+- Ukuran konsisten: `16` (inline teks), `20` (tombol/list), `24` (header section).
+- Ketebalan stroke seragam: `strokeWidth={1.75}` (default lucide `2` sedikit terlalu tebal untuk gaya clean ini).
+- Warna ikut teks: `text-neutral-500` untuk netral, `text-primary-600` untuk aktif.
+- **Jangan** beri ikon background bulat berwarna + emoji di dalamnya (pola lama). Cukup ikon polos, atau ikon di atas lingkaran `neutral-100` yang sangat soft bila perlu penekanan.
+
+```tsx
+import { Mountain } from "lucide-react";
+
+// inline
+<Mountain size={16} strokeWidth={1.75} className="text-neutral-500" />
+
+// di tombol
+<Plus size={20} strokeWidth={1.75} />
+```
+
+### Pemetaan ikon per fitur
+
+| Fitur | Ikon lucide |
+| --- | --- |
+| Trip | `Mountain` |
+| Group / peserta | `Users` |
+| Organizer | `BadgeCheck` |
+| Verified | `ShieldCheck` |
+| Payment | `Wallet` |
+| Meeting Point | `MapPinned` |
+| Chat | `MessageCircle` |
+| Review / rating | `Star` |
+| Profil | `UserRound` |
+
+Saran tambahan yang konsisten dengan set di atas:
+
+| Konteks | Ikon lucide |
+| --- | --- |
+| Tanggal / jadwal | `CalendarDays` |
+| Lokasi umum | `MapPin` |
+| Buat trip (FAB & CTA) | `Plus` |
+| Cari / filter | `Search`, `SlidersHorizontal` |
+| Menu mobile | `Menu` / `X` |
+| Kategori (jelajah) | `Compass` |
+| Sedang ramai / populer | `Flame` atau `TrendingUp` |
+| Harga | `Tag` |
+
+> **Catatan emoji kategori:** `categoryMeta()` di [lib/activity-category.ts](lib/activity-category.ts) masih memakai emoji (🏔️🏕️🤿). Boleh dipertahankan **hanya** di konten data trip (terasa playful & manusiawi di tempat itu), tapi **elemen UI/chrome** (navbar, header section, tombol, badge status) harus pakai stroke icon.
+
+---
+
+## 4. Komponen
+
+### Card
+
+```
+✅ rounded-2xl  ·  border border-neutral-200  ·  bg-white
+✅ hover: shadow lembut + translate-y-0.5 (sudah dipakai di TripCard — pertahankan)
+❌ jangan: shadow tebal default, blur, gradient border
+```
+
+### Tombol
+
+| Jenis | Style |
+| --- | --- |
+| Primer | `bg-primary-600 hover:bg-primary-700 text-white rounded-xl` |
+| Sekunder | `border border-neutral-200 text-neutral-700 hover:bg-neutral-50` |
+| Ghost | `text-neutral-600 hover:bg-neutral-100` |
+
+- Shadow tombol seperlunya. `shadow-lg shadow-primary-600/25` boleh untuk **satu** CTA utama per layar, jangan semua tombol.
+- `hover:scale-105` cukup untuk CTA hero saja — jangan di semua tombol (terasa "demo template").
+- Sertakan ikon lucide bila memperjelas aksi (mis. `Plus` untuk "Buat Trip").
+
+### Badge / pill
+
+- `rounded-full`, teks kecil, warna soft (`primary-50`/`primary-700`).
+- Status pakai warna semantik solid lembut, bukan transparan + blur.
+
+### Header section
+
+Pola lama: kotak berwarna + emoji. Pola baru:
+
+```tsx
+<div className="flex items-center gap-2.5">
+  <Compass size={20} strokeWidth={1.75} className="text-primary-600" />
+  <div>
+    <h2 className="text-base font-bold text-neutral-800 sm:text-lg">Jelajah per Kategori</h2>
+    <p className="text-xs text-neutral-500">Hiking, diving, konser, sampai retreat</p>
+  </div>
+</div>
+```
+
+---
+
+## 5. Yang Perlu Dirombak di Codebase
+
+Temuan konkret dari kode saat ini:
+
+| Lokasi | Masalah | Aksi |
+| --- | --- | --- |
+| [app/(public)/page.tsx](app/(public)/page.tsx) | Header section pakai kotak warna + emoji (✨🔥🏔️🤝), badge hero pakai emoji 🤝 | Ganti ke stroke icon (`Compass`, `Flame`, `Mountain`, `Users`) |
+| [app/(public)/page.tsx](app/(public)/page.tsx#L110) | Hero gradient 3 warna (`from-primary-900 via-neutral-900 to-secondary-900`) | Sederhanakan jadi overlay solid `neutral-900/80` atau gradient 2 warna halus |
+| [app/(public)/page.tsx](app/(public)/page.tsx#L386) | FAB pakai teks `"+"` | Ganti `<Plus size={24} />` |
+| [app/(public)/page.tsx](app/(public)/page.tsx#L153) | Stat "100% Seru" terasa filler/AI | Ganti metrik nyata (jumlah peserta, organizer terverifikasi) atau hapus |
+| [components/shared/navbar.tsx](components/shared/navbar.tsx#L112) | Hamburger pakai inline SVG manual | Ganti `Menu` / `X` dari lucide |
+| [components/shared/navbar.tsx](components/shared/navbar.tsx#L13) | `bg-white/90 backdrop-blur-md` | Boleh dipertahankan (tipis, wajar untuk sticky nav) — jangan ditebalkan |
+| [features/trip/components/trip-card.tsx](features/trip/components/trip-card.tsx) | Avatar fallback & meta info bisa diperkuat dengan ikon stroke (`Users`, `CalendarDays`, `MapPin`) | Tambah ikon kecil di baris meta |
+
+Prioritas: **homepage dulu** (paling sering dilihat & paling kuat kesan AI-nya), lalu navbar, lalu komponen kartu.
+
+---
+
+## 6. SEO — Wajib Dijaga
+
+Perubahan visual **tidak boleh** menurunkan SEO. Aturan:
+
+- **Ikon lucide = inline SVG**, ringan & tidak memblokir render. Aman untuk Core Web Vitals.
+- **Ikon dekoratif** (hiasan di samping teks) harus `aria-hidden`. Lucide perlu di-set manual:
+  ```tsx
+  <Mountain size={16} aria-hidden className="text-neutral-500" />
+  ```
+- **Ikon yang berdiri sendiri sebagai tombol** (mis. tombol menu) wajib punya label:
+  ```tsx
+  <button aria-label="Buka menu"><Menu size={20} aria-hidden /></button>
+  ```
+- **Jangan ubah teks jadi gambar.** Heading, slogan, deskripsi harus tetap teks HTML.
+- **Pertahankan hirarki heading:** satu `<h1>` per halaman, `<h2>` untuk section. Jangan turunkan jadi `<div>` saat merapikan visual.
+- **Pertahankan metadata & JSON-LD** di [app/layout.tsx](app/layout.tsx) dan [app/(public)/page.tsx](app/(public)/page.tsx) — structured data, OpenGraph, canonical jangan disentuh saat refactor UI.
+- **Komponen tetap Server Component** kalau memungkinkan. Jangan tambah `"use client"` cuma untuk render ikon — lucide jalan di server.
+- **Gambar:** terus pakai `next/image` dengan `alt` deskriptif dan `priority` untuk LCP (cover hero & kartu pertama).
+- **Kontras warna** minimal AA: stroke icon `neutral-500` di atas putih sudah memenuhi; jangan pakai `neutral-300` untuk ikon/teks penting.
+
+---
+
+## 7. Checklist Implementasi
+
+- [ ] Ganti semua emoji di chrome UI (navbar, header section, tombol, FAB) → stroke icon lucide
+- [ ] Standarkan `size` (16/20/24) & `strokeWidth={1.75}` di seluruh ikon
+- [ ] Sederhanakan gradient hero homepage jadi maksimal 2 warna / overlay solid
+- [ ] Ganti hamburger SVG manual di navbar → `Menu`/`X`
+- [ ] Tinjau metrik "100% Seru" — ganti angka nyata atau hapus
+- [ ] Pastikan ikon dekoratif `aria-hidden`, ikon-tombol punya `aria-label`
+- [ ] Pastikan struktur heading `h1`/`h2` tetap utuh setelah refactor
+- [ ] Jalankan Lighthouse — skor SEO & Accessibility tidak turun
+- [ ] Verifikasi tidak ada `"use client"` baru yang ditambahkan hanya demi ikon
+
+---
+
+*Acuan token: [app/globals.css](app/globals.css) · Acuan brand: [lib/site.ts](lib/site.ts)*