tambahannya

src/app/_com/SpashScreen.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import colors from "@/con/colors";
+import images from "@/con/images";
+import { Flex, Image, Paper, Stack, Text } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+
+export default function SpashScreen() {
+  useShallowEffect(() => {
+    const timeout = setTimeout(() => {
+      window.location.href = "/darmasaba";
+    }, 3000);
+    return () => clearTimeout(timeout);
+  }, []);
+  return (
+    <Stack
+      w={"100%"}
+      h={"100vh"}
+      justify="center"
+      align="center"
+      bg={colors["blue-button"]}
+    >
+      <Paper p={"md"} miw={320}>
+        <Flex>
+          <Image
+            src={images["darmasaba-icon"]}
+            alt="darmasaba"
+            w={100}
+            h={100}
+          />
+          <Stack p={"md"} gap={"0"}>
+            <Text>Pemerintah Desa</Text>
+            <Text c={colors["blue-button"]} fz={"2rem"} fw={"bold"}>
+              DARMASABA
+            </Text>
+          </Stack>
+        </Flex>
+      </Paper>
+    </Stack>
+  );
+}

src/app/admin/_com/AdminNav.tsx

@@ -0,0 +1,18 @@
+"use client";
+import { Button, Stack } from "@mantine/core";
+import { Link } from "next-view-transitions";
+
+export default function AdminNav() {
+  return (
+    <Stack>
+      <Button.Group p={"md"}>
+        <Button component={Link} href="/admin/images">
+          Images
+        </Button>
+        <Button component={Link} href="/admin/csv">
+          CSV
+        </Button>
+      </Button.Group>
+    </Stack>
+  );
+}

src/app/admin/_com/ListImage.tsx

@@ -0,0 +1,139 @@
+"use client";
+import stateListImage from "@/state/state-list-image";
+import {
+  ActionIcon,
+  Box,
+  Button,
+  Group,
+  Image,
+  Pagination,
+  Paper,
+  SimpleGrid,
+  Stack,
+  Text,
+  TextInput,
+} from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { IconSearch, IconX } from "@tabler/icons-react";
+import { motion } from "framer-motion";
+import { useState } from "react";
+import toast from "react-simple-toasts";
+import { useSnapshot } from "valtio";
+
+export default function ListImage() {
+  const { list, total } = useSnapshot(stateListImage);
+  const [loading, setLoading] = useState(false);
+
+  useShallowEffect(() => {
+    // get url
+    console.log(window.location.origin);
+    stateListImage.load();
+  }, []);
+
+  let timeOut: NodeJS.Timer;
+  return (
+    <Stack p={"lg"}>
+      <Group justify="end">
+        <TextInput
+          leftSection={<IconSearch />}
+          rightSection={
+            <ActionIcon
+              variant="transparent"
+              onClick={() => {
+                stateListImage.load();
+              }}
+            >
+              <IconX />
+            </ActionIcon>
+          }
+          placeholder="Cari"
+          onChange={(e) => {
+            if (timeOut) clearTimeout(timeOut);
+            timeOut = setTimeout(() => {
+              stateListImage.load({ search: e.target.value });
+            }, 200);
+          }}
+        />
+      </Group>
+      <SimpleGrid
+        cols={{
+          base: 3,
+          md: 5,
+          lg: 10,
+        }}
+      >
+        {list &&
+          list.map((v, k) => {
+            return (
+              <Paper key={k} shadow="sm">
+                <Stack pos={"relative"} gap={0} justify="space-between">
+                  <motion.div
+                    onClick={() => {
+                      // copy to clipboard
+                      navigator.clipboard.writeText(v.url);
+                      toast("Berhasil disalin");
+                    }}
+                    whileHover={{ scale: 1.05 }}
+                    whileTap={{ scale: 0.8 }}
+                  >
+                    <Image
+                      h={100}
+                      src={v.url + "?size=100"}
+                      alt={v.name}
+                      fit="cover"
+                      loading="lazy"
+                      style={{
+                        objectFit: "cover",
+                        objectPosition: "center",
+                      }}
+                    />
+                  </motion.div>
+                  <Box p={"md"} h={54}>
+                    <Text lineClamp={2} fz={"xs"}>
+                      {v.name}
+                    </Text>
+                  </Box>
+                  <Group justify="end">
+                    <Button.Group>
+                      <Button
+                        onClick={() => {
+                          // copy to clipboard
+                          navigator.clipboard.writeText(v.url);
+                          toast("Berhasil disalin");
+                        }}
+                        variant="subtle"
+                        size="compact-xs"
+                      >
+                        Copy
+                      </Button>
+                      <Button
+                        variant="subtle"
+                        loading={loading}
+                        size="compact-xs"
+                        onClick={() => {
+                          stateListImage.del({ name: v.name }).finally(() => {
+                            setLoading(false);
+                          });
+                        }}
+                      >
+                        delete
+                      </Button>
+                    </Button.Group>
+                  </Group>
+                </Stack>
+              </Paper>
+            );
+          })}
+      </SimpleGrid>
+      {total && (
+        <Pagination
+          total={total}
+          onChange={(e) => {
+            stateListImage.page = e;
+            stateListImage.load();
+          }}
+        />
+      )}
+    </Stack>
+  );
+}

src/app/admin/_com/UploadCsv.tsx

@@ -0,0 +1,49 @@
+"use client";
+import ApiFetch from "@/lib/api-fetch";
+import { Group, Stack, Text } from "@mantine/core";
+import { Dropzone } from "@mantine/dropzone";
+import { useState } from "react";
+import toast from "react-simple-toasts";
+
+export default function UploadCsv() {
+  return (
+    <Stack p={"md"}>
+      <DropUpload />
+    </Stack>
+  );
+}
+
+function DropUpload() {
+  const [loading, setLoading] = useState(false);
+
+  return (
+    <Stack justify="center" align="center">
+      <Group>
+        <Dropzone
+          loading={loading}
+          miw={460}
+          // accept csv
+          accept={["text/csv"]}
+          onDrop={async (droppedFiles) => {
+            if (droppedFiles.length < 0) {
+              return toast("Tidak ada file yang diunggah");
+            }
+
+            setLoading(true);
+            for (const file of droppedFiles) {
+              await ApiFetch.api["upl-csv-single"].post({
+                name: file.name,
+                file,
+              });
+            }
+            setLoading(false);
+          }}
+        >
+          <Stack>
+            <Text ta="center">Drop Csv here</Text>
+          </Stack>
+        </Dropzone>
+      </Group>
+    </Stack>
+  );
+}

