tambahannya

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

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

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

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

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

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

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

@@ -0,0 +1,8 @@
+import { Stack } from "@mantine/core";
+
+export default async function Page({ params }: { params: Promise<{ sub: string }> }) {
+    const { sub } = await params
+    return <Stack>
+        {sub}
+    </Stack>
+}

src/app/darmasaba/(pages)/inovasi/[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/(pages)/inovasi/page.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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/(pages)/module/page.tsx

@@ -0,0 +1,15 @@
+'use client'
+
+import { Stack } from "@mantine/core"
+import { useSnapshot } from "valtio"
+import stateNav from "@/state/state-nav"
+
+export default function Page() {
+    const { module, isSearch } = useSnapshot(stateNav)
+
+    return (
+        <Stack h={"100vh"} >
+            {JSON.stringify({ module, isSearch })}
+        </Stack>
+    )
+}

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

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

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

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

src/app/darmasaba/(tambahan)/layanan/[sub]/page.tsx

@@ -0,0 +1,10 @@
+import { Stack } from "@mantine/core";
+
+export default async function Page({ params }: { params: Promise<{ sub: string }> }) {
+    const { sub } = await params
+    return (
+        <Stack>
+            {sub}
+        </Stack>
+    )
+}

src/app/darmasaba/(tambahan)/layanan/_com/BackButto.tsx

@@ -0,0 +1,14 @@
+'use client'
+
+import { ActionIcon } from "@mantine/core";
+import { IconArrowLeft } from "@tabler/icons-react";
+import { useTransitionRouter } from 'next-view-transitions';
+
+export default function BackButton() {
+    const router = useTransitionRouter()
+    return (
+        <ActionIcon variant="transparent" onClick={() => router.back()}>
+            <IconArrowLeft />
+        </ActionIcon>
+    );
+}

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

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

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>
+  );
+}