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

UI Menu Pendidikan

Browse Source
This commit is contained in:
nico
2025-04-10 15:31:59 +08:00
parent 4824e4e848
commit 4bd9ef6acf
19 changed files with 1699 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/app/darmasaba/(pages)/inovasi/ajukan-ide-inovatif/page.tsx Normal file
View File

@@ -0,0 +1,56 @@
import colors from '@/con/colors';
import { Stack, Box, Text, SimpleGrid, Paper, List, ListItem, Flex, ActionIcon } from '@mantine/core';
import React from 'react';
import BackButton from '../../desa/layanan/_com/BackButto';
import { IconArrowRight, IconBulbFilled } 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>
<Box px={{ base: 'md', md: 100 }} >
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
Ajukan Ide Inovatif
</Text>
<Text ta={'center'} fz={'h4'}>Desa Darmasaba percaya bahwa setiap warga memiliki potensi luar biasa untuk menciptakan perubahan positif. Platform &quot;Ajukan Ide Inovatif&quot; hadir sebagai ruang inklusif bagi seluruh masyarakat untuk mengembangkan dan mengusulkan gagasan transformatif.</Text>
</Box>
<Box px={{ base: "md", md: 100 }}>
<Stack gap={'lg'} p={'lg'}>
<SimpleGrid
cols={{
base: 1,
md: 2,
}}
>
<Paper p={'xl'} >
<Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>Tujuan Ide Inovatif Ini</Text>
<List>
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Mendorong partisipasi aktif masyarakat</ListItem>
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Memfasilitasi inovasi berbasis lokal</ListItem>
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Memecahkan tantangan komunal</ListItem>
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Mengembangkan potensi kreativitas warga</ListItem>
</List>
</Paper>
<Paper p={'xl'} >
<Flex align={'center'} justify={'space-between'}>
<Box>
<Text fz={'h4'} fw={'bold'} c={colors['blue-button']}>Apabila Anda Ingin Mengajukan Ide Inovatif Bisa Klik Pada Gambar Di Samping</Text>
<IconArrowRight size={30} color={colors['blue-button']} />
</Box>
<Box px={{ base: 5, md: 10 }} py={5}>
<ActionIcon variant="transparent" size={150}>
<IconBulbFilled size={150} color={colors['blue-button']} />
</ActionIcon>
</Box>
</Flex>
</Paper>
</SimpleGrid>
</Stack>
</Box>
</Stack>
);
}
export default Page;

139
src/app/darmasaba/(pages)/inovasi/info-teknologi-tepat-guna/page.tsx Normal file
View File

@@ -0,0 +1,139 @@
import colors from '@/con/colors';
import { Stack, Box, Text, List, ListItem, Paper, SimpleGrid, Image } from '@mantine/core';
import React from 'react';
import BackButton from '../../desa/layanan/_com/BackButto';
const data = [
{
id: 1,
image: '/api/img/pertanian-cerdas.png',
judul: 'Pertanian Cerdas',
subjudul1: 'Sistem Irigasi Hemat Air',
subjudul2: 'Pengolahan Limbah Pertanian',
deskripsi1: <List>
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Penggunaan sensor kelembaban tanah</ListItem>
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Kontrol penyiraman otomatis </ListItem>
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pengurangan konsumsi air hingga 40%</ListItem>
</List>,
deskripsi2: <List>
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Mesin pencacah jerami otomatis</ListItem>
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Konversi limbah menjadi pupuk organik</ListItem>
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Mengurangi pembakaran sampah pertanian</ListItem>
</List>,
},
{
id: 2,
image: '/api/img/energi-terbarukan.png',
judul: 'Energi Terbarukan',
subjudul1: 'Pembangkit Listrik Mikrohidro',
subjudul2: 'Solar Home System',
deskripsi1: <List>
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Memanfaatkan aliran sungai sekitar</ListItem>
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Kapasitas 10-50 kW</ListItem>
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Elektrifikasi mandiri desa</ListItem>
</List>,
deskripsi2: <List>
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Panel surya untuk rumah tangga </ListItem>
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Akses listrik 24 jam</ListItem>
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Hemat biaya energi</ListItem>
</List>,
},
{
id: 3,
image: '/api/img/pengolahan-pangan.png',
judul: 'Pengolahan Pangan',
subjudul1: 'Mesin Pengering Hasil Pertanian',
subjudul2: 'Alat Pengolah Hasil Pertanian',
deskripsi1: <List>
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Teknologi pengering tenaga surya</ListItem>
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Menjaga kualitas hasil panen</ListItem>
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Mencegah kerusakan pasca panen</ListItem>
</List>,
deskripsi2: <List>
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Mesin pengupas dan pengemas produk</ListItem>
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Meningkatkan nilai jual komoditas</ListItem>
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Standarisasi kualitas produk</ListItem>
</List>,
},
{
id: 4,
image: '/api/img/pengelolaan-sampah.png',
judul: 'Pengelolaan Sampah',
subjudul1: 'Sistem Pengolahan Sampah Terpadu',
subjudul2: 'Komposter Komunal',
deskripsi1: <List>
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pemilahan otomatis</ListItem>
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Daur ulang sampah organik dan anorganik</ListItem>
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pembangkit listrik dari sampah</ListItem>
</List>,
deskripsi2: <List>
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Teknologi pengomposan cepat</ListItem>
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Menghasilkan pupuk organik</ListItem>
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Mengurangi sampah ke TPA</ListItem>
</List>,
},
{
id: 5,
image: '/api/img/kesehatan-daring.png',
judul: 'Kesehatan Masyarakat',
subjudul1: 'Alat Deteksi Dini Penyakit',
subjudul2: 'Air Bersih Mandiri',
deskripsi1: <List>
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Skrining kesehatan portable </ListItem>
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pemeriksaan tekanan darah dan gula </ListItem>
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Konsultasi medis jarak jauh</ListItem>
</List>,
deskripsi2: <List>
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Sistem filter air canggih </ListItem>
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Menghilangkan kontaminan </ListItem>
<ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Jaminan kualitas air minum
</ListItem>
</List>,
},
]
function Page() {
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Box px={{ base: 'md', md: 100 }}>
<BackButton />
</Box>
<Box px={{ base: 'md', md: 100 }} >
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
Info Teknologi Tepat Guna
</Text>
<Text ta={'center'} fz={'h4'}>Desa Darmasaba berkomitmen mengembangkan teknologi tepat guna yang sesuai dengan kebutuhan masyarakat, mendukung pembangunan berkelanjutan, dan meningkatkan kualitas hidup warga.</Text>
</Box>
<Box px={{ base: "md", md: 100 }}>
<Stack gap={'lg'} p={'lg'}>
<SimpleGrid
pb={10}
cols={{
base: 1,
md: 3
}}
>
{data.map((v, k) => {
return (
<Paper p={'xl'} key={k}>
<Image src={v.image} pb={10} radius={10} alt='' />
<Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.judul}</Text>
<Box pr={'lg'} pb={10}>
<Text fz={'h4'} fw={'bold'} >{v.subjudul1}</Text>
{v.deskripsi1}
</Box>
<Box pr={'lg'}>
<Text fz={'h4'} fw={'bold'} >{v.subjudul2}</Text>
{v.deskripsi2}
</Box>
</Paper>
)
})}
</SimpleGrid>
</Stack>
</Box>
</Stack>
);
}
export default Page;