src/app/admin/_com/UploadImage.tsx

@@ -0,0 +1,34 @@
+"use client";
+import ApiFetch from "@/lib/api-fetch";
+import stateListImage from "@/state/state-list-image";
+import { Stack, Text } from "@mantine/core";
+import { Dropzone, IMAGE_MIME_TYPE } from "@mantine/dropzone";
+import { useState } from "react";
+
+export default function UploadImage() {
+  const [loading, setLoading] = useState(false);
+  return (
+    <Stack p={"md"}>
+      <Dropzone
+        loading={loading}
+        accept={IMAGE_MIME_TYPE} // Hanya menerima tipe file gambar
+        onDrop={async (droppedFiles) => {
+          setLoading(true);
+          for (const file of droppedFiles) {
+            await ApiFetch.api["upl-img-single"].post({
+              file: file,
+              name: file.name,
+            });
+          }
+
+          setLoading(false);
+          stateListImage.load();
+        }}
+      >
+        <Stack align="center">
+          <Text ta="center">Drop images here</Text>
+        </Stack>
+      </Dropzone>
+    </Stack>
+  );
+}

src/app/admin/csv/page.tsx

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

src/app/admin/images/page.tsx

@@ -0,0 +1,12 @@
+import { Stack } from "@mantine/core";
+import ListImage from "../_com/ListImage";
+import UploadImage from "../_com/UploadImage";
+
+export default function Page() {
+  return (
+    <Stack>
+      <UploadImage />
+      <ListImage />
+    </Stack>
+  );
+}

src/app/admin/layout.tsx

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

src/app/admin/page.tsx

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

src/app/api/[[...slugs]]/_lib/img-del.ts

@@ -0,0 +1,20 @@
+import fs from "fs/promises";
+import path from "path";
+
+async function imgDel({
+  name,
+  UPLOAD_DIR_IMAGE,
+}: {
+  name: string;
+  UPLOAD_DIR_IMAGE: string;
+}) {
+  try {
+    await fs.unlink(path.join(UPLOAD_DIR_IMAGE, name));
+    return "ok";
+  } catch (error) {
+    console.log(error);
+    return "error";
+  }
+}
+
+export default imgDel;

src/app/api/[[...slugs]]/_lib/img.ts

@@ -0,0 +1,61 @@
+import fs from "fs/promises";
+import path from "path";
+import sharp from "sharp";
+
+async function img({
+  name,
+  UPLOAD_DIR_IMAGE,
+  ROOT,
+  size,
+}: {
+  name: string;
+  UPLOAD_DIR_IMAGE: string;
+  ROOT: string;
+  size?: number; // Ukuran opsional (tidak ada default)
+}) {
+  const completeName = path.basename(name); // Nama file lengkap
+  const ext = path.extname(name).toLowerCase(); // Ekstensi file dalam huruf kecil
+  //   const fileNameWithoutExt = path.basename(name, ext); // Nama file tanpa ekstensi
+
+  // Default image jika terjadi kesalahan
+  const noImage = path.join(ROOT, "public/no-image.jpg");
+
+  // Validasi ekstensi file
+  if (![".jpg", ".jpeg", ".png"].includes(ext)) {
+    console.warn(`Ekstensi file tidak didukung: ${ext}`);
+    return new Response(await fs.readFile(noImage), {
+      headers: { "Content-Type": "image/jpeg" },
+    });
+  }
+
+  try {
+    // Path ke file asli
+    const filePath = path.join(UPLOAD_DIR_IMAGE, completeName);
+
+    // Periksa apakah file ada
+    await fs.stat(filePath);
+
+    // Metadata gambar asli
+    const metadata = await sharp(filePath).metadata();
+
+    // Proses resize menggunakan sharp
+    const resizedImageBuffer = await sharp(filePath)
+      .resize(size || metadata.width) // Gunakan size jika diberikan, jika tidak gunakan width asli
+      .toBuffer();
+
+    return new Response(resizedImageBuffer, {
+      headers: {
+        "Cache-Control": "public, max-age=3600, stale-while-revalidate=600",
+        "Content-Type": "image/jpeg",
+      },
+    });
+  } catch (error) {
+    console.error(`Gagal memproses file: ${name}`, error);
+    // Jika file tidak ditemukan atau gagal diproses, kembalikan default image
+    return new Response(await fs.readFile(noImage), {
+      headers: { "Content-Type": "image/jpeg" },
+    });
+  }
+}
+
+export default img;

src/app/api/[[...slugs]]/_lib/imgs.ts

@@ -0,0 +1,30 @@
+import fs from "fs/promises";
+
+async function imgs({
+  search = "",
+  page = 1,
+  count = 20,
+  UPLOAD_DIR_IMAGE,
+}: {
+  search?: string;
+  page?: number;
+  count?: number;
+  UPLOAD_DIR_IMAGE: string;
+}) {
+  const files = await fs.readdir(UPLOAD_DIR_IMAGE);
+
+  return files
+    .filter(
+      (file) =>
+        file.endsWith(".jpg") || file.endsWith(".png") || file.endsWith(".jpeg")
+    )
+    .filter((file) => file.includes(search))
+    .slice((page - 1) * count, page * count)
+    .map((file) => ({
+      name: file,
+      url: `/api/img/${file}`,
+      total: files.length,
+    }));
+}
+
+export default imgs;

src/app/api/[[...slugs]]/_lib/upl-csv-single.ts

@@ -0,0 +1,12 @@
+export async function uplCsvSingle({
+  fileName,
+  file,
+}: {
+  fileName: string;
+  file: File;
+}) {
+  const textFile = await file.text();
+  console.log(fileName, textFile);
+
+  return "ok";
+}

src/app/api/[[...slugs]]/_lib/upl-csv.ts

@@ -0,0 +1,16 @@
+async function uplCsv({ files }: { files: File[] }) {
+  if (!Array.isArray(files) || files.length === 0) {
+    throw new Error("Tidak ada file yang diunggah");
+  }
+
+  for (const file of files) {
+    const textFile = await file.text();
+    const fileName = file.name;
+
+    console.log(textFile, fileName);
+  }
+
+  return "ok";
+}
+
+export default uplCsv;

src/app/api/[[...slugs]]/_lib/upl-img-single.ts

