hipmi-mobile/TASKS/crowdfunding-redesign.md

# Crowdfunding Page Redesign - Modern UI Enhancement

## 📋 Ringkasan Task
Redesign halaman Crowdfunding (`app/(application)/(user)/crowdfunding/index.tsx`) untuk menciptakan tampilan yang lebih modern, menarik, dan user-friendly dengan visual hierarchy yang lebih baik.

---

## 🎯 Tujuan
1. Meningkatkan visual appeal dengan desain card yang modern
2. Memperbaiki spacing dan layout untuk readability yang lebih baik
3. Menambahkan elemen visual (icon, color accent) untuk navigasi yang lebih intuitif
4. Menciptakan konsistensi dengan design system aplikasi HIPMI

---

## 📁 File yang Terlibat

### File Utama
- **Target**: `app/(application)/(user)/crowdfunding/index.tsx`

### Komponen yang Mungkin Digunakan
- `ViewWrapper` - Wrapper utama
- `StackCustom` - Layout vertikal
- `Grid` & `Grid.Col` - Layout horizontal
- `TextCustom` - Typography
- `BaseBox` / `AdminBasicBox` - Card container
- `ClickableCustom` - Interactive element
- `Feather` / `Ionicons` - Icons

### Constants
- `MainColor` - Color palette
- `ICON_SIZE_SMALL`, `ICON_SIZE_BASE` - Icon sizing

### Assets
- `@/assets/images/constants/crowd-hipmi.png` - Header image

---

## 🔍 Analisis Kondisi Saat Ini

### Kelemahan Design Sekarang
1. **Header Image**
   - Plain image tanpa overlay atau title
   - Tidak ada visual hierarchy

2. **Card List**
   - BaseBox terlalu simple, kurang depth
   - Tidak ada shadow atau elevation
   - Border radius mungkin kurang smooth
   - Spacing antar elemen kurang konsisten

3. **Typography**
   - Judul dan deskripsi kurang kontras
   - Tidak ada visual emphasis yang kuat

4. **Navigation**
   - Chevron icon terlalu plain
   - Tidak ada visual feedback saat hover/press

5. **Color Usage**
   - Kurang color accent untuk membedakan sections
   - Monoton dengan warna yang ada

---

## 🎨 Rencana Desain

### 1. Header Section Enhancement
```
┌─────────────────────────────────────┐
│  [Hero Image dengan Overlay]        │
│  ┌─────────────────────────────┐    │
│  │ Crowdfunding                │    │
│  │ Platform Investasi & Donasi │    │
│  └─────────────────────────────┘    │
└─────────────────────────────────────┘
```

**Implementasi:**
- Image dengan overlay gradient untuk text readability
- Title "Crowdfunding" dengan subtitle
- Rounded corners dengan overflow hidden
- Height: ~180-200px

### 2. Card Design Modern
```
┌─────────────────────────────────────┐
│  [Icon]  Investasi           →     │
│          Deskripsi singkat...      │
│          (2-3 baris max)           │
└─────────────────────────────────────┘
```

**Implementasi:**
- Card dengan:
  - Background gradient atau solid color dengan tint
  - Shadow/elevation untuk depth
  - Border radius: 12-16px
  - Padding: 16-20px
  - Icon di kiri (Investasi & Donasi)
  - Chevron di kanan dengan style yang lebih modern

### 3. Icon Integration
- **Investasi**: Icon grafik/trending (contoh: `trending-up`, `pie-chart`)
- **Donasi**: Icon hati/tangan (contoh: `heart`, `hand-heart`)
- Size: 40-48px untuk icon card
- Background icon: Circle dengan color accent

### 4. Color Scheme
```
Investasi:
- Primary: Blue/Teal gradient
- Accent: Soft blue background
- Icon: White on blue

Donasi:
- Primary: Orange/Red gradient
- Accent: Soft orange background
- Icon: White on orange
```

### 5. Typography Hierarchy
```
Header Title:     bold, x-large (20-22px)
Header Subtitle:  regular, small (14-15px), gray
Card Title:       bold, large (17-18px)
Card Description: regular, base (14px), gray
```

### 6. Spacing & Layout
```
Container padding: 16px
Card margin bottom: 12-16px
Card internal padding: 16px
Gap between elements: 8-12px
```

---

## 📝 Breakdown Task

### Task 1: Persiapan & Research
- [ ] Review komponen yang tersedia di `components/`
- [ ] Cek color palette di `constants/color-palet.ts`
- [ ] Identifikasi icon yang tersedia (Feather, Ionicons)
- [ ] Screenshot design sekarang untuk perbandingan

### Task 2: Setup Structure
- [ ] Buat constant untuk list menu (pindahkan dari component body)
- [ ] Tambahkan icon mapping untuk setiap menu item
- [ ] Setup color scheme untuk setiap card

### Task 3: Header Redesign
- [ ] Buat container dengan overflow hidden
- [ ] Tambahkan image dengan overlay gradient
- [ ] Tambahkan title "Crowdfunding" dengan text white
- [ ] Tambahkan subtitle (opsional)
- [ ] Test di berbagai ukuran layar

