UI Menu Keamanan

This commit is contained in:
2025-03-24 15:31:59 +08:00
parent 1bb808da3b
commit e33db73d65
12 changed files with 1070 additions and 54 deletions

View File

@@ -0,0 +1,160 @@
import colors from '@/con/colors';
import { Avatar, Box, Flex, Group, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
import { IconAmbulance, IconBadge, IconBuildingBank, IconBuildingSkyscraper, IconFiretruck, IconFirstAidKit, IconPhoneCall, IconUser } from '@tabler/icons-react';
import BackButton from '../../desa/layanan/_com/BackButto';
const emergencyServices = [
{
id: 1,
name: "Polisi",
icon: <IconBadge size={24} color={colors['blue-button']} />,
nomor: '081xxxxxxxxx'
},
{
id: 2,
name: "Ambulans",
icon: <IconAmbulance size={24} color={colors['blue-button']} />,
nomor: '081xxxxxxxxx'
},
{
id: 3,
name: "Pemadam Kebakaran",
icon: <IconFiretruck size={24} color={colors['blue-button']} />,
nomor: '081xxxxxxxxx'
}
];
const healthFacilities = [
{
id: 4,
name: "Puskesmas Darmasaba",
icon: <IconFirstAidKit size={24} color={colors['blue-button']} />,
nomor: '081xxxxxxxxx'
},
{
id: 5,
name: "UGD Terdekat",
icon: <IconAmbulance size={24} color={colors['blue-button']} />,
nomor: '081xxxxxxxxx'
}
];
const villageGovernment = [
{
id: 6,
name: "Kantor Desa Darmasaba",
icon: <IconBuildingSkyscraper size={24} color={colors['blue-button']} />,
nomor: '081xxxxxxxxx'
},
{
id: 7,
name: "Kepala Desa",
icon: <IconUser size={24} color={colors['blue-button']} />,
nomor: '081xxxxxxxxx'
}
];
function Page() {
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Box px={{ base: 'md', md: 100 }}>
<BackButton />
</Box>
<Box>
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
Kontak Darurat
</Text>
<Text px={{ base: 20, md: 150 }} ta={"center"} fz={{ base: "h4", md: "h3" }} >
Desa Darmasaba, Kecamatan Abiansemal, Kabupaten Badung.
</Text>
</Box>
<Box px={{ base: "md", md: 100 }}>
<Stack gap={'lg'}>
<Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
<Flex justify={'center'} gap={'lg'} align={'center'}>
<Avatar radius={"xl"} size={'lg'} bg={colors['BG-trans']}>
<IconPhoneCall size={30} color={colors["blue-button"]} />
</Avatar>
<Box>
<Text ta={'center'} c={colors['blue-button']} py={10} fz={{ base: "md", md: "h4" }} fw={"bold"} >
Nomor Darurat Utama
</Text>
<Text ta={'center'} fw={"bold"} fz={'h2'} c={colors["blue-button"]}>112</Text>
</Box>
</Flex>
</Paper>
</Stack>
</Box>
<Box px={{ base: "md", md: 100 }}>
<SimpleGrid cols={{ base: 1, md: 2 }} spacing="xl">
{/* Layanan Darurat */}
<Paper p="lg" radius="md" bg={colors['white-trans-1']}>
<Group pb="md" align="center">
<Avatar radius={"xl"} size={'lg'} bg={colors['BG-trans']}>
<IconFirstAidKit size={30} color={colors["blue-button"]} />
</Avatar>
<Text fw="bold" fz={{ base: "lg", md: "xl" }} c={colors["blue-button"]}>
Layanan Darurat
</Text>
</Group>
{emergencyServices.map((v, k) => (
<Group key={k} px="md" py="sm" bg={colors['BG-trans']} mb="xs" justify="space-between" style={{ borderRadius: 8 }}>
<Group>
{v.icon}
<Text>{v.name}</Text>
</Group>
<Text>{v.nomor}</Text>
</Group>
))}
</Paper>
{/* Fasilitas Kesehatan */}
<Paper p="lg" radius="md" bg={colors['white-trans-1']}>
<Group pb="md" align="center">
<Avatar radius={"xl"} size={'lg'} bg={colors['BG-trans']}>
<IconBuildingSkyscraper size={30} color={colors["blue-button"]} />
</Avatar>
<Text fw="bold" fz={{ base: "lg", md: "xl" }} c={colors["blue-button"]}>
Fasilitas Kesehatan
</Text>
</Group>
{healthFacilities.map((v, k) => (
<Group key={k} px="md" py="sm" bg={colors['BG-trans']} mb="xs" justify="space-between" style={{ borderRadius: 8 }}>
<Group>
{v.icon}
<Text>{v.name}</Text>
</Group>
<Text>{v.nomor}</Text>
</Group>
))}
</Paper>
{/* Pemerintah Desa */}
<Paper p="lg" radius="md" bg={colors['white-trans-1']}>
<Group pb="md" align="center">
<Avatar radius={"xl"} size={'lg'} bg={colors['BG-trans']}>
<IconBuildingBank size={30} color={colors["blue-button"]} />
</Avatar>
<Text fw="bold" fz={{ base: "lg", md: "xl" }} c={colors["blue-button"]}>
Pemerintah Desa
</Text>
</Group>
{villageGovernment.map((v, k) => (
<Group key={k} px="md" py="sm" bg={colors['BG-trans']} mb="xs" justify="space-between" style={{ borderRadius: 8 }}>
<Group>
{v.icon}
<Text>{v.name}</Text>
</Group>
<Text>{v.nomor}</Text>
</Group>
))}
</Paper>
</SimpleGrid>
</Box>
</Stack>
);
}
export default Page;

View File

