tamabah versi

package.json

@@ -1,6 +1,6 @@
 {
   "name": "desa-darmasaba",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",

src/app/darmasaba/(pages)/keamanan/darurat/page.tsx

@@ -0,0 +1,160 @@
+import colors from '@/con/colors';
+import { Avatar, Box, Flex, Group, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { IconAmbulance, IconBadge, IconBuildingBank, IconBuildingSkyscraper, IconFiretruck, IconFirstAidKit, IconPhoneCall, IconUser } from '@tabler/icons-react';
+import BackButton from '../../desa/layanan/_com/BackButto';
+
+const emergencyServices = [
+  {
+    id: 1,
+    name: "Polisi",
+    icon: <IconBadge size={24} color={colors['blue-button']} />,
+    nomor: '081xxxxxxxxx'
+  },
+  {
+    id: 2,
+    name: "Ambulans",
+    icon: <IconAmbulance size={24} color={colors['blue-button']} />,
+    nomor: '081xxxxxxxxx'
+  },
+  {
+    id: 3,
+    name: "Pemadam Kebakaran",
+    icon: <IconFiretruck size={24} color={colors['blue-button']} />,
+    nomor: '081xxxxxxxxx'
+  }
+];
+
+const healthFacilities = [
+  {
+    id: 4,
+    name: "Puskesmas Darmasaba",
+    icon: <IconFirstAidKit size={24} color={colors['blue-button']} />,
+    nomor: '081xxxxxxxxx'
+  },
+  {
+    id: 5,
+    name: "UGD Terdekat",
+    icon: <IconAmbulance size={24} color={colors['blue-button']} />,
+    nomor: '081xxxxxxxxx'
+  }
+];
+
+const villageGovernment = [
+  {
+    id: 6,
+    name: "Kantor Desa Darmasaba",
+    icon: <IconBuildingSkyscraper size={24} color={colors['blue-button']} />,
+    nomor: '081xxxxxxxxx'
+  },
+  {
+    id: 7,
+    name: "Kepala Desa",
+    icon: <IconUser size={24} color={colors['blue-button']} />,
+    nomor: '081xxxxxxxxx'
+  }
+];
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Box>
+        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+          Kontak Darurat
+        </Text>
+        <Text px={{ base: 20, md: 150 }} ta={"center"} fz={{ base: "h4", md: "h3" }} >
+          Desa Darmasaba, Kecamatan Abiansemal, Kabupaten Badung.
+        </Text>
+      </Box>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={'lg'}>
+          <Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
+            <Flex justify={'center'} gap={'lg'} align={'center'}>
+              <Avatar radius={"xl"} size={'lg'} bg={colors['BG-trans']}>
+                <IconPhoneCall size={30} color={colors["blue-button"]} />
+              </Avatar>
+              <Box>
+                <Text ta={'center'} c={colors['blue-button']} py={10} fz={{ base: "md", md: "h4" }} fw={"bold"} >
+                  Nomor Darurat Utama
+                </Text>
+                <Text ta={'center'} fw={"bold"} fz={'h2'} c={colors["blue-button"]}>112</Text>
+              </Box>
+            </Flex>
+          </Paper>
+        </Stack>
+      </Box>
+      <Box px={{ base: "md", md: 100 }}>
+        <SimpleGrid cols={{ base: 1, md: 2 }} spacing="xl">
+          {/* Layanan Darurat */}
+          <Paper p="lg" radius="md" bg={colors['white-trans-1']}>
+            <Group pb="md" align="center">
+              <Avatar radius={"xl"} size={'lg'} bg={colors['BG-trans']}>
+                <IconFirstAidKit size={30} color={colors["blue-button"]} />
+              </Avatar>
+              <Text fw="bold" fz={{ base: "lg", md: "xl" }} c={colors["blue-button"]}>
+                Layanan Darurat
+              </Text>
+            </Group>
+
+            {emergencyServices.map((v, k) => (
+              <Group key={k} px="md" py="sm" bg={colors['BG-trans']} mb="xs" justify="space-between" style={{ borderRadius: 8 }}>
+                <Group>
+                  {v.icon}
+                  <Text>{v.name}</Text>
+                </Group>
+                <Text>{v.nomor}</Text>
+              </Group>
+            ))}
+          </Paper>
+
+          {/* Fasilitas Kesehatan */}
+          <Paper p="lg" radius="md" bg={colors['white-trans-1']}>
+            <Group pb="md" align="center">
+              <Avatar radius={"xl"} size={'lg'} bg={colors['BG-trans']}>
+                <IconBuildingSkyscraper size={30} color={colors["blue-button"]} />
+              </Avatar>
+              <Text fw="bold" fz={{ base: "lg", md: "xl" }} c={colors["blue-button"]}>
+                Fasilitas Kesehatan
+              </Text>
+            </Group>
+
+            {healthFacilities.map((v, k) => (
+              <Group key={k} px="md" py="sm" bg={colors['BG-trans']} mb="xs" justify="space-between" style={{ borderRadius: 8 }}>
+                <Group>
+                  {v.icon}
+                  <Text>{v.name}</Text>
+                </Group>
+                <Text>{v.nomor}</Text>
+              </Group>
+            ))}
+          </Paper>
+
+          {/* Pemerintah Desa */}
+          <Paper p="lg" radius="md" bg={colors['white-trans-1']}>
+            <Group pb="md" align="center">
+              <Avatar radius={"xl"} size={'lg'} bg={colors['BG-trans']}>
+                <IconBuildingBank size={30} color={colors["blue-button"]} />
+              </Avatar>
+              <Text fw="bold" fz={{ base: "lg", md: "xl" }} c={colors["blue-button"]}>
+                Pemerintah Desa
+              </Text>
+            </Group>
+
+            {villageGovernment.map((v, k) => (
+              <Group key={k} px="md" py="sm" bg={colors['BG-trans']} mb="xs" justify="space-between" style={{ borderRadius: 8 }}>
+                <Group>
+                  {v.icon}
+                  <Text>{v.name}</Text>
+                </Group>
+                <Text>{v.nomor}</Text>
+              </Group>
+            ))}
+          </Paper>
+        </SimpleGrid>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/keamanan/keamanan/page.tsx

@@ -0,0 +1,106 @@
+import colors from '@/con/colors';
+import { Box, Center, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { IconHospitalCircle, IconPhone, IconReport, IconReportMedical, IconSpeakerphone } from '@tabler/icons-react';
+import BackButton from '../../desa/layanan/_com/BackButto';
+
+const data1 = [
+  {
+    id: 1,
+    judul: 'Layanan Medis Cepat',
+    icon: <IconHospitalCircle size={80} color={colors["blue-button"]} />,
+    deskripsi: <List>
+      <ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans desa siap siaga 24 jam untuk keadaan darurat medis.</ListItem>
+      <ListItem fz={{base: 'h4', md: 'lg'}}>Pos kesehatan desa menyediakan layanan pertolongan pertama dan perawatan dasar.</ListItem>
+    </List>
+  },
+  {
+    id: 2,
+    judul: 'Nomor Darurat',
+    icon: <IconPhone size={80} color={colors["blue-button"]}/>,
+    deskripsi: <List>
+      <ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans: 08125651052</ListItem>
+      <ListItem fz={{base: 'h4', md: 'lg'}}>Pos Kesehatan: 08125651052</ListItem>
+      <ListItem fz={{base: 'h4', md: 'lg'}}>Pemadam Kebakaran: 113</ListItem>
+      <ListItem fz={{base: 'h4', md: 'lg'}}>Polisi: 110</ListItem>
+    </List>
+  },
+  {
+    id: 3,
+    judul: 'Posko Kesehatan & Evakuasi',
+    icon: <IconReportMedical size={80} color={colors["blue-button"]}/>,
+    deskripsi: <List>
+      <ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans desa siap siaga 24 jam untuk keadaan darurat medis.</ListItem>
+      <ListItem fz={{base: 'h4', md: 'lg'}}>Pos kesehatan desa menyediakan layanan pertolongan pertama dan perawatan dasar.</ListItem>
+    </List>
+  },
+  {
+    id: 4,
+    judul: 'Pelatihan & Sosialisasi',
+    icon: <IconSpeakerphone size={80} color={colors["blue-button"]}/>,
+    deskripsi: <List>
+      <ListItem fz={{base: 'h4', md: 'lg'}}>Setiap bulan, desa mengadakan pelatihan P3K (Pertolongan Pertama pada Kecelakaan) bagi masyarakat.</ListItem>
+      <ListItem fz={{base: 'h4', md: 'lg'}}>Edukasi tentang tindakan saat bencana seperti gempa bumi dan banjir.</ListItem>
+    </List>
+  },
+  {
+    id: 5,
+    judul: 'Sistem Laporan Kejadian',
+    icon: <IconReport size={80} color={colors["blue-button"]}/>,
+    deskripsi: <List>
+      <ListItem>Warga bisa melaporkan kejadian darurat melalui aplikasi desa atau menghubungi perangkat desa.</ListItem>
+      <ListItem>Laporan akan segera ditindaklanjuti oleh tim penanganan darurat.</ListItem>
+    </List>
+  }
+]
+
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Box>
+        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+          Penanganan Darurat
+        </Text>
+        <Text px={{base: 20, md: 150}} ta={"center"} fz={{ base: "h4", md: "h3" }} >
+          Program kesehatan di Desa Darmasaba memiliki peran penting dalam meningkatkan kesejahteraan masyarakat. Kami berkomitmen untuk memberikan layanan darurat yang cepat, responsif, dan mudah diakses oleh seluruh warga.
+        </Text>
+      </Box>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={'lg'}>
+          <SimpleGrid
+            pb={10}
+            cols={{
+              base: 1,
+              md: 3,
+            }}>
+            {data1.map((v, k) => {
+              return (
+                <Paper radius={10} key={k} bg={colors["white-trans-1"]}>
+                  <Stack gap={'xs'}>
+                    <Center py={40}>
+                      {v.icon}
+                    </Center>
+                    <Box px={'lg'}>
+                      <Box pb={20}>
+                        <Text pb={10} c={colors["blue-button"]} fw={"bold"} fz={"h3"}>
+                          {v.judul}
+                        </Text>
+                        <Box px={10}>
+                        {v.deskripsi}
+                        </Box>
+                      </Box>
+                    </Box>
+                  </Stack>
+                </Paper>
+              )
+            })}
+          </SimpleGrid>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/keamanan/kriminalitas/page.tsx

@@ -0,0 +1,123 @@
+import colors from '@/con/colors';
+import { Box, Button, Flex, Group, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import BackButton from '../../desa/layanan/_com/BackButto';
+import { IconArrowRight } from '@tabler/icons-react';
+
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <SimpleGrid
+        px={{ base: 20, md: 100 }}
+        cols={{
+          base: 1,
+          md: 2
+        }}
+      >
+        {/* Content 1 */}
+        <Box pt={{base: 0, md: 35}}>
+          <Text c={colors["blue-button"]} fz={{ base: "h4", md: "h3" }} >
+            Info Keamanan dan Pencegahan Kriminalitas
+          </Text>
+          <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+            Kontak Darurat
+          </Text>
+          <Group>
+            <Button rightSection={<IconArrowRight />} mt={20} radius={10} bg={colors["blue-button"]} c={colors["white-1"]}>
+              Lihat Detail
+            </Button>
+          </Group>
+        </Box>
+        {/* Content 2 */}
+        <SimpleGrid cols={{ base: 1, md: 2 }}>
+          <Paper p={"lg"}>
+            <Text c={colors["blue-button"]} fw={'bold'} fz={{ base: "h4", md: "h3" }} >
+              Tips menjaga keamanan lingkungan
+            </Text>
+            <Text fz={{ base: "h5", md: "h4" }} c={colors["blue-button"]} >
+              Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+            </Text>
+            <Group>
+              <Button rightSection={<IconArrowRight />} mt={20} radius={10} bg={colors["blue-button"]} c={colors["white-1"]}>
+                Lihat Detail
+              </Button>
+            </Group>
+          </Paper>
+          <Paper p={"lg"}>
+            <Text c={colors["blue-button"]} fw={'bold'} fz={{ base: "h4", md: "h3" }} >
+              Mengenali tanda-tanda kegiatan kriminal
+            </Text>
+            <Text fz={{ base: "h5", md: "h4" }} c={colors["blue-button"]} >
+              the printing and typesetting industry. the printing and typesetting industry.
+            </Text>
+            <Group>
+              <Button rightSection={<IconArrowRight />} mt={20} radius={10} bg={colors["blue-button"]} c={colors["white-1"]}>
+                Lihat Detail
+              </Button>
+            </Group>
+          </Paper>
+        </SimpleGrid>
+        {/* Content 3 */}
+        <Paper p={'xl'}>
+          <Text fz={{ base: "h3", md: "h2" }} c={colors["blue-button"]} fw={"bold"}>
+            Program Keamanan Rutin
+          </Text>
+          <Stack pt={30} gap={'lg'}>
+            <Box>
+              <Paper p={"md"} bg={colors['blue-button']} w={{ base: "100%", md: "100%" }}>
+                <Flex align={'center'} justify={'space-between'}>
+                  <Text fz={'h3'} c={colors['white-1']}>Ronda Malam</Text>
+                  <IconArrowRight size={30} color={colors['white-1']} />
+                </Flex>
+              </Paper>
+            </Box>
+            <Box>
+              <Paper p={"md"} bg={colors['blue-button']} w={{ base: "100%", md: "100%" }}>
+                <Flex align={'center'} justify={'space-between'}>
+                  <Text fz={'h3'} c={colors['white-1']}>Ronda Malam</Text>
+                  <IconArrowRight size={30} color={colors['white-1']} />
+                </Flex>
+              </Paper>
+            </Box>
+            <Box>
+              <Paper p={"md"} bg={colors['blue-button']} w={{ base: "100%", md: "100%" }}>
+                <Flex align={'center'} justify={'space-between'}>
+                  <Text fz={'h3'} c={colors['white-1']}>Ronda Malam</Text>
+                  <IconArrowRight size={30} color={colors['white-1']} />
+                </Flex>
+              </Paper>
+            </Box>
+            <Box pt={25}>
+              <Button fullWidth rightSection={<IconArrowRight size={20} color={colors['white-1']} />}>Lihat program lainnya</Button>
+            </Box>
+          </Stack>
+        </Paper>
+        {/* Content 4 */}
+        <Box>
+          <Paper p={'xl'} >
+            <Box style={{ maxWidth: "560px", width: "100%", aspectRatio: "16/9" }}>
+              <iframe width="100%"
+                height="100%"
+                src="https://www.youtube.com/embed/p5OkdBgasWA?si=6lFKXeE9LN5zcJQq" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"  ></iframe>
+            </Box>
+            <Text py={10} fz={{ base: "h3", md: "h2" }} fw={'bold'} c={colors['blue-button']}>
+              Patroli Malam Darmasaba
+            </Text>
+            <Text fz={'h4'} >
+              Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+            </Text>
+            <Box pt={10}>
+              <Button bg={colors['blue-button']} rightSection={<IconArrowRight size={20} color={colors['white-1']} />}>
+                Lihat Video Lainnya
+              </Button>
+            </Box>
+          </Paper>
+        </Box>
+      </SimpleGrid>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/keamanan/laporan/page.tsx

@@ -0,0 +1,50 @@
+import colors from '@/con/colors';
+import { Stack, Box, Text, Flex, ColorSwatch } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../desa/layanan/_com/BackButto';
+
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Box>
+        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+          Laporan Keamanan Lingkungan
+        </Text>
+      </Box>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={'lg'}>
+          <Flex justify={'space-between'}>
+            <Text fz={"h4"}>Laporan Terbaru</Text>
+            <Box>
+              <Flex gap={'lg'}>
+                <Box>
+                  <Flex gap={{ base: 0, md: 5 }} align={'center'}>
+                    <Text fz={{ base: 'md', md: 'h4' }}>Terselesaikan</Text>
+                    <ColorSwatch color="#2A742D" size={30} />
+                  </Flex>
+                </Box>
+                <Box>
+                  <Flex gap={{ base: 0, md: 5 }} align={'center'}>
+                    <Text fz={{ base: 'md', md: 'h4' }}>Dalam Proses</Text>
+                    <ColorSwatch color="#135A9B" size={30} />
+                  </Flex>
+                </Box>
+                <Box>
+                  <Flex gap={{ base: 0, md: 5 }} align={'center'}>
+                    <Text fz={{ base: 'md', md: 'h4' }}>Gagal</Text>
+                    <ColorSwatch color="#A34437" size={30} />
+                  </Flex>
+                </Box>
+              </Flex>
+            </Box>
+          </Flex>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/keamanan/lingkungan/page.tsx

@@ -0,0 +1,107 @@
+import colors from '@/con/colors';
+import { Box, Center, Image, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import BackButton from '../../desa/layanan/_com/BackButto';
+
+const data1 = [
+  {
+    id: 1,
+    judul: 'Peran Pecalang dalam Keamanan Desa',
+    image: '/api/img/pecalang.png',
+    pengertian: 'Pecalang adalah petugas keamanan adat di Bali yang memiliki peran penting dalam menjaga ketertiban dan budaya lokal. Tugas mereka meliputi:',
+    deskripsi: <List>
+      <ListItem fz={{ base: 'h4', md: 'lg' }}>Mengamankan upacara adat dan kegiatan keagamaan.</ListItem>
+      <ListItem fz={{ base: 'h4', md: 'lg' }}>Mengatur lalu lintas saat ada perayaan atau kegiatan besar.</ListItem>
+      <ListItem fz={{ base: 'h4', md: 'lg' }}>Berpatroli untuk mencegah gangguan keamanan di lingkungan desa.</ListItem>
+      <ListItem fz={{ base: 'h4', md: 'lg' }}>Berkoordinasi dengan aparat desa dan kepolisian dalam penanganan situasi darurat.</ListItem>
+    </List>
+  },
+  {
+    id: 2,
+    judul: 'Patwal (Patroli Pengawal) Desa',
+    image: '/api/img/patwal-1.png',
+    pengertian: 'Selain Pecalang, Desa Darmasaba juga memiliki Patwal yang bertugas menjaga keamanan sehari-hari. Peran mereka antara lain:',
+    deskripsi: <List>
+      <ListItem fz={{ base: 'h4', md: 'lg' }}>Berpatroli secara rutin untuk memastikan lingkungan tetap aman.</ListItem>
+      <ListItem fz={{ base: 'h4', md: 'lg' }}>Menjaga ketertiban lalu lintas di area desa.</ListItem>
+      <ListItem fz={{ base: 'h4', md: 'lg' }}>Melakukan tindakan preventif terhadap potensi gangguan keamanan.</ListItem>
+      <ListItem fz={{ base: 'h4', md: 'lg' }}>Siap siaga dalam keadaan darurat untuk membantu warga.</ListItem>
+    </List>
+  },
+  {
+    id: 3,
+    judul: 'Layanan Keamanan yang Tersedia',
+    image: '/api/img/pospecalang.png',
+    pengertian: 'Jika terjadi keadaan darurat atau membutuhkan bantuan keamanan, warga dapat menghubungi:',
+    deskripsi: <List>
+      <ListItem fz={{ base: 'h4', md: 'lg' }}>Pos Pecalang Desa: [Masukkan Nomor Kontak].</ListItem>
+      <ListItem fz={{ base: 'h4', md: 'lg' }}>Patwal Desa Darmasaba: [Masukkan Nomor Kontak].</ListItem>
+      <ListItem fz={{ base: 'h4', md: 'lg' }}>Polsek Terdekat: 110 (Layanan Kepolisian).</ListItem>
+    </List>
+  },
+  {
+    id: 4,
+    judul: 'Program Keamanan Desa',
+    image: '/api/img/rond.png',
+    pengertian: 'Untuk meningkatkan keamanan, Desa Darmasaba menjalankan berbagai program, seperti:',
+    deskripsi: <List>
+      <ListItem fz={{ base: 'h4', md: 'lg' }}>Ronda Malam Warga: Kegiatan jaga malam secara bergilir oleh warga bersama Pecalang dan Patwal.</ListItem>
+      <ListItem fz={{ base: 'h4', md: 'lg' }}>Sosialisasi Keamanan: Edukasi bagi warga tentang cara menjaga keamanan lingkungan.</ListItem>
+      <ListItem fz={{ base: 'h4', md: 'lg' }}> Pengawasan Kamera CCTV: Memantau titik- titik strategis untuk mencegah tindak kejahatan.</ListItem>
+    </List>
+  }
+]
+
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Box>
+        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+          Keamanan Lingkungan (Pecalang / Patwal)
+        </Text>
+        <Text px={{ base: 20, md: 150 }} ta={"center"} fz={{ base: "h4", md: "h3" }} >
+          Keamanan dan ketertiban lingkungan di Desa Darmasaba dijaga melalui peran aktif Pecalang dan Patwal (Patroli Pengawal). Mereka bertugas memastikan desa tetap aman, tertib, dan kondusif bagi seluruh warga.
+        </Text>
+      </Box>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={'lg'}>
+          <SimpleGrid
+            pb={10}
+            cols={{
+              base: 1,
+              md: 3,
+            }}>
+            {data1.map((v, k) => {
+              return (
+                <Paper radius={10} key={k} bg={colors["white-trans-1"]}>
+                  <Stack gap={'xs'}>
+                    <Center px={10} py={20}>
+                      <Image src={v.image} alt='' />
+                    </Center>
+                    <Box px={'lg'}>
+                      <Box pb={20}>
+                        <Text pb={10} c={colors["blue-button"]} fw={"bold"} fz={"h3"}>
+                          {v.judul}
+                        </Text>
+                        <Text pb={10} fz={"h4"} ta={'justify'}>
+                          {v.pengertian}
+                        </Text>
+                        <Box px={10}>
+                          {v.deskripsi}
+                        </Box>
+                      </Box>
+                    </Box>
+                  </Stack>
+                </Paper>
+              )
+            })}
+          </SimpleGrid>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/keamanan/polsek/page.tsx

@@ -0,0 +1,95 @@
+import colors from '@/con/colors';
+import { Badge, Box, Button, Flex, Paper, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { IconArrowDown, IconClock, IconNavigation, IconPhone, IconPin, IconSearch } from '@tabler/icons-react';
+import BackButton from '../../desa/layanan/_com/BackButto';
+
+
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Box pb={10} px={{ base: 20, md: 100 }}>
+        <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+          Kantor Polisi Terdekat
+        </Text>
+        <Text pb={15} fz={'h4'} >
+          Desa Darmasaba, Kecamatan Abiansemal, Kabupaten Badung
+        </Text>
+        <TextInput radius={10} leftSection={<IconSearch size={20} />} placeholder='Cari Kantor Polisi' />
+      </Box>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={'lg'}>
+          <Paper radius={10} bg={colors["white-trans-1"]} p={'xl'}>
+            <Stack gap={'xs'}>
+              <SimpleGrid
+                cols={{
+                  base: 1,
+                  md: 2,
+                }}
+              >
+                {/* Content Sebelah Kiri */}
+                <Box>
+                  <Text c={colors["blue-button"]} fw={'bold'} fz={'h2'}>Polsek Abiansemal</Text>
+                  <Text c={colors["blue-button"]} fz={'sm'}>2,5 Km dari Desa Darmasaba</Text>
+                  <Flex py={10} gap={9} align={'center'}>
+                    <IconPin size={25} color={colors["blue-button"]} />
+                    <Text c={colors["blue-button"]} fz={'lg'}>Jl. Gandamayu 1 Blahkiuh</Text>
+                  </Flex>
+                  <Flex gap={9} align={'center'}>
+                    <IconPhone size={25} color={colors["blue-button"]} />
+                    <Text c={colors["blue-button"]} fz={'lg'}>08xxxxxxxx</Text>
+                  </Flex>
+                  <Flex py={10} gap={9} align={'center'}>
+                    <IconClock size={25} color={colors["blue-button"]} />
+                    <Text c={colors["blue-button"]} fz={'lg'}>24 Jam</Text>
+                  </Flex>
+                  <Box>
+                    <Text c={colors["blue-button"]} fw={'bold'} fz={'h2'}>Layanan Yang Tersedia :</Text>
+                    <SimpleGrid
+                      py={10}
+                      cols={{
+                        base: 1,
+                        md: 2,
+                      }}
+                    >
+                      <Box>
+                        <Text c={colors["blue-button"]} fz={'lg'}>Laporan Kehilangan</Text>
+                      </Box>
+                      <Box>
+                        <Text c={colors["blue-button"]} fz={'lg'}>Laporan Kriminal</Text>
+                      </Box>
+                      <Box>
+                        <Text c={colors["blue-button"]} fz={'lg'}>Pelayanan SKCK</Text>
+                      </Box>
+                      <Box>
+                        <Text c={colors["blue-button"]} fz={'lg'}>Pengaduan Masyarakat</Text>
+                      </Box>
+                    </SimpleGrid>
+                  </Box>
+                  <Box>
+                    <Button bg={colors["blue-button"]} rightSection={<IconArrowDown size={20}/>}>Lihat Kantor Polisi Lainnya</Button>
+                  </Box>
+                </Box>
+                <Box pos={'relative'}>
+                  <Box style={{ position: 'absolute', top: 0, right: 0 }}>
+                    <Badge size='lg' c={'#287407'} bg={'#A8EDC4'}>Buka</Badge>
+                  </Box>
+                  <Box pt={40}>
+                  <iframe style={{ border: 2, width: "100%" }} src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3945.7949871034166!2d115.20778387533218!3d-8.519275686287415!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2dd23ceb4f6e5363%3A0xa353662f070f47d8!2sAbian%20Semal%20Police%20Station!5e0!3m2!1sid!2sid!4v1742789148825!5m2!1sid!2sid" width="550" height="300" ></iframe>
+                  </Box>
+                  <Box pt={20}>
+                    <Button fullWidth bg={colors["blue-button"]} radius={10} leftSection={<IconNavigation size={20}/>}>Petunjuk Arah</Button>
+                  </Box>
+                </Box>
+              </SimpleGrid>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/kesehatan/datakesehatan/page.tsx

@@ -0,0 +1,298 @@
+import colors from '@/con/colors';
+import { Stack, Box, Text, Paper, Center, Flex, ColorSwatch, SimpleGrid, Anchor, Divider, Image } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../desa/layanan/_com/BackButto';
+import { BarChart } from '@mantine/charts';
+
+
+const dataKematian = [
+  {
+    id: 1,
+    tahun: '2023',
+    kematianKasar: '1.7',
+    kematianBayi: '1.4',
+    kelahiranKasar: '0.5'
+  },
+  {
+    id: 2,
+    tahun: '2024',
+    kematianKasar: '1.4',
+    kematianBayi: '1.8',
+    kelahiranKasar: '1.5'
+  },
+  {
+    id: 3,
+    tahun: '2025',
+    kematianKasar: '2.0',
+    kematianBayi: '1.5',
+    kelahiranKasar: '1.2'
+  },
+
+]
+
+const dataPenyakit = [
+  { penyakit: 'Covid', penderita: 335 },
+  { penyakit: 'Tuli', penderita: 105 },
+  { penyakit: 'Bisul', penderita: 98 },
+  { penyakit: 'Panas', penderita: 96 },
+  { penyakit: 'Batuk', penderita: 87 },
+  { penyakit: 'Sembelit', penderita: 72 },
+  { penyakit: 'Demam', penderita: 51 },
+  { penyakit: 'Gred', penderita: 36 },
+  { penyakit: 'Magh', penderita: 34 },
+  { penyakit: 'Farangitis Akut', penderita: 17 },
+]
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+        Data Kesehatan Masyarakat Puskesmas Darmasaba
+      </Text>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={'lg'}>
+          {/* Bar Chart Kematian Kelahiran */}
+          <Box>
+            <Paper p={"xl"} bg={colors['white-trans-1']}>
+              <Box pb={30}>
+                <Flex pb={30} justify={'flex-end'} gap={'xl'} align={'center'}>
+                  <Box>
+                    <Flex gap={{ base: 0, md: 5 }} align={'center'}>
+                      <Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>Angka Kematian Kasar</Text>
+                      <ColorSwatch color="#26308A" size={30} />
+                    </Flex>
+                  </Box>
+                  <Box>
+                    <Flex gap={{ base: 0, md: 5 }} align={'center'}>
+                      <Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>Angka Kematian Bayi</Text>
+                      <ColorSwatch color="#135A9B" size={30} />
+                    </Flex>
+                  </Box>
+                  <Box>
+                    <Flex gap={{ base: 0, md: 5 }} align={'center'}>
+                      <Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>Angka Kelahiran Kasar</Text>
+                      <ColorSwatch color="#3290CA" size={30} />
+                    </Flex>
+                  </Box>
+                </Flex>
+                <Center>
+                  <BarChart
+                    h={400}
+                    data={dataKematian}
+                    dataKey="tahun"
+                    series={[
+                      { name: 'kematianKasar', color: '#26308A' },
+                      { name: 'kematianBayi', color: '#135A9B' },
+                      { name: 'kelahiranKasar', color: '#3290CA' },
+                    ]}
+                    tickLine="y"
+                  />
+                </Center>
+              </Box>
+            </Paper>
+          </Box>
+          {/* Bar Chart Penyakit */}
+          <Box>
+            <Paper p={"xl"} bg={colors['white-trans-1']}>
+              <Box pb={30}>
+                <Text pb={30} fw={"bold"} fz={{ base: 'h4', md: 'h3' }} ta={"center"}>
+                  Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik
+                </Text>
+                <Center>
+                  <BarChart
+                    p={20}
+                    mb={30}
+                    h={500}
+                    data={dataPenyakit}
+                    dataKey='penyakit'
+                    orientation='vertical'
+                    yAxisProps={{ width: 80 }}
+                    barProps={{ radius: 10 }}
+                    series={[{ name: 'penderita', color: colors['blue-button'] }]}
+                  />
+                </Center>
+                <Text ta={"center"} fw={"bold"} fz={"h4"}>Jumlah Penderita</Text>
+              </Box>
+            </Paper>
+          </Box>
+          {/* Artikel Kesehatan */}
+          <Box>
+            <SimpleGrid
+              cols={{
+                base: 1,
+                md: 3,
+              }}
+            >
+              {/* Fasilitas Kesehatan */}
+              <Box>
+                <Paper p={'xl'} h={'112vh'} bg={colors['white-trans-1']}>
+                  <Stack gap={'xs'}>
+                    <Text ta={'center'} fw={"bold"} fz={'h3'} c={colors['blue-button']}>Fasilitas Kesehatan</Text>
+                    <Box>
+                      <Text fz={'h4'}>
+                        UPTD Puskesmas Abiansemal III
+                      </Text>
+                      <Text fz={'h4'}>
+                        Jl. Ratna, Sibang Kaja
+                      </Text>
+                      <Text fz={'h4'}>
+                        08:00-16:00 WITA
+                        (Senin-Sabtu)
+                      </Text>
+                      <Text fz={'h4'}>
+                        Layanan Unggulan: Poli Umum, Poli Gigi, Imunisasi, Ibu/KB
+                      </Text>
+                      <Anchor c={'black'} variant='transparent'>
+                        <Text c={'black'} fz={'h4'}>
+                          Detail Lengkap {'>>'}
+                        </Text>
+                      </Anchor>
+                    </Box>
+                    <Divider color={colors['blue-button']} px={'xl'} />
+                    <Box>
+                      <Text fz={'h4'}>
+                        UPTD Puskesmas Abiansemal III
+                      </Text>
+                      <Text fz={'h4'}>
+                        Jl. Ratna, Sibang Kaja
+                      </Text>
+                      <Text fz={'h4'}>
+                        08:00-16:00 WITA
+                        (Senin-Sabtu)
+                      </Text>
+                      <Text fz={'h4'}>
+                        Layanan Unggulan: Poli Umum, Poli Gigi, Imunisasi, Ibu/KB
+                      </Text>
+                      <Anchor c={'black'} variant='transparent'>
+                        <Text c={'black'} fz={'h4'}>
+                          Detail Lengkap {'>>'}
+                        </Text>
+                      </Anchor>
+                    </Box>
+                    <Divider color={colors['blue-button']} px={'xl'} />
+                    <Box>
+                      <Text fz={'h4'}>
+                        UPTD Puskesmas Abiansemal III
+                      </Text>
+                      <Text fz={'h4'}>
+                        Jl. Ratna, Sibang Kaja
+                      </Text>
+                      <Text fz={'h4'}>
+                        08:00-16:00 WITA
+                        (Senin-Sabtu)
+                      </Text>
+                      <Text fz={'h4'}>
+                        Layanan Unggulan: Poli Umum, Poli Gigi, Imunisasi, Ibu/KB
+                      </Text>
+                      <Anchor c={'black'} variant='transparent'>
+                        <Text c={'black'} fz={'h4'}>
+                          Detail Lengkap {'>>'}
+                        </Text>
+                      </Anchor>
+                    </Box>
+                    <Divider color={colors['blue-button']} px={'xl'}/>
+                  </Stack>
+                </Paper>
+              </Box>
+              {/* Jadwal Kegiatan */}
+              <Box>
+                <Paper p={'xl'} h={'112vh'} bg={colors['white-trans-1']}>
+                  <Stack gap={'xs'}>
+                    <Text ta={'center'} fw={"bold"} fz={'h3'} c={colors['blue-button']}>Jadwal Kegiatan</Text>
+                    <Box>
+                      <Text fz={'h4'} fw={'bold'} c={colors['blue-button']}>
+                        21 Februari 2025
+                      </Text>
+                      <Text fz={'h4'} fw={'bold'}>
+                        Posyandu Balita
+                      </Text>
+                      <Text fz={'h4'}>
+                        08:00-12:00 WITA
+                      </Text>
+                      <Text fz={'h4'}>
+                        Banjar Gulingan
+                      </Text>
+                      <Anchor c={colors['blue-button']} variant='transparent'>
+                        <Text c={colors['blue-button']} fz={'h4'} >
+                          Detail & Pendaftaran
+                        </Text>
+                      </Anchor>
+                    </Box>
+                    <Divider color={colors['blue-button']} px={'xl'} />
+                    <Box>
+                      <Text fz={'h4'} fw={'bold'} c={colors['blue-button']}>
+                        23 Februari 2025
+                      </Text>
+                      <Text fz={'h4'} fw={'bold'}>
+                        Donor Darah
+                      </Text>
+                      <Text fz={'h4'}>
+                        09:00-14:00 WITA
+                      </Text>
+                      <Text fz={'h4'}>
+                      Puskesmas Abiansemal III
+                      </Text>
+                      <Anchor c={colors['blue-button']} variant='transparent'>
+                        <Text c={colors['blue-button']} fz={'h4'} >
+                          Detail & Pendaftaran
+                        </Text>
+                      </Anchor>
+                    </Box>
+                  </Stack>
+                </Paper>
+              </Box>
+              {/* Artikel Kesehatan */}
+              <Box>
+                <Paper p={'xl'} h={'112vh'} bg={colors['white-trans-1']}>
+                  <Stack gap={'xs'}>
+                    <Box>
+                    <Text ta={'center'} fw={"bold"} fz={'h3'} c={colors['blue-button']}>Artikel Kesehatan</Text>
+                    <Image pt={5} src={'/api/img/dbd.png'} alt="" />
+                      <Text fz={'h4'} fw={'bold'} >
+                      Tips Mencegah Demam Berdarah Saat Musim Hujan
+                      </Text>
+                      <Text fz={'h6'} pb={10}>
+                      Diposting: 12 Februari 2025 | Dinas Kesehatan
+                      </Text>
+                      <Text fz={'h4'} pb={10}>
+                      Yuk Kenali gelaja dan cara penanganan DBD yang efektif untuk melindungi keluarga anda selama musim hujan.
+                      </Text>
+                      <Anchor c={'black'} variant='transparent'>
+                        <Text c={'black'} fz={'h4'} >
+                          Baca Selengkapnya {'>>'}
+                        </Text>
+                      </Anchor>
+                    </Box>
+                    <Divider color={colors['blue-button']} px={'xl'} />
+                    <Box>
+                    <Text ta={'center'} fw={"bold"} fz={'h3'} c={colors['blue-button']}>Artikel Kesehatan</Text>
+                    <Image pt={5} src={'/api/img/dbd.png'} alt="" />
+                      <Text fz={'h4'} fw={'bold'} >
+                      Tips Mencegah Demam Berdarah Saat Musim Hujan
+                      </Text>
+                      <Text fz={'h6'} pb={10}>
+                      Diposting: 12 Februari 2025 | Dinas Kesehatan
+                      </Text>
+                      <Text fz={'h4'} pb={10}>
+                      Yuk Kenali gelaja dan cara penanganan DBD yang efektif untuk melindungi keluarga anda selama musim hujan.
+                      </Text>
+                      <Anchor c={'black'} variant='transparent'>
+                        <Text c={'black'} fz={'h4'} >
+                          Baca Selengkapnya {'>>'}
+                        </Text>
+                      </Anchor>
+                    </Box>
+                  </Stack>
+                </Paper>
+              </Box>
+            </SimpleGrid>
+          </Box>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/kesehatan/info/page.tsx

@@ -0,0 +1,120 @@
+import colors from '@/con/colors';
+import { Box, Image, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import BackButton from '../../desa/layanan/_com/BackButto';
+
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+        Info Wabah / Penyakit
+      </Text>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={'lg'}>
+          <SimpleGrid
+            cols={{
+              base: 1,
+              md: 3,
+            }}
+          >
+            <Box>
+              <Paper p={'xl'} h={'80vh'} bg={colors['white-trans-1']}>
+                <Stack gap={'xs'}>
+                  <Box>
+                    <Text fw={"bold"} fz={'h3'} c={colors['blue-button']}>Demam Berdarah Dengue (DBD)</Text>
+                    <Image pt={5} src={'/api/img/dbd.png'} alt="" />
+                    <Text fz={'h4'} fw={'bold'} >
+                      Apa itu DBD penyebab, gejala dan cara penanganannya?
+                    </Text>
+                    <Text fz={'h6'} pb={10}>
+                      Diposting: 12 Februari 2025 | Dinas Kesehatan
+                    </Text>
+                    <Text fz={'h4'} pb={10}>
+                      Yuk Kenali gelaja dan cara penanganan DBD yang efektif untuk melindungi keluarga anda selama musim hujan.
+                    </Text>
+                    <List>
+                      <ListItem>
+                        Penyebab: Virus dengue yang ditularkan oleh nyamuk Aedes aegypti.
+                      </ListItem>
+                      <ListItem>
+                        Gejala: Demam tinggi, nyeri sendi, ruam kulit, dan pendarahan ringan.
+                      </ListItem>
+                      <ListItem>
+                        Pencegahan: Menguras tempat air, menutup wadah air, fogging, dan menggunakan lotion anti-nyamuk.
+                      </ListItem>
+                    </List>
+                  </Box>
+                </Stack>
+              </Paper>
+            </Box>
+            <Box>
+              <Paper p={'xl'} h={'80vh'} bg={colors['white-trans-1']}>
+                <Stack gap={'xs'}>
+                  <Box>
+                    <Text fw={"bold"} fz={'h3'} c={colors['blue-button']}>TBC (Tuberkulosis)</Text>
+                    <Image pt={5} src={'/api/img/tbc-1.png'} alt="" />
+                    <Text fz={'h4'} fw={'bold'} >
+                      Apa itu TBC penyebab, gejala dan cara penanganannya?
+                    </Text>
+                    <Text fz={'h6'} pb={10}>
+                      Diposting: 12 Februari 2025 | Dinas Kesehatan
+                    </Text>
+                    <Text fz={'h4'} pb={10}>
+                      Yuk Kenali gelaja dan cara penanganan TBC yang efektif untuk melindungi keluarga anda.
+                    </Text>
+                    <List>
+                      <ListItem>
+                        Penyebab: Bakteri Mycobacterium tuberculosis yang menyebar melalui udara.
+                      </ListItem>
+                      <ListItem>
+                        Gejala: Batuk lebih dari 2 minggu, berkeringat di malam hari, dan berat badan turun.
+                      </ListItem>
+                      <ListItem>
+                        Pencegahan: Vaksin BCG, pola hidup sehat, dan pengobatan bagi penderita agar tidak menular.
+                      </ListItem>
+                    </List>
+                  </Box>
+                </Stack>
+              </Paper>
+            </Box>
+            <Box>
+              <Paper p={'xl'} h={'80vh'} bg={colors['white-trans-1']}>
+                <Stack gap={'xs'}>
+                  <Box>
+                    <Text fw={"bold"} fz={'h3'} c={colors['blue-button']}>Diare dan Kolera</Text>
+                    <Image pt={5} src={'/api/img/diare.png'} alt="" />
+                    <Text fz={'h4'} fw={'bold'} >
+                      Apa itu Diare dan Kolera penyebab, gejala dan cara penanganannya?
+                    </Text>
+                    <Text fz={'h6'} pb={10}>
+                      Diposting: 12 Februari 2025 | Dinas Kesehatan
+                    </Text>
+                    <Text fz={'h4'} pb={10}>
+                      Yuk Kenali gelaja dan cara penanganan Diare dan Kolera yang efektif untuk melindungi keluarga anda.
+                    </Text>
+                    <List>
+                      <ListItem>
+                        Penyebab: Bakteri Vibrio cholerae (Kolera) atau Escherichia coli (diare) akibat makanan/minuman yang terkontaminasi.
+                      </ListItem>
+                      <ListItem>
+                        Gejala: Buang air besar cair terus-menerus, dehidrasi, dan lemas.
+                      </ListItem>
+                      <ListItem>
+                        Pencegahan: Menjaga kebersihan makanan dan air, serta mencuci tangan dengan sabun.
+                      </ListItem>
+                    </List>
+                  </Box>
+                </Stack>
+              </Paper>
+            </Box>
+          </SimpleGrid>
+        </Stack>
+      </Box>
+    </Stack>
+
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/kesehatan/kontak/page.tsx

@@ -0,0 +1,106 @@
+import colors from '@/con/colors';
+import { Box, Center, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { IconHospitalCircle, IconPhone, IconReport, IconReportMedical, IconSpeakerphone } from '@tabler/icons-react';
+import BackButton from '../../desa/layanan/_com/BackButto';
+
+const data1 = [
+  {
+    id: 1,
+    judul: 'Layanan Medis Cepat',
+    icon: <IconHospitalCircle size={80} color={colors["blue-button"]} />,
+    deskripsi: <List>
+      <ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans desa siap siaga 24 jam untuk keadaan darurat medis.</ListItem>
+      <ListItem fz={{base: 'h4', md: 'lg'}}>Pos kesehatan desa menyediakan layanan pertolongan pertama dan perawatan dasar.</ListItem>
+    </List>
+  },
+  {
+    id: 2,
+    judul: 'Nomor Darurat',
+    icon: <IconPhone size={80} color={colors["blue-button"]}/>,
+    deskripsi: <List>
+      <ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans: 08125651052</ListItem>
+      <ListItem fz={{base: 'h4', md: 'lg'}}>Pos Kesehatan: 08125651052</ListItem>
+      <ListItem fz={{base: 'h4', md: 'lg'}}>Pemadam Kebakaran: 113</ListItem>
+      <ListItem fz={{base: 'h4', md: 'lg'}}>Polisi: 110</ListItem>
+    </List>
+  },
+  {
+    id: 3,
+    judul: 'Posko Kesehatan & Evakuasi',
+    icon: <IconReportMedical size={80} color={colors["blue-button"]}/>,
+    deskripsi: <List>
+      <ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans desa siap siaga 24 jam untuk keadaan darurat medis.</ListItem>
+      <ListItem fz={{base: 'h4', md: 'lg'}}>Pos kesehatan desa menyediakan layanan pertolongan pertama dan perawatan dasar.</ListItem>
+    </List>
+  },
+  {
+    id: 4,
+    judul: 'Pelatihan & Sosialisasi',
+    icon: <IconSpeakerphone size={80} color={colors["blue-button"]}/>,
+    deskripsi: <List>
+      <ListItem fz={{base: 'h4', md: 'lg'}}>Setiap bulan, desa mengadakan pelatihan P3K (Pertolongan Pertama pada Kecelakaan) bagi masyarakat.</ListItem>
+      <ListItem fz={{base: 'h4', md: 'lg'}}>Edukasi tentang tindakan saat bencana seperti gempa bumi dan banjir.</ListItem>
+    </List>
+  },
+  {
+    id: 5,
+    judul: 'Sistem Laporan Kejadian',
+    icon: <IconReport size={80} color={colors["blue-button"]}/>,
+    deskripsi: <List>
+      <ListItem fz={{base: 'h4', md: 'lg'}}>Warga bisa melaporkan kejadian darurat melalui aplikasi desa atau menghubungi perangkat desa.</ListItem>
+      <ListItem fz={{base: 'h4', md: 'lg'}}>Laporan akan segera ditindaklanjuti oleh tim penanganan darurat.</ListItem>
+    </List>
+  }
+]
+
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Box>
+        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+          Kontak Darurat
+        </Text>
+        <Text px={{base: 20, md: 150}} ta={"center"} fz={{ base: "h4", md: "h3" }} >
+        Program kesehatan di Desa Darmasaba memiliki peran penting dalam meningkatkan kesejahteraan masyarakat. Kami berkomitmen untuk memberikan layanan darurat yang cepat, responsif, dan mudah diakses oleh seluruh warga.
+        </Text>
+      </Box>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={'lg'}>
+          <SimpleGrid
+            pb={10}
+            cols={{
+              base: 1,
+              md: 3,
+            }}>
+            {data1.map((v, k) => {
+              return (
+                <Paper radius={10} key={k} bg={colors["white-trans-1"]}>
+                  <Stack gap={'xs'}>
+                    <Center py={40}>
+                      {v.icon}
+                    </Center>
+                    <Box px={'lg'}>
+                      <Box pb={20}>
+                        <Text pb={10} c={colors["blue-button"]} fw={"bold"} fz={"h3"}>
+                          {v.judul}
+                        </Text>
+                        <Box px={10}>
+                        {v.deskripsi}
+                        </Box>
+                      </Box>
+                    </Box>
+                  </Stack>
+                </Paper>
+              )
+            })}
+          </SimpleGrid>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/kesehatan/penanganan/page.tsx

@@ -0,0 +1,106 @@
+import colors from '@/con/colors';
+import { Box, Center, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { IconHospitalCircle, IconPhone, IconReport, IconReportMedical, IconSpeakerphone } from '@tabler/icons-react';
+import BackButton from '../../desa/layanan/_com/BackButto';
+
+const data1 = [
+  {
+    id: 1,
+    judul: 'Layanan Medis Cepat',
+    icon: <IconHospitalCircle size={80} color={colors["blue-button"]} />,
+    deskripsi: <List>
+      <ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans desa siap siaga 24 jam untuk keadaan darurat medis.</ListItem>
+      <ListItem fz={{base: 'h4', md: 'lg'}}>Pos kesehatan desa menyediakan layanan pertolongan pertama dan perawatan dasar.</ListItem>
+    </List>
+  },
+  {
+    id: 2,
+    judul: 'Nomor Darurat',
+    icon: <IconPhone size={80} color={colors["blue-button"]}/>,
+    deskripsi: <List>
+      <ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans: 08125651052</ListItem>
+      <ListItem fz={{base: 'h4', md: 'lg'}}>Pos Kesehatan: 08125651052</ListItem>
+      <ListItem fz={{base: 'h4', md: 'lg'}}>Pemadam Kebakaran: 113</ListItem>
+      <ListItem fz={{base: 'h4', md: 'lg'}}>Polisi: 110</ListItem>
+    </List>
+  },
+  {
+    id: 3,
+    judul: 'Posko Kesehatan & Evakuasi',
+    icon: <IconReportMedical size={80} color={colors["blue-button"]}/>,
+    deskripsi: <List>
+      <ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans desa siap siaga 24 jam untuk keadaan darurat medis.</ListItem>
+      <ListItem fz={{base: 'h4', md: 'lg'}}>Pos kesehatan desa menyediakan layanan pertolongan pertama dan perawatan dasar.</ListItem>
+    </List>
+  },
+  {
+    id: 4,
+    judul: 'Pelatihan & Sosialisasi',
+    icon: <IconSpeakerphone size={80} color={colors["blue-button"]}/>,
+    deskripsi: <List>
+      <ListItem fz={{base: 'h4', md: 'lg'}}>Setiap bulan, desa mengadakan pelatihan P3K (Pertolongan Pertama pada Kecelakaan) bagi masyarakat.</ListItem>
+      <ListItem fz={{base: 'h4', md: 'lg'}}>Edukasi tentang tindakan saat bencana seperti gempa bumi dan banjir.</ListItem>
+    </List>
+  },
+  {
+    id: 5,
+    judul: 'Sistem Laporan Kejadian',
+    icon: <IconReport size={80} color={colors["blue-button"]}/>,
+    deskripsi: <List>
+      <ListItem>Warga bisa melaporkan kejadian darurat melalui aplikasi desa atau menghubungi perangkat desa.</ListItem>
+      <ListItem>Laporan akan segera ditindaklanjuti oleh tim penanganan darurat.</ListItem>
+    </List>
+  }
+]
+
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Box>
+        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+          Penanganan Darurat
+        </Text>
+        <Text px={{base: 20, md: 150}} ta={"center"} fz={{ base: "h4", md: "h3" }} >
+          Program kesehatan di Desa Darmasaba memiliki peran penting dalam meningkatkan kesejahteraan masyarakat. Kami berkomitmen untuk memberikan layanan darurat yang cepat, responsif, dan mudah diakses oleh seluruh warga.
+        </Text>
+      </Box>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={'lg'}>
+          <SimpleGrid
+            pb={10}
+            cols={{
+              base: 1,
+              md: 3,
+            }}>
+            {data1.map((v, k) => {
+              return (
+                <Paper radius={10} key={k} bg={colors["white-trans-1"]}>
+                  <Stack gap={'xs'}>
+                    <Center py={40}>
+                      {v.icon}
+                    </Center>
+                    <Box px={'lg'}>
+                      <Box pb={20}>
+                        <Text pb={10} c={colors["blue-button"]} fw={"bold"} fz={"h3"}>
+                          {v.judul}
+                        </Text>
+                        <Box px={10}>
+                        {v.deskripsi}
+                        </Box>
+                      </Box>
+                    </Box>
+                  </Stack>
+                </Paper>
+              )
+            })}
+          </SimpleGrid>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/kesehatan/posyandu/page.tsx

@@ -0,0 +1,100 @@
+import colors from "@/con/colors";
+import { Stack, Box, Text, SimpleGrid, Paper, Center, Image, Flex, List, ListItem } from "@mantine/core";
+import BackButton from "../../desa/layanan/_com/BackButto";
+
+const data = [
+    {
+        id: 1,
+        judul: 'Posyandu Banjar Bucu',
+        nomor: '082345678910',
+        image: '/api/img/posyandu.png'
+    },
+    {
+        id: 2,
+        judul: 'Posyandu Banjar Bucu',
+        nomor: '082345678910',
+        image: '/api/img/posyandu.png'
+    },
+    {
+        id: 3,
+        judul: 'Posyandu Banjar Bucu',
+        nomor: '082345678910',
+        image: '/api/img/posyandu.png'
+    }
+]
+export default function Page() {
+    return (
+        <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+            <Box px={{ base: 'md', md: 100 }}>
+                <BackButton />
+            </Box>
+            <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+                Posyandu Darmasaba
+            </Text>
+            <Box px={{ base: "md", md: 100 }}>
+                <Stack gap={'lg'}>
+                    <SimpleGrid
+                        pb={10}
+                        cols={{
+                            base: 1,
+                            md: 3,
+                        }}>
+                        {data.map((v, k) => {
+                            return (
+                                <Paper key={k} p={"xl"} bg={colors["white-trans-1"]}>
+                                    <Stack gap={'xs'}>
+                                        <Text c={colors["blue-button"]} fw={"bold"} fz={"h3"}>
+                                            {v.judul}
+                                        </Text>
+                                        <Text fz={'h4'}>
+                                            {v.nomor}
+                                        </Text>
+                                        <Center>
+                                            <Image src={v.image} alt="" />
+                                        </Center>
+                                        <Text fz={'h4'}>
+                                            Jadwal Pelayanan
+                                        </Text>
+                                        <Text fz={'h4'}>
+                                            Setiap tanggal 5, Pukul 09:00 -
+                                            12:00 WITA
+                                        </Text>
+                                        <Box>
+                                            <Flex justify={'space-between'}>
+                                                <Text fz={'h4'}>Balita</Text>
+                                                <Box>
+                                                    <Text fz={'h4'}>Selasa minggu pertama</Text>
+                                                    <Text fz={'h4'}>(09:00-11:00 WITA)</Text>
+                                                </Box>
+                                            </Flex>
+                                        </Box>
+                                        <Box>
+                                            <Flex justify={'space-between'}>
+                                                <Text fz={'h4'}>Lansia</Text>
+                                                <Box>
+                                                    <Text fz={'h4'}>Selasa minggu pertama</Text>
+                                                    <Text fz={'h4'}>(09:00-11:00 WITA)</Text>
+                                                </Box>
+                                            </Flex>
+                                        </Box>
+                                    </Stack>
+                                </Paper>
+                            )
+                        })}
+                    </SimpleGrid>
+                    <Text fz={'h4'} fw={"bold"}>
+                        Pelayanan Posyandu
+                    </Text>
+                    <List type="ordered">
+                        <ListItem fz={'h4'}>Penimbangan bayi dan balita</ListItem>
+                        <ListItem fz={'h4'}>Pemantuan status gizi</ListItem>
+                        <ListItem fz={'h4'}>Imunisasi dasar lengkap</ListItem>
+                        <ListItem fz={'h4'}>Konseling</ListItem>
+                        <ListItem fz={'h4'}>Pemantuan kesehatan ibu hamil</ListItem>
+                    </List>
+                </Stack>
+            </Box>
+        </Stack>
+
+    )
+}

src/app/darmasaba/(pages)/kesehatan/program/page.tsx

@@ -0,0 +1,146 @@
+import colors from "@/con/colors";
+import { Box, Button, Center, Group, Image, Paper, SimpleGrid, Stack, Text } from "@mantine/core";
+import { IconBarbell, IconCalendar, IconOld, IconUser, IconUsersGroup } from "@tabler/icons-react";
+import BackButton from "../../desa/layanan/_com/BackButto";
+
+const data1 = [
+  {
+    id: 1,
+    judul: 'Posyandu Terintegrasi',
+    image: '/api/img/pk-1.png',
+    deskripsi: 'Program pemantauan kesehatan terpadu untuk balita, ibu hamil, dan lansia di Banjar Gulingan dengan sistem pencatatan digital. Layanan meliputi penimbangan, imunisasi, dan konsultasi kesehatan'
+  },
+  {
+    id: 2,
+    judul: 'Senam Lansia',
+    image: '/api/img/pk-2.png',
+    deskripsi: 'Kegiatan olahraga teratur untuk warga lanjut usia dengan gerakan yang disesuaikan untuk menjaga kebugaran dan kesehatan. Program ini didampingi oleh instruktur profesional dan pemantauan kesehatan rutin.'
+  },
+  {
+    id: 3,
+    judul: 'Vaksinasi & Sterilasi HPR',
+    image: '/api/img/pk-3.png',
+    deskripsi: 'Program pengendalian hewan penular rabies melalui vaksinasi dan sterilisasi untuk mencegah penyebaran penyakit zoonosis. Dilengkapi dengan sistem pendataan digital untuk memantau cakupan dan efektivitas program.'
+  }
+]
+const data2 = [
+  {
+    id: 1,
+    icon: <IconBarbell size={50} color={colors['BG-trans']} />,
+    title: "Menjaga Kesehatan Tubuh",
+    desc: "Program kesehatan desa dirancang untuk memelihara kesehatan fisik masyarakat melalui aktivitas rutin, pemeriksaan kesehatan berkala, dan edukasi gaya hidup sehat.",
+  },
+  {
+    id: 2,
+    icon: <IconUsersGroup size={50} color={colors['BG-trans']} />,
+    title: "Mempererat Kebersamaan",
+    desc: "Kegiatan kesehatan komunal menjadi wadah interaksi sosial yang memperkuat ikatan antar warga desa, menumbuhkan rasa kepedulian dan gotong royong.",
+  },
+  {
+    id: 3,
+    icon: <IconOld size={50} color={colors['BG-trans']} />,
+    title: "Medukung Lansia Aktif",
+    desc: "Program khusus bagi lansia membantu menjaga kebugaran, mengurangi risiko penyakit degeneratif, dan menciptakan komunitas pendukung untuk kehidupan yang sehat dan bahagia.",
+  },
+]
+export default function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Box>
+        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+          Program Kesehatan Unggulan
+        </Text>
+        <Text px={{base: 20, md: 90}} ta={"center"} fz={{ base: "h4", md: "h3" }} >
+          Desa Darmasaba mengembangkan berbagai program kesehatan terpadu untuk meningkatkan kualitas
+          hidup masyarakat, dengan pendekatan preventif dan promotif bebrbasis teknologi serta prtisipasi aktif
+          warga.
+        </Text>
+      </Box>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={'lg'}>
+          <SimpleGrid
+            pb={10}
+            cols={{
+              base: 1,
+              md: 3,
+            }}>
+            {data1.map((v, k) => {
+              return (
+                <Paper radius={10} key={k} bg={colors["white-trans-1"]}>
+                  <Stack gap={'xs'}>
+                    <Center>
+                      <Image src={v.image} alt="" style={{ borderRadius: '14px 14px 0 0' }} />
+                    </Center>
+                    <Box px={'lg'}>
+                      <Box>
+                        <Text pb={10} c={colors["blue-button"]} fw={"bold"} fz={"h3"}>
+                          {v.judul}
+                        </Text>
+                        <Text ta={'justify'} fz={'h4'}>{v.deskripsi}</Text>
+                      </Box>
+                      <Box py={15}>
+                        <Button fw={'bold'} fz={'h5'} c={colors["blue-button"]} bg={colors["BG-trans"]}>Detail Program</Button>
+                      </Box>
+                      <Group py={20}>
+                        <Group gap="xs">
+                          <IconCalendar size={18} />
+                          <Text size="sm">Selasa, 11 Januari 2025</Text>
+                        </Group>
+                        <Group gap="xs">
+                          <IconUser size={18} />
+                          <Text size="sm">Admin Desa</Text>
+                        </Group>
+                      </Group>
+                    </Box>
+                  </Stack>
+                </Paper>
+              )
+            })}
+          </SimpleGrid>
+        </Stack>
+      </Box>
+      <Box py={10} px={{ base: "md", md: 100 }}>
+        <Box pb={10}>
+          <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+            Manfaat Program Kesehatan
+          </Text>
+          <Text fz={{ base: "h4", md: "h3" }} >
+            Program kesehatan di Desa Darmasaba memiliki peran penting dalam meningkatkan kesejahteraan masyarakat.
+          </Text>
+        </Box>
+        <SimpleGrid
+          pb={30}
+          cols={{
+            base: 1,
+            md: 3,
+          }}>
+          {data2.map((v, k) => {
+            return (
+              <Paper key={k} px={"xl"} py={80} bg={colors['white-trans-1']} c={colors['blue-button']}>
+                <Stack justify='space-between' >
+                  <Group justify='center'>
+                    <Paper p={'xl'} radius={'100'} bg={colors['blue-button']}>
+                      <Center >
+                        {v.icon}
+                      </Center>
+                    </Paper>
+                  </Group>
+                  <Text ta={"center"} fw={"bold"} fz={"h3"}>
+                    {v.title}
+                  </Text>
+                  <Text ta={"center"} fz={'h4'}>
+                    {v.desc}
+                  </Text>
+                </Stack>
+              </Paper>
+            )
+          })}
+        </SimpleGrid>
+      </Box>
+    </Stack>
+
+  )
+}

src/app/darmasaba/(pages)/kesehatan/puskesmas/page.tsx

@@ -0,0 +1,127 @@
+import colors from '@/con/colors';
+import { Stack, Box, Paper, Text, BackgroundImage, SimpleGrid, Title, Flex } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../desa/layanan/_com/BackButto';
+
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+        Puskesmas Darmasaba
+      </Text>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={'lg'}>
+          <Box>
+            <Paper p={"xl"} bg={colors['white-trans-1']}>
+              <Box pb={30}>
+                <BackgroundImage
+                  pb={30}
+                  radius={16}
+                  h={{ base: 250, md: 500 }}
+                  src='/api/img/posyandu.png'
+                  style={{ position: 'relative' }}
+                >
+                  <Box
+                    style={{
+                      borderRadius: 16,
+                      zIndex: 0
+                    }}
+                    pos={"absolute"}
+                    w={"100%"}
+                    h={"100%"}
+                    bg={colors.trans.dark[2]}
+                  />
+                  <Text style={{
+                    position: 'absolute',
+                    bottom: 35,
+                    left: 15,
+                  }} fw={'bold'} fz={{ base: 'md', md: 'h3' }} c={colors['white-1']}>Puskesmas Darmasaba</Text>
+                  <Text style={{
+                    position: 'absolute',
+                    bottom: 10,
+                    left: 15,
+                  }} fw={'bold'} fz={{ base: 'md', md: 'h4' }} c={colors['white-1']}>Jl. Raya Darmasaba No.45, Badung, Bali</Text>
+                </BackgroundImage>
+                <SimpleGrid
+                  py={20}
+                  cols={{
+                    base: 1,
+                    md: 2
+                  }}>
+                  <Box>
+                    <Stack>
+                      <Title order={3}>Jam Operasional</Title>
+                      <Box>
+                        <Flex justify={'space-between'} align={'center'}>
+                          <Box>
+                            <Text>Senin - Kamis</Text>
+                            <Text>Jumat</Text>
+                            <Text>Sabtu</Text>
+                            <Text> Minggu & Libur</Text>
+                          </Box>
+                          <Box>
+                            <Text>08:00 - 15:00 WITA</Text>
+                            <Text>08:00 - 15:00 WITA</Text>
+                            <Text>08:00 - 15:00 WITA</Text>
+                            <Text>Tutp (UGD 24 JAM)</Text>
+                          </Box>
+                        </Flex>
+                      </Box>
+                    </Stack>
+                  </Box>
+                  <Box>
+                    <Stack>
+                      <Title order={3}>Jam Operasional</Title>
+                      <Box>
+                        <Flex justify={'space-between'} align={'center'}>
+                          <Box>
+                            <Text>Senin - Kamis</Text>
+                            <Text>Jumat</Text>
+                            <Text>Sabtu</Text>
+                            <Text> Minggu & Libur</Text>
+                          </Box>
+                          <Box>
+                            <Text>08:00 - 15:00 WITA</Text>
+                            <Text>08:00 - 15:00 WITA</Text>
+                            <Text>08:00 - 15:00 WITA</Text>
+                            <Text>Tutp (UGD 24 JAM)</Text>
+                          </Box>
+                        </Flex>
+                      </Box>
+                    </Stack>
+                  </Box>
+                  <Box>
+
+                  </Box>
+                </SimpleGrid>
+              </Box>
+              <Box>
+                <Paper p={"xl"} bg={'#B1C5F2'}>
+                  <SimpleGrid
+                    cols={{
+                      base: 1,
+                      md: 2
+                    }}>
+                    <Paper p={"xl"} bg={colors['white-trans-1']}>
+                      <Text fw={"bold"} fz={'h3'} ta={'center'}>Poliklinik Umum</Text>
+                      <Text ta={'center'} fz={{ base: 45, md: 65 }} fw={'bold'} c={colors['blue-button']}>26</Text>
+                    </Paper>
+                    <Paper p={"xl"} bg={colors['white-trans-1']}>
+                      <Text ta={'center'} fz={'h3'} fw={"bold"}>Poli Gigi</Text>
+                      <Text ta={'center'} fz={{ base: 45, md: 65 }} fw={'bold'} c={colors['blue-button']}>26</Text>
+                    </Paper>
+                  </SimpleGrid>
+                </Paper>
+              </Box>
+            </Paper>
+          </Box>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/layout.tsx

@@ -11,7 +11,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
         <Stack gap={0} bg={colors.grey[1]}>
             <Navbar />
             <Space h={{
-                base: "2.2rem",
+                base: "3.9rem",
                 md: "2.5rem"
             }} />
             <Box style={{

src/con/navbar-list-menu.ts

@@ -104,7 +104,7 @@ const navbarListMenu = [
             {
                 id: "3.2",
                 name: "Data Kesehatan Warga",
-                href: "/darmasaba/kesehatan/data-kesehatan-warga"
+                href: "/darmasaba/kesehatan/datakesehatan"
             },
             {
                 id: "3.3",
@@ -114,22 +114,22 @@ const navbarListMenu = [
             {
                 id: "3.4",
                 name: "Program Kesehatan",
-                href: "/darmasaba/kesehatan/program-kesehatan"
+                href: "/darmasaba/kesehatan/program"
             },
             {
                 id: "3.5",
                 name: "Penanganan Darurat",
-                href: "/darmasaba/kesehatan/penanganan-darurat"
+                href: "/darmasaba/kesehatan/penanganan"
             },
             {
                 id: "3.6",
                 name: "Kontak Darurat",
-                href: "/darmasaba/kesehatan/kontak-darurat"
+                href: "/darmasaba/kesehatan/kontak"
             },
             {
                 id: "3.7",
                 name: "Info Wabah/Penyakit",
-                href: "/darmasaba/kesehatan/info-wabah-penyakit"
+                href: "/darmasaba/kesehatan/info"
             }
         ]
     },
@@ -141,27 +141,27 @@ const navbarListMenu = [
             {
                 id: "4.1",
                 name: "Keamanan Lingkungan (Pecalang/Patwal)",
-                href: "/darmasaba/keamanan/keamanan-lingkungan"
+                href: "/darmasaba/keamanan/lingkungan"
             },
             {
                 id: "4.2",
                 name: "Polsek Terdekat",
-                href: "/darmasaba/keamanan/polsek-terdekat"
+                href: "/darmasaba/keamanan/polsek"
             },
             {
                 id: "4.3",
                 name: "Kontak Darurat",
-                href: "/darmasaba/keamanan/kontak-darurat"
+                href: "/darmasaba/keamanan/darurat"
             },
             {
                 id: "4.4",
                 name: "Pencegahan Kriminalitas",
-                href: "/darmasaba/keamanan/pencegahan-kriminalitas"
+                href: "/darmasaba/keamanan/kriminalitas"
             },
             {
                 id: "4.5",
                 name: "Laporan Publik",
-                href: "/darmasaba/keamanan/laporan-publik"
+                href: "/darmasaba/keamanan/laporan"
             },
             {
                 id: "4.6",