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

tambahannya

Browse Source
This commit is contained in:
bipproduction
2025-02-19 17:41:56 +08:00
parent 0d4a8329d7
commit 9bde6a2a06
74 changed files with 1079 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
src/app/darmasaba/_com/main-page/content-4/index.tsx Normal file
View File

@@ -0,0 +1,126 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
"use client";
import colors from "@/con/colors";
import images from "@/con/images";
import ApiFetch from "@/lib/api-fetch";
import {
BackgroundImage,
Box,
Button,
Divider,
Group,
SimpleGrid,
Stack,
Text,
Title,
} from "@mantine/core";
import _ from "lodash";
import { motion } from "motion/react";
import useSWR from "swr";
type DataPotensi = {
id: string;
name: string;
};
const textHeading = {
title: "Potensi",
des: "segenap sumber daya alam dan sumber daya manusia yang dimiliki desa sebagai modal dasar yang perlu dikelola dan dikembangkan bagi kelangsungan dan perkembangan desa",
};
function Content4() {
const { data, isLoading } = useSWR("/", (url) =>
ApiFetch.api.potensi.get().then(({ data }) => data?.data)
);
if (isLoading) return <Text>loading ...</Text>;
return (
<Stack p={"sm"} gap={"4rem"}>
<Box
w={{
base: "100%",
sm: "60%",
}}
>
<Text fz={"4.4rem"}>{textHeading.title}</Text>
<Text size={"1.4rem"}>{textHeading.des}</Text>
</Box>
<SimpleGrid
cols={{
base: 1,
sm: 2,
}}
>
{_.take(data, 4).map((v, k) => (
<motion.div
key={k}
whileHover={{ scale: 1.01 }}
whileTap={{ scale: 0.8 }}
>
<BackgroundImage
src={images.tps}
h={320}
key={k}
radius={16}
pos={"relative"}
>
<Box
style={{
borderRadius: 16,
zIndex: 0,
}}
pos={"absolute"}
w={"100%"}
h={"100%"}
bg={colors.trans.dark[2]}
/>
<Stack
justify="end"
h={"100%"}
p={"md"}
align="start"
pos={"absolute"}
style={{
zIndex: 1,
}}
>
<Text fw={"bold"} c={"gray.1"} size={"2.4rem"}>
{v.name}
</Text>
<Text
style={{
textAlign: "center",
}}
c={"blue"}
>
Tambahkan Text Indikasi Keberhasilan
</Text>
</Stack>
</BackgroundImage>
</motion.div>
))}
</SimpleGrid>
<Stack align="center">
<Group>
<Stack gap={0}>
<Title>Text Lanjutan Mengarahkan</Title>
<Text
style={{
textAlign: "center",
}}
>
deskripsi singkat sebelum tombol dibawah setelah ini
</Text>
</Stack>
</Group>
<Group>
<Button variant="outline" radius={100} size="md">
Selanjutnya
</Button>
</Group>
</Stack>
<Divider />
</Stack>
);
}
export default Content4;

38
src/app/darmasaba/_com/main-page/content-5/FlipScroll.tsx Normal file
View File

@@ -0,0 +1,38 @@
import React from "react";
import { motion, useScroll, useTransform } from "framer-motion";
import { Image } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
const FlipOnScroll = () => {
// Menggunakan hook useScroll untuk mendeteksi posisi scroll
const { scrollYProgress } = useScroll();
// Menggunakan useTransform untuk mengubah nilai scroll menjadi rotasi
const rotate = useTransform(scrollYProgress, [0, 1], [10, 360 * 1]); // Rotasi dari 0 hingga 360 derajat
useShallowEffect(() => {
rotate.on("change", (latest) => {
console.log(latest)
})
}, [])
return (
<div style={{ backgroundColor: "gray", padding: "50px" }}>
<h1>Scroll ke bawah untuk melihat animasi flip</h1>
<motion.div
style={{
width: "500px",
height: "500px",
backgroundColor: "blue",
borderRadius: "10px",
}}
>
<Image src={"https://awsimages.detik.net.id/community/media/visual/2023/04/14/gambar-pemandangan-6_169.jpeg?w=1200"} alt="a" />
</motion.div>
</div>
);
};
export default FlipOnScroll;

16
src/app/darmasaba/_com/main-page/content-5/index.tsx Normal file
View File

@@ -0,0 +1,16 @@
"use client";
import { Center, Container, Stack, Text } from "@mantine/core";
function Content5() {
return (
<Stack>
<Container w={{ base: "100%", md: "80%" }} p={"xl"} h={720}>
<Center>
<Text fz={"3.4rem"}>Berkolaborasi membangun desa</Text>
</Center>
</Container>
</Stack>
);
}
export default Content5;

18
src/app/darmasaba/_com/main-page/content-6/index.tsx Normal file
View File

@@ -0,0 +1,18 @@
"use client";
import { Stack, Container, Center, Text } from "@mantine/core";
function Content6() {
return (
<Stack>
<Container w={{ base: "100%", md: "80%" }} p={"xl"} h={720}>
<Center>
<Text fz={"3.4rem"}>Indeks Kepuasan Masyarakat</Text>
</Center>
</Container>
</Stack>
);
}
export default Content6;

13
src/app/darmasaba/_com/main-page/content-7/index.tsx Normal file
View File

