Fix Menu Lingkungan Darmasaba User
This commit is contained in:
@@ -1,207 +1,118 @@
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { ActionIcon, Anchor, Box, Center, Container, Divider, Flex, Group, Image, Paper, SimpleGrid, Stack, Text, TextInput, Title, useMantineTheme } from '@mantine/core';
|
||||
import { useMediaQuery } from '@mantine/hooks';
|
||||
import { ActionIcon, Anchor, Box, Button, Center, Container, Divider, Flex, Group, Image, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
|
||||
import { IconAt, IconBrandFacebook, IconBrandInstagram, IconBrandTwitter, IconBrandWhatsapp } from '@tabler/icons-react';
|
||||
|
||||
function Footer() {
|
||||
const theme = useMantineTheme();
|
||||
const mobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
|
||||
return (
|
||||
<>
|
||||
<Stack bg={colors["blue-button"]}>
|
||||
<Box w={mobile ? "100%" : "100%"} p={"xl"} h={{ base: 2500, md: 1100 }} >
|
||||
<Center>
|
||||
<Paper w={"100%"}>
|
||||
<Box component="footer" py="xl">
|
||||
<Container size="lg">
|
||||
<Stack gap="xl">
|
||||
<Box>
|
||||
<Title fz={"md"} order={2} fw={700} mb="md">Komitmen Dalam Pelayanan</Title>
|
||||
<Stack gap="sm">
|
||||
<Group align="flex-start" gap="xs">
|
||||
<Text fz={"sm"} fw={700}>1. Transparansi:</Text>
|
||||
<Text fz={"sm"}>
|
||||
Kami berkomitmen untuk mengelola dana desa secara terbuka, sehingga masyarakat dapat
|
||||
mengetahui penggunaan anggaran secara jelas dan bertanggung jawab.
|
||||
</Text>
|
||||
</Group>
|
||||
|
||||
<Group align="flex-start" gap="xs">
|
||||
<Text fz={"sm"} fw={700}>2. Profesionalisme:</Text>
|
||||
|
||||
<Text fz={"sm"}>
|
||||
Setiap layanan desa akan dilakukan dengan profesional, cepat, dan tanpa diskriminasi,
|
||||
demi memastikan kepuasan masyarakat.
|
||||
</Text>
|
||||
</Group>
|
||||
|
||||
<Group align="flex-start" gap="xs">
|
||||
<Text fz={"sm"} fw={700}>3. Partisipatif:</Text>
|
||||
<Text fz={"sm"}>
|
||||
Kami percaya bahwa partisipasi aktif masyarakat adalah kunci keberhasilan pembangunan desa.
|
||||
Oleh karena itu, kami akan terus melibatkan warga dalam setiap proses pengambilan keputusan.
|
||||
</Text>
|
||||
</Group>
|
||||
|
||||
<Group align="flex-start" gap="xs">
|
||||
<Text fz={"sm"} fw={700}>4. Inovasi:</Text>
|
||||
<Text fz={"sm"}>
|
||||
Kami berkomitmen untuk terus berinovasi dalam memberikan solusi bagi permasalahan desa,
|
||||
termasuk melalui pemanfaatan teknologi untuk mempermudah akses layanan.
|
||||
</Text>
|
||||
</Group>
|
||||
|
||||
<Group align="flex-start" gap="xs">
|
||||
<Text fz={"sm"} fw={700}>5. Berkeadilan:</Text>
|
||||
<Text fz={"sm"}>
|
||||
Setiap kebijakan dan program desa akan dirancang untuk memberikan manfaat yang merata
|
||||
bagi seluruh lapisan masyarakat, tanpa memandang status sosial atau ekonomi.
|
||||
</Text>
|
||||
</Group>
|
||||
|
||||
<Group align="flex-start" gap="xs">
|
||||
<Text fz={"sm"} fw={700}>6. Pemberdayaan:</Text>
|
||||
<Text fz={"sm"}>
|
||||
Kami berkomitmen untuk memberdayakan masyarakat melalui pelatihan, pendampingan,
|
||||
dan dukungan terhadap usaha-usaha lokal agar desa semakin mandiri.
|
||||
</Text>
|
||||
</Group>
|
||||
|
||||
<Group align="flex-start" gap="xs">
|
||||
<Text fz={"sm"} fw={700}>7. Ramah Lingkungan:</Text>
|
||||
<Text fz={"sm"}>
|
||||
Seluruh kegiatan pembangunan dan pelayanan desa akan memperhatikan keberlanjutan lingkungan,
|
||||
demi menjaga keseimbangan alam dan kenyamanan hidup warga.
|
||||
</Text>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
<Divider />
|
||||
|
||||
<Box>
|
||||
<Title fz={"md"} order={2} fw={700} mb="md">Tujuan Akhir</Title>
|
||||
<Text fz={"sm"} mb="sm">
|
||||
Dengan visi, misi dan komitmen ini, kami bertekad untuk menjadikan desa sebagai tempat tinggal
|
||||
yang nyaman, aman dan sejahtera bagi seluruh warganya.
|
||||
</Text>
|
||||
<Text fz={"sm"} mb="sm">
|
||||
Kami percaya bahwa kemajuan desa dimulai dari kerjasama antara pemerintah desa dan masyarakat,
|
||||
serta didukung oleh tata kelola yang baik dan berorientasi pada kepentingan bersama. Jika ada
|
||||
masukan untuk lembaga desa, silahkan hubungi pada nomor pengaduan di bawah, terima kasih.
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Group justify='apart' align="center">
|
||||
<Text ta={"center"} fz={"sm"} fw={700} size="lg" style={{ fontStyle: 'italic' }}>{"Desa Kuat, Masyarakat Sejahtera!"}</Text>
|
||||
<Box
|
||||
style={{
|
||||
width: 80,
|
||||
height: 80,
|
||||
position: 'relative'
|
||||
}}
|
||||
>
|
||||
<ActionIcon size={80} radius={"xl"} variant='transparent'>
|
||||
<Image src="/api/img/chatbot-removebg-preview.png" alt="Logo Desa" width={80} height={80} />
|
||||
</ActionIcon>
|
||||
</Box>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Container>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Center>
|
||||
<Box py={20} >
|
||||
<SimpleGrid
|
||||
p={20}
|
||||
cols={{
|
||||
base: 2,
|
||||
sm: 4,
|
||||
}}
|
||||
style={{
|
||||
color: "white"
|
||||
}}
|
||||
>
|
||||
<Box p={mobile ? 30 : 30} style={{color: "white"}}>
|
||||
<Stack justify='space-between'>
|
||||
<Text fz={"md"} fw={"bold"} c={"white"}>Tentang Darmasaba</Text>
|
||||
<Text fz={"xs"} c={"white"}>Desa Darmasaba adalah desa
|
||||
budaya yang kaya akan tradisi dan
|
||||
nilai-nilai luhur masyarakat Bali.</Text>
|
||||
<Stack bg="linear-gradient(180deg, #1C6EA4, #124170)" c="white">
|
||||
<Box w="100%" p="xl" h={{ base: 1800, md: 1100 }}>
|
||||
<Center>
|
||||
<Paper w="100%" bg="transparent" shadow="md" radius="lg" p="xl">
|
||||
<Box component="footer">
|
||||
<Container size="lg">
|
||||
<Stack gap="xl">
|
||||
<Box>
|
||||
<Flex gap={"md"}>
|
||||
<ActionIcon variant='transparent'>
|
||||
<IconBrandFacebook color='white' size={"30"} />
|
||||
</ActionIcon>
|
||||
<ActionIcon variant='transparent'>
|
||||
<IconBrandInstagram color='white' size={"30"} />
|
||||
</ActionIcon>
|
||||
<ActionIcon variant='transparent'>
|
||||
<IconBrandTwitter color='white' size={"30"} />
|
||||
</ActionIcon>
|
||||
<ActionIcon variant='transparent'>
|
||||
<IconBrandWhatsapp color='white' size={"30"} />
|
||||
</ActionIcon>
|
||||
</Flex>
|
||||
<Title fz="lg" order={2} fw={700} mb="md" c="white">Komitmen Layanan Kami</Title>
|
||||
<Stack gap="sm">
|
||||
{[
|
||||
{ title: "Transparansi", text: "Pengelolaan dana desa dilakukan secara terbuka agar masyarakat dapat memahami dan memantau penggunaan anggaran." },
|
||||
{ title: "Profesionalisme", text: "Layanan desa diberikan secara cepat, adil, dan profesional demi kepuasan masyarakat." },
|
||||
{ title: "Partisipasi", text: "Masyarakat dilibatkan aktif dalam pengambilan keputusan demi pembangunan desa yang berhasil." },
|
||||
{ title: "Inovasi", text: "Kami terus berinovasi, termasuk melalui teknologi, agar layanan semakin mudah diakses." },
|
||||
{ title: "Keadilan", text: "Kebijakan dan program disusun untuk memberi manfaat yang merata bagi seluruh warga." },
|
||||
{ title: "Pemberdayaan", text: "Masyarakat didukung melalui pelatihan, pendampingan, dan pengembangan usaha lokal." },
|
||||
{ title: "Ramah Lingkungan", text: "Seluruh kegiatan pembangunan memperhatikan keberlanjutan demi menjaga alam dan kesehatan warga." }
|
||||
].map((item, i) => (
|
||||
<Group key={i} align="flex-start" gap="xs">
|
||||
<Text fz="sm" c="#F3F2EC" fw={700}>{i + 1}. {item.title}:</Text>
|
||||
<Text fz="sm" c="#F3F2EC">{item.text}</Text>
|
||||
</Group>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
<Divider color="white" opacity={0.2} />
|
||||
|
||||
<Box>
|
||||
<Title fz="lg" order={2} fw={700} mb="md" c="white">Visi Kami</Title>
|
||||
<Text fz="sm" mb="sm" c="#F3F2EC">
|
||||
Dengan visi ini, kami berkomitmen menjadikan desa sebagai tempat yang aman, sejahtera, dan nyaman bagi seluruh warga.
|
||||
</Text>
|
||||
<Text fz="sm" mb="sm" c="#F3F2EC">
|
||||
Kami percaya kemajuan dimulai dari kerja sama antara pemerintah desa dan masyarakat, didukung tata kelola yang baik demi kepentingan bersama. Saran maupun keluhan dapat disampaikan melalui kontak di bawah ini.
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Group justify="apart" align="center" mt="lg">
|
||||
<Text c="#F3F2EC" ta="center" fz="md" fw={700} style={{ fontStyle: 'italic' }}>"Desa Kuat, Warga Sejahtera!"</Text>
|
||||
<ActionIcon size={80} radius="xl" variant="transparent">
|
||||
<Image src="/api/img/chatbot-removebg-preview.png" alt="Logo Desa" width={80} height={80} />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Box>
|
||||
<Box p={mobile ? 30 : 30}>
|
||||
<Stack justify='space-between' gap={"xs"}>
|
||||
<Text fz={"md"} fw={"bold"} c={"white"}>Layanan</Text>
|
||||
<Anchor c={"white"} variant='transparent'>
|
||||
<Text fz={"xs"} c={"white"}>Administrasi Kependudukan</Text>
|
||||
</Anchor>
|
||||
<Anchor c={"white"} variant='transparent'>
|
||||
<Text fz={"xs"} c={"white"}>Pelayanan Sosial</Text>
|
||||
</Anchor>
|
||||
<Anchor c={"white"} variant='transparent'>
|
||||
<Text fz={"xs"} c={"white"}>Pengaduan Masyarakat</Text>
|
||||
</Anchor>
|
||||
<Anchor c={"white"} variant='transparent'>
|
||||
<Text fz={"xs"} c={"white"}>Informasi Publik</Text>
|
||||
</Anchor>
|
||||
</Stack>
|
||||
</Box>
|
||||
<Box p={mobile ? 30 : 30}>
|
||||
<Stack justify='space-between' gap={"xs"}>
|
||||
<Text fz={"md"} fw={"bold"} c={"white"}>Tautan Penting</Text>
|
||||
<Anchor c={"white"} variant='transparent'>
|
||||
<Text fz={"xs"} c={"white"}>Portal Badung</Text>
|
||||
</Anchor>
|
||||
<Anchor c={"white"} variant='transparent'>
|
||||
<Text fz={"xs"} c={"white"}>E-Government</Text>
|
||||
</Anchor>
|
||||
<Anchor c={"white"} variant='transparent'>
|
||||
<Text fz={"xs"} c={"white"}>Transparansi</Text>
|
||||
</Anchor>
|
||||
<Anchor c={"white"} variant='transparent'>
|
||||
<Text fz={"xs"} c={"white"}>Unduhan</Text>
|
||||
</Anchor>
|
||||
</Stack>
|
||||
</Box>
|
||||
<Box p={mobile ? 30 : 30}>
|
||||
<Stack justify='space-between'>
|
||||
<Text fz={"md"} fw={"bold"} c={"white"}>Newsletter</Text>
|
||||
<Text fz={"xs"} c={"white"}>Dapatkan informasi terbaru
|
||||
tentang kegiatan dan program
|
||||
desa</Text>
|
||||
</Container>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Center>
|
||||
|
||||
<Box py={40}>
|
||||
<SimpleGrid cols={{ base: 1, sm: 2, md: 4 }} spacing="xl">
|
||||
<Box>
|
||||
<Stack gap="sm">
|
||||
<Text c="white" fz="md" fw={700}>Tentang Darmasaba</Text>
|
||||
<Text fz="xs" c="#F3F2EC">
|
||||
Darmasaba adalah desa budaya yang kaya akan tradisi dan nilai-nilai warisan Bali.
|
||||
</Text>
|
||||
<Flex gap="md" mt="sm" c="#F3F2EC">
|
||||
<ActionIcon variant="subtle" color="white"><IconBrandFacebook size={22} /></ActionIcon>
|
||||
<ActionIcon variant="subtle" color="white"><IconBrandInstagram size={22} /></ActionIcon>
|
||||
<ActionIcon variant="subtle" color="white"><IconBrandTwitter size={22} /></ActionIcon>
|
||||
<ActionIcon variant="subtle" color="white"><IconBrandWhatsapp size={22} /></ActionIcon>
|
||||
</Flex>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Stack gap="xs">
|
||||
<Text c="white" fz="md" fw={700}>Layanan Desa</Text>
|
||||
<Anchor c="#F3F2EC" fz="xs">Administrasi Kependudukan</Anchor>
|
||||
<Anchor c="#F3F2EC" fz="xs">Layanan Sosial</Anchor>
|
||||
<Anchor c="#F3F2EC" fz="xs">Pengaduan Masyarakat</Anchor>
|
||||
<Anchor c="#F3F2EC" fz="xs">Informasi Publik</Anchor>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Stack gap="xs">
|
||||
<Text c="white" fz="md" fw={700}>Tautan Penting</Text>
|
||||
<Anchor c="#F3F2EC" fz="xs">Portal Badung</Anchor>
|
||||
<Anchor c="#F3F2EC" fz="xs">E-Government</Anchor>
|
||||
<Anchor c="#F3F2EC" fz="xs">Transparansi</Anchor>
|
||||
<Anchor c="#F3F2EC" fz="xs">Unduhan</Anchor>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Stack gap="sm">
|
||||
<Text c="white" fz="md" fw={700}>Berlangganan Info</Text>
|
||||
<Text c="#F3F2EC" fz="xs">Dapatkan kabar terbaru tentang program dan kegiatan desa langsung ke email Anda.</Text>
|
||||
<Group wrap="nowrap">
|
||||
<TextInput
|
||||
placeholder='Alamat email anda'
|
||||
rightSection={<IconAt color={colors["blue-button"]} />}
|
||||
w="70%"
|
||||
placeholder="Masukkan email Anda"
|
||||
rightSection={<IconAt size={16} />}
|
||||
/>
|
||||
</Stack>
|
||||
</Box>
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
<Divider py={15} />
|
||||
<Text ta={"center"} c={"white"} p={20}>
|
||||
© 2024 Desa Darmasaba. Hak Cipta Dilindungi.
|
||||
</Text>
|
||||
<Button variant="gradient" gradient={{ from: 'blue', to: 'cyan' }} radius="md">Daftar</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Box>
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
</Stack>
|
||||
</>
|
||||
|
||||
<Divider opacity={0.2} my="md" />
|
||||
<Text ta="center" fz="xs" c="white">© 2025 Desa Darmasaba. Hak cipta dilindungi.</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user