UI Detail Layanan & Detail Penghargaan

package.json

@@ -18,6 +18,7 @@
     "@elysiajs/stream": "^1.1.0",
     "@elysiajs/swagger": "^1.2.0",
     "@mantine/carousel": "^7.16.2",
+    "@mantine/charts": "^7.17.1",
     "@mantine/core": "^7.16.2",
     "@mantine/dropzone": "^7.17.0",
     "@mantine/hooks": "^7.16.2",
@@ -45,6 +46,7 @@
     "react-dom": "^19.0.0",
     "react-simple-toasts": "^6.1.0",
     "readdirp": "^4.1.1",
+    "recharts": "2",
     "swr": "^2.3.2",
     "valtio": "^2.1.3"
   },

prisma/schema.prisma

@@ -16,3 +16,4 @@ model Potensi {
   id   String @id @default(cuid())
   name String @unique
 }
+

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

@@ -0,0 +1,35 @@
+import colors from '@/con/colors';
+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 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>
+  );
+}
+
+export default Page;

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

@@ -0,0 +1,238 @@
+'use client'
+import colors from "@/con/colors";
+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: "/darmasaba/desa/layanan/domisili"
+    },
+    {
+        id: 2,
+        images: "/api/img/test-3.jpeg",
+        name: "Surat Keterangan Penghasilan",
+        link: "/darmasaba/desa/layanan/penghasilan"
+    },
+    {
+        id: 3,
+        images: "/api/img/domisili.jpeg",
+        name: "Surat Keterangan Tidak Mampu",
+        link: "/darmasaba/desa/layanan/tidakmampu"
+    },
+    {
+        id: 4,
+        images: "/api/img/kelahiran.jpeg",
+        name: "Surat Keterangan Kelahiran",
+        link: "/darmasaba/desa/layanan/kelahiran"
+    },
+    {
+        id: 5,
+        images: "/api/img/keterangan-usaha.jpeg",
+        name: "Surat Keterangan Usaha",
+        link: "/darmasaba/desa/layanan/usaha"
+    },
+    {
+        id: 6,
+        images: "/api/img/kematian.jpeg",
+        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"
+    }
+
+]
+export default function Page() {
+    const router = useRouter()
+    const [active, setActive] = useState(1);
+    const nextStep = () => setActive((current) => (current < 6 ? current + 1 : current));
+    const prevStep = () => setActive((current) => (current > 0 ? current - 1 : current));
+    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"}>
+                        Layanan
+                    </Text>
+                    <Text
+                    >
+                        Adapun berbagai layanan yang telah tersedia dan dapat diakses dengan mudah oleh masyarakat di Desa Darmasaba :
+                    </Text>
+                </Stack>
+                {/* Bagian Pelayanan Surat Keterangan */}
+                <Box py={10}>
+                    <Text fz={"h4"} fw={"bold"}>Pelayanan Surat Keterangan</Text>
+                </Box>
+                <SimpleGrid
+                    py={20}
+                    cols={{
+                        base: 1,
+                        sm: 3
+                    }}
+                >
+                    {data.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"]}
+                                            onClick={() => router.push(v.link)}>
+                                            Detail
+                                        </Button>
+                                    </Group>
+                                </Stack>
+                            </BackgroundImage>
+                        )
+                    })}
+                </SimpleGrid>
+                {/* Bagian Pelayanan Perizinan Berusaha */}
+                <Box py={15}>
+                    <Text fz={"h4"} fw={"bold"}>Pelayanan Perizinan Berusaha Berbasis Risiko Melalui Sistem ONLINE SINGLE SUBMISSION (OSS)</Text>
+                </Box>
+                <Text py={10} ta={"justify"} fz={"sm"}>Penyelenggaraan Perizinan Berusaha Berbasis Risiko melalui Sistem Online Single Submission (OSS)
+                    merupakan pelaksanaan Undang-Undang Nomor 11 Tahun 2020 Tentang Cipta Kerja. OSS Berbasis Risiko wajib digunakan oleh Pelaku Usaha,
+                    Kementerian/Lembaga, Pemerintah Daerah, Administrator Kawasan Ekonomi Khusus (KEK), dan Badan Pengusahaan Kawasan Perdagangan Bebas
+                    Pelabuhan Bebas (KPBPB).Berdasarkan Peraturan Pemerintah Nomor 5 Tahun 2021 terdapat 1.702 kegiatan usaha yang terdiri atas 1.349
+                    Klasifikasi Baku Lapangan Usaha Indonesia (KBLI) yang sudah diimplementasikan dalam Sistem OSS Berbasis Risiko.</Text>
+                <Text py={10} fz={"sm"}>Proses pendaftaran NIB melalui OSS mencakup beberapa langkah umum, seperti:</Text>
+                <Box p={"xl"} w={{ base: "100%", md: "100%" }} >
+                    <Stepper active={active} onStepClick={setActive} orientation="vertical"
+                        styles={{
+                            separator: {
+                                marginLeft: 25
+                            },
+
+                            step: {
+                                padding: '12px 0'
+                            }
+                        }}>
+                        <StepperStep label="Langkah Pertama" description="Pendaftaran Akun">
+                            Pendaftaran akun pada portal OSS
+                        </StepperStep>
+                        <StepperStep label="Langkah Kedua" description="Pengisian Data Perusahaan">
+                            Mengisi informasi perusahaan, termasuk data pemegang saham, alamat perusahaan, dan lainnya
+                        </StepperStep>
+                        <StepperStep label="Langkah Ketiga" description="Pemilihan KBLI ">
+                            Memilih KBLI dengan jenis usaha yang akan didaftarkan
+                        </StepperStep>
+                        <StepperStep label="Langkah Keempat" description="Pengunggahan Dokumen">
+                            Mengunggah dokumen-dokumen yang diperlukan, seperti akta pendirian perusahaan, surat izin usaha, dan dokumen lainnya sesuai dengan ketentuan yang berlaku
+                        </StepperStep>
+                        <StepperStep label="Langkah Kelima" description="Verifikasi dan Persetujuan">
+                            Proses verifikasi dan persetujuan oleh instansi terkait
+                        </StepperStep>
+                        <StepperStep label="Langkah Keenam" description="Penerimaan NIB">
+                            Jika proses sebelumnya berhasil, perusahaan akan menerima NIB sebagai identitas resmi usaha anda
+                        </StepperStep>
+                        <StepperCompleted>
+                            Selesai, anda telah mengikuti proses pendaftaran NIB melalui OSS
+                        </StepperCompleted>
+                    </Stepper>
+
+                    <Group justify="center" mt="xl">
+                        <Button variant="default" onClick={prevStep}>Back</Button>
+                        <Button onClick={nextStep}>Next step</Button>
+                    </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 <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}>
+                    <Text fz={"h4"} fw={"bold"}>Pelayanan Telunjuk Sakti Desa</Text>
+                </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 <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}>
+                    <Text fz={"h4"} fw={"bold"}>Pelayanan Penduduk Non-Permanent</Text>
+                </Box>
+                <Text pb={20} fz={"sm"} ta={"justify"}>Surat Keterangan Penduduk Non-Permanent adalah dokumen yang dikeluarkan oleh pihak berwenang untuk memberikan keterangan bahwa seseorang atau kelompok orang memiliki status penduduk non-permanent di suatu wilayah. Dokumen ini biasanya digunakan untuk keperluan administratif atau legal, seperti mendapatkan akses ke layanan kesehatan, pendidikan, atau pelayanan publik lainnya.</Text>
+                <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} />
+            </Container>
+        </Stack>
+    )
+}

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)/layanan/page.tsx

