UI Detail Layanan & Detail Penghargaan

src/app/darmasaba/(pages)/desa/layanan/(detail)/belumkawin/page.tsx

@@ -0,0 +1,35 @@
+import colors from '@/con/colors';
+import { Stack, Container, List, ListItem, Box, Text, Image } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../_com/BackButto';
+
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"42"}>
+      <Container w={{ base: "100%", md: "50%" }} p={"xl"}>
+        <BackButton/>
+        <Stack gap={0}>
+          <Text fz={"3.4rem"} ta={"center"} fw={"bold"}>
+            Surat Keterangan Belum Kawin
+          </Text>
+          <Text fz={"h4"} py={20}>
+            Persyaratan Dokumen:
+          </Text>
+          <List>
+            <ListItem fz={"sm"}>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</ListItem>
+            <ListItem fz={"sm"}>Fotocopy Ktp atau Kartu Keluarga</ListItem>
+            <ListItem fz={"sm"}>Khusus bagi yang berstatus duda atau janda melampirkan fotocopy akta cerai atau dokumen pendukung lainnya</ListItem>
+          </List>
+          <Box py={20}>
+            <Text fz={"h4"} py={20}>
+              Alur Pelayanan:
+            </Text>
+            <Image src="/api/img/flowchart-suket-beda-biodatadiri-removebg-preview.png" alt='' />
+          </Box>
+        </Stack>
+      </Container>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/desa/layanan/(detail)/biodata/page.tsx

@@ -0,0 +1,35 @@
+import colors from '@/con/colors';
+import { Stack, Container, List, ListItem, Box, Text, Image } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../_com/BackButto';
+
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"42"}>
+      <Container w={{ base: "100%", md: "50%" }} p={"xl"}>
+        <BackButton/>
+        <Stack gap={0}>
+          <Text fz={"3.4rem"} ta={"center"} fw={"bold"}>
+            Surat Keterangan Beda Biodata Diri
+          </Text>
+          <Text fz={"h4"} py={20}>
+            Persyaratan Dokumen:
+          </Text>
+          <List>
+            <ListItem fz={"sm"}>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</ListItem>
+            <ListItem fz={"sm"}>Fotocopy Ktp atau Kartu Keluarga</ListItem>
+            <ListItem fz={"sm"}>Fotocopy dokumen bersangkutan yang terdapat perbedaan biodata diri misal : Sertifikat Tanah/Ijazah/Polis Asuransi dan lainnya.</ListItem>
+          </List>
+          <Box py={20}>
+            <Text fz={"h4"} py={20}>
+              Alur Pelayanan:
+            </Text>
+            <Image src="/api/img/flowchart-suket-beda-biodatadiri-removebg-preview.png" alt='' />
+          </Box>
+        </Stack>
+      </Container>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/desa/layanan/(detail)/domisili/page.tsx

@@ -1,15 +1,31 @@
 import colors from '@/con/colors';
-import { Stack, Container, Text } from '@mantine/core';
-import React from 'react';
+import { Box, Container, Image, List, ListItem, Stack, Text } from '@mantine/core';
+import BackButton from '../../_com/BackButto';
 
 function Page() {
   return (
     <Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"42"}>
       <Container w={{ base: "100%", md: "50%" }} p={"xl"}>
+        <BackButton/>
         <Stack gap={0}>
-          <Text>
-              
+          <Text fz={"3.4rem"} ta={"center"} fw={"bold"}>
+            Surat Keterangan Domisili Organisasi
           </Text>
+          <Text fz={"h4"} py={20}>
+            Persyaratan Dokumen:
+          </Text>
+          <List>
+            <ListItem fz={"sm"}>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</ListItem>
+            <ListItem fz={"sm"}>Fotocopy Surat Keterangan Terdaftar (SKT) organisasi atau Pengukuhan Kelompok</ListItem>
+            <ListItem fz={"sm"}>Jika Pengajuan baru pembuatan SKT maka melengkapi Susunan Pengurus lengkap dengan Kop Organisasi</ListItem>
+            <ListItem fz={"sm"}>Tanggal berdiri/Tahun berdiri/Sejak kapan berdirinya organisasi</ListItem>
+          </List>
+          <Box py={20}>
+          <Text fz={"h4"} py={20}>
+            Alur Pelayanan:
+          </Text>
+          <Image src="/api/img/flowchart-suket-beda-biodatadiri-removebg-preview.png" alt=''/>
+          </Box>
         </Stack>
       </Container>
     </Stack>

src/app/darmasaba/(pages)/desa/layanan/(detail)/kelahiran/page.tsx

@@ -0,0 +1,36 @@
+import colors from '@/con/colors';
+import { Stack, Container, List, ListItem, Box, Text, Image } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../_com/BackButto';
+
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"42"}>
+      <Container w={{ base: "100%", md: "50%" }} p={"xl"}>
+        <BackButton/>
+        <Stack gap={0}>
+          <Text fz={"3.4rem"} ta={"center"} fw={"bold"}>
+            Surat Keterangan Kelahiran
+          </Text>
+          <Text fz={"h4"} py={20}>
+            Persyaratan Dokumen:
+          </Text>
+          <List>
+            <ListItem fz={"sm"}>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</ListItem>
+            <ListItem fz={"sm"}>Fotocopy Surat lahir dari dokter/bidan (jika ada)</ListItem>
+            <ListItem fz={"sm"}>Fotocopy Kartu Keluarga</ListItem>
+            <ListItem fz={"sm"}>Fotocopy KTP 2 orang saksi</ListItem>
+          </List>
+          <Box py={20}>
+            <Text fz={"h4"} py={20}>
+              Alur Pelayanan:
+            </Text>
+            <Image src="/api/img/flowchart-suket-kelahiran-removebg-preview.png" alt='' />
+          </Box>
+        </Stack>
+      </Container>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/desa/layanan/(detail)/kematian/page.tsx

@@ -0,0 +1,36 @@
+import colors from '@/con/colors';
+import { Stack, Container, List, ListItem, Box, Text, Image } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../_com/BackButto';
+
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"42"}>
+      <Container w={{ base: "100%", md: "50%" }} p={"xl"}>
+        <BackButton/>
+        <Stack gap={0}>
+          <Text fz={"3.4rem"} ta={"center"} fw={"bold"}>
+            Surat Keterangan Kematian
+          </Text>
+          <Text fz={"h4"} py={20}>
+            Persyaratan Dokumen:
+          </Text>
+          <List>
+            <ListItem fz={"sm"}>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</ListItem>
+            <ListItem fz={"sm"}>Fotocopy KTP atau Kartu keluarga</ListItem>
+            <ListItem fz={"sm"}>Surat Kematian dari rumah sakit atau dokter (jika ada)</ListItem>
+            <ListItem fz={"sm"}>Tanggal dan Waktu Kematian</ListItem>
+          </List>
+          <Box py={20}>
+            <Text fz={"h4"} py={20}>
+              Alur Pelayanan:
+            </Text>
+            <Image src="/api/img/flowchart-suket-beda-biodatadiri-removebg-preview.png" alt='' />
+          </Box>
+        </Stack>
+      </Container>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/desa/layanan/(detail)/penghasilan/page.tsx

