tambahannya
This commit is contained in:
bipproduction
55
src/app/darmasaba/_com/main-page/landing-page/ModuleView.tsx
Normal file
55
src/app/darmasaba/_com/main-page/landing-page/ModuleView.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import images from "@/con/images";
|
||||
import { Center, Image, Paper, SimpleGrid } from "@mantine/core";
|
||||
import { motion } from 'framer-motion';
|
||||
import { useTransitionRouter } from 'next-view-transitions';
|
||||
|
||||
|
||||
const listImageModule = Object.values(images.module);
|
||||
|
||||
function ModuleItem({ item }: { item: string }) {
|
||||
const router = useTransitionRouter();
|
||||
return (
|
||||
<Paper
|
||||
onClick={() => {
|
||||
router.push(`/module/c`);
|
||||
}}
|
||||
p={"md"}
|
||||
bg={"white"}
|
||||
radius={"32"}
|
||||
pos={"relative"}
|
||||
>
|
||||
<Center h={"100%"}>
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.05 }}
|
||||
>
|
||||
<Image src={item} alt="icon"
|
||||
fit="contain"
|
||||
sizes="100%"
|
||||
loading="lazy"
|
||||
style={{
|
||||
objectFit: "contain",
|
||||
objectPosition: "center"
|
||||
}}
|
||||
/>
|
||||
</motion.div>
|
||||
</Center>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
||||
function ModuleView() {
|
||||
return (
|
||||
<SimpleGrid
|
||||
cols={{
|
||||
base: 2,
|
||||
md: 3,
|
||||
}}
|
||||
>
|
||||
{listImageModule.map((item, k) => {
|
||||
return <ModuleItem key={k} item={item} />;
|
||||
})}
|
||||
</SimpleGrid>
|
||||
);
|
||||
}
|
||||
|
||||
export default ModuleView;
|
||||
25
src/app/darmasaba/_com/main-page/landing-page/SosmedView.tsx
Normal file
25
src/app/darmasaba/_com/main-page/landing-page/SosmedView.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import images from "@/con/images";
|
||||
import { Flex, ActionIcon, Image } from "@mantine/core";
|
||||
|
||||
function SosmedView() {
|
||||
const listSosmed = Object.values(images.sosmed);
|
||||
return (
|
||||
<Flex gap={"md"}>
|
||||
{listSosmed.map((item, k) => {
|
||||
return (
|
||||
<ActionIcon
|
||||
variant="transparent"
|
||||
key={k}
|
||||
w={32}
|
||||
h={32}
|
||||
pos={"relative"}
|
||||
>
|
||||
<Image src={item} alt="icon" loading="lazy" fit="contain" />
|
||||
</ActionIcon>
|
||||
);
|
||||
})}
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
export default SosmedView;
|
||||
187
src/app/darmasaba/_com/main-page/landing-page/index.tsx
Normal file
187
src/app/darmasaba/_com/main-page/landing-page/index.tsx
Normal file
@@ -0,0 +1,187 @@
|
||||
"use client";
|
||||
import colors from "@/con/colors";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Flex,
|
||||
Image,
|
||||
Stack,
|
||||
Text,
|
||||
Title
|
||||
} from "@mantine/core";
|
||||
import ModuleView from "./ModuleView";
|
||||
import SosmedView from "./SosmedView";
|
||||
|
||||
function LandingPage() {
|
||||
return (
|
||||
<Stack bg={colors["blue-button"]}>
|
||||
<Flex
|
||||
gap={"md"}
|
||||
wrap={{
|
||||
base: "wrap",
|
||||
md: "nowrap",
|
||||
}}
|
||||
>
|
||||
<Stack
|
||||
gap={"xl"}
|
||||
w={{
|
||||
base: "100%",
|
||||
md: "60%",
|
||||
}}
|
||||
py={{
|
||||
base: "xs",
|
||||
md: "72",
|
||||
}}
|
||||
px={{
|
||||
base: "xs",
|
||||
md: "100",
|
||||
}}
|
||||
>
|
||||
<Card
|
||||
radius={"32"}
|
||||
bg={colors.grey[1]}
|
||||
p={{
|
||||
base: "xs",
|
||||
md: "32",
|
||||
}}
|
||||
>
|
||||
<Stack gap={42}>
|
||||
<Flex
|
||||
gap={"md"}
|
||||
wrap={{
|
||||
base: "wrap",
|
||||
md: "nowrap",
|
||||
}}
|
||||
>
|
||||
<Flex gap={"md"} flex={1}>
|
||||
<Box
|
||||
pos={"relative"}
|
||||
bg={"white"}
|
||||
w={{
|
||||
base: 64,
|
||||
md: 72,
|
||||
}}
|
||||
h={{
|
||||
base: 64,
|
||||
md: 72,
|
||||
}}
|
||||
style={{
|
||||
borderRadius: 24,
|
||||
}}
|
||||
p={"sm"}
|
||||
>
|
||||
<Image
|
||||
src={"/assets/images/darmasaba-icon.png"}
|
||||
alt="icon"
|
||||
sizes="100%"
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
pos={"relative"}
|
||||
w={{
|
||||
base: 64,
|
||||
md: 72,
|
||||
}}
|
||||
h={{
|
||||
base: 64,
|
||||
md: 72,
|
||||
}}
|
||||
style={{
|
||||
borderRadius: 24,
|
||||
}}
|
||||
p={"sm"}
|
||||
bg={"white"}
|
||||
>
|
||||
<Image
|
||||
src={"/assets/images/pudak-icon.png"}
|
||||
alt="icon"
|
||||
sizes={"100%"}
|
||||
fit="contain"
|
||||
/>
|
||||
</Box>
|
||||
</Flex>
|
||||
<Stack flex={2} gap={0} justify="end" c={colors["blue-button"]}>
|
||||
<Text
|
||||
fz={{
|
||||
base: "1.5rem",
|
||||
md: "1.4rem",
|
||||
}}
|
||||
>
|
||||
Pemerintah Desa
|
||||
</Text>
|
||||
<Title>DARMASABA</Title>
|
||||
</Stack>
|
||||
</Flex>
|
||||
<ModuleView />
|
||||
<SosmedView />
|
||||
</Stack>
|
||||
</Card>
|
||||
<Stack
|
||||
align="center"
|
||||
justify={"center"}
|
||||
>
|
||||
<Text c={"white"} style={{
|
||||
textAlign: "center"
|
||||
}} maw={300}>Tambahkan Text Apa aja disini untuk lebih detail yang berwarna putih</Text>
|
||||
<Button
|
||||
radius={100}
|
||||
w={{
|
||||
base: "100%",
|
||||
sm: "300",
|
||||
}}
|
||||
px={42}
|
||||
size="lg"
|
||||
variant="fill"
|
||||
bg={"gray.1"}
|
||||
c={"dark"}
|
||||
>
|
||||
Button 1
|
||||
</Button>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack
|
||||
justify={"end"}
|
||||
align={"end"}
|
||||
pos={"relative"}
|
||||
w={{
|
||||
base: "100%",
|
||||
md: "40%",
|
||||
}}
|
||||
px={"xl"}
|
||||
>
|
||||
<Image
|
||||
src={"/assets/images/perbekel.png"}
|
||||
alt="perbekel"
|
||||
sizes="100%"
|
||||
fit="contain"
|
||||
/>
|
||||
<Box
|
||||
pos={"absolute"}
|
||||
bottom={0}
|
||||
p={{
|
||||
base: "xs",
|
||||
md: "md",
|
||||
}}
|
||||
>
|
||||
<Card
|
||||
px={"lg"}
|
||||
radius={"32"}
|
||||
className="glass3"
|
||||
style={{
|
||||
border: `1px solid white`,
|
||||
}}
|
||||
>
|
||||
<Text>Perbekel Desa Darmasaba</Text>
|
||||
<Text c={colors["blue-button"]} fw={"bolder"} fz={"1rem"}>
|
||||
I.B. Surya Prabhawa Manuaba, S.H.,M.H.,NL.P.
|
||||
</Text>
|
||||
</Card>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Flex>
|
||||
</Stack >
|
||||
);
|
||||
}
|
||||
|
||||
export default LandingPage;
|
||||
Reference in New Issue
Block a user