Dashboard Admin

Yang Sudah dikerjakan:
- Feature Desa :
- Pengumuman :
- Pada bagian kategori pengumuman sudah dibuatkan konten sesuai dengan kategorinya.
- Pada bagian pengumuman penting juga sudah dibuatkan kontennya
- Gallery:
- Sudah dibuatkan kontennya sesuai dengan tabnya

package.json

@@ -1,6 +1,6 @@
 {
   "name": "desa-darmasaba",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",
@@ -21,6 +21,7 @@
     "@mantine/carousel": "^7.16.2",
     "@mantine/charts": "^7.17.1",
     "@mantine/core": "^7.16.2",
+    "@mantine/dates": "^7.17.4",
     "@mantine/dropzone": "^7.17.0",
     "@mantine/hooks": "^7.16.2",
     "@paljs/types": "^8.1.0",
@@ -32,11 +33,13 @@
     "animate.css": "^4.1.1",
     "bun": "^1.2.2",
     "chart.js": "^4.4.8",
+    "dayjs": "^1.11.13",
     "elysia": "^1.2.12",
     "embla-carousel-autoplay": "^8.5.2",
     "embla-carousel-react": "^7.1.0",
     "framer-motion": "^12.4.1",
     "get-port": "^7.1.0",
+    "jotai": "^2.12.3",
     "lodash": "^4.17.21",
     "motion": "^12.4.1",
     "nanoid": "^5.1.0",

prisma/schema.prisma

@@ -17,3 +17,8 @@ model Potensi {
   name String @unique
 }
 
+model LandingPage_Layanan {
+  id   String @id @default(cuid())
+  deksripsi String 
+}
+

prisma/seed.ts

@@ -33,6 +33,22 @@ import prisma from '@/lib/prisma';
     }
 
     console.log("potensi success ...")
+
+    // for (const lpl of ) {
+    //     await prisma.landingPage_Layanan.upsert({
+    //         where: {
+    //             id: lpl.id
+    //         },
+    //         update: {
+    //             deksripsi: lpl.deksripsi
+    //         },
+    //         create: {
+    //             deksripsi: lpl.deksripsi
+    //         }
+    //     })
+    // }
+
+    // console.log("landing page success ...")
 })().then(() => prisma.$disconnect()).catch((e) => {
     console.error(e)
     prisma.$disconnect()

src/app/admin/(dashboard)/desa/berita/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Berita
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/desa/gallery/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Gallery
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/desa/layanan/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Layanan
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/desa/penghargaan/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Penghargaan
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/desa/pengumuman/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Pengumuman
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/desa/potensi/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Potensi
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/desa/profile/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Profile
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      PADesa-pendapatan-asli-desa
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/ekonomi/demografi-pekerjaan/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      demografi-pekerjaan
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-miskin-2024-2025/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      jumlah-penduduk-miskin-2024-2025
+    </div>
+  );
+}
+
+export default Page;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      jumlah-penduduk-usia-kerja-yang-menganggur
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran-2024-2025/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      jumlah-pengangguran-2024-2025
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/ekonomi/lowongan-kerja-lokal/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+     lowongan-kerja-lokal
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/ekonomi/pasar-desa/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      pasar-desa
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/ekonomi/program-kemiskinan/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      program-kemiskinan
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/ekonomi/sektor-unggulan-desa/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      sektor-unggulan-desa
+    </div>
+  );
+}
+
+export default Page;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      struktur-organisasi-dan-sk-pengurus-bumdesa
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/inovasi/ajukan-ide-inovatif/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      ajukan-ide-inovatif
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      desa-digital-smart-village
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      info-teknologi-tepat-guna
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      kolaborasi-inovasi
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/inovasi/layanan-online-desa/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      layanan-online-desa
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/inovasi/program-kreatif-desa/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      program-kreatif-desa
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      keamanan-lingkungan-pecalang-patwal
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/keamanan/kontak-darurat/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      kontak-darurat
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/keamanan/laporan-publik/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+     laporan-publik
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      pencegahan-kriminalitas
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/keamanan/polsek-terdekat/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      polsek-terdekat
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/keamanan/tips-keamanan/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      tips-keamanan
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Data Kesehatan Warga
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/kesehatan/info-wabah-penyakit/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Wabah Penyakit
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/kesehatan/kontak-darurat/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Kontak Darurat
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/kesehatan/penanganan-darurat/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Penanganan Darurat
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/kesehatan/posyandu/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Posyandu
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/kesehatan/program-kesehatan/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Program Kesehatan
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/kesehatan/puskesmas/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Puskesmas
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/landing-page/apbdes/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      APBDes
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Desa Anti Korupsi
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Indeks Kepuasan MAsyarakat
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/landing-page/layanan/_comp_textLengh.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Text } from '@mantine/core';
+
+function CompTextLengh({input, maxLength}: {input: string, maxLength: number}) {
+  return (
+    <div>
+      <Text fz={"xs"}>{input.length}/{maxLength}</Text>
+    </div>
+  );
+}
+
+export default CompTextLengh;

src/app/admin/(dashboard)/landing-page/layanan/gs_maxLength.ts

@@ -0,0 +1 @@
+export const maxLength = 2000

src/app/admin/(dashboard)/landing-page/layanan/page.tsx