@@ -1,7 +0,0 @@
-import { Stack } from "@mantine/core";
-
-export default function Page() {
-    return <Stack>
-        layanan
-    </Stack>
-}

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 @@
+'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 <div>
-        penghargaan
-    </div>
+    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/Footer.tsx

@@ -1,15 +1,208 @@
-
-import colors from "@/con/colors";
-import { Stack, Container, Center, Text } from "@mantine/core";
+'use client'
+import colors from '@/con/colors';
+import { ActionIcon, Anchor, Box, Center, Container, Divider, Flex, Group, Image, Paper, SimpleGrid, Stack, Text, TextInput, Title, useMantineTheme } from '@mantine/core';
+import { useMediaQuery } from '@mantine/hooks';
+import { IconAt, IconBrandFacebook, IconBrandInstagram, IconBrandTwitter, IconBrandWhatsapp } from '@tabler/icons-react';
 
 function Footer() {
-    return <Stack bg={colors["blue-button"]} c={colors["white-trans-1"]}>
-        <Container w={{ base: "100%", md: "80%" }} p={"xl"} h={720} >
-            <Center>
-                <Text fz={"3.4rem"}>Footer</Text>
-            </Center>
-        </Container>
-    </Stack>
+  const theme = useMantineTheme();
+  const mobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
+  return (
+    <>
+      <Stack bg={colors["blue-button"]}>
+        <Box w={mobile ? "100%" : "100%"} p={"xl"} h={{ base: 1850, md: 1100 }} >
+          <Center>
+            <Paper w={"100%"}>
+              <Box component="footer" py="xl">
+                <Container size="lg">
+                  <Stack gap="xl">
+                    <Box>
+                      <Title fz={"md"} order={2} fw={700} mb="md">Komitmen Dalam Pelayanan</Title>
+                      <Stack gap="sm">
+                        <Group align="flex-start" gap="xs">
+                          <Text fz={"sm"} fw={700}>1. Transparansi:</Text>
+                          <Text fz={"sm"}>
+                            Kami berkomitmen untuk mengelola dana desa secara terbuka, sehingga masyarakat dapat
+                            mengetahui penggunaan anggaran secara jelas dan bertanggung jawab.
+                          </Text>
+                        </Group>
+
+                        <Group align="flex-start" gap="xs">
+                          <Text fz={"sm"} fw={700}>2. Profesionalisme:</Text>
+
+                          <Text fz={"sm"}>
+                            Setiap layanan desa akan dilakukan dengan profesional, cepat, dan tanpa diskriminasi,
+                            demi memastikan kepuasan masyarakat.
+                          </Text>
+                        </Group>
+
+                        <Group align="flex-start" gap="xs">
+                          <Text fz={"sm"} fw={700}>3. Partisipatif:</Text>
+                          <Text fz={"sm"}>
+                            Kami percaya bahwa partisipasi aktif masyarakat adalah kunci keberhasilan pembangunan desa.
+                            Oleh karena itu, kami akan terus melibatkan warga dalam setiap proses pengambilan keputusan.
+                          </Text>
+                        </Group>
+
+                        <Group align="flex-start" gap="xs">
+                          <Text fz={"sm"} fw={700}>4. Inovasi:</Text>
+                          <Text fz={"sm"}>
+                            Kami berkomitmen untuk terus berinovasi dalam memberikan solusi bagi permasalahan desa,
+                            termasuk melalui pemanfaatan teknologi untuk mempermudah akses layanan.
+                          </Text>
+                        </Group>
+
+                        <Group align="flex-start" gap="xs">
+                          <Text fz={"sm"} fw={700}>5. Berkeadilan:</Text>
+                          <Text fz={"sm"}>
+                            Setiap kebijakan dan program desa akan dirancang untuk memberikan manfaat yang merata
+                            bagi seluruh lapisan masyarakat, tanpa memandang status sosial atau ekonomi.
+                          </Text>
+                        </Group>
+
+                        <Group align="flex-start" gap="xs">
+                          <Text fz={"sm"} fw={700}>6. Pemberdayaan:</Text>
+                          <Text fz={"sm"}>
+                            Kami berkomitmen untuk memberdayakan masyarakat melalui pelatihan, pendampingan,
+                            dan dukungan terhadap usaha-usaha lokal agar desa semakin mandiri.
+                          </Text>
+                        </Group>
+
+                        <Group align="flex-start" gap="xs">
+                          <Text fz={"sm"} fw={700}>7. Ramah Lingkungan:</Text>
+                          <Text fz={"sm"}>
+                            Seluruh kegiatan pembangunan dan pelayanan desa akan memperhatikan keberlanjutan lingkungan,
+                            demi menjaga keseimbangan alam dan kenyamanan hidup warga.
+                          </Text>
+                        </Group>
+                      </Stack>
+                    </Box>
+
+                    <Divider />
+
+                    <Box>
+                      <Title fz={"md"} order={2} fw={700} mb="md">Tujuan Akhir</Title>
+                      <Text fz={"sm"} mb="sm">
+                        Dengan visi, misi dan komitmen ini, kami bertekad untuk menjadikan desa sebagai tempat tinggal
+                        yang nyaman, aman dan sejahtera bagi seluruh warganya.
+                      </Text>
+                      <Text fz={"sm"} mb="sm">
+                        Kami percaya bahwa kemajuan desa dimulai dari kerjasama antara pemerintah desa dan masyarakat,
+                        serta didukung oleh tata kelola yang baik dan berorientasi pada kepentingan bersama. Jika ada
+                        masukan untuk lembaga desa, silahkan hubungi pada nomor pengaduan di bawah, terima kasih.
+                      </Text>
+                    </Box>
+
+                    <Group justify='apart' align="center">
+                      <Text ta={"center"} fz={"sm"} fw={700} size="lg" style={{ fontStyle: 'italic' }}>{"Desa Kuat, Masyarakat Sejahtera!"}</Text>
+                      <Box
+                        style={{
+                          width: 80,
+                          height: 80,
+                          position: 'relative'
+                        }}
+                      >
+                        <ActionIcon size={80} radius={"xl"} variant='transparent'>
+                          <Image src="/api/img/chatbot-removebg-preview.png" alt="Logo Desa" width={80} height={80} />
+                        </ActionIcon>
+                      </Box>
+                    </Group>
+                  </Stack>
+                </Container>
+              </Box>
+            </Paper>
+          </Center>
+          <Box py={20}>
+            <SimpleGrid
+              p={20}
+              cols={{
+                base: 2,
+                sm: 4,
+              }}
+              style={{
+                color: "white"
+              }}
+            >
+              <Box p={mobile ? 30 : 30}>
+                <Stack justify='space-between'>
+                  <Text fz={"md"} fw={"bold"}>Tentang Darmasaba</Text>
+                  <Text fz={"xs"} >Desa Darmasaba adalah desa
+                    budaya yang kaya akan tradisi dan
+                    nilai-nilai luhur masyarakat Bali.</Text>
+                  <Box>
+                    <Flex gap={"md"}>
+                      <ActionIcon variant='transparent'>
+                        <IconBrandFacebook color='white' size={"30"} />
+                      </ActionIcon>
+                      <ActionIcon variant='transparent'>
+                        <IconBrandInstagram color='white' size={"30"} />
+                      </ActionIcon>
+                      <ActionIcon variant='transparent'>
+                        <IconBrandTwitter color='white' size={"30"} />
+                      </ActionIcon>
+                      <ActionIcon variant='transparent'>
+                        <IconBrandWhatsapp color='white' size={"30"} />
+                      </ActionIcon>
+                    </Flex>
+                  </Box>
+                </Stack>
+              </Box>
+              <Box p={mobile ? 30 : 30}>
+                <Stack justify='space-between' gap={"xs"}>
+                  <Text fz={"md"} fw={"bold"}>Layanan</Text>
+                  <Anchor c={"white"} variant='transparent'>
+                    <Text fz={"xs"} >Administrasi Kependudukan</Text>
+                  </Anchor>
+                  <Anchor c={"white"} variant='transparent'>
+                    <Text fz={"xs"} >Pelayanan Sosial</Text>
+                  </Anchor>
+                  <Anchor c={"white"} variant='transparent'>
+                    <Text fz={"xs"} >Pengaduan Masyarakat</Text>
+                  </Anchor>
+                  <Anchor c={"white"} variant='transparent'>
+                    <Text fz={"xs"} >Informasi Publik</Text>
+                  </Anchor>
+                </Stack>
+              </Box>
+              <Box p={mobile ? 30 : 30}>
+                <Stack justify='space-between' gap={"xs"}>
+                  <Text fz={"md"} fw={"bold"}>Tautan Penting</Text>
+                  <Anchor c={"white"} variant='transparent'>
+                    <Text fz={"xs"} >Portal Badung</Text>
+                  </Anchor>
+                  <Anchor c={"white"} variant='transparent'>
+                    <Text fz={"xs"} >E-Government</Text>
+                  </Anchor>
+                  <Anchor c={"white"} variant='transparent'>
+                    <Text fz={"xs"} >Transparansi</Text>
+                  </Anchor>
+                  <Anchor c={"white"} variant='transparent'>
+                    <Text fz={"xs"} >Unduhan</Text>
+                  </Anchor>
+                </Stack>
+              </Box>
+              <Box p={mobile ? 30 : 30}>
+                <Stack justify='space-between'>
+                  <Text fz={"md"} fw={"bold"}>Newsletter</Text>
+                  <Text fz={"xs"} >Dapatkan informasi terbaru
+                    tentang kegiatan dan program
+                    desa</Text>
+                  <TextInput
+                    placeholder='Alamat email anda'
+                    rightSection={<IconAt color={colors["blue-button"]} />}
+                  />
+                </Stack>
+              </Box>
+            </SimpleGrid>
+          </Box>
+          <Divider py={15} />
+          <Text ta={"center"} c={"white"} p={20}>
+            © 2024 Desa Darmasaba. Hak Cipta Dilindungi.
+          </Text>
+        </Box>
+      </Stack>
+    </>
+  );
 }
 
