Add UI Landing Page

src/app/darmasaba/_com/main-page/apbdes/index.tsx

@@ -1,5 +1,7 @@
 import colors from '@/con/colors';
-import { BackgroundImage, Box, Button, Group, SimpleGrid, Stack, Text } from '@mantine/core';
+import { ActionIcon, BackgroundImage, Box, Button, Flex, Group, SimpleGrid, Stack, Text } from '@mantine/core';
+import { IconDownload } from '@tabler/icons-react';
+import Link from 'next/link';
 
 const data = [
   {
@@ -50,7 +52,6 @@ function Apbdes() {
             base: 1,
             sm: 3,
           }}
-          pb={50}
         >
           {data.map((v, k) => {
             return (
@@ -80,23 +81,29 @@ function Apbdes() {
                         textAlign: "center",
                       }}>{v.title}</Text>
                   </Box>
-                    <Text
-                      fw={"bold"}
-                      c={"white"}
-                      size={"3.5rem"}
-                      style={{
-                        textAlign: "center",
-                      }}>{v.value}</Text>
+                  <Text
+                    fw={"bold"}
+                    c={"white"}
+                    size={"3.5rem"}
+                    style={{
+                      textAlign: "center",
+                    }}>{v.value}</Text>
                   <Group justify="center">
-                    <Button px={46} radius={"100"} size="md" bg={colors["blue-button"]}>
-                      Detail
-                    </Button>
-                  </Group>
+                  <ActionIcon px={70} py={20} radius={"xl"} size="md" bg={colors["blue-button"]}>
+                    <Flex gap={"md"}>
+                      <IconDownload size={20} />
+                      <Text fz={"sm"} c={"white"}>Download</Text>
+                    </Flex>
+                  </ActionIcon>
+                </Group>
                 </Stack>
               </BackgroundImage>
             )
           })}
         </SimpleGrid>
+        <Group pb={80} justify='center'>
+          <Button component={Link} href="/darmasaba/apbdesa" radius={"lg"} bg={colors["blue-button"]} fz={"h4"}>Lihat Semua</Button>
+        </Group>
       </Stack>
     </>
   );

src/app/darmasaba/_com/main-page/desaantikorupsi/index.tsx

@@ -1,9 +1,9 @@
-"use client";
+'use client'
 import colors from "@/con/colors";
 import { Box, Button, Center, Container, Flex, Paper, SimpleGrid, Stack, Text, useMantineTheme } from "@mantine/core";
 import { useMediaQuery } from "@mantine/hooks";
 import { IconClipboardText } from "@tabler/icons-react";