@@ -0,0 +1,32 @@
+import { nanoid } from "nanoid";
+import fs from "fs/promises";
+import path from "path";
+import _ from "lodash";
+
+export async function uplImgSingle({
+  fileName,
+  file,
+  UPLOAD_DIR_IMAGE,
+}: {
+  fileName: string;
+  file: File;
+  UPLOAD_DIR_IMAGE: string;
+}) {
+  if (!fileName || typeof fileName !== "string" || fileName.trim() === "") {
+    console.warn(`Nama file tidak valid: ${fileName}`);
+    fileName = nanoid() + ".jpg";
+  }
+  const ext = path.extname(fileName).toLowerCase();
+  const fileNameWithoutExt = path.basename(fileName, ext);
+  const fileNameKebabCase = _.kebabCase(fileNameWithoutExt) + ext;
+
+  try {
+    const buffer = Buffer.from(await file.arrayBuffer());
+    const filePath = path.join(UPLOAD_DIR_IMAGE, fileNameKebabCase);
+    await fs.writeFile(filePath, buffer);
+    return filePath;
+  } catch (error) {
+    console.log(error);
+    return "error";
+  }
+}

src/app/api/[[...slugs]]/_lib/upl-img.ts

@@ -0,0 +1,52 @@
+import path from "path";
+import fs from "fs/promises";
+import { nanoid } from "nanoid";
+
+async function uplImg({
+  files,
+  UPLOAD_DIR_IMAGE,
+}: {
+  files: File[];
+  UPLOAD_DIR_IMAGE: string;
+}) {
+  // Validasi input
+  if (!Array.isArray(files) || files.length === 0) {
+    throw new Error("Tidak ada file yang diunggah");
+  }
+
+  for (const file of files) {
+    let fileName = file.name;
+
+    // Validasi nama file
+    if (!fileName || typeof fileName !== "string" || fileName.trim() === "") {
+      console.warn(`Nama file tidak valid: ${fileName}`);
+      fileName = nanoid() + ".jpg";
+    }
+
+    // Sanitasi nama file untuk mencegah path traversal
+    const sanitizedFileName = sanitizeFileName(fileName);
+
+    try {
+      // Konversi file ke buffer
+      const buffer = Buffer.from(await file.arrayBuffer());
+
+      // Tulis file ke direktori uploads
+      const filePath = path.join(UPLOAD_DIR_IMAGE, sanitizedFileName);
+      await fs.writeFile(filePath, buffer);
+
+      console.log(`File berhasil diunggah: ${sanitizedFileName}`);
+    } catch (error) {
+      console.error(`Gagal mengunggah file ${fileName}:`, error);
+      throw new Error(`Gagal mengunggah file: ${fileName}`);
+    }
+  }
+
+  return "ok";
+}
+
+// Fungsi untuk membersihkan nama file dari karakter yang tidak aman
+function sanitizeFileName(fileName: string): string {
+  return fileName.replace(/[^a-zA-Z0-9._\-]/g, "_");
+}
+
+export default uplImg;

src/app/api/[[...slugs]]/route.ts

@@ -1,32 +1,171 @@
 import prisma from "@/lib/prisma";
 import cors, { HTTPMethod } from "@elysiajs/cors";
 import swagger from "@elysiajs/swagger";
-import { Elysia } from "elysia";
+import { Elysia, t } from "elysia";
 import getPotensi from "./_lib/get-potensi";
+import img from "./_lib/img";
+import fs from "fs/promises";
+import path from "path";
+import uplImg from "./_lib/upl-img";
+import imgs from "./_lib/imgs";
+import uplCsv from "./_lib/upl-csv";
+import imgDel from "./_lib/img-del";
+import { uplImgSingle } from "./_lib/upl-img-single";
+import { uplCsvSingle } from "./_lib/upl-csv-single";
+const ROOT = process.cwd();
+
+if (!process.env.WIBU_UPLOAD_DIR)
+  throw new Error("WIBU_UPLOAD_DIR is not defined");
+
+const UPLOAD_DIR = path.join(ROOT, process.env.WIBU_UPLOAD_DIR);
+const UPLOAD_DIR_IMAGE = path.join(UPLOAD_DIR, "image");
+
+// create uploads dir
+fs.mkdir(UPLOAD_DIR, {
+  recursive: true,
+}).catch(() => {});
+
+// create image uploads dir
+fs.mkdir(UPLOAD_DIR_IMAGE, {
+  recursive: true,
+}).catch(() => {});
 
 const corsConfig = {
-    origin: "*",
-    methods: ["GET", "POST", "PATCH", "DELETE", "PUT"] as HTTPMethod[],
-    allowedHeaders: "*",
-    exposedHeaders: "*",
-    maxAge: 5,
-    credentials: true,
+  origin: "*",
+  methods: ["GET", "POST", "PATCH", "DELETE", "PUT"] as HTTPMethod[],
+  allowedHeaders: "*",
+  exposedHeaders: "*",
+  maxAge: 5,
+  credentials: true,
 };
 
-
 async function layanan() {
-    const data = await prisma.layanan.findMany();
-    return { data };
+  const data = await prisma.layanan.findMany();
+  return { data };
 }
 const ApiServer = new Elysia()
-    .use(swagger({ path: "/api/docs" }))
-    .use(cors(corsConfig))
-    .group("/api", app => app
-        .get("/layanan", layanan)
-        .get("/potensi", getPotensi)
-    )
-
-
+  .use(swagger({ path: "/api/docs" }))
+  .use(cors(corsConfig))
+  .onError(({ code }) => {
+    if (code === "NOT_FOUND") {
+      return {
+        status: 404,
+        body: "Route not found :(",
+      };
+    }
+  })
+  .group("/api", (app) =>
+    app
+      .get("/layanan", layanan)
+      .get("/potensi", getPotensi)
+      .get(
+        "/img/:name",
+        ({ params, query }) => {
+          return img({
+            name: params.name,
+            UPLOAD_DIR_IMAGE,
+            ROOT,
+            size: query.size,
+          });
+        },
+        {
+          params: t.Object({
+            name: t.String(),
+          }),
+          query: t.Optional(
+            t.Object({
+              size: t.Optional(t.Number()),
+            })
+          ),
+        }
+      )
+      .delete(
+        "/img/:name",
+        ({ params }) => {
+          return imgDel({
+            name: params.name,
+            UPLOAD_DIR_IMAGE,
+          });
+        },
+        {
+          params: t.Object({
+            name: t.String(),
+          }),
+        }
+      )
+      .get(
+        "/imgs",
+        ({ query }) => {
+          return imgs({
+            search: query.search,
+            page: query.page,
+            count: query.count,
+            UPLOAD_DIR_IMAGE,
+          });
+        },
+        {
+          query: t.Optional(
+            t.Object({
+              page: t.Number({ default: 1 }),
+              count: t.Number({ default: 10 }),
+              search: t.String({ default: "" }),
+            })
+          ),
+        }
+      )
+      .post(
+        "/upl-img",
+        ({ body }) => {
+          console.log(body.title);
+          return uplImg({ files: body.files, UPLOAD_DIR_IMAGE });
+        },
+        {
+          body: t.Object({
+            title: t.String(),
+            files: t.Files({ multiple: true }),
+          }),
+        }
+      )
+      .post(
+        "/upl-img-single",
+        ({ body }) => {
+          return uplImgSingle({
+            fileName: body.name,
+            file: body.file,
+            UPLOAD_DIR_IMAGE,
+          });
+        },
+        {
+          body: t.Object({
+            name: t.String(),
+            file: t.File(),
+          }),
+        }
+      )
+      .post(
+        "/upl-csv-single",
+        ({ body }) => {
+          return uplCsvSingle({ fileName: body.name, file: body.file });
+        },
+        {
+          body: t.Object({
+            name: t.String(),
+            file: t.File(),
+          }),
+        }
+      )
+      .post(
+        "/upl-csv",
+        ({ body }) => {
+          return uplCsv({ files: body.files });
+        },
+        {
+          body: t.Object({
+            files: t.Files(),
+          }),
+        }
+      )
+  );
 
 export const GET = ApiServer.handle;
 export const POST = ApiServer.handle;