@@ -0,0 +1,106 @@
import colors from '@/con/colors';
import { Box, Center, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
import { IconHospitalCircle, IconPhone, IconReport, IconReportMedical, IconSpeakerphone } from '@tabler/icons-react';
import BackButton from '../../desa/layanan/_com/BackButto';
const data1 = [
{
id: 1,
judul: 'Layanan Medis Cepat',
icon: <IconHospitalCircle size={80} color={colors["blue-button"]} />,
deskripsi: <List>
<ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans desa siap siaga 24 jam untuk keadaan darurat medis.</ListItem>
<ListItem fz={{base: 'h4', md: 'lg'}}>Pos kesehatan desa menyediakan layanan pertolongan pertama dan perawatan dasar.</ListItem>
</List>
},
{
id: 2,
judul: 'Nomor Darurat',
icon: <IconPhone size={80} color={colors["blue-button"]}/>,
deskripsi: <List>
<ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans: 08125651052</ListItem>
<ListItem fz={{base: 'h4', md: 'lg'}}>Pos Kesehatan: 08125651052</ListItem>
<ListItem fz={{base: 'h4', md: 'lg'}}>Pemadam Kebakaran: 113</ListItem>
<ListItem fz={{base: 'h4', md: 'lg'}}>Polisi: 110</ListItem>
</List>
},
{
id: 3,
judul: 'Posko Kesehatan & Evakuasi',
icon: <IconReportMedical size={80} color={colors["blue-button"]}/>,
deskripsi: <List>
<ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans desa siap siaga 24 jam untuk keadaan darurat medis.</ListItem>
<ListItem fz={{base: 'h4', md: 'lg'}}>Pos kesehatan desa menyediakan layanan pertolongan pertama dan perawatan dasar.</ListItem>
</List>
},
{
id: 4,
judul: 'Pelatihan & Sosialisasi',
icon: <IconSpeakerphone size={80} color={colors["blue-button"]}/>,
deskripsi: <List>
<ListItem fz={{base: 'h4', md: 'lg'}}>Setiap bulan, desa mengadakan pelatihan P3K (Pertolongan Pertama pada Kecelakaan) bagi masyarakat.</ListItem>
<ListItem fz={{base: 'h4', md: 'lg'}}>Edukasi tentang tindakan saat bencana seperti gempa bumi dan banjir.</ListItem>
</List>
},
{
id: 5,
judul: 'Sistem Laporan Kejadian',
icon: <IconReport size={80} color={colors["blue-button"]}/>,
deskripsi: <List>
<ListItem>Warga bisa melaporkan kejadian darurat melalui aplikasi desa atau menghubungi perangkat desa.</ListItem>
<ListItem>Laporan akan segera ditindaklanjuti oleh tim penanganan darurat.</ListItem>
</List>
}
]
function Page() {
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Box px={{ base: 'md', md: 100 }}>
<BackButton />
</Box>
<Box>
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
Penanganan Darurat
</Text>
<Text px={{base: 20, md: 150}} ta={"center"} fz={{ base: "h4", md: "h3" }} >
Program kesehatan di Desa Darmasaba memiliki peran penting dalam meningkatkan kesejahteraan masyarakat. Kami berkomitmen untuk memberikan layanan darurat yang cepat, responsif, dan mudah diakses oleh seluruh warga.
</Text>
</Box>
<Box px={{ base: "md", md: 100 }}>
<Stack gap={'lg'}>
<SimpleGrid
pb={10}
cols={{
base: 1,
md: 3,
}}>
{data1.map((v, k) => {
return (
<Paper radius={10} key={k} bg={colors["white-trans-1"]}>
<Stack gap={'xs'}>
<Center py={40}>
{v.icon}
</Center>
<Box px={'lg'}>
<Box pb={20}>
<Text pb={10} c={colors["blue-button"]} fw={"bold"} fz={"h3"}>
{v.judul}
</Text>
<Box px={10}>
{v.deskripsi}
</Box>
</Box>
</Box>
</Stack>
</Paper>
)
})}
</SimpleGrid>
</Stack>
</Box>
</Stack>
);
}
export default Page;

View File

@@ -0,0 +1,123 @@
import colors from '@/con/colors';
import { Box, Button, Flex, Group, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
import BackButton from '../../desa/layanan/_com/BackButto';
import { IconArrowRight } from '@tabler/icons-react';
function Page() {
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Box px={{ base: 'md', md: 100 }}>
<BackButton />
</Box>
<SimpleGrid
px={{ base: 20, md: 100 }}
cols={{
base: 1,
md: 2
}}
>
{/* Content 1 */}
<Box pt={{base: 0, md: 35}}>
<Text c={colors["blue-button"]} fz={{ base: "h4", md: "h3" }} >
Info Keamanan dan Pencegahan Kriminalitas
</Text>
<Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
Kontak Darurat
</Text>
<Group>
<Button rightSection={<IconArrowRight />} mt={20} radius={10} bg={colors["blue-button"]} c={colors["white-1"]}>
Lihat Detail
</Button>
</Group>
</Box>
{/* Content 2 */}
<SimpleGrid cols={{ base: 1, md: 2 }}>
<Paper p={"lg"}>
<Text c={colors["blue-button"]} fw={'bold'} fz={{ base: "h4", md: "h3" }} >
Tips menjaga keamanan lingkungan
</Text>
<Text fz={{ base: "h5", md: "h4" }} c={colors["blue-button"]} >
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</Text>
<Group>
<Button rightSection={<IconArrowRight />} mt={20} radius={10} bg={colors["blue-button"]} c={colors["white-1"]}>
Lihat Detail
</Button>
</Group>
</Paper>
<Paper p={"lg"}>
<Text c={colors["blue-button"]} fw={'bold'} fz={{ base: "h4", md: "h3" }} >
Mengenali tanda-tanda kegiatan kriminal
</Text>
<Text fz={{ base: "h5", md: "h4" }} c={colors["blue-button"]} >
the printing and typesetting industry. the printing and typesetting industry.
</Text>
<Group>
<Button rightSection={<IconArrowRight />} mt={20} radius={10} bg={colors["blue-button"]} c={colors["white-1"]}>
Lihat Detail
</Button>
</Group>
</Paper>
</SimpleGrid>
{/* Content 3 */}
<Paper p={'xl'}>
<Text fz={{ base: "h3", md: "h2" }} c={colors["blue-button"]} fw={"bold"}>
Program Keamanan Rutin
</Text>
<Stack pt={30} gap={'lg'}>
<Box>
<Paper p={"md"} bg={colors['blue-button']} w={{ base: "100%", md: "100%" }}>
<Flex align={'center'} justify={'space-between'}>
<Text fz={'h3'} c={colors['white-1']}>Ronda Malam</Text>
<IconArrowRight size={30} color={colors['white-1']} />
</Flex>
</Paper>
</Box>
<Box>
<Paper p={"md"} bg={colors['blue-button']} w={{ base: "100%", md: "100%" }}>
<Flex align={'center'} justify={'space-between'}>
<Text fz={'h3'} c={colors['white-1']}>Ronda Malam</Text>
<IconArrowRight size={30} color={colors['white-1']} />
</Flex>
</Paper>
</Box>
<Box>
<Paper p={"md"} bg={colors['blue-button']} w={{ base: "100%", md: "100%" }}>
<Flex align={'center'} justify={'space-between'}>
<Text fz={'h3'} c={colors['white-1']}>Ronda Malam</Text>
<IconArrowRight size={30} color={colors['white-1']} />
</Flex>
</Paper>
</Box>
<Box pt={25}>
<Button fullWidth rightSection={<IconArrowRight size={20} color={colors['white-1']} />}>Lihat program lainnya</Button>
</Box>
</Stack>
</Paper>
{/* Content 4 */}
<Box>
<Paper p={'xl'} >
<Box style={{ maxWidth: "560px", width: "100%", aspectRatio: "16/9" }}>
<iframe width="100%"
height="100%"
src="https://www.youtube.com/embed/p5OkdBgasWA?si=6lFKXeE9LN5zcJQq" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" ></iframe>
</Box>
<Text py={10} fz={{ base: "h3", md: "h2" }} fw={'bold'} c={colors['blue-button']}>
Patroli Malam Darmasaba
</Text>
<Text fz={'h4'} >
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</Text>
<Box pt={10}>
<Button bg={colors['blue-button']} rightSection={<IconArrowRight size={20} color={colors['white-1']} />}>
Lihat Video Lainnya
</Button>
</Box>
</Paper>
</Box>
</SimpleGrid>
</Stack>
);
}
export default Page;

