UI Menu Pendidikan

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)/ekonomi/PADesa-pendapatan-asli-desa/page.tsx

@@ -0,0 +1,24 @@
+import colors from '@/con/colors';
+import { Stack, Box, Text, Image } 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"}>
+          Pendapatan Asli Desa
+        </Text>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={'lg'} justify='center'>
+          <Image src={'/api/img/pa-desa.png'} alt=''/>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/ekonomi/demografi-pekerjaan/page.tsx

@@ -0,0 +1,250 @@
+import colors from '@/con/colors';
+import { Stack, Box, Paper, Text, ColorSwatch, Flex } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../desa/layanan/_com/BackButto';
+import { BarChart } from '@mantine/charts';
+
+const data = [
+  {
+    id: 1,
+    Pekerjaan: 'Guru',
+    laki: 2,
+    perempuan: 3
+  },
+  {
+    id: 2,
+    Pekerjaan: 'Belajar/Mahasiswa',
+    laki: 37,
+    perempuan: 38
+  },
+  {
+    id: 3,
+    Pekerjaan: 'Karyawan Bumdn',
+    laki: 1,
+    perempuan: 0
+  },
+  {
+    id: 4,
+    Pekerjaan: 'Buruh Tani/Perkebunan',
+    laki: 1,
+    perempuan: 0
+  },
+  {
+    id: 5,
+    Pekerjaan: 'Karyawan Swasta',
+    laki: 3,
+    perempuan: 17
+  },
+  {
+    id: 6,
+    Pekerjaan: 'Karyawan Honorer',
+    laki: 2,
+    perempuan: 1
+  },
+  {
+    id: 7,
+    Pekerjaan: 'Buruh Harian Lepas',
+    laki: 8,
+    perempuan: 5
+  },
+  {
+    id: 8,
+    Pekerjaan: 'Belum/Tidak Bekerja',
+    laki: 87,
+    perempuan: 44
+  },
+  {
+    id: 9,
+    Pekerjaan: ' Kepolisian RI (Polri)',
+    laki: 4,
+    perempuan: 0
+  },
+  {
+    id: 10,
+    Pekerjaan: 'Wiraswasta Mengurus Rumah Tangga',
+    laki: 1,
+    perempuan: 7
+  },
+  {
+    id: 11,
+    Pekerjaan: 'Dosen',
+    laki: 1,
+    perempuan: 1
+  },
+  {
+    id: 12,
+    Pekerjaan: 'Perangkat Desa',
+    laki: 17,
+    perempuan: 19
+  },
+  {
+    id: 13,
+    Pekerjaan: 'Nelayan',
+    laki: 3,
+    perempuan: 0
+  },
+  {
+    id: 14,
+    Pekerjaan: 'Penyuluh Pertanian',
+    laki: 33,
+    perempuan: 24
+  },
+  {
+    id: 15,
+    Pekerjaan: 'Tukang Las/Pandai Besi',
+    laki: 5,
+    perempuan: 0
+  },
+  {
+    id: 16,
+    Pekerjaan: 'Sopir/Driver',
+    laki: 10,
+    perempuan: 3
+  },
+  {
+    id: 17,
+    Pekerjaan: 'Teknisi/Listrik',
+    laki: 25,
+    perempuan: 0
+  },
+  {
+    id: 18,
+    Pekerjaan: 'Montir/Mekanik',
+    laki: 25,
+    perempuan: 0
+  },
+  {
+    id: 19,
+    Pekerjaan: 'Karyawan Hotel/Pariwisata',
+    laki: 2,
+    perempuan: 52
+  },
+  {
+    id: 20,
+    Pekerjaan: 'Pengrajin (Batik, Anyaman, Kayu)',
+    laki: 5,
+    perempuan: 25
+  },
+  {
+    id: 21,
+    Pekerjaan: 'Tukang Bangunan',
+    laki: 25,
+    perempuan: 5
+  },
+  {
+    id: 22,
+    Pekerjaan: 'Tukang Kayu/Furnitur',
+    laki: 25,
+    perempuan: 0
+  },
+  {
+    id: 23,
+    Pekerjaan: 'Penjahit',
+    laki: 2,
+    perempuan: 35
+  },
+  {
+    id: 24,
+    Pekerjaan: 'Pedagang Pasar',
+    laki: 25,
+    perempuan: 30
+  },
+  {
+    id: 25,
+    Pekerjaan: 'Warung Makan/Penjual Makanan',
+    laki: 15,
+    perempuan: 30
+  },
+  {
+    id: 26,
+    Pekerjaan: 'Satpam/Security',
+    laki: 20,
+    perempuan: 5
+  },
+  {
+    id: 27,
+    Pekerjaan: 'Pengusaha Kecil (UMKM)',
+    laki: 5,
+    perempuan: 20
+  },
+  {
+    id: 28,
+    Pekerjaan: 'Karyawan Restoran/Kafe',
+    laki: 5,
+    perempuan: 15
+  },
+  {
+    id: 29,
+    Pekerjaan: 'Freelancer',
+    laki: 20,
+    perempuan: 10
+  },
+  {
+    id: 30,
+    Pekerjaan: 'Fotografer',
+    laki: 25,
+    perempuan: 9
+  },
+]
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Box px={{ base: 'md', md: 100 }} >
+        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+          Demografi Pekerjaan
+        </Text>
+        <Text ta={'center'} fz={'h4'}>Desa Darmasaba memiliki komposisi penduduk yang beragam dalam sektor pekerjaan</Text>
+      </Box>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={'lg'} justify='center'>
+          <Paper p={'xl'}>
+            <Text fw={'bold'} fz={'h4'}>Statistik Demografi Pekerjaan Di Desa Darmasaba</Text>
+            <BarChart
+              type='stacked'
+              p={10}
+              mb={50}
+              h={400}
+              data={data}
+              dataKey="Pekerjaan"
+              series={[
+                { name: 'laki', color: '#5082EE' },
+                { name: 'perempuan', color: '#6EDF9C' },
+              ]}
+              tickLine="y"
+              xAxisProps={{
+                angle: -45,  // Rotate labels by -45 degrees
+                textAnchor: 'end',  // Anchor text to the end for better alignment
+                height: 100,  // Increase height for rotated labels
+                interval: 0,  // Show all labels
+                style: { 
+                  fontSize: '12px',  // Adjust font size if needed
+                  overflow: 'visible',
+                  whiteSpace: 'nowrap'
+                }
+              }}
+            />
+            <Flex pb={30} justify={'center'} gap={'xl'} align={'center'}>
+              <Box>
+                <Flex gap={{ base: 0, md: 5 }} align={'center'}>
+                  <Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>Laki-Laki</Text>
+                  <ColorSwatch color="#5082EE" size={30} />
+                </Flex>
+              </Box>
+              <Box>
+                <Flex gap={{ base: 0, md: 5 }} align={'center'}>
+                  <Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>Perempuan</Text>
+                  <ColorSwatch color="#6EDF9C" size={30} />
+                </Flex>
+              </Box>
+            </Flex>
+          </Paper>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/ekonomi/jumlah-penduduk-miskin-2024-2025/page.tsx