-import { motion } from "motion/react";
+import Link from "next/link";
 
 function DesaAntiKorupsi() {
   const data = [
@@ -48,7 +48,7 @@ function DesaAntiKorupsi() {
         </Center>
         <Text ta={"center"} fz={"1.4rem"}>Desa antikorupsi mendorong pemerintahan jujur dan transparan. Keuangan desa dikelola terbuka dengan melibatkan warga mengawasi anggaran, sehingga digunakan tepat sasaran sesuai kebutuhan.</Text>
         <Center py={20}>
-          <Button radius={"lg"} fz={"h4"} bg={colors["blue-button"]}>Selengkapnya</Button>
+          <Button radius={"lg"} fz={"h4"} bg={colors["blue-button"]} component={Link} href={"/darmasaba/desaantikorupsi"}>Selengkapnya</Button>
         </Center>
       </Container>
       <SimpleGrid
@@ -59,10 +59,8 @@ function DesaAntiKorupsi() {
         }}>
         {data.map((v, k) => {
           return (
-            <motion.div
+            <Box
               key={k}
-
-              whileTap={{ scale: 0.8 }}
             >
               <Paper p={"lg"} >
                 <Flex gap={"lg"} justify={"center"} align={"center"}>
@@ -74,15 +72,12 @@ function DesaAntiKorupsi() {
                       </Box>
                       <Box px={20}>
                         <Text fz={"sm"} ta={"justify"}>{v.deskripsi}</Text>
-                        <Box pt={10}>
-                          <Button bg={colors["blue-button"]} radius={"lg"}>Download</Button>
-                        </Box>
                       </Box>
                     </Flex>
                   </Box>
                 </Flex>
               </Paper>
-            </motion.div>
+            </Box>
           )
         })}
       </SimpleGrid>

src/app/darmasaba/_com/main-page/potensi/index.tsx

@@ -16,6 +16,7 @@ import {
 } from "@mantine/core";
 import _ from "lodash";
 import { motion } from "motion/react";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
 import useSWR from "swr";
 
@@ -133,7 +134,7 @@ function Potensi() {
       </SimpleGrid>
       <Stack align="center">
         <Group>
-          <Button onClick={() => router.push("/darmasaba/desa/potensi")} color={colors["blue-button"]} variant="outline" radius={100} size="md">
+          <Button component={Link} href={"/darmasaba/desa/potensi"} color={colors["blue-button"]} variant="outline" radius={100} size="md">
             Selengkapnya
           </Button>
         </Group>

src/app/darmasaba/_com/main-page/prestasi/index.tsx

@@ -1,35 +1,40 @@
 import colors from "@/con/colors";
 import { BackgroundImage, Box, Button, Center, Container, Group, SimpleGrid, Stack, Text } from "@mantine/core";
+import Link from "next/link";
 
 const data = [
     {
         id: 1,
-        title: "Tata Kelola Pemerintahan",
-        image: "/api/img/lombadesa.jpg",
-        deskripsi: "Juara 1 Lomba Desa Tingkat Kabupaten/Kota Tahun [XXXX]"
-    },
-    {
+        title: "Olahraga dan Kepemudaan",
+        deskripsi: "Tim Bola Voli Putri Dharma Temaja meraih juara 3 dalam Turnamen Bola Voli Mangupura Cup 2024 kategori Putri Se-Bali ",
+        image: "/api/img/prestasi-voli.jpeg",
+        link: "/darmasaba/prestasi/voli"
+      },
+      {
         id: 2,
-        title: "Tata Kelola Pemerintahan",
-        image: "/api/img/lombadesa.jpg",
-        deskripsi: "Juara 1 Lomba Desa Tingkat Kabupaten/Kota Tahun [XXXX]"
-    },
-    {
+        title: "Hukum dan Kesadaran Masyarakat",
+        deskripsi: "Prestasi Juara 3 dalam Lomba Keluarga Sadar Hukum Kabupaten Badung Tahun 2024",
+        image: "/api/img/prestasilombahukum.png",
+        link: "/darmasaba/prestasi/hukum"
+      },
+      {
         id: 3,
-        title: "Tata Kelola Pemerintahan",
-        image: "/api/img/lombadesa.jpg",
-        deskripsi: "Juara 1 Lomba Desa Tingkat Kabupaten/Kota Tahun [XXXX]"
-    },
+        title: "Tata Kelola dan Inovasi Desa",
+        deskripsi: "Peringkat 5 Dalam Ajang Bergengsi Mangupura Award",
+        image: "/api/img/prestasi-peringkat-5.jpeg",
+        link: "/darmasaba/desa/prestasi/lomba-hukum"
+      }
 ]
 function Prestasi() {
     return (
         <>
             <Stack p={"sm"}>
                 <Container w={{ base: "100%", md: "80%" }} p={"xl"}>
-                    <Center>
-                        <Text fz={"3.4rem"}>Prestasi Desa</Text>
-                    </Center>
+                    <Text ta={"center"} fz={"3.4rem"}>Prestasi Desa</Text>
                     <Text fz={"1.4rem"} ta={"center"}>Kami bangga dengan apa yang telah dicapai desa kita hingga saat ini. Semoga prestasi ini menjadi inspirasi untuk terus berkarya dan berinovasi demi kemajuan bersama.</Text>
+                    <Center pt={20}>
+                        <Button radius={"lg"} fz={"h4"} color={colors["blue-button"]} component={Link} href="/darmasaba/prestasi">Selengkapnya</Button>
+                    </Center>
                 </Container>
                 <Box py={50}>
                     <SimpleGrid
@@ -76,7 +81,7 @@ function Prestasi() {
                                             {v.deskripsi}
                                         </Text>
                                         <Group justify="center">
-                                            <Button px={46} radius={"100"} size="md" bg={colors["blue-button"]}>
+                                            <Button component={Link} href={v.link} px={46} radius={"100"} size="md" bg={colors["blue-button"]}>
                                                 Lihat Detail
                                             </Button>
                                         </Group>

src/app/darmasaba/_com/main-page/sdgs/index.tsx

@@ -2,6 +2,7 @@
 import colors from "@/con/colors";
 import { Box, Button, Center, Container, Image, Paper, SimpleGrid, Stack, Text, useMantineTheme } from "@mantine/core";
 import { useMediaQuery } from "@mantine/hooks";
+import Link from "next/link";
 
 export default function SDGS() {
     const theme = useMantineTheme();
@@ -33,7 +34,7 @@ export default function SDGS() {
                         </SimpleGrid>
                     </Paper>
                     <Center>
-                        <Button radius={"lg"} fz={"1.2rem"} mt={20} bg={colors["blue-button"]}>Selengkapnya</Button>
+                        <Button component={Link} href={"/darmasaba/sdgsdesa"} radius={"lg"} fz={"1.2rem"} mt={20} bg={colors["blue-button"]}>Selengkapnya</Button>
                     </Center>
                 </Box>
             </Container>