-export default Footer;
+export default Footer;

src/app/darmasaba/_com/Navbar.tsx

@@ -2,13 +2,13 @@
 import colors from "@/con/colors";
 import navbarListMenu from "@/con/navbar-list-menu";
 import stateNav from "@/state/state-nav";
-import { ActionIcon, Box, Burger, Group, Stack, Text } from "@mantine/core";
-import { IconHome, IconSquareArrowRight } from "@tabler/icons-react";
+import { ActionIcon, Box, Burger, Group, Image, Stack, Text } from "@mantine/core";
+import { IconSquareArrowRight } from "@tabler/icons-react";
 import { motion } from 'framer-motion';
+import { useRouter } from 'next/navigation';
 import { useSnapshot } from "valtio";
 import { MenuItem } from "../../../../types/menu-item";
 import { NavbarMainMenu } from "./NavbarMainMenu";
-import { useRouter } from 'next/navigation'
 
 export function Navbar() {
   const { item, isSearch, mobileOpen } = useSnapshot(stateNav);
@@ -31,8 +31,10 @@ export function Navbar() {
             <ActionIcon variant="transparent" onClick={() => {
               router.push("/darmasaba")
               stateNav.mobileOpen = false
-            }}>
-              <IconHome />
+            }}
+              size={80} radius={"xl"}
+            >
+              <Image src="/api/img/darmasaba-icon.png" alt="Logo Desa" width={50} height={50} />
             </ActionIcon>
             <Burger onClick={() => stateNav.mobileOpen = !stateNav.mobileOpen} color={colors["blue-button"]} opened={mobileOpen} />
           </Group>

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

