import React, { useEffect, useState } from 'react'; import type { ReactElement } from 'react'; import Head from 'next/head'; import Link from 'next/link'; import * as icon from '@mdi/js'; import BaseButton from '../components/BaseButton'; import BaseIcon from '../components/BaseIcon'; import SectionFullScreen from '../components/SectionFullScreen'; import LayoutGuest from '../layouts/Guest'; import { getPageTitle } from '../config'; import { useAppSelector } from '../stores/hooks'; import { getPexelsImage } from '../helpers/pexels'; export default function Home() { const [illustrationImage, setIllustrationImage] = useState(null); const textColor = useAppSelector((state) => state.style.linkColor); const title = 'Sistem Sekolah Indonesia'; useEffect(() => { async function fetchData() { const image = await getPexelsImage('school building'); setIllustrationImage(image); } fetchData(); }, []); const roles = [ { title: 'Admin Yayasan', description: 'Kelola data sekolah, jenjang pendidikan, dan setting biaya SPP.', icon: icon.mdiShieldAccount, color: 'text-blue-600', bg: 'bg-blue-50', }, { title: 'Guru', description: 'Input absensi harian, tugas, nilai, dan jadwal pelajaran.', icon: icon.mdiAccountTie, color: 'text-green-600', bg: 'bg-green-50', }, { title: 'Siswa', description: 'Lihat jadwal, kerjakan tugas, dan ikuti ujian online.', icon: icon.mdiAccountSchool, color: 'text-purple-600', bg: 'bg-purple-50', }, { title: 'Orang Tua', description: 'Pantau absensi anak, nilai, dan status pembayaran SPP.', icon: icon.mdiAccountChild, color: 'text-orange-600', bg: 'bg-orange-50', }, ]; return (

{getPageTitle('Beranda')} {/* Hero Section */}

Sistem Informasi{' '} Sekolah Indonesia

Solusi digital terintegrasi untuk manajemen akademik, keuangan (SPP), absensi real-time, dan komunikasi sekolah yang modern.

{illustrationImage ? ( School

) : (

)}

{/* Features Section */}

Fitur Utama

Satu Platform untuk Semua Kebutuhan

{role.title}: {role.description}

{/* Stats Section */}

100%

Transparan

Real-time

Absensi & Nilai

Mudah

Pembayaran SPP

{/* Footer */}

); } Home.getLayout = function getLayout(page: ReactElement) { return {page}; };