View File

@@ -0,0 +1,50 @@
import colors from '@/con/colors';
import { Stack, Box, Text, Flex, ColorSwatch } from '@mantine/core';
import React from 'react';
import BackButton from '../../desa/layanan/_com/BackButto';
function Page() {
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Box px={{ base: 'md', md: 100 }}>
<BackButton />
</Box>
<Box>
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
Laporan Keamanan Lingkungan
</Text>
</Box>
<Box px={{ base: "md", md: 100 }}>
<Stack gap={'lg'}>
<Flex justify={'space-between'}>
<Text fz={"h4"}>Laporan Terbaru</Text>
<Box>
<Flex gap={'lg'}>
<Box>
<Flex gap={{ base: 0, md: 5 }} align={'center'}>
<Text fz={{ base: 'md', md: 'h4' }}>Terselesaikan</Text>
<ColorSwatch color="#2A742D" size={30} />
</Flex>
</Box>
<Box>
<Flex gap={{ base: 0, md: 5 }} align={'center'}>
<Text fz={{ base: 'md', md: 'h4' }}>Dalam Proses</Text>
<ColorSwatch color="#135A9B" size={30} />
</Flex>
</Box>
<Box>
<Flex gap={{ base: 0, md: 5 }} align={'center'}>
<Text fz={{ base: 'md', md: 'h4' }}>Gagal</Text>
<ColorSwatch color="#A34437" size={30} />
</Flex>
</Box>
</Flex>
</Box>
</Flex>
</Stack>
</Box>
</Stack>
);
}
export default Page;

View File

@@ -0,0 +1,107 @@
import colors from '@/con/colors';
import { Box, Center, Image, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
import BackButton from '../../desa/layanan/_com/BackButto';
const data1 = [
{
id: 1,
judul: 'Peran Pecalang dalam Keamanan Desa',
image: '/api/img/pecalang.png',
pengertian: 'Pecalang adalah petugas keamanan adat di Bali yang memiliki peran penting dalam menjaga ketertiban dan budaya lokal. Tugas mereka meliputi:',
deskripsi: <List>
<ListItem fz={{ base: 'h4', md: 'lg' }}>Mengamankan upacara adat dan kegiatan keagamaan.</ListItem>
<ListItem fz={{ base: 'h4', md: 'lg' }}>Mengatur lalu lintas saat ada perayaan atau kegiatan besar.</ListItem>
<ListItem fz={{ base: 'h4', md: 'lg' }}>Berpatroli untuk mencegah gangguan keamanan di lingkungan desa.</ListItem>
<ListItem fz={{ base: 'h4', md: 'lg' }}>Berkoordinasi dengan aparat desa dan kepolisian dalam penanganan situasi darurat.</ListItem>
</List>
},
{
id: 2,
judul: 'Patwal (Patroli Pengawal) Desa',
image: '/api/img/patwal-1.png',
pengertian: 'Selain Pecalang, Desa Darmasaba juga memiliki Patwal yang bertugas menjaga keamanan sehari-hari. Peran mereka antara lain:',
deskripsi: <List>
<ListItem fz={{ base: 'h4', md: 'lg' }}>Berpatroli secara rutin untuk memastikan lingkungan tetap aman.</ListItem>
<ListItem fz={{ base: 'h4', md: 'lg' }}>Menjaga ketertiban lalu lintas di area desa.</ListItem>
<ListItem fz={{ base: 'h4', md: 'lg' }}>Melakukan tindakan preventif terhadap potensi gangguan keamanan.</ListItem>
<ListItem fz={{ base: 'h4', md: 'lg' }}>Siap siaga dalam keadaan darurat untuk membantu warga.</ListItem>
</List>
},
{
id: 3,
judul: 'Layanan Keamanan yang Tersedia',
image: '/api/img/pospecalang.png',
pengertian: 'Jika terjadi keadaan darurat atau membutuhkan bantuan keamanan, warga dapat menghubungi:',
deskripsi: <List>
<ListItem fz={{ base: 'h4', md: 'lg' }}>Pos Pecalang Desa: [Masukkan Nomor Kontak].</ListItem>
<ListItem fz={{ base: 'h4', md: 'lg' }}>Patwal Desa Darmasaba: [Masukkan Nomor Kontak].</ListItem>
<ListItem fz={{ base: 'h4', md: 'lg' }}>Polsek Terdekat: 110 (Layanan Kepolisian).</ListItem>
</List>
},
{
id: 4,
judul: 'Program Keamanan Desa',
image: '/api/img/rond.png',
pengertian: 'Untuk meningkatkan keamanan, Desa Darmasaba menjalankan berbagai program, seperti:',
deskripsi: <List>
<ListItem fz={{ base: 'h4', md: 'lg' }}>Ronda Malam Warga: Kegiatan jaga malam secara bergilir oleh warga bersama Pecalang dan Patwal.</ListItem>
<ListItem fz={{ base: 'h4', md: 'lg' }}>Sosialisasi Keamanan: Edukasi bagi warga tentang cara menjaga keamanan lingkungan.</ListItem>
<ListItem fz={{ base: 'h4', md: 'lg' }}> Pengawasan Kamera CCTV: Memantau titik- titik strategis untuk mencegah tindak kejahatan.</ListItem>
</List>
}
]
function Page() {
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Box px={{ base: 'md', md: 100 }}>
<BackButton />
</Box>
<Box>
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
Keamanan Lingkungan (Pecalang / Patwal)
</Text>
<Text px={{ base: 20, md: 150 }} ta={"center"} fz={{ base: "h4", md: "h3" }} >
Keamanan dan ketertiban lingkungan di Desa Darmasaba dijaga melalui peran aktif Pecalang dan Patwal (Patroli Pengawal). Mereka bertugas memastikan desa tetap aman, tertib, dan kondusif bagi seluruh warga.
</Text>
</Box>
<Box px={{ base: "md", md: 100 }}>
<Stack gap={'lg'}>
<SimpleGrid
pb={10}
cols={{
base: 1,
md: 3,
}}>
{data1.map((v, k) => {
return (
<Paper radius={10} key={k} bg={colors["white-trans-1"]}>
<Stack gap={'xs'}>
<Center px={10} py={20}>
<Image src={v.image} alt='' />
</Center>
<Box px={'lg'}>
<Box pb={20}>
<Text pb={10} c={colors["blue-button"]} fw={"bold"} fz={"h3"}>
{v.judul}
</Text>
<Text pb={10} fz={"h4"} ta={'justify'}>
{v.pengertian}
</Text>
<Box px={10}>
{v.deskripsi}
</Box>
</Box>
</Box>
</Stack>
</Paper>
)
})}
</SimpleGrid>
</Stack>
</Box>
</Stack>
);
}
export default Page;