@@ -34,5 +173,4 @@ export const PATCH = ApiServer.handle;
 export const DELETE = ApiServer.handle;
 export const PUT = ApiServer.handle;
 
-export type AppServer = typeof ApiServer
-
+export type AppServer = typeof ApiServer;

src/app/darmasaba/(pages)/module/[sub]/page.tsx

@@ -0,0 +1,6 @@
+export default async function Page({ params }: { params: Promise<{ sub: string }> }) {
+    const { sub } = await params
+    return <div>
+        {sub}
+    </div>
+}

src/app/darmasaba/(tambahan)/penghargaan/page.tsx

@@ -0,0 +1,5 @@
+export default function Page() {
+    return <div>
+        penghargaan
+    </div>
+}

src/app/darmasaba/_com/Footer.tsx

@@ -0,0 +1,15 @@
+
+import colors from "@/con/colors";
+import { Stack, Container, Center, Text } from "@mantine/core";
+
+function Footer() {
+    return <Stack bg={colors["blue-button"]} c={colors["white-trans-1"]}>
+        <Container w={{ base: "100%", md: "80%" }} p={"xl"} h={720} >
+            <Center>
+                <Text fz={"3.4rem"}>Footer</Text>
+            </Center>
+        </Container>
+    </Stack>
+}
+
+export default Footer;

src/app/darmasaba/_com/LoadDataFirstClient.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+
+
+export default function LoadDataFirstClient() {
+
+  return null;
+}

src/app/darmasaba/_com/MainLayout.tsx

@@ -0,0 +1,22 @@
+import colors from "@/con/colors";
+import { Box, Space, Stack } from "@mantine/core";
+import Footer from "./Footer";
+import { Navbar } from "./Navbar";
+
+export function MainLayout({ children }: { children: React.ReactNode }) {
+    return (
+        <Stack gap={0} bg={colors.grey[1]}>
+            <Navbar />
+            <Space h={{
+                base: "2.2rem",
+                md: "2.5rem"
+            }} />
+            <Box style={{
+                overflow: "scroll"
+            }}>
+                {children}
+            </Box>
+            <Footer />
+        </Stack>
+    )
+}

src/app/darmasaba/_com/NavBarSearch.tsx

@@ -0,0 +1,23 @@
+import stateNav from "@/state/state-nav";
+import { Container, Stack, TextInput } from "@mantine/core";
+
+export function NavbarSearch() {
+    return <Container w={{
+        base: '100%',
+        md: '80%',
+    }} fluid py={"xl"}
+        onMouseLeave={stateNav.clear}
+    >
+        <Stack pt={"xl"}>
+            <TextInput
+                autoFocus
+                styles={{
+                    input: {
+                        borderRadius: "xl",
+                        color: "black",
+                        // backgroundColor: "rgba(255, 255, 255, 0.3)"
+                    }
+                }} size="lg" variant="transparent" placeholder="Cari" />
+        </Stack>
+    </Container>
+}

src/app/darmasaba/_com/Navbar.tsx

@@ -0,0 +1,75 @@
+"use client";
+import colors from "@/con/colors";
+import navbarListMenu from "@/con/navbar-list-menu";
+import stateNav from "@/state/state-nav";
+import { ActionIcon, Box, Burger, Group, Stack, Text } from "@mantine/core";
+import { IconHome, IconSquareArrowRight } from "@tabler/icons-react";
+import { motion } from 'framer-motion';
+import { useSnapshot } from "valtio";
+import { MenuItem } from "../../../../types/menu-item";
+import { NavbarMainMenu } from "./NavbarMainMenu";
+import { useRouter } from 'next/navigation'
+
+export function Navbar() {
+  const { item, isSearch, mobileOpen } = useSnapshot(stateNav);
+  const router = useRouter()
+  return (
+    <Box>
+      <Box
+        className="glass2"
+        w={"100%"}
+        pos={"fixed"}
+        top={0}
+        style={{
+          zIndex: 100,
+          overflow: "scroll"
+        }}
+      >
+        <NavbarMainMenu listNavbar={navbarListMenu} />
+        <Stack hiddenFrom="sm" bg={colors.grey[2]}>
+          <Group justify="space-between">
+            <ActionIcon variant="transparent" onClick={() => {
+              router.push("/darmasaba")
+              stateNav.mobileOpen = false
+            }}>
+              <IconHome />
+            </ActionIcon>
+            <Burger onClick={() => stateNav.mobileOpen = !stateNav.mobileOpen} color={colors["blue-button"]} opened={mobileOpen} />
+          </Group>
+          {mobileOpen && <motion.div
+            initial={{ x: 300 }}
+            animate={{ x: 0 }}
+            transition={{ duration: 0.1 }}
+            style={{
+              height: "100vh",
+              overflow: "scroll"
+            }}
+          >
+            <NavbarMobile listNavbar={navbarListMenu} />
+          </motion.div>}
+        </Stack>
+      </Box>
+      {(item || isSearch) && <Box className="glass" />}
+    </Box>
+  );
+}
+
+function NavbarMobile({ listNavbar }: { listNavbar: MenuItem[] }) {
+  const router = useRouter()
+  return <Stack p={"md"} style={{ backgroundColor: "rgba(255, 255, 255, 0.3)" }}>
+    {listNavbar.map((item, k) => {
+      return <Stack key={k}>
+        <Group justify="space-between" onClick={() => {
+          router.push(item.href)
+          stateNav.mobileOpen = false
+        }}>
+          <Text c="dark.9"
+            style={{ fontWeight: "bold" }}
+          >{item.name}</Text>
+          <IconSquareArrowRight />
+        </Group>
+        {item.children && <NavbarMobile listNavbar={item.children} />}
+      </Stack>
+    })}
+  </Stack>
+}