@@ -0,0 +1,119 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, CheckIcon, Combobox, ComboboxChevron, ComboboxOption, ComboboxOptions, ComboboxTarget, Group, InputBase, InputPlaceholder, Paper, SimpleGrid, Stack, Text, useCombobox } from '@mantine/core';
+import { useState } from 'react';
+import BackButton from '../../desa/layanan/_com/BackButto';
+import { BarChart } from '@mantine/charts';
+
+const data = [
+  {
+    id: 1,
+    tahun: '2024',
+    Penduduk: 400000
+  },
+  {
+    id: 2,
+    tahun: '2025',
+    Penduduk: 450000
+  },
+
+]
+const tahun = [
+  '2024',
+  '2025'
+];
+function Page() {
+  const combobox = useCombobox({
+    onDropdownClose: () => combobox.resetSelectedOption(),
+    onDropdownOpen: (eventSource) => {
+      if (eventSource === 'keyboard') {
+        combobox.selectActiveOption();
+      } else {
+        combobox.updateSelectedOptionIndex('active');
+      }
+    },
+  });
+
+  const [value, setValue] = useState<string | null>('2024');
+
+  const options = tahun.map((item) => (
+    <ComboboxOption value={item} key={item} active={item === value}>
+      <Group gap="xs">
+        {item === value && <CheckIcon size={12} />}
+        <span>{item}</span>
+      </Group>
+    </ComboboxOption>
+  ));
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Box px={{ base: 'md', md: 100 }} >
+        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+          Jumlah Penduduk Miskin Tahun 2024-2025
+        </Text>
+      </Box>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={'lg'} justify='center'>
+          <SimpleGrid
+            pb={20}
+            cols={{
+              base: 1,
+              md: 2
+            }}
+          >
+            <Paper p={'xl'}>
+              <Text fz={'h3'}>Tahun: 2024</Text>
+              <Text fw={"bold"} fz={'h1'}>4,800,000 Orang</Text>
+            </Paper>
+            <Paper p={'xl'}>
+              <Text>Pilih Tahun</Text>
+              <Combobox
+                store={combobox}
+                resetSelectionOnOptionHover
+                withinPortal={false}
+                onOptionSubmit={(val) => {
+                  setValue(val);
+                  combobox.updateSelectedOptionIndex('active');
+                }}
+              >
+                <ComboboxTarget targetType="button">
+                  <InputBase
+                    component="button"
+                    type="button"
+                    pointer
+                    rightSection={<ComboboxChevron />}
+                    rightSectionPointerEvents="none"
+                    onClick={() => combobox.toggleDropdown()}
+                  >
+                    {value || <InputPlaceholder>Pick value</InputPlaceholder>}
+                  </InputBase>
+                </ComboboxTarget>
+
+                <Combobox.Dropdown>
+                  <ComboboxOptions>{options}</ComboboxOptions>
+                </Combobox.Dropdown>
+              </Combobox>
+            </Paper>
+          </SimpleGrid>
+          <Paper p={'xl'}>
+            <Text pb={10} fw={'bold'} fz={'h4'}>Jumlah Penduduk Miskin Per Tahun</Text>
+            <BarChart
+              p={10}
+              h={300}
+              data={data}
+              dataKey="tahun"
+              series={[
+                { name: 'Penduduk', color: '#8785D3' },
+              ]}
+              tickLine="y"
+            />
+          </Paper>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/page.tsx

@@ -0,0 +1,142 @@
+import colors from '@/con/colors';
+import { Stack, Box, Text, Center, Paper, ColorSwatch, Flex } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../desa/layanan/_com/BackButto';
+import { PieChart } from '@mantine/charts';
+
+const datausiaKerja = [
+  {
+    id: 1,
+    name: '18 - 25',
+    value: 45,
+    color: 'indigo.6'
+  },
+  {
+    id: 2,
+    name: '26 - 35',
+    value: 35,
+    color: 'teal.6'
+  },
+  {
+    id: 3,
+    name: '36 - 45',
+    value: 15,
+    color: 'yellow.6'
+  },
+  {
+    id: 4,
+    name: '46+',
+    value: 5,
+    color: 'red.6'
+  },
+]
+const datakerjaPendidikan = [
+  {
+    id: 1,
+    name: 'SD',
+    value: 10,
+    color: 'indigo.6'
+  },
+  {
+    id: 2,
+    name: 'SMP',
+    value: 20,
+    color: 'teal.6'
+  },
+  {
+    id: 3,
+    name: 'SMA/SMK',
+    value: 45,
+    color: 'yellow.6'
+  },
+  {
+    id: 4,
+    name: 'D3/S1',
+    value: 25,
+    color: 'red.6'
+  },
+]
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Box px={{ base: 'md', md: 100 }} >
+        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+          Jumlah Penduduk Usia Kerja Yang Menganggur
+        </Text>
+      </Box>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={'lg'} justify='center'>
+          <Paper p={'lg'}>
+            <Text fw={'bold'} fz={'h3'}>Pengangguran Berdasarkan Usia</Text>
+            <Center>
+              <PieChart size={300} withLabelsLine labelsPosition="outside" labelsType="percent" withLabels data={datausiaKerja} withTooltip tooltipDataSource="segment" mx="auto" />
+            </Center>
+            <Flex pb={30} justify={'center'} gap={'xl'} align={'center'}>
+              <Box>
+                <Flex gap={{ base: 5, md: 8 }} align={'center'}>
+                  <Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>18-25</Text>
+                  <ColorSwatch color="#4b6Ef5" size={30} />
+                </Flex>
+              </Box>
+              <Box>
+                <Flex gap={{ base: 5, md: 8 }} align={'center'}>
+                  <Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>26-35</Text>
+                  <ColorSwatch color="#14b885" size={30} />
+                </Flex>
+              </Box>
+              <Box>
+                <Flex gap={{ base: 5, md: 8 }} align={'center'}>
+                  <Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>36-45</Text>
+                  <ColorSwatch color="#E6A03B" size={30} />
+                </Flex>
+              </Box>
+              <Box>
+                <Flex gap={{ base: 5, md: 8 }} align={'center'}>
+                  <Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>46+</Text>
+                  <ColorSwatch color="#DB524D" size={30} />
+                </Flex>
+              </Box>
+            </Flex>
+          </Paper>
+          <Paper p={'lg'}>
+            <Text fw={'bold'} fz={'h3'}>Pengangguran Berdasarkan Pendidikan</Text>
+            <Center>
+              <PieChart size={300} withLabelsLine labelsPosition="outside" labelsType="percent" withLabels data={datakerjaPendidikan} withTooltip tooltipDataSource="segment" mx="auto" />
+            </Center>
+            <Flex pb={30} justify={'center'} gap={'xl'} align={'center'}>
+              <Box>
+                <Flex gap={{ base: 5, md: 8 }} align={'center'}>
+                  <Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>SD</Text>
+                  <ColorSwatch color="#4b6Ef5" size={30} />
+                </Flex>
+              </Box>
+              <Box>
+                <Flex gap={{ base: 5, md: 8 }} align={'center'}>
+                  <Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>SMP</Text>
+                  <ColorSwatch color="#14b885" size={30} />
+                </Flex>
+              </Box>
+              <Box>
+                <Flex gap={{ base: 5, md: 8 }} align={'center'}>
+                  <Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>SMA/SMK</Text>
+                  <ColorSwatch color="#E6A03B" size={30} />
+                </Flex>
+              </Box>
+              <Box>
+                <Flex gap={{ base: 5, md: 8 }} align={'center'}>
+                  <Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>D3/S1</Text>
+                  <ColorSwatch color="#DB524D" size={30} />
+                </Flex>
+              </Box>
+            </Flex>
+          </Paper>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/ekonomi/jumlah-pengangguran-2024-2025/page.tsx

@@ -0,0 +1,185 @@
+import colors from '@/con/colors';
+import { Stack, Box, Text, Group, Flex, Button, SimpleGrid, Paper, Center, ColorSwatch, TableTd, TableTr, Table, TableTbody, TableTh, TableThead } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../desa/layanan/_com/BackButto';
+import { IconBriefcase, IconChevronDown, IconDownload, IconSchool, IconUserOff, IconUsersGroup } from '@tabler/icons-react';
+import { BarChart } from '@mantine/charts';
+
+const data1 = [
+  {
+    id: 1,
+    icon: <IconUserOff size={35} />,
+    judul: 'Total Pengangguran',
+    jumlah: '140',
+    persentase: <Text fz={'h4'} c={'green'}>-12.5% dari 2024</Text>
+  },
+  {
+    id: 2,
+    icon: <IconSchool size={35} />,
+    judul: 'Pengangguran Terdidik',
+    jumlah: '80',
+    persentase: <Text fz={'h4'} c={'gray'}>57.1% dari total</Text>
+  },
+  {
+    id: 3,
+    icon: <IconUsersGroup size={35} />,
+    judul: 'Usia Produktif',
+    jumlah: '125',
+    persentase: <Text fz={'h4'} c={'gray'}>89.3% dari total</Text>
+  },
+  {
+    id: 4,
+    icon: <IconBriefcase size={35} />,
+    judul: 'Sedang Mencari Kerja',
+    jumlah: '95',
+    persentase: <Text fz={'h4'} c={'red'}>67.9% dari total</Text>
+  },
+]
+
+const dataPengangguran = [
+  {
+    id: 1,
+    bulan: 'Jan',
+    berpendidikan: 98,
+    takberpendidikan: 74,
+  },
+  {
+    id: 2,
+    bulan: 'Feb',
+    berpendidikan: 85,
+    takberpendidikan: 74,
+  },
+  {
+    id: 3,
+    bulan: 'Mar',
+    berpendidikan: 76,
+    takberpendidikan: 55,
+  },
+  {
+    id: 4,
+    bulan: 'Apr',
+    berpendidikan: 98,
+    takberpendidikan: 74,
+  },
+  {
+    id: 5,
+    bulan: 'Mei',
+    berpendidikan: 74,
+    takberpendidikan: 54,
+  },
+  {
+    id: 6,
+    bulan: 'Jun',
+    berpendidikan: 55,
+    takberpendidikan: 50,
+  },
+]
+const dataTable = [
+  { bulan: 'Jan', total: 160, terdidik: 95, takterdidik: 65, perubahan: '-' },
+  { bulan: 'Feb', total: 155, terdidik: 90, takterdidik: 65, perubahan: '-3.1%' },
+  { bulan: 'Mar', total: 150, terdidik: 88, takterdidik: 62, perubahan: '-3.2%' },
+  { bulan: 'Apr', total: 148, terdidik: 85, takterdidik: 63, perubahan: '-1.3%' },
+  { bulan: 'Mei', total: 145, terdidik: 82, takterdidik: 63, perubahan: '-2.0%' },
+  { bulan: 'Jun', total: 140, terdidik: 80, takterdidik: 60, perubahan: '-3.4%' },
+]
+function Page() {
+  const rows = dataTable.map((element) => (
+    <TableTr key={element.bulan}>
+      <TableTd ta={'center'}>{element.bulan}</TableTd>
+      <TableTd ta={'center'}>{element.total}</TableTd>
+      <TableTd ta={'center'}>{element.terdidik}</TableTd>
+      <TableTd ta={'center'}>{element.takterdidik}</TableTd>
+      <TableTd ta={'center'}>{element.perubahan}</TableTd>
+    </TableTr>
+  ));
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Box px={{ base: 'md', md: 100 }} >
+        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+          Jumlah Pengangguran 2024 - 2025
+        </Text>
+        <Group py={20} align='center' justify='space-between'>
+          <Text fz={'h4'} fw={"bold"}>DATA PENGANGGURAN DESA</Text>
+          <Flex gap={'xl'}>
+            <Button c={'black'} bg={colors['white-1']} rightSection={<IconChevronDown size={20} />}>2025</Button>
+            <Button leftSection={<IconDownload size={20} />}>Export</Button>
+          </Flex>
+        </Group>
+      </Box>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={'lg'} justify='center'>
+          <SimpleGrid
+            cols={1}
+            pb={20}
+          >
+            {data1.map((v, k) => {
+              return (
+                <Paper px={25} key={k} py={'lg'} bg={colors['white-1']} shadow={'md'}>
+                  <Flex justify={'space-between'} align={'center'}>
+                    <Box>
+                      <Stack>
+                        <Text fz={'h4'}>{v.judul}</Text>
+                        <Text fz={'h2'} fw={'bold'}>{v.jumlah}</Text>
+                        {v.persentase}
+                      </Stack>
+                    </Box>
+                    {v.icon}
+                  </Flex>
+                </Paper>
+              )
+            })}
+          </SimpleGrid>
+          <Paper p={'lg'}>
+            <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' }}>Pengangguran Berpendidikan</Text>
+                  <ColorSwatch color="#5082EE" size={30} />
+                </Flex>
+              </Box>
+              <Box>
+                <Flex gap={{ base: 0, md: 5 }} align={'center'}>
+                  <Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>Pengangguran Tak Berpendidikan</Text>
+                  <ColorSwatch color="#DA524C" size={30} />
+                </Flex>
+              </Box>
+            </Flex>
+            <Center>
+              <BarChart
+                p={10}
+                h={400}
+                data={dataPengangguran}
+                dataKey="bulan"
+                series={[
+                  { name: 'berpendidikan', color: '#5082EE' },
+                  { name: 'takberpendidikan', color: '#DA524C' },
+                ]}
+                tickLine="y"
+              />
+            </Center>
+          </Paper>
+          <Paper p={'lg'}>
+            <Text fw={'bold'} fz={'h4'}>Detail Data Pengangguran</Text>
+            <Table striped highlightOnHover>
+              <TableThead>
+                <TableTr>
+                  <TableTh ta={'center'}>Bulan</TableTh>
+                  <TableTh ta={'center'}>Total</TableTh>
+                  <TableTh ta={'center'}>Terdidik</TableTh>
+                  <TableTh ta={'center'}>Tidak Terdidik</TableTh>
+                  <TableTh ta={'center'}>Perubahan</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>{rows}</TableTbody>
+            </Table>
+          </Paper>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/ekonomi/lowongan-kerja-lokal/page.tsx

@@ -0,0 +1,128 @@
+'use client'
+import colors from '@/con/colors';
+import { Stack, Box, Text, TextInput, Group, SimpleGrid, Paper, Flex, Button } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../desa/layanan/_com/BackButto';
+import { IconBriefcase, IconClock, IconMapPin, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+const data = [
+  {
+    id: 1,
+    kerja: 'Kasir',
+    tempat: 'Toko Sumber Rejeki',
+    alamat: 'Desa Munggu , Badung',
+    gaji: 'Rp. 2.500.000 / bulan'
+
+  },
+  {
+    id: 2,
+    kerja: 'Kasir',
+    tempat: 'Toko Sumber Rejeki',
+    alamat: 'Desa Munggu , Badung',
+    gaji: 'Rp. 2.500.000 / bulan'
+
+  },
+  {
+    id: 3,
+    kerja: 'Kasir',
+    tempat: 'Toko Sumber Rejeki',
+    alamat: 'Desa Munggu , Badung',
+    gaji: 'Rp. 2.500.000 / bulan'
+
+  },
+  {
+    id: 4,
+    kerja: 'Kasir',
+    tempat: 'Toko Sumber Rejeki',
+    alamat: 'Desa Munggu , Badung',
+    gaji: 'Rp. 2.500.000 / bulan'
+
+  },
+  {
+    id: 5,
+    kerja: 'Kasir',
+    tempat: 'Toko Sumber Rejeki',
+    alamat: 'Desa Munggu , Badung',
+    gaji: 'Rp. 2.500.000 / bulan'
+
+  },
+  {
+    id: 6,
+    kerja: 'Kasir',
+    tempat: 'Toko Sumber Rejeki',
+    alamat: 'Desa Munggu , Badung',
+    gaji: 'Rp. 2.500.000 / bulan'
+
+  },
+
+]
+function Page() {
+  const router = useRouter()
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Box px={{ base: 'md', md: 100 }}>
+        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+          Lowongan Kerja Lokal
+        </Text>
+        <Group justify='center'>
+          <TextInput
+            radius={'xl'}
+            w={{ base: 500, md: 700 }}
+            placeholder='Cari Pekerjaan'
+            leftSection={<IconSearch size={20} />}
+          />
+        </Group>
+      </Box>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={'lg'}>
+          <SimpleGrid
+            cols={{
+              base: 1,
+              md: 3
+            }}
+          >
+            {data.map((v, k) => {
+              return (
+                <Paper key={k} p={'xl'}>
+                  <Stack gap={'md'}>
+                    <Box>
+                      <Flex gap={'xl'} align={'center'}>
+                        <IconBriefcase color={colors['blue-button']} size={50} />
+                        <Box>
+                          <Text fw={'bold'} fz={'h4'} c={colors['blue-button']}>{v.kerja}</Text>
+                          <Text fz={'h4'}>{v.tempat}</Text>
+                        </Box>
+                      </Flex>
+                    </Box>
+                    <Box>
+                      <Flex gap={'xl'} align={'center'}>
+                        <IconMapPin color={colors['blue-button']} size={50} />
+                        <Text fz={'h4'}>{v.alamat}</Text>
+                      </Flex>
+                    </Box>
+                    <Box>
+                      <Flex gap={'xl'} align={'center'}>
+                        <IconClock color={colors['blue-button']} size={50} />
+                        <Box>
+                          <Text fw={'bold'} fz={'h4'} c={colors['blue-button']}>Full Time</Text>
+                          <Text fz={'h4'}>{v.gaji}</Text>
+                        </Box>
+                      </Flex>
+                    </Box>
+                    <Button onClick={() => router.push('https://www.whatsapp.com/?lang=id')} bg={colors['blue-button']}>Lamar Sekarang</Button>
+                  </Stack>
+                </Paper>
+              )
+            })}
+          </SimpleGrid>
+        </Stack>
+      </Box >
+    </Stack >
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/ekonomi/pasar-desa/page.tsx

@@ -0,0 +1,182 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Combobox, Flex, Group, Image, InputBase, InputPlaceholder, Paper, SimpleGrid, Stack, Text, TextInput, useCombobox } from '@mantine/core';
+import { IconArrowDown, IconMapPinFilled, IconSearch, IconShoppingCartFilled, IconStarFilled } from '@tabler/icons-react';
+import { useState } from 'react';
+import BackButton from '../../desa/layanan/_com/BackButto';
+import { useRouter } from 'next/navigation';
+import { motion } from 'motion/react';
+
+const groceries = [
+  'Makanan',
+  'Minuman',
+  'Pakaian',
+  'Alat Dapur',
+  'Alat Mandi',
+  'Furniture',
+];
+
+const dataBarang = [
+  {
+    id: 1,
+    image: '/api/img/semat.png',
+    judul: 'Semat Bambu / Semat Banten',
+    harga: 'Rp. 3000 / pcs',
+    bintang: '4.9',
+    alamat: 'Jl. Kecubung no.6'
+  },
+  {
+    id: 2,
+    image: '/api/img/kerupuk.png',
+    judul: 'Kerupuk Babi',
+    harga: 'Rp. 12000 / pcs',
+    bintang: '4.9',
+    alamat: 'Jl. Kenari no.7'
+  },
+  {
+    id: 3,
+    image: '/api/img/beras.png',
+    judul: 'beras Merah Organik',
+    harga: 'Rp. 40000 / 1 kg',
+    bintang: '4.9',
+    alamat: 'Jl. Mawar no.8'
+  },
+  {
+    id: 4,
+    image: '/api/img/genteng.png',
+    judul: 'Genteng',
+    harga: 'Rp. 3600 / pcs',
+    bintang: '4.9',
+    alamat: 'Jl. Kecubung no.16'
+  },
+
+]
+function Page() {
+  const [search, setSearch] = useState('');
+  const combobox = useCombobox({
+    onDropdownClose: () => {
+      combobox.resetSelectedOption();
+      combobox.focusTarget();
+      setSearch('');
+    },
+
+    onDropdownOpen: () => {
+      combobox.focusSearchInput();
+    },
+  });
+
+  const [value, setValue] = useState<string | null>(null);
+
+  const options = groceries
+    .filter((item) => item.toLowerCase().includes(search.toLowerCase().trim()))
+    .map((item) => (
+      <Combobox.Option value={item} key={item}>
+        {item}
+      </Combobox.Option>
+    ));
+  const router = useRouter()
+  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"}>
+          Pasar Desa
+        </Text>
+        <Text px={{ base: 20, md: 150 }} ta={"center"} fz={{ base: "h4", md: "h3" }} >
+          Pasar Desa Online merupakan Media Promosi yang bertujuan untuk membantu warga desa dalam memasarkan dan memperkenalkan produknya kepada masyarakat.
+        </Text>
+      </Box>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={'lg'}>
+          <SimpleGrid
+            pb={30}
+            cols={{
+              base: 1,
+              md: 2
+            }}
+          >
+            <Box>
+              <Combobox
+                store={combobox}
+                withinPortal={false}
+                onOptionSubmit={(val) => {
+                  setValue(val);
+                  combobox.closeDropdown();
+                }}
+              >
+                <Combobox.Target>
+                  <InputBase
+                    component="button"
+                    type="button"
+                    pointer
+                    rightSection={<Combobox.Chevron />}
+                    onClick={() => combobox.toggleDropdown()}
+                    rightSectionPointerEvents="none"
+                  >
+                    {value || <InputPlaceholder>Kategori</InputPlaceholder>}
+                  </InputBase>
+                </Combobox.Target>
+
+                <Combobox.Dropdown>
+                  <Combobox.Search
+                    value={search}
+                    onChange={(event) => setSearch(event.currentTarget.value)}
+                    placeholder="Search groceries"
+                  />
+                  <Combobox.Options>
+                    {options.length > 0 ? options : <Combobox.Empty>Nothing found</Combobox.Empty>}
+                  </Combobox.Options>
+                </Combobox.Dropdown>
+              </Combobox>
+            </Box>
+            <Box>
+              <TextInput
+                placeholder='Cari Produk'
+                leftSection={<IconSearch size={20} />}
+              />
+            </Box>
+          </SimpleGrid>
+          <SimpleGrid cols={{ base: 1, md: 4 }}>
+            {dataBarang.map((v, k) => {
+              return (
+                <Stack key={k}>
+                  <motion.div
+                    onClick={() => router.push('https://www.whatsapp.com/?lang=id')}
+                    whileHover={{ scale: 1.05 }}
+                    whileTap={{ scale: 0.8 }}
+                  >
+                    <Paper p={'lg'}>
+                      <Image radius={'lg'} src={v.image} alt='' />
+                      <Text py={10} fw={'bold'} fz={'lg'}>{v.judul}</Text>
+                      <Text fz={'md'}>{v.harga}</Text>
+                      <Flex py={10} gap={'md'}>
+                        <IconStarFilled size={20} color='#EBCB09' />
+                        <Text fz={'sm'} ml={2}>{v.bintang}</Text>
+                      </Flex>
+                      <Flex justify={'space-between'} align={'center'}>
+                        <Box>
+                          <Flex gap={'md'} align={'center'}>
+                            <IconMapPinFilled size={20} color='red' />
+                            <Text fz={'sm'} ml={2}>{v.alamat}</Text>
+                          </Flex>
+                        </Box>
+                        <IconShoppingCartFilled size={20} color={colors['blue-button']} />
+                      </Flex>
+                    </Paper>
+                  </motion.div>
+                </Stack>
+              )
+            })}
+          </SimpleGrid>
+          <Group justify='center'>
+            <Button bg={colors['blue-button']} rightSection={<IconArrowDown size={20} color={colors['white-1']} />} fz={'md'}>Lihat Produk Lainnya</Button>
+          </Group>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/ekonomi/program-kemiskinan/page.tsx

@@ -0,0 +1,99 @@
+import colors from '@/con/colors';
+import { Stack, Box, Text, SimpleGrid, Paper } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../desa/layanan/_com/BackButto';
+import { LineChart } from '@mantine/charts';
+
+const data = [
+  {
+    id: 1,
+    judul: 'Bantuan Tunai',
+    deskripsi: 'Bantuan keuangan langsung bagi keluarga kurang mampu'
+  },
+  {
+    id: 2,
+    judul: 'Pelatihan Kerja',
+    deskripsi: 'Program pelatihan keterampilan untuk meningkatkan peluang kerja'
+  },
+  {
+    id: 3,
+    judul: 'Subsidi Pangan',
+    deskripsi: 'Distribusi bahan pangan bersubsidi bagi masyarakat kurang mampu'
+  },
+  {
+    id: 4,
+    judul: 'Layanan Kesehatan Gratis',
+    deskripsi: 'Akses kesehatan gratis bagi masyarakat kurang mampu'
+  },
+]
+const dataStatistik = [
+  {
+    id: 1,
+    tahun: '2022',
+    Kemiskinan: 400000
+  },
+  {
+    id: 2,
+    tahun: '2023',
+    Kemiskinan: 450000
+  },
+  {
+    id: 3,
+    tahun: '2024',
+    Kemiskinan: 500000
+  },
+  {
+    id: 4,
+    tahun: '2025',
+    Kemiskinan: 400000
+  },
+]
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Box px={{ base: 'md', md: 100 }} >
+        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+          Program Kemiskinan
+        </Text>
+        <Text ta={'center'} fz={'h4'}>Berbagai program bantuan untuk mengurangi kemiskinan dan meningkatkan kesejahteraan masyarakat</Text>
+      </Box>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={'lg'} justify='center'>
+          <SimpleGrid
+            pb={10}
+            cols={{
+              base: 1,
+              md: 2
+            }}
+          >
+            {data.map((v, k) => {
+              return (
+                <Paper p={'xl'} key={k}>
+                  <Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.judul}</Text>
+                  <Text fz={'lg'} c={'black'}>{v.deskripsi}</Text>
+                </Paper>
+              )
+            })}
+          </SimpleGrid>
+          <Paper p={'xl'}>
+            <Text fz={'h4'} fw={'bold'} c={colors['blue-button']}>Statistik Kemiskinan Masyarakat</Text>
+            <LineChart
+              h={300}
+              data={dataStatistik}
+              dataKey="tahun"
+              series={[
+                { name: 'Kemiskinan', color: colors['blue-button'] },
+              ]}
+              curveType="linear"
+            />
+          </Paper>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/ekonomi/sektor-unggulan-desa/page.tsx

@@ -0,0 +1,69 @@
+import colors from '@/con/colors';
+import { Stack, Box, Text, Paper } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../desa/layanan/_com/BackButto';
+import { BarChart } from '@mantine/charts';
+
+const data = [
+  {
+    id: 1,
+    sektor: 'Sektor Pertanian',
+    Ton: 20
+  },
+  {
+    id: 2,
+    sektor: 'Sektor Peternakan',
+    Ton: 5
+  },
+
+]
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Box px={{ base: 'md', md: 100 }} >
+        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+          Sektor Unggulan Desa Darmasaba
+        </Text>
+        <Text ta={'center'} fz={'h4'}> Desa Darmasaba dikenal sebagai desa dengan potensi unggulan di sektor pertanian dan peternakan</Text>
+      </Box>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={'lg'} justify='center'>
+          <Paper p={'xl'}>
+            <Text fw={'bold'} fz={'h4'}>Jumlah Penduduk Miskin Per Tahun</Text>
+            <Text fz={'h4'} ta={'justify'}>
+              Pertanian di Darmasaba berfokus pada padi, sayuran, dan hortikultura yang dikembangkan dengan metode pertanian
+              organik serta sistem irigasi tradisional yang efisien. Keberlanjutan dalam pertanian juga didukung dengan pemanfaatan
+              teknologi modern untuk meningkatkan produktivitas hasil panen.
+            </Text>
+          </Paper>
+          <Paper p={'xl'}>
+            <Text fw={'bold'} fz={'h4'}>Sektor Peternakan</Text>
+            <Text fz={'h4'} ta={'justify'}>
+              Di bidang peternakan, Desa Darmasaba memiliki potensi besar dalam pengembangan sapi, ayam, dan babi. Sistem
+              peternakan yang diterapkan mengutamakan pengelolaan pakan alami dan perawatan hewan yang sehat, sehingga
+              menghasilkan produk ternak berkualitas tinggi.
+            </Text>
+          </Paper>
+          <Paper p={'xl'}>
+            <Text pb={10} fw={'bold'} fz={'h4'}>Statistik Sektor Unggulan Darmasaba</Text>
+            <BarChart
+              p={10}
+              h={300}
+              data={data}
+              dataKey="sektor"
+              series={[
+                { name: 'Ton', color: colors['blue-button'] },
+              ]}
+              tickLine="y"
+            />
+          </Paper>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/page.tsx

@@ -0,0 +1,24 @@
+import colors from '@/con/colors';
+import { Stack, Box, Text, Image } 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 px={{ base: 'md', md: 100 }} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+        Struktur Organisasi dan SK Pengurus BUMDesa
+      </Text>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={'lg'} justify='center'>
+          <Image src={'/api/img/bpddarmasaba.png'} alt='' />
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/inovasi/ajukan-ide-inovatif/page.tsx

@@ -0,0 +1,56 @@
+import colors from '@/con/colors';
+import { Stack, Box, Text, SimpleGrid, Paper, List, ListItem, Flex, ActionIcon } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../desa/layanan/_com/BackButto';
+import { IconArrowRight, IconBulbFilled } 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>
+      <Box px={{ base: 'md', md: 100 }} >
+        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+          Ajukan Ide Inovatif
+        </Text>
+        <Text ta={'center'} fz={'h4'}>Desa Darmasaba percaya bahwa setiap warga memiliki potensi luar biasa untuk menciptakan perubahan positif. Platform &quot;Ajukan Ide Inovatif&quot; hadir sebagai ruang inklusif bagi seluruh masyarakat untuk mengembangkan dan mengusulkan gagasan transformatif.</Text>
+      </Box>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={'lg'} p={'lg'}>
+          <SimpleGrid
+            cols={{
+              base: 1,
+              md: 2,
+            }}
+          >
+            <Paper p={'xl'} >
+              <Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>Tujuan Ide Inovatif Ini</Text>
+              <List>
+                <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Mendorong partisipasi aktif masyarakat</ListItem>
+                <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Memfasilitasi inovasi berbasis lokal</ListItem>
+                <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Memecahkan tantangan komunal</ListItem>
+                <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Mengembangkan potensi kreativitas warga</ListItem>
+              </List>
+            </Paper>
+            <Paper p={'xl'} >
+              <Flex align={'center'} justify={'space-between'}>
+                <Box>
+                  <Text fz={'h4'} fw={'bold'} c={colors['blue-button']}>Apabila Anda Ingin Mengajukan Ide Inovatif Bisa Klik Pada Gambar Di Samping</Text>
+                  <IconArrowRight size={30} color={colors['blue-button']} />
+                </Box>
+                <Box px={{ base: 5, md: 10 }} py={5}>
+                  <ActionIcon variant="transparent" size={150}>
+                    <IconBulbFilled size={150} color={colors['blue-button']} />
+                  </ActionIcon>
+                </Box>
+              </Flex>
+            </Paper>
+          </SimpleGrid>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/inovasi/desa-digital-smart-village/page.tsx

@@ -0,0 +1,105 @@
+import colors from '@/con/colors';
+import { Stack, Box, Text, List, ListItem, Paper, SimpleGrid, Image } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../desa/layanan/_com/BackButto';
+
+const data = [
+  {
+    id: 1,
+    image: '/api/img/administrasi-digital.png',
+    judul: 'Layanan Administrasi Digital',
+    deskripsi: <List>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Sistem pengurusan dokumen kependudukan online.</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pembuatan KTP, KK, Surat Keterangan secara daring.</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Antrian dan pembayaran pajak berbasis aplikasi mobile.</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Sistem informasi kependudukan terintegrasi.</ListItem>
+    </List>
+  },
+  {
+    id: 2,
+    image: '/api/img/edukasi-digital.png',
+    judul: 'Edukasi Digital',
+    deskripsi: <List>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Ruang Belajar Digital dengan akses internet gratis.</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pelatihan komputer dan literasi digital untuk semua usia.</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Kursus online keterampilan digital (desain, pemrograman, marketing).</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Beasiswa pendidikan teknologi untuk pemuda desa.</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Perpustakaan digital dengan koleksi buku elektronik.</ListItem>
+    </List>
+  },
+  {
+    id: 3,
+    image: '/api/img/ekonomi-digital.png',
+    judul: 'Ekonomi Digital',
+    deskripsi: <List>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Marketplace produk UMKM Darmasaba.</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Platform pemasaran hasil pertanian dan kerajinan lokal.</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Sistem pembayaran digital untuk pelaku usaha desa.</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Inkubator bisnis digital untuk wirausaha muda.</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pelatihan e-commerce dan digital marketing.</ListItem>
+    </List>
+  },
+  {
+    id: 4,
+    image: '/api/img/kesehatan-daring.png',
+    judul: 'Kesehatan Daring',
+    deskripsi: <List>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Telemedicine dengan dokter dan puskesmas.</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Monitoring kesehatan berbasis aplikasi.</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pendaftaran antrian puskesmas online.</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Edukasi kesehatan melalui platform digital.</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Rekam medis elektronik.</ListItem>
+    </List>
+  },
+  {
+    id: 5,
+    image: '/api/img/pertanian-cerdas.png',
+    judul: 'Pertanian Cerdas',
+    deskripsi: <List>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Sistem informasi cuaca dan prediksi pertanian.</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Konsultasi pertanian online dengan ahli.</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Penjualan hasil pertanian melalui platform digital.</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pelatihan pertanian modern berbasis teknologi.</ListItem>
+    </List>
+  },
+]
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Box px={{ base: 'md', md: 100 }} >
+        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+          Desa Digital / Smart Village
+        </Text>
+        <Text ta={'center'} fz={'h4'}>Mewujudkan Desa Darmasaba sebagai pusat inovasi digital yang memberdayakan masyarakat, meningkatkan kesejahteraan, dan menciptakan peluang ekonomi berbasis teknologi.</Text>
+      </Box>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={'lg'} justify='center'>
+          <SimpleGrid
+            pb={10}
+            cols={{
+              base: 1,
+              md: 3
+            }}
+          >
+            {data.map((v, k) => {
+              return (
+                <Paper p={'xl'} key={k}>
+                  <Image src={v.image} pb={10} radius={10} alt='' />
+                  <Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.judul}</Text>
+                  <Box pr={'lg'}>
+                  {v.deskripsi}
+                  </Box>
+                </Paper>
+              )
+            })}
+          </SimpleGrid>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/inovasi/info-teknologi-tepat-guna/page.tsx

@@ -0,0 +1,139 @@
+import colors from '@/con/colors';
+import { Stack, Box, Text, List, ListItem, Paper, SimpleGrid, Image } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../desa/layanan/_com/BackButto';
+
+const data = [
+  {
+    id: 1,
+    image: '/api/img/pertanian-cerdas.png',
+    judul: 'Pertanian Cerdas',
+    subjudul1: 'Sistem Irigasi Hemat Air',
+    subjudul2: 'Pengolahan Limbah Pertanian',
+    deskripsi1: <List>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Penggunaan sensor kelembaban tanah</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Kontrol penyiraman otomatis </ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pengurangan konsumsi air hingga 40%</ListItem>
+    </List>,
+    deskripsi2: <List>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Mesin pencacah jerami otomatis</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Konversi limbah menjadi pupuk organik</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Mengurangi pembakaran sampah pertanian</ListItem>
+    </List>,
+  },
+  {
+    id: 2,
+    image: '/api/img/energi-terbarukan.png',
+    judul: 'Energi Terbarukan',
+    subjudul1: 'Pembangkit Listrik Mikrohidro',
+    subjudul2: 'Solar Home System',
+    deskripsi1: <List>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Memanfaatkan aliran sungai sekitar</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Kapasitas 10-50 kW</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Elektrifikasi mandiri desa</ListItem>
+    </List>,
+    deskripsi2: <List>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Panel surya untuk rumah tangga </ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Akses listrik 24 jam</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Hemat biaya energi</ListItem>
+    </List>,
+  },
+  {
+    id: 3,
+    image: '/api/img/pengolahan-pangan.png',
+    judul: 'Pengolahan Pangan',
+    subjudul1: 'Mesin Pengering Hasil Pertanian',
+    subjudul2: 'Alat Pengolah Hasil Pertanian',
+    deskripsi1: <List>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Teknologi pengering tenaga surya</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Menjaga kualitas hasil panen</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Mencegah kerusakan pasca panen</ListItem>
+    </List>,
+    deskripsi2: <List>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Mesin pengupas dan pengemas produk</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Meningkatkan nilai jual komoditas</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Standarisasi kualitas produk</ListItem>
+    </List>,
+  },
+  {
+    id: 4,
+    image: '/api/img/pengelolaan-sampah.png',
+    judul: 'Pengelolaan Sampah',
+    subjudul1: 'Sistem Pengolahan Sampah Terpadu',
+    subjudul2: 'Komposter Komunal',
+    deskripsi1: <List>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pemilahan otomatis</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Daur ulang sampah organik dan anorganik</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pembangkit listrik dari sampah</ListItem>
+    </List>,
+    deskripsi2: <List>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Teknologi pengomposan cepat</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Menghasilkan pupuk organik</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Mengurangi sampah ke TPA</ListItem>
+    </List>,
+  },
+  {
+    id: 5,
+    image: '/api/img/kesehatan-daring.png',
+    judul: 'Kesehatan Masyarakat',
+    subjudul1: 'Alat Deteksi Dini Penyakit',
+    subjudul2: 'Air Bersih Mandiri',
+    deskripsi1: <List>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Skrining kesehatan portable </ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pemeriksaan tekanan darah dan gula </ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Konsultasi medis jarak jauh</ListItem>
+    </List>,
+    deskripsi2: <List>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Sistem filter air canggih </ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Menghilangkan kontaminan </ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Jaminan kualitas air minum
+
+</ListItem>
+    </List>,
+  },
+]
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Box px={{ base: 'md', md: 100 }} >
+        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+          Info Teknologi Tepat Guna
+        </Text>
+        <Text ta={'center'} fz={'h4'}>Desa Darmasaba berkomitmen mengembangkan teknologi tepat guna yang sesuai dengan kebutuhan masyarakat, mendukung pembangunan berkelanjutan, dan meningkatkan kualitas hidup warga.</Text>
+      </Box>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={'lg'} p={'lg'}>
+          <SimpleGrid
+            pb={10}
+            cols={{
+              base: 1,
+              md: 3
+            }}
+          >
+            {data.map((v, k) => {
+              return (
+                <Paper p={'xl'} key={k}>
+                  <Image src={v.image} pb={10} radius={10} alt='' />
+                  <Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.judul}</Text>
+                  <Box pr={'lg'} pb={10}>
+                  <Text fz={'h4'} fw={'bold'} >{v.subjudul1}</Text>
+                    {v.deskripsi1}
+                  </Box>
+                  <Box pr={'lg'}>
+                  <Text fz={'h4'} fw={'bold'} >{v.subjudul2}</Text>
+                    {v.deskripsi2}
+                  </Box>
+                </Paper>
+              )
+            })}
+          </SimpleGrid>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/inovasi/kolaborasi-inovasi/page.tsx

@@ -0,0 +1,83 @@
+import colors from '@/con/colors';
+import { Stack, Box, Text, Paper, Flex, Group, SimpleGrid, Button, Image, Center } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../desa/layanan/_com/BackButto';
+import { IconChevronDown } from '@tabler/icons-react';
+
+const data = [
+  {
+    id: 1,
+    bulan: 'JANUARI 2025',
+    judul: 'Darmasaba Smart Waste',
+    deskripsi: 'Sistem manajemen sampah terpadu yang memudahkan warga untuk memilah dan mendaur ulang sampah.',
+    kolaborator: 'Kolaborator: DLH Kabupaten Badung, Komunitas Peduli Lingkungan, TPS3R Pudak Mesari'
+  },
+  {
+    id: 2,
+    bulan: 'FEBRUARI 2025',
+    judul: 'Darmasaba Digital Market',
+    deskripsi: 'Platform e-commerce untuk produk UMKM desa yang menghubungkan produsen lokal dengan pasar global.',
+    kolaborator: 'Kolaborator: Kementerian Desa PDTT, UMKM Darmasaba'
+  }
+]
+function Page() {
+  return (
+    <>
+      <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+        <Box px={{ base: 'md', md: 100 }}>
+          <BackButton />
+        </Box>
+        <Box px={{ base: 'md', md: 100 }} >
+          <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+            Kolaborasi Inovasi
+          </Text>
+        </Box>
+        <Box px={{ base: "md", md: 100 }}>
+          <Stack gap={'lg'} justify='center'>
+            <Group justify='flex-end'>
+              <Paper bg={colors['blue-button']} p={5} w={{ base: 150, md: 300 }}>
+                <Flex px={20} align={'center'} justify={'space-between'}>
+                  <Text fz={'h4'} fw={'bold'} c={colors['white-1']}>Tahun</Text>
+                  <IconChevronDown size={20} color={colors['white-1']} />
+                </Flex>
+              </Paper>
+            </Group>
+            <SimpleGrid cols={{ base: 1, md: 2 }} spacing={'lg'}>
+              {data.map((v, k) => {
+                return (
+                  <Paper p={'xl'} key={k}>
+                    <Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.judul}</Text>
+                    <Box pr={'lg'} pb={20}>
+                      {v.deskripsi}
+                    </Box>
+                    <Box pr={'lg'}>
+                      {v.kolaborator}
+                    </Box>
+                  </Paper>
+                );
+              })}
+            </SimpleGrid>
+            <Group py={40} justify='center'>
+              <Button px={80} rightSection={<IconChevronDown />} radius={6} bg={colors["blue-button"]} c={colors["white-1"]}>Lihat Laporan Lainnya</Button>
+            </Group>
+          </Stack>
+        </Box>
+      </Stack>
+      <Box py={40} px={{ base: "md", md: 100 }} bg={colors['white-trans-1']}>
+        <Stack gap={'lg'} justify='center'>
+          <Box px={{ base: 'md', md: 100 }} >
+            <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+              Mitra Kolaborasi
+            </Text>
+            <Text ta={'center'} fz={'h4'}>Kami berkolaborasi dengan berbagai mitra dari berbagai sektor untuk mewujudkan visi Smart Village Darmasaba.</Text>
+          </Box>
+          <Center>
+            <Image src={'/api/img/logoukm-kolaborasiinvoasi.png'} alt='' w={{base: 500, md: 650}}/>
+          </Center>
+        </Stack>
+      </Box>
+    </>
+  );
+}
+
+export default Page;

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

