From b23a1299e2a301b339b938aedab2476798a0335e Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Thu, 26 Mar 2026 08:09:22 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 312 ++++++++++++++---------------------------------
 1 file changed, 89 insertions(+), 223 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index db7a294..c53019a 100644
--- a/src/app/page.tsx
+++ b/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: "#"},
           ],
         },
       ]}