@@ -0,0 +1,35 @@
+import colors from '@/con/colors';
+import { Stack, Container, List, ListItem, Box, Text, Image } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../_com/BackButto';
+
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"42"}>
+      <Container w={{ base: "100%", md: "50%" }} p={"xl"}>
+        <BackButton/>
+        <Stack gap={0}>
+          <Text fz={"3.4rem"} ta={"center"} fw={"bold"}>
+            Surat Keterangan Penghasilan
+          </Text>
+          <Text fz={"h4"} py={20}>
+            Persyaratan Dokumen:
+          </Text>
+          <List>
+            <ListItem fz={"sm"}>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</ListItem>
+            <ListItem fz={"sm"}>Fotocopy KTP orang tua atau Fotocopy Kartu keluarga</ListItem>
+            <ListItem fz={"sm"}>Membuat Surat Pernyataan Penghasilan bermaterai (disertai jumlah penghasilan)</ListItem>
+          </List>
+          <Box py={20}>
+            <Text fz={"h4"} py={20}>
+              Alur Pelayanan:
+            </Text>
+            <Image src="/api/img/flowchart-suket-beda-biodatadiri-removebg-preview.png" alt='' />
+          </Box>
+        </Stack>
+      </Container>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/desa/layanan/(detail)/skck/page.tsx

@@ -0,0 +1,34 @@
+import colors from '@/con/colors';
+import { Stack, Container, List, ListItem, Box, Text, Image } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../_com/BackButto';
+
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"42"}>
+      <Container w={{ base: "100%", md: "50%" }} p={"xl"}>
+        <BackButton/>
+        <Stack gap={0}>
+          <Text fz={"3.4rem"} ta={"center"} fw={"bold"}>
+            Surat Keterangan Kelakuan Baik (Pengantar SKCK)
+          </Text>
+          <Text fz={"h4"} py={20}>
+            Persyaratan Dokumen:
+          </Text>
+          <List>
+            <ListItem fz={"sm"}>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</ListItem>
+            <ListItem fz={"sm"}>Fotocopy Ktp atau Kartu Keluarga</ListItem>
+          </List>
+          <Box py={20}>
+            <Text fz={"h4"} py={20}>
+              Alur Pelayanan:
+            </Text>
+            <Image src="/api/img/flowchart-suket-beda-biodatadiri-removebg-preview.png" alt='' />
+          </Box>
+        </Stack>
+      </Container>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/desa/layanan/(detail)/tempatusaha/page.tsx

@@ -0,0 +1,36 @@
+import colors from '@/con/colors';
+import { Stack, Container, List, ListItem, Box, Text, Image } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../_com/BackButto';
+
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"42"}>
+      <Container w={{ base: "100%", md: "50%" }} p={"xl"}>
+        <BackButton/>
+        <Stack gap={0}>
+          <Text fz={"3.4rem"} ta={"center"} fw={"bold"}>
+            Surat Keterangan Tempat Usaha
+          </Text>
+          <Text fz={"h4"} py={20}>
+            Persyaratan Dokumen:
+          </Text>
+          <List>
+            <ListItem fz={"sm"}>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</ListItem>
+            <ListItem fz={"sm"}>Fotocopy KTP atau Kartu keluarga</ListItem>
+            <ListItem fz={"sm"}>Foto Lokasi dan Kegiatan Usaha di cetak dalam selembar kertas (diparaf dan stempel oleh Kelian Banjar Dinas)</ListItem>
+            <ListItem fz={"sm"}>Surat Perjanjian Sewa/Kontrak atau Kwintansi Pembayaran Sewa 3 bulan terakhir bagi yang mengontrak tempat usaha, apabila tempat usaha milik sendiri lampiri dengan dokumen kepemilikan tempat usaha (dapat berupa fotocopy sppt atau Fotocopy Sertipikat Hak Milik)</ListItem>
+          </List>
+          <Box py={20}>
+            <Text fz={"h4"} py={20}>
+              Alur Pelayanan:
+            </Text>
+            <Image src="/api/img/flowchart-suket-tempat-usaha-removebg-preview.png" alt='' />
+          </Box>
+        </Stack>
+      </Container>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/desa/layanan/(detail)/tidakmampu/page.tsx

@@ -0,0 +1,37 @@
+import colors from '@/con/colors';
+import { Stack, Container, List, ListItem, Box, Text, Image } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../_com/BackButto';
+
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"42"}>
+      <Container w={{ base: "100%", md: "50%" }} p={"xl"}>
+        <BackButton/>
+        <Stack gap={0}>
+          <Text fz={"3.4rem"} ta={"center"} fw={"bold"}>
+            Surat Keterangan Tidak Mampu
+          </Text>
+          <Text fz={"h4"} py={20}>
+            Persyaratan Dokumen:
+          </Text>
+          <List>
+            <ListItem fz={"sm"}>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</ListItem>
+            <ListItem fz={"sm"}>Fotocopy KTP/KIA atau Kartu Keluarga</ListItem>
+            <ListItem fz={"sm"}>Fotocopy Kartu Indonesia Pintar/Kartu Perlindungan Sosial/Terdaftar dalam DTKS</ListItem>
+            <ListItem fz={"sm"}>Jika tidak memiliki Kartu tersebut diatas diwajibkan membuat Surat Pernyataan Tidak Mampu
+            </ListItem>
+          </List>
+          <Box py={20}>
+            <Text fz={"h4"} py={20}>
+              Alur Pelayanan:
+            </Text>
+            <Image src="/api/img/flowchart-suket-tidak-mampu-removebg-preview.png" alt='' />
+          </Box>
+        </Stack>
+      </Container>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/desa/layanan/(detail)/usaha/page.tsx