View File

@@ -0,0 +1,95 @@
import colors from '@/con/colors';
import { Badge, Box, Button, Flex, Paper, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import { IconArrowDown, IconClock, IconNavigation, IconPhone, IconPin, IconSearch } from '@tabler/icons-react';
import BackButton from '../../desa/layanan/_com/BackButto';
function Page() {
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Box px={{ base: 'md', md: 100 }}>
<BackButton />
</Box>
<Box pb={10} px={{ base: 20, md: 100 }}>
<Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
Kantor Polisi Terdekat
</Text>
<Text pb={15} fz={'h4'} >
Desa Darmasaba, Kecamatan Abiansemal, Kabupaten Badung
</Text>
<TextInput radius={10} leftSection={<IconSearch size={20} />} placeholder='Cari Kantor Polisi' />
</Box>
<Box px={{ base: "md", md: 100 }}>
<Stack gap={'lg'}>
<Paper radius={10} bg={colors["white-trans-1"]} p={'xl'}>
<Stack gap={'xs'}>
<SimpleGrid
cols={{
base: 1,
md: 2,
}}
>
{/* Content Sebelah Kiri */}
<Box>
<Text c={colors["blue-button"]} fw={'bold'} fz={'h2'}>Polsek Abiansemal</Text>
<Text c={colors["blue-button"]} fz={'sm'}>2,5 Km dari Desa Darmasaba</Text>
<Flex py={10} gap={9} align={'center'}>
<IconPin size={25} color={colors["blue-button"]} />
<Text c={colors["blue-button"]} fz={'lg'}>Jl. Gandamayu 1 Blahkiuh</Text>
</Flex>
<Flex gap={9} align={'center'}>
<IconPhone size={25} color={colors["blue-button"]} />
<Text c={colors["blue-button"]} fz={'lg'}>08xxxxxxxx</Text>
</Flex>
<Flex py={10} gap={9} align={'center'}>
<IconClock size={25} color={colors["blue-button"]} />
<Text c={colors["blue-button"]} fz={'lg'}>24 Jam</Text>
</Flex>
<Box>
<Text c={colors["blue-button"]} fw={'bold'} fz={'h2'}>Layanan Yang Tersedia :</Text>
<SimpleGrid
py={10}
cols={{
base: 1,
md: 2,
}}
>
<Box>
<Text c={colors["blue-button"]} fz={'lg'}>Laporan Kehilangan</Text>
</Box>
<Box>
<Text c={colors["blue-button"]} fz={'lg'}>Laporan Kriminal</Text>
</Box>
<Box>
<Text c={colors["blue-button"]} fz={'lg'}>Pelayanan SKCK</Text>
</Box>
<Box>
<Text c={colors["blue-button"]} fz={'lg'}>Pengaduan Masyarakat</Text>
</Box>
</SimpleGrid>
</Box>
<Box>
<Button bg={colors["blue-button"]} rightSection={<IconArrowDown size={20}/>}>Lihat Kantor Polisi Lainnya</Button>
</Box>
</Box>
<Box pos={'relative'}>
<Box style={{ position: 'absolute', top: 0, right: 0 }}>
<Badge size='lg' c={'#287407'} bg={'#A8EDC4'}>Buka</Badge>
</Box>
<Box pt={40}>
<iframe style={{ border: 2, width: "100%" }} src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3945.7949871034166!2d115.20778387533218!3d-8.519275686287415!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2dd23ceb4f6e5363%3A0xa353662f070f47d8!2sAbian%20Semal%20Police%20Station!5e0!3m2!1sid!2sid!4v1742789148825!5m2!1sid!2sid" width="550" height="300" ></iframe>
</Box>
<Box pt={20}>
<Button fullWidth bg={colors["blue-button"]} radius={10} leftSection={<IconNavigation size={20}/>}>Petunjuk Arah</Button>
</Box>
</Box>
</SimpleGrid>
</Stack>
</Paper>
</Stack>
</Box>
</Stack>
);
}
export default Page;