83
src/app/darmasaba/(pages)/inovasi/kolaborasi-inovasi/page.tsx Normal file
View File

@@ -0,0 +1,83 @@
import colors from '@/con/colors';
import { Stack, Box, Text, Paper, Flex, Group, SimpleGrid, Button, Image, Center } from '@mantine/core';
import React from 'react';
import BackButton from '../../desa/layanan/_com/BackButto';
import { IconChevronDown } from '@tabler/icons-react';
const data = [
{
id: 1,
bulan: 'JANUARI 2025',
judul: 'Darmasaba Smart Waste',
deskripsi: 'Sistem manajemen sampah terpadu yang memudahkan warga untuk memilah dan mendaur ulang sampah.',
kolaborator: 'Kolaborator: DLH Kabupaten Badung, Komunitas Peduli Lingkungan, TPS3R Pudak Mesari'
},
{
id: 2,
bulan: 'FEBRUARI 2025',
judul: 'Darmasaba Digital Market',
deskripsi: 'Platform e-commerce untuk produk UMKM desa yang menghubungkan produsen lokal dengan pasar global.',
kolaborator: 'Kolaborator: Kementerian Desa PDTT, UMKM Darmasaba'
}
]
function Page() {
return (
<>
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Box px={{ base: 'md', md: 100 }}>
<BackButton />
</Box>
<Box px={{ base: 'md', md: 100 }} >
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
Kolaborasi Inovasi
</Text>
</Box>
<Box px={{ base: "md", md: 100 }}>
<Stack gap={'lg'} justify='center'>
<Group justify='flex-end'>
<Paper bg={colors['blue-button']} p={5} w={{ base: 150, md: 300 }}>
<Flex px={20} align={'center'} justify={'space-between'}>
<Text fz={'h4'} fw={'bold'} c={colors['white-1']}>Tahun</Text>
<IconChevronDown size={20} color={colors['white-1']} />
</Flex>
</Paper>
</Group>
<SimpleGrid cols={{ base: 1, md: 2 }} spacing={'lg'}>
{data.map((v, k) => {
return (
<Paper p={'xl'} key={k}>
<Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.judul}</Text>
<Box pr={'lg'} pb={20}>
{v.deskripsi}
</Box>
<Box pr={'lg'}>
{v.kolaborator}
</Box>
</Paper>
);
})}
</SimpleGrid>
<Group py={40} justify='center'>
<Button px={80} rightSection={<IconChevronDown />} radius={6} bg={colors["blue-button"]} c={colors["white-1"]}>Lihat Laporan Lainnya</Button>
</Group>
</Stack>
</Box>
</Stack>
<Box py={40} px={{ base: "md", md: 100 }} bg={colors['white-trans-1']}>
<Stack gap={'lg'} justify='center'>
<Box px={{ base: 'md', md: 100 }} >
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
Mitra Kolaborasi
</Text>
<Text ta={'center'} fz={'h4'}>Kami berkolaborasi dengan berbagai mitra dari berbagai sektor untuk mewujudkan visi Smart Village Darmasaba.</Text>
</Box>
<Center>
<Image src={'/api/img/logoukm-kolaborasiinvoasi.png'} alt='' w={{base: 500, md: 650}}/>
</Center>
</Stack>
</Box>
</>
);
}
export default Page;

88
src/app/darmasaba/(pages)/lingkungan/data-lingkungan-desa/page.tsx Normal file
View File

@@ -0,0 +1,88 @@
import colors from '@/con/colors';
import { Box, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
import { IconChristmasTree, IconDroplet, IconHome, IconLeaf, IconTrash } from '@tabler/icons-react';
import BackButton from '../../desa/layanan/_com/BackButto';
const data = [
{
id: 1,
icon: <IconLeaf size={100} color={colors['blue-button']} />,
title: 'Luas Lahan Hijau',
jumlah: '± 25 hektar',
deskripsi: 'tersebar di area persawahan, kebun, dan taman desa.'
},
{
id: 2,
icon: <IconHome size={100} color={colors['blue-button']} />,
title: 'Jumlah Rumah Tangga',
jumlah: '± 1.500 rumah tangga',
deskripsi: 'yang mayoritas sudah memiliki fasilitas pengelolaan sampah mandiri.'
},
{
id: 3,
icon: <IconDroplet size={100} color={colors['blue-button']} />,
title: 'Jumlah Sungai dan Saluran Air',
jumlah: '± 3 Sungai Besar',
deskripsi: 'dan beberapa saluran irigasi tradisional (subak) yang masih aktif digunakan.'
},
{
id: 4,
icon: <IconChristmasTree size={100} color={colors['blue-button']} />,
title: 'Program Penghijauan',
jumlah: '± 1000 Pohon',
deskripsi: 'Dilaksanakan secara berkala melalui kegiatan menanam pohon di area umum dan perbukitan.'
},
{
id: 5,
icon: <IconTrash size={100} color={colors['blue-button']} />,
title: 'Pengelolaan Sampah',
jumlah: '± 5 Bank Sampah',
deskripsi: 'Didukung oleh Bank Sampah dan sistem pemilahan sampah rumah tangga.'
},
]
function Page() {
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Box px={{ base: 'md', md: 100 }}>
<BackButton />
</Box>
<Box px={{ base: 'md', md: 100 }} >
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
Data Lingkungan Desa
</Text>
<Text px={20} ta={'center'} fz={'h4'}>Desa Darmasaba memiliki lingkungan yang terus dijaga dan dikembangkan demi kesejahteraan warganya. Upaya pelestarian lingkungan difokuskan pada penghijauan, pengelolaan sampah, serta perlindungan kawasan hijau.</Text>
</Box>
<Box px={{ base: 'md', md: 100 }} >
<SimpleGrid
cols={{
base: 1,
md: 2,
}}>
{data.map((v, k) => {
return (
<Box key={k}>
<Paper p={20} bg={colors['white-trans-1']}>
<Text fw={'bold'} c={colors['blue-button']} fz={{ base: "lg", md: "xl" }} >
{v.title}
</Text>
<Box>
{v.icon}
<Text c={colors['blue-button']} fz={'h4'} fw={'bold'}>
{v.jumlah}
</Text>
</Box>
<Text fz={{ base: "lg", md: "xl" }} >
{v.deskripsi}
</Text>
</Paper>
</Box>
)
})}
</SimpleGrid>
</Box>
</Stack>
);
}
export default Page;

103
src/app/darmasaba/(pages)/lingkungan/edukasi-lingkungan/page.tsx Normal file
View File

