Add UI Landing Page

package.json

@@ -13,6 +13,7 @@
     "seed": "bun run prisma/seed.ts"
   },
   "dependencies": {
+    "@cubejs-client/core": "^0.31.0",
     "@elysiajs/cors": "^1.2.0",
     "@elysiajs/eden": "^1.2.0",
     "@elysiajs/stream": "^1.1.0",
@@ -30,6 +31,7 @@
     "add": "^2.0.6",
     "animate.css": "^4.1.1",
     "bun": "^1.2.2",
+    "chart.js": "^4.4.8",
     "elysia": "^1.2.12",
     "embla-carousel-autoplay": "^8.5.2",
     "embla-carousel-react": "^7.1.0",
@@ -60,6 +62,7 @@
     "postcss": "^8.5.1",
     "postcss-preset-mantine": "^1.17.0",
     "postcss-simple-vars": "^7.0.1",
-    "typescript": "^5"
+    "typescript": "^5",
+    "parcel": "^2.6.2"
   }
 }

src/app/darmasaba/(pages)/desa/profile/page.tsx

@@ -7,6 +7,7 @@ import VisimisiDesa from './ui/visimisiDesa';
 import LambangDesa from './ui/lambangDesa';
 import MaskotDesa from './ui/maskotDesa';
 import ProfilPerbekel from './ui/profilPerbekel';
