Landing Page

.gitignore

@@ -45,3 +45,6 @@ next-env.d.ts
 /cache
 
 .github/
+
+.env.*
+

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "WillLuke.nextjs.addTypesOnSave": true,
+  "WillLuke.nextjs.hasPrompted": true
+}

src/app/darmasaba/_com/NavbarMainMenu.tsx

@@ -25,9 +25,10 @@ export function NavbarMainMenu({ listNavbar }: {
                 base: "wrap",
                 md: "nowrap"
             }}>
-                <ActionIcon radius={"100"} onClick={() => {
+                <ActionIcon radius={"100"} variant="transparent" onClick={() => {
                     router.push("/darmasaba")
                     stateNav.clear()
+                    
                 }} >
                     <Image radius={"100"} src={"/assets/images/darmasaba-icon.png"} alt="icon" w={24} h={24} loading="lazy" />
                 </ActionIcon>

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

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

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

@@ -2,20 +2,19 @@
 import colors from "@/con/colors";
 import {
   Box,
-  Button,
   Card,
   Flex,
   Image,
+  Paper,
   Stack,
-  Text,
+  Text
-  Title
 } from "@mantine/core";
 import ModuleView from "./ModuleView";
 import SosmedView from "./SosmedView";
 
 function LandingPage() {
   return (
-    <Stack bg={colors["blue-button"]}>
+    <Stack bg={colors["Bg"]}>
       <Flex
         gap={"md"}
         wrap={{
@@ -31,7 +30,7 @@ function LandingPage() {
           }}
           py={{
             base: "xs",
-            md: "72",
+            md: "40",
           }}
           px={{
             base: "xs",
@@ -102,7 +101,7 @@ function LandingPage() {
                   </Box>
                 </Flex>
                 <Stack flex={2} gap={0} justify="end" c={colors["blue-button"]}>
-                  <Text
+                  {/* <Text
                     fz={{
                       base: "1.5rem",
                       md: "1.4rem",
@@ -110,35 +109,62 @@ function LandingPage() {
                   >
                     Pemerintah Desa
                   </Text>
-                  <Title>DARMASABA</Title>
+                  <Title>DARMASABA</Title> */}
+                  <Paper bg={colors["blue-button"]} p={10} w={400}>
+                    <Flex align={"center"} justify={"space-between"}>
+                      <Box>
+                        <Text c={colors["white-1"]} fz={"sm"}>
+                          Jadwal Kerja
+                        </Text>
+                        <Paper w={175} p={5} bg={colors["white-1"]}>
+                          <Flex justify={"space-between"} align={"center"}>
+                            <Box>
+                              <Text fz={"sm"}>
+                                Buka
+                              </Text>
+                              <Text fw={"bold"} fz={"lg"}>
+                                08:00
+                              </Text>
+                            </Box>
+                            <Text fz={"lg"} fw={"bold"}>-</Text>
+                            <Box>
+                              <Text fz={"sm"}>
+                                Tutup
+                              </Text>
+                              <Text fw={"bold"} fz={"lg"}>
+                                16:00
+                              </Text>
+                            </Box>
+                          </Flex>
+                        </Paper>
+                      </Box>
+                      <Box>
+                        <Text c={colors["white-1"]} fz={"sm"}>
+                          Rabu, 10 Maret 2025
+                        </Text>
+                        <Paper w={175} p={5} bg={colors["white-1"]}>
+                          <Box>
+                            <Text fz={"sm"}>
+                              Buka
+                            </Text>
+                            <Text fw={"bold"} fz={"lg"}>
+                              Sabtu - Minggu
+                            </Text>
+                          </Box>
+                        </Paper>
+                      </Box>
+                    </Flex>
+                  </Paper>
                 </Stack>
               </Flex>
               <ModuleView />
               <SosmedView />
+              <Text c={colors.trans.dark[2]} style={{
+                textAlign: "center"
+              }} >Sampaikan saran dan masukan guna kemajuan dalam pembangunan. Semua lebih mudah melalui fitur interaktif</Text>
             </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"}

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

@@ -1,23 +1,18 @@
-/* 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,
+  useMantineTheme
 } from "@mantine/core";
 import { useMediaQuery } from "@mantine/hooks";
 import Autoplay from "embla-carousel-autoplay";
@@ -26,15 +21,44 @@ import { useTransitionRouter } from "next-view-transitions";
 import { useRef } from "react";
 import useSWR from "swr";
 
-type DataSlider = {
+const data = [
-  id: string;
+  {
-  name: string;
+    id: 1,
-};
+    images: "/assets/images/layanan/test.png",
+    name: "Surat Keterangan Domisili Organisasi"
+  },
+  {
+    id: 2,
+    images: "/assets/images/layanan/test3.jpeg",
+    name: "Surat Keterangan Penghasilan"
+  },
+  {
+    id: 3,
+    images: "/assets/images/layanan/test2.jpeg",
+    name: "Surat Keterangan Tidak Mampu"
+  },
+  {
+    id: 4,
+    images: "/assets/images/layanan/kelahiran.jpeg",
+    name: "Surat Keterangan Kelahiran"
+  },
+  {
+    id: 5,
+    images: "/assets/images/layanan/test.png",
+    name: "Surat Keterangan Usaha"
+  },
+  {
+    id: 6,
+    images: "/assets/images/layanan/test2.jpeg",
+    name: "Surat Keterangan Kematian"
+  },
+
+]
 const textHeading = {
   title: "Layanan",
-  des: "Terwujudnya Layanan umum bertajuk Sistem administrasi Kependudukan Terintegrasi di Desa berbasi Elektronik, Smart dan Aman",
+  des: "Layanan adalah fitur yang membantu warga desa mengakses berbagai kebutuhan administrasi, informasi, dan bantuan secara cepat, mudah, dan transparan. Dengan fitur ini, semua layanan desa ada dalam genggaman Anda!",
 };
-function Content3() {
+function Layanan() {
   const { data, isLoading } = useSWR(
     "/",
     (url) => ApiFetch.api.layanan.get().then(({ data }) => data?.data),
@@ -59,23 +83,23 @@ function Content3() {
           >
             {textHeading.des}
           </Text>
-          <Box p={"md"}>
+          {/* <Box p={"md"}>
             <Button onClick={() => {
               router.push("/layanan")
             }} variant="filled" bg={"dark"} radius={100}>
               Lanjutkan
             </Button>
-          </Box>
+          </Box> */}
         </Stack>
       </Container>
-      <Slider data={data as any} />
+      <Slider />
       <Divider />
     </Stack>
   );
 }
 
 const height = 720;
-function Slider({ data }: { data: DataSlider[] }) {
+function Slider() {
   const theme = useMantineTheme();
   const mobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
   const autoplay = useRef(Autoplay({ delay: 2000 }));
@@ -84,11 +108,21 @@ function Slider({ data }: { data: DataSlider[] }) {
   const slides = data.map((item) => (
     <Carousel.Slide key={item.id} >
       <Paper h={"100%"} pos={"relative"} style={{
-        backgroundImage: `url(${images["bg-slide3"]}) `,
+        backgroundImage: `url(${item.images}) `,
         backgroundSize: "cover",
         backgroundPosition: "center",
         backgroundRepeat: "no-repeat",
       }}>
+        <Box
+          style={{
+            borderRadius: 16,
+            zIndex: 0,
+          }}
+          pos={"absolute"}
+          w={"100%"}
+          h={"100%"}
+          bg={colors.trans.dark[2]}
+        />
         <Stack justify="space-between" h={"100%"} gap={0} p={"lg"} pos={"relative"} >
           <Box p={"lg"}>
             <Text
@@ -131,4 +165,4 @@ function Slider({ data }: { data: DataSlider[] }) {
   );
 }
 
-export default Content3;
+export default Layanan;

src/con/colors.ts

@@ -6,15 +6,18 @@ const colors = {
     "white-trans-3": "rgba(255, 255, 255, 0.9)",
     "trans": {
         "dark": {
-            "1": "rgba(0, 0, 0, 0.5)",
+            "1": "rgba(0, 0, 0, 0.3)",
-            "2": "rgba(0, 0, 0, 0.7)",
+            "2": "rgba(0, 0, 0, 0.5)",
-            "3": "rgba(0, 0, 0, 0.9)"
+            "3": "rgba(0, 0, 0, 0.7)",
+            "4": "rgba(0, 0, 0, 0.9)"
         }
     },
     "grey": {
         "1": "#F4F5F6",
         "2": "#CBCACD"
-    }
+    },
+    "Bg": "#D1d9e8",
+
 }
 
 export default colors

src/con/images.ts

@@ -10,6 +10,9 @@ const images = {
     "gelah-melah": "/assets/images/module/gelah-melah.png",
     "inovasi-desa-darmasaba": "/assets/images/module/inovasi-desa-darmasaba.png"
   },
+  "layanan": {
+    "layanan-1": "/assets/images/layanan/test.png",
+  },
   "bg-slide": "/assets/images/bg-slide.png",
   "sosmed": {
     "telegram": "/assets/images/sosmed/telegram.png",
@@ -29,4 +32,4 @@ const images = {
   "tps": "/assets/images/tps.png",
   "bg": "/assets/images/bg.png"
 };
-export default images;
+export default images;