# 🎨 WIREFRAME & VISUAL GUIDE - BERANDA WISATA

## 📱 Full Page Layout

```
┌─────────────────────────────────┐
│                                 │
│    ╔═══════════════════════╗   │ ← SliverAppBar (Expandable)
│    ║  Jelajahi Lumajang    ║   │   Height: 140pt
│    ║  Temukan 8 destinasi  ║   │   Gradient: #1F8F5F → #2FA86B
│    ║     wisata alam       ║   │
│    ╚═══════════════════════╝   │
│                                 │
├─────────────────────────────────┤
│                                 │
│  ┌─────────────────────────┐   │ ← Search Bar
│  │ 🔍 Cari wisata favori   │   │   Rounded: 14pt
│  └─────────────────────────┘   │   Shadow: subtle
│                                 │
│  Kategori                       │ ← Filter Title
│  [Semua] [Gunung] [Danau] ...  │   Filter Buttons
│                                 │   Horizontal scroll
│  3 wisata                       │ ← Result Counter
│                                 │
├─────────────────────────────────┤
│                                 │
│  ┌──────────────┬──────────────┐ │ ← Grid 2 Kolom
│  │   Card 1     │   Card 2     │ │   CrossAxisSpacing: 14pt
│  ├──────────────┼──────────────┤ │
│  │   Card 3     │   Card 4     │ │
│  ├──────────────┼──────────────┤ │   MainAxisSpacing: 18pt
│  │   Card 5     │   Card 6     │ │
│  ├──────────────┼──────────────┤ │
│  │   Card 7     │   Card 8     │ │
│  └──────────────┴──────────────┘ │
│                                 │
│                    [Bottom Pad]  │ ← 40pt padding
│                                 │
└─────────────────────────────────┘
```

---

## 💳 Card Detail Wireframe

### Card Dimensions
```
┌─────────────────────────────────┐
│                                 │
│    ╔═════════════════════════╗  │
│    ║ [Image Area]      ⭐4.8 ║  │ ← Image: 60% height
│    ║ 🏔️ [Category]          ║  │   Rating Badge (top-right)
│    ║ [Gradient Overlay]      ║  │   Category Badge (top-left)
│    ║                         ║  │
│    ╚═════════════════════════╝  │
│    ┌─────────────────────────┐  │
│    │ Gunung Semeru           │  │ ← Content: 40% height
│    │ Gunung tertinggi di J.. │  │   Name: 14pt bold
│    │ 📍 Ranu Pani, Lumajang  │  │   Desc: 12pt
│    └─────────────────────────┘  │   Lokasi: 11pt
│                                 │
└─────────────────────────────────┘

Width: Full screen - 40pt padding (20pt left, 20pt right)
AspectRatio: 0.75 (height = width × 1.33)
```

---

## 🎨 Card Color Breakdown

### Image Section
```
┌──────────────────────────────┐
│ [Gambar Landscape]           │ ← Image.asset()
├──────────────────────────────┤
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓   │ ← Gradient: transparent → black
│ ▓▓▓ Rating Badge ▓▓ 4.8 ▓▓   │   Opacity: 0 → 0.3
│ ▓▓▓ ⭐ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓   │
│ ▓▓ 🏔️ Gunung ▓▓▓▓▓▓▓▓▓▓▓▓   │ ← Category Badge
│                              │
└──────────────────────────────┘

Rating Badge:
- Color: #E28D42 (Orange)
- Position: 10pt top, 10pt right
- Padding: 8px horizontal, 4px vertical
- Radius: 8pt

Category Badge:
- Color: Category color (depends on kategori)
- Position: 10pt top, 10pt left
- Padding: 8px horizontal, 4px vertical
- Radius: 8pt
```

### Content Section
```
┌──────────────────────────────┐
│ Gunung Semeru              │ ← Name: 14pt bold, #1F8F5F
│ Gunung tertinggi di Jawa  │ ← Desc: 12pt, gray
│                            │
│ 📍 Ranu Pani, Lumajang    │ ← Location: 11pt, #537561
│                            │
└──────────────────────────────┘

Padding:
- Horizontal: 12pt
- Vertical: 10pt
- Space between lines: 4-6pt

Colors:
- Nama: #1F8F5F (Primary)
- Deskripsi: #999999 (Gray)
- Lokasi: #537561 (Dark Green)
- Icon: #8B6F47 (Brown)
```

