259 lines
14 KiB
TypeScript
259 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
|
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
|
import { Clock, Headphones, LineChart, ShieldCheck, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="mediumSmall"
|
|
sizing="largeSmall"
|
|
background="noiseDiagonalGradient"
|
|
cardStyle="layered-gradient"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="medium"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{
|
|
name: "Beranda", id: "#hero"},
|
|
{
|
|
name: "Tentang", id: "#tentang"},
|
|
{
|
|
name: "Layanan", id: "#layanan"},
|
|
{
|
|
name: "Statistik", id: "#statistik"},
|
|
{
|
|
name: "Mitra", id: "#mitra"},
|
|
{
|
|
name: "FAQ", id: "#faq"},
|
|
{
|
|
name: "Kontak", id: "#kontak"},
|
|
]}
|
|
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EF2FDBy1NIX3tfWKxibv7Gl11f/uploaded-1779760095913-hhntekvo.png"
|
|
logoAlt="Logo RS Mata Bali Mandara"
|
|
brandName="RS Mata Bali Mandara"
|
|
bottomLeftText="Pelayanan Kepegawaian"
|
|
bottomRightText="hubungi.admin@rsmatabm.com"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplit
|
|
background={{
|
|
variant: "plain"}}
|
|
imagePosition="right"
|
|
title="Selamat Datang di Portal Kepegawaian RS Mata Bali Mandara"
|
|
description="Bapak/Ibu, Kami hadir untuk memastikan semua kebutuhan administrasi kepegawaian Anda terpenuhi dengan cepat dan efisien. Jelajahi berbagai layanan kami di bawah ini."
|
|
imageSrc="http://img.b2bpic.net/free-photo/health-specialist-showing-greenscreen-tablet-woman-with-disability-cabinet-looking-blank-mockup-template-with-isolated-display-chroma-key-copyspace-wheelchair-user_482257-48511.jpg"
|
|
imageAlt="Dashboard Kepegawaian Rumah Sakit"
|
|
mediaAnimation="slide-up"
|
|
fixedMediaHeight={true}
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/high-angle-nurses-looking-clipboard_23-2148501140.jpg", alt: "Pegawai medis"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/heart-from-pills-near-resonator-ear-plugs-stethoscope_23-2147896919.jpg", alt: "Profesional kesehatan"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/female-nurse-patients-reviewing-diagnostic-results-medical-office_482257-122717.jpg", alt: "Dokter senior"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/masked-colleagues-discuss-project-ideas_482257-120203.jpg", alt: "Tim administrasi rumah sakit"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/closeup-happy-multiethnic-couple-with-protective-face-masks-looking-camera_637285-8650.jpg", alt: "Tim kesehatan"},
|
|
]}
|
|
avatarText="Lebih dari 275 Pegawai Aktif
|
|
"
|
|
marqueeItems={[
|
|
{
|
|
type: "text-icon", text: "Pengajuan Cepat", icon: Zap,
|
|
},
|
|
{
|
|
type: "text-icon", text: "Informasi Akurat", icon: ShieldCheck,
|
|
},
|
|
{
|
|
type: "text-icon", text: "Akses 24/7", icon: Clock,
|
|
},
|
|
{
|
|
type: "text-icon", text: "Dukungan Penuh", icon: Headphones,
|
|
},
|
|
{
|
|
type: "text-icon", text: "Data Terkini", icon: LineChart,
|
|
},
|
|
]}
|
|
marqueeSpeed={30}
|
|
showMarqueeCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="tentang" data-section="tentang">
|
|
<TextSplitAbout
|
|
useInvertedBackground={true}
|
|
title="Tentang Bagian Kepegawaian"
|
|
description={[
|
|
"Bagian Kepegawaian RS Mata Bali Mandara berkomitmen untuk memberikan pelayanan terbaik bagi seluruh staf. Kami mengelola berbagai aspek kepegawaian, mulai dari pengembangan karir, administrasi cuti, hingga persiapan pensiun.", "Visi kami adalah menjadi mitra terpercaya bagi setiap pegawai dalam mencapai potensi maksimal dan memastikan kesejahteraan Anda. Dengan sistem yang terintegrasi, kami berusaha untuk selalu transparan dan mudah diakses."]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="layanan" data-section="layanan">
|
|
<FeatureCardNine
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Layanan Kenaikan Pangkat", description: "Ajukan kenaikan pangkat Anda melalui sistem digital yang terintegrasi. Proses pengajuan, verifikasi, hingga status dapat dipantau secara real-time.", phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-reading-digital-magazine_23-2150162713.jpg", imageAlt: "Aplikasi Kenaikan Pangkat"},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-girl-using-her-phone_53876-96884.jpg", imageAlt: "Verifikasi Kenaikan Pangkat"},
|
|
},
|
|
{
|
|
title: "Layanan Tugas Belajar", description: "Dukungan penuh untuk pengembangan kompetensi Anda melalui program tugas belajar. Informasi persyaratan dan prosedur tersedia lengkap di sini.", phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/colleagues-studying-from-notebooks-study-session_23-2149265720.jpg", imageAlt: "Aplikasi Tugas Belajar"},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/classmates-writing-learning-study-session_23-2149265747.jpg", imageAlt: "Persetujuan Tugas Belajar"},
|
|
},
|
|
{
|
|
title: "Layanan Cuti Pegawai", description: "Pengajuan dan pengelolaan cuti yang mudah dan transparan. Cek sisa cuti Anda dan ajukan permohonan kapan saja, di mana saja.", phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/closeup-happy-woman-using-mobile-phone-text-messaging-night-home_637285-4411.jpg", imageAlt: "Aplikasi Cuti Pegawai"},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/girl-is-sitting-white-table-office-she-holds-tablet-works-with-financial-diagrams_197531-25030.jpg", imageAlt: "Manajemen Cuti"},
|
|
},
|
|
{
|
|
title: "Layanan Simpeg/Siperi", description: "Akses mudah ke Sistem Informasi Manajemen Kepegawaian (SIMPEG) dan Sistem Informasi Kepegawaian Perorangan (SIPERI) untuk data pribadi Anda.", phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/programming-language-notebook-used-by-server-room-it-experts-close-up_482257-119942.jpg", imageAlt: "Aplikasi SIMPEG"},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-typing-his-phone-desk_1150-170.jpg", imageAlt: "Dashboard SIMPEG"},
|
|
},
|
|
{
|
|
title: "Layanan Uji Kompetensi (UJIKOM)", description: "Persiapkan diri Anda untuk uji kompetensi dengan materi dan jadwal yang terupdate. Tingkatkan karir Anda bersama kami.", phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/side-view-senior-man-classroom_23-2150312830.jpg", imageAlt: "Aplikasi Uji Kompetensi"},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-with-medical-mask-looking-her-phone_23-2148767510.jpg", imageAlt: "Hasil Uji Kompetensi"},
|
|
},
|
|
{
|
|
title: "Layanan Usul Pensiun", description: "Kami membantu Bapak/Ibu dalam proses pengajuan pensiun dengan panduan lengkap dan dukungan administratif yang profesional.", phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/top-view-happy-boss-day-concept_23-2148586524.jpg?_wi=1", imageAlt: "Aplikasi Usul Pensiun"},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-company-analyst-office-watching-business-presentation-pc_482257-118998.jpg?_wi=1", imageAlt: "Proses Pensiun"},
|
|
},
|
|
]}
|
|
showStepNumbers={true}
|
|
title="Layanan Utama Kepegawaian"
|
|
description="Bapak/Ibu, Berikut adalah beberapa layanan administrasi kepegawaian yang dapat Anda akses."
|
|
/>
|
|
</div>
|
|
|
|
<div id="statistik" data-section="statistik">
|
|
<MetricCardEleven
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
metrics={[
|
|
{
|
|
id: "metric-1", value: "275+", title: "Pegawai Aktif", description: "Jumlah total pegawai yang berdedikasi di berbagai departemen RS Mata Bali Mandara.", imageSrc: "http://img.b2bpic.net/free-photo/team-young-specialist-doctors-standing-corridor-hospital_1303-21200.jpg", imageAlt: "Kelompok staf rumah sakit"},
|
|
{
|
|
id: "metric-2", value: "17", title: "Jenis Layanan", description: "Beragam layanan administratif yang tersedia untuk mendukung kebutuhan seluruh pegawai.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-happy-boss-day-concept_23-2148586524.jpg?_wi=2", imageAlt: "Ikon layanan"},
|
|
]}
|
|
title="Statistik Kepegawaian Kami"
|
|
description="Data dan angka penting yang mencerminkan kinerja dan keberagaman sumber daya manusia di RS Mata Bali Mandara."
|
|
/>
|
|
</div>
|
|
|
|
<div id="mitra" data-section="mitra">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"Kementerian Kesehatan", "Pemerintah Provinsi Bali", "Badan Kepegawaian Negara", "ASN", "Asosiasi Rumah Sakit", "Organisasi Profesi Medis", "Lembaga Pendidikan"]}
|
|
title="Mitra dan Unit Terkait"
|
|
description="Bapak/Ibu, Kami bekerja sama dengan berbagai lembaga dan unit untuk memastikan pelayanan kepegawaian yang komprehensif dan sesuai regulasi."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{
|
|
id: "faq-1", title: "Bagaimana cara mengajukan kenaikan pangkat?", content: "Bapak/Ibu dapat mengajukan kenaikan pangkat melalui sistem SIMPEG kami. Pastikan semua dokumen yang disyaratkan telah diunggah dengan lengkap dan benar."},
|
|
{
|
|
id: "faq-2", title: "Apa saja syarat untuk tugas belajar?", content: "Syarat untuk tugas belajar meliputi masa kerja tertentu, rekomendasi atasan, dan kesesuaian program studi dengan kebutuhan rumah sakit. Detail lengkap dapat dilihat pada panduan di portal layanan."},
|
|
{
|
|
id: "faq-3", title: "Bagaimana cara mengecek sisa cuti saya?", content: "Sisa cuti dapat dicek langsung melalui aplikasi E-Cuti atau portal SIMPEG Anda. Informasi akan diperbarui secara otomatis setelah setiap pengajuan cuti."},
|
|
{
|
|
id: "faq-4", title: "Siapa yang harus saya hubungi jika ada masalah teknis dengan portal?", content: "Jika Bapak/Ibu mengalami masalah teknis, silakan hubungi admin kepegawaian melalui kontak yang tertera di bagian 'Kontak Kami' atau kirimkan email ke helpdesk kepegawaian."},
|
|
{
|
|
id: "faq-5", title: "Berapa lama proses persetujuan cuti?", content: "Proses persetujuan cuti biasanya memakan waktu 1-3 hari kerja, tergantung dari jenis cuti dan ketersediaan atasan untuk menyetujui. Kami akan memberikan notifikasi setelah status cuti diperbarui."},
|
|
]}
|
|
title="Pertanyaan Umum (FAQ)"
|
|
description="Temukan jawaban atas pertanyaan umum terkait layanan kepegawaian."
|
|
faqsAnimation="slide-up"
|
|
animationType="smooth"
|
|
/>
|
|
</div>
|
|
|
|
<div id="kontak" data-section="kontak">
|
|
<ContactCenter
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "plain"}}
|
|
tag="Hubungi Kami"
|
|
title="Ada Pertanyaan Lain?"
|
|
description="Bapak/Ibu dapat menyampaikan pertanyaan atau membutuhkan bantuan lebih lanjut. Kami siap membantu."
|
|
inputPlaceholder="Masukkan pesan Anda"
|
|
buttonText="Kirim Pesan"
|
|
termsText="Dengan menekan Kirim Pesan, Anda menyetujui Syarat dan Ketentuan kami."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EF2FDBy1NIX3tfWKxibv7Gl11f/uploaded-1779760095913-hhntekvo.png"
|
|
logoAlt="Logo RS Mata Bali Mandara"
|
|
columns={[
|
|
{
|
|
items: [
|
|
{
|
|
label: "Beranda", href: "#hero"},
|
|
{
|
|
label: "Tentang Kami", href: "#tentang"},
|
|
{
|
|
label: "Layanan", href: "#layanan"},
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{
|
|
label: "FAQ", href: "#faq"},
|
|
{
|
|
label: "Kontak", href: "#kontak"},
|
|
{
|
|
label: "Kebijakan Privasi", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
logoText="RS Mata Bali Mandara"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|