@@ -0,0 +1,103 @@
import colors from '@/con/colors';
import { Box, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
import BackButton from '../../desa/layanan/_com/BackButto';
const data = [
{
id: 1,
title: 'Tujuan Edukasi Lingkungan',
listDeskripsi: <List fz={'h4'} pr={20} ta={'justify'}>
<ListItem>
Meningkatkan kesadaran masyarakat tentang pentingnya lingkungan bersih dan sehat
</ListItem>
<ListItem>
Mendorong partisipasi warga dalam kegiatan pengelolaan sampah, penghijauan, dan konservasi
</ListItem>
<ListItem>
Mengurangi dampak negatif terhadap lingkungan dari kegiatan manusia
</ListItem>
<ListItem>
Membentuk generasi muda yang peduli terhadap isu-isu lingkungan
</ListItem>
</List>
},
{
id: 2,
title: 'Materi Edukasi yang Diberikan',
listDeskripsi: <List fz={'h4'} pr={20} ta={'justify'}>
<ListItem>
Pengelolaan Sampah (Pilah sampah organik dan anorganik)
</ListItem>
<ListItem>
Pencegahan pencemaran lingkungan (air, udara, dan tanah)
</ListItem>
<ListItem>
Pemanfaatan lahan hijau dan penghijauan desa
</ListItem>
<ListItem>
Daur ulang dan kreatifitas dari sampah
</ListItem>
<ListItem>
Bahaya pembakaran sampah sembarangan
</ListItem>
</List>
},
{
id: 3,
title: 'Contoh Kegiatan di Desa Darmasaba',
listDeskripsi: <List fz={'h4'} pr={20} ta={'justify'}>
<ListItem>
Pelatihan membuat kompos dari sampah rumah tangga
</ListItem>
<ListItem>
Gerakan &quot;Jumat Bersih&quot; rutin
</ListItem>
<ListItem>
Workshop membuat ecobrick
</ListItem>
<ListItem>
Lomba kebersihan antar banjar
</ListItem>
<ListItem>
Sosialisasi lingkungan di sekolah dan posyandu
</ListItem>
</List>
},
]
function Page() {
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Box px={{ base: 'md', md: 100 }}>
<BackButton />
</Box>
<Box px={{ base: 'md', md: 100 }} pb={20}>
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
Edukasi Lingkungan
</Text>
<Text px={20} ta={'center'} fz={'h4'}>
Edukasi Lingkungan adalah bagian penting dalam membentuk perilaku masyarakat yang peduli dan bertanggung jawab terhadap kelestarian alam. Melalui program ini, masyarakat diajak untuk memahami pentingnya menjaga lingkungan demi kesehatan, kenyamanan, dan keberlanjutan hidup bersama.
</Text>
</Box>
<Box px={{ base: 'md', md: 100 }} >
<SimpleGrid
cols={{
base: 1,
md: 3,
}}>
{data.map((v, k) => {
return (
<Box key={k}>
<Paper h={{base: 0, md: 350}} p={20} bg={colors['white-trans-1']}>
<Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.title}</Text>
{v.listDeskripsi}
</Paper>
</Box>
)
})}
</SimpleGrid>
</Box>
</Stack>
);
}
export default Page;

89
src/app/darmasaba/(pages)/lingkungan/gotong-royong/page.tsx Normal file
View File

@@ -0,0 +1,89 @@
import colors from '@/con/colors';
import { Stack, Box, Container, Grid, GridCol, Group, Paper, TextInput, Text, Image, Flex, Button } from '@mantine/core';
import { IconCalendar, IconMapPin, IconSearch, IconUsersGroup } from '@tabler/icons-react';
import React from 'react';
import BackButton from '../../desa/layanan/_com/BackButto';
import Link from 'next/link';
function Page() {
return (
<Stack pos="relative" bg={colors.Bg} py="xl" gap="md">
{/* Header */}
<Box px={{ base: "md", md: 100 }}>
<BackButton />
</Box>
<Container size="lg" px="md">
<Stack align="center" gap={0} mb="xl">
<Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
Program Gotong Royong
</Text>
<Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
Desa Darmasaba
</Text>
</Stack>
</Container>
{/* Tabs Menu */}
<Box px={{ base: "md", md: "xl" }} py="md" bg={colors['BG-trans']} mb="md">
<Grid align="center" justify="space-between" mb={20}>
<GridCol span={{ base: 12, md: 8 }}>
<Group gap="md" wrap="wrap">
<Paper bg={colors['blue-button']} radius="xl" py={5} px={20}>
<Text c={colors['white-1']} size="sm">
Semua
</Text>
</Paper>
{['Kebersihan', 'Infrastruktur', 'Sosial', 'Lingkungan'].map((kategori) => (
<Paper key={kategori} bg={colors['blue-button-trans']} radius="xl" py={5} px={20}>
<Text size="sm">
{kategori}
</Text>
</Paper>
))}
</Group>
</GridCol>
<GridCol span={{ base: 12, md: 4 }}>
<TextInput
radius="lg"
placeholder="Cari Program Gotong Royong"
leftSection={<IconSearch size={18} />}
w="100%"
/>
</GridCol>
</Grid>
<Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
<Stack gap={'xs'}>
<Image radius={20} src={'/api/img/gotong-royong.png'} w={'100%'} alt='' />
<Text fw={"bold"} fz={{ base: "h2", md: "h1" }}>Membangun Fasilitas Desa</Text>
<Group>
<Paper py={5} px={20} bg={colors['blue-button-trans']} radius={20}>
<Text c={colors['white-1']}>Sosial</Text>
</Paper>
</Group>
<Text fz={{ base: "h4", md: "h3" }}>
Program Pembangunan Fasilitas Desa Maju, Masyarakat Sejahtera.
</Text>
<Flex gap={5} align={'center'}>
<IconCalendar color={colors['blue-button-trans']} size={45} />
<Text fz={{ base: "h4", md: "h3" }}>1 April 2025</Text>
</Flex>
<Flex gap={5} align={'center'}>
<IconMapPin color={colors['blue-button-trans']} size={45} />
<Text fz={{ base: "h4", md: "h3" }}>Banjar Desa Darmasaba</Text>
</Flex>
<Flex gap={5} align={'center'}>
<IconUsersGroup color={colors['blue-button-trans']} size={45} />
<Text fz={{ base: "h4", md: "h3" }}>30 Partisipan</Text>
</Flex>
<Text fw={'bold'} fz={'md'}>Deskripsi : Program pembangunan Pura sebagai pusat spiritual dan budaya desa, melibatkan gotong royong masyarakat dalam pembangunan struktur utama serta ornamen tradisional.</Text>
<Group py={20} justify='center'>
<Button component={Link} href={'https://www.whatsapp.com/?lang=id'} bg={colors['blue-button']} >Daftar Sebagai Relawan</Button>
</Group>
</Stack>
</Paper>
</Box>
</Stack>
);
}
export default Page;

97
src/app/darmasaba/(pages)/lingkungan/konservasi-adat-bali/page.tsx Normal file
View File

