Merge version_1 into main
Merge version_1 into main
This commit was merged in pull request #1.
This commit is contained in:
312
src/app/page.tsx
312
src/app/page.tsx
@@ -10,7 +10,7 @@ import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
||||
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
||||
import { Bell, Calendar, CheckCircle, CreditCard, DollarSign, FileText, HelpCircle, History, Settings, ShieldCheck, Target, Users, Wallet, Zap } from "lucide-react";
|
||||
import { Bell, Calendar, CheckCircle, CreditCard, DollarSign, FileText, HelpCircle, History, PiggyBank, Settings, ShieldCheck, Target, Users, Wallet, Wifi, Zap } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -31,29 +31,17 @@ export default function LandingPage() {
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Beranda",
|
||||
id: "beranda",
|
||||
},
|
||||
name: "Beranda", id: "beranda"},
|
||||
{
|
||||
name: "Fitur",
|
||||
id: "fitur",
|
||||
},
|
||||
name: "Fitur", id: "fitur"},
|
||||
{
|
||||
name: "Statistik",
|
||||
id: "statistik",
|
||||
},
|
||||
name: "Statistik", id: "statistik"},
|
||||
{
|
||||
name: "Testimoni",
|
||||
id: "testimoni",
|
||||
},
|
||||
name: "Testimoni", id: "testimoni"},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "faq",
|
||||
},
|
||||
name: "FAQ", id: "faq"},
|
||||
{
|
||||
name: "Kontak",
|
||||
id: "kontak",
|
||||
},
|
||||
name: "Kontak", id: "kontak"},
|
||||
]}
|
||||
brandName="Keuangan TITL 2"
|
||||
bottomLeftText="Kelola Keuangan Kelas Anda"
|
||||
@@ -65,22 +53,18 @@ export default function LandingPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
variant: "plain"}}
|
||||
title="Kelola Keuangan Kelas dengan Mudah dan Transparan"
|
||||
description="Aplikasi 'Keuangan TITL 2' membantu Anda mengelola tabungan siswa, uang kas mingguan, dan pengeluaran secara efisien. Lihat laporan, lacak transaksi, dan berikan akses dashboard untuk setiap siswa."
|
||||
tag="Baru!"
|
||||
tagIcon={Zap}
|
||||
buttons={[
|
||||
{
|
||||
text: "Mulai Sekarang",
|
||||
href: "#fitur",
|
||||
},
|
||||
text: "Mulai Sekarang", href: "#fitur"},
|
||||
{
|
||||
text: "Lihat Demo",
|
||||
href: "#demo",
|
||||
},
|
||||
text: "Lihat Demo", href: "#demo"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BTU7H38Zbe3PO097DVpO1WXqJi/a-clean-modern-financial-dashboard-inter-1774512459009-a5af5b6a.png"
|
||||
imageAlt="Dashboard aplikasi Keuangan TITL 2"
|
||||
mediaAnimation="entrance-slide"
|
||||
@@ -93,108 +77,67 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Kelola Tabungan Siswa",
|
||||
description: "Input dan lacak tabungan individu setiap siswa dengan mudah. Riwayat transaksi lengkap tersedia untuk transparansi.",
|
||||
bentoComponent: "3d-task-list",
|
||||
items: [
|
||||
title: "Kelola Tabungan Siswa", description: "Input dan lacak tabungan individu setiap siswa dengan mudah. Riwayat transaksi lengkap tersedia untuk transparansi.", bentoComponent: "3d-task-list", title: "Tabungan Siswa", items: [
|
||||
{
|
||||
icon: DollarSign,
|
||||
label: "Input Tabungan",
|
||||
time: "Mingguan",
|
||||
},
|
||||
label: "Input Tabungan", time: "Mingguan"},
|
||||
{
|
||||
icon: Wallet,
|
||||
label: "Lacak Saldo",
|
||||
time: "Real-time",
|
||||
},
|
||||
label: "Lacak Saldo", time: "Real-time"},
|
||||
{
|
||||
icon: History,
|
||||
label: "Riwayat Transaksi",
|
||||
time: "Otomatis",
|
||||
},
|
||||
],
|
||||
cardTitle: "Tabungan Siswa",
|
||||
label: "Riwayat Transaksi", time: "Otomatis"},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Pengumpulan Uang Kas Mingguan",
|
||||
description: "Catat pengumpulan uang kas kelas setiap minggu dengan cepat. Laporan detail membantu Anda memantau target.",
|
||||
bentoComponent: "icon-info-cards",
|
||||
items: [
|
||||
title: "Pengumpulan Uang Kas Mingguan", description: "Catat pengumpulan uang kas kelas setiap minggu dengan cepat. Laporan detail membantu Anda memantau target.", bentoComponent: "icon-info-cards", items: [
|
||||
{
|
||||
icon: Calendar,
|
||||
label: "Jadwal Teratur",
|
||||
value: "Setiap Minggu",
|
||||
},
|
||||
label: "Jadwal Teratur", value: "Setiap Minggu"},
|
||||
{
|
||||
icon: CheckCircle,
|
||||
label: "Status Lunas",
|
||||
value: "Otomatis",
|
||||
},
|
||||
label: "Status Lunas", value: "Otomatis"},
|
||||
{
|
||||
icon: Target,
|
||||
label: "Target Pencapaian",
|
||||
value: "Mudah",
|
||||
label: "Target Pencapaian", value: "Mudah"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Laporan Pengeluaran Akurat", description: "Buat dan pantau laporan pengeluaran kelas dengan kategori yang jelas. Semua transaksi tercatat dan dapat diakses.", bentoComponent: "animated-bar-chart"},
|
||||
{
|
||||
title: "Dashboard Siswa Interaktif", description: "Setiap siswa memiliki dashboard pribadi untuk melihat tabungan, kontribusi kas, dan riwayat transaksi mereka.", bentoComponent: "globe"},
|
||||
{
|
||||
title: "Notifikasi Real-time", description: "Dapatkan peringatan instan mengenai status kas, pengumpulan yang belum tercapai, atau pengeluaran baru.", bentoComponent: "phone", statusIcon: Wifi,
|
||||
alertIcon: Bell,
|
||||
alertTitle: "Peringatan Kas", alertMessage: "Pengumpulan kas minggu ini belum mencapai target.", apps: [
|
||||
{
|
||||
name: "Kas", icon: Wallet,
|
||||
},
|
||||
{
|
||||
name: "Tabungan", icon: PiggyBank,
|
||||
},
|
||||
{
|
||||
name: "Pengeluaran", icon: CreditCard,
|
||||
},
|
||||
{
|
||||
name: "Laporan", icon: FileText,
|
||||
},
|
||||
{
|
||||
name: "Siswa", icon: Users,
|
||||
},
|
||||
{
|
||||
name: "Notifikasi", icon: Bell,
|
||||
},
|
||||
{
|
||||
name: "Pengaturan", icon: Settings,
|
||||
},
|
||||
{
|
||||
name: "Bantuan", icon: HelpCircle,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Laporan Pengeluaran Akurat",
|
||||
description: "Buat dan pantau laporan pengeluaran kelas dengan kategori yang jelas. Semua transaksi tercatat dan dapat diakses.",
|
||||
bentoComponent: "animated-bar-chart",
|
||||
},
|
||||
{
|
||||
title: "Dashboard Siswa Interaktif",
|
||||
description: "Setiap siswa memiliki dashboard pribadi untuk melihat tabungan, kontribusi kas, dan riwayat transaksi mereka.",
|
||||
bentoComponent: "globe",
|
||||
},
|
||||
{
|
||||
title: "Notifikasi Real-time",
|
||||
description: "Dapatkan peringatan instan mengenai status kas, pengumpulan yang belum tercapai, atau pengeluaran baru.",
|
||||
bentoComponent: "phone",
|
||||
statusIcon: "Wifi",
|
||||
alertIcon: "Bell",
|
||||
alertTitle: "Peringatan Kas",
|
||||
alertMessage: "Pengumpulan kas minggu ini belum mencapai target.",
|
||||
apps: [
|
||||
{
|
||||
name: "Kas",
|
||||
icon: Wallet,
|
||||
},
|
||||
{
|
||||
name: "Tabungan",
|
||||
icon: PiggyBank,
|
||||
},
|
||||
{
|
||||
name: "Pengeluaran",
|
||||
icon: CreditCard,
|
||||
},
|
||||
{
|
||||
name: "Laporan",
|
||||
icon: FileText,
|
||||
},
|
||||
{
|
||||
name: "Siswa",
|
||||
icon: Users,
|
||||
},
|
||||
{
|
||||
name: "Notifikasi",
|
||||
icon: Bell,
|
||||
},
|
||||
{
|
||||
name: "Pengaturan",
|
||||
icon: Settings,
|
||||
},
|
||||
{
|
||||
name: "Bantuan",
|
||||
icon: HelpCircle,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Keamanan Data Terjamin",
|
||||
description: "Data keuangan kelas Anda aman bersama kami, dilindungi dengan enkripsi dan sistem keamanan terkini.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: ShieldCheck,
|
||||
title: "Keamanan Data Terjamin", description: "Data keuangan kelas Anda aman bersama kami, dilindungi dengan enkripsi dan sistem keamanan terkini.", bentoComponent: "reveal-icon", icon: ShieldCheck,
|
||||
},
|
||||
]}
|
||||
title="Fitur Unggulan Keuangan Kelas Anda"
|
||||
@@ -206,36 +149,19 @@ export default function LandingPage() {
|
||||
<MetricCardSeven
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
metrics={[
|
||||
{
|
||||
id: "total-savings",
|
||||
value: "Rp 5.000.000",
|
||||
title: "Total Tabungan Siswa",
|
||||
items: [
|
||||
"Terdata",
|
||||
"Aman",
|
||||
"Tumbuh",
|
||||
],
|
||||
id: "total-savings", value: "Rp 5.000.000", title: "Total Tabungan Siswa", items: [
|
||||
"Terdata", "Aman", "Tumbuh"],
|
||||
},
|
||||
{
|
||||
id: "weekly-cash",
|
||||
value: "Rp 250.000",
|
||||
title: "Kas Terkumpul Mingguan",
|
||||
items: [
|
||||
"Target 100%",
|
||||
"Teratur",
|
||||
"Mudah",
|
||||
],
|
||||
id: "weekly-cash", value: "Rp 250.000", title: "Kas Terkumpul Mingguan", items: [
|
||||
"Target 100%", "Teratur", "Mudah"],
|
||||
},
|
||||
{
|
||||
id: "total-expenses",
|
||||
value: "Rp 1.200.000",
|
||||
title: "Total Pengeluaran",
|
||||
items: [
|
||||
"Terlaporkan",
|
||||
"Transparan",
|
||||
"Terkontrol",
|
||||
],
|
||||
id: "total-expenses", value: "Rp 1.200.000", title: "Total Pengeluaran", items: [
|
||||
"Terlaporkan", "Transparan", "Terkontrol"],
|
||||
},
|
||||
]}
|
||||
title="Statistik Keuangan Kelas TITL 2"
|
||||
@@ -249,54 +175,25 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Rina Sari",
|
||||
role: "Ketua Kelas",
|
||||
company: "TITL 2",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BTU7H38Zbe3PO097DVpO1WXqJi/a-smiling-high-school-student-in-a-class-1774512457955-1ea7f42b.png",
|
||||
},
|
||||
id: "1", name: "Rina Sari", role: "Ketua Kelas", company: "TITL 2", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BTU7H38Zbe3PO097DVpO1WXqJi/a-smiling-high-school-student-in-a-class-1774512457955-1ea7f42b.png"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Bapak Anton",
|
||||
role: "Wali Kelas",
|
||||
company: "SMK Teknologi",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BTU7H38Zbe3PO097DVpO1WXqJi/a-friendly-female-teacher-in-a-modern-cl-1774512458600-590f4930.png",
|
||||
},
|
||||
id: "2", name: "Bapak Anton", role: "Wali Kelas", company: "SMK Teknologi", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BTU7H38Zbe3PO097DVpO1WXqJi/a-friendly-female-teacher-in-a-modern-cl-1774512458600-590f4930.png"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Dewi K.",
|
||||
role: "Bendahara Kelas",
|
||||
company: "TITL 2",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BTU7H38Zbe3PO097DVpO1WXqJi/a-diligent-male-student-perhaps-reviewin-1774512460684-f1cd0a6c.png",
|
||||
},
|
||||
id: "3", name: "Dewi K.", role: "Bendahara Kelas", company: "TITL 2", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BTU7H38Zbe3PO097DVpO1WXqJi/a-diligent-male-student-perhaps-reviewin-1774512460684-f1cd0a6c.png"},
|
||||
{
|
||||
id: "4",
|
||||
name: "Ibu Lia",
|
||||
role: "Guru BK",
|
||||
company: "SMK Teknologi",
|
||||
rating: 4,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BTU7H38Zbe3PO097DVpO1WXqJi/a-supportive-school-administrator-or-par-1774512457182-5bf6981e.png",
|
||||
},
|
||||
id: "4", name: "Ibu Lia", role: "Guru BK", company: "SMK Teknologi", rating: 4,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BTU7H38Zbe3PO097DVpO1WXqJi/a-supportive-school-administrator-or-par-1774512457182-5bf6981e.png"},
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
id: "1",
|
||||
label: "Mudah Digunakan",
|
||||
value: "100%",
|
||||
},
|
||||
label: "Mudah Digunakan", value: "100%"},
|
||||
{
|
||||
id: "2",
|
||||
label: "Transparansi",
|
||||
value: "99%",
|
||||
},
|
||||
label: "Transparansi", value: "99%"},
|
||||
{
|
||||
id: "3",
|
||||
label: "Efisiensi Waktu",
|
||||
value: "80%",
|
||||
},
|
||||
label: "Efisiensi Waktu", value: "80%"},
|
||||
]}
|
||||
title="Apa Kata Mereka?"
|
||||
description="Dengar langsung pengalaman pengguna yang telah merasakan manfaat dari aplikasi Keuangan TITL 2."
|
||||
@@ -309,24 +206,15 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Bagaimana cara kerja sistem tabungan siswa?",
|
||||
content: "Siswa dapat menyetorkan tabungan melalui bendahara kelas, yang kemudian akan diinput ke dalam aplikasi. Setiap siswa memiliki riwayat tabungan pribadi yang dapat diakses.",
|
||||
},
|
||||
id: "1", title: "Bagaimana cara kerja sistem tabungan siswa?", content: "Siswa dapat menyetorkan tabungan melalui bendahara kelas, yang kemudian akan diinput ke dalam aplikasi. Setiap siswa memiliki riwayat tabungan pribadi yang dapat diakses."},
|
||||
{
|
||||
id: "2",
|
||||
title: "Apakah data keuangan dapat diakses oleh semua siswa?",
|
||||
content: "Setiap siswa hanya dapat mengakses dashboard pribadi mereka untuk melihat data tabungan dan kontribusi kas. Laporan keseluruhan hanya dapat diakses oleh admin (bendahara/wali kelas).",
|
||||
},
|
||||
id: "2", title: "Apakah data keuangan dapat diakses oleh semua siswa?", content: "Setiap siswa hanya dapat mengakses dashboard pribadi mereka untuk melihat data tabungan dan kontribusi kas. Laporan keseluruhan hanya dapat diakses oleh admin (bendahara/wali kelas)."},
|
||||
{
|
||||
id: "3",
|
||||
title: "Bagaimana jika ada kesalahan dalam input data?",
|
||||
content: "Admin dapat dengan mudah mengedit atau mengoreksi data yang salah melalui antarmuka aplikasi. Semua perubahan akan tercatat dalam riwayat audit.",
|
||||
},
|
||||
id: "3", title: "Bagaimana jika ada kesalahan dalam input data?", content: "Admin dapat dengan mudah mengedit atau mengoreksi data yang salah melalui antarmuka aplikasi. Semua perubahan akan tercatat dalam riwayat audit."},
|
||||
]}
|
||||
title="Pertanyaan Umum"
|
||||
description="Temukan jawaban atas pertanyaan paling sering diajukan mengenai aplikasi Keuangan TITL 2."
|
||||
faqsAnimation="entrance-slide"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -334,14 +222,11 @@ export default function LandingPage() {
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
variant: "plain"}}
|
||||
text="Siap mengelola keuangan kelas Anda dengan lebih baik? Hubungi kami untuk informasi lebih lanjut atau dukungan!"
|
||||
buttons={[
|
||||
{
|
||||
text: "Hubungi Kami",
|
||||
href: "mailto:support@keuangan-titl2.id",
|
||||
},
|
||||
text: "Hubungi Kami", href: "mailto:support@keuangan-titl2.id"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -350,50 +235,31 @@ export default function LandingPage() {
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Fitur",
|
||||
items: [
|
||||
title: "Fitur", items: [
|
||||
{
|
||||
label: "Tabungan Siswa",
|
||||
href: "#fitur",
|
||||
},
|
||||
label: "Tabungan Siswa", href: "#fitur"},
|
||||
{
|
||||
label: "Kas Mingguan",
|
||||
href: "#fitur",
|
||||
},
|
||||
label: "Kas Mingguan", href: "#fitur"},
|
||||
{
|
||||
label: "Pengeluaran",
|
||||
href: "#fitur",
|
||||
},
|
||||
label: "Pengeluaran", href: "#fitur"},
|
||||
{
|
||||
label: "Dashboard Siswa",
|
||||
href: "#fitur",
|
||||
},
|
||||
label: "Dashboard Siswa", href: "#fitur"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Bantuan",
|
||||
items: [
|
||||
title: "Bantuan", items: [
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#faq",
|
||||
},
|
||||
label: "FAQ", href: "#faq"},
|
||||
{
|
||||
label: "Kontak",
|
||||
href: "#kontak",
|
||||
},
|
||||
label: "Kontak", href: "#kontak"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Kebijakan Privasi",
|
||||
href: "#",
|
||||
},
|
||||
label: "Kebijakan Privasi", href: "#"},
|
||||
{
|
||||
label: "Syarat & Ketentuan",
|
||||
href: "#",
|
||||
},
|
||||
label: "Syarat & Ketentuan", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
Reference in New Issue
Block a user