Crowd

Add:
-  assets/images/constants/crowd-hipmi.png
-  app/(application)/(user)/crowdfunding/
-  app/(application)/(user)/investment/
-  app/(application)/(user)/donation/

Fix:
-  screens/Home/topFeatureSection.tsx
-  app/(application)/(user)/_layout.tsx

## No Issue

app/(application)/(user)/_layout.tsx

@@ -147,7 +147,6 @@ export default function UserLayout() {
           }}
         />
 
-
         {/* ========== End Collaboration Section ========= */}
 
         {/* ========== Voting Section ========= */}
@@ -182,6 +181,39 @@ export default function UserLayout() {
 
         {/* ========== End Voting Section ========= */}
 
+        {/* ========== Crowdfunding Section ========= */}
+        <Stack.Screen
+          name="crowdfunding/index"
+          options={{
+            title: "Crowdfunding",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
+        {/* ========== End Crowdfunding Section ========= */}
+
+        {/* ========== Investment Section ========= */}
+        <Stack.Screen
+          name="investment/create"
+          options={{
+            title: "Tambah Investasi",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
+        {/* ========== End Investment Section ========= */}
+        
+        {/* ========== Donation Section ========= */}
+        <Stack.Screen
+          name="donation/create"
+          options={{
+            title: "Tambah Donasi",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
+        {/* ========== End Donation Section ========= */}
+
         {/* ========== Job Section ========= */}
         <Stack.Screen
           name="job/create"

app/(application)/(user)/crowdfunding/index.tsx

@@ -0,0 +1,68 @@
+import {
+  BaseBox,
+  Grid,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { Feather } from "@expo/vector-icons";
+import { Image } from "expo-image";
+
+export default function Crowdfunding() {
+  const listPage = [
+    {
+      title: "Investasi",
+      desc: "Buat investasi dan jual beli saham lebih mudah dengan pengguna lain.",
+      path: "investment/create",
+    },
+    {
+      title: "Donasi",
+      desc: "Berbagi info untuk berdonasi lebih luas dan lebih efisien.",
+      path: "donation/create",
+    },
+  ];
+
+  return (
+    <ViewWrapper>
+      <StackCustom>
+        <Image
+          source={require("@/assets/images/constants/crowd-hipmi.png")}
+          contentFit="cover"
+          transition={1000}
+          style={{
+            width: "100%",
+            height: 200,
+            borderRadius: 10,
+          }}
+        />
+
+        {listPage.map((item, index) => (
+          <BaseBox key={index} paddingTop={10} paddingBottom={10} href={item.path as any} marginBottom={0}>
+            <Grid>
+              <Grid.Col span={10}>
+               <StackCustom gap={"xs"}>
+               <TextCustom bold size="large">
+                  {item.title}
+                </TextCustom>
+                <TextCustom>{item.desc}</TextCustom>
+               </StackCustom>
+              </Grid.Col>
+              <Grid.Col
+                span={2}
+                style={{ alignItems: "flex-end", justifyContent: "center" }}
+              >
+                <Feather
+                  name="chevron-right"
+                  size={ICON_SIZE_SMALL}
+                  color={MainColor.white}
+                />
+              </Grid.Col>
+            </Grid>
+          </BaseBox>
+        ))}
+      </StackCustom>
+    </ViewWrapper>
+  );
+}

app/(application)/(user)/donation/create.tsx

@@ -0,0 +1,11 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function DonationCreate() {
+  return (
+    <ViewWrapper>
+      <TextCustom bold size="large">
+        Coming Soon !
+      </TextCustom>
+    </ViewWrapper>
+  );
+}

app/(application)/(user)/investment/create.tsx

@@ -0,0 +1,11 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function InvestmentCreate() {
+  return (
+    <ViewWrapper>
+      <TextCustom bold size="large">
+        Buat Investasi
+      </TextCustom>
+    </ViewWrapper>
+  );
+}

screens/Home/topFeatureSection.tsx

@@ -30,33 +30,14 @@ export default function Home_FeatureSection() {
           <Ionicons name="cube" size={48} color="white" />
           <Text style={stylesHome.gridLabel}>Voting</Text>
         </TouchableOpacity>
-        <TouchableOpacity style={stylesHome.gridItem}>
+        <TouchableOpacity
+          style={stylesHome.gridItem}
+          onPress={() => router.push("/(application)/(user)/crowdfunding")}
+        >
           <Ionicons name="heart" size={48} color="white" />
           <Text style={stylesHome.gridLabel}>Crowdfunding</Text>
         </TouchableOpacity>
       </View>
-
-      {/* <View style={stylesHome.gridContainer}>
-        <TouchableOpacity
-          style={stylesHome.gridItem}
-          onPress={() => router.push("/(application)/event")}
-        >
-          <Ionicons name="analytics" size={48} color="white" />
-          <Text style={stylesHome.gridLabel}>Event</Text>
-        </TouchableOpacity>
-        <TouchableOpacity style={stylesHome.gridItem}>
-          <Ionicons name="share" size={48} color="white" />
-          <Text style={stylesHome.gridLabel}>Collaboration</Text>
-        </TouchableOpacity>
-        <TouchableOpacity style={stylesHome.gridItem}>
-          <Ionicons name="cube" size={48} color="white" />
-          <Text style={stylesHome.gridLabel}>Voting</Text>
-        </TouchableOpacity>
-        <TouchableOpacity style={stylesHome.gridItem}>
-          <Ionicons name="heart" size={48} color="white" />
-          <Text style={stylesHome.gridLabel}>Crowdfunding</Text>
-        </TouchableOpacity>
-      </View> */}
     </>
   );
 }