src/app/darmasaba/_com/NavbarMainMenu.tsx

@@ -0,0 +1,71 @@
+'use client'
+
+import colors from "@/con/colors"
+import stateNav from "@/state/state-nav"
+import { ActionIcon, Button, Container, Flex, Image, Stack } from "@mantine/core"
+import { useHover } from "@mantine/hooks"
+import { useTransitionRouter } from 'next-view-transitions'
+import { useSnapshot } from "valtio"
+import { MenuItem } from "../../../../types/menu-item"
+import { NavbarSearch } from "./NavBarSearch"
+import { NavbarSubMenu } from "./NavbarSubMenu"
+import { IconSearch } from "@tabler/icons-react"
+
+export function NavbarMainMenu({ listNavbar }: {
+    listNavbar: MenuItem[]
+}) {
+    const { item, isSearch } = useSnapshot(stateNav)
+    const router = useTransitionRouter()
+    return <Stack gap={0} visibleFrom="sm" bg={colors["white-trans-1"]}>
+        <Container pos={"relative"} w={{
+            base: '100%',
+            md: '80%',
+        }} fluid>
+            <Flex align={"center"} justify={"space-between"} wrap={{
+                base: "wrap",
+                md: "nowrap"
+            }}>
+                <ActionIcon radius={"100"} onClick={() => {
+                    router.push("/darmasaba")
+                    stateNav.clear()
+                }} >
+                    <Image radius={"100"} src={"/assets/images/darmasaba-icon.png"} alt="icon" w={24} h={24} loading="lazy" />
+                </ActionIcon>
+                {listNavbar.map((item, k) => {
+                    return <MenuItemCom key={k} item={item} />
+                })}
+                <ActionIcon variant="transparent" c={isSearch ? 'grey' : colors["blue-button"]}
+                    onClick={() => {
+                        stateNav.item = null
+                        stateNav.isSearch = !stateNav.isSearch
+                    }}
+                >
+                    {/* TODO: add icon search */}
+                    <IconSearch size={"1.5rem"} />
+                </ActionIcon>
+            </Flex>
+        </Container>
+        {item && <NavbarSubMenu item={item as MenuItem[]} />}
+        {isSearch && <NavbarSearch />}
+    </Stack>
+
+}
+
+function MenuItemCom({ item, }: { item: MenuItem }) {
+    const { ref, hovered } = useHover()
+    const router = useTransitionRouter()
+
+    return <Button
+        ref={ref}
+        color={hovered ? "grey" : colors["blue-button"]}
+        onMouseEnter={() => {
+            stateNav.item = item.children || null
+            stateNav.isSearch = false
+        }}
+        variant="transparent"
+        onClick={() => {
+            router.push(item.href)
+            stateNav.clear()
+        }}
+    >{item.name}</Button>
+}

src/app/darmasaba/_com/NavbarSubMenu.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import stateNav from "@/state/state-nav";
+import { Button, Container, Stack } from "@mantine/core";
+import _ from "lodash";
+import { motion } from "motion/react";
+import { MenuItem } from "../../../../types/menu-item";
+import { useTransitionRouter } from 'next-view-transitions'
+
+export function NavbarSubMenu({ item }: { item: MenuItem[] | null }) {
+  const router = useTransitionRouter()
+  return (
+    <motion.div
+      key={_.uniqueId()}
+      initial={{ opacity: 0.5 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 1 }}
+    >
+      <Container
+        key={stateNav.item?.[0]?.id}
+        onMouseLeave={() => {
+          stateNav.item = null;
+          stateNav.isSearch = false;
+        }}
+        w={{
+          base: "100%",
+          md: "80%",
+        }}
+        fluid
+      >
+        <Stack gap={0} align="start" py={"xl"}>
+          {item &&
+            item.map((item, k) => {
+              return (
+                <Button
+                  key={k}
+                  fz={"lg"}
+                  color="dark.9"
+                  variant="transparent"
+                  onClick={() => {
+                    router.push(item.href)
+                    stateNav.item = null
+                    stateNav.isSearch = false
+                  }}
+                >
+                  {item.name}
+                </Button>
+              );
+            })}
+        </Stack>
+      </Container>
+    </motion.div>
+  );
+}

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