@@ -0,0 +1,67 @@
+import colors from '@/con/colors';
+import { Box, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { IconBell, IconFileCheckFilled, IconMessageCircleQuestion } from '@tabler/icons-react';
+import BackButton from '../../desa/layanan/_com/BackButto';
+
+const data = [
+  {
+    id: 1,
+    icon: <IconFileCheckFilled size={50} color={colors['blue-button']} />,
+    judul: 'Administrasi Online',
+    deskripsi: 'Pengurusan surat dan dokumen secara digital tanpa perlu datang ke kantor desa'
+  },
+  {
+    id: 2,
+    icon: <IconMessageCircleQuestion size={50} color={colors['blue-button']} />,
+    judul: 'Pengaduan Masyarakat',
+    deskripsi: 'Sampaikan keluhan dan aspirasi Anda melalui platform digital kami'
+  },
+  {
+    id: 3,
+    icon: <IconBell size={50} color={colors['blue-button']} />,
+    judul: 'Informasi Desa',
+    deskripsi: 'Akses berita dan pengumuman terbaru seputar kegiatan desa'
+  },
+]
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Box px={{ base: 'md', md: 100 }} >
+        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+          Layanan Online Desa
+        </Text>
+      </Box>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={'lg'} justify='center'>
+          <SimpleGrid
+            pb={10}
+            cols={{
+              base: 1,
+              md: 1
+            }}
+          >
+            {data.map((v, k) => {
+              return (
+                <Stack key={k} >
+
+                  <Paper p={'xl'} >
+                    <Box>
+                      {v.icon}
+                    </Box>
+                    <Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.judul}</Text>
+                    <Text fz={'lg'} c={'black'}>{v.deskripsi}</Text>
+                  </Paper>
+                </Stack>
+              )
+            })}
+          </SimpleGrid>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/inovasi/program-kreatif-desa/page.tsx