@@ -0,0 +1,35 @@
+import colors from '@/con/colors';
+import { Stack, Container, List, ListItem, Box, Text, Image } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../_com/BackButto';
+
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"42"}>
+      <Container w={{ base: "100%", md: "50%" }} p={"xl"}>
+        <BackButton/>
+        <Stack gap={0}>
+          <Text fz={"3.4rem"} ta={"center"} fw={"bold"}>
+            Surat Keterangan Usaha
+          </Text>
+          <Text fz={"h4"} py={20}>
+            Persyaratan Dokumen:
+          </Text>
+          <List>
+            <ListItem fz={"sm"}>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</ListItem>
+            <ListItem fz={"sm"}>Fotocopy KTP atau Kartu keluarga</ListItem>
+            <ListItem fz={"sm"}>Foto Lokasi dan Kegiatan Usaha di cetak dalam selembar kertas (diparaf dan stempel oleh Kelian Banjar Dinas)</ListItem>
+          </List>
+          <Box py={20}>
+            <Text fz={"h4"} py={20}>
+              Alur Pelayanan:
+            </Text>
+            <Image src="/api/img/flowchart-suket-beda-biodatadiri-removebg-preview.png" alt='' />
+          </Box>
+        </Stack>
+      </Container>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/desa/layanan/(detail)/yatim/page.tsx

@@ -0,0 +1,34 @@
+import colors from '@/con/colors';
+import { Stack, Container, List, ListItem, Box, Text, Image } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../_com/BackButto';
+
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"42"}>
+      <Container w={{ base: "100%", md: "50%" }} p={"xl"}>
+        <BackButton />
+        <Stack gap={0}>
+          <Text fz={"3.4rem"} ta={"center"} fw={"bold"}>
+            Surat Keterangan Yatim Piatu
+          </Text>
+          <Text fz={"h4"} py={20}>
+            Persyaratan Dokumen:
+          </Text>
+          <List>
+            <ListItem fz={"sm"}>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</ListItem>
+            <ListItem fz={"sm"}>Fotocopy Ktp, KIA atau Kartu Keluarga</ListItem>
+          </List>
+          <Box py={20}>
+            <Text fz={"h4"} py={20}>
+              Alur Pelayanan:
+            </Text>
+            <Image src="/api/img/flowchart-suket-beda-biodatadiri-removebg-preview.png" alt='' />
+          </Box>
+        </Stack>
+      </Container>
+    </Stack>
+  );
+}
+
+export default Page;

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

@@ -1,47 +1,78 @@
 'use client'
 import colors from "@/con/colors";
-import { ActionIcon, Anchor, BackgroundImage, Box, Button, Container, Divider, Flex, Group, List, ListItem, SimpleGrid, Stack, Stepper, StepperCompleted, StepperStep, Text } from "@mantine/core";
+import { ActionIcon, BackgroundImage, Box, Button, Container, Divider, Flex, Group, List, ListItem, SimpleGrid, Stack, Stepper, StepperCompleted, StepperStep, Text } from "@mantine/core";
 import { IconBrandFacebook, IconBrandInstagram, IconBrandTwitter, IconBrandWhatsapp } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