@@ -0,0 +1,31 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Stack, Text, Textarea, Title } from '@mantine/core';
+import { useState } from 'react';
+import CompTextLengh from './_comp_textLengh';
+import { maxLength } from './gs_maxLength';
+
+function Page(
+) {
+  const [value, setValue] = useState("")
+  return (
+    <Box>
+      <Stack gap={"xs"}>
+        <Title order={2}>Layanan</Title>
+        <Textarea
+          label={<Text>Deskripsi</Text>}
+          placeholder='tambah deskripsi'
+          maxLength={maxLength}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+        />
+       <CompTextLengh input={value} maxLength={maxLength}/>
+        <Group>
+          <Button bg={colors['blue-button']} fz={'md'}>Submit</Button>
+        </Group>
+      </Stack>
+    </Box>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/landing-page/penghargaan/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Penghargaan
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/landing-page/potensi/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Potensi
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/landing-page/prestasi-desa/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Prestasi Desa
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/landing-page/profile/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Profile
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/landing-page/sdgs-desa/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      SDGS Desa
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      data-lingkungan-desa
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      edukasi-lingkungan
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/lingkungan/gotong-royong/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      gotong-royong
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+     konservasi-adat-bali
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      pengelolaan-sampah-bank-sampah
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/lingkungan/program-penghijauan/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      program-penghijauan
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/pendidikan/beasiswa-desa/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      beasiswa-desa
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      bimbingan-belajar-desa
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/pendidikan/data-pendidikan/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      data-pendidikan
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      info-sekolah-paud
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+     pendidikan-non-formal
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+    perpustakaan-digital
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      program-pendidikan-anak
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/ppid/daftar-informasi-publik-desa-darmasaba/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      daftar-informasi-publik-desa-darmasaba
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/ppid/dasar-hukum/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      dasar-hukum
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      ikm-desa-darmasaba
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/ppid/permohonan-informasi-publik/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      permohonan-informasi-publik
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/ppid/permohonan-keberatan-informasi-publik/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      permohonan-keberatan-informasi-publik
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/ppid/profile-ppid/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      profile-ppid
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/ppid/struktur-ppid/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      struktur-ppid
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/ppid/visi-misi-ppid/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      visi-misi-ppid
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/_com/list_PageAdmin.tsx

@@ -0,0 +1,396 @@
+export const navBar = [
+  {
+    id: "Landing Page",
+    name: "Landing Page",
+    path: "",
+    children: [
+      {
+        id: "Landing_Page_1",
+        name: "Profile",
+        path: "/admin/landing-page/profile"
+      },
+      {
+        id: "Landing_Page_2",
+        name: "Penghargaan",
+        path: "/admin/landing-page/penghargaan"
+      },
+      {
+        id: "Landing_Page_3",
+        name: "Layanan",
+        path: "/admin/landing-page/layanan"
+      },
+      {
+        id: "Landing_Page_4",
+        name: "Potensi",
+        path: "/admin/landing-page/potensi"
+      },
+      {
+        id: "Landing_Page_5",
+        name: "Desa Anti Korupsi",
+        path: "/admin/landing-page/desa-anti-korupsi"
+      },
+      {
+        id: "Landing_Page_6",
+        name: "Indeks Kepuasan Masyarakat",
+        path: "/admin/landing-page/indeks-kepuasan-masyarakat"
+      },
+      {
+        id: "Landing_Page_7",
+        name: "SDGs Desa",
+        path: "/admin/landing-page/sdgs-desa"
+      },
+      {
+        id: "Landing_Page_8",
+        name: "APBDes",
+        path: "/admin/landing-page/apbdes"
+      },
+      {
+        id: "Landing_Page_9",
+        name: "Prestasi Desa",
+        path: "/admin/landing-page/prestasi-desa"
+      }
+    ]
+  },
+  {
+    id: "PPID",
+    name: "PPID",
+    path: "",
+    children: [
+      {
+        id: "PPID_1",
+        name: "Profile PPID",
+        path: "/admin/ppid/profile-ppid"
+      },
+      {
+        id: "PPID_2",
+        name: "Struktur PPID",
+        path: "/admin/ppid/struktur-ppid"
+      },
+      {
+        id: "PPID_3",
+        name: "Visi Misi PPID",
+        path: "/admin/ppid/visi-misi-ppid"
+      },
+      {
+        id: "PPID_4",
+        name: "Dasar Hukum",
+        path: "/admin/ppid/dasar-hukum"
+      },
+      {
+        id: "PPID_5",
+        name: "Permohonan Informasi Publik",
+        path: "/admin/ppid/permohonan-informasi-publik"
+      },
+      {
+        id: "PPID_6",
+        name: "Permohonan Keberatan Informasi Publik",
+        path: "/admin/ppid/permohonan-keberatan-informasi-publik"
+      },
+      {
+        id: "PPID_7",
+        name: "Daftar Informasi Publik Desa Darmasaba",
+        path: "/admin/ppid/daftar-informasi-publik-desa-darmasaba"
+      },
+      {
+        id: "PPID_8",
+        name: "IKM Desa Darmasaba",
+        path: "/admin/ppid/ikm-desa-darmasaba"
+      },
+
+    ]
+  },
+
+  {
+    id: "Desa",
+    name: "Desa",
+    path: "",
+    children: [
+      {
+        id: "Desa_1",
+        name: "Profile",
+        path: "/admin/desa/profile"
+      },
+      {
+        id: "Desa_2",
+        name: "Potensi",
+        path: "/admin/desa/potensi"
+      },
+      {
+        id: "Desa_3",
+        name: "Berita",
+        path: "/admin/desa/berita"
+      },
+      {
+        id: "Desa_4",
+        name: "Pengumuman",
+        path: "/admin/desa/pengumuman"
+      },
+      {
+        id: "Desa_5",
+        name: "Gallery",
+        path: "/admin/desa/gallery"
+      },
+      {
+        id: "Desa_6",
+        name: "Layanan",
+        path: "/admin/desa/layanan"
+      },
+      {
+        id: "Desa_7",
+        name: "Penghargaan",
+        path: "/admin/desa/penghargaan"
+      }
+
+    ]
+  },
+  {
+    id: "Kesehatan",
+    name: "Kesehatan",
+    path: "",
+    children: [
+      {
+        id: "Kesehatan_1",
+        name: "Posyandu",
+        path: "/admin/kesehatan/posyandu"
+      },
+      {
+        id: "Kesehatan_2",
+        name: "Data Kesehatan Warga",
+        path: "/admin/kesehatan/data-kesehatan-warga"
+      },
+      {
+        id: "Kesehatan_3",
+        name: "Puskesmas",
+        path: "/admin/kesehatan/puskesmas"
+      },
+      {
+        id: "Kesehatan_4",
+        name: "Program Kesehatan",
+        path: "/admin/kesehatan/program-kesehatan"
+      },
+      {
+        id: "Kesehatan_5",
+        name: "Penanganan Darurat",
+        path: "/admin/kesehatan/penanganan-darurat"
+      },
+      {
+        id: "Kesehatan_6",
+        name: "Kontak Darurat",
+        path: "/admin/kesehatan/kontak-darurat"
+      },
+      {
+        id: "Kesehatan_7",
+        name: "Info Wabah/Penyakit",
+        path: "/admin/kesehatan/info-wabah-penyakit"
+      }
+    ]
+  },
+  {
+    id: "Keamanan",
+    name: "Keamanan",
+    path: "",
+    children: [
+      {
+        id: "Keamanan_1",
+        name: "Keamanan Lingkungan (Pecalang/Patwal)",
+        path: "/admin/keamanan/keamanan-lingkungan-pecalang-patwal"
+      },
+      {
+        id: "Keamanan_2",
+        name: "Polsek Terdekat",
+        path: "/admin/keamanan/polsek-terdekat"
+      },
+      {
+        id: "Keamanan_3",
+        name: "Kontak Darurat",
+        path: "/admin/keamanan/kontak-darurat"
+      },
+      {
+        id: "Keamanan_4",
+        name: "Pencegahan Kriminalitas",
+        path: "/admin/keamanan/pencegahan-kriminalitas"
+      },
+      {
+        id: "Keamanan_5",
+        name: "Laporan Publik",
+        path: "/admin/keamanan/laporan-publik"
+      },
+      {
+        id: "Keamanan_6",
+        name: "Tips Keamanan",
+        path: "/admin/keamanan/tips-keamanan"
+      }
+    ]
+  },
+  {
+    id: "Ekonomi",
+    name: "Ekonomi",
+    path: "",
+    children: [
+      {
+        id: "Ekonomi_1",
+        name: "Pasar Desa",
+        path: "/admin/ekonomi/pasar-desa"
+      },
+      {
+        id: "Ekonomi_2",
+        name: "Lowongan Kerja Lokal",
+        path: "/admin/ekonomi/lowongan-kerja-lokal"
+      },
+      {
+        id: "Ekonomi_3",
+        name: "Struktur Organisasi dan SK Pengurus BUMDesa",
+        path: "/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa"
+      },
+      {
+        id: "Ekonomi_4",
+        name: "PADesa (Pendapatan Asli Desa)",
+        path: "/admin/ekonomi/PADesa-pendapatan-asli-desa"
+      },
+      {
+        id: "Ekonomi_5",
+        name: "Jumlah Pengangguran 2024-2025",
+        path: "/admin/ekonomi/jumlah-pengangguran-2024-2025"
+      },
+      {
+        id: "Ekonomi_6",
+        name: "Jumlah penduduk usia kerja yang menganggur",
+        path: "/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur"
+      },
+      {
+        id: "Ekonomi_7",
+        name: "Jumlah Penduduk Miskin 2024-2025",
+        path: "/admin/ekonomi/jumlah-penduduk-miskin-2024-2025"
+      },
+      {
+        id: "Ekonomi_8",
+        name: "Program Kemiskinan",
+        path: "/admin/ekonomi/program-kemiskinan"
+      },
+      {
+        id: "Ekonomi_9",
+        name: "Sektor Unggulan Desa",
+        path: "/admin/ekonomi/sektor-unggulan-desa"
+      },
+      {
+        id: "Ekonomi_10",
+        name: "Demografi Pekerjaan",
+        path: "/admin/ekonomi/demografi-pekerjaan"
+      }
+    ]
+  }, {
+    id: "Inovasi",
+    name: "Inovasi",
+    path: "",
+    children: [
+      {
+        id: "Inovasi_1",
+        name: "Desa Digital/Smart Village",
+        path: "/admin/inovasi/desa-digital-smart-village"
+      },
+      {
+        id: "Inovasi_2",
+        name: "Layanan Online Desa",
+        path: "/admin/inovasi/layanan-online-desa"
+      },
+      {
+        id: "Inovasi_3",
+        name: "Program Kreatif Desa",
+        path: "/admin/inovasi/program-kreatif-desa"
+      },
+      {
+        id: "Inovasi_4",
+        name: "Kolaborasi Inovasi",
+        path: "/admin/inovasi/kolaborasi-inovasi"
+      },
+      {
+        id: "Inovasi_5",
+        name: "Info Teknologi Tepat Guna",
+        path: "/admin/inovasi/info-teknologi-tepat-guna"
+      },
+      {
+        id: "Inovasi_6",
+        name: "Ajukan Ide Inovatif",
+        path: "/admin/inovasi/ajukan-ide-inovatif"
+      }
+
+    ]
+  }, {
+    id: "Lingkungan",
+    name: "Lingkungan",
+    path: "",
+    children: [
+      {
+        id: "Lingkungan_1",
+        name: "Pengelolaan Sampah (Bank Sampah)",
+        path: "/admin/lingkungan/pengelolaan-sampah-bank-sampah"
+      },
+      {
+        id: "Lingkungan_2",
+        name: "Program Penghijauan",
+        path: "/admin/lingkungan/program-penghijauan"
+      },
+      {
+        id: "Lingkungan_3",
+        name: "Data Lingkungan Desa",
+        path: "/admin/lingkungan/data-lingkungan-desa"
+      },
+      {
+        id: "Lingkungan_4",
+        name: "Gotong Royong",
+        path: "/admin/lingkungan/gotong-royong"
+      },
+      {
+        id: "Lingkungan_5",
+        name: "Edukasi Lingkungan",
+        path: "/admin/lingkungan/edukasi-lingkungan"
+      },
+      {
+        id: "Lingkungan_6",
+        name: "Konservasi Adat Bali",
+        path: "/admin/lingkungan/konservasi-adat-bali"
+      }
+    ]
+  }, {
+    id: "Pendidikan",
+    name: "Pendidikan",
+    path: "",
+    children: [
+      {
+        id: "Pendidikan_1",
+        name: "Info Sekolah & PAUD",
+        path: "/admin/pendidikan/info-sekolah-paud"
+      },
+      {
+        id: "Pendidikan_2",
+        name: "Beasiswa Desa",
+        path: "/admin/pendidikan/beasiswa-desa"
+      },
+      {
+        id: "Pendidikan_3",
+        name: "Program Pendidikan Anak",
+        path: "/admin/pendidikan/program-pendidikan-anak"
+      },
+      {
+        id: "Pendidikan_4",
+        name: "Bimbingan Belajar Desa",
+        path: "/admin/pendidikan/bimbingan-belajar-desa"
+      },
+      {
+        id: "Pendidikan_5",
+        name: "Pendidikan Non Formal",
+        path: "/admin/pendidikan/pendidikan-non-formal"
+      },
+      {
+        id: "Pendidikan_6",
+        name: "Perpustakaan Digital",
+        path: "/admin/pendidikan/perpustakaan-digital"
+      },
+      {
+        id: "Pendidikan_7",
+        name: "Data Pendidikan",
+        path: "/admin/pendidikan/data-pendidikan"
+      }
+    ]
+  }
+]

src/app/admin/images/layout.tsx

@@ -0,0 +1,13 @@
+import { Stack } from "@mantine/core";
+import AdminNav from "../_com/AdminNav";
+
+function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <Stack gap={0}>
+      <AdminNav />
+      {children}
+    </Stack>
+  );
+}
+
+export default Layout;

src/app/admin/layout.tsx