### Task 4: Card Component
- [ ] Buat custom card component atau modify BaseBox
- [ ] Tambahkan shadow/elevation
- [ ] Tambahkan border radius yang smooth
- [ ] Setup gradient background (opsional)
- [ ] Tambahkan visual feedback saat press

### Task 5: Icon Integration
- [ ] Pilih icon yang sesuai untuk setiap menu
- [ ] Buat icon container dengan background color
- [ ] Setup icon size dan positioning
- [ ] Test visibility di berbagai device

### Task 6: Typography & Content
- [ ] Apply text hierarchy (title, subtitle, desc)
- [ ] Truncate description jika terlalu panjang (max 2-3 baris)
- [ ] Ensure text contrast yang baik
- [ ] Test dengan text panjang

### Task 7: Polish & Refinement
- [ ] Adjust spacing dan padding
- [ ] Test di light/dark mode (jika applicable)
- [ ] Test di berbagai ukuran layar (responsive)
- [ ] Add smooth transitions/animations

### Task 8: Testing
- [ ] Test navigation ke setiap halaman
- [ ] Test di iOS simulator
- [ ] Test di Android emulator
- [ ] Test di device fisik (jika memungkinkan)
- [ ] Check performance (no lag saat scroll)

---

## 💻 Implementation Guidelines

### Code Structure Example
```typescript
// Constants
const CROWDFUNDING_MENU = [
  {
    title: "Investasi",
    desc: "Buat investasi dan jual beli saham lebih mudah dengan pengguna lain.",
    path: "investment/(tabs)",
    icon: "trending-up",
    color: MainColor.blue,
    gradient: ["#667eea", "#764ba2"],
  },
  // ...
];

// Component
export default function Crowdfunding() {
  const renderHeader = () => (
    <View style={styles.headerContainer}>
      <Image source={...} style={styles.headerImage} />
      <View style={styles.headerOverlay}>
        <TextCustom bold size="x-large">Crowdfunding</TextCustom>
        <TextCustom>Platform Investasi & Donasi</TextCustom>
      </View>
    </View>
  );

  const renderCard = (item: CrowdfundingMenuItem) => (
    <ClickableCustom onPress={...} style={styles.card}>
      <View style={[styles.iconContainer, { backgroundColor: item.color }]}>
        <Feather name={item.icon} size={24} color={MainColor.white} />
      </View>
      <Grid.Col span={8}>
        <TextCustom bold size="large">{item.title}</TextCustom>
        <TextCustom numberOfLines={2}>{item.desc}</TextCustom>
      </Grid.Col>
      <Feather name="chevron-right" size={ICON_SIZE_SMALL} />
    </ClickableCustom>
  );

  return (
    <ViewWrapper>
      <StackCustom>
        {renderHeader()}
        {CROWDFUNDING_MENU.map(renderCard)}
      </StackCustom>
    </ViewWrapper>
  );
}
```

### Style Guidelines
```typescript
const styles = StyleSheet.create({
  headerContainer: {
    position: 'relative',
    borderRadius: 16,
    overflow: 'hidden',
    marginBottom: 20,
  },
  headerOverlay: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    padding: 16,
    backgroundColor: 'rgba(0,0,0,0.6)',
  },
  card: {
    backgroundColor: MainColor.white,
    borderRadius: 16,
    padding: 16,
    marginBottom: 12,
    elevation: 4,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
  iconContainer: {
    width: 48,
    height: 48,
    borderRadius: 24,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 12,
  },
});
```

---

## ✅ Acceptance Criteria

### Visual
- [ ] Header dengan overlay text yang readable
- [ ] Card dengan shadow/elevation yang jelas
- [ ] Icon untuk setiap menu item
- [ ] Color accent yang berbeda untuk Investasi & Donasi
- [ ] Typography hierarchy yang jelas

### Functional
- [ ] Navigation ke halaman tujuan berfungsi
- [ ] Responsive di berbagai ukuran layar
- [ ] No console errors atau warnings
- [ ] Smooth scroll (60fps)

### Code Quality
- [ ] Code terorganisir dengan baik
- [ ] Components terpisah untuk reusability
- [ ] Constants untuk data statis
- [ ] Comments untuk logic yang kompleks
- [ ] TypeScript types yang proper

---

## 📊 Estimated Effort
- **Complexity**: Low-Medium
- **Time Estimate**: 2-3 jam
- **Risk Level**: Low (tidak ada breaking changes)

---

## 🔗 References
- Design Reference: `screens/Forum/ViewBeranda3.tsx` (untuk pagination pattern)
- Color Palette: `constants/color-palet.ts`
- Icons: Feather Icons, Ionicons
- Components: `components/_ShareComponent/`

---

## 📝 Notes
- Pastikan backward compatibility (tidak breaking existing features)
- Test di device dengan screen size berbeda
- Consider accessibility (text contrast, touch target size)
- Jika ada time, tambahkan micro-interactions (scale on press, dll)

---

**Created**: 2026-03-25
**Status**: Pending
**Priority**: Medium