---

## 🔍 Search Bar Wireframe

```
┌─────────────────────────────────────────┐
│ 🔍 Cari wisata favoritmu...        ✕  │
└─────────────────────────────────────────┘
  ↑                                      ↑
  Padding: 16pt                    Padding: 16pt

Properties:
- Border radius: 14pt
- Background: White (#FFFFFF)
- Placeholder color: #CCCCCC
- Text color: #1F8F5F
- Focus border: 2pt #1F8F5F
- Shadow: 8pt blur, 4pt offset
- Vertical padding: 13pt
```

---

## 🏷️ Filter Buttons Wireframe

### State: Unselected
```
┌──────────────┐
│   Semua      │ ← Background: #CCCCCC (gray)
└──────────────┘    Text: gray[600]
                    Padding: 16px h, 9px v
                    Radius: 10pt
```

### State: Selected
```
┌──────────────┐
│   Gunung     │ ← Background: #8B6F47 (brown)
└──────────────┘    Text: white
                    Shadow: brown 0.3 opacity
                    Transition: 200ms
```

### Filter Row Layout
```
[Semua] [Gunung] [Danau] [Pantai]
  10pt   10pt    10pt    10pt
↑                              ↑
ScrollView horizontal         Container
Start padding               End padding
```

---

## 📊 Category Badge Colors

### Warna Category:
```
🏔️ Gunung:
   Selected: #8B6F47 (Brown)
   Badge: #8B6F47
   
🌊 Danau:
   Selected: #4A90E2 (Blue)
   Badge: #4A90E2
   
🏖️ Pantai:
   Selected: #E28D42 (Orange)
   Badge: #E28D42

🎯 Semua:
   Selected: Colors.grey
   Badge: No specific color
```

---

## 🎬 Animation Specs

### Card Tap Animation
```
Before:
┌─────────────┐
│   Card      │  Scale: 1.0
│   100%      │
└─────────────┘

During tap:
┌──────────┐
│  Card    │  Scale: 0.95
│  95%     │  Duration: 300ms
└──────────┘  Curve: easeInOut

After release:
┌─────────────┐
│   Card      │  Scale: 1.0
│   100%      │
└─────────────┘
```

### Filter Button Transition
```
Unselected → Selected:
- Duration: 200ms
- Property: backgroundColor
- Curve: default
- Shadow appears when selected
```

---

## 📐 Spacing System

### Horizontal Spacing
```
┌──────────┬────────────┬──────────┐
│  Card 1  │ Spacing    │  Card 2  │
│          │   14pt     │          │
└──────────┴────────────┴──────────┘
↑                                   ↑
Padding 20pt                    Padding 20pt
```

### Vertical Spacing
```
Card 1
  ↓ 18pt
Card 2
  ↓ 18pt
Card 3
  ↓ 18pt
Card 4
...
  ↓
Bottom padding 40pt
```

---

## 🎯 Header Expandable Bar

### Collapsed State (Pinned)
```
┌─────────────────────────────┐
│ Jelajahi Lumajang           │ ← Title: 32pt bold
└─────────────────────────────┘
```

### Expanded State
```
┌────────────────────────────────────┐
│                                    │
│     Jelajahi Lumajang              │ ← Title: 32pt
│     Temukan 8 destinasi wisata alam│ ← Subtitle: 14pt
│                                    │
│   [Gradient background]            │
│                                    │
└────────────────────────────────────┘

Height: 140pt
Expanded background fills with gradient
Text aligned to bottom-left
```

---

## 🔄 Layout Flow

```
┌─────────────────────────────┐
│     1. SliverAppBar         │ ← Expandable header
│     (140pt)                 │
└─────────────────────────────┘
              ↓
┌─────────────────────────────┐
│   2. Search + Filter        │ ← SliverToBoxAdapter
│   (120pt total)             │
└─────────────────────────────┘
              ↓
┌─────────────────────────────┐
│                             │
│   3. Grid Cards             │ ← SliverGrid
│   (8 cards × 4 rows)        │
│   (Scrollable)              │
│                             │
└─────────────────────────────┘
              ↓
┌─────────────────────────────┐
│   4. Bottom Padding         │ ← SliverPadding
│   (40pt)                    │
└─────────────────────────────┘
```