@@ -1,11 +1,67 @@
-import { Stack } from "@mantine/core";
-import AdminNav from "./_com/AdminNav";
+'use client'
+import colors from "@/con/colors";
+import { ActionIcon, AppShell, AppShellHeader, AppShellMain, AppShellNavbar, Burger, Group, Image, NavLink, ScrollArea, Stack, Text } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import Link from "next/link";
+import { useState } from "react";
+import { navBar } from "./_com/list_PageAdmin";
+
+
 
 export default function Layout({ children }: { children: React.ReactNode }) {
+  const [opened, { toggle }] = useDisclosure();
+  const [active, setActive] = useState(navBar[0]?.id || 0);
+  const isClient = typeof window !== 'undefined';
   return (
-    <Stack gap={0}>
-      <AdminNav />
-      {children}
+    <Stack h={"100%"}>
+      <AppShell
+        header={{ height: 60 }}
+        navbar={{
+          width: 300, breakpoint: 'sm', collapsed: { mobile: !opened }
+        }}
+        padding={'md'}
+      >
+        <AppShellHeader bg={colors["white-trans-1"]}>
+          <Group px={10} align="center">
+            <Burger opened={opened} onClick={toggle} hiddenFrom="sm" size={'sm'} />
+            <ActionIcon w={50} h={50}  variant="transparent" component={Link} href="/admin">
+            <Image py={5} src={'/assets/images/darmasaba-icon.png'} alt="" width={50} height={50} />
+            </ActionIcon>
+            <Text fw={'bold'} c={colors["blue-button"]} fz={'lg'}>Dashboard Admin</Text>
+          </Group>
+        </AppShellHeader>
+        <AppShellNavbar
+          c={colors["blue-button"]}
+          component={ScrollArea}
+        >
+          {navBar.map((v,k) => {
+            return (
+              <NavLink
+                c={colors["blue-button"]}
+                key={k}
+                active={isClient && k === active}
+                onClick={() => setActive(k)}
+                label={<Text>{v.name}</Text>}
+              >
+                {v.children.map((child) => {
+                  return (
+                    <NavLink
+                      href={child.path}
+                      key={child.id}
+                      active={isClient && Number(child.id) === active}
+                      onClick={() => setActive(Number(child.id))}
+                      label={<Text>{child.name}</Text>}
+                    />
+                  )
+                })}
+              </NavLink>
+            )
+          })}
+        </AppShellNavbar>
+        <AppShellMain bg={colors.Bg}>
+          {children}
+        </AppShellMain>
+      </AppShell>
     </Stack>
   );
-}
+}

src/app/admin/page.tsx

@@ -1,9 +1,9 @@
-import { Container, Stack } from "@mantine/core";
+import { Text } from "@mantine/core";
 
 export default function Page() {
-  return (
-    <Stack h={"100%"}>
-      <Container>admin</Container>
-    </Stack>
-  );
-}
+    return(
+      <Text>
+        Test
+      </Text>
+    )
+}

src/app/darmasaba/(pages)/desa/berita/(tabs)/budaya.tsx

