Fix responsive lading page, menu ppid, dan menu desa

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

@@ -0,0 +1,120 @@
+import colors from '@/con/colors';
+import { ActionIcon, BackgroundImage, Box, Container, Flex, Group, SimpleGrid, Stack, Text } from '@mantine/core';
+import { IconDownload } from '@tabler/icons-react';
+import BackButton from '../../(pages)/desa/layanan/_com/BackButto';
+
+const data = [
+  {
+    id: 1,
+    title: "Pendapatan",
+    image: "/api/img/pendapatan.jpeg",
+    value: "Rp 495M"
+  },
+  {
+    id: 2,
+    title: "Belanja",
+    image: "/api/img/belanja.jpeg",
+    value: "Rp 395M"
+  },
+  {
+    id: 3,
+    title: "Pembiayaan",
+    image: "/api/img/pembiayaan.jpeg",
+    value: "Rp 295M"
+  },
+  {
+    id: 4,
+    title: "APBDesa 2025",
+    image: "/api/img/apb-des.jpg",
+    value: "Rp 500M"
+  },
+  {
+    id: 5,
+    title: "APBDesa 2024",
+    image: "/api/img/apb-des.jpg",
+    value: "Rp 450M"
+  },
+  {
+    id: 6,
+    title: "APBDesa 2023",
+    image: "/api/img/apb-des.jpg",
+    value: "Rp 400M"
+  },
+]
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={22}>
+      <Box px={{ base: "md", md: 100 }}><BackButton /></Box>
+      <Container w={{ base: "100%", md: "50%" }}>
+        <Stack align="center" gap={0}>
+          <Text fz={"3.4rem"} fw={"bold"}>
+            APBDes
+          </Text>
+          <Text
+            py={10}
+            ta={"justify"}
+          >
+            Transparansi APBDes Darmasaba adalah langkah nyata menuju tata kelola pemerintahan desa yang bersih dan bertanggung jawab. Adapun APBDes sebagai berikut:
+          </Text>
+        </Stack>
+      </Container>
+      <SimpleGrid
+        px={{ base: "md", md: 100 }}
+        cols={{
+          base: 1,
+          sm: 3,
+        }}
+      >
+        {data.map((v, k) => {
+          return (
+            <BackgroundImage
+              key={k}
+              src={v.image}
+              h={350}
+              radius={16}
+              pos={"relative"}
+            >
+              <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
+                    c={"white"}
+                    size={"1.5rem"}
+                    style={{
+                      textAlign: "center",
+                    }}>{v.title}</Text>
+                </Box>
+                <Text
+                  fw={"bold"}
+                  c={"white"}
+                  size={"3.5rem"}
+                  style={{
+                    textAlign: "center",
+                  }}>{v.value}</Text>
+                <Group justify="center">
+                  <ActionIcon px={70} py={20} radius={"xl"} size="md" bg={colors["blue-button"]}>
+                    <Flex gap={"md"}>
+                      <IconDownload size={20} />
+                      <Text fz={"sm"} c={"white"}>Download</Text>
+                    </Flex>
+                  </ActionIcon>
+                </Group>
+              </Stack>
+            </BackgroundImage>
+          )
+        })}
+      </SimpleGrid>
+    </Stack>
+  );
+}
+
+export default Page;