Fix Menu Lingkungan Darmasaba User
This commit is contained in:
@@ -5,112 +5,130 @@ import { IconArrowRight } from '@tabler/icons-react';
|
||||
|
||||
function Page() {
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
|
||||
<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
|
||||
}}
|
||||
cols={{ base: 1, md: 2 }}
|
||||
spacing="xl"
|
||||
>
|
||||
{/* Content 1 */}
|
||||
<Box pt={{base: 0, md: 35}}>
|
||||
<Text c={colors["blue-button"]} fz={{ base: "h4", md: "h3" }} >
|
||||
Info Keamanan dan Pencegahan Kriminalitas
|
||||
<Box pt={{ base: 0, md: 35 }}>
|
||||
<Text c={colors['blue-button']} fz={{ base: 'h4', md: 'h3' }}>
|
||||
Community Safety & Crime Prevention
|
||||
</Text>
|
||||
<Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
|
||||
Kontak Darurat
|
||||
<Text fz={{ base: 'h1', md: '2.5rem' }} c={colors['blue-button']} fw="bold">
|
||||
Emergency Contacts
|
||||
</Text>
|
||||
<Group>
|
||||
<Button rightSection={<IconArrowRight />} mt={20} radius={10} bg={colors["blue-button"]} c={colors["white-1"]}>
|
||||
Lihat Detail
|
||||
<Button
|
||||
rightSection={<IconArrowRight />}
|
||||
mt={20}
|
||||
radius="xl"
|
||||
size="md"
|
||||
bg={colors['blue-button']}
|
||||
c={colors['white-1']}
|
||||
>
|
||||
View Details
|
||||
</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
|
||||
<SimpleGrid cols={{ base: 1, md: 2 }} spacing="lg">
|
||||
<Paper p="lg" radius="xl" shadow="md">
|
||||
<Text c={colors['blue-button']} fw="bold" fz={{ base: 'h4', md: 'h3' }}>
|
||||
How to Keep Your Neighborhood Safe
|
||||
</Text>
|
||||
<Text fz={{ base: "h5", md: "h4" }} c={colors["blue-button"]} >
|
||||
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
|
||||
<Text fz={{ base: 'h5', md: 'h4' }} c={colors['blue-button']} mt="sm">
|
||||
Practical safety habits everyone can apply daily to reduce risks.
|
||||
</Text>
|
||||
<Group>
|
||||
<Button rightSection={<IconArrowRight />} mt={20} radius={10} bg={colors["blue-button"]} c={colors["white-1"]}>
|
||||
Lihat Detail
|
||||
<Button
|
||||
rightSection={<IconArrowRight />}
|
||||
mt={20}
|
||||
radius="xl"
|
||||
size="md"
|
||||
bg={colors['blue-button']}
|
||||
c={colors['white-1']}
|
||||
>
|
||||
Learn More
|
||||
</Button>
|
||||
</Group>
|
||||
</Paper>
|
||||
<Paper p={"lg"}>
|
||||
<Text c={colors["blue-button"]} fw={'bold'} fz={{ base: "h4", md: "h3" }} >
|
||||
Mengenali tanda-tanda kegiatan kriminal
|
||||
<Paper p="lg" radius="xl" shadow="md">
|
||||
<Text c={colors['blue-button']} fw="bold" fz={{ base: 'h4', md: 'h3' }}>
|
||||
Recognizing Criminal Activities
|
||||
</Text>
|
||||
<Text fz={{ base: "h5", md: "h4" }} c={colors["blue-button"]} >
|
||||
the printing and typesetting industry. the printing and typesetting industry.
|
||||
<Text fz={{ base: 'h5', md: 'h4' }} c={colors['blue-button']} mt="sm">
|
||||
Key warning signs and behavior patterns you should stay aware of.
|
||||
</Text>
|
||||
<Group>
|
||||
<Button rightSection={<IconArrowRight />} mt={20} radius={10} bg={colors["blue-button"]} c={colors["white-1"]}>
|
||||
Lihat Detail
|
||||
<Button
|
||||
rightSection={<IconArrowRight />}
|
||||
mt={20}
|
||||
radius="xl"
|
||||
size="md"
|
||||
bg={colors['blue-button']}
|
||||
c={colors['white-1']}
|
||||
>
|
||||
Learn More
|
||||
</Button>
|
||||
</Group>
|
||||
</Paper>
|
||||
</SimpleGrid>
|
||||
{/* Content 3 */}
|
||||
<Paper p={'xl'}>
|
||||
<Text fz={{ base: "h3", md: "h2" }} c={colors["blue-button"]} fw={"bold"}>
|
||||
Program Keamanan Rutin
|
||||
<Paper p="xl" radius="xl" shadow="lg">
|
||||
<Text fz={{ base: 'h3', md: 'h2' }} c={colors['blue-button']} fw="bold">
|
||||
Ongoing Security Programs
|
||||
</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']} />
|
||||
<Stack pt={30} gap="lg">
|
||||
{['Night Patrol', 'Neighborhood Watch', 'Emergency Preparedness'].map((program, i) => (
|
||||
<Paper key={i} p="md" bg={colors['blue-button']} radius="md" shadow="sm">
|
||||
<Flex align="center" justify="space-between">
|
||||
<Text fz="h3" c={colors['white-1']}>
|
||||
{program}
|
||||
</Text>
|
||||
<IconArrowRight size={28} 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>
|
||||
<Button
|
||||
fullWidth
|
||||
radius="xl"
|
||||
size="md"
|
||||
bg={colors['blue-button']}
|
||||
rightSection={<IconArrowRight size={20} color={colors['white-1']} />}
|
||||
>
|
||||
Explore More Programs
|
||||
</Button>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Paper>
|
||||
{/* Content 4 */}
|
||||
<Box>
|
||||
<Paper p={'xl'} >
|
||||
<Box style={{ maxWidth: "560px", width: "100%", aspectRatio: "16/9" }}>
|
||||
<iframe width="100%"
|
||||
<Paper p="xl" radius="xl" shadow="lg">
|
||||
<Box style={{ maxWidth: 560, 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>
|
||||
src="https://www.youtube.com/embed/p5OkdBgasWA?si=6lFKXeE9LN5zcJQq"
|
||||
title="Community Safety Patrol"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
/>
|
||||
</Box>
|
||||
<Text py={10} fz={{ base: "h3", md: "h2" }} fw={'bold'} c={colors['blue-button']}>
|
||||
Patroli Malam Darmasaba
|
||||
<Text py={10} fz={{ base: 'h3', md: 'h2' }} fw="bold" c={colors['blue-button']}>
|
||||
Darmasaba Night Patrol
|
||||
</Text>
|
||||
<Text fz={'h4'} >
|
||||
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
|
||||
<Text fz="h4" c={colors['blue-button']}>
|
||||
A closer look at how the community works together to maintain safety.
|
||||
</Text>
|
||||
<Box pt={10}>
|
||||
<Button bg={colors['blue-button']} rightSection={<IconArrowRight size={20} color={colors['white-1']} />}>
|
||||
Lihat Video Lainnya
|
||||
<Button
|
||||
radius="xl"
|
||||
size="md"
|
||||
bg={colors['blue-button']}
|
||||
rightSection={<IconArrowRight size={20} color={colors['white-1']} />}
|
||||
>
|
||||
Watch More Videos
|
||||
</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
Reference in New Issue
Block a user