@@ -0,0 +1,81 @@
+import colors from '@/con/colors';
+import { Stack, Box, Text, SimpleGrid, Paper, Center, Button } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../desa/layanan/_com/BackButto';
+import { IconBuildingCircus, IconChartLine, IconLeaf, IconRecycle, IconTrophy } from '@tabler/icons-react';
+
+const data = [
+  {
+    id: 1,
+    icon: <IconLeaf size={50} color={colors['blue-button']} />,
+    judul: 'Ekowisata dan Desa Hijau',
+    deskripsi: 'Inisiatif ramah lingkungan untuk desa berkelanjutan'
+  },
+  {
+    id: 2,
+    icon: <IconTrophy size={50} color={colors['blue-button']} />,
+    judul: 'Kompetisi dan Festival Desa',
+    deskripsi: 'Ajang kompetisi inovasi dan festival tahunan desa'
+  },
+  {
+    id: 3,
+    icon: <IconBuildingCircus size={50} color={colors['blue-button']} />,
+    judul: 'Wisata Kreatif dan Budaya',
+    deskripsi: 'Promosi destinasi wisata berbasis budaya dan alam'
+  },
+  {
+    id: 4,
+    icon: <IconChartLine size={50} color={colors['blue-button']} />,
+    judul: 'Ekonomi Kreatif',
+    deskripsi: 'Mendukung pelaku UMKM dengan platform digital untuk mempromosikan produk lokal ke pasar global'
+  },
+  {
+    id: 5,
+    icon: <IconRecycle size={50} color={colors['blue-button']} />,
+    judul: 'Smart Waste Management',
+    deskripsi: 'Inisiatif pengelolaan sampah berbasis teknologi untuk menciptakan lingkungan yang bersih dan berkelanjutan.'
+  },
+]
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Box px={{ base: 'md', md: 100 }} >
+        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+          Program Kreatif Desa
+        </Text>
+      </Box>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={'lg'} justify='center'>
+          <SimpleGrid
+            cols={{
+              base: 1,
+              md: 3
+            }}
+          >
+            {data.map((v, k) => {
+              return (
+                <Stack key={k} >
+                  <Paper p={'xl'} >
+                    <Center pb={20}>
+                      {v.icon}
+                    </Center>
+                    <Text ta={'center'} fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.judul}</Text>
+                    <Text py={10} ta={'center'} fz={'lg'} c={'black'}>{v.deskripsi}</Text>
+                    <Center>
+                      <Button bg={colors['blue-button']}>Selengkapnya</Button>
+                    </Center>
+                  </Paper>
+                </Stack>
+              )
+            })}
+          </SimpleGrid>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/keamanan/keamanan-lingkungan-pecalang-patwal/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/kontak-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/laporan-publik/page.tsx

@@ -0,0 +1,118 @@
+import colors from '@/con/colors';
+import { Stack, Box, Text, Flex, ColorSwatch, SimpleGrid, List, ListItem, Button, Paper, Title } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../desa/layanan/_com/BackButto';
+import { IconArrowRight } from '@tabler/icons-react';
+
+
+const data = [
+  {
+    id: 1,
+    judul: 'Kasus Pencurian Banjar Tengah',
+    tanggal: '3 Februari 2025, 02:00 WITA',
+    deskripsi: <List>
+      <ListItem>Laporan ke Polsek setempat</ListItem>
+      <ListItem>Penyisiran area oleh Pecalang</ListItem>
+      <ListItem>Koordinasi dengan dealer motor</ListItem>
+      <ListItem>Penyebaran informasi ke grup keamanan</ListItem>
+    </List>,
+    button: <Button fz={'md'} fullWidth bg={'#2A742D'}>Terselesaikan</Button>
+
+  },
+  {
+    id: 2,
+    judul: 'Kasus Narkoba Banjar Kaja',
+    tanggal: '10 Februari 2025, 22:30 WITA',
+    deskripsi: <List>
+      <ListItem>Koordinasi dengan Satres Narkoba</ListItem>
+      <ListItem>Penggerebekan lokasi</ListItem>
+      <ListItem>Pengamanan barang bukti</ListItem>
+      <ListItem>Pemeriksaan saksi</ListItem>
+    </List>,
+    button: <Button fz={'md'} fullWidth bg={'#D1961F'}>Dalam Proses</Button>
+
+  },
+  {
+    id: 3,
+    judul: 'Kasus Tawuran Banjar Kaja',
+    tanggal: '15 Februari 2025, 22:30 WITA',
+    deskripsi: <List>
+      <ListItem>Laporan ke Polsek setempat</ListItem>
+      <ListItem>Penggerebekan lokasi</ListItem>
+      <ListItem>Pengamanan barang bukti</ListItem>
+      <ListItem>Pemeriksaan saksi</ListItem>
+    </List>,
+    button: <Button fz={'md'} fullWidth bg={'#2A742D'}>Terselesaikan</Button>
+
+  },
+]
+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'} align={'center'}>
+            <Text fz={{ base: 'sm', md: 'h4' }} fw={'bold'}>Laporan Terbaru</Text>
+            <Box>
+              <Flex gap={'lg'}>
+                <Box>
+                  <Flex gap={{ base: 2, md: 5 }} align={'center'}>
+                    <Text fz={{ base: 'sm', md: 'h4' }}>Terselesaikan</Text>
+                    <ColorSwatch color="#2A742D" size={20} />
+                  </Flex>
+                </Box>
+                <Box>
+                  <Flex gap={{ base: 2, md: 5 }} align={'center'}>
+                    <Text fz={{ base: 'sm', md: 'h4' }}>Dalam Proses</Text>
+                    <ColorSwatch color="#D1961F" size={20} />
+                  </Flex>
+                </Box>
+                <Box>
+                  <Flex gap={{ base: 2, md: 5 }} align={'center'}>
+                    <Text fz={{ base: 'sm', md: 'h4' }}>Gagal</Text>
+                    <ColorSwatch color="#A34437" size={20} />
+                  </Flex>
+                </Box>
+              </Flex>
+            </Box>
+          </Flex>
+          <SimpleGrid
+            cols={{
+              base: 1,
+              md: 3
+          }}
+          >
+            {data.map((v, k) => {
+              return (
+                <Paper radius={'lg'} key={k} bg={colors['white-trans-1']} p={'xl'}>
+                  <Stack>
+                    <Title c={colors['blue-button']} order={1}>{v.judul}</Title>
+                    <Text fs={'italic'} fz={'xl'}>{v.tanggal}</Text>
+                    <Box>
+                      <Text fw={'bold'}>Penanganan:</Text>
+                      {v.deskripsi}
+                    </Box>
+                    <Box>
+                      {v.button}
+                    </Box>
+                    <Button bg={colors['blue-button']} rightSection={<IconArrowRight size={20} color={colors['white-1']} />}>Lihat Detail Kronologi</Button>
+                  </Stack>
+                </Paper>
+              )
+            })}
+          </SimpleGrid>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/keamanan/pencegahan-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/polsek-terdekat/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)/keamanan/tips-keamanan/page.tsx

