wibu/desa-darmasaba
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

Fix UI Landing Page & Fix Detail Potensi Desa

Browse Source
This commit is contained in:
nico
2025-03-16 22:58:42 +08:00
parent 1347afb7d1
commit a106fe658f
15 changed files with 241 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/app/darmasaba/_com/main-page/desaantikorupsi/index.tsx
View File

@@ -10,35 +10,35 @@ function DesaAntiKorupsi() {
{
judul: "PENGUATAN TATA LAKSANA",
deskripsi: "1.1 ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP TENTANG PERENCANAAN, PELAKSANAAN, PENATAUSAHAAN DAN PERTANGGUNG JAWABAN APBDES BESERTA IMPLEMENTASINYA",
icon: <IconClipboardText size={180} color={colors["blue-button"]} />,
icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
},
{
judul: "PENGUATAN TATA LAKSANA",
deskripsi: "1.1 ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP TENTANG PERENCANAAN, PELAKSANAAN, PENATAUSAHAAN DAN PERTANGGUNG JAWABAN APBDES BESERTA IMPLEMENTASINYA",
icon: <IconClipboardText size={180} color={colors["blue-button"]} />,
deskripsi: "1.2 ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP MENGENAI MEKANISME EVALUASI KINERJA PERANGKAT DESA",
icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
},
{
judul: "PENGUATAN TATA LAKSANA",
deskripsi: "1.1 ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP TENTANG PERENCANAAN, PELAKSANAAN, PENATAUSAHAAN DAN PERTANGGUNG JAWABAN APBDES BESERTA IMPLEMENTASINYA",
icon: <IconClipboardText size={180} color={colors["blue-button"]} />,
deskripsi: "1.3 ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP TENTANG PENGENDALIAN GRATIFIKASI, SUAP DAN KONFLIK KEPENTINGAN",
icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
},
{
judul: "PENGUATAN TATA LAKSANA",
deskripsi: "1.1 ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP TENTANG PERENCANAAN, PELAKSANAAN, PENATAUSAHAAN DAN PERTANGGUNG JAWABAN APBDES BESERTA IMPLEMENTASINYA",
icon: <IconClipboardText size={180} color={colors["blue-button"]} />,
deskripsi: "1.4 PERJANJIAN KERJA SAMA ANTARA PELAKSANA KEGIATAN ANGGARAN DENGAN PIHAK PENYEDIA, DAN TELAH MELALUI PROSES PENGADAAN BARANG/JASA DI DESA",
icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
},
{
judul: "PENGUATAN TATA LAKSANA",
deskripsi: "1.1 ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP TENTANG PERENCANAAN, PELAKSANAAN, PENATAUSAHAAN DAN PERTANGGUNG JAWABAN APBDES BESERTA IMPLEMENTASINYA",
icon: <IconClipboardText size={180} color={colors["blue-button"]} />,
deskripsi: "1.5 ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP TENTANG PAKTA INTEGRITAS DAN SEJENISNYA",
icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
},
{
judul: "PENGUATAN TATA LAKSANA",
deskripsi: "1.1 ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP TENTANG PERENCANAAN, PELAKSANAAN, PENATAUSAHAAN DAN PERTANGGUNG JAWABAN APBDES BESERTA IMPLEMENTASINYA",
icon: <IconClipboardText size={180} color={colors["blue-button"]} />,
deskripsi: "1.6 ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP TENTANG PERENCANAAN, PELAKSANAAN, PENATAUSAHAAN DAN PERTANGGUNG JAWABAN APBDES BESERTA IMPLEMENTASINYA",
icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
},
]
const theme = useMantineTheme();
const theme = useMantineTheme();
const mobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
return (
<Stack gap={"0"} bg={colors.Bg} p={"sm"} h={mobile ? 2000 : 1150}>
@@ -47,41 +47,45 @@ const theme = useMantineTheme();
<Text fz={"3.4rem"}>Desa Anti Korupsi</Text>
</Center>
<Text ta={"center"} fz={"1.4rem"}>Desa antikorupsi mendorong pemerintahan jujur dan transparan. Keuangan desa dikelola terbuka dengan melibatkan warga mengawasi anggaran, sehingga digunakan tepat sasaran sesuai kebutuhan.</Text>
<Center py={20}>
<Button radius={"lg"} fz={"h4"} bg={colors["blue-button"]}>Selengkapnya</Button>
</Center>
</Container>
<SimpleGrid
pt={50}
cols={{
base: 1,
sm: 2,
<SimpleGrid
cols={{
base: 1,
sm: 2,
}}>
{data.map((v, k) => {
return (
<motion.div
key={k}
}}>
{data.map((v, k) => {
return (
<motion.div
key={k}
whileTap={{ scale: 0.8 }}
>
<Paper p={"lg"} >
<Flex gap={"lg"} justify={"center"} align={"center"}>
<Box >
<Text fz={"lg"} ta={"center"} c={colors["blue-button"]}>{v.judul}</Text>
<Flex gap={"lg"} justify={"center"} align={"center"}>
whileTap={{ scale: 0.8 }}
>
<Paper p={"lg"} >
<Flex gap={"lg"} justify={"center"} align={"center"}>
<Box >
<Text fz={"lg"} ta={"center"} c={colors["blue-button"]}>{v.judul}</Text>
<Flex justify={"center"} align={"center"}>
<Box>
{v.icon}
<Box>
<Text fz={"sm"} ta={"justify"}>{v.deskripsi}</Text>
<Box pt={10}>
<Button bg={colors["blue-button"]} radius={"lg"}>Download</Button>
</Box>
</Box>
<Box px={20}>
<Text fz={"sm"} ta={"justify"}>{v.deskripsi}</Text>
<Box pt={10}>
<Button bg={colors["blue-button"]} radius={"lg"}>Download</Button>
</Box>
</Flex>
</Box>
</Flex>
</Paper>
</motion.div>
)
})}
</SimpleGrid>
</Box>
</Flex>
</Box>
</Flex>
</Paper>
</motion.div>
)
})}
</SimpleGrid>
</Stack>
);
}

5
src/app/darmasaba/_com/main-page/sdgs/index.tsx
View File

@@ -1,6 +1,6 @@
'use client'
import colors from "@/con/colors";
import { Box, Center, Container, Image, Paper, SimpleGrid, Stack, Text, useMantineTheme } from "@mantine/core";
import { Box, Button, Center, Container, Image, Paper, SimpleGrid, Stack, Text, useMantineTheme } from "@mantine/core";
import { useMediaQuery } from "@mantine/hooks";
export default function SDGS() {
@@ -32,6 +32,9 @@ export default function SDGS() {
</Center>
</SimpleGrid>
</Paper>
<Center>
<Button radius={"lg"} fz={"1.2rem"} mt={20} bg={colors["blue-button"]}>Selengkapnya</Button>
</Center>
</Box>
</Container>