# 🚀 Quick Setup Guide - Card Wisata Beranda

## ✅ Status Implementasi

Tampilan card wisata beranda **sudah selesai dan siap digunakan**. Berikut adalah panduan cepat untuk setup dan testing.

---

## 📋 Checklist Implementasi

- ✅ Model data dengan 8 destinasi
- ✅ Card widget modern dengan desain elegan
- ✅ Home page dengan search & filter
- ✅ Grid layout 2 kolom responsive
- ✅ Animasi smooth tap
- ✅ Rating & category badges
- ✅ Detail page integration
- ✅ Warna tema sesuai spesifikasi
- ✅ Null safety enabled

---

## 🎨 File-File Baru/Updated

### 1. **Widget Card Baru**
```
lib/widgets/destination_card_modern.dart (NEW)
```
- Card design modern dengan rounded corner 16pt
- Gradient overlay di gambar
- Rating badge (sudut kanan atas)
- Category badge (sudut kiri atas)
- Animasi scale 0.95 saat tap
- Responsive layout

### 2. **Home Page Updated**
```
lib/pages/home_page.dart (UPDATED)
```
- SearchBar dengan placeholder "Cari wisata favoritmu..."
- Filter kategori: Semua, Gunung, Danau, Pantai
- Grid 2 kolom dengan spacing optimal
- Result counter
- Empty state handling
- Real-time filtering

### 3. **Home Page Alternative**
```
lib/pages/home_page_new.dart (NEW)
```
- Versi alternatif dengan styling sama

---

## 🏃 Quick Start

### Step 1: Update pub dependencies
```bash
cd android/wisata_app
flutter pub get
```

### Step 2: Run aplikasi
```bash
flutter run
```

### Step 3: Test fitur
1. **Buka halaman Beranda** → Lihat 8 card wisata
2. **Search** → Cari "Semeru" atau "Pantai"
3. **Filter** → Tap filter "Gunung", "Danau", "Pantai"
4. **Tap Card** → Buka detail halaman
5. **Scroll** → Lihat animasi smooth

---

## 📱 Tampilan yang Diharapkan

### Header (SliverAppBar)
```
┌─────────────────────────┐
│ Jelajahi Lumajang       │ ← Title 32pt bold
│ Temukan 8 destinasi...  │ ← Subtitle 14pt
│ [Gradient background]   │
└─────────────────────────┘
```

### Search Bar
```
┌─────────────────────────┐
│ 🔍 Cari wisata favori.. │ ← Rounded 14pt
└─────────────────────────┘
```

### Filter Buttons
```
[Semua] [Gunung] [Danau] [Pantai]
```

### Card Grid (2 kolom)
```
┌─────────────┬─────────────┐
│   Card 1    │   Card 2    │
├─────────────┼─────────────┤
│   Card 3    │   Card 4    │
├─────────────┼─────────────┤
│   Card 5    │   Card 6    │
├─────────────┼─────────────┤
│   Card 7    │   Card 8    │
└─────────────┴─────────────┘
```

### Card Detail
```
┌─────────────────────────────┐
│ [Image with gradient] ⭐4.8 │ ← Rating badge
│ 🏔️ [Category]               │ ← Category badge
├─────────────────────────────┤
│ Gunung Semeru               │ ← Nama wisata
│ Gunung tertinggi di Jawa... │ ← Deskripsi
│ 📍 Ranu Pani, Lumajang     │ ← Lokasi
└─────────────────────────────┘
```

---

## 🔍 Fitur Testing

### Test Scenario 1: Display All Cards
```
1. Buka app → Beranda tab
2. Expected: 8 card wisata ditampilkan
3. Verify: Grid 2 kolom, spacing konsisten
```

### Test Scenario 2: Search Functionality
```
1. Tap search bar
2. Type: "Semeru"
3. Expected: Hanya card "Gunung Semeru" ditampilkan
4. Tap X clear button
5. Expected: Kembali ke 8 card
```

### Test Scenario 3: Filter Kategori
```
1. Tap filter "Gunung"
2. Expected: 3 card ditampilkan (Lemongan, Semeru, B29)
3. Tap filter "Danau"
4. Expected: 3 card ditampilkan (Kumbolo, Pani, Regulo)
5. Tap filter "Pantai"
6. Expected: 2 card ditampilkan (Watu Godeg, Watu Pecak)
```

### Test Scenario 4: Card Tap Animation
```
1. Tap pada card
2. Expected: Card shrink 5% dengan smooth animation
3. Expected: Navigasi ke detail page
```

### Test Scenario 5: Detail Page
```
1. Tap card dari beranda
2. Expected: Detail page membuka
3. Verify: Hero image, rating, kategori, lokasi
4. Verify: Deskripsi lengkap
5. Verify: Model path ditampilkan
6. Tap "Lihat Model 3D" button
7. Expected: Navigasi ke AR viewer
```