@@ -0,0 +1,120 @@
+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: 'Keamanan Rumah',
+    image: '/api/img/kemanan.png',
+    deskripsi: <List>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pastikan pintu dan jendela selalu terkunci saat meninggalkan rumah.</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pasang lampu penerangan di halaman dan area sekitar rumah untuk mencegah tindak kejahatan.</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Jangan mudah memberikan akses masuk ke orang yang tidak dikenal.</ListItem>
+    </List>
+  },
+  {
+    id: 2,
+    judul: 'Keamanan di Jalan',
+    image: '/api/img/keamananjalan.png',
+    deskripsi: <List>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Hindari berjalan sendirian di tempat sepi, terutama pada malam hari.</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Simpan barang berharga di tempat yang aman saat bepergian.</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Gunakan jalur yang ramai dan terang saat pulang malam.</ListItem>
+    </List>
+  },
+  {
+    id: 3,
+    judul: 'Keamanan Kendaraan',
+    image: '/api/img/keamanankendaraan.png',
+    deskripsi: <List>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Gunakan kunci ganda saat memarkir kendaraan, terutama di tempat umum.</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Parkir di tempat yang terang dan mudah diawasi.</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Jangan meninggalkan barang berharga di dalam kendaraan.</ListItem>
+    </List>
+  },
+  {
+    id: 4,
+    judul: 'Keamanan Sosial',
+    image: '/api/img/mencurigakan.png',
+    deskripsi: <List>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Laporkan kejadian mencurigakan kepada Pecalang atau perangkat desa.</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Jangan mudah percaya terhadap informasi yang belum jelas sumbernya.</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Ikuti program sosialisasi keamanan yang diadakan oleh desa.</ListItem>
+    </List>
+  },
+  {
+    id: 5,
+    judul: 'Sistem Laporan Kejadian',
+    image: '/api/img/securitydigital.png',
+    deskripsi: <List>
+      <ListItem>Jangan mudah membagikan informasi pribadi di media sosial.</ListItem>
+      <ListItem>Waspada terhadap penipuan online dan telepon yang mengatasnamakan instansi resmi.</ListItem>
+      <ListItem>Gunakan kata sandi yang kuat untuk akun digital dan ganti secara berkala.</ListItem>
+    </List>
+  },
+  {
+    id: 6,
+    judul: 'Nomor Darurat yang Bisa Dihubungi',
+    image: '/api/img/kontakpecalang.png',
+    deskripsi: <List>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pecalang: 08125651052</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Ambulans: 08125651052</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pemadam Kebakaran: 113</ListItem>
+      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Polisi: 110</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"}>
+          Tips Keamanan
+        </Text>
+        <Text px={{ base: 20, md: 150 }} ta={"center"} fz={{ base: "h4", md: "h3" }} >
+          Desa Darmasaba berkomitmen untuk menjaga keamanan dan kenyamanan seluruh warganya. Berikut beberapa tips yang dapat membantu meningkatkan keamanan di lingkungan desa.
+        </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 p={10}>
+                      <Image src={v.image} radius={10}
+                     alt='' />
+                    </Center>
+                    <Box px={'xl'}>
+                      <Box pb={20}>
+                        <Text pb={10} c={colors["blue-button"]} fw={"bold"} fz={"h3"}>
+                          {v.judul}
+                        </Text>
+                        <Box pr={10}>
+                          {v.deskripsi}
+                        </Box>
+                      </Box>
+                    </Box>
+                  </Stack>
+                </Paper>
+              )
+            })}
+          </SimpleGrid>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/kesehatan/info-wabah-penyakit/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-darurat/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-darurat/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/program-kesehatan/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/program/page.tsx