@@ -0,0 +1,126 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+"use client";
+import colors from "@/con/colors";
+import images from "@/con/images";
+import ApiFetch from "@/lib/api-fetch";
+import {
+  BackgroundImage,
+  Box,
+  Button,
+  Divider,
+  Group,
+  SimpleGrid,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import _ from "lodash";
+import { motion } from "motion/react";
+import useSWR from "swr";
+
+type DataPotensi = {
+  id: string;
+  name: string;
+};
+
+const textHeading = {
+  title: "Potensi",
+  des: "segenap sumber daya alam dan sumber daya manusia yang dimiliki desa sebagai modal dasar yang perlu dikelola dan dikembangkan bagi kelangsungan dan perkembangan desa",
+};
+
+function Content4() {
+  const { data, isLoading } = useSWR("/", (url) =>
+    ApiFetch.api.potensi.get().then(({ data }) => data?.data)
+  );
+  if (isLoading) return <Text>loading ...</Text>;
+  return (
+    <Stack p={"sm"} gap={"4rem"}>
+      <Box
+        w={{
+          base: "100%",
+          sm: "60%",
+        }}
+      >
+        <Text fz={"4.4rem"}>{textHeading.title}</Text>
+        <Text size={"1.4rem"}>{textHeading.des}</Text>
+      </Box>
+      <SimpleGrid
+        cols={{
+          base: 1,
+          sm: 2,
+        }}
+      >
+        {_.take(data, 4).map((v, k) => (
+          <motion.div
+            key={k}
+            whileHover={{ scale: 1.01 }}
+            whileTap={{ scale: 0.8 }}
+          >
+            <BackgroundImage
+              src={images.tps}
+              h={320}
+              key={k}
+              radius={16}
+              pos={"relative"}
+            >
+              <Box
+                style={{
+                  borderRadius: 16,
+                  zIndex: 0,
+                }}
+                pos={"absolute"}
+                w={"100%"}
+                h={"100%"}
+                bg={colors.trans.dark[2]}
+              />
+              <Stack
+                justify="end"
+                h={"100%"}
+                p={"md"}
+                align="start"
+                pos={"absolute"}
+                style={{
+                  zIndex: 1,
+                }}
+              >
+                <Text fw={"bold"} c={"gray.1"} size={"2.4rem"}>
+                  {v.name}
+                </Text>
+                <Text
+                  style={{
+                    textAlign: "center",
+                  }}
+                  c={"blue"}
+                >
+                  Tambahkan Text Indikasi Keberhasilan
+                </Text>
+              </Stack>
+            </BackgroundImage>
+          </motion.div>
+        ))}
+      </SimpleGrid>
+      <Stack align="center">
+        <Group>
+          <Stack gap={0}>
+            <Title>Text Lanjutan Mengarahkan</Title>
+            <Text
+              style={{
+                textAlign: "center",
+              }}
+            >
+              deskripsi singkat sebelum tombol dibawah setelah ini
+            </Text>
+          </Stack>
+        </Group>
+        <Group>
+          <Button variant="outline" radius={100} size="md">
+            Selanjutnya
+          </Button>
+        </Group>
+      </Stack>
+      <Divider />
+    </Stack>
+  );
+}
+
+export default Content4;

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

@@ -0,0 +1,38 @@
+import React from "react";
+import { motion, useScroll, useTransform } from "framer-motion";
+import { Image } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+
+const FlipOnScroll = () => {
+  // Menggunakan hook useScroll untuk mendeteksi posisi scroll
+  const { scrollYProgress } = useScroll();
+
+  // Menggunakan useTransform untuk mengubah nilai scroll menjadi rotasi
+  const rotate = useTransform(scrollYProgress, [0, 1], [10, 360 * 1]); // Rotasi dari 0 hingga 360 derajat
+
+  useShallowEffect(() => {
+    rotate.on("change", (latest) => {
+      console.log(latest)
+    })
+  }, [])
+  return (
+    <div style={{ backgroundColor: "gray", padding: "50px" }}>
+      <h1>Scroll ke bawah untuk melihat animasi flip</h1>
+
+      <motion.div
+        style={{
+          width: "500px",
+          height: "500px",
+          backgroundColor: "blue",
+          borderRadius: "10px",
+
+        }}
+      >
+        <Image src={"https://awsimages.detik.net.id/community/media/visual/2023/04/14/gambar-pemandangan-6_169.jpeg?w=1200"} alt="a" />
+      </motion.div>
+
+    </div>
+  );
+};
+
+export default FlipOnScroll;

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

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

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

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

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

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

src/app/darmasaba/_com/main-page/landing-page/ModuleView.tsx

@@ -0,0 +1,55 @@
+import images from "@/con/images";
+import { Center, Image, Paper, SimpleGrid } from "@mantine/core";
+import { motion } from 'framer-motion';
+import { useTransitionRouter } from 'next-view-transitions';
+
+
+const listImageModule = Object.values(images.module);
+
+function ModuleItem({ item }: { item: string }) {
+  const router = useTransitionRouter();
+  return (
+    <Paper
+      onClick={() => {
+        router.push(`/module/c`);
+      }}
+      p={"md"}
+      bg={"white"}
+      radius={"32"}
+      pos={"relative"}
+    >
+      <Center h={"100%"}>
+        <motion.div
+          whileHover={{ scale: 1.05 }}
+        >
+          <Image src={item} alt="icon"
+            fit="contain"
+            sizes="100%"
+            loading="lazy"
+            style={{
+              objectFit: "contain",
+              objectPosition: "center"
+            }}
+          />
+        </motion.div>
+      </Center>
+    </Paper>
+  );
+}
+
+function ModuleView() {
+  return (
+    <SimpleGrid
+      cols={{
+        base: 2,
+        md: 3,
+      }}
+    >
+      {listImageModule.map((item, k) => {
+        return <ModuleItem key={k} item={item} />;
+      })}
+    </SimpleGrid>
+  );
+}
+
+export default ModuleView;

src/app/darmasaba/_com/main-page/landing-page/SosmedView.tsx

@@ -0,0 +1,25 @@
+import images from "@/con/images";
+import { Flex, ActionIcon, Image } from "@mantine/core";
+
+function SosmedView() {
+  const listSosmed = Object.values(images.sosmed);
+  return (
+    <Flex gap={"md"}>
+      {listSosmed.map((item, k) => {
+        return (
+          <ActionIcon
+            variant="transparent"
+            key={k}
+            w={32}
+            h={32}
+            pos={"relative"}
+          >
+            <Image src={item} alt="icon" loading="lazy" fit="contain" />
+          </ActionIcon>
+        );
+      })}
+    </Flex>
+  );
+}
+
+export default SosmedView;

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

@@ -0,0 +1,187 @@
+"use client";
+import colors from "@/con/colors";
+import {
+  Box,
+  Button,
+  Card,
+  Flex,
+  Image,
+  Stack,
+  Text,
+  Title
+} from "@mantine/core";
+import ModuleView from "./ModuleView";
+import SosmedView from "./SosmedView";
+
+function LandingPage() {
+  return (
+    <Stack bg={colors["blue-button"]}>
+      <Flex
+        gap={"md"}
+        wrap={{
+          base: "wrap",
+          md: "nowrap",
+        }}
+      >
+        <Stack
+          gap={"xl"}
+          w={{
+            base: "100%",
+            md: "60%",
+          }}
+          py={{
+            base: "xs",
+            md: "72",
+          }}
+          px={{
+            base: "xs",
+            md: "100",
+          }}
+        >
+          <Card
+            radius={"32"}
+            bg={colors.grey[1]}
+            p={{
+              base: "xs",
+              md: "32",
+            }}
+          >
+            <Stack gap={42}>
+              <Flex
+                gap={"md"}
+                wrap={{
+                  base: "wrap",
+                  md: "nowrap",
+                }}
+              >
+                <Flex gap={"md"} flex={1}>
+                  <Box
+                    pos={"relative"}
+                    bg={"white"}
+                    w={{
+                      base: 64,
+                      md: 72,
+                    }}
+                    h={{
+                      base: 64,
+                      md: 72,
+                    }}
+                    style={{
+                      borderRadius: 24,
+                    }}
+                    p={"sm"}
+                  >
+                    <Image
+                      src={"/assets/images/darmasaba-icon.png"}
+                      alt="icon"
+                      sizes="100%"
+                    />
+                  </Box>
+                  <Box
+                    pos={"relative"}
+                    w={{
+                      base: 64,
+                      md: 72,
+                    }}
+                    h={{
+                      base: 64,
+                      md: 72,
+                    }}
+                    style={{
+                      borderRadius: 24,
+                    }}
+                    p={"sm"}
+                    bg={"white"}
+                  >
+                    <Image
+                      src={"/assets/images/pudak-icon.png"}
+                      alt="icon"
+                      sizes={"100%"}
+                      fit="contain"
+                    />
+                  </Box>
+                </Flex>
+                <Stack flex={2} gap={0} justify="end" c={colors["blue-button"]}>
+                  <Text
+                    fz={{
+                      base: "1.5rem",
+                      md: "1.4rem",
+                    }}
+                  >
+                    Pemerintah Desa
+                  </Text>
+                  <Title>DARMASABA</Title>
+                </Stack>
+              </Flex>
+              <ModuleView />
+              <SosmedView />
+            </Stack>
+          </Card>
+          <Stack
+            align="center"
+            justify={"center"}
+          >
+            <Text c={"white"} style={{
+              textAlign: "center"
+            }} maw={300}>Tambahkan Text Apa aja disini untuk lebih detail yang berwarna putih</Text>
+            <Button
+              radius={100}
+              w={{
+                base: "100%",
+                sm: "300",
+              }}
+              px={42}
+              size="lg"
+              variant="fill"
+              bg={"gray.1"}
+              c={"dark"}
+            >
+              Button 1
+            </Button>
+          </Stack>
+        </Stack>
+        <Stack
+          justify={"end"}
+          align={"end"}
+          pos={"relative"}
+          w={{
+            base: "100%",
+            md: "40%",
+          }}
+          px={"xl"}
+        >
+          <Image
+            src={"/assets/images/perbekel.png"}
+            alt="perbekel"
+            sizes="100%"
+            fit="contain"
+          />
+          <Box
+            pos={"absolute"}
+            bottom={0}
+            p={{
+              base: "xs",
+              md: "md",
+            }}
+          >
+            <Card
+              px={"lg"}
+              radius={"32"}
+              className="glass3"
+              style={{
+                border: `1px solid white`,
+              }}
+            >
+              <Text>Perbekel Desa Darmasaba</Text>
+              <Text c={colors["blue-button"]} fw={"bolder"} fz={"1rem"}>
+                I.B. Surya Prabhawa Manuaba, S.H.,M.H.,NL.P.
+              </Text>
+            </Card>
+          </Box>
+        </Stack>
+      </Flex>
+    </Stack >
+  );
+}
+
+export default LandingPage;

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

@@ -0,0 +1,134 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+"use client";
+import colors from "@/con/colors";
+import images from "@/con/images";
+import ApiFetch from "@/lib/api-fetch";
+import { Carousel } from "@mantine/carousel";
+import {
+  BackgroundImage,
+  Box,
+  Button,
+  Card,
+  Container,
+  Divider,
+  Group,
+  Image,
+  Paper,
+  Stack,
+  Text,
+  useMantineTheme,
+} from "@mantine/core";
+import { useMediaQuery } from "@mantine/hooks";
+import Autoplay from "embla-carousel-autoplay";
+import _ from "lodash";
+import { useTransitionRouter } from "next-view-transitions";
+import { useRef } from "react";
+import useSWR from "swr";
+
+type DataSlider = {
+  id: string;
+  name: string;
+};
+const textHeading = {
+  title: "Layanan",
+  des: "Terwujudnya Layanan umum bertajuk Sistem administrasi Kependudukan Terintegrasi di Desa berbasi Elektronik, Smart dan Aman",
+};
+function Content3() {
+  const { data, isLoading } = useSWR(
+    "/",
+    (url) => ApiFetch.api.layanan.get().then(({ data }) => data?.data),
+    {
+      fallbackData: [],
+    }
+  );
+
+  const router = useTransitionRouter()
+
+  return (
+    <Stack pos={"relative"} bg={colors.grey[1]} gap={"42"} py={"xl"}>
+      <Container w={{ base: "100%", md: "50%" }} p={"xl"}>
+        <Stack align="center" gap={"0"}>
+          <Text fz={"3.4rem"} fw={"bold"}>
+            {textHeading.title}
+          </Text>
+          <Text
+            style={{
+              textAlign: "center",
+            }}
+          >
+            {textHeading.des}
+          </Text>
+          <Box p={"md"}>
+            <Button onClick={() => {
+              router.push("/layanan")
+            }} variant="filled" bg={"dark"} radius={100}>
+              Lanjutkan
+            </Button>
+          </Box>
+        </Stack>
+      </Container>
+      <Slider data={data as any} />
+      <Divider />
+    </Stack>
+  );
+}
+
+const height = 720;
+function Slider({ data }: { data: DataSlider[] }) {
+  const theme = useMantineTheme();
+  const mobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
+  const autoplay = useRef(Autoplay({ delay: 2000 }));
+  const router = useTransitionRouter()
+
+  const slides = data.map((item) => (
+    <Carousel.Slide key={item.id} >
+      <Paper h={"100%"} pos={"relative"} style={{
+        backgroundImage: `url(${images["bg-slide3"]}) `,
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        backgroundRepeat: "no-repeat",
+      }}>
+        <Stack justify="space-between" h={"100%"} gap={0} p={"lg"} pos={"relative"} >
+          <Box p={"lg"}>
+            <Text
+              fw={"bold"}
+              c={"white"}
+              size={"3.5rem"}
+              style={{
+                textAlign: "center",
+              }}
+            >
+              {_.startCase(item.name)}
+            </Text>
+          </Box>
+          <Group justify="center">
+            <Button onClick={() => {
+              router.push(`/layanan/${item.id}`)
+            }} px={46} radius={"100"} size="md">
+              Detail
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Carousel.Slide>
+  ));
+
+  return (
+    <Carousel
+      plugins={[autoplay.current]}
+      onMouseEnter={autoplay.current.stop}
+      onMouseLeave={autoplay.current.reset}
+      height={height}
+      slideSize={{ base: "100%", sm: "50%", md: "33.333333%" }}
+      slideGap={{ base: "xl", sm: "md" }}
+      loop
+      align="start"
+      slidesToScroll={mobile ? 1 : 2}
+    >
+      {slides}
+    </Carousel>
+  );
+}
+
+export default Content3;

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

@@ -0,0 +1,67 @@
+'use client';
+import { Stack, Box, Container, Button, Text } from "@mantine/core";
+import { useTransitionRouter } from 'next-view-transitions'
+
+function Penghargaan() {
+  const router = useTransitionRouter()
+  return (
+    <Stack pos={"relative"} h={720}>
+      <video
+        width="320"
+        height="240"
+        loop
+        autoPlay
+        muted
+        style={{
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+          overflow: "hidden",
+        }}
+      >
+        <source src="/assets/videos/award.mp4" type="video/mp4" />
+      </video>
+      <Box
+        style={{
+          width: "100%",
+          height: "100%",
+          position: "absolute",
+          top: 0,
+          left: 0,
+          background: "rgba(0,0,0,0.6)",
+        }}
+      >
+        <Container w={{ base: "100%", md: "80%" }} p={"xl"} h={720}>
+          <Stack justify="center" align="center">
+            <Text
+              style={{
+                textAlign: "center",
+              }}
+              fw={"bold"}
+              fz={"2.4rem"}
+              c={"white"}
+            >
+              Penghargaan
+            </Text>
+            <Stack align="center" gap={0}>
+              <Text fz={"1.4rem"} c={"white"}>
+                Juara 2 Lomba Video Pendek
+              </Text>
+              <Text fz={"1.4rem"} c={"white"}>
+                Juara 2 Duta Investasi
+              </Text>
+              <Text fz={"1.4rem"} c={"white"}>
+                Juara Favorit Lomba Video Pendek
+              </Text>
+            </Stack>
+            <Button onClick={() => router.push("/penghargaan")} variant="white" radius={100}>
+              Selanjutnya
+            </Button>
+          </Stack>
+        </Container>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Penghargaan;

src/app/darmasaba/layout.tsx

@@ -0,0 +1,22 @@
+import colors from "@/con/colors";
+import { Box, Space, Stack } from "@mantine/core";
+import Footer from "@/app/darmasaba/_com/Footer";
+import { Navbar } from "@/app/darmasaba/_com/Navbar";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+    return (
+        <Stack gap={0} bg={colors.grey[1]}>
+            <Navbar />
+            <Space h={{
+                base: "2.2rem",
+                md: "2.5rem"
+            }} />
+            <Box style={{
+                overflow: "scroll"
+            }}>
+                {children}
+            </Box>
+            <Footer />
+        </Stack>
+    )
+}

src/app/darmasaba/page.tsx

@@ -0,0 +1,24 @@
+import LandingPage from "@/app/darmasaba/_com/main-page/landing-page";
+import Penghargaan from "@/app/darmasaba/_com/main-page/penghargaan";
+import Content3 from "@/app/darmasaba/_com/main-page/layanan";
+import Content4 from "@/app/darmasaba/_com/main-page/content-4";
+import Content5 from "@/app/darmasaba/_com/main-page/content-5";
+import Content6 from "@/app/darmasaba/_com/main-page/content-6";
+import colors from "@/con/colors";
+// import ApiFetch from "@/lib/api-fetch";
+import { Stack } from "@mantine/core";
+import Content7 from "@/app/darmasaba/_com/main-page/content-7";
+
+export default function Page() {
+  return (
+    <Stack bg={colors.grey[1]} gap={"4rem"}>
+      <LandingPage />
+      <Penghargaan />
+      <Content3 />
+      <Content4 />
+      <Content5 />
+      <Content6 />
+      <Content7 />
+    </Stack>
+  );
+}

src/app/error.tsx

@@ -0,0 +1,9 @@
+'use client'
+export default function Error() {
+    return (
+        <div>
+            <h1>Something went wrong!</h1>
+            <p>Sorry, something went wrong.</p>
+        </div>
+    );
+}

src/app/layout.tsx

@@ -2,19 +2,22 @@
 // All packages except `@mantine/hooks` require styles imports
 import "@mantine/carousel/styles.css";
 import "@mantine/core/styles.css";
+import '@mantine/dropzone/styles.css';
 import "animate.css";
+import 'react-simple-toasts/dist/style.css';
+import 'react-simple-toasts/dist/theme/dark.css';
 import "./globals.css";
 
-import LoadDataFirstClient from "@/com/LoadDataFirstClient";
+
+
+import LoadDataFirstClient from "@/app/darmasaba/_com/LoadDataFirstClient";
 import {
   ColorSchemeScript,
   MantineProvider,
   createTheme,
   mantineHtmlProps,
 } from "@mantine/core";
-import { MainLayout } from "../com/MainLayout";
 import { ViewTransitions } from "next-view-transitions";
-import { WebVitals } from "./_com/WebVitals";
 
 export const metadata = {
   title: "desa darmasaba",
@@ -47,10 +50,7 @@ export default function RootLayout({
         </head>
         <body>
           <MantineProvider theme={theme}>
-            <MainLayout>
-              <WebVitals />
-              {children}
-            </MainLayout>
+            {children}
           </MantineProvider>
         </body>
         <LoadDataFirstClient />

src/app/not-found.tsx

@@ -0,0 +1,8 @@
+export default function NotFound() {
+    return (
+        <div>
+            <h1>Not Found</h1>
+            <p>This is the not found page</p>
+        </div>
+    );
+}

src/app/page.tsx

@@ -1,34 +1,12 @@
-import Content1 from "@/com/main-page/content-1";
-import Content2 from "@/com/main-page/content-2";
-import Content3 from "@/com/main-page/layanan";
-import Content4 from "@/com/main-page/content-4";
-import Content5 from "@/com/main-page/content-5";
-import Content6 from "@/com/main-page/content-6";
 import colors from "@/con/colors";
 // import ApiFetch from "@/lib/api-fetch";
 import { Stack } from "@mantine/core";
-import Content7 from "@/com/main-page/content-7";
+import SpashScreen from "./_com/SpashScreen";
 
 export default function Page() {
   return (
     <Stack bg={colors.grey[1]} gap={"4rem"}>
-      <Content1 />
-      <Content2 />
-      <Content3 />
-      <Content4 />
-      <Content5 />
-      <Content6 />
-      <Content7 />
+      <SpashScreen />
     </Stack>
   );
 }
-
-// async function Content3Loader() {
-//   const { data } = await fetch("/api/layanan").then((v) => v.json());
-//   return <Content3 data={data} />;
-// }
-
-// async function Content4Loader() {
-//   const { data } = await ApiFetch.api.potensi.get();
-//   return <Content4 data={data?.data as any} />;
-// }