---

## 📱 Responsive Behavior

### Portrait (< 600dp)
```
┌─────────────────┐
│   Card 1        │
├─────────────────┤
│   Card 2        │
├─────────────────┤
│   Card 3        │
├─────────────────┤
│   Card 4        │
└─────────────────┘

Grid: 2 kolom
Spacing: 14pt
```

### Landscape (600-900dp)
```
┌──────────────┬──────────────┬──────────────┐
│   Card 1     │   Card 2     │   Card 3     │
├──────────────┼──────────────┼──────────────┤
│   Card 4     │   Card 5     │   Card 6     │
└──────────────┴──────────────┴──────────────┘

Grid: 3 kolom (optional)
```

---

## 🖼️ Image Placeholder Fallback

```
┌──────────────────────────┐
│   [Gradient Background]  │ ← #1F8F5F → #2FA86B
│   ╔════════════════════╗ │
│   ║                    ║ │
│   ║    🏔️ Icon        ║ │ ← Icon: 50pt white
│   ║   (Landscape)      ║ │
│   ║                    ║ │
│   ╚════════════════════╝ │
│                          │
└──────────────────────────┘
```

---

## 📝 Empty State Layout

```
┌────────────────────────────────┐
│                                │
│                                │
│         ┌────────────┐         │
│         │ ┌────────┐ │         │ ← Circular background
│         │ │ 🔍     │ │         │    (diameter: 90pt)
│         │ │ off    │ │         │
│         │ └────────┘ │         │
│         └────────────┘         │
│                                │
│    Wisata tidak ditemukan      │ ← Title: 16pt bold
│                                │ ← Margin: 20pt
│  Coba ubah pencarian atau      │ ← Message: 13pt
│  filter kategori               │
│                                │
└────────────────────────────────┘
```

---

## 🎨 Color Palette Visual

```
Primary Colors:
┌──────────────────────────┐
│ ███ #1F8F5F (Main)      │ Hijau Alam
│ ███ #2FA86B (Light)     │ Hijau Terang
│ ███ #0D6A45 (Dark)      │ Hijau Gelap
└──────────────────────────┘

Category Colors:
┌──────────────────────────┐
│ ███ #8B6F47 (Mountain)  │ Coklat Earthy
│ ███ #4A90E2 (Lake)      │ Biru Danau
│ ███ #E28D42 (Beach)     │ Orange
└──────────────────────────┘

Neutral Colors:
┌──────────────────────────┐
│ ███ #FFFFFF (Surface)   │ Putih
│ ███ #F7F4EA (Background)│ Krem
│ ███ #999999 (Hint)      │ Abu-abu
└──────────────────────────┘
```

---

## 🔗 Touch Target Areas

### Card Touch Area
```
┌────────────────────────────────┐
│ ╔════════════════════════════╗ │
│ ║                            ║ │
│ ║    Touch Area: Entire      ║ │ ← Minimum: 48pt
│ ║    Card (safe from edges)  ║ │   Recommended
│ ║                            ║ │
│ ╚════════════════════════════╝ │
└────────────────────────────────┘
```

### Button Touch Area
```
┌──────────────┐
│   Semua      │ ← Min height: 44pt
│ Tap Area: 44x44pt
└──────────────┘
```

---

## 📐 Typography Scale

```
Header:       32pt bold ← "Jelajahi Lumajang"
Subtitle:     14pt      ← "Temukan 8 destinasi..."
Card Name:    14pt bold ← "Gunung Semeru"
Card Desc:    12pt      ← "Gunung tertinggi..."
Card Location:11pt      ← "📍 Ranu Pani, Lumajang"
Button:       13pt      ← Filter buttons
Counter:      12pt      ← "3 wisata"
Hint:         14pt      ← Placeholder text
```

---

**Visual Guide Complete**
*Gunakan wireframe ini sebagai referensi saat development*
*Untuk kode implementasi, lihat destination_card_modern.dart*