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

// 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

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