@@ -0,0 +1,97 @@
import colors from '@/con/colors';
import { Box, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
import BackButton from '../../desa/layanan/_com/BackButto';
const data = [
{
id: 1,
title: 'Filosofi Tri Hita Karana',
listDeskripsi: <List fz={'h4'} pr={20} ta={'justify'}>
<ListItem>
Parahyangan: Hubungan manusia dengan Tuhan
</ListItem>
<ListItem>
Pawongan: Hubungan antar manusia
</ListItem>
<ListItem>
Palemahan: Hubungan manusia dengan alam
</ListItem>
</List>
},
{
id: 2,
title: 'Bentuk Konservasi Berdasarkan Adat',
listDeskripsi: <List fz={'h4'} pr={20} ta={'justify'}>
<ListItem>
Pelestarian Hutan Adat seperti Alas Pala Sangeh atau Wana Kerthi
</ListItem>
<ListItem>
Subak: Sistem pengelolaan irigasi tradisional yang menjunjung kebersamaan dan keberlanjutan
</ListItem>
<ListItem>
Hari Raya Tumpek Uduh: Perayaan khusus untuk menghormati pohon dan tumbuhan
</ListItem>
<ListItem>
Perarem dan Awig-Awig: Aturan adat desa yang mengatur larangan menebang pohon sembarangan, membuang limbah ke sungai, dll.
</ListItem>
<ListItem>
Ritual penyucian alam seperti Melasti, Piodalan Segara, dan lainnya
</ListItem>
</List>
},
{
id: 3,
title: 'Nilai Konservasi Adat',
listDeskripsi: <List fz={'h4'} pr={20} ta={'justify'}>
<ListItem>
Menjaga keseimbangan ekosistem
</ListItem>
<ListItem>
Melestarikan spiritualitas lokal dan kesucian alam
</ListItem>
<ListItem>
Menumbuhkan kesadaran kolektif untuk hidup selaras dengan lingkungan
</ListItem>
<ListItem>
Menjaga keberlangsungan sumber daya alam untuk generasi mendatang
</ListItem>
</List>
},
]
function Page() {
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Box px={{ base: 'md', md: 100 }}>
<BackButton />
</Box>
<Box px={{ base: 'md', md: 100 }} pb={20}>
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
Konservasi Adat Bali
</Text>
<Text px={20} ta={'center'} fz={'h4'}>
Konservasi Adat Bali adalah upaya pelestarian lingkungan yang berpijak pada kearifan lokal masyarakat Bali, di mana alam dan budaya dianggap sebagai satu kesatuan yang harus dijaga secara harmonis.
</Text>
</Box>
<Box px={{ base: 'md', md: 100 }} >
<SimpleGrid
cols={{
base: 1,
md: 3,
}}>
{data.map((v, k) => {
return (
<Box key={k}>
<Paper h={{ base: 0, md: 450 }} p={20} bg={colors['white-trans-1']}>
<Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.title}</Text>
{v.listDeskripsi}
</Paper>
</Box>
)
})}
</SimpleGrid>
</Box>
</Stack>
);
}
export default Page;

172
src/app/darmasaba/(pages)/lingkungan/pengelolaan-sampah-bank-sampah/page.tsx Normal file
View File

@@ -0,0 +1,172 @@
import colors from '@/con/colors';
import { Box, Flex, Paper, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import { IconClipboardTextFilled, IconMapPin, IconRecycle, IconScale, IconSearch, IconTrashFilled, IconTruckFilled } from '@tabler/icons-react';
import BackButton from '../../desa/layanan/_com/BackButto';
const data = [
{
id: 1,
icon: <IconRecycle size={50} color={colors['blue-button']} />,
deskripsi: '1. Pilah sampah sesuai jenisnya'
},
{
id: 2,
icon: <IconTruckFilled size={50} color={colors["blue-button"]} />,
deskripsi: '2. Bawa sampah ke Bank Sampah'
},
{
id: 3,
icon: <IconScale size={50} color={colors["blue-button"]} />,
deskripsi: '3. Timbang sampah di Bank Sampah'
},
{
id: 4,
icon: <IconClipboardTextFilled size={50} color={colors["blue-button"]} />,
deskripsi: '4. Catat hasil timbangan di buku tabungan'
},
{
id: 5,
icon: <IconTrashFilled size={50} color={colors["blue-button"]} />,
deskripsi: '5. Sampah didaur ulang oleh petugas Bank Sampah'
},
]
const bankSampah = [
{
id: 1,
icon: <IconMapPin size={50} color={colors['blue-button']} />,
deskripsi: 'Bank Sampah Sarana Gathi',
alamat: 'Jl. Ahmad Yani Utara No.453, Peguyangan, Kec. Denpasar Utara, Kota Denpasar, Bali 80115'
},
{
id: 2,
icon: <IconMapPin size={50} color={colors['blue-button']} />,
deskripsi: 'Bank Sampah BALI WASTU LESTARI',
alamat: 'Jl. Ahmad Yani Utara Gg. Garuda No.1, Peguyangan, Kec. Denpasar Utara, Kota Denpasar, Bali 80115'
},
{
id: 3,
icon: <IconMapPin size={50} color={colors['blue-button']} />,
deskripsi: 'Bank Sampah Jempiring Sari',
alamat: 'Jl. Gn. Lebah I No.9, Tegal Harum, Kec. Denpasar Bar., Kota Denpasar, Bali 80119'
},
{
id: 4,
icon: <IconMapPin size={50} color={colors['blue-button']} />,
deskripsi: 'Bank Sampah Sarana Gathi',
alamat: 'Jl. Ahmad Yani Utara No.453, Peguyangan, Kec. Denpasar Utara, Kota Denpasar, Bali 80115'
},
]
function Page() {
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Box px={{ base: 'md', md: 100 }}>
<BackButton />
</Box>
<Box px={{ base: 'md', md: 100 }} >
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
Pengelolaan Sampah (Bank Sampah)
</Text>
<Text px={20} ta={'center'} fz={'h4'}>Bank Sampah di Desa Darmasaba berfungsi sebagai tempat pengelolaan sampah yang bertujuan untuk mengurangi limbah dan memberikan manfaat ekonomi bagi masyarakat.</Text>
</Box>
<Box px={{ base: 'md', md: 100 }} pb={60}>
<Text fw={'bold'} py={10} px={28} fz={{ base: "lg", md: "xl" }} ta={"justify"}>
Mekanisme Bank Sampah di Desa Darmasaba:
</Text>
<SimpleGrid
cols={{
base: 1,
md: 1,
}}
>
{data.map((v, k) => {
return (
<Box key={k} px={28}>
<Paper p={20} bg={colors['white-trans-1']}>
<Flex gap={20} align={'center'}>
<Box>
{v.icon}
</Box>
<Text fw={'bold'} fz={{ base: "lg", md: "xl" }} c={'black'}>{v.deskripsi}</Text>
</Flex>
</Paper>
</Box>
)
})}
</SimpleGrid>
</Box>
<Box px={{ base: 'md', md: 100 }} >
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
Keterangan Bank Sampah Terdekat
</Text>
<TextInput
mb={20}
radius={'xl'}
px={{ base: 70, md: 150 }}
leftSection={<IconSearch size={20} />}
placeholder='Cari Bank Sampah Terdekat'
/>
<SimpleGrid
cols={{
base: 1,
md: 2,
}}>
<Box>
<SimpleGrid
cols={{
base: 1,
md: 1,
}}
>
{bankSampah.map((v, k) => {
return (
<Box key={k} px={20}>
<Paper p={20} bg={colors['white-trans-1']} radius={'lg'}>
<Flex gap={20} align={'center'}>
<Box>
{v.icon}
</Box>
<Box>
<Text fw={'bold'} fz={{ base: "lg", md: "xl" }} c={'black'}>
{v.deskripsi}
</Text>
<Text fz={{ base: "md", md: "lg" }} c={'black'}>
{v.alamat}
</Text>
</Box>
</Flex>
</Paper>
</Box>
)
})}
</SimpleGrid>
</Box>
<Box style={{
position: 'relative',
width: '100%',
paddingBottom: '90.5%', // Aspek rasio 16:9 (atau gunakan '100%' untuk aspek rasio 1:1)
height: 0,
overflow: 'hidden'
}}>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31558.578355337635!2d115.18413781150647!3d-8.613053599999985!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2dd23ff3a9d0f0ab%3A0xb6bb54a820adbae6!2sBank%20Sampah%20Sarana%20Gathi!5e0!3m2!1sid!2sid!4v1743994947623!5m2!1sid!2sid"
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
border: 0
}}
loading="lazy"
allowFullScreen
></iframe>
</Box>
</SimpleGrid>
</Box>
</Stack>
);
}
export default Page;