@@ -1,103 +0,0 @@
-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',
-    image: '/api/img/posyandu.png'
-  },
-  {
-    id: 2,
-    judul: 'Posyandu Banjar Bucu',
-    image: '/api/img/posyandu.png'
-  },
-  {
-    id: 3,
-    judul: 'Posyandu Banjar Bucu',
-    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>
-      <Box>
-        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
-          Program Kesehatan Unggulan
-        </Text>
-        <Text px={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,
-            }}>
-            {data.map((v, k) => {
-              return (
-                <Paper radius={10} key={k} bg={colors["white-trans-1"]}>
-                  <Stack gap={'xs'}>
-                    <Center>
-                      <Image src={v.image} alt="" />
-                    </Center>
-                    <Box px={'lg'}>
-                      <Text fz={'h4'}>
-                        Jadwal Pelayanan
-                      </Text>
-                      <Text fz={'h4'}>
-                        Setiap tanggal 5, Pukul 09:00 -
-                        12:00 WITA
-                      </Text>
-                      <Box>
-                        <Text c={colors["blue-button"]} fw={"bold"} fz={"h3"}>
-                          {v.judul}
-                        </Text>
-                        <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>
-                    </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/puskesmas/page.tsx

@@ -107,11 +107,11 @@ function Page() {
                     }}>
                     <Paper p={"xl"} bg={colors['white-trans-1']}>
                       <Text fw={"bold"} fz={'h3'} ta={'center'}>Poliklinik Umum</Text>
-                      <Text ta={'center'} fz={65} fw={'bold'} c={colors['blue-button']}>26</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={65} fw={'bold'} c={colors['blue-button']}>26</Text>
+                      <Text ta={'center'} fz={{ base: 45, md: 65 }} fw={'bold'} c={colors['blue-button']}>26</Text>
                     </Paper>
                   </SimpleGrid>
                 </Paper>

src/app/darmasaba/(pages)/lingkungan/data-lingkungan-desa/page.tsx

@@ -0,0 +1,88 @@
+import colors from '@/con/colors';
+import { Box, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { IconChristmasTree, IconDroplet, IconHome, IconLeaf, IconTrash } from '@tabler/icons-react';
+import BackButton from '../../desa/layanan/_com/BackButto';
+
+const data = [
+  {
+    id: 1,
+    icon: <IconLeaf size={100} color={colors['blue-button']} />,
+    title: 'Luas Lahan Hijau',
+    jumlah: '± 25 hektar',
+    deskripsi: 'tersebar di area persawahan, kebun, dan taman desa.'
+  },
+  {
+    id: 2,
+    icon: <IconHome size={100} color={colors['blue-button']} />,
+    title: 'Jumlah Rumah Tangga',
+    jumlah: '± 1.500 rumah tangga',
+    deskripsi: 'yang mayoritas sudah memiliki fasilitas pengelolaan sampah mandiri.'
+  },
+  {
+    id: 3,
+    icon: <IconDroplet size={100} color={colors['blue-button']} />,
+    title: 'Jumlah Sungai dan Saluran Air',
+    jumlah: '± 3 Sungai Besar',
+    deskripsi: 'dan beberapa saluran irigasi tradisional (subak) yang masih aktif digunakan.'
+  },
+  {
+    id: 4,
+    icon: <IconChristmasTree size={100} color={colors['blue-button']} />,
+    title: 'Program Penghijauan',
+    jumlah: '± 1000 Pohon',
+    deskripsi: 'Dilaksanakan secara berkala melalui kegiatan menanam pohon di area umum dan perbukitan.'
+  },
+  {
+    id: 5,
+    icon: <IconTrash size={100} color={colors['blue-button']} />,
+    title: 'Pengelolaan Sampah',
+    jumlah: '± 5 Bank Sampah',
+    deskripsi: 'Didukung oleh Bank Sampah dan sistem pemilahan sampah rumah tangga.'
+  },
+]
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Box px={{ base: 'md', md: 100 }} >
+        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+          Data Lingkungan Desa
+        </Text>
+        <Text px={20} ta={'center'} fz={'h4'}>Desa Darmasaba memiliki lingkungan yang terus dijaga dan dikembangkan demi kesejahteraan warganya. Upaya pelestarian lingkungan difokuskan pada penghijauan, pengelolaan sampah, serta perlindungan kawasan hijau.</Text>
+      </Box>
+      <Box px={{ base: 'md', md: 100 }} >
+        <SimpleGrid
+          cols={{
+            base: 1,
+            md: 2,
+          }}>
+          {data.map((v, k) => {
+            return (
+              <Box key={k}>
+                <Paper p={20} bg={colors['white-trans-1']}>
+                  <Text fw={'bold'} c={colors['blue-button']} fz={{ base: "lg", md: "xl" }} >
+                    {v.title}
+                  </Text>
+                  <Box>
+                    {v.icon}
+                    <Text c={colors['blue-button']} fz={'h4'} fw={'bold'}>
+                      {v.jumlah}
+                    </Text>
+                  </Box>
+                  <Text fz={{ base: "lg", md: "xl" }} >
+                    {v.deskripsi}
+                  </Text>
+
+                </Paper>
+              </Box>
+            )
+          })}
+        </SimpleGrid>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/lingkungan/edukasi-lingkungan/page.tsx

@@ -0,0 +1,103 @@
+import colors from '@/con/colors';
+import { Box, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import BackButton from '../../desa/layanan/_com/BackButto';
+
+const data = [
+  {
+    id: 1,
+    title: 'Tujuan Edukasi Lingkungan',
+    listDeskripsi: <List fz={'h4'} pr={20} ta={'justify'}>
+      <ListItem>
+        Meningkatkan kesadaran masyarakat tentang pentingnya lingkungan bersih dan sehat
+      </ListItem>
+      <ListItem>
+        Mendorong partisipasi warga dalam kegiatan pengelolaan sampah, penghijauan, dan konservasi
+      </ListItem>
+      <ListItem>
+        Mengurangi dampak negatif terhadap lingkungan dari kegiatan manusia
+      </ListItem>
+      <ListItem>
+        Membentuk generasi muda yang peduli terhadap isu-isu lingkungan
+      </ListItem>
+    </List>
+  },
+  {
+    id: 2,
+    title: 'Materi Edukasi yang Diberikan',
+    listDeskripsi: <List fz={'h4'} pr={20} ta={'justify'}>
+      <ListItem>
+        Pengelolaan Sampah (Pilah sampah organik dan anorganik)
+      </ListItem>
+      <ListItem>
+        Pencegahan pencemaran lingkungan (air, udara, dan tanah)
+      </ListItem>
+      <ListItem>
+        Pemanfaatan lahan hijau dan penghijauan desa
+      </ListItem>
+      <ListItem>
+        Daur ulang dan kreatifitas dari sampah
+      </ListItem>
+      <ListItem>
+        Bahaya pembakaran sampah sembarangan
+      </ListItem>
+    </List>
+  },
+  {
+    id: 3,
+    title: 'Contoh Kegiatan di Desa Darmasaba',
+    listDeskripsi: <List fz={'h4'} pr={20} ta={'justify'}>
+      <ListItem>
+        Pelatihan membuat kompos dari sampah rumah tangga
+      </ListItem>
+      <ListItem>
+        Gerakan &quot;Jumat Bersih&quot; rutin
+      </ListItem>
+      <ListItem>
+        Workshop membuat ecobrick
+      </ListItem>
+      <ListItem>
+        Lomba kebersihan antar banjar
+      </ListItem>
+      <ListItem>
+        Sosialisasi lingkungan di sekolah dan posyandu
+      </ListItem>
+    </List>
+  },
+]
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Box px={{ base: 'md', md: 100 }} pb={20}>
+        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+          Edukasi Lingkungan
+        </Text>
+        <Text px={20} ta={'center'} fz={'h4'}>
+          Edukasi Lingkungan adalah bagian penting dalam membentuk perilaku masyarakat yang peduli dan bertanggung jawab terhadap kelestarian alam. Melalui program ini, masyarakat diajak untuk memahami pentingnya menjaga lingkungan demi kesehatan, kenyamanan, dan keberlanjutan hidup bersama.
+        </Text>
+      </Box>
+      <Box px={{ base: 'md', md: 100 }} >
+        <SimpleGrid
+          cols={{
+            base: 1,
+            md: 3,
+          }}>
+          {data.map((v, k) => {
+            return (
+              <Box key={k}>
+                <Paper h={{base: 0, md: 350}} p={20} bg={colors['white-trans-1']}>
+                  <Text  fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.title}</Text>
+                  {v.listDeskripsi}
+                </Paper>
+              </Box>
+            )
+          })}
+        </SimpleGrid>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/lingkungan/gotong-royong/page.tsx

@@ -0,0 +1,89 @@
+import colors from '@/con/colors';
+import { Stack, Box, Container, Grid, GridCol, Group, Paper, TextInput, Text, Image, Flex, Button } from '@mantine/core';
+import { IconCalendar, IconMapPin, IconSearch, IconUsersGroup } from '@tabler/icons-react';
+import React from 'react';
+import BackButton from '../../desa/layanan/_com/BackButto';
+import Link from 'next/link';
+
+function Page() {
+  return (
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="md">
+      {/* Header */}
+      <Box px={{ base: "md", md: 100 }}>
+        <BackButton />
+      </Box>
+      <Container size="lg" px="md">
+        <Stack align="center" gap={0} mb="xl">
+          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
+            Program Gotong Royong
+          </Text>
+          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
+            Desa Darmasaba
+          </Text>
+        </Stack>
+      </Container>
+
+      {/* Tabs Menu */}
+      <Box px={{ base: "md", md: "xl" }} py="md" bg={colors['BG-trans']} mb="md">
+        <Grid align="center" justify="space-between" mb={20}>
+          <GridCol span={{ base: 12, md: 8 }}>
+            <Group gap="md" wrap="wrap">
+              <Paper bg={colors['blue-button']} radius="xl" py={5} px={20}>
+                <Text c={colors['white-1']} size="sm">
+                  Semua
+                </Text>
+              </Paper>
+              {['Kebersihan', 'Infrastruktur', 'Sosial', 'Lingkungan'].map((kategori) => (
+                <Paper key={kategori} bg={colors['blue-button-trans']} radius="xl" py={5} px={20}>
+                  <Text size="sm">
+                    {kategori}
+                  </Text>
+                </Paper>
+              ))}
+            </Group>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 4 }}>
+            <TextInput
+              radius="lg"
+              placeholder="Cari Program Gotong Royong"
+              leftSection={<IconSearch size={18} />}
+              w="100%"
+            />
+          </GridCol>
+        </Grid>
+        <Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
+          <Stack gap={'xs'}>
+            <Image radius={20} src={'/api/img/gotong-royong.png'} w={'100%'} alt='' />
+            <Text fw={"bold"} fz={{ base: "h2", md: "h1" }}>Membangun Fasilitas Desa</Text>
+            <Group>
+              <Paper py={5} px={20} bg={colors['blue-button-trans']} radius={20}>
+                <Text c={colors['white-1']}>Sosial</Text>
+              </Paper>
+            </Group>
+            <Text fz={{ base: "h4", md: "h3" }}>
+              Program Pembangunan Fasilitas Desa Maju, Masyarakat Sejahtera.
+            </Text>
+            <Flex gap={5} align={'center'}>
+              <IconCalendar color={colors['blue-button-trans']} size={45} />
+              <Text fz={{ base: "h4", md: "h3" }}>1 April 2025</Text>
+            </Flex>
+            <Flex gap={5} align={'center'}>
+              <IconMapPin color={colors['blue-button-trans']} size={45} />
+              <Text fz={{ base: "h4", md: "h3" }}>Banjar Desa Darmasaba</Text>
+            </Flex>
+            <Flex gap={5} align={'center'}>
+              <IconUsersGroup color={colors['blue-button-trans']} size={45} />
+              <Text fz={{ base: "h4", md: "h3" }}>30 Partisipan</Text>
+            </Flex>
+            <Text fw={'bold'} fz={'md'}>Deskripsi : Program pembangunan Pura sebagai pusat spiritual dan budaya desa, melibatkan gotong royong masyarakat dalam pembangunan struktur utama serta ornamen tradisional.</Text>
+            <Group py={20} justify='center'>
+              <Button component={Link} href={'https://www.whatsapp.com/?lang=id'} bg={colors['blue-button']} >Daftar Sebagai Relawan</Button>
+            </Group>
+          </Stack>
+        </Paper>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/lingkungan/konservasi-adat-bali/page.tsx

@@ -0,0 +1,97 @@
+import colors from '@/con/colors';
+import { Box, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import BackButton from '../../desa/layanan/_com/BackButto';
+
+const data = [
+  {
+    id: 1,
+    title: 'Filosofi Tri Hita Karana',
+    listDeskripsi: <List fz={'h4'} pr={20} ta={'justify'}>
+      <ListItem>
+        Parahyangan: Hubungan manusia dengan Tuhan
+      </ListItem>
+      <ListItem>
+        Pawongan: Hubungan antar manusia
+      </ListItem>
+      <ListItem>
+        Palemahan: Hubungan manusia dengan alam
+      </ListItem>
+    </List>
+  },
+  {
+    id: 2,
+    title: 'Bentuk Konservasi Berdasarkan Adat',
+    listDeskripsi: <List fz={'h4'} pr={20} ta={'justify'}>
+      <ListItem>
+        Pelestarian Hutan Adat seperti Alas Pala Sangeh atau Wana Kerthi
+      </ListItem>
+      <ListItem>
+        Subak: Sistem pengelolaan irigasi tradisional yang menjunjung kebersamaan dan keberlanjutan
+      </ListItem>
+      <ListItem>
+        Hari Raya Tumpek Uduh: Perayaan khusus untuk menghormati pohon dan tumbuhan
+      </ListItem>
+      <ListItem>
+        Perarem dan Awig-Awig: Aturan adat desa yang mengatur larangan menebang pohon sembarangan, membuang limbah ke sungai, dll.
+      </ListItem>
+      <ListItem>
+        Ritual penyucian alam seperti Melasti, Piodalan Segara, dan lainnya
+      </ListItem>
+    </List>
+  },
+  {
+    id: 3,
+    title: 'Nilai Konservasi Adat',
+    listDeskripsi: <List fz={'h4'} pr={20} ta={'justify'}>
+      <ListItem>
+        Menjaga keseimbangan ekosistem
+      </ListItem>
+      <ListItem>
+        Melestarikan spiritualitas lokal dan kesucian alam
+      </ListItem>
+      <ListItem>
+        Menumbuhkan kesadaran kolektif untuk hidup selaras dengan lingkungan
+      </ListItem>
+      <ListItem>
+        Menjaga keberlangsungan sumber daya alam untuk generasi mendatang
+      </ListItem>
+    </List>
+  },
+]
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Box px={{ base: 'md', md: 100 }} pb={20}>
+        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+          Konservasi Adat Bali
+        </Text>
+        <Text px={20} ta={'center'} fz={'h4'}>
+          Konservasi Adat Bali adalah upaya pelestarian lingkungan yang berpijak pada kearifan lokal masyarakat Bali, di mana alam dan budaya dianggap sebagai satu kesatuan yang harus dijaga secara harmonis.
+        </Text>
+      </Box>
+      <Box px={{ base: 'md', md: 100 }} >
+        <SimpleGrid
+          cols={{
+            base: 1,
+            md: 3,
+          }}>
+          {data.map((v, k) => {
+            return (
+              <Box key={k}>
+                <Paper h={{ base: 0, md: 450 }} p={20} bg={colors['white-trans-1']}>
+                  <Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.title}</Text>
+                  {v.listDeskripsi}
+                </Paper>
+              </Box>
+            )
+          })}
+        </SimpleGrid>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/lingkungan/pengelolaan-sampah-bank-sampah/page.tsx

@@ -0,0 +1,172 @@
+import colors from '@/con/colors';
+import { Box, Flex, Paper, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { IconClipboardTextFilled, IconMapPin, IconRecycle, IconScale, IconSearch, IconTrashFilled, IconTruckFilled } from '@tabler/icons-react';
+import BackButton from '../../desa/layanan/_com/BackButto';
+
+const data = [
+  {
+    id: 1,
+    icon: <IconRecycle size={50} color={colors['blue-button']} />,
+    deskripsi: '1. Pilah sampah sesuai jenisnya'
+  },
+  {
+    id: 2,
+    icon: <IconTruckFilled size={50} color={colors["blue-button"]} />,
+    deskripsi: '2. Bawa sampah ke Bank Sampah'
+  },
+  {
+    id: 3,
+    icon: <IconScale size={50} color={colors["blue-button"]} />,
+    deskripsi: '3. Timbang sampah di Bank Sampah'
+  },
+  {
+    id: 4,
+    icon: <IconClipboardTextFilled size={50} color={colors["blue-button"]} />,
+    deskripsi: '4. Catat hasil timbangan di buku tabungan'
+  },
+  {
+    id: 5,
+    icon: <IconTrashFilled size={50} color={colors["blue-button"]} />,
+    deskripsi: '5. Sampah didaur ulang oleh petugas Bank Sampah'
+  },
+]
+
+const bankSampah = [
+  {
+    id: 1,
+    icon: <IconMapPin size={50} color={colors['blue-button']} />,
+    deskripsi: 'Bank Sampah Sarana Gathi',
+    alamat: 'Jl. Ahmad Yani Utara No.453, Peguyangan, Kec. Denpasar Utara, Kota Denpasar, Bali 80115'
+  },
+  {
+    id: 2,
+    icon: <IconMapPin size={50} color={colors['blue-button']} />,
+    deskripsi: 'Bank Sampah BALI WASTU LESTARI',
+    alamat: 'Jl. Ahmad Yani Utara Gg. Garuda No.1, Peguyangan, Kec. Denpasar Utara, Kota Denpasar, Bali 80115'
+  },
+  {
+    id: 3,
+    icon: <IconMapPin size={50} color={colors['blue-button']} />,
+    deskripsi: 'Bank Sampah Jempiring Sari',
+    alamat: 'Jl. Gn. Lebah I No.9, Tegal Harum, Kec. Denpasar Bar., Kota Denpasar, Bali 80119'
+  },
+  {
+    id: 4,
+    icon: <IconMapPin size={50} color={colors['blue-button']} />,
+    deskripsi: 'Bank Sampah Sarana Gathi',
+    alamat: 'Jl. Ahmad Yani Utara No.453, Peguyangan, Kec. Denpasar Utara, Kota Denpasar, Bali 80115'
+  },
+]
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Box px={{ base: 'md', md: 100 }} >
+        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+          Pengelolaan Sampah (Bank Sampah)
+        </Text>
+        <Text px={20} ta={'center'} fz={'h4'}>Bank Sampah di Desa Darmasaba berfungsi sebagai tempat pengelolaan sampah yang bertujuan untuk mengurangi limbah dan memberikan manfaat ekonomi bagi masyarakat.</Text>
+      </Box>
+      <Box px={{ base: 'md', md: 100 }} pb={60}>
+        <Text fw={'bold'} py={10} px={28} fz={{ base: "lg", md: "xl" }} ta={"justify"}>
+          Mekanisme Bank Sampah di Desa Darmasaba:
+        </Text>
+        <SimpleGrid
+          cols={{
+            base: 1,
+            md: 1,
+          }}
+        >
+          {data.map((v, k) => {
+            return (
+              <Box key={k} px={28}>
+                <Paper p={20} bg={colors['white-trans-1']}>
+                  <Flex gap={20} align={'center'}>
+                    <Box>
+                      {v.icon}
+                    </Box>
+                    <Text fw={'bold'} fz={{ base: "lg", md: "xl" }} c={'black'}>{v.deskripsi}</Text>
+                  </Flex>
+                </Paper>
+              </Box>
+            )
+          })}
+        </SimpleGrid>
+      </Box>
+
+      <Box px={{ base: 'md', md: 100 }} >
+        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+          Keterangan Bank Sampah Terdekat
+        </Text>
+        <TextInput
+          mb={20}
+          radius={'xl'}
+          px={{ base: 70, md: 150 }}
+          leftSection={<IconSearch size={20} />}
+          placeholder='Cari Bank Sampah Terdekat'
+        />
+        <SimpleGrid
+          cols={{
+            base: 1,
+            md: 2,
+          }}>
+          <Box>
+            <SimpleGrid
+              cols={{
+                base: 1,
+                md: 1,
+              }}
+            >
+              {bankSampah.map((v, k) => {
+                return (
+                  <Box key={k} px={20}>
+                    <Paper p={20} bg={colors['white-trans-1']} radius={'lg'}>
+                      <Flex gap={20} align={'center'}>
+                        <Box>
+                          {v.icon}
+                        </Box>
+                        <Box>
+                          <Text fw={'bold'} fz={{ base: "lg", md: "xl" }} c={'black'}>
+                            {v.deskripsi}
+                          </Text>
+                          <Text fz={{ base: "md", md: "lg" }} c={'black'}>
+                            {v.alamat}
+                          </Text>
+                        </Box>
+                      </Flex>
+                    </Paper>
+                  </Box>
+                )
+              })}
+            </SimpleGrid>
+          </Box>
+          <Box style={{
+            position: 'relative',
+            width: '100%',
+            paddingBottom: '90.5%', // Aspek rasio 16:9 (atau gunakan '100%' untuk aspek rasio 1:1)
+            height: 0,
+            overflow: 'hidden'
+          }}>
+            <iframe
+              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31558.578355337635!2d115.18413781150647!3d-8.613053599999985!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2dd23ff3a9d0f0ab%3A0xb6bb54a820adbae6!2sBank%20Sampah%20Sarana%20Gathi!5e0!3m2!1sid!2sid!4v1743994947623!5m2!1sid!2sid"
+              style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '100%',
+                border: 0
+              }}
+              loading="lazy"
+              allowFullScreen
+            ></iframe>
+          </Box>
+        </SimpleGrid>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/lingkungan/program-penghijauan/page.tsx

@@ -0,0 +1,74 @@
+import colors from '@/con/colors';
+import { Box, Button, Center, Group, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { IconChristmasTreeFilled, IconHomeEco, IconShieldFilled, IconTrendingUp } from '@tabler/icons-react';
+import BackButton from '../../desa/layanan/_com/BackButto';
+
+const data = [
+  {
+    id: 1,
+    deskripsi: 'Lingkungan Sehat',
+    icon: <IconHomeEco size={80} color={colors['blue-button']} />,
+  },
+  {
+    id: 2,
+    deskripsi: 'Sumber Oksigen',
+    icon: <IconChristmasTreeFilled size={80} color={colors['blue-button']} />,
+  },
+  {
+    id: 3,
+    deskripsi: 'Ekonomi Berkelanjutan',
+    icon: <IconTrendingUp size={80} color={colors['blue-button']} />,
+  },
+  {
+    id: 4,
+    deskripsi: 'Mencegah Bencana',
+    icon: <IconShieldFilled size={80} color={colors['blue-button']} />,
+  },
+]
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Box px={{ base: 'md', md: 100 }} >
+        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+          Program Penghijauan Desa
+        </Text>
+        <Text px={20} ta={'center'} fz={'h4'}>Program Penghijauan Desa bertujuan untuk meningkatkan kesadaran masyarakat akan pentingnya lingkungan hijau melalui penanaman pohon dan perawatan tanaman.</Text>
+      </Box>
+      <Box px={{ base: 'md', md: 100 }} pb={60}>
+        <Text c={colors['blue-button']} fw={'bold'} py={10} px={28} fz={{ base: "lg", md: "xl" }} ta={"justify"}>
+          Manfaat Program Penghijauan
+        </Text>
+        <SimpleGrid
+          cols={{
+            base: 1,
+            md: 4
+          }}>
+          {data.map((v, k) => {
+            return (
+              <Box key={k}>
+                <Paper p={20} bg={colors['white-trans-1']}>
+                  <Stack flex={5}>
+                    <Center>
+                      {v.icon}
+                    </Center>
+                    <Box>
+                      <Text fz={{ base: "lg", md: "xl" }} ta={'center'} c={colors['blue-button']} fw={'bold'}>{v.deskripsi}</Text>
+                    </Box>
+                    <Group justify='center'>
+                    <Button bg={colors['blue-button']}>Detail</Button>
+                    </Group>
+                  </Stack>
+                </Paper>
+              </Box>
+            )
+          })}
+        </SimpleGrid>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/pendidikan/beasiswa-desa/page.tsx

@@ -0,0 +1,151 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Center, Group, Image, Paper, SimpleGrid, Stack, Stepper, StepperStep, Text, Title } from '@mantine/core';
+import { useState } from 'react';
+import BackButton from '../../desa/layanan/_com/BackButto';
+
+const dataBeasiswa = [
+  {
+    id: 1,
+    nama: 'Penerima Beasiswa',
+    jumlah: '250+'
+  },
+  {
+    id: 2,
+    nama: 'Peluang Kelulusan',
+    jumlah: '90%'
+  },
+  {
+    id: 3,
+    nama: 'Dana Tersalurkan',
+    jumlah: '1.5M'
+  },
+]
+const dataProgram = [
+  {
+    id: 1,
+    judul: "Pelatihan SoftSkill",
+    deskripsi: "Program pengembangan diri untuk mempersiapkan karir masa depan",
+  },
+  {
+    id: 2,
+    judul: "Peningkatan Akses Pendidikan ",
+    deskripsi: "Program yang menjangkau masyarakat kurang mampu secara finansial, mengurangi angka putus sekolah",
+  },
+  {
+    id: 3,
+    judul: "Pendampingan Intensif",
+    deskripsi: "Program dengan mentor berpengalaman yang membimbing dalam perjalanan akademik",
+  }
+]
+function Page() {
+  const [active, setActive] = useState(1);
+  const nextStep = () => setActive((current) => (current < 5 ? current + 1 : current));
+  const prevStep = () => setActive((current) => (current > 0 ? current - 1 : current));
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      {/* Page 1 */}
+      <Box px={{ base: 'md', md: 100 }} pb={50}>
+        <SimpleGrid
+          cols={{
+            base: 1,
+            md: 2
+          }}
+        >
+          <Box>
+            <Title fz={55} fw={'bold'} c={colors['blue-button']}>
+              Wujudkan Mimpi Pendidikanmu di Desa Darmasaba
+            </Title>
+            <Text fz={'xl'} >
+              Program beasiswa komprehensif untuk mendukung pendidikan berkualitas bagi putra-putri Desa Darmasaba.
+            </Text>
+            <SimpleGrid
+              mt={10}
+              cols={{
+                base: 1,
+                md: 2
+              }}
+            >
+              <Button bg={colors['blue-button']} fz={'lg'}>Daftar Sekarang</Button>
+              <Button bg={colors['blue-button-trans']} fz={'lg'}>Pelajari Lebih Lanjut</Button>
+            </SimpleGrid>
+          </Box>
+          <Box>
+            <Image alt='' src={'/api/img/beasiswa-siswa.png'} />
+          </Box>
+        </SimpleGrid>
+        <SimpleGrid mt={30}
+          cols={{
+            base: 1,
+            md: 3
+          }}
+        >
+          {dataBeasiswa.map((v, k) => {
+            return (
+              <Box key={k}>
+                <Paper p={'xl'} bg={colors['white-trans-1']}>
+                  <Title ta={'center'} fz={55} fw={'bold'} c={colors['blue-button']}>
+                    {v.jumlah}
+                  </Title>
+                  <Text ta={'center'}>
+                    {v.nama}
+                  </Text>
+                </Paper>
+              </Box>
+            )
+          })}
+        </SimpleGrid>
+      </Box>
+      {/* ---- */}
+      <Box px={{ base: 'md', md: 100 }} pb={20}>
+        <Title pb={20} ta={'center'} order={1} fw={'bold'} c={colors['blue-button']}>
+          Keunggulan Program
+        </Title>
+        <Paper p={'xl'} bg={colors['white-trans-1']}>
+          <SimpleGrid
+            cols={{
+              base: 1,
+              md: 3
+            }}
+          >
+            {dataProgram.map((v, k) => {
+              return (
+                <Box key={k}>
+                  <Title order={2} fw={'bold'} c={colors['blue-button']}>
+                    {v.judul}
+                  </Title>
+                  <Text>
+                    {v.deskripsi}
+                  </Text>
+                  {/* <Divider orientation="vertical" size="md" h="auto" /> */}
+                </Box>
+              )
+            })}
+          </SimpleGrid>
+        </Paper>
+        <Title py={20} ta={'center'} order={1} fw={'bold'} c={colors['blue-button']}>
+          Timeline Pendaftaran
+        </Title>
+        <Center>
+          <Stepper mt={20} active={active} onStepClick={setActive} orientation="vertical" allowNextStepsSelect={false}>
+            <StepperStep label="Pembukaan Pendaftaran 1 Maret 2025" description="" />
+            <StepperStep label="Seleksi Administrasi 15 Maret 2025" description="" />
+            <StepperStep label="Tes Potensi Akademik 1 April 2025" description="" />
+            <StepperStep label="Wawancara 15 April 2025" description="" />
+            <StepperStep label="Pengumuman 1 Mei 2025" description="" />
+          </Stepper>
+        </Center>
+
+        <Group justify="center" mt="xl">
+          <Button variant="default" onClick={prevStep}>Back</Button>
+          <Button onClick={nextStep}>Next step</Button>
+        </Group>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/pendidikan/bimbingan-belajar-desa/page.tsx

@@ -0,0 +1,71 @@
+import colors from '@/con/colors';
+import { Stack, Box, Title, Text, SimpleGrid, Paper, List, ListItem } 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 px={{ base: 'md', md: 100 }} pb={50}>
+        <Box>
+          <Title ta={'center'} order={1} fw={'bold'} c={colors['blue-button']}>
+            Bimbingan Belajar Desa
+          </Title>
+          <Text pb={20} ta={'justify'} fz={'xl'} px={{ base: 'md', md: 100 }}>
+          Bimbingan Belajar Desa merupakan program unggulan untuk membantu siswa-siswi di Desa Darmasaba dalam memahami pelajaran sekolah, meningkatkan prestasi akademik, serta membangun semangat belajar yang tinggi sejak dini.
+          </Text>
+        </Box>
+        <SimpleGrid
+          cols={{
+            base: 1,
+            md: 3
+          }}
+        >
+          <Box>
+            <Paper p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
+              <Title order={2} fw={'bold'} c={colors['blue-button']}>
+                Tujuan Program
+              </Title>
+              <List>
+                <ListItem fz={'h4'}>Memberikan pendampingan belajar secara gratis bagi siswa SD hingga SMP</ListItem>
+                <ListItem fz={'h4'}>Membantu siswa dalam menghadapi ujian dan menyelesaikan tugas sekolah</ListItem>
+                <ListItem fz={'h4'}>Menumbuhkan kepercayaan diri dan kemandirian dalam belajar</ListItem>
+                <ListItem fz={'h4'}>Meningkatkan kesetaraan pendidikan untuk seluruh anak desa</ListItem>
+              </List>
+            </Paper>
+          </Box>
+          <Box>
+            <Paper h={{base: 0, md: 324}} p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
+              <Title order={2} fw={'bold'} c={colors['blue-button']}>
+                Lokasi dan Jadwal
+              </Title>
+              <List>
+                <ListItem fz={'h4'}>Lokasi: Balai Banjar / Balai Desa Darmasaba / Perpustakaan Desa</ListItem>
+                <ListItem fz={'h4'}>Jadwal: Setiap hari Senin, Rabu, dan Jumat pukul 16.00–18.00 WITA</ListItem>
+                <ListItem fz={'h4'}>Peserta: Terbuka untuk semua siswa SD–SMP di wilayah desa</ListItem>
+              </List>
+            </Paper>
+          </Box> 
+          <Box>
+            <Paper h={{base: 0, md: 324}} p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
+              <Title order={2} fw={'bold'} c={colors['blue-button']}>
+              Fasilitas yang Disediakan
+              </Title>
+              <List>
+                <ListItem fz={'h4'}>Buku-buku pelajaran dan alat tulis</ListItem>
+                <ListItem fz={'h4'}>Ruang belajar nyaman dan kondusif</ListItem>
+                <ListItem fz={'h4'}>Modul latihan dan pendampingan tugas</ListItem>
+                <ListItem fz={'h4'}>Minuman ringan dan dukungan motivasi belajar</ListItem>
+              </List>
+            </Paper>
+          </Box> 
+        </SimpleGrid>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/pendidikan/data-pendidikan/page.tsx

@@ -0,0 +1,74 @@
+import colors from '@/con/colors';
+import { Stack, Box, Title, Paper } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../desa/layanan/_com/BackButto';
+import { BarChart } from '@mantine/charts';
+
+const data = [
+  {
+    kategori: 'Jumlah penduduk usia 15-64 th yang tidak bisa baca tulis',
+    jumlah: 30
+  },
+  {
+    kategori: 'Jumlah penduduk tidak tamat SD/sederajat',
+    jumlah: 25
+  },
+  {
+    kategori: 'Jumlah penduduk tidak tamat SLTP/Sederajat',
+    jumlah: 20
+  },
+  {
+    kategori: 'Jumlah penduduk tidak tamat SLTA/Sederajat',
+    jumlah: 10
+  },
+  {
+    kategori: 'Jumlah penduduk tamat Sarjana/S1',
+    jumlah: 15
+  },
+  {
+    kategori: 'Jumlah penduduk tamat Pascsarjana',
+    jumlah: 30
+  },
+
+]
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Box px={{ base: 'md', md: 100 }} >
+        <Box pb={20}>
+          <Title ta={'center'} order={1} fw={'bold'} c={colors['blue-button']}>
+            Data Pendidikan
+          </Title>
+        </Box>
+        <Paper p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
+          <BarChart
+            p={'100'}
+            h={600}
+            data={data}
+            dataKey="kategori"
+            series={[
+              { name: 'jumlah', color: 'violet.6' },
+            ]}
+            tickLine="y"
+              xAxisProps={{
+                angle: -45,  // Rotate labels by -45 degrees
+                textAnchor: 'end',  // Anchor text to the end for better alignment
+                height: 100,  // Increase height for rotated labels
+                interval: 0,  // Show all labels
+                style: { 
+                  fontSize: '12px',  // Adjust font size if needed
+                  overflow: 'visible',
+                  whiteSpace: 'nowrap'
+                }
+              }}
+          />
+        </Paper>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/pendidikan/info-sekolah-paud/page.tsx

@@ -0,0 +1,105 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Center, Group, Paper, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { IconChalkboard, IconMicroscope, IconSchool, IconSearch } from '@tabler/icons-react';
+import BackButton from '../../desa/layanan/_com/BackButto';
+import { motion } from 'framer-motion';
+
+
+const dataSekolah = [
+  {
+    id: 1,
+    icon: <IconChalkboard size={55} color={colors["blue-button"]} />,
+    jumlah: 15,
+    nama: 'Lembaga Pendidikan'
+  },
+  {
+    id: 2,
+    icon: <IconSchool size={55} color={colors["blue-button"]} />,
+    jumlah: 3209,
+    nama: 'Siswa Terdaftar'
+  },
+  {
+    id: 3,
+    icon: <IconMicroscope size={55} color={colors["blue-button"]} />,
+    jumlah: 285,
+    nama: 'Tenaga Pengajar'
+  },
+]
+
+
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Box px={{ base: 'md', md: 100 }} pb={20}>
+        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+          Cari Informasi Sekolah
+        </Text>
+        <Group justify='center' pb={20}>
+          <TextInput
+            w={{ base: "50%", md: "70%" }}
+            placeholder='Cari Sekolah...'
+            rightSection={
+              <Button
+                size="xs"
+                style={{ height: '80%', marginRight: '5px' }}
+                bg={colors["blue-button"]}
+              >
+                Cari
+              </Button>
+            }
+            rightSectionWidth={70}
+            leftSection={<IconSearch size={20} />}
+          />
+        </Group>
+        <Group mb={20} gap="md" justify='center' wrap="wrap">
+          <Paper bg={colors['blue-button']} radius="xl" py={5} px={20}>
+            <Text c={colors['white-1']} size="sm">
+              Semua
+            </Text>
+          </Paper>
+          {['TK/PAUD', 'SD', 'SMP', 'SMA/SMK'].map((kategori) => (
+            <Paper key={kategori} bg={'gray'} radius="xl" py={5} px={20}>
+              <Text c={colors['white-1']} size="sm">
+                {kategori}
+              </Text>
+            </Paper>
+          ))}
+        </Group>
+        <SimpleGrid
+          cols={{
+            base: 1,
+            md: 3
+          }}
+        >
+          {dataSekolah.map((v, k) => {
+            return (
+              <Box key={k}>
+                <motion.div
+                  whileHover={{ scale: 1.05 }}
+                  whileTap={{ scale: 0.8 }}
+                  style={{ width: '100%', height: '100%' }}
+                >
+                  <Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
+                    <Stack>
+                      <Center>
+                        {v.icon}
+                      </Center>
+                      <Text c={colors["blue-button"]} ta={'center'} fw={'bold'} fz={{ base: "h2", md: "h1" }}>{v.jumlah}</Text>
+                      <Text c={colors["blue-button"]} ta={'center'} fw={'bold'}>{v.nama}</Text>
+                    </Stack>
+                  </Paper>
+                </motion.div>
+              </Box>
+            )
+          })}
+        </SimpleGrid>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/pendidikan/pendidikan-non-formal/page.tsx

@@ -0,0 +1,98 @@
+import colors from '@/con/colors';
+import { Stack, Box, Title, Text, SimpleGrid, Paper, List, ListItem } 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 px={{ base: 'md', md: 100 }} pb={50}>
+        <Box>
+          <Title ta={'center'} order={1} fw={'bold'} c={colors['blue-button']}>
+            Pendidikan Non Formal
+          </Title>
+          <Text pb={20} ta={'justify'} fz={'xl'} px={{ base: 'md', md: 100 }}>
+            Pendidikan Non Formal adalah bentuk pendidikan di luar sekolah yang diselenggarakan secara terstruktur dan bertujuan memberikan keterampilan, pengetahuan, serta pengembangan karakter masyarakat dari berbagai usia dan latar belakang.
+          </Text>
+        </Box>
+        <SimpleGrid
+          cols={{
+            base: 1,
+            md: 2
+          }}
+        >
+          <Box>
+            <Paper p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
+              <Title order={2} fw={'bold'} c={colors['blue-button']}>
+                Tujuan Program
+              </Title>
+              <List>
+                <ListItem fz={'h4'}>Memberikan kesempatan belajar yang fleksibel bagi warga desa</ListItem>
+                <ListItem fz={'h4'}>Meningkatkan keterampilan hidup dan kemandirian ekonomi</ListItem>
+                <ListItem fz={'h4'}>Mendorong partisipasi masyarakat dalam pembangunan desa</ListItem>
+                <ListItem fz={'h4'}>Mengurangi angka putus sekolah dan meningkatkan kualitas SDM</ListItem>
+              </List>
+            </Paper>
+          </Box>
+          <Box>
+            <Paper h={{ base: 0, md: 210 }} p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
+              <Title order={2} fw={'bold'} c={colors['blue-button']}>
+                Tempat Kegiatan
+              </Title>
+              <List>
+                <ListItem fz={'h4'}>Balai Desa Darmasaba</ListItem>
+                <ListItem fz={'h4'}>TPK, Perpustakaan Desa, atau Posyandu</ListItem>
+                <ListItem fz={'h4'}>Bisa juga dilakukan secara mobile atau door to door</ListItem>
+              </List>
+            </Paper>
+          </Box>
+        </SimpleGrid>
+        <Box py={20}>
+          <Paper p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
+            <Title order={2} fw={'bold'} c={colors['blue-button']}>
+              Jenis Program yang Diselenggarakan
+            </Title>
+            <Text fz={'h4'}>Program Pendidikan Non Formal yang diselenggarakan di Desa Darmasaba meliputi:</Text>
+            <Stack>
+              <Box>
+                <Text fz={'h4'}> 1) Keaksaraan Fungsional</Text>
+                <List>
+                  <ListItem fz={'h4'}>Untuk warga yang belum bisa membaca dan menulis</ListItem>
+                </List>
+              </Box>
+              <Box>
+                <Text fz={'h4'}> 2) Pendidikan Kesetaraan (Paket A, B, C)</Text>
+                <List>
+                  <ListItem fz={'h4'}>Setara SD, SMP, dan SMA bagi yang tidak menyelesaikan pendidikan formal</ListItem>
+                </List>
+              </Box>
+              <Box>
+                <Text fz={'h4'}> 3) Pelatihan Keterampilan</Text>
+                <List>
+                  <ListItem fz={'h4'}>Menjahit, memasak, sablon, pertanian, peternakan, hingga teknologi digital</ListItem>
+                </List>
+              </Box>
+              <Box>
+                <Text fz={'h4'}> 4) Kursus & Pelatihan Soft Skill</Text>
+                <List>
+                  <ListItem fz={'h4'}>Public speaking, pengelolaan keuangan, kepemimpinan pemuda</ListItem>
+                </List>
+              </Box>
+              <Box>
+                <Text fz={'h4'}> 5) Pendidikan Keluarga & Parenting</Text>
+                <List>
+                  <ListItem fz={'h4'}>Untuk membekali orang tua dalam mendampingi tumbuh kembang anak</ListItem>
+                </List>
+              </Box>
+            </Stack>
+          </Paper>
+        </Box>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/pendidikan/perpustakaan-digital/login/page.tsx