@@ -0,0 +1,185 @@
+import colors from '@/con/colors';
+import { Box, Center, Container, Divider, Grid, GridCol, Group, Image, Pagination, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { IconCalendar, IconUser } from '@tabler/icons-react';
+import React from 'react';
+
+const dataBeritaTerbaru = [
+  {
+    id: 1,
+    judul: 'FESTIVAL SENI BUDAYA KAB. BADUNG',
+    image: "/api/img/tari-3.jpg",
+    tanggal: "Selasa, 11 Januari 2025",
+  },
+  {
+    id: 2,
+    judul: 'LATIHAN TARI REJANG GIRI PUTRI',
+    image: "/api/img/tari-3.jpg",
+    tanggal: "Kamis, 13 Januari 2025",
+  },
+  {
+    id: 3,
+    judul: 'LATIHAN TARI REJANG GIRI PUTRI',
+    image: "/api/img/tari-3.jpg",
+    tanggal: "Kamis, 13 Januari 2025",
+  },
+]
+function Budaya() {
+  return (
+    <Box py={20}>
+      <Container size="xl" px={{ base: "md", md: "xl" }}>
+        <Grid gutter={{ base: "md", md: "xl" }} pb={70}>
+          {/* Berita Utama */}
+          <GridCol span={{ base: 12, md: 8 }}>
+            <Paper p="md" shadow="sm" radius="md">
+              <Stack gap="md">
+                <Box>
+                  <Image
+                    src="/api/img/budaya-1.jpg"
+                    alt="Darmasaba Smart Village"
+                    radius="md"
+                    fit="cover"
+                    h={{ base: 450, md: 610 }}
+                  />
+                </Box>
+                <Group>
+                  <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                    <Text size="sm">Budaya</Text>
+                  </Paper>
+                </Group>
+                <Text fz={{ base: "xl", md: "2xl" }} fw="bold" lineClamp={2}>
+                  FESTIVAL SENI BUDAYA KAB. BADUNG
+                </Text>
+                <Text size="md" lineClamp={3}>
+                Semeton Darmasaba yang suka menikmati seni seperti baleganjur, gong kebyar, tari, dan lainnya. Nih! ada acara keren di Puspem Badung tepatnya di Balai Budaya Giri Nata Mandala yaitu Festival Seni Budaya dari tanggal 1 November 2023 s.d. 16 November 2023.
+                </Text>
+                <Group>
+                  <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>
+              </Stack>
+            </Paper>
+          </GridCol>
+
+          {/* Berita Sampingan */}
+          <GridCol span={{ base: 12, md: 4 }}>
+            <Stack gap="md">
+              {/* Berita Sampingan 1 */}
+              <Paper p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src="/api/img/tari-3.jpg"
+                    alt="Prestasi Voli"
+                    fit="cover"
+                    h={180}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">Budaya</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                  PELATIHAN TARI WALI
+                  </Text>
+                  <Group>
+                    <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>
+                </Stack>
+              </Paper>
+
+              {/* Berita Sampingan 2 */}
+              <Paper p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src="/api/img/tari-3.jpg"
+                    alt="Prestasi Voli"
+                    fit="cover"
+                    h={180}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">Budaya</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                  LATIHAN TARI REJANG GIRI PUTRI
+                  </Text>
+                  <Group>
+                    <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>
+                </Stack>
+              </Paper>
+            </Stack>
+          </GridCol>
+        </Grid>
+        <Box pb={30}>
+          <Text fz={"h1"} fw={"bold"}>Berita Terbaru</Text>
+          <Divider color={colors["blue-button"]} />
+        </Box>
+        <SimpleGrid cols={{ base: 1, md: 3 }}>
+          {dataBeritaTerbaru.map((v, k) => {
+            return (
+              <Paper key={k} p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src={v.image}
+                    alt=""
+                    fit="cover"
+                    h={282}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">Budaya</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                    {v.judul}
+                  </Text>
+                  <Group>
+                    <Group gap="xs">
+                      <IconCalendar size={18} />
+                      <Text size="sm">{v.tanggal}</Text>
+                    </Group>
+                    <Group gap="xs">
+                      <IconUser size={18} />
+                      <Text size="sm">Admin Desa</Text>
+                    </Group>
+                  </Group>
+                </Stack>
+              </Paper>
+            )
+          })}
+        </SimpleGrid>
+        <Box py={"xl"}>
+          <Center>
+            <Pagination total={10} />
+          </Center>
+        </Box>
+      </Container>
+    </Box>
+  );
+}
+
+export default Budaya;

src/app/darmasaba/(pages)/desa/berita/(tabs)/ekonomi.tsx

@@ -0,0 +1,185 @@
+import colors from '@/con/colors';
+import { Box, Center, Container, Divider, Grid, GridCol, Group, Image, Pagination, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { IconCalendar, IconUser } from '@tabler/icons-react';
+import React from 'react';
+
+const dataBeritaTerbaru = [
+  {
+    id: 1,
+    judul: 'PROGRAM KETAHANAN PANGAN PEMERINTAH DESA DARMASABA TAHUN 2023',
+    image: "/api/img/ekonomi-sampingan-3.png",
+    tanggal: "Selasa, 11 Januari 2025",
+  },
+  {
+    id: 2,
+    judul: 'Sinergitas Pemkab Badung-TNI Wujudkan Kedaulatan Pangan di Subak Aban Darmasaba',
+    image: "/api/img/ekonomi-sampingan.png",
+    tanggal: "Kamis, 13 Januari 2025",
+  },
+  {
+    id: 3,
+    judul: 'ANTUSIASME WARGA DARMASABA MELAKUKAN PEMBUKAAN REKENING BANK BPD BALI ',
+    image: "/api/img/ekonomi-sampingan-2.png",
+    tanggal: "Kamis, 13 Januari 2025",
+  },
+]
+function Ekonomi() {
+  return (
+    <Box py={20}>
+      <Container size="xl" px={{ base: "md", md: "xl" }}>
+        <Grid gutter={{ base: "md", md: "xl" }} pb={70}>
+          {/* Berita Utama */}
+          <GridCol span={{ base: 12, md: 8 }}>
+            <Paper p="md" shadow="sm" radius="md">
+              <Stack gap="md">
+                <Box>
+                  <Image
+                    src="/api/img/ekonomi-utama.png"
+                    alt="Darmasaba Smart Village"
+                    radius="md"
+                    fit="cover"
+                    h={{ base: 450, md: 660 }}
+                  />
+                </Box>
+                <Group>
+                  <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                    <Text size="sm">Ekonomi</Text>
+                  </Paper>
+                </Group>
+                <Text fz={{ base: "xl", md: "2xl" }} fw="bold" lineClamp={2}>
+                PROGRAM KETAHANAN PANGAN PEMERINTAH DESA DARMASABA TAHUN 2023
+                </Text>
+                <Text size="md" lineClamp={2}>
+                Pemerintah Desa Darmasaba melalui kegiatan ketahanan pangan ini menjalankan dua kategori yaitu pertanian dan peternakan untuk kategori pertanian telah membuahkan hasil panen pertama pada hari Kamis, 24 Agustus 2023 melakukan panen bawang merah di lokasi ketahanan pangan Br. Taman, Desa Darmasaba, Kecamatan Abiansemal, Kabupaten Badung. Adapun varietas bawang yang dipanen adalah Bawang Bali Karet (Batu Ijo) pada lahan seluas kurang lebih 7 are.
+                </Text>
+                <Group>
+                  <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>
+              </Stack>
+            </Paper>
+          </GridCol>
+
+          {/* Berita Sampingan */}
+          <GridCol span={{ base: 12, md: 4 }}>
+            <Stack gap="md">
+              {/* Berita Sampingan 1 */}
+              <Paper p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src="/api/img/ekonomi-sampingan.png"
+                    alt="Prestasi Voli"
+                    fit="cover"
+                    h={180}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">Ekonomi</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                  Sinergitas Pemkab Badung-TNI Wujudkan Kedaulatan Pangan di Subak Aban Darmasaba 
+                  </Text>
+                  <Group>
+                    <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>
+                </Stack>
+              </Paper>
+
+              {/* Berita Sampingan 2 */}
+              <Paper p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src="/api/img/ekonomi-sampingan-2.png"
+                    alt="Prestasi Voli"
+                    fit="cover"
+                    h={180}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">Ekonomi</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={1}>
+                  ANTUSIASME WARGA DARMASABA MELAKUKAN PEMBUKAAN REKENING BANK BPD BALI
+                  </Text>
+                  <Group>
+                    <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>
+                </Stack>
+              </Paper>
+            </Stack>
+          </GridCol>
+        </Grid>
+        <Box pb={30}>
+          <Text fz={"h1"} fw={"bold"}>Berita Terbaru</Text>
+          <Divider color={colors["blue-button"]} />
+        </Box>
+        <SimpleGrid cols={{ base: 1, md: 3 }}>
+          {dataBeritaTerbaru.map((v, k) => {
+            return (
+              <Paper key={k} p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src={v.image}
+                    alt="Prestasi Voli"
+                    fit="cover"
+                    h={180}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">Ekonomi</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                    {v.judul}
+                  </Text>
+                  <Group>
+                    <Group gap="xs">
+                      <IconCalendar size={18} />
+                      <Text size="sm">{v.tanggal}</Text>
+                    </Group>
+                    <Group gap="xs">
+                      <IconUser size={18} />
+                      <Text size="sm">Admin Desa</Text>
+                    </Group>
+                  </Group>
+                </Stack>
+              </Paper>
+            )
+          })}
+        </SimpleGrid>
+        <Box py={"xl"}>
+          <Center>
+            <Pagination total={10} />
+          </Center>
+        </Box>
+      </Container>
+    </Box>
+  );
+}
+
+export default Ekonomi;

src/app/darmasaba/(pages)/desa/berita/(tabs)/pembangunan.tsx

@@ -0,0 +1,187 @@
+import colors from '@/con/colors';
+import { Box, Center, Container, Divider, Grid, GridCol, Group, Image, Pagination, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { IconCalendar, IconUser } from '@tabler/icons-react';
+import React from 'react';
+
+const dataBeritaTerbaru = [
+  {
+    id: 1,
+    judul: 'PEMBANGUNAN GOT JALAN LINGKUNGAN BR. TAMAN',
+    image: "/api/img/pembangunan-1.jpg",
+    tanggal: "Kamis, 13 Januari 2025",
+  },
+  {
+    id: 2,
+    judul: 'PEMBANGUNAN BALE GAMBELAN SETRA AGENG DESA ADAT TEGAL',
+    image: "/api/img/pembangunan-3.jpg",
+    tanggal: "Kamis, 13 Januari 2025",
+  },
+  {
+    id: 3,
+    judul: 'PEMBANGUNAN TROTOARISASI JALAN LINGKUNGAN BR. GULINGAN',
+    image: "/api/img/pembangunan-1.jpg",
+    tanggal: "Selasa, 11 Januari 2025",
+  },
+]
+function Pembangunan() {
+  return (
+    <Box py={20}>
+      <Container size="xl" px={{ base: "md", md: "xl" }}>
+        <Grid gutter={{ base: "md", md: "xl" }} pb={70}>
+          {/* Berita Utama */}
+          <GridCol span={{ base: 12, xl: 8 }}>
+            <Paper p="md" shadow="sm" radius="md">
+              <Stack gap="md">
+                <Box>
+                  <Image
+                    src="/api/img/pembangunan-1.jpg"
+                    alt="PEMBANGUNAN TROTOARISASI JALAN LINGKUNGAN BR. GULINGAN"
+                    radius="md"
+                    fit="cover"
+                    h={{ base: 450, md: 615 }}
+                  />
+                </Box>
+                <Group>
+                  <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                    <Text size="sm">Pembangunan</Text>
+                  </Paper>
+                </Group>
+                <Text fz={{ base: "xl", md: "2xl" }} fw="bold" lineClamp={2}>
+                PEMBANGUNAN TROTOARISASI JALAN LINGKUNGAN BR. GULINGAN
+                </Text>
+                <Text size="md" lineClamp={3}>
+                Sudah tertata rapi dan bersih niki Semeton Darmasaba! Sekarang pejalan kaki di seputaran jalan lingkungan Br. Gulingan bisa aman dan nyaman nie!!!
+
+Pemdes Darmasaba dalam rangka memenuhi kebutuhan masyarakat khususnya warga Br. Gulingan yang memerlukan trotoarisasi guna memperlancar saluran air dan memberikan kenyamanan ketika berjalan, kini sudah menyelesaikan pembangunan trotoarisasi jalan lingkungan Br. Gulingan. Pembangunan tersebut menggunakan APBDes Darmasaba T. A. 2023 dengan realisasi sebesar Rp357.011.299,00 dari pagu yang disiapkan sebesar Rp439.066.327,00. Pembangunan trotoar tersebut melibatkan pekerja lokal dan dibantu oleh warga Br. Gulingan.
+                </Text>
+                <Group>
+                  <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>
+              </Stack>
+            </Paper>
+          </GridCol>
+
+          {/* Berita Sampingan */}
+          <GridCol span={{ base: 12, xl: 4 }}>
+            <Stack gap="md">
+              {/* Berita Sampingan 1 */}
+              <Paper p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src="/api/img/pembangunan-2.jpg"
+                    alt="Prestasi Voli"
+                    fit="cover"
+                    h={300}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">Pembangunan</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                  PEMBANGUNAN GOT JALAN LINGKUNGAN BR. TAMAN
+                  </Text>
+                  <Group>
+                    <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>
+                </Stack>
+              </Paper>
+
+              {/* Berita Sampingan 2 */}
+              <Paper p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src="/api/img/pembangunan-3.jpg"
+                    alt="Prestasi Voli"
+                    fit="cover"
+                    h={250}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">Pembangunan</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                  PEMBANGUNAN BALE GAMBELAN SETRA AGENG DESA ADAT TEGAL
+                  </Text>
+                  <Group>
+                    <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>
+                </Stack>
+              </Paper>
+            </Stack>
+          </GridCol>
+        </Grid>
+        <Box pb={30}>
+          <Text fz={"h1"} fw={"bold"}>Berita Terbaru</Text>
+          <Divider color={colors["blue-button"]} />
+        </Box>
+        <SimpleGrid cols={{ base: 1, md: 3 }}>
+          {dataBeritaTerbaru.map((v, k) => {
+            return (
+              <Paper key={k} p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src={v.image}
+                    alt="Prestasi Voli"
+                    fit="cover"
+                    h={200}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">Pembangunan</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                    {v.judul}
+                  </Text>
+                  <Group>
+                    <Group gap="xs">
+                      <IconCalendar size={18} />
+                      <Text size="sm">{v.tanggal}</Text>
+                    </Group>
+                    <Group gap="xs">
+                      <IconUser size={18} />
+                      <Text size="sm">Admin Desa</Text>
+                    </Group>
+                  </Group>
+                </Stack>
+              </Paper>
+            )
+          })}
+        </SimpleGrid>
+        <Box py={"xl"}>
+          <Center>
+            <Pagination total={10} />
+          </Center>
+        </Box>
+      </Container>
+    </Box>
+  );
+}
+
+export default Pembangunan;

src/app/darmasaba/(pages)/desa/berita/(tabs)/pemerintahan.tsx

@@ -0,0 +1,185 @@
+import colors from '@/con/colors';
+import { Box, Center, Container, Divider, Grid, GridCol, Group, Image, Pagination, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { IconCalendar, IconUser } from '@tabler/icons-react';
+import React from 'react';
+
+const dataBeritaTerbaru = [
+  {
+    id: 1,
+    judul: 'PEMBERIAN HASIL PANEN JAGUNG PROGRAM KETAHANAN PANGAN DESA KEPADA ANAK YATIM, PIATU DAN YATIM-PIATU DESA DARMASABA',
+    image: "/api/img/berita-pemerintahan.jpg",
+    tanggal: "Selasa, 11 Januari 2025",
+  },
+  {
+    id: 2,
+    judul: 'Tim Voli Darmasaba Raih Juara Turnamen Desa',
+    image: "/api/img/pemrintahan-5.png",
+    tanggal: "Kamis, 13 Januari 2025",
+  },
+  {
+    id: 3,
+    judul: 'PEMBERIAN HASIL PANEN JAGUNG PROGRAM KETAHANAN PANGAN DESA KEPADA ANAK YATIM, PIATU DAN YATIM-PIATU DESA DARMASABA',
+    image: "/api/img/berita-pemerintahan.jpg",
+    tanggal: "Kamis, 13 Januari 2025",
+  },
+]
+function Pemerintahan() {
+  return (
+    <Box py={20}>
+      <Container size="xl" px={{ base: "md", md: "xl" }}>
+        <Grid gutter={{ base: "md", md: "xl" }} pb={70}>
+          {/* Berita Utama */}
+          <GridCol span={{ base: 12, xl: 8 }}>
+            <Paper p="md" shadow="sm" radius="md">
+              <Stack gap="md">
+                <Box>
+                  <Image
+                    src="/api/img/berita-pemerintahan.jpg"
+                    alt="Darmasaba Smart Village"
+                    radius="md"
+                    fit="cover"
+                    h={{ base: 450, md: 615 }}
+                  />
+                </Box>
+                <Group>
+                  <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                    <Text size="sm">Pemerintahan</Text>
+                  </Paper>
+                </Group>
+                <Text fz={{ base: "xl", md: "2xl" }} fw="bold" lineClamp={2}>
+                PEMBERIAN HASIL PANEN JAGUNG PROGRAM KETAHANAN PANGAN DESA KEPADA ANAK YATIM, PIATU DAN YATIM-PIATU DESA DARMASABA
+                </Text>
+                <Text size="md" lineClamp={3}>
+                Pada hari Selasa, 19 November 2024, Desa Darmasaba memberikan hasil panen jagung sebagai bagian dari kegiatan Ketahanan Pangan Desa kepada anak-anak yatim, piatu, dan yatim-piatu yang berusia 0-18 Tahun. Hasil panen ini diserahkan langsung oleh I. B. Surya Prabhawa Manuaba, S.H., M.H., NL.P selaku Perbekel Darmasaba, didampingi Ketua BPD dan LPM Desa Darmasaba, serta seluruh perangkat dan staf desa. Melalui kegiatan ini, kami berharap dapat memberikan manfaat langsung bagi mereka yang membutuhkan, serta memperkuat rasa kebersamaan dan kepedulian dalam membangun ketahanan pangan di Desa Darmasaba.
+                </Text>
+                <Group>
+                  <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>
+              </Stack>
+            </Paper>
+          </GridCol>
+
+          {/* Berita Sampingan */}
+          <GridCol span={{ base: 12, xl: 4 }}>
+            <Stack gap="md">
+              {/* Berita Sampingan 1 */}
+              <Paper p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src="/api/img/beritapemerintahan-2.jpeg"
+                    alt="Prestasi Voli"
+                    fit="cover"
+                    h={300}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">Pemerintahan</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                  Evaluasi dan Verifikasi APBDes Darmasaba T.A. 2025
+                  </Text>
+                  <Group>
+                    <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>
+                </Stack>
+              </Paper>
+
+              {/* Berita Sampingan 2 */}
+              <Paper p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src="/api/img/pemerintahan-3.jpg"
+                    alt="Prestasi Voli"
+                    fit="cover"
+                    h={250}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">Pemerintahan</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                    JAKSA GARDA DESA (JAGA DESA) T.A. 2025
+                  </Text>
+                  <Group>
+                    <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>
+                </Stack>
+              </Paper>
+            </Stack>
+          </GridCol>
+        </Grid>
+        <Box pb={30}>
+          <Text fz={"h1"} fw={"bold"}>Berita Terbaru</Text>
+          <Divider color={colors["blue-button"]} />
+        </Box>
+        <SimpleGrid cols={{ base: 1, md: 3 }}>
+          {dataBeritaTerbaru.map((v, k) => {
+            return (
+              <Paper key={k} p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src={v.image}
+                    alt="Prestasi Voli"
+                    fit="cover"
+                    h={200}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">Pemerintahan</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                    {v.judul}
+                  </Text>
+                  <Group>
+                    <Group gap="xs">
+                      <IconCalendar size={18} />
+                      <Text size="sm">{v.tanggal}</Text>
+                    </Group>
+                    <Group gap="xs">
+                      <IconUser size={18} />
+                      <Text size="sm">Admin Desa</Text>
+                    </Group>
+                  </Group>
+                </Stack>
+              </Paper>
+            )
+          })}
+        </SimpleGrid>
+        <Box py={"xl"}>
+          <Center>
+            <Pagination total={10} />
+          </Center>
+        </Box>
+      </Container>
+    </Box>
+  );
+}
+
+export default Pemerintahan;

src/app/darmasaba/(pages)/desa/berita/(tabs)/semua.tsx

@@ -0,0 +1,188 @@
+import colors from '@/con/colors';
+import { Box, Center, Container, Divider, Grid, GridCol, Group, Image, Pagination, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { IconCalendar, IconUser } from '@tabler/icons-react';
+import React from 'react';
+
+const dataBeritaTerbaru = [
+  {
+    id: 1,
+    judul: 'Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik',
+    image: "/api/img/berita-1.png",
+    tanggal: "Selasa, 11 Januari 2025",
+    kategori: "Teknologi"
+  },
+  {
+    id: 2,
+    judul: 'Tim Voli Darmasaba Raih Juara Turnamen Desa',
+    image: "/api/img/prestasi-voli.jpeg",
+    tanggal: "Kamis, 13 Januari 2025",
+    kategori: "Sosial"
+  },
+  {
+    id: 3,
+    judul: 'DARMASABA DIGITAL PROJECT IS COMING!',
+    image: "/api/img/teknologi-1.png",
+    tanggal: "Kamis, 13 Januari 2025",
+    kategori: "Teknologi"
+  },
+]
+function Semua() {
+  return (
+    <Box py={20}>
+      <Container size="xl" px={{ base: "md", md: "xl" }}>
+        <Grid gutter={{ base: "md", md: "xl" }} pb={70}>
+          {/* Berita Utama */}
+          <GridCol span={{ base: 12, xl: 8 }}>
+            <Paper p="md" shadow="sm" radius="md">
+              <Stack gap="md">
+                <Box>
+                  <Image
+                    src="/api/img/berita-1.png"
+                    alt="Darmasaba Smart Village"
+                    radius="md"
+                    fit="cover"
+                    h={{ base: 450, md: 610 }}
+                  />
+                </Box>
+                <Group>
+                  <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                    <Text size="sm">Teknologi</Text>
+                  </Paper>
+                </Group>
+                <Text fz={{ base: "xl", md: "2xl" }} fw="bold" lineClamp={2}>
+                  Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik
+                </Text>
+                <Text size="md" lineClamp={3}>
+                  Desa Darmasaba mengambil langkah maju dalam transformasi digital dengan meluncurkan aplikasi Smart Village yang memudahkan warga dalam mengakses layanan publik secara online.
+                </Text>
+                <Group>
+                  <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>
+              </Stack>
+            </Paper>
+          </GridCol>
+
+          {/* Berita Sampingan */}
+          <GridCol span={{ base: 12, xl: 4 }}>
+            <Stack gap="md">
+              {/* Berita Sampingan 1 */}
+              <Paper p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src="/api/img/pembangunan-2.jpg"
+                    alt="Prestasi Voli"
+                    fit="cover"
+                    h={180}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">Pembangunan</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                    Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik
+                  </Text>
+                  <Group>
+                    <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>
+                </Stack>
+              </Paper>
+
+              {/* Berita Sampingan 2 */}
+              <Paper p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src="/api/img/prestasi-voli.jpeg"
+                    alt="Prestasi Voli"
+                    fit="cover"
+                    h={180}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">Sosial</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                    Tim Voli Darmasaba Raih Juara Turnamen Desa
+                  </Text>
+                  <Group>
+                    <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>
+                </Stack>
+              </Paper>
+            </Stack>
+          </GridCol>
+        </Grid>
+        <Box pb={30}>
+          <Text fz={"h1"} fw={"bold"}>Berita Terbaru</Text>
+          <Divider color={colors["blue-button"]} />
+        </Box>
+        <SimpleGrid cols={{ base: 1, xl: 3 }}>
+          {dataBeritaTerbaru.map((v, k) => {
+            return (
+              <Paper key={k} p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src={v.image}
+                    alt="Prestasi Voli"
+                    fit="cover"
+                    h={{ base: 180, xl: 250 }}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">{v.kategori}</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                    {v.judul}
+                  </Text>
+                  <Group>
+                    <Group gap="xs">
+                      <IconCalendar size={18} />
+                      <Text size="sm">{v.tanggal}</Text>
+                    </Group>
+                    <Group gap="xs">
+                      <IconUser size={18} />
+                      <Text size="sm">Admin Desa</Text>
+                    </Group>
+                  </Group>
+                </Stack>
+              </Paper>
+            )
+          })}
+        </SimpleGrid>
+        <Box py={"xl"}>
+          <Center>
+            <Pagination total={10} />
+          </Center>
+        </Box>
+      </Container>
+    </Box>
+  );
+}
+
+export default Semua;

src/app/darmasaba/(pages)/desa/berita/(tabs)/sosial.tsx

@@ -0,0 +1,204 @@
+import colors from '@/con/colors';
+import { Box, Center, Container, Divider, Grid, GridCol, Group, Image, Pagination, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { IconCalendar, IconUser } from '@tabler/icons-react';
+import React from 'react';
+
+const dataBeritaTerbaru = [
+  {
+    id: 1,
+    judul: 'AKSI BERSIH DESA MEMPERINGATI HARI PEDULI SAMPAH NASIONAL 2025',
+    image: "/api/img/sosial-4.png",
+    tanggal: "Selasa, 11 Januari 2025",
+  },
+  {
+    id: 2,
+    judul: 'Sosialisasi Pengelolaan Sampah di SD No. 3 Darmasaba dalam Kolaborasi Mahasiswa KKN-PMM I Universitas Warmadewa di Desa Darmasaba',
+    image: "/api/img/sosial-2.jpeg",
+    tanggal: "Kamis, 13 Januari 2025",
+  },
+  {
+    id: 3,
+    judul: 'Tim Voli Darmasaba Raih Juara Turnamen Desa',
+    image: "/api/img/prestasi-voli.jpeg",
+    tanggal: "Kamis, 13 Januari 2025",
+  },
+]
+function Sosial() {
+  return (
+    <Box py={20}>
+      <Container size="xl" px={{ base: "md", md: "xl" }}>
+        <Grid gutter={{ base: "md", md: "xl" }} pb={70}>
+          {/* Berita Utama */}
+          <GridCol span={{ base: 12, md: 8 }}>
+            <Paper p="md" shadow="sm" radius="md">
+              <Stack gap="md">
+                <Box>
+                  <Image
+                    src="/api/img/sosial-1.jpeg"
+                    alt="Darmasaba Smart Village"
+                    radius="md"
+                    fit="cover"
+                    h={{ base: 450, md: 635 }}
+                  />
+                </Box>
+                <Group>
+                  <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                    <Text size="sm">Sosial</Text>
+                  </Paper>
+                </Group>
+                <Text fz={{ base: "xl", md: "2xl" }} fw="bold" lineClamp={2}>
+                AKSI BERSIH DESA MEMPERINGATI HARI PEDULI SAMPAH NASIONAL 2025
+                </Text>
+                <Text size="md" lineClamp={3}>
+                AKSI BERSIH DESA MEMPERINGATI HARI PEDULI SAMPAH NASIONAL 2025 ♻️  
+Dalam semangat Hari Peduli Sampah Nasional (HPSN) 2025, Aksi Bersih Desa sukses digelar di Lombok Utara serta beberapa wilayah lain, termasuk Kabupaten Badung yang berpusat di TPS 3R Pudak Mesari, Desa Darmasaba. ?✨  
+
+Kegiatan ini melibatkan berbagai pihak seperti Pusdal LH BN - KLH, DKLH Provinsi Bali, DLHK Kab. Badung, Pemdes Darmasaba, BPD, LPM, TPS 3R Pudak Mesari, Lembaga Kemasyarakatan Desa, serta masyarakat Darmasaba.  
+
+Selain aksi bersih, Desa Darmasaba juga meluncurkan Pemuda Peduli Lingkungan sebagai garda terdepan dalam gerakan sadar lingkungan! 
+
+Mengapa ini penting?  
+- Pengelolaan sampah harus dimulai dari sumbernya melalui pemilahan, pemanfaatan, hingga penyelesaian residu.  
+- Inovasi &quot;Galah Melah&quot; & &quot;BARES&quot; menjadi contoh nyata dalam menciptakan lingkungan yang bersih & berkelanjutan.  
+- Darmasaba terpilih sebagai 1 dari 8 desa se-Indonesia untuk peringatan HPSN 2025, sebuah kebanggaan sekaligus tanggung jawab bersama! ✨  
+
+&quot;Kami berharap aksi ini bukan sekadar seremoni, tetapi menjadi budaya masyarakat dalam memilah dan mengelola sampah dari sumbernya.&quot; - Ibu Cokorda Istri Muter Handayani, Plt. Kabid Wilayah Bali, Pusat Pengendalian LH Bali & Nusra.  
+
+&quot;Ke depan, kami menargetkan setiap desa di Badung memiliki komunitas Pemuda Peduli Lingkungan agar pengelolaan sampah lebih optimal dan berkelanjutan.&quot; - Bapak Ida Bagus Gede Arjana, Plt. Kadis DLHK Kab. Badung.  
+
+&quot;Darmasaba menjadi contoh desa aktif dalam pengelolaan sampah. Kami berharap inovasi ini menginspirasi desa lain.&quot; - Ida Bagus Surya Prabhawa Manuaba, Perbekel Darmasaba.  
+
+Mari bersama wujudkan lingkungan yang lebih bersih, sehat, dan lestari!  
+Jaga Bumi, Pilah Sampah dari Sekarang! ♻️
+                </Text>
+                <Group>
+                  <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>
+              </Stack>
+            </Paper>
+          </GridCol>
+
+          {/* Berita Sampingan */}
+          <GridCol span={{ base: 12, md: 4 }}>
+            <Stack gap="md">
+              {/* Berita Sampingan 1 */}
+              <Paper p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src="/api/img/sosial-2.jpeg"
+                    alt="Darmasaba Smart Village"
+                    fit="cover"
+                    h={180}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">Sosial</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                  Sosialisasi Pengelolaan Sampah di SD No. 3 Darmasaba dalam Kolaborasi Mahasiswa KKN-PMM I Universitas Warmadewa di Desa Darmasaba
+                  </Text>
+                  <Group>
+                    <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>
+                </Stack>
+              </Paper>
+
+              {/* Berita Sampingan 2 */}
+              <Paper p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src="/api/img/prestasi-voli.jpeg"
+                    alt="Prestasi Voli"
+                    fit="cover"
+                    h={180}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">Sosial</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                    Tim Voli Darmasaba Raih Juara Turnamen Desa
+                  </Text>
+                  <Group>
+                    <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>
+                </Stack>
+              </Paper>
+            </Stack>
+          </GridCol>
+        </Grid>
+        <Box pb={30}>
+          <Text fz={"h1"} fw={"bold"}>Berita Terbaru</Text>
+          <Divider color={colors["blue-button"]} />
+        </Box>
+        <SimpleGrid cols={{ base: 1, md: 3 }}>
+          {dataBeritaTerbaru.map((v, k) => {
+            return (
+              <Paper key={k} p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src={v.image}
+                    alt="Prestasi Voli"
+                    fit="cover"
+                    h={180}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">Sosial</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                    {v.judul}
+                  </Text>
+                  <Group>
+                    <Group gap="xs">
+                      <IconCalendar size={18} />
+                      <Text size="sm">{v.tanggal}</Text>
+                    </Group>
+                    <Group gap="xs">
+                      <IconUser size={18} />
+                      <Text size="sm">Admin Desa</Text>
+                    </Group>
+                  </Group>
+                </Stack>
+              </Paper>
+            )
+          })}
+        </SimpleGrid>
+        <Box py={"xl"}>
+          <Center>
+            <Pagination total={10} />
+          </Center>
+        </Box>
+      </Container>
+    </Box>
+  );
+}
+
+export default Sosial;

src/app/darmasaba/(pages)/desa/berita/(tabs)/teknologi.tsx

@@ -0,0 +1,186 @@
+import colors from '@/con/colors';
+import { Box, Center, Container, Divider, Grid, GridCol, Group, Image, Pagination, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { IconCalendar, IconUser } from '@tabler/icons-react';
+import React from 'react';
+
+const dataBeritaTerbaru = [
+  {
+    id: 1,
+    judul: 'Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik',
+    image: "/api/img/teknologi-3.png",
+    tanggal: "Selasa, 11 Januari 2025",
+  },
+  {
+    id: 2,
+    judul: 'DARMASABA DIGITAL PROJECT IS COMING!',
+    image: "/api/img/teknologi-1.png",
+    tanggal: "Kamis, 13 Januari 2025",
+  },
+  {
+    id: 3,
+    judul: 'DARMASABA MENUJU DESA DIGITAL',
+    image: "/api/img/teknologi-2.png",
+    tanggal: "Kamis, 13 Januari 2025",
+  },
+]
+function Teknologi() {
+  return (
+    <Box py={20}>
+      <Container size="xl" px={{ base: "md", md: "xl" }}>
+        <Grid gutter={{ base: "md", md: "xl" }} pb={70}>
+          {/* Berita Utama */}
+          <GridCol span={{ base: 12, md: 8 }}>
+            <Paper p="md" shadow="sm" radius="md">
+              <Stack gap="md">
+                <Box>
+                  <Image
+                    src="/api/img/berita-1.png"
+                    alt="Darmasaba Smart Village"
+                    radius="md"
+                    fit="cover"
+                    h={{ base: 450, md: 660 }}
+                  />
+                </Box>
+                <Group>
+                  <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                    <Text size="sm">Teknologi</Text>
+                  </Paper>
+                </Group>
+                <Text fz={{ base: "xl", md: "2xl" }} fw="bold" lineClamp={2}>
+                  Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik
+                </Text>
+                <Text size="md" lineClamp={3}>
+                  Desa Darmasaba mengambil langkah maju dalam transformasi digital dengan meluncurkan aplikasi Smart Village yang memudahkan warga dalam mengakses layanan publik secara online.
+                </Text>
+                <Group>
+                  <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>
+              </Stack>
+            </Paper>
+          </GridCol>
+
+          {/* Berita Sampingan */}
+          <GridCol span={{ base: 12, md: 4 }}>
+            <Stack gap="md">
+              {/* Berita Sampingan 1 */}
+              <Paper p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src="/api/img/teknologi-1.png"
+                    alt="Prestasi Voli"
+                    fit="cover"
+                    h={180}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">Teknologi</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                  DARMASABA DIGITAL PROJECT IS COMING! Desa Darmasaba nggak pernah berhenti berinovasi! ?
+                  Kali ini, kami siap menghadirkan gebrakan baru yang akan mempermudah sistem kerja di lingkungan
+                  </Text>
+                  <Group>
+                    <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>
+                </Stack>
+              </Paper>
+
+              {/* Berita Sampingan 2 */}
+              <Paper p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src="/api/img/teknologi-2.png"
+                    alt="Prestasi Voli"
+                    fit="cover"
+                    h={180}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">Teknologi</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={1}>
+                    DARMASABA MENUJU DESA DIGITAL
+                  </Text>
+                  <Group>
+                    <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>
+                </Stack>
+              </Paper>
+            </Stack>
+          </GridCol>
+        </Grid>
+        <Box pb={30}>
+          <Text fz={"h1"} fw={"bold"}>Berita Terbaru</Text>
+          <Divider color={colors["blue-button"]} />
+        </Box>
+        <SimpleGrid cols={{ base: 1, md: 3 }}>
+          {dataBeritaTerbaru.map((v, k) => {
+            return (
+              <Paper key={k} p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src={v.image}
+                    alt="Prestasi Voli"
+                    fit="cover"
+                    h={180}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">Teknologi</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                    {v.judul}
+                  </Text>
+                  <Group>
+                    <Group gap="xs">
+                      <IconCalendar size={18} />
+                      <Text size="sm">{v.tanggal}</Text>
+                    </Group>
+                    <Group gap="xs">
+                      <IconUser size={18} />
+                      <Text size="sm">Admin Desa</Text>
+                    </Group>
+                  </Group>
+                </Stack>
+              </Paper>
+            )
+          })}
+        </SimpleGrid>
+        <Box py={"xl"}>
+          <Center>
+            <Pagination total={10} />
+          </Center>
+        </Box>
+      </Container>
+    </Box>
+  );
+}
+
+export default Teknologi;

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

@@ -0,0 +1,102 @@
+import colors from '@/con/colors';
+import { Box, Container, Grid, GridCol, Stack, Tabs, TabsList, TabsPanel, TabsTab, Text, TextInput } from '@mantine/core';
+import { IconSearch } from '@tabler/icons-react';
+import BackButton from '../layanan/_com/BackButto';
+import Budaya from './(tabs)/budaya';
+import Ekonomi from './(tabs)/ekonomi';
+import Pemerintahan from './(tabs)/pemerintahan';
+import Semua from './(tabs)/semua';
+import Sosial from './(tabs)/sosial';
+import Teknologi from './(tabs)/teknologi';
+import Pembangunan from './(tabs)/pembangunan';
+
+
+function Page() {
+  return (
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
+      {/* Header */}
+      <Box px={{ base: "md", md: 100 }}>
+        <BackButton />
+      </Box>
+      <Container size="lg" px="md">
+        <Stack align="center" gap="0" >
+          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
+            Portal Berita Darmasaba
+          </Text>
+          <Text ta="center" px="md">
+            Temukan berbagai potensi dan keunggulan yang dimiliki Desa Darmasaba
+          </Text>
+        </Stack>
+      </Container>
+
+      {/* Tabs Menu */}
+      <Tabs color={colors['blue-button']} variant="pills" defaultValue="semua">
+        <Box px={{ base: "md", md: 100 }} py="md" bg={colors['BG-trans']} >
+          <Grid>
+            <GridCol span={{ base: 12, md: 9, lg: 8, xl: 9 }}>
+              <TabsList>
+                <TabsTab value="semua">
+                  Semua
+                </TabsTab>
+                <TabsTab value="pemerintahan">
+                  Pemerintahan
+                </TabsTab>
+                <TabsTab value="pembangunan" >
+                  Pembangunan
+                </TabsTab>
+                <TabsTab value="ekonomi" >
+                  Ekonomi
+                </TabsTab>
+                <TabsTab value="sosial" >
+                  Sosial
+                </TabsTab>
+                <TabsTab value="budaya" >
+                  Budaya
+                </TabsTab>
+                <TabsTab value="teknologi" >
+                  Teknologi
+                </TabsTab>
+              </TabsList>
+            </GridCol>
+            <GridCol span={{ base: 12, md: 3, lg: 4, xl: 3 }}>
+              <TextInput
+                w={{ base: "100%", md: "100%" }}
+                radius="lg"
+                placeholder="Cari Berita"
+                leftSection={<IconSearch size={18} />}
+              />
+            </GridCol>
+          </Grid>
+        </Box>
+
+        <TabsPanel value='semua'>
+          <Semua />
+        </TabsPanel>
+        <TabsPanel value='pemerintahan'>
+          <Pemerintahan />
+        </TabsPanel>
+        <TabsPanel value="pembangunan" >
+          <Pembangunan />
+        </TabsPanel>
+        <TabsPanel value="ekonomi" >
+          <Ekonomi />
+        </TabsPanel>
+        <TabsPanel value="sosial" >
+          <Sosial />
+        </TabsPanel>
+        <TabsPanel value="budaya" >
+          <Budaya />
+        </TabsPanel>
+        <TabsPanel value="teknologi" >
+          <Teknologi />
+        </TabsPanel>
+
+      </Tabs>
+
+
+
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/desa/berita/page.txt

@@ -0,0 +1,232 @@
+{backup}
+import colors from '@/con/colors';
+import { Box, Center, Container, Divider, Grid, GridCol, Group, Image, Pagination, Paper, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { IconCalendar, IconSearch, IconUser } from '@tabler/icons-react';
+import BackButton from '../layanan/_com/BackButto';
+
+const dataBeritaTerbaru = [
+  {
+    id: 1,
+    judul: 'Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik',
+    image: "/api/img/berita-1.png",
+    tanggal: "Selasa, 11 Januari 2025",
+  },
+  {
+    id: 2,
+    judul: 'Tim Voli Darmasaba Raih Juara Turnamen Desa',
+    image: "/api/img/prestasi-voli.jpeg",
+    tanggal: "Kamis, 13 Januari 2025",
+  },
+  {
+    id: 3,
+    judul: 'Tim Voli Darmasaba Raih Juara Turnamen Desa',
+    image: "/api/img/prestasi-voli.jpeg",
+    tanggal: "Kamis, 13 Januari 2025",
+  },
+]
+function Page() {
+  return (
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
+      {/* Header */}
+      <Box px={{ base: "md", md: 100 }}>
+        <BackButton />
+      </Box>
+      <Container size="lg" px="md">
+        <Stack align="center" gap="0" >
+          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
+            Portal Berita Darmasaba
+          </Text>
+          <Text ta="center" px="md">
+            Temukan berbagai potensi dan keunggulan yang dimiliki Desa Darmasaba
+          </Text>
+        </Stack>
+      </Container>
+
+      {/* Tabs Menu */}
+      <Box px={{ base: "md", md: "xl" }} py="md" bg={colors['BG-trans']} >
+        <Grid align="center" justify="space-between">
+          <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>
+              {['Pemerintahan', 'Pembangunan', 'Ekonomi', 'Sosial', 'Budaya', 'Teknologi'].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 Berita"
+              leftSection={<IconSearch size={18} />}
+              w="100%"
+            />
+          </GridCol>
+        </Grid>
+      </Box>
+
+      {/* Konten Berita */}
+      <Container size="xl" px={{ base: "md", md: "xl" }}>
+        <Grid gutter={{ base: "md", md: "xl" }} pb={70}>
+          {/* Berita Utama */}
+          <GridCol span={{ base: 12, md: 8 }}>
+            <Paper p="md" shadow="sm" radius="md">
+              <Stack gap="md">
+                <Box>
+                  <Image
+                    src="/api/img/berita-1.png"
+                    alt="Darmasaba Smart Village"
+                    radius="md"
+                    fit="cover"
+                    h={{ base: 450, md: 660 }}
+                  />
+                </Box>
+                <Group>
+                  <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                    <Text size="sm">Teknologi</Text>
+                  </Paper>
+                </Group>
+                <Text fz={{ base: "xl", md: "2xl" }} fw="bold" lineClamp={2}>
+                  Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik
+                </Text>
+                <Text size="md" lineClamp={3}>
+                  Desa Darmasaba mengambil langkah maju dalam transformasi digital dengan meluncurkan aplikasi Smart Village yang memudahkan warga dalam mengakses layanan publik secara online.
+                </Text>
+                <Group>
+                  <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>
+              </Stack>
+            </Paper>
+          </GridCol>
+
+          {/* Berita Sampingan */}
+          <GridCol span={{ base: 12, md: 4 }}>
+            <Stack gap="md">
+              {/* Berita Sampingan 1 */}
+              <Paper p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src="/api/img/prestasi-voli.jpeg"
+                    alt="Prestasi Voli"
+                    fit="cover"
+                    h={180}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">Teknologi</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                    Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik
+                  </Text>
+                  <Group>
+                    <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>
+                </Stack>
+              </Paper>
+
+              {/* Berita Sampingan 2 */}
+              <Paper p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src="/api/img/prestasi-voli.jpeg"
+                    alt="Prestasi Voli"
+                    fit="cover"
+                    h={180}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">Sosial</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                    Tim Voli Darmasaba Raih Juara Turnamen Desa
+                  </Text>
+                  <Group>
+                    <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>
+                </Stack>
+              </Paper>
+            </Stack>
+          </GridCol>
+        </Grid>
+        <Box pb={30}>
+          <Text fz={"h1"} fw={"bold"}>Berita Terbaru</Text>
+          <Divider color={colors["blue-button"]} />
+        </Box>
+        <SimpleGrid cols={{ base: 1, md: 3 }}>
+          {dataBeritaTerbaru.map((v, k) => {
+            return (
+              <Paper key={k} p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src={v.image}
+                    alt="Prestasi Voli"
+                    fit="cover"
+                    h={180}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">Teknologi</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                    {v.judul}
+                  </Text>
+                  <Group>
+                    <Group gap="xs">
+                      <IconCalendar size={18} />
+                      <Text size="sm">{v.tanggal}</Text>
+                    </Group>
+                    <Group gap="xs">
+                      <IconUser size={18} />
+                      <Text size="sm">Admin Desa</Text>
+                    </Group>
+                  </Group>
+                </Stack>
+              </Paper>
+            )
+          })}
+        </SimpleGrid>
+        <Box py={"xl"}>
+          <Center>
+            <Pagination total={10} />
+          </Center>
+        </Box>
+      </Container>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/desa/galery/(tabs)/foto.tsx

@@ -0,0 +1,64 @@
+import colors from '@/con/colors';
+import { SimpleGrid, Box, Paper, Center, Stack, Image, Text } from '@mantine/core';
+import React from 'react';
+
+const data = [
+  {
+    id: 1,
+    image: "/api/img/galeri-1.png",
+    title: "Pendapatan",
+    tanggal: "3 Mar 2025",
+    judul: "Pemasangan Wifi Gratis Di Publik Desa",
+
+  },
+  {
+    id: 2,
+    image: "/api/img/galeri-2.png",
+    title: "Belanja",
+    tanggal: "4 Mar 2025",
+    judul: "Panen raya Desa Darmasaba",
+  },
+  {
+    id: 3,
+    image: "/api/img/galeri-3.png",
+    title: "Pembiayaan",
+    tanggal: "5 Mar 2025",
+    judul: "Kegiatan Pembangunan Pelinggih",
+  }
+]
+function Foto() {
+  return (
+    <Box pt={20}>
+      <SimpleGrid
+          cols={{
+            base: 1,
+            md: 3,
+          }}>
+          {data.map((v, k) => {
+            return (
+              <Box key={k}>
+                <Paper mb={50} p={"md"} radius={26} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
+                  <Box>
+                    <Center>
+                      <Image src={v.image} alt='' />
+                    </Center>
+                  </Box>
+                  <Box>
+                    <Stack gap={"sm"} py={10}>
+                      <Text fz={{ base: "sm", md: "sm" }}>{v.tanggal}</Text>
+                      <Text fw={"bold"} fz={{ base: "sm", md: "sm" }}>{v.judul}</Text>
+                      <Text ta={"justify"} fz={{ base: "sm", md: "sm" }}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        Fusce sagittis nec arcu ac ornare. Praesent a porttitor
+                        felis. Proin varius ex nisl, in hendrerit odio tristique vel. </Text>
+                    </Stack>
+                  </Box>
+                </Paper>
+              </Box>
+            )
+          })}
+        </SimpleGrid>
+    </Box>
+  );
+}
+
+export default Foto;

src/app/darmasaba/(pages)/desa/galery/(tabs)/video.tsx

@@ -0,0 +1,64 @@
+import colors from '@/con/colors';
+import { Box, Center, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+
+const data = [
+  {
+    id: 1,
+    video: "https://www.youtube.com/embed/J2uZcZlvL7g?si=3pWy0ho77dW0E2Gt",
+    tanggal: "3 Mar 2025",
+    judul: "MENERIMA KUNJUNGAN STUDI TIRU DARI PEMERINTAH DESA TUA SULAWESI SELATAN",
+
+  },
+  {
+    id: 2,
+    video: "https://www.youtube.com/embed/GX4sqS5zAzw?si=rulOAa2Ylbs4_R82",
+    tanggal: "4 Mar 2025",
+    judul: "Sosialisasi Pengelolaan Sampah di SD NO 3 Desa Darmasaba",
+  },
+  {
+    id: 3,
+    video: "https://www.youtube.com/embed/HCY4H6ODmeA?si=0epW8PAtd6Jum90k",
+    tanggal: "5 Mar 2025",
+    judul: "Posyandu dan Senam Lansia Banjar Gulingan",
+  }
+]
+function Video() {
+  return (
+    <Box pt={20}>
+      <SimpleGrid
+        cols={{
+          base: 1,
+          md: 3,
+        }}>
+        {data.map((v, k) => {
+          return (
+            <Box key={k}>
+              <Paper mb={50} p={"md"} radius={26} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
+                <Box>
+                  <Center>
+                    <Box style={{ maxWidth: "560px", width: "100%", aspectRatio: "16/9" }}>
+                      <iframe style={{ borderRadius: "16px" }} width="100%"
+                        height="100%"
+                        src={v.video} title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"  ></iframe>
+                    </Box>
+                  </Center>
+                </Box>
+                <Box>
+                  <Stack gap={"sm"} py={10}>
+                    <Text fz={{ base: "sm", md: "sm" }}>{v.tanggal}</Text>
+                    <Text fw={"bold"} fz={{ base: "sm", md: "sm" }} lineClamp={1}>{v.judul}</Text>
+                    <Text ta={"justify"} fz={{ base: "sm", md: "sm" }}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                      Fusce sagittis nec arcu ac ornare. Praesent a porttitor
+                      felis. Proin varius ex nisl, in hendrerit odio tristique vel. </Text>
+                  </Stack>
+                </Box>
+              </Paper>
+            </Box>
+          )
+        })}
+      </SimpleGrid>
+    </Box>
+  );
+}
+
+export default Video;

src/app/darmasaba/(pages)/desa/galery/backup.txt

@@ -0,0 +1,100 @@
+import colors from '@/con/colors';
+import { ActionIcon, Box, Center, Container, Flex, Image, Paper, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { IconPhoto, IconSearch, IconVideo } from '@tabler/icons-react';
+import BackButton from '../layanan/_com/BackButto';
+
+const data = [
+  {
+    id: 1,
+    image: "/api/img/galeri-1.png",
+    title: "Pendapatan",
+    tanggal: "3 Mar 2025",
+    judul: "Pemasangan Wifi Gratis Di Publik Desa",
+
+  },
+  {
+    id: 2,
+    image: "/api/img/galeri-2.png",
+    title: "Belanja",
+    tanggal: "4 Mar 2025",
+    judul: "Panen raya Desa Darmasaba",
+  },
+  {
+    id: 3,
+    image: "/api/img/galeri-3.png",
+    title: "Pembiayaan",
+    tanggal: "5 Mar 2025",
+    judul: "Kegiatan Pembangunan Pelinggih",
+  }
+]
+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="xs" mb="xl">
+          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
+            Galeri Kegiatan Desa Darmasaba
+          </Text>
+        </Stack>
+      </Container>
+      <Box px={{ base: "md", md: 100 }}>
+        <Flex justify={"space-between"} align={"center"} pb={50}>
+          <Flex gap={"lg"}>
+            <ActionIcon variant='transparent' p={50}>
+              <Flex c={colors["blue-button"]} align={"center"} gap={10}>
+                <IconPhoto size={35} />
+                <Text fz={"h4"}>Foto</Text>
+              </Flex>
+            </ActionIcon>
+            <ActionIcon variant='transparent' p={50}>
+              <Flex c={colors["blue-button"]} align={"center"} gap={10}>
+                <IconVideo size={35} />
+                <Text fz={"h4"}>Video</Text>
+              </Flex>
+            </ActionIcon>
+          </Flex>
+          <TextInput
+            placeholder='Cari Galeri'
+            radius="lg"
+            leftSection={<IconSearch size={20} />}
+            w={{ base: "25%", md: "30%" }}
+          />
+        </Flex>
+        <SimpleGrid
+          cols={{
+            base: 1,
+            md: 3,
+          }}>
+          {data.map((v, k) => {
+            return (
+              <Box key={k}>
+                <Paper mb={50} p={"md"} radius={26} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
+                  <Box>
+                    <Center>
+                      <Image src={v.image} alt='' />
+                    </Center>
+                  </Box>
+                  <Box>
+                    <Stack gap={"sm"} py={10}>
+                      <Text fz={{ base: "sm", md: "sm" }}>{v.tanggal}</Text>
+                      <Text fw={"bold"} fz={{ base: "sm", md: "sm" }}>{v.judul}</Text>
+                      <Text ta={"justify"} fz={{ base: "sm", md: "sm" }}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        Fusce sagittis nec arcu ac ornare. Praesent a porttitor
+                        felis. Proin varius ex nisl, in hendrerit odio tristique vel. </Text>
+                    </Stack>
+                  </Box>
+                </Paper>
+              </Box>
+            )
+          })}
+        </SimpleGrid>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

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

@@ -0,0 +1,63 @@
+import colors from '@/con/colors';
+import { Box, Container, Grid, GridCol, Group, Stack, Tabs, TabsList, TabsPanel, TabsTab, Text, TextInput } from '@mantine/core';
+import { IconPhoto, IconSearch, IconVideo } from '@tabler/icons-react';
+import BackButton from '../layanan/_com/BackButto';
+import Foto from './(tabs)/foto';
+import Video from './(tabs)/video';
+
+
+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="xs" mb="xl">
+          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
+            Galeri Kegiatan Desa Darmasaba
+          </Text>
+        </Stack>
+      </Container>
+      <Box px={{ base: "md", md: 100 }}>
+        <Tabs color={colors['blue-button']} defaultValue="foto">
+          <Grid align='center'>
+            <GridCol span={{ base: 12, md: 9, lg: 8, xl: 9 }}>
+              <Group>
+                <TabsList>
+                  <TabsTab style={{ color: colors['blue-button'] }} fz={"xl"} value="foto" leftSection={<IconPhoto color={colors['blue-button']} size={45} />}>
+                    Foto
+                  </TabsTab>
+                  <TabsTab style={{ color: colors['blue-button'] }} fz={"xl"} value="video" leftSection={<IconVideo color={colors['blue-button']} size={45} />}>
+                    Video
+                  </TabsTab>
+                </TabsList>
+              </Group>
+            </GridCol>
+            <GridCol span={{ base: 12, md: 3, lg: 4, xl: 3 }}>
+              <TextInput
+                w={{ base: "100%", md: "100%" }}
+                radius="lg"
+                placeholder="Cari Berita"
+                leftSection={<IconSearch size={18} />}
+              />
+            </GridCol>
+          </Grid>
+
+          <TabsPanel value="foto">
+            <Foto />
+          </TabsPanel>
+
+          <TabsPanel value="video">
+            <Video />
+          </TabsPanel>
+
+        </Tabs>
+
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/app/darmasaba/(pages)/desa/layanan/(detail)/surat-keterangan-beda-biodata-diri/page.tsx

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

src/app/darmasaba/(pages)/desa/layanan/(detail)/surat-keterangan-belum-kawin/page.tsx

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

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

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

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

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