View File

@@ -0,0 +1,120 @@
import colors from '@/con/colors';
import { Box, Image, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
import BackButton from '../../desa/layanan/_com/BackButto';
function Page() {
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Box px={{ base: 'md', md: 100 }}>
<BackButton />
</Box>
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
Info Wabah / Penyakit
</Text>
<Box px={{ base: "md", md: 100 }}>
<Stack gap={'lg'}>
<SimpleGrid
cols={{
base: 1,
md: 3,
}}
>
<Box>
<Paper p={'xl'} h={'80vh'} bg={colors['white-trans-1']}>
<Stack gap={'xs'}>
<Box>
<Text fw={"bold"} fz={'h3'} c={colors['blue-button']}>Demam Berdarah Dengue (DBD)</Text>
<Image pt={5} src={'/api/img/dbd.png'} alt="" />
<Text fz={'h4'} fw={'bold'} >
Apa itu DBD penyebab, gejala dan cara penanganannya?
</Text>
<Text fz={'h6'} pb={10}>
Diposting: 12 Februari 2025 | Dinas Kesehatan
</Text>
<Text fz={'h4'} pb={10}>
Yuk Kenali gelaja dan cara penanganan DBD yang efektif untuk melindungi keluarga anda selama musim hujan.
</Text>
<List>
<ListItem>
Penyebab: Virus dengue yang ditularkan oleh nyamuk Aedes aegypti.
</ListItem>
<ListItem>
Gejala: Demam tinggi, nyeri sendi, ruam kulit, dan pendarahan ringan.
</ListItem>
<ListItem>
Pencegahan: Menguras tempat air, menutup wadah air, fogging, dan menggunakan lotion anti-nyamuk.
</ListItem>
</List>
</Box>
</Stack>
</Paper>
</Box>
<Box>
<Paper p={'xl'} h={'80vh'} bg={colors['white-trans-1']}>
<Stack gap={'xs'}>
<Box>
<Text fw={"bold"} fz={'h3'} c={colors['blue-button']}>TBC (Tuberkulosis)</Text>
<Image pt={5} src={'/api/img/tbc-1.png'} alt="" />
<Text fz={'h4'} fw={'bold'} >
Apa itu TBC penyebab, gejala dan cara penanganannya?
</Text>
<Text fz={'h6'} pb={10}>
Diposting: 12 Februari 2025 | Dinas Kesehatan
</Text>
<Text fz={'h4'} pb={10}>
Yuk Kenali gelaja dan cara penanganan TBC yang efektif untuk melindungi keluarga anda.
</Text>
<List>
<ListItem>
Penyebab: Bakteri Mycobacterium tuberculosis yang menyebar melalui udara.
</ListItem>
<ListItem>
Gejala: Batuk lebih dari 2 minggu, berkeringat di malam hari, dan berat badan turun.
</ListItem>
<ListItem>
Pencegahan: Vaksin BCG, pola hidup sehat, dan pengobatan bagi penderita agar tidak menular.
</ListItem>
</List>
</Box>
</Stack>
</Paper>
</Box>
<Box>
<Paper p={'xl'} h={'80vh'} bg={colors['white-trans-1']}>
<Stack gap={'xs'}>
<Box>
<Text fw={"bold"} fz={'h3'} c={colors['blue-button']}>Diare dan Kolera</Text>
<Image pt={5} src={'/api/img/diare.png'} alt="" />
<Text fz={'h4'} fw={'bold'} >
Apa itu Diare dan Kolera penyebab, gejala dan cara penanganannya?
</Text>
<Text fz={'h6'} pb={10}>
Diposting: 12 Februari 2025 | Dinas Kesehatan
</Text>
<Text fz={'h4'} pb={10}>
Yuk Kenali gelaja dan cara penanganan Diare dan Kolera yang efektif untuk melindungi keluarga anda.
</Text>
<List>
<ListItem>
Penyebab: Bakteri Vibrio cholerae (Kolera) atau Escherichia coli (diare) akibat makanan/minuman yang terkontaminasi.
</ListItem>
<ListItem>
Gejala: Buang air besar cair terus-menerus, dehidrasi, dan lemas.
</ListItem>
<ListItem>
Pencegahan: Menjaga kebersihan makanan dan air, serta mencuci tangan dengan sabun.
</ListItem>
</List>
</Box>
</Stack>
</Paper>
</Box>
</SimpleGrid>
</Stack>
</Box>
</Stack>
);
}
export default Page;

View File