---

## 🎨 Warna Tema Reference

### Hijau Alam (Primary)
- Light: #2FA86B
- Main: #1F8F5F
- Dark: #0D6A45

### Coklat Earthy (Mountain)
- #8B6F47

### Biru Danau (Lake)
- #4A90E2

### Orange (Beach)
- #E28D42

### Neutral
- Background: #F7F4EA
- Surface: #FFFFFF
- Text: #2C3E50

---

## 📊 Data Structure

### Destination Model
```dart
class Destination {
  final int id;
  final String nama;
  final String deskripsi;
  final String lokasi;
  final double rating;
  final String kategori;        // 'gunung', 'danau', 'pantai'
  final String gambar;          // assets/images/...
  final String modelPath;       // assets/models/...glb
  final String deskripsiLengkap;
}
```

### Sample Data
```dart
destinationList = [
  Destination(
    id: 1,
    nama: 'Gunung Lemongan',
    deskripsi: 'Gunung yang indah dengan pemandangan alam...',
    lokasi: 'Pronojiwo, Lumajang',
    rating: 4.8,
    kategori: 'gunung',
    gambar: 'assets/images/gunung_lemongan.jpg',
    modelPath: 'assets/models/gunung_lemongan.glb',
    deskripsiLengkap: '...',
  ),
  // ... 7 destinasi lainnya
];
```

---

## 🔧 Troubleshooting

### Issue: Card hanya menampilkan 5 wisata
**Solution**: Refresh/rebuild app
```bash
flutter clean
flutter pub get
flutter run
```

### Issue: Gambar tidak muncul di card
**Solusi**: Pastikan file gambar ada di `assets/images/`
```yaml
# Cek pubspec.yaml
flutter:
  assets:
    - assets/images/
    - assets/models/
```

### Issue: Animasi card terasa lag
**Solusi**: Pastikan device memiliki cukup memory
- Clear device cache: `flutter clean`
- Rebuild: `flutter run --release`

### Issue: Filter tidak bekerja
**Solusi**: Pastikan kategori spelling benar (lowercase)
```dart
kategori: 'gunung'  // ✅ Benar
kategori: 'Gunung'  // ❌ Salah
```

---

## 📚 Import Statements

Pastikan import ini ada di home_page.dart:
```dart
import 'package:flutter/material.dart';
import '../models/destination_model.dart';
import '../models/destination_data.dart';
import '../widgets/destination_card_modern.dart';
import 'destination_detail_page.dart';
```

---

## 🎯 Navigation Flow

```
BerandaScreen
└── HomePage
    └── SearchBar + Filter
    └── SliverGrid (8 cards)
        └── onTap → DestinationDetailPage
            ├── Hero Image
            ├── Rating & Category
            ├── Full Description
            └── "Lihat Model 3D" → AR Viewer
```

---

## ✨ Highlights Fitur

### Desain Modern
- ✨ Rounded corner 16pt
- ✨ Subtle shadow (elevation 4)
- ✨ Gradient overlay cerdas
- ✨ Consistent spacing & typography

### Interaksi Smooth
- 🎬 Scale animation 0.95 saat tap
- 🎬 Color transition 200ms
- 🎬 Responsive feedback

### User Experience
- 🎯 Clear visual hierarchy
- 🎯 Intuitive filtering
- 🎯 Real-time search
- 🎯 Informative badges

---

## 📱 Responsive Behavior

### Portrait Mode (Mobile)
- Grid: 2 kolom
- Card height: Optimal untuk thumb
- Spacing: 14pt cross, 18pt main

### Landscape Mode
- Dapat disesuaikan ke 3-4 kolom
- Margin bottom untuk navigation bar

### Tablet
- Dapat ditingkatkan ke 3+ kolom
- Larger card dengan lebih banyak info

---

## 🚀 Deployment Checklist

Sebelum publish ke Play Store:

- [ ] Test semua 8 destinasi load dengan benar
- [ ] Test search dengan berbagai query
- [ ] Test filter semua kategori
- [ ] Test detail page loading
- [ ] Test AR model loading
- [ ] Test on minimal Android SDK version
- [ ] Test on various device sizes
- [ ] Verify text bahasa Indonesia lengkap
- [ ] Check color contrast accessibility
- [ ] Remove debug prints

---

## 📞 Support

Jika ada issue atau pertanyaan:
1. Check DOKUMENTASI_CARD_WISATA.md untuk detail lengkap
2. Review code di `lib/widgets/destination_card_modern.dart`
3. Check `lib/pages/home_page.dart` untuk logic
4. Verify data di `lib/models/destination_data.dart`

---

**Status**: ✅ Production Ready  
**Last Updated**: 2026-05-16  
**Version**: 1.0  
**Tested**: Android Mobile Portrait