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

UI Menu Keamanan

Browse Source
This commit is contained in:
nico
2025-03-24 15:31:59 +08:00
parent 1bb808da3b
commit e33db73d65
12 changed files with 1070 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
src/app/darmasaba/(pages)/keamanan/darurat/page.tsx Normal file
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;

106
src/app/darmasaba/(pages)/keamanan/keamanan/page.tsx Normal file
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;

123
src/app/darmasaba/(pages)/keamanan/kriminalitas/page.tsx Normal file
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;

50
src/app/darmasaba/(pages)/keamanan/laporan/page.tsx Normal file
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;

107
src/app/darmasaba/(pages)/keamanan/lingkungan/page.tsx Normal file
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;

95
src/app/darmasaba/(pages)/keamanan/polsek/page.tsx Normal file
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;