@@ -0,0 +1,104 @@
+import colors from '@/con/colors';
+import { BackgroundImage, Box, Button, Group, SimpleGrid, Stack, Text } from '@mantine/core';
+
+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"
+  },
+
+]
+function Apbdes() {
+  const textHeading = {
+    title: "APBDes",
+    des: "Transparansi APBDes Darmasaba adalah langkah nyata menuju tata kelola pemerintahan desa yang bersih dan bertanggung jawab"
+  }
+  return (
+    <>
+      <Stack p={"sm"} gap={"4rem"} >
+        <Box
+          w={{
+            base: '100%',
+            sm: '60%',
+          }}
+        >
+          <Stack gap={0}>
+            <Text fz={"4.4rem"} fw={"bold"}>
+              {textHeading.title}
+            </Text>
+            <Text fz={"1.4rem"}>
+              {textHeading.des}
+            </Text>
+          </Stack>
+        </Box>
+        <SimpleGrid
+          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">
+                    <Button px={46} radius={"100"} size="md" bg={colors["blue-button"]}>
+                      Detail
+                    </Button>
+                  </Group>
+                </Stack>
+              </BackgroundImage>
+            )
+          })}
+        </SimpleGrid>
+      </Stack>
+    </>
+  );
+}
+
+export default Apbdes;

src/app/darmasaba/_com/main-page/content-5/index.tsx

@@ -1,16 +0,0 @@
-"use client";
-import { Center, Container, Stack, Text } from "@mantine/core";
-
-function Content5() {
-  return (
-    <Stack>
-      <Container w={{ base: "100%", md: "80%" }} p={"xl"} h={720}>
-        <Center>
-          <Text fz={"3.4rem"}>Berkolaborasi membangun desa</Text>
-        </Center>
-      </Container>
-    </Stack>
-  );
-}
-
-export default Content5;

src/app/darmasaba/_com/main-page/content-6/index.tsx

@@ -1,18 +0,0 @@
-"use client";
-import { Stack, Container, Center, Text } from "@mantine/core";
-
-
-function Content6() {
-  return (
-    <Stack>
-      <Container w={{ base: "100%", md: "80%" }} p={"xl"} h={720}>
-        <Center>
-          <Text fz={"3.4rem"}>Indeks Kepuasan Masyarakat</Text>
-        </Center>
-
-      </Container>
-    </Stack>
-  );
-}
-
-export default Content6;

src/app/darmasaba/_com/main-page/content-7/index.tsx

