wibu/desa-darmasaba
1
0
Fork 0
Code Issues Pull Requests 5 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

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;