+import LembagaDesa from './ui/lembagaDesa';
 
 function Page() {
   return (
@@ -28,6 +29,7 @@ function Page() {
         <LambangDesa />
         <MaskotDesa />
         <ProfilPerbekel />
+        <LembagaDesa/>
       </Box>
     </Stack>
   );

src/app/darmasaba/(pages)/desa/profile/ui/lembagaDesa.tsx

@@ -0,0 +1,39 @@
+import colors from '@/con/colors';
+import { Box, Center, Image, Paper, Stack, Text } from '@mantine/core';
+
+function LembagaDesa() {
+  return (
+    <Box pb={70}>
+      <Stack align='center' gap={0}>
+        <Box pb={30}>
+          <Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={"2.5rem"}>Lembaga Desa</Text>
+          <Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={"h2"}>Badan Permusyawaratan Desa (BPD)</Text>
+        </Box>
+        <Paper mb={50} p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
+          <Center pb={10}>
+            <Image src={"/api/img/bpddarmasaba.png"} alt='' w={{ base: 600, md: 1000 }} />
+          </Center>
+        </Paper>
+        <Box pb={30}>
+          <Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={"2.5rem"}>Lembaga pemberdayaan Masyarakat (LPM)</Text>
+        </Box>
+        <Paper mb={50} p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
+          <Center pb={10}>
+            <Image src={"/api/img/bpddarmasaba.png"} alt='' w={{ base: 600, md: 1000 }} />
+          </Center>
+        </Paper>
+        <Box pb={30}>
+          <Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={"2.5rem"}>Perangkat Desa</Text>
+          <Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={"h2"}>Struktur Organisasi Tata Kerja Pemerintahan Desa Darmasaba</Text>
+        </Box>
+        <Paper mb={50} p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
+          <Center pb={10}>
+            <Image src={"/api/img/bpddarmasaba.png"} alt='' w={{ base: 600, md: 1000 }} />
+          </Center>
+        </Paper>
+      </Stack>
+    </Box >
+  );
+}
+
+export default LembagaDesa;

src/app/darmasaba/(pages)/desa/profile/ui/profileDesa.tsx

@@ -15,7 +15,6 @@ function ProfileDesa() {
         <Center>
           <Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
             <SimpleGrid
-             
               cols={{
                 base: 1,
                 sm: 3

src/app/darmasaba/(tambahan)/apbdesa/page.tsx

@@ -0,0 +1,120 @@
+import colors from '@/con/colors';
+import { ActionIcon, BackgroundImage, Box, Container, Flex, Group, SimpleGrid, Stack, Text } from '@mantine/core';
+import { IconDownload } from '@tabler/icons-react';
+import BackButton from '../../(pages)/desa/layanan/_com/BackButto';
+
+const data = [
+  {
+    id: 1,
+    title: "Pendapatan",
+    image: "/api/img/pendapatan.jpeg",
+    value: "Rp 495M"
+  },
+  {
+    id: 2,
+    title: "Belanja",
+    image: "/api/img/belanja.jpeg",
+    value: "Rp 395M"
+  },
+  {
+    id: 3,
+    title: "Pembiayaan",
+    image: "/api/img/pembiayaan.jpeg",
+    value: "Rp 295M"
+  },
+  {
+    id: 4,
+    title: "APBDesa 2025",
+    image: "/api/img/apb-des.jpg",
+    value: "Rp 500M"
+  },
+  {
+    id: 5,
+    title: "APBDesa 2024",
+    image: "/api/img/apb-des.jpg",
+    value: "Rp 450M"
+  },
+  {
+    id: 6,
+    title: "APBDesa 2023",
+    image: "/api/img/apb-des.jpg",
+    value: "Rp 400M"
+  },
+]
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={22}>
+      <Container w={{ base: "100%", md: "50%" }}>
+        <BackButton />
+        <Stack align="center" gap={0}>
+          <Text fz={"3.4rem"} fw={"bold"}>
+            APBDes
+          </Text>
+          <Text
+            py={10}
+            ta={"justify"}
+          >
+            Transparansi APBDes Darmasaba adalah langkah nyata menuju tata kelola pemerintahan desa yang bersih dan bertanggung jawab. Adapun APBDes sebagai berikut:
+          </Text>
+        </Stack>
+      </Container>
+      <SimpleGrid
+        px={50}
+        cols={{
+          base: 1,
+          sm: 3,
+        }}
+      >
+        {data.map((v, k) => {
+          return (
+            <BackgroundImage
+              key={k}
+              src={v.image}
+              h={350}
+              radius={16}
+              pos={"relative"}
+            >
+              <Box
+                style={{
+                  borderRadius: 16,
+                  zIndex: 0
+                }}
+                pos={"absolute"}
+                w={"100%"}
+                h={"100%"}
+                bg={colors.trans.dark[2]}
+              />
+              <Stack justify='space-between' h={"100%"} gap={0} p={"lg"} pos={"relative"}>
+                <Box p={"lg"}>
+                  <Text
+                    c={"white"}
+                    size={"1.5rem"}
+                    style={{
+                      textAlign: "center",
+                    }}>{v.title}</Text>
+                </Box>
+                <Text
+                  fw={"bold"}
+                  c={"white"}
+                  size={"3.5rem"}
+                  style={{
+                    textAlign: "center",
+                  }}>{v.value}</Text>
+                <Group justify="center">
+                  <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>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(tambahan)/desaantikorupsi/(detail)/lokal/page.tsx

@@ -0,0 +1,73 @@
+import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
+import colors from '@/con/colors';
+import { Box, Button, Container, Flex, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { IconClipboardText } from '@tabler/icons-react';
+
+const data = [
+  {
+    judul: "PENGUATAN PENGAWASAN",
+    deskripsi: "5.1 ADANYA BUDAYA LOKAL/HUKUM ADAT YANG MENDORONG UPAYA PENCEGAHAN TINDAK PIDANA KORUPSI",
+    icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
+  },
+  {
+    judul: "PENGUATAN PENGAWASAN",
+    deskripsi: "5.2 ADANYA TOKOH MASYARAKAT, TOKOH AGAMA, TOKOH ADAT, TOKOH PEMUDA, DAN KAUM PEREMPUAN YANG MENDORONG UPAYA PENCEGAHAN TINDAK PIDANA KORUPSI",
+    icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
+  }
+]
+
+
+
+function Lokal() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={22}>
+      <Container w={{ base: "100%", md: "50%" }}>
+        <BackButton />
+        <Stack align="center" gap={0}>
+          <Text fz={"3.4rem"} fw={"bold"} ta={"center"}>
+            Kearifan Lokal
+          </Text>
+          <Text
+            py={10}
+            ta={"justify"}
+          >
+            Sebagai bagian dari Program Desa Anti Korupsi, Desa Darmasaba menerapkan kearifan lokal sebagai strategi dalam menciptakan pemerintahan desa yang bersih, transparan, dan berintegritas. Kearifan lokal ini menjadi landasan moral dan budaya yang memperkuat nilai-nilai kejujuran, gotong royong, serta kepedulian sosial dalam kehidupan masyarakat. Adapun beberapa Kearifan Lokal :
+          </Text>
+        </Stack>
+      </Container>
+      <SimpleGrid
+        px={50}
+        cols={{
+          base: 1,
+          sm: 2,
+        }}>
+        {data.map((v, k) => {
+          return (
+            <Box
+              key={k}
+            >
+              <Paper p={"lg"} >
+                <Stack h="100%">
+                  <Text fz={"lg"} ta={"center"} c={colors["blue-button"]}>{v.judul}</Text>
+                  <Flex direction={{ base: "column", md: "row" }} align="center" justify="center" style={{ flex: 1 }}>
+                    <Box mb={{ base: 10, md: 0 }}>
+                      {v.icon}
+                    </Box>
+                    <Stack px={{ base: 0, md: 20 }} gap={10} style={{ flex: 1 }}>
+                      <Text fz={"sm"} ta={"justify"}>{v.deskripsi}</Text>
+                      <Button bg={colors["blue-button"]} radius={"lg"} w="fit-content">Download</Button>
+                    </Stack>
+                  </Flex>
+                </Stack>
+              </Paper>
+            </Box>
+          );
+        })}
+      </SimpleGrid >
+    </Stack >
+  );
+}
+
+export default Lokal;
+
+

src/app/darmasaba/(tambahan)/desaantikorupsi/(detail)/partisipasi/page.tsx

@@ -0,0 +1,75 @@
+import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
+import colors from '@/con/colors';
+import { Box, Button, Container, Flex, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { IconClipboardText } from '@tabler/icons-react';
+
+const data = [
+  {
+    judul: "PENGUATAN TATA LAKSANA",
+    deskripsi: "4.1 ADANYA PARTISIPASI DAN KETERLIBATAN MASYARAKAT DALAM PENYUSUNAN RKP DESA",
+    icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
+  },
+  {
+    judul: "PENGUATAN TATA LAKSANA",
+    deskripsi: "4.2 ADANYA KESADARAN MASYARAKAT DALAM MENCEGAH TERJADINYA PRAKTIK GRATIFIKASI, SUAP DAN KONFLIK KEPENTINGAN",
+    icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
+  },
+  {
+    judul: "PENGUATAN TATA LAKSANA",
+    deskripsi: "4.3 ADANYA KETERLIBATAN LEMBAGA KEMASYARAKATAN DALAM PELAKSANAAN PEMBANGUNAN DESA",
+    icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
+  },
+]
+function Partisipasi() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={22}>
+      <Container w={{ base: "100%", md: "50%" }}>
+        <BackButton />
+        <Stack align="center" gap={0}>
+          <Text fz={"3.4rem"} fw={"bold"} ta={"center"}>
+            Penguatan Tata Laksana
+          </Text>
+          <Text
+            py={10}
+            ta={"justify"}
+          >
+            Sebagai bagian dari Program Desa Anti Korupsi, Desa Darmasaba menekankan penguatan partisipasi masyarakat agar warga dapat ikut serta dalam pengawasan, pengambilan keputusan, dan pelaksanaan pembangunan desa yang transparan dan akuntabel. Adapun beberapa Penguatan Partisipasi Masyarakat :
+          </Text>
+        </Stack>
+      </Container>
+      <SimpleGrid
+        px={50}
+        cols={{
+          base: 1,
+          sm: 2,
+        }}>
+        {data.map((v, k) => {
+          return (
+            <Box
+              key={k}
+            >
+              <Paper p={"lg"} >
+                <Stack h="100%">
+                  <Text fz={"lg"} ta={"center"} c={colors["blue-button"]}>{v.judul}</Text>
+                  <Flex direction={{ base: "column", md: "row" }} align="center" justify="center" style={{ flex: 1 }}>
+                    <Box mb={{ base: 10, md: 0 }}>
+                      {v.icon}
+                    </Box>
+                    <Stack px={{ base: 0, md: 20 }} gap={10} style={{ flex: 1 }}>
+                      <Text fz={"sm"} ta={"justify"}>{v.deskripsi}</Text>
+                      <Button bg={colors["blue-button"]} radius={"lg"} w="fit-content">Download</Button>
+                    </Stack>
+                  </Flex>
+                </Stack>
+              </Paper>
+            </Box>
+          );
+        })}
+      </SimpleGrid >
+    </Stack >
+  );
+}
+
+export default Partisipasi;
+
+

src/app/darmasaba/(tambahan)/desaantikorupsi/(detail)/pelayanan/page.tsx

@@ -0,0 +1,88 @@
+import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
+import colors from '@/con/colors';
+import { Box, Button, Container, Flex, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { IconClipboardText } from '@tabler/icons-react';
+
+const data = [
+  {
+    judul: "PENGUATAN PENGAWASAN",
+    deskripsi: "3.1 ADANYA LAYANAN PENGADUAN BAGI MASYARAKAT",
+    icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
+  },
+  {
+    judul: "PENGUATAN PENGAWASAN",
+    deskripsi: "3.2 ADANYA SURVEY KEPUASAN MASYARAKAT (SKM) TERHADAP LAYANAN PEMERINTAH DESA",
+    icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
+  },
+  {
+    judul: "PENGUATAN PENGAWASAN",
+    deskripsi: "3.3 ADANYA KETERBUKAAN AKSES MASYARAKAT TERHADAP INFORMASI LAYANAN PEMERINTAH DESA (KESEHATAN, PENDIDIKAN, SOSIAL, LINGKUNGAN, TRANTIBUMLINMAS, PEKERJAAN UMUM) PEMBANGUNAN, KEPENDUDUKAN, KEUANGAN, DAN PELAYANAN LAINNYA",
+    icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
+  },
+  {
+    judul: "PENGUATAN PENGAWASAN",
+    deskripsi: "3.4 ADANYA MEDIA INFORMASI TENTANG APBDES DI BALAI DESA DAN/ATAU TEMPAT LAIN YANG MUDAH DIAKSES OLEH MASYARAKAT",
+    icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
+  },
+  {
+    judul: "PENGUATAN PENGAWASAN",
+    deskripsi: "3.5 ADANYA MAKLUMAT PELAYANAN",
+    icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
+  },
+]
+
+
+
+function Pelayanan() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={22}>
+      <Container w={{ base: "100%", md: "50%" }}>
+        <BackButton />
+        <Stack align="center" gap={0}>
+          <Text fz={"3.4rem"} fw={"bold"} ta={"center"}>
+            Penguatan Kualitas Pelayanan Publik
+          </Text>
+          <Text
+            py={10}
+            ta={"justify"}
+          >
+            Sebagai bagian dari Program Desa Anti Korupsi, Desa Darmasaba berkomitmen untuk meningkatkan kualitas pelayanan publik agar lebih transparan, cepat, dan bebas dari pungutan liar. Penguatan ini bertujuan untuk memastikan masyarakat mendapatkan pelayanan yang profesional, akuntabel, dan sesuai dengan standar yang telah ditetapkan. Adapun beberapa Penguatan Kualitas Pelayanan Publik :
+          </Text>
+        </Stack>
+      </Container>
+      <SimpleGrid
+        px={50}
+        cols={{
+          base: 1,
+          sm: 2,
+        }}>
+        {data.map((v, k) => {
+          return (
+            <Box
+              key={k}
+            >
+              <Paper p={"lg"} h="100%">
+                <Stack h="100%">
+                  <Text fz={"lg"} ta={"center"} c={colors["blue-button"]}>{v.judul}</Text>
+                  <Flex direction={{ base: "column", md: "row" }} align="center" justify="center" style={{ flex: 1 }}>
+                    <Box mb={{ base: 10, md: 0 }}>
+                      {v.icon}
+                    </Box>
+                    <Stack px={{ base: 0, md: 20 }} gap={10} style={{ flex: 1 }}>
+                      <Text fz={"sm"} ta={"justify"}>{v.deskripsi}</Text>
+                      <Button bg={colors["blue-button"]} radius={"lg"} w="fit-content">Download</Button>
+                    </Stack>
+                  </Flex>
+                </Stack>
+              </Paper>
+            </Box>
+          );
+        })}
+      </SimpleGrid >
+    </Stack >
+  );
+}
+
+export default Pelayanan;
+
+

src/app/darmasaba/(tambahan)/desaantikorupsi/(detail)/pengawasan/page.tsx

@@ -0,0 +1,78 @@
+import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
+import colors from '@/con/colors';
+import { Box, Button, Container, Flex, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { IconClipboardText } from '@tabler/icons-react';
+
+const data = [
+  {
+    judul: "PENGUATAN PENGAWASAN",
+    deskripsi: "2.1 ADANYA KEGIATAN PENGAWASAN DAN EVALUASI KINERJA PERANGKAT DESA",
+    icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
+  },
+  {
+    judul: "PENGUATAN PENGAWASAN",
+    deskripsi: "2.2 ADANYA TINDAK LANJUT HASIL PEMBINAAN, PETUNJUK, ARAH, PENGAWASAN, DAN PEMERIKSAAN DARI PEMERINTAH PUSAT/DAERAH",
+    icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
+  },
+  {
+    judul: "PENGUATAN PENGAWASAN",
+    deskripsi: "2.3 TIDAK ADANYA APARATUR DESA DALAM 3(TIGA) TAHUN TERAKHIR YANG TERJERAT TINDAKAN PIDANA KORUPSI",
+    icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
+  },
+]
+
+
+
+function Pengawasan() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={22}>
+      <Container w={{ base: "100%", md: "50%" }}>
+        <BackButton />
+        <Stack align="center" gap={0}>
+          <Text fz={"3.4rem"} fw={"bold"} ta={"center"}>
+            Penguatan Pengawasan
+          </Text>
+          <Text
+            py={10}
+            ta={"justify"}
+          >
+            Sebagai bagian dari Program Desa Anti Korupsi, Desa Darmasaba menerapkan penguatan pengawasan untuk memastikan transparansi dan akuntabilitas dalam pengelolaan pemerintahan desa. Sistem pengawasan ini melibatkan berbagai pihak, termasuk aparat desa, masyarakat, dan lembaga terkait, agar tidak ada celah bagi praktik korupsi. Adapun beberapa Penguatan Pengawasan :
+          </Text>
+        </Stack>
+      </Container>
+      <SimpleGrid
+        px={50}
+        cols={{
+          base: 1,
+          sm: 2,
+        }}>
+        {data.map((v, k) => {
+          return (
+            <Box
+              key={k}
+            >
+              <Paper p={"lg"} >
+                <Stack h="100%">
+                  <Text fz={"lg"} ta={"center"} c={colors["blue-button"]}>{v.judul}</Text>
+                  <Flex direction={{ base: "column", md: "row" }} align="center" justify="center" style={{ flex: 1 }}>
+                    <Box mb={{ base: 10, md: 0 }}>
+                      {v.icon}
+                    </Box>
+                    <Stack px={{ base: 0, md: 20 }} gap={10} style={{ flex: 1 }}>
+                      <Text fz={"sm"} ta={"justify"}>{v.deskripsi}</Text>
+                      <Button bg={colors["blue-button"]} radius={"lg"} w="fit-content">Download</Button>
+                    </Stack>
+                  </Flex>
+                </Stack>
+              </Paper>
+            </Box>
+          );
+        })}
+      </SimpleGrid >
+    </Stack >
+  );
+}
+
+export default Pengawasan;
+
+

src/app/darmasaba/(tambahan)/desaantikorupsi/(detail)/tatalaksana/page.tsx

@@ -0,0 +1,90 @@
+import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
+import colors from '@/con/colors';
+import { Box, Button, Container, Flex, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { IconClipboardText } from '@tabler/icons-react';
+
+const data = [
+  {
+    judul: "PENGUATAN TATA LAKSANA",
+    deskripsi: "1.1 ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP TENTANG PERENCANAAN, PELAKSANAAN, PENATAUSAHAAN DAN PERTANGGUNG JAWABAN APBDES BESERTA IMPLEMENTASINYA",
+    icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
+  },
+  {
+    judul: "PENGUATAN TATA LAKSANA",
+    deskripsi: "1.2 ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP MENGENAI MEKANISME EVALUASI KINERJA PERANGKAT DESA",
+    icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
+  },
+  {
+    judul: "PENGUATAN TATA LAKSANA",
+    deskripsi: "1.3 ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP TENTANG PENGENDALIAN GRATIFIKASI, SUAP DAN KONFLIK KEPENTINGAN",
+    icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
+  },
+  {
+    judul: "PENGUATAN TATA LAKSANA",
+    deskripsi: "1.4 PERJANJIAN KERJA SAMA ANTARA PELAKSANA KEGIATAN  ANGGARAN DENGAN PIHAK PENYEDIA, DAN TELAH MELALUI PROSES PENGADAAN BARANG/JASA DI DESA",
+    icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
+  },
+  {
+    judul: "PENGUATAN TATA LAKSANA",
+    deskripsi: "1.5 ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP TENTANG PAKTA INTEGRITAS DAN SEJENISNYA",
+    icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
+  },
+  {
+    judul: "PENGUATAN TATA LAKSANA",
+    deskripsi: "1.6 ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP TENTANG PERENCANAAN, PELAKSANAAN, PENATAUSAHAAN DAN PERTANGGUNG JAWABAN APBDES BESERTA IMPLEMENTASINYA",
+    icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
+  },
+]
+function Tatalaksana() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={22}>
+      <Container w={{ base: "100%", md: "50%" }}>
+        <BackButton />
+        <Stack align="center" gap={0}>
+          <Text fz={"3.4rem"} fw={"bold"} ta={"center"}>
+            Penguatan Tata Laksana
+          </Text>
+          <Text
+            py={10}
+            ta={"justify"}
+          >
+            Sebagai bagian dari Program Desa Anti Korupsi, Desa Darmasaba menerapkan penguatan tata laksana untuk memastikan transparansi, akuntabilitas, dan efisiensi dalam pemerintahan desa. Adapun beberapa Penguatan Tata Laksana :
+          </Text>
+        </Stack>
+      </Container>
+      <SimpleGrid
+        px={50}
+        cols={{
+          base: 1,
+          sm: 2,
+        }}>
+        {data.map((v, k) => {
+          return (
+            <Box
+              key={k}
+            >
+              <Paper p={"lg"} >
+                <Stack h="100%">
+                  <Text fz={"lg"} ta={"center"} c={colors["blue-button"]}>{v.judul}</Text>
+                  <Flex direction={{ base: "column", md: "row" }} align="center" justify="center" style={{ flex: 1 }}>
+                    <Box mb={{ base: 10, md: 0 }}>
+                      {v.icon}
+                    </Box>
+                    <Stack px={{ base: 0, md: 20 }} gap={10} style={{ flex: 1 }}>
+                      <Text fz={"sm"} ta={"justify"}>{v.deskripsi}</Text>
+                      <Button bg={colors["blue-button"]} radius={"lg"} w="fit-content">Download</Button>
+                    </Stack>
+                  </Flex>
+                </Stack>
+              </Paper>
+            </Box>
+          );
+        })}
+      </SimpleGrid >
+    </Stack >
+  );
+}
+
+export default Tatalaksana;
+
+

src/app/darmasaba/(tambahan)/desaantikorupsi/page.tsx

@@ -0,0 +1,84 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Container, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { IconClipboardText } from '@tabler/icons-react';
+import BackButton from '../../(pages)/desa/layanan/_com/BackButto';
+import { useRouter } from 'next/navigation';
+
+const data = [
+  {
+    judul: "PENGUATAN TATA LAKSANA",
+    icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
+    link: "/darmasaba/desaantikorupsi/tatalaksana"
+  },
+  {
+    judul: "PENGUATAN PENGAWASAN",
+    icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
+    link: "/darmasaba/desaantikorupsi/pengawasan"
+  },
+  {
+    judul: "PENGUATAN KUALITAS PELAYANAN PUBLIK",
+    icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
+    link: "/darmasaba/desaantikorupsi/pelayanan"
+  },
+  {
+    judul: "PENGUATAN PARTISIPASI MASYARAKAT",
+    icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
+    link: "/darmasaba/desaantikorupsi/partisipasi"
+  },
+  {
+    judul: "KEARIFAN LOKAL",
+    icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
+    link: "/darmasaba/desaantikorupsi/lokal"
+  }
+]
+function Page() {
+  const router = useRouter();
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={22}>
+      <Container w={{ base: "100%", md: "50%" }}>
+        <BackButton />
+        <Stack align="center" gap={0}>
+          <Text fz={"3.4rem"} fw={"bold"}>
+            Desa Anti Korupsi
+          </Text>
+          <Text
+            py={10}
+            ta={"justify"}
+          >
+            Desa antikorupsi mendorong pemerintahan jujur dan transparan. Keuangan desa dikelola terbuka dengan melibatkan warga mengawasi anggaran, sehingga digunakan tepat sasaran sesuai kebutuhan. Adapun beberapa tata penguatan :
+          </Text>
+        </Stack>
+      </Container>
+      <SimpleGrid
+        px={50}
+        cols={{
+          base: 1,
+          sm: 2,
+
+        }}>
+        {data.map((v, k) => {
+          return (
+            <Box
+              key={k}
+            >
+              <Paper p={"lg"} >
+                <Box >
+                  <Text fz={"lg"} ta={"center"} c={colors["blue-button"]}>{v.judul}</Text>
+                  <Stack justify={"space-between"} align={"center"}>
+                    <Box>
+                      {v.icon}
+                    </Box>
+                    <Button fz={"h4"} color={colors["blue-button"]} onClick={() => router.push(v.link)}>Detail</Button>
+                  </Stack>
+                </Box>
+              </Paper>
+            </Box>
+          )
+        })}
+      </SimpleGrid>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(tambahan)/prestasi/(detail)/hukum/page.tsx

@@ -0,0 +1,44 @@
+import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
+import colors from '@/con/colors';
+import { Stack, Container, Box, Text, Image } from '@mantine/core';
+import React from 'react';
+
+
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"42"} px={{base: "md", md: 0}}>
+      <Container w={{ base: "100%", md: "50%" }} >
+        <BackButton />
+        <Box pb={20}>
+          <Text ta={"center"} fz={"3.4rem"} c={colors["blue-button"]} fw={"bold"}>
+            Juara 3 dalam Lomba Keluarga Sadar Hukum Kabupaten Badung Tahun 2024
+          </Text>
+          <Text
+            ta={"center"}
+            fw={"bold"}
+            fz={"1.5rem"}
+          >
+            Hukum dan Kesadaran Masyarakat
+          </Text>
+        </Box>
+        <Image src="/api/img/prestasilombahukum.png" alt='' w={"100%"} />
+        <Text py={20} fz={{base: "sm", md: "lg"}} ta={"justify"}>
+        Dengan bangga, KADARKUM Desa Darmasaba berhasil meraih Juara 3 dalam Lomba Keluarga Sadar Hukum Kabupaten Badung Tahun 2024.
+        </Text>
+        <Text fz={{base: "sm", md: "lg"}} ta={"justify"}>
+        Prestasi ini tidak lepas dari dukungan penuh dan semangat tinggi dari Ida Bagus Surya Prabhawa Manuaba, S.H., M.H., NL.P. selaku Perbekel Darmasaba yang selalu mendampingi dari proses pelatihan hingga perlombaan, serta turut hadir perwakilan Kecamatan Abiansemal, Ketua BPD Desa Darmasaba, Ketua TP PKK Desa Darmasaba, Perangkat & Staf Desa Darmasaba, Karang Taruna Paramartha Dharma Desa Darmasaba dan seluruh Tim Sukses KADARKUM Desa Darmasaba.
+        </Text>
+        <Text py={20} fz={{base: "sm", md: "lg"}} ta={"justify"}>
+        Acara yang berlangsung pada 14 November 2024 di Kertha Gosana Lt. 3 Pusat Pemerintahan Kabupaten Badung ini menjadi bukti nyata bahwa kerja keras dan kolaborasi adalah kunci keberhasilan.
+        </Text>
+        <Text fz={{base: "sm", md: "lg"}} ta={"justify"}>
+        Bersama, kita terus wujudkan Desa Darmasaba yang sadar hukum dan berprestasi!
+
+
+        </Text>
+      </Container>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(tambahan)/prestasi/(detail)/voli/page.tsx

@@ -0,0 +1,40 @@
+import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
+import colors from '@/con/colors';
+import { Stack, Container, Box, Text, Image } from '@mantine/core';
+import React from 'react';
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"42"} px={{base: "md", md: 0}}>
+      <Container w={{ base: "100%", md: "50%" }} >
+        <BackButton />
+        <Box pb={20}>
+          <Text ta={"center"} fz={"3.4rem"} c={colors["blue-button"]} fw={"bold"}>
+            Juara 3 Turnamen Bola Voli Mangupura Cup 2024
+          </Text>
+          <Text
+            ta={"center"}
+            fw={"bold"}
+            fz={"1.5rem"}
+          >
+            Olahraga dan Kepemudaan
+          </Text>
+        </Box>
+        <Image src="/api/img/prestasi-voli.jpeg" alt='' w={"100%"} />
+        <Text py={20} fz={{base: "sm", md: "lg"}} ta={"justify"}>
+        Selamat kepada Tim Bola Voli Putri Dharma Temaja yang berhasil meraih juara 3 dalam Turnamen Bola Voli Mangupura Cup 2024 kategori Putri Se-Bali.
+        </Text>
+        <Text fz={{base: "sm", md: "lg"}} ta={"justify"}>
+        Perjuangan luar biasa yang ditunjukkan oleh tim ini merupakan bukti nyata kerja keras, kekompakan, dan semangat pantang menyerah. Dalam kompetisi yang diikuti oleh tim-tim terbaik dari seluruh Bali, Tim Dharma Temaja berhasil menunjukkan performa yang menginspirasi dan mengharumkan nama desa.
+        </Text>
+        <Text py={20} fz={{base: "sm", md: "lg"}} ta={"justify"}>
+        Terima kasih kepada seluruh pemain, pelatih, serta pendukung yang selalu memberikan dukungan penuh di setiap pertandingan. Kemenangan ini adalah awal dari perjalanan yang lebih besar, dan semoga prestasi ini dapat terus memotivasi kita untuk mencapai hasil yang lebih gemilang di masa depan. 
+        </Text>
+        <Text fz={{base: "sm", md: "lg"}} ta={"justify"}>
+        Mari kita terus dukung Tim Bola Voli Putri Dharma Temaja agar semakin bersinar di ajang-ajang berikutnya
+        </Text>
+      </Container>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(tambahan)/prestasi/page.tsx

@@ -0,0 +1,104 @@
+'use client'
+import colors from '@/con/colors';
+import { BackgroundImage, Box, Button, Container, Group, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import BackButton from '../../(pages)/desa/layanan/_com/BackButto';
+import { useRouter } from 'next/navigation';
+
+const data = [
+  {
+    id: 1,
+    title: "Olahraga dan Kepemudaan",
+    description: "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: "Hukum dan Kesadaran Masyarakat",
+    description: "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 dan Inovasi Desa",
+    description: "Peringkat 5 Dalam Ajang Bergengsi Mangupura Award",
+    image: "/api/img/prestasi-peringkat-5.jpeg",
+    link: "/darmasaba/desa/prestasi/lomba-hukum"
+  }
+]
+function Page() {
+  const router = useRouter();
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"42"} >
+      <Container w={{ base: "100%", md: "50%" }}>
+        <Box px={"lg"}>
+          <BackButton />
+          <Box>
+            <Text ta={"center"} fz={"3.4rem"} c={colors["blue-button"]} fw={"bold"}>
+              Prestasi Desa
+            </Text>
+            <Text ta={"center"} py={10}>
+              Temukan berbagai prestasi dan keunggulan yang dimiliki Desa Darmasaba.
+            </Text>
+          </Box>
+        </Box>
+      </Container>
+      <SimpleGrid
+        px={50}
+        pb={20}
+        cols={{
+          base: 1,
+          md: 3,
+        }}
+      >
+        {data.map((v, k) => {
+          return (
+            <BackgroundImage
+              key={k}
+              src={v.image}
+              h={350}
+              radius={16}
+              pos={"relative"}
+            >
+              <Box
+                style={{
+                  borderRadius: 16,
+                  zIndex: 0
+                }}
+                pos={"absolute"}
+                w={"100%"}
+                h={"100%"}
+                bg={colors.trans.dark[2]}
+              />
+              <Stack justify='space-between' h={"100%"} gap={0} p={"lg"} pos={"relative"}>
+                <Group>
+                  <Paper radius={"lg"} py={7} px={10}>
+                    <Text>{v.title}</Text>
+                  </Paper>
+                </Group>
+                <Box p={"lg"}>
+                  <Text
+                    fw={"bold"}
+                    c={"white"}
+                    size={"1.8rem"}
+                    style={{
+                      textAlign: "center",
+                    }}>{v.description}</Text>
+                </Box>
+                <Group justify="center">
+                  <Button px={20} radius={"100"} size="md" bg={colors["blue-button"]}
+                    onClick={() => router.push(v.link)}>
+                    Detail
+                  </Button>
+                </Group>
+              </Stack>
+            </BackgroundImage>
+          )
+        })}
+      </SimpleGrid>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(tambahan)/sdgsdesa/page.tsx

@@ -0,0 +1,41 @@
+import { Box, Center, Container, Image, Stack, Text } from '@mantine/core';
+import BackButton from '../../(pages)/desa/layanan/_com/BackButto';
+
+
+
+
+function Page() {
+  return (
+    <Stack pos={"relative"} py={"xl"} gap={22}>
+      <Container w={{ base: "100%", md: "50%" }}>
+        <BackButton />
+        <Stack align="center" gap={0}>
+          <Text fz={"3.4rem"} fw={"bold"}>
+            SDGs Desa
+          </Text>
+          <Text
+            py={10}
+            ta={"justify"}
+          >
+            SDGs Desa adalah upaya terpadu pemerintah dalam percepatan pencapaian tujuan pembangunan berkelanjutan di tingkat desa. Ini merupakan terjemahan dari SDGs global dalam konteks pembangunan desa di Indonesia. SDGs Desa bertujuan untuk menciptakan desa yang lebih inklusif, berkelanjutan, dan tangguh menghadapi tantangan masa depan. Adapun
+          </Text>
+          <Text
+            ta={"justify"}
+          >
+            SDGs Desa sebagaimana dijabarkan dalam Permendesa Nomor 21 tahun 2020 terdiri dari 18 tujuan yang harus dicapai pada tahun 2030. Tujuan-tujuan tersebut mencakup berbagai aspek kehidupan masyarakat desa, mulai dari pengentasan kemiskinan, peningkatan kesehatan dan pendidikan, kesetaraan gender, pertumbuhan ekonomi, infrastruktur, hingga kelestarian lingkungan. Adapun SDGs Desa terdiri dari tujuan-tujuan sebagai berikut:
+          </Text>
+        </Stack>
+      </Container>
+      <Box p={20}>
+        <Center>
+          <Image src={"/api/img/sdgsdesa-18-removebg.png"} alt='' w={800} />
+        </Center>
+      </Box>
+      <Box py={20}>
+        
+      </Box>
+    </Stack>
+  );
+}
+
+export default 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>