@@ -0,0 +1,56 @@
+import colors from '@/con/colors';
+import { Box, Button, Center, Flex, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconUserFilled } from '@tabler/icons-react';
+import Link from 'next/link';
+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 px={{ base: 'md', md: 100 }} >
+        <Center>
+          <Image src={"/api/img/darmasaba-icon.png"} alt="" w={80} />
+        </Center>
+        <Box>
+          <Title ta={'center'} order={1} fw={'bold'} c={colors['blue-button']}>
+            E-Book Desa Darmasaba
+          </Title>
+          <Text ta={'center'} fz={'h4'} fw={'bold'} c={colors['blue-button']}>
+            Silahkan masukkan akun anda untuk menjelajahi berbagai macam buku di perpustakaan digital
+          </Text>
+        </Box>
+      </Box>
+      <Box px={{ base: 'md', md: 100 }} pb={50}>
+        <Group justify='center'>
+          <Paper p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
+            <Stack align='center'>
+              <Title order={2} fw={'bold'} c={colors['blue-button']}>
+                Login
+              </Title>
+              <IconUserFilled size={80} color={colors['blue-button']} />
+              <Box>
+                <Text c={colors['blue-button']} fw={'bold'}>Masuk Untuk Akses Lebih Banyak Buku</Text>
+                <TextInput placeholder='Email' />
+                <TextInput py={20} placeholder='Password' />
+                <Box pb={20} >
+                <Button component={Link} href={'/darmasaba/pendidikan/perpustakaan-digital'} fullWidth bg={colors['blue-button']} radius={'xl'}>Masuk</Button>
+                </Box>
+                <Flex justify={'center'} align={'center'}>
+                  <Text>Belum punya akun? </Text>
+                  <Button variant='transparent' component={Link} href={'/darmasaba/pendidikan/perpustakaan-digital/registrasi'}>
+                  <Text c={colors['blue-button']} fw={'bold'}>Registrasi</Text>
+                  </Button>
+                </Flex>
+              </Box>
+            </Stack>
+          </Paper>
+        </Group>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/pendidikan/perpustakaan-digital/page.tsx