@@ -1,13 +0,0 @@
-import { Stack, Container, Center, Text } from "@mantine/core";
-
-export default function Content7() {
-    return (
-        <Stack>
-            <Container w={{ base: "100%", md: "80%" }} p={"xl"} h={720}>
-                <Center>
-                    <Text fz={"3.4rem"}>APBDES Darmasaba</Text>
-                </Center>
-            </Container>
-        </Stack>
-    );
-}

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

@@ -0,0 +1,89 @@
+"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";
+
+function DesaAntiKorupsi() {
+  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={180} color={colors["blue-button"]} />,
+    },
+    {
+      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={180} color={colors["blue-button"]} />,
+    },
+    {
+      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={180} color={colors["blue-button"]} />,
+    },
+    {
+      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={180} color={colors["blue-button"]} />,
+    },
+    {
+      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={180} color={colors["blue-button"]} />,
+    },
+    {
+      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={180} color={colors["blue-button"]} />,
+    },
+  ]
+const theme = useMantineTheme();
+  const mobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
+  return (
+    <Stack gap={"0"} bg={colors.Bg} p={"sm"} h={mobile ? 2000 : 1150}>
+      <Container w={{ base: "100%", md: "80%" }} p={"xl"} >
+        <Center>
+          <Text fz={"3.4rem"}>Desa Anti Korupsi</Text>
+        </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>
+      </Container>
+        <SimpleGrid
+          pt={50}
+          cols={{
+            base: 1,
+            sm: 2,
+
+          }}>
+          {data.map((v, k) => {
+            return (
+              <motion.div
+                key={k}
+
+                whileTap={{ scale: 0.8 }}
+              >
+                <Paper p={"lg"} >
+                  <Flex gap={"lg"} justify={"center"} align={"center"}>
+                    <Box >
+                      <Text fz={"lg"} ta={"center"} c={colors["blue-button"]}>{v.judul}</Text>
+                      <Flex gap={"lg"} justify={"center"} align={"center"}>
+                        {v.icon}
+                        <Box>
+                          <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>
+            )
+          })}
+        </SimpleGrid>
+    </Stack>
+  );
+}
+
+export default DesaAntiKorupsi;

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

