UI Detail Layanan & Detail Penghargaan
This commit is contained in:
@@ -0,0 +1,92 @@
|
||||
import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
|
||||
import colors from '@/con/colors';
|
||||
import { Stack, Container, Text, Image, ActionIcon, Box, Divider, Flex } from '@mantine/core';
|
||||
import { IconBrandFacebook, IconBrandInstagram, IconBrandTwitter, IconBrandWhatsapp } from '@tabler/icons-react';
|
||||
import React from 'react';
|
||||
|
||||
function Page() {
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={42}>
|
||||
<Container w={{ base: "100%", md: "50%" }}>
|
||||
<BackButton/>
|
||||
<Stack align="center" gap={0}>
|
||||
<Text fz={"3.4rem"} fw={"bold"}>
|
||||
Juara 2
|
||||
</Text>
|
||||
<Text
|
||||
ta={"center"}
|
||||
fw={"bold"}
|
||||
>
|
||||
Lomba Video Pendek Potensi dan Peluang Investasi di Desa Kabupaten Badung 2024
|
||||
</Text>
|
||||
<Image py={20} src={"/api/img/penghargaan-2.png"} alt='' />
|
||||
<Text
|
||||
py={20}
|
||||
ta={"justify"}
|
||||
fw={"bold"}
|
||||
>
|
||||
Desa Dramasaba Raih Juara 2 dalam Lomba Video Pendek Potensi dan Peluang Investasi di Desa Kabupaten Badung 2024
|
||||
</Text>
|
||||
<Text
|
||||
ta={"justify"}
|
||||
>
|
||||
Desa Dramasaba kembali menunjukkan eksistensinya dalam memajukan potensi desa dengan meraih Juara 2 dalam ajang Lomba Video Pendek Potensi dan Peluang Investasi di Desa Kabupaten Badung 2024. Prestasi ini menjadi bukti nyata bahwa Desa Dramasaba memiliki daya tarik serta peluang investasi yang menjanjikan bagi para investor maupun masyarakat yang ingin berkontribusi dalam pengembangan desa.
|
||||
</Text>
|
||||
<Text
|
||||
py={5}
|
||||
ta={"justify"}
|
||||
>
|
||||
Dalam video pendek yang diikutsertakan dalam lomba ini, Desa Dramasaba menampilkan berbagai potensi unggulan yang dimiliki, mulai dari sektor pertanian, pariwisata berbasis budaya, hingga ekonomi kreatif yang sedang berkembang pesat. Dengan pengemasan yang menarik dan penyampaian informasi yang jelas, video tersebut berhasil memikat perhatian dewan juri serta menjadi inspirasi bagi desa-desa lain dalam mengembangkan potensi wilayahnya masing-masing.
|
||||
</Text>
|
||||
<Text
|
||||
ta={"justify"}
|
||||
>
|
||||
Keberhasilan ini tidak lepas dari kerja keras seluruh tim kreatif, pemerintah desa, serta masyarakat yang turut berpartisipasi dalam produksi video. Kepala Desa Dramasaba, [Nama Kepala Desa], mengungkapkan rasa syukur dan bangganya atas pencapaian ini. Menurutnya, kemenangan ini bukan sekadar penghargaan, tetapi juga menjadi motivasi untuk terus mengembangkan desa agar semakin dikenal luas dan menarik lebih banyak peluang investasi.
|
||||
</Text>
|
||||
<Text
|
||||
py={5}
|
||||
ta={"justify"}
|
||||
>
|
||||
Lomba Video Pendek Potensi dan Peluang Investasi di Desa Kabupaten Badung 2024 merupakan ajang yang diadakan oleh pemerintah daerah dengan tujuan untuk mendorong desa-desa dalam mengenalkan dan mempromosikan potensi investasi mereka. Dengan mengikuti lomba ini, Desa Dramasaba tidak hanya memperoleh apresiasi, tetapi juga membuka peluang lebih besar untuk berkolaborasi dengan investor maupun pihak lain yang tertarik dalam pengembangan desa.
|
||||
</Text>
|
||||
<Text
|
||||
ta={"justify"}
|
||||
>
|
||||
Ke depan, Desa Dramasaba berkomitmen untuk terus meningkatkan daya saingnya, baik dalam sektor ekonomi, budaya, maupun infrastruktur, sehingga mampu memberikan manfaat yang lebih besar bagi masyarakat serta menarik perhatian lebih banyak pihak untuk berinvestasi dan berkontribusi dalam pembangunan desa.
|
||||
</Text>
|
||||
<Text
|
||||
py={5}
|
||||
ta={"justify"}
|
||||
>
|
||||
Dengan prestasi ini, diharapkan Desa Dramasaba dapat menjadi contoh bagi desa-desa lain dalam memanfaatkan media digital sebagai sarana promosi dan pengembangan potensi lokal.
|
||||
</Text>
|
||||
</Stack>
|
||||
<Box py={20}>
|
||||
<Divider />
|
||||
<Flex justify={"space-between"} py={20}>
|
||||
<Text fz={"sm"}>25 May 2021 . Darmasaba</Text>
|
||||
<Box>
|
||||
<Flex gap={"lg"}>
|
||||
<ActionIcon variant='transparent'>
|
||||
<IconBrandFacebook color={"gray"} size={"30"} />
|
||||
</ActionIcon>
|
||||
<ActionIcon variant='transparent'>
|
||||
<IconBrandInstagram color={"gray"} size={"30"} />
|
||||
</ActionIcon>
|
||||
<ActionIcon variant='transparent'>
|
||||
<IconBrandTwitter color={"gray"} size={"30"} />
|
||||
</ActionIcon>
|
||||
<ActionIcon variant='transparent'>
|
||||
<IconBrandWhatsapp color={"gray"} size={"30"} />
|
||||
</ActionIcon>
|
||||
</Flex>
|
||||
</Box>
|
||||
</Flex>
|
||||
<Divider pb={50} />
|
||||
</Box>
|
||||
</Container>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
@@ -0,0 +1,92 @@
|
||||
import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
|
||||
import colors from '@/con/colors';
|
||||
import { Stack, Container, Text, Image, ActionIcon, Box, Divider, Flex } from '@mantine/core';
|
||||
import { IconBrandFacebook, IconBrandInstagram, IconBrandTwitter, IconBrandWhatsapp } from '@tabler/icons-react';
|
||||
import React from 'react';
|
||||
|
||||
function Page() {
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={42}>
|
||||
<Container w={{ base: "100%", md: "50%" }}>
|
||||
<BackButton/>
|
||||
<Stack align="center" gap={0}>
|
||||
<Text fz={"3.4rem"} fw={"bold"}>
|
||||
Juara 2
|
||||
</Text>
|
||||
<Text
|
||||
ta={"center"}
|
||||
fw={"bold"}
|
||||
>
|
||||
Duta Invenstasi Kabupaten Badung 2024
|
||||
</Text>
|
||||
<Image py={20} src={"/api/img/penghargaan-3.png"} alt='' />
|
||||
<Text
|
||||
py={20}
|
||||
ta={"justify"}
|
||||
fw={"bold"}
|
||||
>
|
||||
Desa Dramasaba Raih Juara 2 dalam Duta Invenstasi Kabupaten Badung 2024
|
||||
</Text>
|
||||
<Text
|
||||
ta={"justify"}
|
||||
>
|
||||
Desa Dramasaba kembali menunjukkan eksistensinya dalam memajukan potensi desa dengan meraih Juara 2 dalam ajang Lomba Video Pendek Potensi dan Peluang Investasi di Desa Kabupaten Badung 2024. Prestasi ini menjadi bukti nyata bahwa Desa Dramasaba memiliki daya tarik serta peluang investasi yang menjanjikan bagi para investor maupun masyarakat yang ingin berkontribusi dalam pengembangan desa.
|
||||
</Text>
|
||||
<Text
|
||||
py={5}
|
||||
ta={"justify"}
|
||||
>
|
||||
Dalam video pendek yang diikutsertakan dalam lomba ini, Desa Dramasaba menampilkan berbagai potensi unggulan yang dimiliki, mulai dari sektor pertanian, pariwisata berbasis budaya, hingga ekonomi kreatif yang sedang berkembang pesat. Dengan pengemasan yang menarik dan penyampaian informasi yang jelas, video tersebut berhasil memikat perhatian dewan juri serta menjadi inspirasi bagi desa-desa lain dalam mengembangkan potensi wilayahnya masing-masing.
|
||||
</Text>
|
||||
<Text
|
||||
ta={"justify"}
|
||||
>
|
||||
Keberhasilan ini tidak lepas dari kerja keras seluruh tim kreatif, pemerintah desa, serta masyarakat yang turut berpartisipasi dalam produksi video. Kepala Desa Dramasaba, [Nama Kepala Desa], mengungkapkan rasa syukur dan bangganya atas pencapaian ini. Menurutnya, kemenangan ini bukan sekadar penghargaan, tetapi juga menjadi motivasi untuk terus mengembangkan desa agar semakin dikenal luas dan menarik lebih banyak peluang investasi.
|
||||
</Text>
|
||||
<Text
|
||||
py={5}
|
||||
ta={"justify"}
|
||||
>
|
||||
Lomba Video Pendek Potensi dan Peluang Investasi di Desa Kabupaten Badung 2024 merupakan ajang yang diadakan oleh pemerintah daerah dengan tujuan untuk mendorong desa-desa dalam mengenalkan dan mempromosikan potensi investasi mereka. Dengan mengikuti lomba ini, Desa Dramasaba tidak hanya memperoleh apresiasi, tetapi juga membuka peluang lebih besar untuk berkolaborasi dengan investor maupun pihak lain yang tertarik dalam pengembangan desa.
|
||||
</Text>
|
||||
<Text
|
||||
ta={"justify"}
|
||||
>
|
||||
Ke depan, Desa Dramasaba berkomitmen untuk terus meningkatkan daya saingnya, baik dalam sektor ekonomi, budaya, maupun infrastruktur, sehingga mampu memberikan manfaat yang lebih besar bagi masyarakat serta menarik perhatian lebih banyak pihak untuk berinvestasi dan berkontribusi dalam pembangunan desa.
|
||||
</Text>
|
||||
<Text
|
||||
py={5}
|
||||
ta={"justify"}
|
||||
>
|
||||
Dengan prestasi ini, diharapkan Desa Dramasaba dapat menjadi contoh bagi desa-desa lain dalam memanfaatkan media digital sebagai sarana promosi dan pengembangan potensi lokal.
|
||||
</Text>
|
||||
</Stack>
|
||||
<Box py={20}>
|
||||
<Divider />
|
||||
<Flex justify={"space-between"} py={20}>
|
||||
<Text fz={"sm"}>25 May 2021 . Darmasaba</Text>
|
||||
<Box>
|
||||
<Flex gap={"lg"}>
|
||||
<ActionIcon variant='transparent'>
|
||||
<IconBrandFacebook color={"gray"} size={"30"} />
|
||||
</ActionIcon>
|
||||
<ActionIcon variant='transparent'>
|
||||
<IconBrandInstagram color={"gray"} size={"30"} />
|
||||
</ActionIcon>
|
||||
<ActionIcon variant='transparent'>
|
||||
<IconBrandTwitter color={"gray"} size={"30"} />
|
||||
</ActionIcon>
|
||||
<ActionIcon variant='transparent'>
|
||||
<IconBrandWhatsapp color={"gray"} size={"30"} />
|
||||
</ActionIcon>
|
||||
</Flex>
|
||||
</Box>
|
||||
</Flex>
|
||||
<Divider pb={50} />
|
||||
</Box>
|
||||
</Container>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
@@ -0,0 +1,92 @@
|
||||
import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
|
||||
import colors from '@/con/colors';
|
||||
import { Stack, Container, Text, Image, ActionIcon, Box, Divider, Flex } from '@mantine/core';
|
||||
import { IconBrandFacebook, IconBrandInstagram, IconBrandTwitter, IconBrandWhatsapp } from '@tabler/icons-react';
|
||||
import React from 'react';
|
||||
|
||||
function Page() {
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={42}>
|
||||
<Container w={{ base: "100%", md: "50%" }}>
|
||||
<BackButton />
|
||||
<Stack align="center" gap={0}>
|
||||
<Text fz={"3.4rem"} fw={"bold"}>
|
||||
Juara Favorit
|
||||
</Text>
|
||||
<Text
|
||||
ta={"center"}
|
||||
fw={"bold"}
|
||||
>
|
||||
Lomba Video Pendek Potensi dan Peluang Investasi di Desa Kabupaten Badung 2024
|
||||
</Text>
|
||||
<Image py={20} src={"/api/img/penghargaan-1.png"} alt='' />
|
||||
<Text
|
||||
py={20}
|
||||
ta={"justify"}
|
||||
fw={"bold"}
|
||||
>
|
||||
Desa Dramasaba Raih Juara Favorit dalam Lomba Video Pendek Potensi dan Peluang Investasi di Desa Kabupaten Badung 2024
|
||||
</Text>
|
||||
<Text
|
||||
ta={"justify"}
|
||||
>
|
||||
Desa Dramasaba kembali menunjukkan eksistensinya dalam memajukan potensi desa dengan meraih Juara 2 dalam ajang Lomba Video Pendek Potensi dan Peluang Investasi di Desa Kabupaten Badung 2024. Prestasi ini menjadi bukti nyata bahwa Desa Dramasaba memiliki daya tarik serta peluang investasi yang menjanjikan bagi para investor maupun masyarakat yang ingin berkontribusi dalam pengembangan desa.
|
||||
</Text>
|
||||
<Text
|
||||
py={5}
|
||||
ta={"justify"}
|
||||
>
|
||||
Dalam video pendek yang diikutsertakan dalam lomba ini, Desa Dramasaba menampilkan berbagai potensi unggulan yang dimiliki, mulai dari sektor pertanian, pariwisata berbasis budaya, hingga ekonomi kreatif yang sedang berkembang pesat. Dengan pengemasan yang menarik dan penyampaian informasi yang jelas, video tersebut berhasil memikat perhatian dewan juri serta menjadi inspirasi bagi desa-desa lain dalam mengembangkan potensi wilayahnya masing-masing.
|
||||
</Text>
|
||||
<Text
|
||||
ta={"justify"}
|
||||
>
|
||||
Keberhasilan ini tidak lepas dari kerja keras seluruh tim kreatif, pemerintah desa, serta masyarakat yang turut berpartisipasi dalam produksi video. Kepala Desa Dramasaba, [Nama Kepala Desa], mengungkapkan rasa syukur dan bangganya atas pencapaian ini. Menurutnya, kemenangan ini bukan sekadar penghargaan, tetapi juga menjadi motivasi untuk terus mengembangkan desa agar semakin dikenal luas dan menarik lebih banyak peluang investasi.
|
||||
</Text>
|
||||
<Text
|
||||
py={5}
|
||||
ta={"justify"}
|
||||
>
|
||||
Lomba Video Pendek Potensi dan Peluang Investasi di Desa Kabupaten Badung 2024 merupakan ajang yang diadakan oleh pemerintah daerah dengan tujuan untuk mendorong desa-desa dalam mengenalkan dan mempromosikan potensi investasi mereka. Dengan mengikuti lomba ini, Desa Dramasaba tidak hanya memperoleh apresiasi, tetapi juga membuka peluang lebih besar untuk berkolaborasi dengan investor maupun pihak lain yang tertarik dalam pengembangan desa.
|
||||
</Text>
|
||||
<Text
|
||||
ta={"justify"}
|
||||
>
|
||||
Ke depan, Desa Dramasaba berkomitmen untuk terus meningkatkan daya saingnya, baik dalam sektor ekonomi, budaya, maupun infrastruktur, sehingga mampu memberikan manfaat yang lebih besar bagi masyarakat serta menarik perhatian lebih banyak pihak untuk berinvestasi dan berkontribusi dalam pembangunan desa.
|
||||
</Text>
|
||||
<Text
|
||||
py={5}
|
||||
ta={"justify"}
|
||||
>
|
||||
Dengan prestasi ini, diharapkan Desa Dramasaba dapat menjadi contoh bagi desa-desa lain dalam memanfaatkan media digital sebagai sarana promosi dan pengembangan potensi lokal.
|
||||
</Text>
|
||||
</Stack>
|
||||
<Box py={20}>
|
||||
<Divider />
|
||||
<Flex justify={"space-between"} py={20}>
|
||||
<Text fz={"sm"}>25 May 2021 . Darmasaba</Text>
|
||||
<Box>
|
||||
<Flex gap={"lg"}>
|
||||
<ActionIcon variant='transparent'>
|
||||
<IconBrandFacebook color={"gray"} size={"30"} />
|
||||
</ActionIcon>
|
||||
<ActionIcon variant='transparent'>
|
||||
<IconBrandInstagram color={"gray"} size={"30"} />
|
||||
</ActionIcon>
|
||||
<ActionIcon variant='transparent'>
|
||||
<IconBrandTwitter color={"gray"} size={"30"} />
|
||||
</ActionIcon>
|
||||
<ActionIcon variant='transparent'>
|
||||
<IconBrandWhatsapp color={"gray"} size={"30"} />
|
||||
</ActionIcon>
|
||||
</Flex>
|
||||
</Box>
|
||||
</Flex>
|
||||
<Divider pb={50} />
|
||||
</Box>
|
||||
</Container>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
@@ -1,5 +1,137 @@
|
||||
'use client';
|
||||
import colors from "@/con/colors";
|
||||
import { Carousel, CarouselSlide } from "@mantine/carousel";
|
||||
import { Box, Button, Container, Group, Paper, Stack, Text, useMantineTheme } from "@mantine/core";
|
||||
import { useMediaQuery } from "@mantine/hooks";
|
||||
import Autoplay from "embla-carousel-autoplay";
|
||||
import Link from "next/link";
|
||||
import { useRef } from "react";
|
||||
import BackButton from "../../(pages)/desa/layanan/_com/BackButto";
|
||||
|
||||
|
||||
const data = [
|
||||
{
|
||||
id: 1,
|
||||
images: "/api/img/penghargaan-2.png",
|
||||
juara: "Juara 2",
|
||||
deskripsi: "Lomba Video Pendek Potensi dan Peluang Investasi di Desa Kabupaten Badung 2024",
|
||||
link: "/darmasaba/penghargaan/detail/lomba1"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
images: "/api/img/penghargaan-3.png",
|
||||
juara: "Juara 2",
|
||||
deskripsi: "Duta Invenstasi Kabupaten Badung 2024",
|
||||
link: "/darmasaba/penghargaan/detail/lomba2"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
images: "/api/img/penghargaan-1.png",
|
||||
juara: "Juara Favorit",
|
||||
deskripsi: "Lomba Video Pendek Potensi dan Peluang Investasi di Desa Kabupaten Badung 2024",
|
||||
link: "/darmasaba/penghargaan/detail/lomba3"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
images: "/api/img/penghargaan-2.png",
|
||||
juara: "Juara 2",
|
||||
deskripsi: "Lomba Video Pendek Potensi dan Peluang Investasi di Desa Kabupaten Badung 2024",
|
||||
link: "/darmasaba/penghargaan/detail/lomba1"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
images: "/api/img/penghargaan-3.png",
|
||||
juara: "Juara 2",
|
||||
deskripsi: "Duta Invenstasi Kabupaten Badung 2024",
|
||||
link: "/darmasaba/penghargaan/detail/lomba2"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
images: "/api/img/penghargaan-1.png",
|
||||
juara: "Juara Favorit",
|
||||
deskripsi: "Lomba Video Pendek Potensi dan Peluang Investasi di Desa Kabupaten Badung 2024",
|
||||
link: "/darmasaba/penghargaan/detail/lomba3"
|
||||
}
|
||||
]
|
||||
export default function Page() {
|
||||
return <div>
|
||||
penghargaan
|
||||
</div>
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={42}>
|
||||
<Container w={{ base: "100%", md: "50%" }}>
|
||||
<BackButton/>
|
||||
<Stack align="center" gap={0}>
|
||||
<Text fz={"3.4rem"} fw={"bold"}>
|
||||
Penghargaan
|
||||
</Text>
|
||||
<Text
|
||||
py={10}
|
||||
ta={"justify"}
|
||||
>
|
||||
Desa Darmasaba telah berhasil meraih berbagai penghargaan bergengsi yang membuktikan dedikasi dan kerja keras seluruh elemen masyarakat dalam membangun desa yang maju dan berkelanjutan. Berikut ini adalah macam-macam penghargaan yang telah diraih oleh Desa Darmasaba:
|
||||
</Text>
|
||||
<Slider />
|
||||
</Stack>
|
||||
</Container>
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
function Slider() {
|
||||
const height = 720;
|
||||
const width = 1200;
|
||||
const theme = useMantineTheme();
|
||||
const mobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
|
||||
const autoplay = useRef(Autoplay({ delay: 2000 }));
|
||||
|
||||
const slides = data.map((item) => (
|
||||
|
||||
<CarouselSlide key={item.id}>
|
||||
<Paper h={"100%"} pos={"relative"} style={{
|
||||
backgroundImage: `url(${item.images}) `,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
backgroundRepeat: "no-repeat",
|
||||
}}>
|
||||
<Box
|
||||
style={{
|
||||
borderRadius: 16,
|
||||
zIndex: 0,
|
||||
}}
|
||||
pos={"absolute"}
|
||||
w={"100%"}
|
||||
h={"100%"}
|
||||
bg={colors.trans.dark[2]}
|
||||
/>
|
||||
<Stack justify="space-between" h={"100%"} gap={0} p={"lg"} pos={"relative"} >
|
||||
<Box p={"lg"}>
|
||||
<Text fz={"2.3rem"} fw={"bold"} ta={"center"} c={"white"}>{item.juara}</Text>
|
||||
<Text fz={"1.5rem"} ta={"center"} c={"white"}>{item.deskripsi}</Text>
|
||||
</Box>
|
||||
<Group justify="center">
|
||||
<Button component={Link} href={item.link} px={46} radius={"100"} size="md" bg={colors["blue-button"]}>
|
||||
Detail
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</CarouselSlide>
|
||||
|
||||
));
|
||||
|
||||
return (
|
||||
<Carousel
|
||||
c={"white"}
|
||||
py={50}
|
||||
plugins={[autoplay.current]}
|
||||
onMouseEnter={autoplay.current.stop}
|
||||
onMouseLeave={autoplay.current.reset}
|
||||
w={width}
|
||||
height={height}
|
||||
slideSize={{ base: "100%", sm: "50%", md: "33.333333%" }}
|
||||
slideGap={{ base: "xl", sm: "md" }}
|
||||
loop
|
||||
align="start"
|
||||
slidesToScroll={mobile ? 1 : 2}
|
||||
>
|
||||
{slides}
|
||||
</Carousel>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user