74
src/app/darmasaba/(pages)/lingkungan/program-penghijauan/page.tsx Normal file
View File

@@ -0,0 +1,74 @@
import colors from '@/con/colors';
import { Box, Button, Center, Group, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
import { IconChristmasTreeFilled, IconHomeEco, IconShieldFilled, IconTrendingUp } from '@tabler/icons-react';
import BackButton from '../../desa/layanan/_com/BackButto';
const data = [
{
id: 1,
deskripsi: 'Lingkungan Sehat',
icon: <IconHomeEco size={80} color={colors['blue-button']} />,
},
{
id: 2,
deskripsi: 'Sumber Oksigen',
icon: <IconChristmasTreeFilled size={80} color={colors['blue-button']} />,
},
{
id: 3,
deskripsi: 'Ekonomi Berkelanjutan',
icon: <IconTrendingUp size={80} color={colors['blue-button']} />,
},
{
id: 4,
deskripsi: 'Mencegah Bencana',
icon: <IconShieldFilled size={80} color={colors['blue-button']} />,
},
]
function Page() {
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Box px={{ base: 'md', md: 100 }}>
<BackButton />
</Box>
<Box px={{ base: 'md', md: 100 }} >
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
Program Penghijauan Desa
</Text>
<Text px={20} ta={'center'} fz={'h4'}>Program Penghijauan Desa bertujuan untuk meningkatkan kesadaran masyarakat akan pentingnya lingkungan hijau melalui penanaman pohon dan perawatan tanaman.</Text>
</Box>
<Box px={{ base: 'md', md: 100 }} pb={60}>
<Text c={colors['blue-button']} fw={'bold'} py={10} px={28} fz={{ base: "lg", md: "xl" }} ta={"justify"}>
Manfaat Program Penghijauan
</Text>
<SimpleGrid
cols={{
base: 1,
md: 4
}}>
{data.map((v, k) => {
return (
<Box key={k}>
<Paper p={20} bg={colors['white-trans-1']}>
<Stack flex={5}>
<Center>
{v.icon}
</Center>
<Box>
<Text fz={{ base: "lg", md: "xl" }} ta={'center'} c={colors['blue-button']} fw={'bold'}>{v.deskripsi}</Text>
</Box>
<Group justify='center'>
<Button bg={colors['blue-button']}>Detail</Button>
</Group>
</Stack>
</Paper>
</Box>
)
})}
</SimpleGrid>
</Box>
</Stack>
);
}
export default Page;

151
src/app/darmasaba/(pages)/pendidikan/beasiswa-desa/page.tsx Normal file
View File

@@ -0,0 +1,151 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Center, Group, Image, Paper, SimpleGrid, Stack, Stepper, StepperStep, Text, Title } from '@mantine/core';
import { useState } from 'react';
import BackButton from '../../desa/layanan/_com/BackButto';
const dataBeasiswa = [
{
id: 1,
nama: 'Penerima Beasiswa',
jumlah: '250+'
},
{
id: 2,
nama: 'Peluang Kelulusan',
jumlah: '90%'
},
{
id: 3,
nama: 'Dana Tersalurkan',
jumlah: '1.5M'
},
]
const dataProgram = [
{
id: 1,
judul: "Pelatihan SoftSkill",
deskripsi: "Program pengembangan diri untuk mempersiapkan karir masa depan",
},
{
id: 2,
judul: "Peningkatan Akses Pendidikan ",
deskripsi: "Program yang menjangkau masyarakat kurang mampu secara finansial, mengurangi angka putus sekolah",
},
{
id: 3,
judul: "Pendampingan Intensif",
deskripsi: "Program dengan mentor berpengalaman yang membimbing dalam perjalanan akademik",
}
]
function Page() {
const [active, setActive] = useState(1);
const nextStep = () => setActive((current) => (current < 5 ? current + 1 : current));
const prevStep = () => setActive((current) => (current > 0 ? current - 1 : current));
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Box px={{ base: 'md', md: 100 }}>
<BackButton />
</Box>
{/* Page 1 */}
<Box px={{ base: 'md', md: 100 }} pb={50}>
<SimpleGrid
cols={{
base: 1,
md: 2
}}
>
<Box>
<Title fz={55} fw={'bold'} c={colors['blue-button']}>
Wujudkan Mimpi Pendidikanmu di Desa Darmasaba
</Title>
<Text fz={'xl'} >
Program beasiswa komprehensif untuk mendukung pendidikan berkualitas bagi putra-putri Desa Darmasaba.
</Text>
<SimpleGrid
mt={10}
cols={{
base: 1,
md: 2
}}
>
<Button bg={colors['blue-button']} fz={'lg'}>Daftar Sekarang</Button>
<Button bg={colors['blue-button-trans']} fz={'lg'}>Pelajari Lebih Lanjut</Button>
</SimpleGrid>
</Box>
<Box>
<Image alt='' src={'/api/img/beasiswa-siswa.png'} />
</Box>
</SimpleGrid>
<SimpleGrid mt={30}
cols={{
base: 1,
md: 3
}}
>
{dataBeasiswa.map((v, k) => {
return (
<Box key={k}>
<Paper p={'xl'} bg={colors['white-trans-1']}>
<Title ta={'center'} fz={55} fw={'bold'} c={colors['blue-button']}>
{v.jumlah}
</Title>
<Text ta={'center'}>
{v.nama}
</Text>
</Paper>
</Box>
)
})}
</SimpleGrid>
</Box>
{/* ---- */}
<Box px={{ base: 'md', md: 100 }} pb={20}>
<Title pb={20} ta={'center'} order={1} fw={'bold'} c={colors['blue-button']}>
Keunggulan Program
</Title>
<Paper p={'xl'} bg={colors['white-trans-1']}>
<SimpleGrid
cols={{
base: 1,
md: 3
}}
>
{dataProgram.map((v, k) => {
return (
<Box key={k}>
<Title order={2} fw={'bold'} c={colors['blue-button']}>
{v.judul}
</Title>
<Text>
{v.deskripsi}
</Text>
{/* <Divider orientation="vertical" size="md" h="auto" /> */}
</Box>
)
})}
</SimpleGrid>
</Paper>
<Title py={20} ta={'center'} order={1} fw={'bold'} c={colors['blue-button']}>
Timeline Pendaftaran
</Title>
<Center>
<Stepper mt={20} active={active} onStepClick={setActive} orientation="vertical" allowNextStepsSelect={false}>
<StepperStep label="Pembukaan Pendaftaran 1 Maret 2025" description="" />
<StepperStep label="Seleksi Administrasi 15 Maret 2025" description="" />
<StepperStep label="Tes Potensi Akademik 1 April 2025" description="" />
<StepperStep label="Wawancara 15 April 2025" description="" />
<StepperStep label="Pengumuman 1 Mei 2025" description="" />
</Stepper>
</Center>
<Group justify="center" mt="xl">
<Button variant="default" onClick={prevStep}>Back</Button>
<Button onClick={nextStep}>Next step</Button>
</Group>
</Box>
</Stack>
);
}
export default Page;