@@ -0,0 +1,106 @@
import colors from '@/con/colors';
import { Box, Center, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
import { IconHospitalCircle, IconPhone, IconReport, IconReportMedical, IconSpeakerphone } from '@tabler/icons-react';
import BackButton from '../../desa/layanan/_com/BackButto';
const data1 = [
{
id: 1,
judul: 'Layanan Medis Cepat',
icon: <IconHospitalCircle size={80} color={colors["blue-button"]} />,
deskripsi: <List>
<ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans desa siap siaga 24 jam untuk keadaan darurat medis.</ListItem>
<ListItem fz={{base: 'h4', md: 'lg'}}>Pos kesehatan desa menyediakan layanan pertolongan pertama dan perawatan dasar.</ListItem>
</List>
},
{
id: 2,
judul: 'Nomor Darurat',
icon: <IconPhone size={80} color={colors["blue-button"]}/>,
deskripsi: <List>
<ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans: 08125651052</ListItem>
<ListItem fz={{base: 'h4', md: 'lg'}}>Pos Kesehatan: 08125651052</ListItem>
<ListItem fz={{base: 'h4', md: 'lg'}}>Pemadam Kebakaran: 113</ListItem>
<ListItem fz={{base: 'h4', md: 'lg'}}>Polisi: 110</ListItem>
</List>
},
{
id: 3,
judul: 'Posko Kesehatan & Evakuasi',
icon: <IconReportMedical size={80} color={colors["blue-button"]}/>,
deskripsi: <List>
<ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans desa siap siaga 24 jam untuk keadaan darurat medis.</ListItem>
<ListItem fz={{base: 'h4', md: 'lg'}}>Pos kesehatan desa menyediakan layanan pertolongan pertama dan perawatan dasar.</ListItem>
</List>
},
{
id: 4,
judul: 'Pelatihan & Sosialisasi',
icon: <IconSpeakerphone size={80} color={colors["blue-button"]}/>,
deskripsi: <List>
<ListItem fz={{base: 'h4', md: 'lg'}}>Setiap bulan, desa mengadakan pelatihan P3K (Pertolongan Pertama pada Kecelakaan) bagi masyarakat.</ListItem>
<ListItem fz={{base: 'h4', md: 'lg'}}>Edukasi tentang tindakan saat bencana seperti gempa bumi dan banjir.</ListItem>
</List>
},
{
id: 5,
judul: 'Sistem Laporan Kejadian',
icon: <IconReport size={80} color={colors["blue-button"]}/>,
deskripsi: <List>
<ListItem fz={{base: 'h4', md: 'lg'}}>Warga bisa melaporkan kejadian darurat melalui aplikasi desa atau menghubungi perangkat desa.</ListItem>
<ListItem fz={{base: 'h4', md: 'lg'}}>Laporan akan segera ditindaklanjuti oleh tim penanganan darurat.</ListItem>
</List>
}
]
function Page() {
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Box px={{ base: 'md', md: 100 }}>
<BackButton />
</Box>
<Box>
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
Kontak Darurat
</Text>
<Text px={{base: 20, md: 150}} ta={"center"} fz={{ base: "h4", md: "h3" }} >
Program kesehatan di Desa Darmasaba memiliki peran penting dalam meningkatkan kesejahteraan masyarakat. Kami berkomitmen untuk memberikan layanan darurat yang cepat, responsif, dan mudah diakses oleh seluruh warga.
</Text>
</Box>
<Box px={{ base: "md", md: 100 }}>
<Stack gap={'lg'}>
<SimpleGrid
pb={10}
cols={{
base: 1,
md: 3,
}}>
{data1.map((v, k) => {
return (
<Paper radius={10} key={k} bg={colors["white-trans-1"]}>
<Stack gap={'xs'}>
<Center py={40}>
{v.icon}
</Center>
<Box px={'lg'}>
<Box pb={20}>
<Text pb={10} c={colors["blue-button"]} fw={"bold"} fz={"h3"}>
{v.judul}
</Text>
<Box px={10}>
{v.deskripsi}
</Box>
</Box>
</Box>
</Stack>
</Paper>
)
})}
</SimpleGrid>
</Stack>
</Box>
</Stack>
);
}
export default Page;

View File

@@ -0,0 +1,106 @@
import colors from '@/con/colors';
import { Box, Center, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
import { IconHospitalCircle, IconPhone, IconReport, IconReportMedical, IconSpeakerphone } from '@tabler/icons-react';
import BackButton from '../../desa/layanan/_com/BackButto';
const data1 = [
{
id: 1,
judul: 'Layanan Medis Cepat',
icon: <IconHospitalCircle size={80} color={colors["blue-button"]} />,
deskripsi: <List>
<ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans desa siap siaga 24 jam untuk keadaan darurat medis.</ListItem>
<ListItem fz={{base: 'h4', md: 'lg'}}>Pos kesehatan desa menyediakan layanan pertolongan pertama dan perawatan dasar.</ListItem>
</List>
},
{
id: 2,
judul: 'Nomor Darurat',
icon: <IconPhone size={80} color={colors["blue-button"]}/>,
deskripsi: <List>
<ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans: 08125651052</ListItem>
<ListItem fz={{base: 'h4', md: 'lg'}}>Pos Kesehatan: 08125651052</ListItem>
<ListItem fz={{base: 'h4', md: 'lg'}}>Pemadam Kebakaran: 113</ListItem>
<ListItem fz={{base: 'h4', md: 'lg'}}>Polisi: 110</ListItem>
</List>
},
{
id: 3,
judul: 'Posko Kesehatan & Evakuasi',
icon: <IconReportMedical size={80} color={colors["blue-button"]}/>,
deskripsi: <List>
<ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans desa siap siaga 24 jam untuk keadaan darurat medis.</ListItem>
<ListItem fz={{base: 'h4', md: 'lg'}}>Pos kesehatan desa menyediakan layanan pertolongan pertama dan perawatan dasar.</ListItem>
</List>
},
{
id: 4,
judul: 'Pelatihan & Sosialisasi',
icon: <IconSpeakerphone size={80} color={colors["blue-button"]}/>,
deskripsi: <List>
<ListItem fz={{base: 'h4', md: 'lg'}}>Setiap bulan, desa mengadakan pelatihan P3K (Pertolongan Pertama pada Kecelakaan) bagi masyarakat.</ListItem>
<ListItem fz={{base: 'h4', md: 'lg'}}>Edukasi tentang tindakan saat bencana seperti gempa bumi dan banjir.</ListItem>
</List>
},
{
id: 5,
judul: 'Sistem Laporan Kejadian',
icon: <IconReport size={80} color={colors["blue-button"]}/>,
deskripsi: <List>
<ListItem>Warga bisa melaporkan kejadian darurat melalui aplikasi desa atau menghubungi perangkat desa.</ListItem>
<ListItem>Laporan akan segera ditindaklanjuti oleh tim penanganan darurat.</ListItem>
</List>
}
]
function Page() {
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Box px={{ base: 'md', md: 100 }}>
<BackButton />
</Box>
<Box>
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
Penanganan Darurat
</Text>
<Text px={{base: 20, md: 150}} ta={"center"} fz={{ base: "h4", md: "h3" }} >
Program kesehatan di Desa Darmasaba memiliki peran penting dalam meningkatkan kesejahteraan masyarakat. Kami berkomitmen untuk memberikan layanan darurat yang cepat, responsif, dan mudah diakses oleh seluruh warga.
</Text>
</Box>
<Box px={{ base: "md", md: 100 }}>
<Stack gap={'lg'}>
<SimpleGrid
pb={10}
cols={{
base: 1,
md: 3,
}}>
{data1.map((v, k) => {
return (
<Paper radius={10} key={k} bg={colors["white-trans-1"]}>
<Stack gap={'xs'}>
<Center py={40}>
{v.icon}
</Center>
<Box px={'lg'}>
<Box pb={20}>
<Text pb={10} c={colors["blue-button"]} fw={"bold"} fz={"h3"}>
{v.judul}
</Text>
<Box px={10}>
{v.deskripsi}
</Box>
</Box>
</Box>
</Stack>
</Paper>
)
})}
</SimpleGrid>
</Stack>
</Box>
</Stack>
);
}
export default Page;