@@ -0,0 +1,111 @@
+'use client'
+import colors from '@/con/colors';
+import { ActionIcon, Box, Button, Center, Flex, Group, Image, Paper, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { IconSearch, IconUser } from '@tabler/icons-react';
+import { motion } from 'framer-motion';
+import BackButton from '../../desa/layanan/_com/BackButto';
+import Link from 'next/link';
+
+
+const dataSekolah = [
+  {
+    id: 1,
+    gambar: '/api/img/buku-1.png',
+    judul: 'Angkasa dan 56 Hari',
+    deskripsi: 'Angkasa dan 56 hari mengisahkan tentang sebuah perjuangan perihal asa yang belum usai. Tentang cinta pertama yang secara tiba-tiba menghilang dari kehidupan.'
+  },
+  {
+    id: 2,
+    gambar: '/api/img/buku-2.png',
+    judul: 'Sayuran Organik',
+    deskripsi: 'Buku ini membahas cara menanam sayuran secara organik, jenis-jenis sayuran organik, dan cara mengatasi hama dan penyakit. '
+  },
+  {
+    id: 3,
+    gambar: '/api/img/buku-3.png',
+    judul: 'Bali Tempo Dulu',
+    deskripsi: 'Buku Bali Tempo Doeloe oleh Adrian Vickers berisi berbagai catatan perjalanan yang menggambarkan kehidupan sosial budaya Bali di masa lampau.'
+  },
+]
+
+
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <Flex justify={'space-between'} align={'center'}>
+          <BackButton />
+          <ActionIcon variant='transparent' component={Link} href={'/darmasaba/pendidikan/perpustakaan-digital/login'}>
+            <IconUser color={colors["blue-button"]} size={30} />
+          </ActionIcon>
+        </Flex>
+      </Box>
+      <Box px={{ base: 'md', md: 100 }} pb={20}>
+        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+          E-Book Desa Darmasaba
+        </Text>
+        <Group justify='center' pb={20}>
+          <TextInput
+            w={{ base: "50%", md: "70%" }}
+            placeholder='Cari Buku...'
+            rightSection={
+              <Button
+                size="xs"
+                style={{ height: '80%', marginRight: '5px' }}
+                bg={colors["blue-button"]}
+              >
+                Cari
+              </Button>
+            }
+            rightSectionWidth={70}
+            leftSection={<IconSearch size={20} />}
+          />
+        </Group>
+        <Group mb={20} gap="md" justify='center' wrap="wrap">
+          <Paper bg={colors['blue-button']} radius="xl" py={5} px={20}>
+            <Text c={colors['white-1']} size="sm">
+              Semua
+            </Text>
+          </Paper>
+          {['Non Fiksi', 'Sejarah', 'Edukasi', 'Fiksi'].map((kategori) => (
+            <Paper key={kategori} bg={'gray'} radius="xl" py={5} px={20}>
+              <Text c={colors['white-1']} size="sm">
+                {kategori}
+              </Text>
+            </Paper>
+          ))}
+        </Group>
+        <SimpleGrid
+          cols={{
+            base: 1,
+            md: 3
+          }}
+        >
+          {dataSekolah.map((v, k) => {
+            return (
+              <Box key={k}>
+                <motion.div
+                  whileHover={{ scale: 1.05 }}
+                  whileTap={{ scale: 0.8 }}
+                  style={{ width: '100%', height: '100%' }}
+                >
+                  <Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
+                    <Stack>
+                      <Center>
+                        <Image src={v.gambar} alt='' w={{ base: 390, md: 1000 }}/>
+                      </Center>
+                      <Text c={colors["blue-button"]} ta={'center'} fw={'bold'} fz={{ base: "h2", md: "h1" }}>{v.judul}</Text>
+                      <Text c={colors["blue-button"]} ta={'center'} fw={'bold'}>{v.deskripsi}</Text>
+                    </Stack>
+                  </Paper>
+                </motion.div>
+              </Box>
+            )
+          })}
+        </SimpleGrid>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/pendidikan/perpustakaan-digital/registrasi/page.tsx

@@ -0,0 +1,66 @@
+import colors from '@/con/colors';
+import { Box, Button, Center, Checkbox, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import Link from 'next/link';
+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 px={{ base: 'md', md: 100 }} >
+        <Center>
+          <Image src={"/api/img/darmasaba-icon.png"} alt="" w={80} />
+        </Center>
+        <Box>
+          <Title ta={'center'} order={1} fw={'bold'} c={colors['blue-button']}>
+            E-Book Desa Darmasaba
+          </Title>
+          <Text ta={'center'} fz={'h4'} fw={'bold'} c={colors['blue-button']}>
+            Silahkan lengkapi data diri anda untuk mengakses e-book desa
+          </Text>
+        </Box>
+      </Box>
+      <Box px={{ base: 'md', md: 100 }} pb={50}>
+        <Group justify='center'>
+          <Paper p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
+            <Stack align='center'>
+              <Title order={2} fw={'bold'} c={colors['blue-button']}>
+                Registrasi
+              </Title>
+              <Box>
+                <TextInput placeholder='Nama Lengkap'
+                  label='Nama Lengkap'
+                />
+                <TextInput py={10} placeholder='Email'
+                  label='Email'
+                />
+                <TextInput placeholder='day / month / year'
+                  label='Tanggal Lahir'
+                />
+                <TextInput py={10} placeholder='08xx-xxxx-xxxx'
+                  label='Nomor Telepon'
+                />
+                <TextInput pb={10} placeholder='Password'
+                  label='Password'
+                />
+                <Box pb={10}>
+                  <Checkbox
+                    
+                    label="Saya menyetujui syarat dan ketentuan yang berlaku"
+                  />
+                </Box>
+                <Box pb={20} >
+                  <Button component={Link} href={'/darmasaba/pendidikan/perpustakaan-digital'} fullWidth bg={colors['blue-button']} radius={'xl'}>Daftar</Button>
+                </Box>
+              </Box>
+            </Stack>
+          </Paper>
+        </Group>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/pendidikan/program-pendidikan-anak/page.tsx

@@ -0,0 +1,59 @@
+import colors from '@/con/colors';
+import { Stack, Box, Title, Text, SimpleGrid, Paper, List, ListItem } 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 px={{ base: 'md', md: 100 }} pb={50}>
+        <Box>
+          <Title ta={'center'} order={1} fw={'bold'} c={colors['blue-button']}>
+            Program Pendidikan Anak
+          </Title>
+          <Text pb={20} ta={'justify'} fz={'xl'} px={{ base: 'md', md: 100 }}>
+            Desa Darmasaba berkomitmen untuk menciptakan generasi muda yang cerdas, berkarakter, dan berdaya saing melalui berbagai program pendidikan yang inklusif dan berkelanjutan. Pendidikan anak menjadi pondasi utama dalam mewujudkan masa depan desa yang lebih baik.
+          </Text>
+        </Box>
+        <SimpleGrid
+          cols={{
+            base: 1,
+            md: 2
+          }}
+        >
+          <Box>
+            <Paper p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
+              <Title order={2} fw={'bold'} c={colors['blue-button']}>
+                Tujuan Program
+              </Title>
+              <List>
+                <ListItem fz={'h4'}>Meningkatkan akses pendidikan yang merata dan berkualitas</ListItem>
+                <ListItem fz={'h4'}>Menumbuhkan semangat belajar sejak dini</ListItem>
+                <ListItem fz={'h4'}>Membentuk karakter anak yang berakhlak dan berwawasan lingkungan</ListItem>
+                <ListItem fz={'h4'}>Mendukung tumbuh kembang anak melalui pendekatan pendidikan yang holistik</ListItem>
+              </List>
+            </Paper>
+          </Box>
+          <Box>
+            <Paper h={{base: 0, md: 239}} p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
+              <Title order={2} fw={'bold'} c={colors['blue-button']}>
+                Program Unggulan
+              </Title>
+              <List>
+                <ListItem fz={'h4'}>Bimbingan Belajar Gratis: Untuk siswa kurang mampu</ListItem>
+                <ListItem fz={'h4'}>Gerakan Literasi Desa: Meningkatkan minat baca sejak dini</ListItem>
+                <ListItem fz={'h4'}>Pelatihan Digital untuk Anak dan Remaja</ListItem>
+                <ListItem fz={'h4'}>Beasiswa Anak Berprestasi & Kurang Mampu</ListItem>
+              </List>
+            </Paper>
+          </Box> 
+        </SimpleGrid>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/con/navbar-list-menu.ts

@@ -7,42 +7,42 @@ const navbarListMenu = [
             {
                 id: "1.1",
                 name: "Profile PPID",
-                href: "/darmasaba/ppid/profile"
+                href: "/darmasaba/ppid/profile-ppid"
             },
             {
                 id: "1.2",
                 name: "Struktur PPID",
-                href: "/darmasaba/ppid/struktur"
+                href: "/darmasaba/ppid/struktur-ppid"
             },
             {
                 id: "1.3",
                 name: "Visi Misi PPID",
-                href: "/darmasaba/ppid/visimisi"
+                href: "/darmasaba/ppid/visi-misi-ppid"
             },
             {
                 id: "1.4",
                 name: "Dasar Hukum",
-                href: "/darmasaba/ppid/dasarhukum"
+                href: "/darmasaba/ppid/dasar-hukum"
             },
             {
                 id: "1.5",
                 name: "Permohonan Informasi Publik",
-                href: "/darmasaba/ppid/informasi"
+                href: "/darmasaba/ppid/permohonan-informasi-publik"
             },
             {
                 id: "1.6",
                 name: "Permohonan Keberatan Informasi Publik",
-                href: "/darmasaba/ppid/keberatan"
+                href: "/darmasaba/ppid/permohonan-keberatan-informasi-publik"
             },
             {
                 id: "1.7",
                 name: "Daftar Informasi Publik Desa Darmasaba",
-                href: "/darmasaba/ppid/daftar"
+                href: "/darmasaba/ppid/daftar-informasi-publik-desa-darmasaba"
             },
             {
                 id: "1.8",
                 name: "IKM Desa Darmasaba",
-                href: "/darmasaba/ppid/ikm"
+                href: "/darmasaba/ppid/ikm-desa-darmasaba"
             },
 
         ]
@@ -104,7 +104,7 @@ const navbarListMenu = [
             {
                 id: "3.2",
                 name: "Data Kesehatan Warga",
-                href: "/darmasaba/kesehatan/datakesehatan"
+                href: "/darmasaba/kesehatan/data-kesehatan-warga"
             },
             {
                 id: "3.3",
@@ -114,7 +114,7 @@ const navbarListMenu = [
             {
                 id: "3.4",
                 name: "Program Kesehatan",
-                href: "/darmasaba/kesehatan/program"
+                href: "/darmasaba/kesehatan/program-kesehatan"
             },
             {
                 id: "3.5",
@@ -141,7 +141,7 @@ const navbarListMenu = [
             {
                 id: "4.1",
                 name: "Keamanan Lingkungan (Pecalang/Patwal)",
-                href: "/darmasaba/keamanan/keamanan-lingkungan"
+                href: "/darmasaba/keamanan/keamanan-lingkungan-pecalang-patwal"
             },
             {
                 id: "4.2",
@@ -182,43 +182,48 @@ const navbarListMenu = [
             },
             {
                 id: "5.2",
-                name: "Koperasi",
-                href: "/darmasaba/ekonomi/koperasi"
+                name: "Lowongan Kerja Lokal",
+                href: "/darmasaba/ekonomi/lowongan-kerja-lokal"
             },
             {
                 id: "5.3",
-                name: "UMKM",
-                href: "/darmasaba/ekonomi/umkm"
+                name: "Struktur Organisasi dan SK Pengurus BUMDesa",
+                href: "/darmasaba/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa"
             },
             {
                 id: "5.4",
-                name: "Data Ekonomi Desa",
-                href: "/darmasaba/ekonomi/data-ekonomi-desa"
+                name: "PADesa (Pendapatan Asli Desa)",
+                href: "/darmasaba/ekonomi/PADesa-pendapatan-asli-desa"
             },
             {
                 id: "5.5",
-                name: "Pelatihan Wirausaha",
-                href: "/darmasaba/ekonomi/pelatihan-wirausaha"
+                name: "Jumlah Pengangguran 2024-2025",
+                href: "/darmasaba/ekonomi/jumlah-pengangguran-2024-2025"
             },
             {
                 id: "5.6",
-                name: "Bantuan & Pendanaan",
-                href: "/darmasaba/ekonomi/bantuan-pendanaan"
+                name: "Jumlah penduduk usia kerja yang menganggur",
+                href: "/darmasaba/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur"
             },
             {
                 id: "5.7",
-                name: "Investasi Desa",
-                href: "/darmasaba/ekonomi/investasi-desa"
+                name: "Jumlah Penduduk Miskin 2024-2025",
+                href: "/darmasaba/ekonomi/jumlah-penduduk-miskin-2024-2025"
             },
             {
                 id: "5.8",
-                name: "Produk Unggulan",
-                href: "/darmasaba/ekonomi/produk-unggulan"
+                name: "Program Kemiskinan",
+                href: "/darmasaba/ekonomi/program-kemiskinan"
             },
             {
                 id: "5.9",
-                name: "Lowongan Kerja Lokal",
-                href: "/darmasaba/ekonomi/lowongan-kerja-lokal"
+                name: "Sektor Unggulan Desa",
+                href: "/darmasaba/ekonomi/sektor-unggulan-desa"
+            },
+            {
+                id: "5.10",
+                name: "Demografi Pekerjaan",
+                href: "/darmasaba/ekonomi/demografi-pekerjaan"
             }
         ]
     }, {
@@ -326,8 +331,13 @@ const navbarListMenu = [
             },
             {
                 id: "8.6",
-                name: "Perpustakaan Desa",
-                href: "/darmasaba/pendidikan/perpustakaan-desa"
+                name: "Perpustakaan Digital",
+                href: "/darmasaba/pendidikan/perpustakaan-digital"
+            },
+            {
+                id: "8.7",
+                name: "Data Pendidikan",
+                href: "/darmasaba/pendidikan/data-pendidikan"
             }
         ]
     }