71
src/app/darmasaba/(pages)/pendidikan/bimbingan-belajar-desa/page.tsx Normal file
View File

@@ -0,0 +1,71 @@
import colors from '@/con/colors';
import { Stack, Box, Title, Text, SimpleGrid, Paper, List, ListItem } 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 px={{ base: 'md', md: 100 }} pb={50}>
<Box>
<Title ta={'center'} order={1} fw={'bold'} c={colors['blue-button']}>
Bimbingan Belajar Desa
</Title>
<Text pb={20} ta={'justify'} fz={'xl'} px={{ base: 'md', md: 100 }}>
Bimbingan Belajar Desa merupakan program unggulan untuk membantu siswa-siswi di Desa Darmasaba dalam memahami pelajaran sekolah, meningkatkan prestasi akademik, serta membangun semangat belajar yang tinggi sejak dini.
</Text>
</Box>
<SimpleGrid
cols={{
base: 1,
md: 3
}}
>
<Box>
<Paper p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
<Title order={2} fw={'bold'} c={colors['blue-button']}>
Tujuan Program
</Title>
<List>
<ListItem fz={'h4'}>Memberikan pendampingan belajar secara gratis bagi siswa SD hingga SMP</ListItem>
<ListItem fz={'h4'}>Membantu siswa dalam menghadapi ujian dan menyelesaikan tugas sekolah</ListItem>
<ListItem fz={'h4'}>Menumbuhkan kepercayaan diri dan kemandirian dalam belajar</ListItem>
<ListItem fz={'h4'}>Meningkatkan kesetaraan pendidikan untuk seluruh anak desa</ListItem>
</List>
</Paper>
</Box>
<Box>
<Paper h={{base: 0, md: 324}} p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
<Title order={2} fw={'bold'} c={colors['blue-button']}>
Lokasi dan Jadwal
</Title>
<List>
<ListItem fz={'h4'}>Lokasi: Balai Banjar / Balai Desa Darmasaba / Perpustakaan Desa</ListItem>
<ListItem fz={'h4'}>Jadwal: Setiap hari Senin, Rabu, dan Jumat pukul 16.00–18.00 WITA</ListItem>
<ListItem fz={'h4'}>Peserta: Terbuka untuk semua siswa SD–SMP di wilayah desa</ListItem>
</List>
</Paper>
</Box>
<Box>
<Paper h={{base: 0, md: 324}} p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
<Title order={2} fw={'bold'} c={colors['blue-button']}>
Fasilitas yang Disediakan
</Title>
<List>
<ListItem fz={'h4'}>Buku-buku pelajaran dan alat tulis</ListItem>
<ListItem fz={'h4'}>Ruang belajar nyaman dan kondusif</ListItem>
<ListItem fz={'h4'}>Modul latihan dan pendampingan tugas</ListItem>
<ListItem fz={'h4'}>Minuman ringan dan dukungan motivasi belajar</ListItem>
</List>
</Paper>
</Box>
</SimpleGrid>
</Box>
</Stack>
);
}
export default Page;

74
src/app/darmasaba/(pages)/pendidikan/data-pendidikan/page.tsx Normal file
View File

@@ -0,0 +1,74 @@
import colors from '@/con/colors';
import { Stack, Box, Title, Paper } from '@mantine/core';
import React from 'react';
import BackButton from '../../desa/layanan/_com/BackButto';
import { BarChart } from '@mantine/charts';
const data = [
{
kategori: 'Jumlah penduduk usia 15-64 th yang tidak bisa baca tulis',
jumlah: 30
},
{
kategori: 'Jumlah penduduk tidak tamat SD/sederajat',
jumlah: 25
},
{
kategori: 'Jumlah penduduk tidak tamat SLTP/Sederajat',
jumlah: 20
},
{
kategori: 'Jumlah penduduk tidak tamat SLTA/Sederajat',
jumlah: 10
},
{
kategori: 'Jumlah penduduk tamat Sarjana/S1',
jumlah: 15
},
{
kategori: 'Jumlah penduduk tamat Pascsarjana',
jumlah: 30
},
]
function Page() {
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Box px={{ base: 'md', md: 100 }}>
<BackButton />
</Box>
<Box px={{ base: 'md', md: 100 }} >
<Box pb={20}>
<Title ta={'center'} order={1} fw={'bold'} c={colors['blue-button']}>
Data Pendidikan
</Title>
</Box>
<Paper p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
<BarChart
p={'100'}
h={600}
data={data}
dataKey="kategori"
series={[
{ name: 'jumlah', color: 'violet.6' },
]}
tickLine="y"
xAxisProps={{
angle: -45, // Rotate labels by -45 degrees
textAnchor: 'end', // Anchor text to the end for better alignment
height: 100, // Increase height for rotated labels
interval: 0, // Show all labels
style: {
fontSize: '12px', // Adjust font size if needed
overflow: 'visible',
whiteSpace: 'nowrap'
}
}}
/>
</Paper>
</Box>
</Stack>
);
}
export default Page;

105
src/app/darmasaba/(pages)/pendidikan/info-sekolah-paud/page.tsx Normal file
View File

@@ -0,0 +1,105 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Center, Group, Paper, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import { IconChalkboard, IconMicroscope, IconSchool, IconSearch } from '@tabler/icons-react';
import BackButton from '../../desa/layanan/_com/BackButto';
import { motion } from 'framer-motion';
const dataSekolah = [
{
id: 1,
icon: <IconChalkboard size={55} color={colors["blue-button"]} />,
jumlah: 15,
nama: 'Lembaga Pendidikan'
},
{
id: 2,
icon: <IconSchool size={55} color={colors["blue-button"]} />,
jumlah: 3209,
nama: 'Siswa Terdaftar'
},
{
id: 3,
icon: <IconMicroscope size={55} color={colors["blue-button"]} />,
jumlah: 285,
nama: 'Tenaga Pengajar'
},
]
function Page() {
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Box px={{ base: 'md', md: 100 }}>
<BackButton />
</Box>
<Box px={{ base: 'md', md: 100 }} pb={20}>
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
Cari Informasi Sekolah
</Text>
<Group justify='center' pb={20}>
<TextInput
w={{ base: "50%", md: "70%" }}
placeholder='Cari Sekolah...'
rightSection={
<Button
size="xs"
style={{ height: '80%', marginRight: '5px' }}
bg={colors["blue-button"]}
>
Cari
</Button>
}
rightSectionWidth={70}
leftSection={<IconSearch size={20} />}
/>
</Group>
<Group mb={20} gap="md" justify='center' wrap="wrap">
<Paper bg={colors['blue-button']} radius="xl" py={5} px={20}>
<Text c={colors['white-1']} size="sm">
Semua
</Text>
</Paper>
{['TK/PAUD', 'SD', 'SMP', 'SMA/SMK'].map((kategori) => (
<Paper key={kategori} bg={'gray'} radius="xl" py={5} px={20}>
<Text c={colors['white-1']} size="sm">
{kategori}
</Text>
</Paper>
))}
</Group>
<SimpleGrid
cols={{
base: 1,
md: 3
}}
>
{dataSekolah.map((v, k) => {
return (
<Box key={k}>
<motion.div
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.8 }}
style={{ width: '100%', height: '100%' }}
>
<Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
<Stack>
<Center>
{v.icon}
</Center>
<Text c={colors["blue-button"]} ta={'center'} fw={'bold'} fz={{ base: "h2", md: "h1" }}>{v.jumlah}</Text>
<Text c={colors["blue-button"]} ta={'center'} fw={'bold'}>{v.nama}</Text>
</Stack>
</Paper>
</motion.div>
</Box>
)
})}
</SimpleGrid>
</Box>
</Stack>
);
}
export default Page;