@@ -0,0 +1,13 @@
import { Stack, Container, Center, Text } from "@mantine/core";
export default function Content7() {
return (
<Stack>
<Container w={{ base: "100%", md: "80%" }} p={"xl"} h={720}>
<Center>
<Text fz={"3.4rem"}>APBDES Darmasaba</Text>
</Center>
</Container>
</Stack>
);
}

55
src/app/darmasaba/_com/main-page/landing-page/ModuleView.tsx Normal file
View 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
View 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
View 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;

134
src/app/darmasaba/_com/main-page/layanan/index.tsx Normal file
View File

@@ -0,0 +1,134 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable @typescript-eslint/no-unused-vars */
"use client";
import colors from "@/con/colors";
import images from "@/con/images";
import ApiFetch from "@/lib/api-fetch";
import { Carousel } from "@mantine/carousel";
import {
BackgroundImage,
Box,
Button,
Card,
Container,
Divider,
Group,
Image,
Paper,
Stack,
Text,
useMantineTheme,
} from "@mantine/core";
import { useMediaQuery } from "@mantine/hooks";
import Autoplay from "embla-carousel-autoplay";
import _ from "lodash";
import { useTransitionRouter } from "next-view-transitions";
import { useRef } from "react";
import useSWR from "swr";
type DataSlider = {
id: string;
name: string;
};
const textHeading = {
title: "Layanan",
des: "Terwujudnya Layanan umum bertajuk Sistem administrasi Kependudukan Terintegrasi di Desa berbasi Elektronik, Smart dan Aman",
};
function Content3() {
const { data, isLoading } = useSWR(
"/",
(url) => ApiFetch.api.layanan.get().then(({ data }) => data?.data),
{
fallbackData: [],
}
);
const router = useTransitionRouter()
return (
<Stack pos={"relative"} bg={colors.grey[1]} gap={"42"} py={"xl"}>
<Container w={{ base: "100%", md: "50%" }} p={"xl"}>
<Stack align="center" gap={"0"}>
<Text fz={"3.4rem"} fw={"bold"}>
{textHeading.title}
</Text>
<Text
style={{
textAlign: "center",
}}
>
{textHeading.des}
</Text>
<Box p={"md"}>
<Button onClick={() => {
router.push("/layanan")
}} variant="filled" bg={"dark"} radius={100}>
Lanjutkan
</Button>
</Box>
</Stack>
</Container>
<Slider data={data as any} />
<Divider />
</Stack>
);
}
const height = 720;
function Slider({ data }: { data: DataSlider[] }) {
const theme = useMantineTheme();
const mobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
const autoplay = useRef(Autoplay({ delay: 2000 }));
const router = useTransitionRouter()
const slides = data.map((item) => (
<Carousel.Slide key={item.id} >
<Paper h={"100%"} pos={"relative"} style={{
backgroundImage: `url(${images["bg-slide3"]}) `,
backgroundSize: "cover",
backgroundPosition: "center",
backgroundRepeat: "no-repeat",
}}>
<Stack justify="space-between" h={"100%"} gap={0} p={"lg"} pos={"relative"} >
<Box p={"lg"}>
<Text
fw={"bold"}
c={"white"}
size={"3.5rem"}
style={{
textAlign: "center",
}}
>
{_.startCase(item.name)}
</Text>
</Box>
<Group justify="center">
<Button onClick={() => {
router.push(`/layanan/${item.id}`)
}} px={46} radius={"100"} size="md">
Detail
</Button>
</Group>
</Stack>
</Paper>
</Carousel.Slide>
));
return (
<Carousel
plugins={[autoplay.current]}
onMouseEnter={autoplay.current.stop}
onMouseLeave={autoplay.current.reset}
height={height}
slideSize={{ base: "100%", sm: "50%", md: "33.333333%" }}
slideGap={{ base: "xl", sm: "md" }}
loop
align="start"
slidesToScroll={mobile ? 1 : 2}
>
{slides}
</Carousel>
);
}
export default Content3;

67
src/app/darmasaba/_com/main-page/penghargaan/index.tsx Normal file
View File

@@ -0,0 +1,67 @@
'use client';
import { Stack, Box, Container, Button, Text } from "@mantine/core";
import { useTransitionRouter } from 'next-view-transitions'
function Penghargaan() {
const router = useTransitionRouter()
return (
<Stack pos={"relative"} h={720}>
<video
width="320"
height="240"
loop
autoPlay
muted
style={{
width: "100%",
height: "100%",
objectFit: "cover",
overflow: "hidden",
}}
>
<source src="/assets/videos/award.mp4" type="video/mp4" />
</video>
<Box
style={{
width: "100%",
height: "100%",
position: "absolute",
top: 0,
left: 0,
background: "rgba(0,0,0,0.6)",
}}
>
<Container w={{ base: "100%", md: "80%" }} p={"xl"} h={720}>
<Stack justify="center" align="center">
<Text
style={{
textAlign: "center",
}}
fw={"bold"}
fz={"2.4rem"}
c={"white"}
>
Penghargaan
</Text>
<Stack align="center" gap={0}>
<Text fz={"1.4rem"} c={"white"}>
Juara 2 Lomba Video Pendek
</Text>
<Text fz={"1.4rem"} c={"white"}>
Juara 2 Duta Investasi
</Text>
<Text fz={"1.4rem"} c={"white"}>
Juara Favorit Lomba Video Pendek
</Text>
</Stack>
<Button onClick={() => router.push("/penghargaan")} variant="white" radius={100}>
Selanjutnya
</Button>
</Stack>
</Container>
</Box>
</Stack>
);
}
export default Penghargaan;