+import BackButton from "./_com/BackButto";
 
 const data = [
     {
         id: 1,
         images: "/api/img/test.png",
         name: "Surat Keterangan Domisili Organisasi",
-        link: ""
+        link: "/darmasaba/desa/layanan/domisili"
     },
     {
         id: 2,
         images: "/api/img/test-3.jpeg",
         name: "Surat Keterangan Penghasilan",
-        link: ""
+        link: "/darmasaba/desa/layanan/penghasilan"
     },
     {
         id: 3,
         images: "/api/img/domisili.jpeg",
         name: "Surat Keterangan Tidak Mampu",
-        link: ""
+        link: "/darmasaba/desa/layanan/tidakmampu"
     },
     {
         id: 4,
         images: "/api/img/kelahiran.jpeg",
         name: "Surat Keterangan Kelahiran",
-        link: ""
+        link: "/darmasaba/desa/layanan/kelahiran"
     },
     {
         id: 5,
         images: "/api/img/keterangan-usaha.jpeg",
         name: "Surat Keterangan Usaha",
-        link: ""
+        link: "/darmasaba/desa/layanan/usaha"
     },
     {
         id: 6,
         images: "/api/img/kematian.jpeg",
         name: "Surat Keterangan Kematian",
-        link: ""
+        link: "/darmasaba/desa/layanan/kematian"
     },
+    {
+        id: 7,
+        images: "/api/img/tempatusaha.jpeg",
+        name: "Surat Keterangan Tempat Usaha",
+        link: "/darmasaba/desa/layanan/tempatusaha"
+    },
+    {
+        id: 8,
+        images: "/api/img/belumkawin.jpeg",
+        name: "Surat Keterangan Belum Kawin",
+        link: "/darmasaba/desa/layanan/belumkawin"
+    },
+    {
+        id: 9,
+        images: "/api/img/berkelakuan-baik.jpeg",
+        name: "Surat Keterangan Kelakuan Baik",
+        link: "/darmasaba/desa/layanan/skck"
+    },
+    {
+        id: 10,
+        images: "/api/img/biodata.jpeg",
+        name: "Surat Keterangan Beda Biodata Diri",
+        link: "/darmasaba/desa/layanan/biodata"
+    },
+    {
+        id: 11,
+        images: "/api/img/yatim.jpeg",
+        name: "Surat Keterangan Yatim Piatu",
+        link: "/darmasaba/desa/layanan/yatim"
+    }
 
 ]
 export default function Page() {
@@ -52,6 +83,7 @@ export default function Page() {
     return (
         <Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"42"}>
             <Container w={{ base: "100%", md: "50%" }} >
+                <BackButton/>
                 <Stack align="center" gap={0}>
                     {/* Bagian Layanan */}
                     <Text fz={"3.4rem"} fw={"bold"}>
@@ -162,7 +194,7 @@ export default function Page() {
                     </Group>
                     <Text py={35} ta={"justify"} fz={"sm"}>Penting untuk diingat bahwa prosedur dan persyaratan dapat berubah
                         seiring waktu. Untuk informasi yang lebih akurat dan terkini, saya sarankan untuk mengunjungi situs
-                        resmi OSS <Anchor>(https://oss.go.id/)</Anchor> atau menghubungi instansi terkait di pemerintah Indonesia yang bertanggung jawab atas urusan perizinan usaha.</Text>
+                        resmi OSS <a href={"https://oss.go.id/"}>(https://oss.go.id/)</a> atau menghubungi instansi terkait di pemerintah Indonesia yang bertanggung jawab atas urusan perizinan usaha.</Text>
                 </Box>
                 {/* Bagian Pelayanan Telunjuk Sakti Desa */}
                 <Box py={15}>
@@ -170,9 +202,9 @@ export default function Page() {
                 </Box>
                 <Text fz={"sm"} py={10}>Terwujudnya Layanan umum bertajuk Sistim administrasi Kependudukan Terintegrasi di Desa berbasi Elektronik, Smart dan Aman. layanan telunjuk sakti Desa meliputi :</Text>
                 <List type="ordered" pb={20}>
-                    <ListItem fz={"sm"}>Telunjuk Sakti Desa Akta Kelahiran (Petunjuk Pengajuan pada link berikut : Download <Anchor fz={"sm"}>Akta Kelahiran</Anchor>)</ListItem>
-                    <ListItem fz={"sm"}>Telunjuk Sakti Desa Akta Perkawinan (Petunjuk Pengajuan pada link berikut : Download <Anchor fz={"sm"}>Akta Perkawinan</Anchor>)</ListItem>
-                    <ListItem fz={"sm"}>Telunjuk Sakti Desa Akta Kematian (Petunjuk Pengajuan pada link berikut : Download <Anchor fz={"sm"}>Akata Kematian</Anchor>)</ListItem>
+                    <ListItem fz={"sm"}>Telunjuk Sakti Desa Akta Kelahiran (Petunjuk Pengajuan pada link berikut : Download <a href="https://darmasaba.desa.id/storage/files/PERSYARATAN%20DAN%20ALUR%20PENGAJUAN%20AKTA%20KELAHIRAN_(dengan%20contoh%20Formulir).pdf">Akta Kelahiran</a>)</ListItem>
+                    <ListItem fz={"sm"}>Telunjuk Sakti Desa Akta Perkawinan (Petunjuk Pengajuan pada link berikut : Download <a href="https://darmasaba.desa.id/storage/files/PERSYARATAN%20DAN%20ALUR%20PENGAJUAN%20AKTA%20PERKAWINAN_(dengan%20contoh%20Formulir).pdf">Akta Perkawinan</a>)</ListItem>
+                    <ListItem fz={"sm"}>Telunjuk Sakti Desa Akta Kematian (Petunjuk Pengajuan pada link berikut : Download <a href="https://darmasaba.desa.id/storage/files/PERSYARATAN%20DAN%20ALUR%20PENGAJUAN%20AKTA%20KEMATIAN_(dengan%20contoh%20Formulir).pdf">Akata Kematian</a>)</ListItem>
                 </List>
                 {/* Bagian Pelayanan Telunjuk Sakti Desa */}
                 <Box py={15}>

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

@@ -0,0 +1,112 @@
+'use client'
+import colors from '@/con/colors';
+import { BackgroundImage, Box, Button, Container, Group, SimpleGrid, Stack, Text } from '@mantine/core';
+import React from 'react';
+import BackButton from '../layanan/_com/BackButto';
+// import { useRouter } from 'next/navigation';
+
+const datamap = [
+  {
+    id: 1,
+    images: "/api/img/tps.png",
+    name: "TPS3R Pudak Mesari",
+    deskripsi: "TPS 3R Pudak Mesari Darmasaba layak mendapat penghargaan demikian apresiasi dari Delterra Sosial Indonesia nie Semeton Darmasaba!, Hal tersebut dikarenakan walaupun baru berdiri namun TPS 3R kebanggaan Desa Darmasaba tersebut sudah berjalan dengan sangat baik. "
+  },
+  {
+    id: 2,
+    images: "/api/img/ack.png",
+    name: "Bumdes Pudak Mesari",
+    deskripsi: "Bumdes Pudak Mesari sangat membantu warga desa Darmasaba dalam mengelola dan membangun sebuah desa yang lebih baik lagi"
+  },
+  {
+    id: 3,
+    images: "/api/img/taman-beji.jpg",
+    name: "Taman Beji Cengana",
+    deskripsi: "Tirta Klebutan di Pura Taman Beji Cengana di Desa Adat Darmasaba, Badung, selain dipercaya nunas Taksu serta pembersihan diri. Tersemat juga asal usul cerita ditemukannya Tirta Klebutan yang tepat berada di pinggir Tukad Cengana tersebut."
+  },
+  {
+    id: 4,
+    images: "/api/img/waterpark.png",
+    name: "Gumuh Sari Water Park",
+    deskripsi: "Gumuh Sari Rekreasi atau waterpark, tempat wisata yang asyik dan seru untuk kamu sekeluarga! Tempat liburan di Bali memang seakan nggak ada habisnya. Selalu ada aja destinasi wisata seru yang bisa jadi wishlist. Ada banyak banget tempat wisata yang kamu kunjungi di Bali, mulai dari wisata alam, wisata modern, sampai wisata air."
+  },
+  {
+    id: 5,
+    images: "/api/img/pertanian.jpg",
+    name: "Pertanian",
+    deskripsi: "Dalam rangka pelaksanaan program ketahanan pangan tingkat desa, Pemerintah Desa Darmasaba telah membentuk kelompok petani dan peternak. Kelompok petani selanjutnya menggarap lahan yang sudah disiapkan untuk menanam tanaman pangan seperti cabe, tomat, timun, dan lain-lainnya sedangkan kelompok peternak akan melakukan ternak ikan lele."
+  },
+]
+function Page() {
+  // const router = useRouter()
+  return (
+    <Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"42"}>
+      <Container w={{ base: "100%", md: "50%" }}>
+        <BackButton />
+        <Stack align='center' gap={0}>
+          <Text fz={"3.4rem"} fw={"bold"}>
+            Potensi Desa
+          </Text>
+          <Text ta={"justify"} py={10}>
+            Potensi desa adalah segenap sumber daya alam dan sumber daya manusia yang dimiliki desa sebagai modal dasar yang perlu dikelola dan dikembangkan bagi kelangsungan dan perkembangan desa.
+          </Text>
+        </Stack>
+        <Text ta={"justify"}>
+          Adapun potensi yang dimiliki Desa Darmasaba yaitu:
+        </Text>
+      </Container>
+      <Box px={"lg"}>
+
+      <SimpleGrid
+          py={20}
+          cols={{
+            base: 1,
+            sm: 3
+          }}
+        >
+          {datamap.map((v, k) => {
+            return (
+              <BackgroundImage
+                key={k}
+                src={v.images}
+                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.name}</Text>
+                  </Box>
+                  <Group justify="center">
+                    <Button px={20} radius={"100"} size="md" bg={colors["blue-button"]}
+                      >
+                      Detail
+                    </Button>
+                  </Group>
+                </Stack>
+              </BackgroundImage>
+            )
+          })}
+        </SimpleGrid>
+      </Box>
+
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(tambahan)/penghargaan/detail/lomba1/page.tsx

@@ -0,0 +1,92 @@
+import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
+import colors from '@/con/colors';
+import { Stack, Container, Text, Image, ActionIcon, Box, Divider, Flex } from '@mantine/core';
+import { IconBrandFacebook, IconBrandInstagram, IconBrandTwitter, IconBrandWhatsapp } from '@tabler/icons-react';
+import React from 'react';
+
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={42}>
+      <Container w={{ base: "100%", md: "50%" }}>
+        <BackButton/>
+        <Stack align="center" gap={0}>
+          <Text fz={"3.4rem"} fw={"bold"}>
+            Juara 2
+          </Text>
+          <Text
+            ta={"center"}
+            fw={"bold"}
+          >
+            Lomba Video Pendek Potensi dan Peluang Investasi di Desa Kabupaten Badung 2024
+          </Text>
+          <Image py={20} src={"/api/img/penghargaan-2.png"} alt='' />
+          <Text
+            py={20}
+            ta={"justify"}
+            fw={"bold"}
+          >
+            Desa Dramasaba Raih Juara 2 dalam Lomba Video Pendek Potensi dan Peluang Investasi di Desa Kabupaten Badung 2024
+          </Text>
+          <Text
+            ta={"justify"}
+          >
+            Desa Dramasaba kembali menunjukkan eksistensinya dalam memajukan potensi desa dengan meraih Juara 2 dalam ajang Lomba Video Pendek Potensi dan Peluang Investasi di Desa Kabupaten Badung 2024. Prestasi ini menjadi bukti nyata bahwa Desa Dramasaba memiliki daya tarik serta peluang investasi yang menjanjikan bagi para investor maupun masyarakat yang ingin berkontribusi dalam pengembangan desa.
+          </Text>
+          <Text
+            py={5}
+            ta={"justify"}
+          >
+            Dalam video pendek yang diikutsertakan dalam lomba ini, Desa Dramasaba menampilkan berbagai potensi unggulan yang dimiliki, mulai dari sektor pertanian, pariwisata berbasis budaya, hingga ekonomi kreatif yang sedang berkembang pesat. Dengan pengemasan yang menarik dan penyampaian informasi yang jelas, video tersebut berhasil memikat perhatian dewan juri serta menjadi inspirasi bagi desa-desa lain dalam mengembangkan potensi wilayahnya masing-masing.
+          </Text>
+          <Text
+            ta={"justify"}
+          >
+            Keberhasilan ini tidak lepas dari kerja keras seluruh tim kreatif, pemerintah desa, serta masyarakat yang turut berpartisipasi dalam produksi video. Kepala Desa Dramasaba, [Nama Kepala Desa], mengungkapkan rasa syukur dan bangganya atas pencapaian ini. Menurutnya, kemenangan ini bukan sekadar penghargaan, tetapi juga menjadi motivasi untuk terus mengembangkan desa agar semakin dikenal luas dan menarik lebih banyak peluang investasi.
+          </Text>
+          <Text
+            py={5}
+            ta={"justify"}
+          >
+            Lomba Video Pendek Potensi dan Peluang Investasi di Desa Kabupaten Badung 2024 merupakan ajang yang diadakan oleh pemerintah daerah dengan tujuan untuk mendorong desa-desa dalam mengenalkan dan mempromosikan potensi investasi mereka. Dengan mengikuti lomba ini, Desa Dramasaba tidak hanya memperoleh apresiasi, tetapi juga membuka peluang lebih besar untuk berkolaborasi dengan investor maupun pihak lain yang tertarik dalam pengembangan desa.
+          </Text>
+          <Text
+            ta={"justify"}
+          >
+            Ke depan, Desa Dramasaba berkomitmen untuk terus meningkatkan daya saingnya, baik dalam sektor ekonomi, budaya, maupun infrastruktur, sehingga mampu memberikan manfaat yang lebih besar bagi masyarakat serta menarik perhatian lebih banyak pihak untuk berinvestasi dan berkontribusi dalam pembangunan desa.
+          </Text>
+          <Text
+            py={5}
+            ta={"justify"}
+          >
+            Dengan prestasi ini, diharapkan Desa Dramasaba dapat menjadi contoh bagi desa-desa lain dalam memanfaatkan media digital sebagai sarana promosi dan pengembangan potensi lokal.
+          </Text>
+        </Stack>
+        <Box py={20}>
+          <Divider />
+          <Flex justify={"space-between"} py={20}>
+            <Text fz={"sm"}>25 May 2021 . Darmasaba</Text>
+            <Box>
+              <Flex gap={"lg"}>
+                <ActionIcon variant='transparent'>
+                  <IconBrandFacebook color={"gray"} size={"30"} />
+                </ActionIcon>
+                <ActionIcon variant='transparent'>
+                  <IconBrandInstagram color={"gray"} size={"30"} />
+                </ActionIcon>
+                <ActionIcon variant='transparent'>
+                  <IconBrandTwitter color={"gray"} size={"30"} />
+                </ActionIcon>
+                <ActionIcon variant='transparent'>
+                  <IconBrandWhatsapp color={"gray"} size={"30"} />
+                </ActionIcon>
+              </Flex>
+            </Box>
+          </Flex>
+          <Divider pb={50} />
+        </Box>
+      </Container>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(tambahan)/penghargaan/detail/lomba2/page.tsx

@@ -0,0 +1,92 @@
+import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
+import colors from '@/con/colors';
+import { Stack, Container, Text, Image, ActionIcon, Box, Divider, Flex } from '@mantine/core';
+import { IconBrandFacebook, IconBrandInstagram, IconBrandTwitter, IconBrandWhatsapp } from '@tabler/icons-react';
+import React from 'react';
+
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={42}>
+      <Container w={{ base: "100%", md: "50%" }}>
+        <BackButton/>
+        <Stack align="center" gap={0}>
+          <Text fz={"3.4rem"} fw={"bold"}>
+            Juara 2
+          </Text>
+          <Text
+            ta={"center"}
+            fw={"bold"}
+          >
+            Duta Invenstasi Kabupaten Badung 2024
+          </Text>
+          <Image py={20} src={"/api/img/penghargaan-3.png"} alt='' />
+          <Text
+            py={20}
+            ta={"justify"}
+            fw={"bold"}
+          >
+            Desa Dramasaba Raih Juara 2 dalam Duta Invenstasi Kabupaten Badung 2024
+          </Text>
+          <Text
+            ta={"justify"}
+          >
+            Desa Dramasaba kembali menunjukkan eksistensinya dalam memajukan potensi desa dengan meraih Juara 2 dalam ajang Lomba Video Pendek Potensi dan Peluang Investasi di Desa Kabupaten Badung 2024. Prestasi ini menjadi bukti nyata bahwa Desa Dramasaba memiliki daya tarik serta peluang investasi yang menjanjikan bagi para investor maupun masyarakat yang ingin berkontribusi dalam pengembangan desa.
+          </Text>
+          <Text
+            py={5}
+            ta={"justify"}
+          >
+            Dalam video pendek yang diikutsertakan dalam lomba ini, Desa Dramasaba menampilkan berbagai potensi unggulan yang dimiliki, mulai dari sektor pertanian, pariwisata berbasis budaya, hingga ekonomi kreatif yang sedang berkembang pesat. Dengan pengemasan yang menarik dan penyampaian informasi yang jelas, video tersebut berhasil memikat perhatian dewan juri serta menjadi inspirasi bagi desa-desa lain dalam mengembangkan potensi wilayahnya masing-masing.
+          </Text>
+          <Text
+            ta={"justify"}
+          >
+            Keberhasilan ini tidak lepas dari kerja keras seluruh tim kreatif, pemerintah desa, serta masyarakat yang turut berpartisipasi dalam produksi video. Kepala Desa Dramasaba, [Nama Kepala Desa], mengungkapkan rasa syukur dan bangganya atas pencapaian ini. Menurutnya, kemenangan ini bukan sekadar penghargaan, tetapi juga menjadi motivasi untuk terus mengembangkan desa agar semakin dikenal luas dan menarik lebih banyak peluang investasi.
+          </Text>
+          <Text
+            py={5}
+            ta={"justify"}
+          >
+            Lomba Video Pendek Potensi dan Peluang Investasi di Desa Kabupaten Badung 2024 merupakan ajang yang diadakan oleh pemerintah daerah dengan tujuan untuk mendorong desa-desa dalam mengenalkan dan mempromosikan potensi investasi mereka. Dengan mengikuti lomba ini, Desa Dramasaba tidak hanya memperoleh apresiasi, tetapi juga membuka peluang lebih besar untuk berkolaborasi dengan investor maupun pihak lain yang tertarik dalam pengembangan desa.
+          </Text>
+          <Text
+            ta={"justify"}
+          >
+            Ke depan, Desa Dramasaba berkomitmen untuk terus meningkatkan daya saingnya, baik dalam sektor ekonomi, budaya, maupun infrastruktur, sehingga mampu memberikan manfaat yang lebih besar bagi masyarakat serta menarik perhatian lebih banyak pihak untuk berinvestasi dan berkontribusi dalam pembangunan desa.
+          </Text>
+          <Text
+            py={5}
+            ta={"justify"}
+          >
+            Dengan prestasi ini, diharapkan Desa Dramasaba dapat menjadi contoh bagi desa-desa lain dalam memanfaatkan media digital sebagai sarana promosi dan pengembangan potensi lokal.
+          </Text>
+        </Stack>
+        <Box py={20}>
+          <Divider />
+          <Flex justify={"space-between"} py={20}>
+            <Text fz={"sm"}>25 May 2021 . Darmasaba</Text>
+            <Box>
+              <Flex gap={"lg"}>
+                <ActionIcon variant='transparent'>
+                  <IconBrandFacebook color={"gray"} size={"30"} />
+                </ActionIcon>
+                <ActionIcon variant='transparent'>
+                  <IconBrandInstagram color={"gray"} size={"30"} />
+                </ActionIcon>
+                <ActionIcon variant='transparent'>
+                  <IconBrandTwitter color={"gray"} size={"30"} />
+                </ActionIcon>
+                <ActionIcon variant='transparent'>
+                  <IconBrandWhatsapp color={"gray"} size={"30"} />
+                </ActionIcon>
+              </Flex>
+            </Box>
+          </Flex>
+          <Divider pb={50} />
+        </Box>
+      </Container>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(tambahan)/penghargaan/detail/lomba3/page.tsx

@@ -0,0 +1,92 @@
+import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
+import colors from '@/con/colors';
+import { Stack, Container, Text, Image, ActionIcon, Box, Divider, Flex } from '@mantine/core';
+import { IconBrandFacebook, IconBrandInstagram, IconBrandTwitter, IconBrandWhatsapp } from '@tabler/icons-react';
+import React from 'react';
+
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={42}>
+      <Container w={{ base: "100%", md: "50%" }}>
+        <BackButton />
+        <Stack align="center" gap={0}>
+          <Text fz={"3.4rem"} fw={"bold"}>
+            Juara Favorit
+          </Text>
+          <Text
+            ta={"center"}
+            fw={"bold"}
+          >
+            Lomba Video Pendek Potensi dan Peluang Investasi di Desa Kabupaten Badung 2024
+          </Text>
+          <Image py={20} src={"/api/img/penghargaan-1.png"} alt='' />
+          <Text
+            py={20}
+            ta={"justify"}
+            fw={"bold"}
+          >
+            Desa Dramasaba Raih Juara Favorit dalam Lomba Video Pendek Potensi dan Peluang Investasi di Desa Kabupaten Badung 2024
+          </Text>
+          <Text
+            ta={"justify"}
+          >
+            Desa Dramasaba kembali menunjukkan eksistensinya dalam memajukan potensi desa dengan meraih Juara 2 dalam ajang Lomba Video Pendek Potensi dan Peluang Investasi di Desa Kabupaten Badung 2024. Prestasi ini menjadi bukti nyata bahwa Desa Dramasaba memiliki daya tarik serta peluang investasi yang menjanjikan bagi para investor maupun masyarakat yang ingin berkontribusi dalam pengembangan desa.
+          </Text>
+          <Text
+            py={5}
+            ta={"justify"}
+          >
+            Dalam video pendek yang diikutsertakan dalam lomba ini, Desa Dramasaba menampilkan berbagai potensi unggulan yang dimiliki, mulai dari sektor pertanian, pariwisata berbasis budaya, hingga ekonomi kreatif yang sedang berkembang pesat. Dengan pengemasan yang menarik dan penyampaian informasi yang jelas, video tersebut berhasil memikat perhatian dewan juri serta menjadi inspirasi bagi desa-desa lain dalam mengembangkan potensi wilayahnya masing-masing.
+          </Text>
+          <Text
+            ta={"justify"}
+          >
+            Keberhasilan ini tidak lepas dari kerja keras seluruh tim kreatif, pemerintah desa, serta masyarakat yang turut berpartisipasi dalam produksi video. Kepala Desa Dramasaba, [Nama Kepala Desa], mengungkapkan rasa syukur dan bangganya atas pencapaian ini. Menurutnya, kemenangan ini bukan sekadar penghargaan, tetapi juga menjadi motivasi untuk terus mengembangkan desa agar semakin dikenal luas dan menarik lebih banyak peluang investasi.
+          </Text>
+          <Text
+            py={5}
+            ta={"justify"}
+          >
+            Lomba Video Pendek Potensi dan Peluang Investasi di Desa Kabupaten Badung 2024 merupakan ajang yang diadakan oleh pemerintah daerah dengan tujuan untuk mendorong desa-desa dalam mengenalkan dan mempromosikan potensi investasi mereka. Dengan mengikuti lomba ini, Desa Dramasaba tidak hanya memperoleh apresiasi, tetapi juga membuka peluang lebih besar untuk berkolaborasi dengan investor maupun pihak lain yang tertarik dalam pengembangan desa.
+          </Text>
+          <Text
+            ta={"justify"}
+          >
+            Ke depan, Desa Dramasaba berkomitmen untuk terus meningkatkan daya saingnya, baik dalam sektor ekonomi, budaya, maupun infrastruktur, sehingga mampu memberikan manfaat yang lebih besar bagi masyarakat serta menarik perhatian lebih banyak pihak untuk berinvestasi dan berkontribusi dalam pembangunan desa.
+          </Text>
+          <Text
+            py={5}
+            ta={"justify"}
+          >
+            Dengan prestasi ini, diharapkan Desa Dramasaba dapat menjadi contoh bagi desa-desa lain dalam memanfaatkan media digital sebagai sarana promosi dan pengembangan potensi lokal.
+          </Text>
+        </Stack>
+        <Box py={20}>
+          <Divider />
+          <Flex justify={"space-between"} py={20}>
+            <Text fz={"sm"}>25 May 2021 . Darmasaba</Text>
+            <Box>
+              <Flex gap={"lg"}>
+                <ActionIcon variant='transparent'>
+                  <IconBrandFacebook color={"gray"} size={"30"} />
+                </ActionIcon>
+                <ActionIcon variant='transparent'>
+                  <IconBrandInstagram color={"gray"} size={"30"} />
+                </ActionIcon>
+                <ActionIcon variant='transparent'>
+                  <IconBrandTwitter color={"gray"} size={"30"} />
+                </ActionIcon>
+                <ActionIcon variant='transparent'>
+                  <IconBrandWhatsapp color={"gray"} size={"30"} />
+                </ActionIcon>
+              </Flex>
+            </Box>
+          </Flex>
+          <Divider pb={50} />
+        </Box>
+      </Container>
+    </Stack>
+  );
+}
+
+export default Page;

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

@@ -1,5 +1,137 @@
-export default function Page() {
-    return <div>
-        penghargaan
-    </div>
+'use client';
+import colors from "@/con/colors";
+import { Carousel, CarouselSlide } from "@mantine/carousel";
+import { Box, Button, Container, Group, Paper, Stack, Text, useMantineTheme } from "@mantine/core";
+import { useMediaQuery } from "@mantine/hooks";
+import Autoplay from "embla-carousel-autoplay";
+import Link from "next/link";
+import { useRef } from "react";
+import BackButton from "../../(pages)/desa/layanan/_com/BackButto";
+
+
+const data = [
+    {
+        id: 1,
+        images: "/api/img/penghargaan-2.png",
+        juara: "Juara 2",
+        deskripsi: "Lomba Video Pendek Potensi dan Peluang Investasi di Desa Kabupaten Badung 2024",
+        link: "/darmasaba/penghargaan/detail/lomba1"
+    },
+    {
+        id: 2,
+        images: "/api/img/penghargaan-3.png",
+        juara: "Juara 2",
+        deskripsi: "Duta Invenstasi Kabupaten Badung 2024",
+        link: "/darmasaba/penghargaan/detail/lomba2"
+    },
+    {
+        id: 3,
+        images: "/api/img/penghargaan-1.png",
+        juara: "Juara Favorit",
+        deskripsi: "Lomba Video Pendek Potensi dan Peluang Investasi di Desa Kabupaten Badung 2024",
+        link: "/darmasaba/penghargaan/detail/lomba3"
+    },
+    {
+        id: 4,
+        images: "/api/img/penghargaan-2.png",
+        juara: "Juara 2",
+        deskripsi: "Lomba Video Pendek Potensi dan Peluang Investasi di Desa Kabupaten Badung 2024",
+        link: "/darmasaba/penghargaan/detail/lomba1"
+    },
+    {
+        id: 5,
+        images: "/api/img/penghargaan-3.png",
+        juara: "Juara 2",
+        deskripsi: "Duta Invenstasi Kabupaten Badung 2024",
+        link: "/darmasaba/penghargaan/detail/lomba2"
+    },
+    {
+        id: 6,
+        images: "/api/img/penghargaan-1.png",
+        juara: "Juara Favorit",
+        deskripsi: "Lomba Video Pendek Potensi dan Peluang Investasi di Desa Kabupaten Badung 2024",
+        link: "/darmasaba/penghargaan/detail/lomba3"
+    }
+]
+export default function Page() {
+    return (
+        <Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={42}>
+            <Container w={{ base: "100%", md: "50%" }}>
+                <BackButton/>
+                <Stack align="center" gap={0}>
+                    <Text fz={"3.4rem"} fw={"bold"}>
+                        Penghargaan
+                    </Text>
+                    <Text
+                        py={10}
+                        ta={"justify"}
+                    >
+                        Desa Darmasaba telah berhasil meraih berbagai penghargaan bergengsi yang membuktikan dedikasi dan kerja keras seluruh elemen masyarakat dalam membangun desa yang maju dan berkelanjutan. Berikut ini adalah macam-macam penghargaan yang telah diraih oleh Desa Darmasaba:
+                    </Text>
+                    <Slider />
+                </Stack>
+            </Container>
+        </Stack>
+    )
+}
+function Slider() {
+    const height = 720;
+    const width = 1200;
+    const theme = useMantineTheme();
+    const mobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
+    const autoplay = useRef(Autoplay({ delay: 2000 }));
+
+    const slides = data.map((item) => (
+
+        <CarouselSlide key={item.id}>
+            <Paper h={"100%"} pos={"relative"} style={{
+                backgroundImage: `url(${item.images}) `,
+                backgroundSize: "cover",
+                backgroundPosition: "center",
+                backgroundRepeat: "no-repeat",
+            }}>
+                <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 fz={"2.3rem"} fw={"bold"} ta={"center"} c={"white"}>{item.juara}</Text>
+                        <Text fz={"1.5rem"} ta={"center"} c={"white"}>{item.deskripsi}</Text>
+                    </Box>
+                    <Group justify="center">
+                        <Button component={Link} href={item.link} px={46} radius={"100"} size="md" bg={colors["blue-button"]}>
+                            Detail
+                        </Button>
+                    </Group>
+                </Stack>
+            </Paper>
+        </CarouselSlide>
+
+    ));
+
+    return (
+        <Carousel
+            c={"white"}
+            py={50}
+            plugins={[autoplay.current]}
+            onMouseEnter={autoplay.current.stop}
+            onMouseLeave={autoplay.current.reset}
+            w={width}
+            height={height}
+            slideSize={{ base: "100%", sm: "50%", md: "33.333333%" }}
+            slideGap={{ base: "xl", sm: "md" }}
+            loop
+            align="start"
+            slidesToScroll={mobile ? 1 : 2}
+        >
+            {slides}
+        </Carousel>
+    );
 }

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

@@ -26,33 +26,69 @@ const data = [
   {
     id: 1,
     images: "/api/img/test.png",
-    name: "Surat Keterangan Domisili Organisasi"
+    name: "Surat Keterangan Domisili Organisasi",
+    link: "/darmasaba/desa/layanan/domisili"
   },
   {
     id: 2,
     images: "/api/img/test-3.jpeg",
-    name: "Surat Keterangan Penghasilan"
+    name: "Surat Keterangan Penghasilan",
+    link: "/darmasaba/desa/layanan/penghasilan"
   },
   {
     id: 3,
     images: "/api/img/domisili.jpeg",
-    name: "Surat Keterangan Tidak Mampu"
+    name: "Surat Keterangan Tidak Mampu",
+    link: "/darmasaba/desa/layanan/tidakmampu"
   },
   {
     id: 4,
     images: "/api/img/kelahiran.jpeg",
-    name: "Surat Keterangan Kelahiran"
+    name: "Surat Keterangan Kelahiran",
+    link: "/darmasaba/desa/layanan/kelahiran"
   },
   {
     id: 5,
     images: "/api/img/keterangan-usaha.jpeg",
-    name: "Surat Keterangan Usaha"
+    name: "Surat Keterangan Usaha",
+    link: "/darmasaba/desa/layanan/usaha"
   },
   {
     id: 6,
     images: "/api/img/kematian.jpeg",
-    name: "Surat Keterangan Kematian"
+    name: "Surat Keterangan Kematian",
+    link: "/darmasaba/desa/layanan/kematian"
   },
+  {
+    id: 7,
+    images: "/api/img/tempatusaha.jpeg",
+    name: "Surat Keterangan Tempat Usaha",
+    link: "/darmasaba/desa/layanan/tempatusaha"
+  },
+  {
+    id: 8,
+    images: "/api/img/belumkawin.jpeg",
+    name: "Surat Keterangan Belum Kawin",
+    link: "/darmasaba/desa/layanan/belumkawin"
+  },
+  {
+    id: 9,
+    images: "/api/img/berkelakuan-baik.jpeg",
+    name: "Surat Keterangan Kelakuan Baik",
+    link: "/darmasaba/desa/layanan/skck"
+  },
+  {
+    id: 10,
+    images: "/api/img/biodata.jpeg",
+    name: "Surat Keterangan Beda Biodata Diri",
+    link: "/darmasaba/desa/layanan/biodata"
+  },
+  {
+    id: 11,
+    images: "/api/img/yatim.jpeg",
+    name: "Surat Keterangan Yatim Piatu",
+    link: "/darmasaba/desa/layanan/yatim"
+  }
 
 ]
 const textHeading = {
@@ -137,9 +173,7 @@ function Slider() {
             </Text>
           </Box>
           <Group justify="center">
-            <Button onClick={() => {
-              router.push(`/layanan/${item.id}`)
-            }} px={46} radius={"100"} size="md" bg={colors["blue-button"]}>
+            <Button component={Link} href={item.link} px={46} radius={"100"} size="md" bg={colors["blue-button"]}>
               Detail
             </Button>
           </Group>

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

@@ -55,7 +55,7 @@ function Penghargaan() {
                 Juara Favorit Lomba Video Pendek
               </Text>
             </Stack>
-            <Button color={colors["blue-button"]} onClick={() => router.push("/penghargaan")} variant="white" radius={100}>
+            <Button color={colors["blue-button"]} onClick={() => router.push("/darmasaba/penghargaan")} variant="white" radius={100}>
               Selanjutnya
             </Button>
           </Stack>

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

@@ -16,12 +16,13 @@ import {
 } from "@mantine/core";
 import _ from "lodash";
 import { motion } from "motion/react";
+import { useRouter } from "next/navigation";
 import useSWR from "swr";
 
 const datamap = [
   {
     id: 1,
-    images: "/api/img/tps-3-r-pudak-mesari-olah-sampah-organik-300-kilogra-800-2023-01-12-091459-0.jpg",
+    images: "/api/img/tps.png",
     name: "TPS3R Pudak Mesari",
     deskripsi: "TPS 3R Pudak Mesari Darmasaba layak mendapat penghargaan demikian apresiasi dari Delterra Sosial Indonesia nie Semeton Darmasaba!, Hal tersebut dikarenakan walaupun baru berdiri namun TPS 3R kebanggaan Desa Darmasaba tersebut sudah berjalan dengan sangat baik. "
   },
@@ -33,7 +34,7 @@ const datamap = [
   },
   {
     id: 3,
-    images: "/api/img/tamanbeji.png",
+    images: "/api/img/taman-beji.jpg",
     name: "Taman Beji Cengana",
     deskripsi: "Tirta Klebutan di Pura Taman Beji Cengana di Desa Adat Darmasaba, Badung, selain dipercaya nunas Taksu serta pembersihan diri. Tersemat juga asal usul cerita ditemukannya Tirta Klebutan yang tepat berada di pinggir Tukad Cengana tersebut."
   },
@@ -53,6 +54,7 @@ const textHeading = {
 };
 
 function Potensi() {
+  const router = useRouter()
   const { data, isLoading } = useSWR("/", (url) =>
     ApiFetch.api.potensi.get().then(({ data }) => data?.data)
   );
@@ -126,7 +128,7 @@ function Potensi() {
       </SimpleGrid>
       <Stack align="center">
         <Group>
-          <Button color={colors["blue-button"]} variant="outline" radius={100} size="md">
+          <Button onClick={() => router.push("/darmasaba/desa/potensi")} color={colors["blue-button"]} variant="outline" radius={100} size="md">
             Selengkapnya
           </Button>
         </Group>

src/con/navbar-list-menu.ts

@@ -34,6 +34,11 @@ const navbarListMenu = [
                 name: "Layanan",
                 href: "/darmasaba/desa/layanan"
             },
+            {
+                id: "1.7",
+                name: "Penghargaan",
+                href: "/darmasaba/penghargaan"
+            }
 
         ]
     },