View File

@@ -1,24 +1,48 @@
import colors from "@/con/colors"; import colors from "@/con/colors";
import { Stack, Box, Text, SimpleGrid, Paper, Center, Image, Flex, List, ListItem } from "@mantine/core"; import { Box, Button, Center, Group, Image, Paper, SimpleGrid, Stack, Text } from "@mantine/core";
import { IconBarbell, IconCalendar, IconOld, IconUser, IconUsersGroup } from "@tabler/icons-react";
import BackButton from "../../desa/layanan/_com/BackButto"; import BackButton from "../../desa/layanan/_com/BackButto";
const data = [ const data1 = [
{ {
id: 1, id: 1,
judul: 'Posyandu Banjar Bucu', judul: 'Posyandu Terintegrasi',
image: '/api/img/posyandu.png' image: '/api/img/pk-1.png',
deskripsi: 'Program pemantauan kesehatan terpadu untuk balita, ibu hamil, dan lansia di Banjar Gulingan dengan sistem pencatatan digital. Layanan meliputi penimbangan, imunisasi, dan konsultasi kesehatan'
}, },
{ {
id: 2, id: 2,
judul: 'Posyandu Banjar Bucu', judul: 'Senam Lansia',
image: '/api/img/posyandu.png' image: '/api/img/pk-2.png',
deskripsi: 'Kegiatan olahraga teratur untuk warga lanjut usia dengan gerakan yang disesuaikan untuk menjaga kebugaran dan kesehatan. Program ini didampingi oleh instruktur profesional dan pemantauan kesehatan rutin.'
}, },
{ {
id: 3, id: 3,
judul: 'Posyandu Banjar Bucu', judul: 'Vaksinasi & Sterilasi HPR',
image: '/api/img/posyandu.png' image: '/api/img/pk-3.png',
deskripsi: 'Program pengendalian hewan penular rabies melalui vaksinasi dan sterilisasi untuk mencegah penyebaran penyakit zoonosis. Dilengkapi dengan sistem pendataan digital untuk memantau cakupan dan efektivitas program.'
} }
] ]
const data2 = [
{
id: 1,
icon: <IconBarbell size={50} color={colors['BG-trans']} />,
title: "Menjaga Kesehatan Tubuh",
desc: "Program kesehatan desa dirancang untuk memelihara kesehatan fisik masyarakat melalui aktivitas rutin, pemeriksaan kesehatan berkala, dan edukasi gaya hidup sehat.",
},
{
id: 2,
icon: <IconUsersGroup size={50} color={colors['BG-trans']} />,
title: "Mempererat Kebersamaan",
desc: "Kegiatan kesehatan komunal menjadi wadah interaksi sosial yang memperkuat ikatan antar warga desa, menumbuhkan rasa kepedulian dan gotong royong.",
},
{
id: 3,
icon: <IconOld size={50} color={colors['BG-trans']} />,
title: "Medukung Lansia Aktif",
desc: "Program khusus bagi lansia membantu menjaga kebugaran, mengurangi risiko penyakit degeneratif, dan menciptakan komunitas pendukung untuk kehidupan yang sehat dan bahagia.",
},
]
export default function Page() { export default function Page() {
return ( return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}> <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
@@ -29,7 +53,7 @@ export default function Page() {
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}> <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
Program Kesehatan Unggulan Program Kesehatan Unggulan
</Text> </Text>
<Text px={90} ta={"center"} fz={{ base: "h4", md: "h3" }} > <Text px={{base: 20, md: 90}} ta={"center"} fz={{ base: "h4", md: "h3" }} >
Desa Darmasaba mengembangkan berbagai program kesehatan terpadu untuk meningkatkan kualitas Desa Darmasaba mengembangkan berbagai program kesehatan terpadu untuk meningkatkan kualitas
hidup masyarakat, dengan pendekatan preventif dan promotif bebrbasis teknologi serta prtisipasi aktif hidup masyarakat, dengan pendekatan preventif dan promotif bebrbasis teknologi serta prtisipasi aktif
warga. warga.
@@ -43,60 +67,79 @@ export default function Page() {
base: 1, base: 1,
md: 3, md: 3,
}}> }}>
{data.map((v, k) => { {data1.map((v, k) => {
return ( return (
<Paper radius={10} key={k} bg={colors["white-trans-1"]}> <Paper radius={10} key={k} bg={colors["white-trans-1"]}>
<Stack gap={'xs'}> <Stack gap={'xs'}>
<Center> <Center>
<Image src={v.image} alt="" /> <Image src={v.image} alt="" style={{ borderRadius: '14px 14px 0 0' }} />
</Center> </Center>
<Box px={'lg'}> <Box px={'lg'}>
<Text fz={'h4'}>
Jadwal Pelayanan
</Text>
<Text fz={'h4'}>
Setiap tanggal 5, Pukul 09:00 -
12:00 WITA
</Text>
<Box> <Box>
<Text c={colors["blue-button"]} fw={"bold"} fz={"h3"}> <Text pb={10} c={colors["blue-button"]} fw={"bold"} fz={"h3"}>
{v.judul} {v.judul}
</Text> </Text>
<Flex justify={'space-between'}> <Text ta={'justify'} fz={'h4'}>{v.deskripsi}</Text>
<Text fz={'h4'}>Balita</Text>
<Box>
<Text fz={'h4'}>Selasa minggu pertama</Text>
<Text fz={'h4'}>(09:00-11:00 WITA)</Text>
</Box>
</Flex>
</Box> </Box>
<Box> <Box py={15}>
<Flex justify={'space-between'}> <Button fw={'bold'} fz={'h5'} c={colors["blue-button"]} bg={colors["BG-trans"]}>Detail Program</Button>
<Text fz={'h4'}>Lansia</Text>
<Box>
<Text fz={'h4'}>Selasa minggu pertama</Text>
<Text fz={'h4'}>(09:00-11:00 WITA)</Text>
</Box>
</Flex>
</Box> </Box>
<Group py={20}>
<Group gap="xs">
<IconCalendar size={18} />
<Text size="sm">Selasa, 11 Januari 2025</Text>
</Group>
<Group gap="xs">
<IconUser size={18} />
<Text size="sm">Admin Desa</Text>
</Group>
</Group>
</Box> </Box>
</Stack> </Stack>
</Paper> </Paper>
) )
})} })}
</SimpleGrid> </SimpleGrid>
<Text fz={'h4'} fw={"bold"}>
Pelayanan Posyandu
</Text>
<List type="ordered">
<ListItem fz={'h4'}>Penimbangan bayi dan balita</ListItem>
<ListItem fz={'h4'}>Pemantuan status gizi</ListItem>
<ListItem fz={'h4'}>Imunisasi dasar lengkap</ListItem>
<ListItem fz={'h4'}>Konseling</ListItem>
<ListItem fz={'h4'}>Pemantuan kesehatan ibu hamil</ListItem>
</List>
</Stack> </Stack>
</Box> </Box>
<Box py={10} px={{ base: "md", md: 100 }}>
<Box pb={10}>
<Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
Manfaat Program Kesehatan
</Text>
<Text fz={{ base: "h4", md: "h3" }} >
Program kesehatan di Desa Darmasaba memiliki peran penting dalam meningkatkan kesejahteraan masyarakat.
</Text>
</Box>
<SimpleGrid
pb={30}
cols={{
base: 1,
md: 3,
}}>
{data2.map((v, k) => {
return (
<Paper key={k} px={"xl"} py={80} bg={colors['white-trans-1']} c={colors['blue-button']}>
<Stack justify='space-between' >
<Group justify='center'>
<Paper p={'xl'} radius={'100'} bg={colors['blue-button']}>
<Center >
{v.icon}
</Center>
</Paper>
</Group>
<Text ta={"center"} fw={"bold"} fz={"h3"}>
{v.title}
</Text>
<Text ta={"center"} fz={'h4'}>
{v.desc}
</Text>
</Stack>
</Paper>
)
})}
</SimpleGrid>
</Box>
</Stack> </Stack>
) )

