UI Layanan & Sub Desa Layanan

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

@@ -0,0 +1,19 @@
+import colors from '@/con/colors';
+import { Stack, Container, Text } from '@mantine/core';
+import React from 'react';
+
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"42"}>
+      <Container w={{ base: "100%", md: "50%" }} p={"xl"}>
+        <Stack gap={0}>
+          <Text>
+              
+            </Text>
+        </Stack>
+      </Container>
+    </Stack>
+  );
+}
+
+export default Page;

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

@@ -0,0 +1,206 @@
+'use client'
+import colors from "@/con/colors";
+import { ActionIcon, Anchor, BackgroundImage, Box, Button, Container, Divider, Flex, Group, List, ListItem, SimpleGrid, Stack, Stepper, StepperCompleted, StepperStep, Text } from "@mantine/core";
+import { IconBrandFacebook, IconBrandInstagram, IconBrandTwitter, IconBrandWhatsapp } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+const data = [
+    {
+        id: 1,
+        images: "/api/img/test.png",
+        name: "Surat Keterangan Domisili Organisasi",
+        link: ""
+    },
+    {
+        id: 2,
+        images: "/api/img/test-3.jpeg",
+        name: "Surat Keterangan Penghasilan",
+        link: ""
+    },
+    {
+        id: 3,
+        images: "/api/img/domisili.jpeg",
+        name: "Surat Keterangan Tidak Mampu",
+        link: ""
+    },
+    {
+        id: 4,
+        images: "/api/img/kelahiran.jpeg",
+        name: "Surat Keterangan Kelahiran",
+        link: ""
+    },
+    {
+        id: 5,
+        images: "/api/img/keterangan-usaha.jpeg",
+        name: "Surat Keterangan Usaha",
+        link: ""
+    },
+    {
+        id: 6,
+        images: "/api/img/kematian.jpeg",
+        name: "Surat Keterangan Kematian",
+        link: ""
+    },
+
+]
+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%" }} >
+                <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 <Anchor>(https://oss.go.id/)</Anchor> 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 <Anchor fz={"sm"}>Akta Kelahiran</Anchor>)</ListItem>
+                    <ListItem fz={"sm"}>Telunjuk Sakti Desa Akta Perkawinan (Petunjuk Pengajuan pada link berikut : Download <Anchor fz={"sm"}>Akta Perkawinan</Anchor>)</ListItem>
+                    <ListItem fz={"sm"}>Telunjuk Sakti Desa Akta Kematian (Petunjuk Pengajuan pada link berikut : Download <Anchor fz={"sm"}>Akata Kematian</Anchor>)</ListItem>
+                </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/(tambahan)/layanan/page.tsx

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

src/app/darmasaba/_com/Footer.tsx

@@ -102,7 +102,9 @@ function Footer() {
                           position: 'relative'
                         }}
                       >
-                        <Image src="/api/img/chatbot-removebg-preview.png" alt="Logo Desa" width={80} height={80} />
+                        <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>
@@ -195,7 +197,7 @@ function Footer() {
           </Box>
           <Divider py={15} />
           <Text ta={"center"} c={"white"} p={20}>
-          © 2024 Desa Darmasaba. Hak Cipta Dilindungi.
+            © 2024 Desa Darmasaba. Hak Cipta Dilindungi.
           </Text>
         </Box>
       </Stack>

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 { ActionIcon, Box, Burger, Group, Image, Stack, Text } from "@mantine/core";
-import { IconHome, IconSquareArrowRight } from "@tabler/icons-react";
+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/layanan/index.tsx

@@ -18,6 +18,7 @@ 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";
 
@@ -84,9 +85,7 @@ function Layanan() {
             {textHeading.des}
           </Text>
           <Box p={"md"}>
-            <Button onClick={() => {
+            <Button component={Link} href={"/darmasaba/desa/layanan"} variant="filled" bg={colors["blue-button"]} radius={100}>
-              router.push("/layanan")
-            }} variant="filled" bg={colors["blue-button"]} radius={100}>
               Detail
             </Button>
           </Box>

src/app/layout.tsx

@@ -21,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/navbar-list-menu.ts

@@ -6,32 +6,32 @@ 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"
             },