# 📱 Dokumentasi Tampilan Card Wisata Beranda

## Ringkasan Fitur Beranda

Tampilan beranda telah diperbarui dengan desain modern, elegan, dan responsif yang menampilkan **8 destinasi wisata Lumajang** dalam format card grid yang menarik.

---

## 🎨 Desain Card Wisata

### Karakteristik Card:
- ✅ **Rounded Corner Modern**: Border radius 16pt untuk tampilan elegan
- ✅ **Shadow Halus**: Elevation 4 dengan drop shadow subtle
- ✅ **Gambar Landscape Fullscreen**: Mengisi area atas card (60% dari tinggi)
- ✅ **Gradient Overlay**: Gradient hitam transparan di atas gambar untuk readability
- ✅ **Animasi Tap**: Scale animation 0.95 saat disentuh (smooth & responsive)
- ✅ **Rating Badge**: Di sudut kanan atas dengan icon bintang
- ✅ **Category Badge**: Di sudut kiri atas dengan warna sesuai kategori
- ✅ **Responsive**: Grid 2 kolom dengan childAspectRatio 0.75

### Warna Tema Card:
```
Kategori Gunung:  #8B6F47 (Coklat Earthy)
Kategori Danau:   #4A90E2 (Biru Danau)
Kategori Pantai:  #E28D42 (Orange Accent)
Background Card:  #FFFFFF (Putih Clean)
```

---

## 📊 Data 8 Destinasi Wisata

### 1. Gunung Lemongan
- **Lokasi**: Pronojiwo, Lumajang
- **Rating**: 4.8/5
- **Kategori**: Gunung
- **Model 3D**: `assets/models/gunung_lemongan.glb`
- **Gambar**: `assets/images/gunung_lemongan.jpg`

### 2. Gunung Semeru
- **Lokasi**: Ranu Pani, Lumajang
- **Rating**: 4.9/5
- **Kategori**: Gunung
- **Model 3D**: `assets/models/gunung_semeru.glb`
- **Gambar**: `assets/images/gunung_semeru.jpg`

### 3. Pantai Watu Godeg
- **Lokasi**: Wuluhan, Lumajang
- **Rating**: 4.6/5
- **Kategori**: Pantai
- **Model 3D**: `assets/models/pantai_watu_godeg.glb`
- **Gambar**: `assets/images/pantai_watu_godeg.jpg`

### 4. Pantai Watu Pecak
- **Lokasi**: Sumbersari, Lumajang
- **Rating**: 4.5/5
- **Kategori**: Pantai
- **Model 3D**: `assets/models/pantai_watu_pecak.glb`
- **Gambar**: `assets/images/pantai_watu_pecak.jpg`

### 5. Puncak B29
- **Lokasi**: Pronojiwo, Lumajang
- **Rating**: 4.7/5
- **Kategori**: Gunung
- **Model 3D**: `assets/models/puncak_b29.glb`
- **Gambar**: `assets/images/puncak_b29.jpg`

### 6. Ranu Kumbolo
- **Lokasi**: Ranu Pani, Lumajang
- **Rating**: 4.8/5
- **Kategori**: Danau
- **Model 3D**: `assets/models/ranu_kumbolo.glb`
- **Gambar**: `assets/images/ranu_kumbolo.jpg`

### 7. Ranu Pani
- **Lokasi**: Lumajang
- **Rating**: 4.7/5
- **Kategori**: Danau
- **Model 3D**: `assets/models/ranu_pani.glb`
- **Gambar**: `assets/images/ranu_pani.jpg`

### 8. Ranu Regulo
- **Lokasi**: Lumajang
- **Rating**: 4.6/5
- **Kategori**: Danau
- **Model 3D**: `assets/models/ranu_regulo.glb`
- **Gambar**: `assets/images/ranu_regulo.jpg`

---

## 🔍 Fitur Search Bar