@@ -0,0 +1,173 @@
+"use client";
+import { Stack, Container, Center, Text, Paper, Flex, Box, SimpleGrid } from "@mantine/core";
+import { BarChart, PieChart } from '@mantine/charts';
+import colors from "@/con/colors";
+
+const dataBarChart = [
+  {
+    bulan: "Januari",
+    responden: "480"
+  },
+  {
+    bulan: "Februari",
+    responden: "730"
+  },
+  {
+    bulan: "Maret",
+    responden: "740"
+  },
+  {
+    bulan: "April",
+    responden: "80"
+  },
+  {
+    bulan: "Mei",
+    responden: "250"
+  },
+  {
+    bulan: "Juni",
+    responden: "900"
+  },
+  {
+    bulan: "Juli",
+    responden: "230"
+  },
+  {
+    bulan: "Agustus",
+    responden: "255"
+  },
+  {
+    bulan: "September",
+    responden: "650"
+  },
+  {
+    bulan: "Oktober",
+    responden: "730"
+  },
+  {
+    bulan: "November",
+    responden: "800"
+  },
+  {
+    bulan: "Desember",
+    responden: "1000"
+  },
+
+]
+
+const dataPieChart = [
+  { name: "Laki-laki", value: 70, color: colors["blue-button"] },
+  { name: "Perempuan", value: 30, color: colors.orange },
+]
+
+const dataPieChart2 = [
+  { name: "Sangat Baik", value: 75, color: colors["blue-button"] },
+  { name: "Buruk", value: 25, color: colors.orange },
+]
+
+const dataPieChart3 = [
+  { name: "Umur 18-44", value: 65, color: colors["blue-button"] },
+  { name: "Umur 44-60+", value: 35, color: colors.orange },
+]
+
+function Kepuasan() {
+  return (
+    <Stack p={"sm"}>
+      <Container w={{ base: "100%", md: "80%" }} p={"xl"}>
+        <Center>
+          <Text fz={"3.4rem"}>Indeks Kepuasan Masyarakat</Text>
+        </Center>
+        <Text fz={"1.4rem"} ta={"center"}>Ukur kebahagiaan warga, tingkatkan layanan desa! Dengan partisipasi aktif masyarakat, kami berkomitmen untuk terus memperbaiki layanan agar lebih transparan, efektif, dan sesuai dengan kebutuhan warga. Kepuasan Anda adalah prioritas utama kami dalam membangun desa yang lebih baik!</Text>
+      </Container>
+      <Box px={"xl"}>
+        <Paper p={"lg"} bg={colors.Bg}>
+          <Paper p={"lg"}>
+            <Flex justify={"space-between"} align={"center"}>
+              <Text fw={"bold"}>Pelayanan Terhadap Publik Desa Darmasaba</Text>
+              <Box>
+                <Text fz={"h1"} fw={"bold"} c={colors["blue-button"]}>95.00</Text>
+                <Text >Sangat Baik</Text>
+                <Text fz={"sm"} fw={"bold"} c={colors["blue-button"]}>Total 2500 responden</Text>
+              </Box>
+            </Flex>
+            <BarChart
+              py={"xl"}
+              h={300}
+              data={dataBarChart}
+              dataKey="bulan"
+              tickLine="y"
+              series={[
+                {
+                  name: "responden",
+                  color: colors["blue-button"],
+                },
+              ]}
+            />
+          </Paper>
+          <Box py={"xl"}>
+            <SimpleGrid
+              cols={{
+                base: 1,
+                sm: 3
+              }}
+            >
+              <Box>
+                <Paper p={"lg"}>
+                  <Text fw={"bold"}>Jenis Kelamin</Text>
+                  <Box py={"xl"}>
+                    <PieChart
+                      size={250}
+                      withLabelsLine
+                      labelsPosition="outside"
+                      labelsType="percent"
+                      withLabels
+                      data={dataPieChart}
+                      withTooltip tooltipDataSource="segment" mx="auto"
+
+                    />
+                  </Box>
+                </Paper>
+              </Box>
+              <Box>
+                <Paper p={"lg"}>
+                  <Text fw={"bold"}>Pilihan</Text>
+                  <Box py={"xl"}>
+                    <PieChart
+                      size={250}
+                      withLabelsLine
+                      labelsPosition="outside"
+                      labelsType="percent"
+                      withLabels
+                      data={dataPieChart2}
+                      withTooltip tooltipDataSource="segment" mx="auto"
+
+                    />
+                  </Box>
+                </Paper>
+              </Box>
+              <Box>
+                <Paper p={"lg"}>
+                  <Text fw={"bold"}>Umur</Text>
+                  <Box py={"xl"}>
+                    <PieChart
+                      size={250}
+                      withLabelsLine
+                      labelsPosition="outside"
+                      labelsType="percent"
+                      withLabels
+                      data={dataPieChart3}
+                      withTooltip tooltipDataSource="segment" mx="auto"
+                    />
+                  </Box>
+                </Paper>
+              </Box>
+            </SimpleGrid>
+
+          </Box>
+        </Paper>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Kepuasan;

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

@@ -18,40 +18,77 @@ import { useMediaQuery } from "@mantine/hooks";
 import Autoplay from "embla-carousel-autoplay";
 import _ from "lodash";
 import { useTransitionRouter } from "next-view-transitions";
+import Link from "next/link";
 import { useRef } from "react";
 import useSWR from "swr";
 
 const data = [
   {
     id: 1,
-    images: "/assets/images/layanan/test.png",
-    name: "Surat Keterangan Domisili Organisasi"
+    images: "/api/img/test.png",
+    name: "Surat Keterangan Domisili Organisasi",
+    link: "/darmasaba/desa/layanan/domisili"
   },
   {
     id: 2,
-    images: "/assets/images/layanan/test3.jpeg",
-    name: "Surat Keterangan Penghasilan"
+    images: "/api/img/test-3.jpeg",
+    name: "Surat Keterangan Penghasilan",
+    link: "/darmasaba/desa/layanan/penghasilan"
   },
   {
     id: 3,
-    images: "/assets/images/layanan/test2.jpeg",
-    name: "Surat Keterangan Tidak Mampu"
+    images: "/api/img/domisili.jpeg",
+    name: "Surat Keterangan Tidak Mampu",
+    link: "/darmasaba/desa/layanan/tidakmampu"
   },
   {
     id: 4,
-    images: "/assets/images/layanan/kelahiran.jpeg",
-    name: "Surat Keterangan Kelahiran"
+    images: "/api/img/kelahiran.jpeg",
+    name: "Surat Keterangan Kelahiran",
+    link: "/darmasaba/desa/layanan/kelahiran"
   },
   {
     id: 5,
-    images: "/assets/images/layanan/test.png",
-    name: "Surat Keterangan Usaha"
+    images: "/api/img/keterangan-usaha.jpeg",
+    name: "Surat Keterangan Usaha",
+    link: "/darmasaba/desa/layanan/usaha"
   },
   {
     id: 6,
-    images: "/assets/images/layanan/test2.jpeg",
-    name: "Surat Keterangan Kematian"
+    images: "/api/img/kematian.jpeg",
+    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 = {
@@ -83,13 +120,11 @@ function Layanan() {
           >
             {textHeading.des}
           </Text>
-          {/* <Box p={"md"}>
-            <Button onClick={() => {
-              router.push("/layanan")
-            }} variant="filled" bg={"dark"} radius={100}>
-              Lanjutkan
+          <Box p={"md"}>
+            <Button component={Link} href={"/darmasaba/desa/layanan"} variant="filled" bg={colors["blue-button"]} radius={100}>
+              Detail
             </Button>
-          </Box> */}
+          </Box>
         </Stack>
       </Container>
       <Slider />
@@ -126,6 +161,7 @@ function Slider() {
         <Stack justify="space-between" h={"100%"} gap={0} p={"lg"} pos={"relative"} >
           <Box p={"lg"}>
             <Text
+
               fw={"bold"}
               c={"white"}
               size={"3.5rem"}
@@ -137,9 +173,7 @@ function Slider() {
             </Text>
           </Box>
           <Group justify="center">
-            <Button onClick={() => {
-              router.push(`/layanan/${item.id}`)
-            }} px={46} radius={"100"} size="md">
+            <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

@@ -1,4 +1,5 @@
 'use client';
+import colors from "@/con/colors";
 import { Stack, Box, Container, Button, Text } from "@mantine/core";
 import { useTransitionRouter } from 'next-view-transitions'
 
@@ -54,7 +55,7 @@ function Penghargaan() {
                 Juara Favorit Lomba Video Pendek
               </Text>
             </Stack>
-            <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,19 +16,45 @@ import {
 } from "@mantine/core";
 import _ from "lodash";
 import { motion } from "motion/react";
+import { useRouter } from "next/navigation";
 import useSWR from "swr";
 
-type DataPotensi = {
-  id: string;
-  name: string;
-};
+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."
+  },
+]
+
+
 
 const textHeading = {
   title: "Potensi",
-  des: "segenap sumber daya alam dan sumber daya manusia yang dimiliki desa sebagai modal dasar yang perlu dikelola dan dikembangkan bagi kelangsungan dan perkembangan desa",
+  des: "Tidak hanya untuk warga desa, fitur ini juga dapat digunakan oleh pemerintah desa untuk merencanakan program pengembangan berbasis potensi lokal",
 };
 
-function Content4() {
+function Potensi() {
+  const router = useRouter()
   const { data, isLoading } = useSWR("/", (url) =>
     ApiFetch.api.potensi.get().then(({ data }) => data?.data)
   );
@@ -57,7 +83,7 @@ function Content4() {
             whileTap={{ scale: 0.8 }}
           >
             <BackgroundImage
-              src={images.tps}
+              src={datamap[k].images}
               h={320}
               key={k}
               radius={16}
@@ -84,15 +110,16 @@ function Content4() {
                 }}
               >
                 <Text fw={"bold"} c={"gray.1"} size={"2.4rem"}>
-                  {v.name}
+                  {datamap[k].name}
                 </Text>
                 <Text
+                  lineClamp={2}
                   style={{
-                    textAlign: "center",
+                    textAlign: "justify",
                   }}
-                  c={"blue"}
+                  c={colors["white-1"]}
                 >
-                  Tambahkan Text Indikasi Keberhasilan
+                  {datamap[k].deskripsi}
                 </Text>
               </Stack>
             </BackgroundImage>
@@ -101,20 +128,8 @@ function Content4() {
       </SimpleGrid>
       <Stack align="center">
         <Group>
-          <Stack gap={0}>
-            <Title>Text Lanjutan Mengarahkan</Title>
-            <Text
-              style={{
-                textAlign: "center",
-              }}
-            >
-              deskripsi singkat sebelum tombol dibawah setelah ini
-            </Text>
-          </Stack>
-        </Group>
-        <Group>
-          <Button variant="outline" radius={100} size="md">
-            Selanjutnya
+          <Button onClick={() => router.push("/darmasaba/desa/potensi")} color={colors["blue-button"]} variant="outline" radius={100} size="md">
+            Selengkapnya
           </Button>
         </Group>
       </Stack>
@@ -123,4 +138,4 @@ function Content4() {
   );
 }
 
-export default Content4;
+export default Potensi;

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

@@ -0,0 +1,93 @@
+import colors from "@/con/colors";
+import { BackgroundImage, Box, Button, Center, Container, Group, SimpleGrid, Stack, Text } from "@mantine/core";
+
+const data = [
+    {
+        id: 1,
+        title: "Tata Kelola Pemerintahan",
+        image: "/api/img/lombadesa.jpg",
+        deskripsi: "Juara 1 Lomba Desa Tingkat Kabupaten/Kota Tahun [XXXX]"
+    },
+    {
+        id: 2,
+        title: "Tata Kelola Pemerintahan",
+        image: "/api/img/lombadesa.jpg",
+        deskripsi: "Juara 1 Lomba Desa Tingkat Kabupaten/Kota Tahun [XXXX]"
+    },
+    {
+        id: 3,
+        title: "Tata Kelola Pemerintahan",
+        image: "/api/img/lombadesa.jpg",
+        deskripsi: "Juara 1 Lomba Desa Tingkat Kabupaten/Kota Tahun [XXXX]"
+    },
+]
+function Prestasi() {
+    return (
+        <>
+            <Stack p={"sm"}>
+                <Container w={{ base: "100%", md: "80%" }} p={"xl"}>
+                    <Center>
+                        <Text fz={"3.4rem"}>Prestasi Desa</Text>
+                    </Center>
+                    <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>
+                </Container>
+                <Box py={50}>
+                    <SimpleGrid
+                        cols={{
+                            base: 1,
+                            sm: 3
+                        }}
+                    >
+                        {data.map((v, k) => {
+                            return (
+                                <BackgroundImage
+                                    key={k}
+                                    src={v.image}
+                                    h={720}
+                                    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"}
+                                                ta={"center"}
+                                            >
+                                                {v.title}
+                                            </Text>
+                                        </Box>
+                                        <Text
+                                            fw={"bold"}
+                                            c={"white"}
+                                            size={"3.5rem"}
+                                            ta={"center"}
+                                        >
+                                            {v.deskripsi}
+                                        </Text>
+                                        <Group justify="center">
+                                            <Button px={46} radius={"100"} size="md" bg={colors["blue-button"]}>
+                                                Lihat Detail
+                                            </Button>
+                                        </Group>
+                                    </Stack>
+                                </BackgroundImage>
+                            )
+                        })}
+                    </SimpleGrid>
+                </Box>
+            </Stack>
+        </>
+    )
+}
+export default Prestasi;

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

@@ -0,0 +1,40 @@
+'use client'
+import colors from "@/con/colors";
+import { Box, Center, Container, Image, Paper, SimpleGrid, Stack, Text, useMantineTheme } from "@mantine/core";
+import { useMediaQuery } from "@mantine/hooks";
+
+export default function SDGS() {
+    const theme = useMantineTheme();
+    const mobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
+    return (
+        <Stack p={"sm"}>
+            <Container w={{ base: "100%", md: "80%" }} p={"xl"}>
+                <Center>
+                    <Text fz={"3.4rem"}>SDGs Desa</Text>
+                </Center>
+                <Text fz={"1.4rem"} ta={"center"}>SDGs Desa adalah upaya menerapkan 17 Tujuan Pembangunan Berkelanjutan di tingkat desa.
+                    Dengan fokus pada pengentasan kemiskinan, pendidikan, kesehatan, kesetaraan gender, dan pelestarian lingkungan, kami berkomitmen untuk menciptakan desa yang lebih baik bagi semua</Text>
+                <Box py={50}>
+                    <Paper p={"lg"} bg={colors.Bg}>
+                        <SimpleGrid
+                            cols={{
+                                base: 1,
+                                sm: 3,
+                            }}>
+                            <Center>
+                                <Image src={"/api/img/sgdesa-1.png"} alt="" w={mobile ? 250 : 200} />
+                            </Center>
+                            <Center>
+                                <Image src={"/api/img/sgdesa-2.png"} alt="" w={mobile ? 250 : 220} />
+                            </Center>
+                            <Center>
+                                <Image src={"/api/img/sgdesa-3.png"} alt="" w={mobile ? 250 : 190} />
+                            </Center>
+                        </SimpleGrid>
+                    </Paper>
+                </Box>
+            </Container>
+
+        </Stack>
+    );
+}

src/app/darmasaba/layout.tsx

@@ -1,7 +1,10 @@
 import colors from "@/con/colors";
 import { Box, Space, Stack } from "@mantine/core";
-import Footer from "@/app/darmasaba/_com/Footer";
+
 import { Navbar } from "@/app/darmasaba/_com/Navbar";
+import Footer from "./_com/Footer";
+
+
 
 export default function Layout({ children }: { children: React.ReactNode }) {
     return (

src/app/darmasaba/page.tsx

@@ -1,24 +1,30 @@
+import DesaAntiKorupsi from "@/app/darmasaba/_com/main-page/desaantikorupsi";
+import Kepuasan from "@/app/darmasaba/_com/main-page/kepuasan";
 import LandingPage from "@/app/darmasaba/_com/main-page/landing-page";
+import Layanan from "@/app/darmasaba/_com/main-page/layanan";
 import Penghargaan from "@/app/darmasaba/_com/main-page/penghargaan";
-import Content3 from "@/app/darmasaba/_com/main-page/layanan";
-import Content4 from "@/app/darmasaba/_com/main-page/content-4";
-import Content5 from "@/app/darmasaba/_com/main-page/content-5";
-import Content6 from "@/app/darmasaba/_com/main-page/content-6";
+import Potensi from "@/app/darmasaba/_com/main-page/potensi";
 import colors from "@/con/colors";
+import SDGS from "./_com/main-page/sdgs";
 // import ApiFetch from "@/lib/api-fetch";
+
 import { Stack } from "@mantine/core";
-import Content7 from "@/app/darmasaba/_com/main-page/content-7";
+import Apbdes from "./_com/main-page/apbdes";
+import Prestasi from "./_com/main-page/prestasi";
+
 
 export default function Page() {
   return (
     <Stack bg={colors.grey[1]} gap={"4rem"}>
       <LandingPage />
       <Penghargaan />
-      <Content3 />
-      <Content4 />
-      <Content5 />
-      <Content6 />
-      <Content7 />
+      <Layanan />
+      <Potensi />
+      <DesaAntiKorupsi />
+      <Kepuasan />
+      <SDGS />
+      <Apbdes />
+      <Prestasi/>
     </Stack>
   );
 }

src/app/layout.tsx

@@ -7,6 +7,7 @@ import "animate.css";
 import 'react-simple-toasts/dist/style.css';
 import 'react-simple-toasts/dist/theme/dark.css';
 import "./globals.css";
+import '@mantine/charts/styles.css';
 
 
 
@@ -20,7 +21,7 @@ import {
 import { ViewTransitions } from "next-view-transitions";
 
 export const metadata = {
-  title: "desa darmasaba",
+  title: "Desa Darmasaba",
   description: "Desa Darmasaba Kabupaten Badung",
 };
 

src/con/colors.ts

@@ -1,4 +1,5 @@
 const colors = {
+    "orange": "#FCAE00",
     "blue-button": "#0A4E78",
     "white-1": "#FBFBFC",
     "white-trans-1": "rgba(255, 255, 255, 0.5)",

src/con/navbar-list-menu.ts

@@ -6,34 +6,39 @@ const navbarListMenu = [
         children: [
             {
                 id: "1.1",
-                name: "profile",
+                name: "Profile",
                 href: "/darmasaba/desa/profile"
             },
             {
                 id: "1.2",
-                name: "potensi",
+                name: "Potensi",
                 href: "/darmasaba/desa/potensi"
             },
             {
                 id: "1.3",
-                name: "berita",
+                name: "Berita",
                 href: "/darmasaba/desa/berita"
             },
             {
                 id: "1.4",
-                name: "pengumuman",
+                name: "Pengumuman",
                 href: "/darmasaba/desa/pengumuman"
             },
             {
                 id: "1.5",
-                name: "galery",
+                name: "Gallery",
                 href: "/darmasaba/desa/galery"
             },
             {
                 id: "1.6",
-                name: "layanan",
+                name: "Layanan",
                 href: "/darmasaba/desa/layanan"
             },
+            {
+                id: "1.7",
+                name: "Penghargaan",
+                href: "/darmasaba/penghargaan"
+            }
 
         ]
     },