#style:

Deskripsi :
- Perbaikan UI Donasi
## NO Issue

src/app_modules/crowd/main/layout.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
-import ComponentGlobal_HeaderTamplate from "@/app_modules/_global/header_tamplate";
-import { useRouter } from "next/navigation";
+import { RouterHome } from "@/app/lib/router_hipmi/router_home";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
 import React from "react";
 
 export default function LayoutMainCrowd({
@@ -10,19 +10,18 @@ export default function LayoutMainCrowd({
 }: {
   children: React.ReactNode;
 }) {
-  const router = useRouter();
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
         header={
-          <ComponentGlobal_HeaderTamplate
-            route="/dev/home"
-            title="HIPMI Crowd Funding"
+          <UIGlobal_LayoutHeaderTamplate
+            title="Crowd Funding"
+            routerLeft={RouterHome.main_home}
           />
         }
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/crowd/main/view.tsx

@@ -1,14 +1,15 @@
 "use client";
 
 import { RouterCrowd } from "@/app/lib/router_hipmi/router_crowd";
-import { Warna } from "@/app/lib/warna";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
 import { gs_donasi_hot_menu } from "@/app_modules/donasi/global_state";
 import { gs_investasiFooter } from "@/app_modules/investasi/g_state";
 import {
   AspectRatio,
-  Button,
-  Center,
-  Flex,
   Grid,
   Image,
   Loader,
@@ -21,7 +22,6 @@ import { IconChevronRight } from "@tabler/icons-react";
 import { useAtom } from "jotai";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import toast from "react-simple-toasts";
 
 export default function MainCrowd() {
   const router = useRouter();
@@ -29,22 +29,38 @@ export default function MainCrowd() {
   const [donasiHotMenu, setDonasiHotMenu] = useAtom(gs_donasi_hot_menu);
   const [loadingInv, setLoadingInv] = useState(false);
   const [loadingDon, setLoadingDon] = useState(false);
+
   return (
     <>
       <Stack>
         <Paper>
-          <AspectRatio ratio={16 / 9}>
+          {/* <AspectRatio ratio={16 / 9}>
             <Paper radius={"md"}>
-              <Image alt="" src={"/aset/investasi/logo-crowd-panjang.png"} />
             </Paper>
-          </AspectRatio>
+          </AspectRatio> */}
+          <Image
+            alt="Logo"
+            src={"/aset/investasi/logo-crowd-panjang.png"}
+            mah={"100%"}
+            styles={{
+              image: {
+                borderRadius: "20px",
+              },
+            }}
+          />
         </Paper>
+
         <Stack>
+          {/* INVESTASI */}
           <Paper
-            shadow="lg"
-            p={"md"}
-            radius={"md"}
-            bg={"teal.4"}
+            style={{
+              cursor: "pointer",
+              padding: "15px",
+              border: `2px solid ${AccentColor.blue}`,
+              borderRadius: "10px",
+              backgroundColor: MainColor.darkblue,
+              color: "white",
+            }}
             onClick={() => {
               setLoadingInv(true);
               router.push(RouterCrowd.investasi);
@@ -61,16 +77,26 @@ export default function MainCrowd() {
               </Grid.Col>
               <Grid.Col span={2}>
                 <Stack h={"100%"} justify="center" align="center">
-                  {loadingInv ? <Loader /> : <IconChevronRight />}
+                  {loadingInv ? (
+                    <ComponentGlobal_Loader />
+                  ) : (
+                    <IconChevronRight />
+                  )}
                 </Stack>
               </Grid.Col>
             </Grid>
           </Paper>
+
+          {/* DONASI */}
           <Paper
-            shadow="lg"
-            bg={"blue.3"}
-            radius={"md"}
-            p={"md"}
+            style={{
+              cursor: "pointer",
+              padding: "15px",
+              border: `2px solid ${AccentColor.blue}`,
+              borderRadius: "10px",
+              backgroundColor: MainColor.darkblue,
+              color: "white",
+            }}
             onClick={() => {
               setLoadingDon(true);
               router.push(RouterCrowd.donasi);
@@ -87,7 +113,11 @@ export default function MainCrowd() {
               </Grid.Col>
               <Grid.Col span={2}>
                 <Stack h={"100%"} justify="center" align="center">
-                  {loadingDon ? <Loader /> : <IconChevronRight />}
+                  {loadingDon ? (
+                    <ComponentGlobal_Loader />
+                  ) : (
+                    <IconChevronRight />
+                  )}
                 </Stack>
               </Grid.Col>
             </Grid>

src/app_modules/crowd/splash/view.tsx

@@ -1,23 +1,20 @@
 "use client";
 
-import { Warna } from "@/app/lib/warna";
-import { Center, Image, Paper, Stack, Text, Title } from "@mantine/core";
+import { RouterCrowd } from "@/app/lib/router_hipmi/router_crowd";
+import UIGlobal_SplashScreen from "@/app_modules/_global/ui/ui_splash";
 import { useShallowEffect } from "@mantine/hooks";
+import { IconHeartHandshake } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 
 export default function SplashCrowd() {
   const router = useRouter();
 
   useShallowEffect(() => {
-    setTimeout(() => router.push("/dev/crowd/main"), 1000);
+    setTimeout(() => router.push(RouterCrowd.main), 1000);
   }, []);
   return (
     <>
-      <Center h={"100vh"}>
-        <Paper p={{ base: 50, md: 60, lg: 80 }}>
-          <Image alt="" src={"/aset/investasi/logo-crowd.png"} />
-        </Paper>
-      </Center>
+      <UIGlobal_SplashScreen icon={<IconHeartHandshake size={300} />} />
     </>
   );
 }