### Placeholder Text:
```
"Cari wisata favoritmu..."
```

### Fitur Search:
- 🔎 **Real-time Search**: Mencari nama dan deskripsi wisata
- ❌ **Clear Button**: Tombol X untuk membersihkan pencarian
- 🎨 **Styling Modern**: 
  - Border radius 14pt
  - Shadow subtle
  - Focus border hijau alam (#1F8F5F)
  - Content padding balanced

---

## 🏷️ Filter Kategori

### Tombol Filter:
1. **Semua** (Default)
   - Warna: Abu-abu (#CCCCCC)
   - Tampilkan: Semua 8 wisata

2. **Gunung**
   - Warna: Coklat Earthy (#8B6F47)
   - Tampilkan: 3 wisata (Lemongan, Semeru, B29)

3. **Danau**
   - Warna: Biru Danau (#4A90E2)
   - Tampilkan: 3 wisata (Kumbolo, Pani, Regulo)

4. **Pantai**
   - Warna: Orange (#E28D42)
   - Tampilkan: 2 wisata (Watu Godeg, Watu Pecak)

### Interaksi Filter:
- ✅ Toggle on/off dengan tap
- ✅ Animated color change (200ms)
- ✅ Shadow effect saat selected
- ✅ Real-time grid update

---

## 🎯 Interaksi Card

### Saat Card Ditekan:
1. **Scale Animation**: Ukuran card berkurang 5% (smooth feedback)
2. **Navigation**: Membuka halaman `DestinationDetailPage`
3. **Data Terkirim**:
   ```dart
   destination {
     id: int
     nama: String
     deskripsi: String
     lokasi: String
     rating: double
     kategori: String (gunung|danau|pantai)
     gambar: String (path asset)
     modelPath: String (path .glb file)
     deskripsiLengkap: String
   }
   ```

### Detail Page Features:
- 📷 Hero image dengan gradient overlay
- ⭐ Rating display
- 📍 Lokasi detail
- 📝 Deskripsi lengkap
- 🎯 Informasi wisata
- 🏳️ Model 3D viewer button
- 🔗 Tombol "Bagikan"

---

## 📐 Layout Architecture

### Home Page Structure:
```
SliverAppBar (Expandable Header)
├── Title: "Jelajahi Lumajang"
├── Subtitle: "Temukan 8 destinasi wisata..."
├── Gradient Background
└── Height: 140pt

SliverToBoxAdapter (Search & Filter)
├── Search TextField
├── Category Filter Buttons
└── Results Counter

SliverGrid (Destinasi Cards)
├── CrossAxisCount: 2 kolom
├── ChildAspectRatio: 0.75
├── CrossAxisSpacing: 14pt
├── MainAxisSpacing: 18pt
└── DestinationCardModern × 8

SliverPadding (Bottom spacing)
└── 40pt padding
```

---

## 🎨 Palet Warna Lengkap

```
Primary (Hijau Alam):      #1F8F5F
Primary Dark:              #2FA86B
Secondary (Hijau Muda):    #B7D05A
Tertiary (Orange):         #E28D42
Background (Krem):         #F7F4EA
Surface (Putih):           #FFFFFF

Category Colors:
- Gunung:                  #8B6F47 (Coklat Earthy)
- Danau:                   #4A90E2 (Biru Danau)
- Pantai:                  #E28D42 (Orange)

Text Colors:
- Primary Text:            #2C3E50 (Gelap)
- Secondary Text:          #537561 (Gelap hijau)
- Hint/Placeholder:        #999999 (Abu-abu)
```

---

## 📱 Responsiveness

### Breakpoints:
- **Mobile Portrait** (< 600dp): 2 kolom grid ✅
- **Mobile Landscape** (600-900dp): 2-3 kolom
- **Tablet** (> 900dp): Dapat dikembangkan ke 3-4 kolom

### Safe Area:
- Padding horizontal: 20pt di semua section
- Padding vertical: Adaptive sesuai content
- Bottom safe area: Respects system navigation

---

## 🔄 State Management

### Filtering Logic:
```dart
_filterDestinations() {
  List filtered = destinationList.where((dest) {
    // Match search query
    final matchesSearch = 
      dest.nama.toLowerCase().contains(query) ||
      dest.deskripsi.toLowerCase().contains(query);
    
    // Match category filter
    final matchesCategory = 
      selectedCategory.isEmpty ||
      dest.kategori == selectedCategory;
    
    return matchesSearch && matchesCategory;
  }).toList();
}
```

### TextEditingController:
- Listener untuk real-time filtering
- Clear functionality via suffixIcon
- State update saat perubahan

---

## 📁 File Struktur

```
lib/
├── models/
│   ├── destination_model.dart      (Model class)
│   ├── destination_data.dart       (Data list - 8 wisata)
│   └── destination.dart            (Legacy)
│
├── pages/
│   ├── home_page.dart              (Home beranda - UPDATED)
│   ├── home_page_new.dart          (Alternate version)
│   └── destination_detail_page.dart (Detail page)
│
└── widgets/
    ├── destination_card_modern.dart (NEW - Card widget modern)
    ├── destination_card_widget.dart (Legacy)
    └── ...
```

---

## 🚀 Cara Menggunakan

### 1. Import di HomePage:
```dart
import '../widgets/destination_card_modern.dart';
import '../models/destination_data.dart';
```

### 2. Tampilkan Grid:
```dart
SliverGrid(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    crossAxisSpacing: 14,
    mainAxisSpacing: 18,
    childAspectRatio: 0.75,
  ),
  delegate: SliverChildBuilderDelegate(
    (context, index) {
      return DestinationCardModern(
        destination: _filteredDestinations[index],
        onTap: () => navigateToDetail(),
      );
    },
    childCount: _filteredDestinations.length,
  ),
)
```

### 3. Testing:
```bash
cd android/wisata_app
flutter pub get
flutter run
```

---

## ✨ Fitur Bonus

### Empty State:
- Icon dengan circular background
- Message "Wisata tidak ditemukan"
- Hint: "Coba ubah pencarian atau filter kategori"

### Result Counter:
- Menampilkan jumlah wisata ditemukan
- Update real-time saat filter berubah
- Styling: Pill-shaped dengan background hijau transparan

### Error Handling:
- Image fallback dengan gradient placeholder
- Icon landscape saat gambar gagal load
- Graceful degradation

---

## 📝 Changelog

### Version 1.0 (Current)
- ✅ Card design dengan desain modern elegan
- ✅ 8 destinasi wisata lengkap
- ✅ Search functionality real-time
- ✅ Filter kategori 3 jenis
- ✅ Animasi smooth tap
- ✅ Responsive grid layout
- ✅ Rating & category badges
- ✅ Detail page integration
- ✅ Null safety compliant

---

## 🎓 Best Practices Implemented

1. **Clean Architecture**
   - Separation of concerns
   - Reusable widget components
   - Model-driven data flow

2. **Performance**
   - SliverGrid untuk scrolling efficiency
   - Image optimization
   - Minimal rebuilds dengan state management

3. **UX/UI**
   - Consistent spacing (Material 3 guidelines)
   - Clear visual hierarchy
   - Intuitive interactions

4. **Code Quality**
   - Null safety enabled
   - Proper documentation
   - Meaningful variable names

---

## 🐛 Known Issues & Future Improvements

### Potential Enhancements:
1. Add favorites/wishlist feature
2. Implement infinite scroll pagination
3. Add sorting options (rating, alphabetical)
4. Implement bookmark functionality
5. Add offline caching

---

**Dokumentasi ini berlaku untuk Flutter wisata app berbasis AR dengan Lumajang sebagai destinasi utama.**

*Last Updated: 2026-05-16*
*Status: Production Ready* ✅