98
src/app/darmasaba/(pages)/pendidikan/pendidikan-non-formal/page.tsx Normal file
View File

@@ -0,0 +1,98 @@
import colors from '@/con/colors';
import { Stack, Box, Title, Text, SimpleGrid, Paper, List, ListItem } 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 px={{ base: 'md', md: 100 }} pb={50}>
<Box>
<Title ta={'center'} order={1} fw={'bold'} c={colors['blue-button']}>
Pendidikan Non Formal
</Title>
<Text pb={20} ta={'justify'} fz={'xl'} px={{ base: 'md', md: 100 }}>
Pendidikan Non Formal adalah bentuk pendidikan di luar sekolah yang diselenggarakan secara terstruktur dan bertujuan memberikan keterampilan, pengetahuan, serta pengembangan karakter masyarakat dari berbagai usia dan latar belakang.
</Text>
</Box>
<SimpleGrid
cols={{
base: 1,
md: 2
}}
>
<Box>
<Paper p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
<Title order={2} fw={'bold'} c={colors['blue-button']}>
Tujuan Program
</Title>
<List>
<ListItem fz={'h4'}>Memberikan kesempatan belajar yang fleksibel bagi warga desa</ListItem>
<ListItem fz={'h4'}>Meningkatkan keterampilan hidup dan kemandirian ekonomi</ListItem>
<ListItem fz={'h4'}>Mendorong partisipasi masyarakat dalam pembangunan desa</ListItem>
<ListItem fz={'h4'}>Mengurangi angka putus sekolah dan meningkatkan kualitas SDM</ListItem>
</List>
</Paper>
</Box>
<Box>
<Paper h={{ base: 0, md: 210 }} p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
<Title order={2} fw={'bold'} c={colors['blue-button']}>
Tempat Kegiatan
</Title>
<List>
<ListItem fz={'h4'}>Balai Desa Darmasaba</ListItem>
<ListItem fz={'h4'}>TPK, Perpustakaan Desa, atau Posyandu</ListItem>
<ListItem fz={'h4'}>Bisa juga dilakukan secara mobile atau door to door</ListItem>
</List>
</Paper>
</Box>
</SimpleGrid>
<Box py={20}>
<Paper p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
<Title order={2} fw={'bold'} c={colors['blue-button']}>
Jenis Program yang Diselenggarakan
</Title>
<Text fz={'h4'}>Program Pendidikan Non Formal yang diselenggarakan di Desa Darmasaba meliputi:</Text>
<Stack>
<Box>
<Text fz={'h4'}> 1) Keaksaraan Fungsional</Text>
<List>
<ListItem fz={'h4'}>Untuk warga yang belum bisa membaca dan menulis</ListItem>
</List>
</Box>
<Box>
<Text fz={'h4'}> 2) Pendidikan Kesetaraan (Paket A, B, C)</Text>
<List>
<ListItem fz={'h4'}>Setara SD, SMP, dan SMA bagi yang tidak menyelesaikan pendidikan formal</ListItem>
</List>
</Box>
<Box>
<Text fz={'h4'}> 3) Pelatihan Keterampilan</Text>
<List>
<ListItem fz={'h4'}>Menjahit, memasak, sablon, pertanian, peternakan, hingga teknologi digital</ListItem>
</List>
</Box>
<Box>
<Text fz={'h4'}> 4) Kursus & Pelatihan Soft Skill</Text>
<List>
<ListItem fz={'h4'}>Public speaking, pengelolaan keuangan, kepemimpinan pemuda</ListItem>
</List>
</Box>
<Box>
<Text fz={'h4'}> 5) Pendidikan Keluarga & Parenting</Text>
<List>
<ListItem fz={'h4'}>Untuk membekali orang tua dalam mendampingi tumbuh kembang anak</ListItem>
</List>
</Box>
</Stack>
</Paper>
</Box>
</Box>
</Stack>
);
}
export default Page;

56
src/app/darmasaba/(pages)/pendidikan/perpustakaan-digital/login/page.tsx Normal file
View File

@@ -0,0 +1,56 @@
import colors from '@/con/colors';
import { Box, Button, Center, Flex, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
import { IconUserFilled } from '@tabler/icons-react';
import Link from 'next/link';
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 px={{ base: 'md', md: 100 }} >
<Center>
<Image src={"/api/img/darmasaba-icon.png"} alt="" w={80} />
</Center>
<Box>
<Title ta={'center'} order={1} fw={'bold'} c={colors['blue-button']}>
E-Book Desa Darmasaba
</Title>
<Text ta={'center'} fz={'h4'} fw={'bold'} c={colors['blue-button']}>
Silahkan masukkan akun anda untuk menjelajahi berbagai macam buku di perpustakaan digital
</Text>
</Box>
</Box>
<Box px={{ base: 'md', md: 100 }} pb={50}>
<Group justify='center'>
<Paper p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
<Stack align='center'>
<Title order={2} fw={'bold'} c={colors['blue-button']}>
Login
</Title>
<IconUserFilled size={80} color={colors['blue-button']} />
<Box>
<Text c={colors['blue-button']} fw={'bold'}>Masuk Untuk Akses Lebih Banyak Buku</Text>
<TextInput placeholder='Email' />
<TextInput py={20} placeholder='Password' />
<Box pb={20} >
<Button component={Link} href={'/darmasaba/pendidikan/perpustakaan-digital'} fullWidth bg={colors['blue-button']} radius={'xl'}>Masuk</Button>
</Box>
<Flex justify={'center'} align={'center'}>
<Text>Belum punya akun? </Text>
<Button variant='transparent' component={Link} href={'/darmasaba/pendidikan/perpustakaan-digital/registrasi'}>
<Text c={colors['blue-button']} fw={'bold'}>Registrasi</Text>
</Button>
</Flex>
</Box>
</Stack>
</Paper>
</Group>
</Box>
</Stack>
);
}
export default Page;

111
src/app/darmasaba/(pages)/pendidikan/perpustakaan-digital/page.tsx Normal file
View File