View File

@@ -107,11 +107,11 @@ function Page() {
}}> }}>
<Paper p={"xl"} bg={colors['white-trans-1']}> <Paper p={"xl"} bg={colors['white-trans-1']}>
<Text fw={"bold"} fz={'h3'} ta={'center'}>Poliklinik Umum</Text> <Text fw={"bold"} fz={'h3'} ta={'center'}>Poliklinik Umum</Text>
<Text ta={'center'} fz={65} fw={'bold'} c={colors['blue-button']}>26</Text> <Text ta={'center'} fz={{ base: 45, md: 65 }} fw={'bold'} c={colors['blue-button']}>26</Text>
</Paper> </Paper>
<Paper p={"xl"} bg={colors['white-trans-1']}> <Paper p={"xl"} bg={colors['white-trans-1']}>
<Text ta={'center'} fz={'h3'} fw={"bold"}>Poli Gigi</Text> <Text ta={'center'} fz={'h3'} fw={"bold"}>Poli Gigi</Text>
<Text ta={'center'} fz={65} fw={'bold'} c={colors['blue-button']}>26</Text> <Text ta={'center'} fz={{ base: 45, md: 65 }} fw={'bold'} c={colors['blue-button']}>26</Text>
</Paper> </Paper>
</SimpleGrid> </SimpleGrid>
</Paper> </Paper>

View File

@@ -119,17 +119,17 @@ const navbarListMenu = [
{ {
id: "3.5", id: "3.5",
name: "Penanganan Darurat", name: "Penanganan Darurat",
href: "/darmasaba/kesehatan/penanganan-darurat" href: "/darmasaba/kesehatan/penanganan"
}, },
{ {
id: "3.6", id: "3.6",
name: "Kontak Darurat", name: "Kontak Darurat",
href: "/darmasaba/kesehatan/kontak-darurat" href: "/darmasaba/kesehatan/kontak"
}, },
{ {
id: "3.7", id: "3.7",
name: "Info Wabah/Penyakit", name: "Info Wabah/Penyakit",
href: "/darmasaba/kesehatan/info-wabah-penyakit" href: "/darmasaba/kesehatan/info"
} }
] ]
}, },
@@ -141,27 +141,27 @@ const navbarListMenu = [
{ {
id: "4.1", id: "4.1",
name: "Keamanan Lingkungan (Pecalang/Patwal)", name: "Keamanan Lingkungan (Pecalang/Patwal)",
href: "/darmasaba/keamanan/keamanan-lingkungan" href: "/darmasaba/keamanan/lingkungan"
}, },
{ {
id: "4.2", id: "4.2",
name: "Polsek Terdekat", name: "Polsek Terdekat",
href: "/darmasaba/keamanan/polsek-terdekat" href: "/darmasaba/keamanan/polsek"
}, },
{ {
id: "4.3", id: "4.3",
name: "Kontak Darurat", name: "Kontak Darurat",
href: "/darmasaba/keamanan/kontak-darurat" href: "/darmasaba/keamanan/darurat"
}, },
{ {
id: "4.4", id: "4.4",
name: "Pencegahan Kriminalitas", name: "Pencegahan Kriminalitas",
href: "/darmasaba/keamanan/pencegahan-kriminalitas" href: "/darmasaba/keamanan/kriminalitas"
}, },
{ {
id: "4.5", id: "4.5",
name: "Laporan Publik", name: "Laporan Publik",
href: "/darmasaba/keamanan/laporan-publik" href: "/darmasaba/keamanan/laporan"
}, },
{ {
id: "4.6", id: "4.6",