@@ -0,0 +1,111 @@
'use client'
import colors from '@/con/colors';
import { ActionIcon, Box, Button, Center, Flex, Group, Image, Paper, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import { IconSearch, IconUser } from '@tabler/icons-react';
import { motion } from 'framer-motion';
import BackButton from '../../desa/layanan/_com/BackButto';
import Link from 'next/link';
const dataSekolah = [
{
id: 1,
gambar: '/api/img/buku-1.png',
judul: 'Angkasa dan 56 Hari',
deskripsi: 'Angkasa dan 56 hari mengisahkan tentang sebuah perjuangan perihal asa yang belum usai. Tentang cinta pertama yang secara tiba-tiba menghilang dari kehidupan.'
},
{
id: 2,
gambar: '/api/img/buku-2.png',
judul: 'Sayuran Organik',
deskripsi: 'Buku ini membahas cara menanam sayuran secara organik, jenis-jenis sayuran organik, dan cara mengatasi hama dan penyakit. '
},
{
id: 3,
gambar: '/api/img/buku-3.png',
judul: 'Bali Tempo Dulu',
deskripsi: 'Buku Bali Tempo Doeloe oleh Adrian Vickers berisi berbagai catatan perjalanan yang menggambarkan kehidupan sosial budaya Bali di masa lampau.'
},
]
function Page() {
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Box px={{ base: 'md', md: 100 }}>
<Flex justify={'space-between'} align={'center'}>
<BackButton />
<ActionIcon variant='transparent' component={Link} href={'/darmasaba/pendidikan/perpustakaan-digital/login'}>
<IconUser color={colors["blue-button"]} size={30} />
</ActionIcon>
</Flex>
</Box>
<Box px={{ base: 'md', md: 100 }} pb={20}>
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
E-Book Desa Darmasaba
</Text>
<Group justify='center' pb={20}>
<TextInput
w={{ base: "50%", md: "70%" }}
placeholder='Cari Buku...'
rightSection={
<Button
size="xs"
style={{ height: '80%', marginRight: '5px' }}
bg={colors["blue-button"]}
>
Cari
</Button>
}
rightSectionWidth={70}
leftSection={<IconSearch size={20} />}
/>
</Group>
<Group mb={20} gap="md" justify='center' wrap="wrap">
<Paper bg={colors['blue-button']} radius="xl" py={5} px={20}>
<Text c={colors['white-1']} size="sm">
Semua
</Text>
</Paper>
{['Non Fiksi', 'Sejarah', 'Edukasi', 'Fiksi'].map((kategori) => (
<Paper key={kategori} bg={'gray'} radius="xl" py={5} px={20}>
<Text c={colors['white-1']} size="sm">
{kategori}
</Text>
</Paper>
))}
</Group>
<SimpleGrid
cols={{
base: 1,
md: 3
}}
>
{dataSekolah.map((v, k) => {
return (
<Box key={k}>
<motion.div
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.8 }}
style={{ width: '100%', height: '100%' }}
>
<Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
<Stack>
<Center>
<Image src={v.gambar} alt='' w={{ base: 390, md: 1000 }}/>
</Center>
<Text c={colors["blue-button"]} ta={'center'} fw={'bold'} fz={{ base: "h2", md: "h1" }}>{v.judul}</Text>
<Text c={colors["blue-button"]} ta={'center'} fw={'bold'}>{v.deskripsi}</Text>
</Stack>
</Paper>
</motion.div>
</Box>
)
})}
</SimpleGrid>
</Box>
</Stack>
);
}
export default Page;

66
src/app/darmasaba/(pages)/pendidikan/perpustakaan-digital/registrasi/page.tsx Normal file
View File

@@ -0,0 +1,66 @@
import colors from '@/con/colors';
import { Box, Button, Center, Checkbox, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
import Link from 'next/link';
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 px={{ base: 'md', md: 100 }} >
<Center>
<Image src={"/api/img/darmasaba-icon.png"} alt="" w={80} />
</Center>
<Box>
<Title ta={'center'} order={1} fw={'bold'} c={colors['blue-button']}>
E-Book Desa Darmasaba
</Title>
<Text ta={'center'} fz={'h4'} fw={'bold'} c={colors['blue-button']}>
Silahkan lengkapi data diri anda untuk mengakses e-book desa
</Text>
</Box>
</Box>
<Box px={{ base: 'md', md: 100 }} pb={50}>
<Group justify='center'>
<Paper p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
<Stack align='center'>
<Title order={2} fw={'bold'} c={colors['blue-button']}>
Registrasi
</Title>
<Box>
<TextInput placeholder='Nama Lengkap'
label='Nama Lengkap'
/>
<TextInput py={10} placeholder='Email'
label='Email'
/>
<TextInput placeholder='day / month / year'
label='Tanggal Lahir'
/>
<TextInput py={10} placeholder='08xx-xxxx-xxxx'
label='Nomor Telepon'
/>
<TextInput pb={10} placeholder='Password'
label='Password'
/>
<Box pb={10}>
<Checkbox
label="Saya menyetujui syarat dan ketentuan yang berlaku"
/>
</Box>
<Box pb={20} >
<Button component={Link} href={'/darmasaba/pendidikan/perpustakaan-digital'} fullWidth bg={colors['blue-button']} radius={'xl'}>Daftar</Button>
</Box>
</Box>
</Stack>
</Paper>
</Group>
</Box>
</Stack>
);
}
export default Page;

59
src/app/darmasaba/(pages)/pendidikan/program-pendidikan-anak/page.tsx Normal file
View File

@@ -0,0 +1,59 @@
import colors from '@/con/colors';
import { Stack, Box, Title, Text, SimpleGrid, Paper, List, ListItem } 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 px={{ base: 'md', md: 100 }} pb={50}>
<Box>
<Title ta={'center'} order={1} fw={'bold'} c={colors['blue-button']}>
Program Pendidikan Anak
</Title>
<Text pb={20} ta={'justify'} fz={'xl'} px={{ base: 'md', md: 100 }}>
Desa Darmasaba berkomitmen untuk menciptakan generasi muda yang cerdas, berkarakter, dan berdaya saing melalui berbagai program pendidikan yang inklusif dan berkelanjutan. Pendidikan anak menjadi pondasi utama dalam mewujudkan masa depan desa yang lebih baik.
</Text>
</Box>
<SimpleGrid
cols={{
base: 1,
md: 2
}}
>
<Box>
<Paper p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
<Title order={2} fw={'bold'} c={colors['blue-button']}>
Tujuan Program
</Title>
<List>
<ListItem fz={'h4'}>Meningkatkan akses pendidikan yang merata dan berkualitas</ListItem>
<ListItem fz={'h4'}>Menumbuhkan semangat belajar sejak dini</ListItem>
<ListItem fz={'h4'}>Membentuk karakter anak yang berakhlak dan berwawasan lingkungan</ListItem>
<ListItem fz={'h4'}>Mendukung tumbuh kembang anak melalui pendekatan pendidikan yang holistik</ListItem>
</List>
</Paper>
</Box>
<Box>
<Paper h={{base: 0, md: 239}} p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
<Title order={2} fw={'bold'} c={colors['blue-button']}>
Program Unggulan
</Title>
<List>
<ListItem fz={'h4'}>Bimbingan Belajar Gratis: Untuk siswa kurang mampu</ListItem>
<ListItem fz={'h4'}>Gerakan Literasi Desa: Meningkatkan minat baca sejak dini</ListItem>
<ListItem fz={'h4'}>Pelatihan Digital untuk Anak dan Remaja</ListItem>
<ListItem fz={'h4'}>Beasiswa Anak Berprestasi & Kurang Mampu</ListItem>
</List>
</Paper>
</Box>
</SimpleGrid>
</Box>
</Stack>
);
}
export default Page;

9
src/con/navbar-list-menu.ts
View File

@@ -331,8 +331,13 @@ const navbarListMenu = [
},
{
id: "8.6",
name: "Perpustakaan Desa",
href: "/darmasaba/pendidikan/perpustakaan-desa"
name: "Perpustakaan Digital",
href: "/darmasaba/pendidikan/perpustakaan-digital"
},
{
id: "8.7",
name: "Data Pendidikan",
href: "/darmasaba/pendidikan/data-pendidikan"
}
]
}