From 314aab2600999ae51b326806a1db9b721b2088e5 Mon Sep 17 00:00:00 2001 From: Yoga Pangestu Date: Tue, 14 Jul 2026 10:12:23 +0700 Subject: [PATCH] Revamp homepage layout and navigation. Replaced the initial content with a structured layout featuring a navbar, hero section, and features section. Integrated homepage data from JSON for dynamic content rendering and improved user experience with enhanced styling and navigation links. --- src/app/page.tsx | 549 ++++++++++++++++++++++++++++++++++++----- src/data/homepage.json | 157 ++++++++++++ 2 files changed, 648 insertions(+), 58 deletions(-) create mode 100644 src/data/homepage.json diff --git a/src/app/page.tsx b/src/app/page.tsx index 3f36f7c..b591d21 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,65 +1,498 @@ -import Image from "next/image"; +import Link from "next/link"; +import { + ShoppingCart, + Package, + BarChart3, + Users, + Receipt, + Smartphone, + ArrowRight, + Check, + Star, + Zap, + Shield, + Clock, +} from "lucide-react"; +import { Button } from "@/components/ui/button"; +import homepageData from "@/data/homepage.json"; -export default function Home() { +const FEATURE_ICONS: Record = { + ShoppingCart, + Package, + BarChart3, + Users, + Receipt, + Smartphone, +}; + +export default function HomePage() { return ( -
-
- Next.js logo -
-

- To get started, edit the page.tsx file. -

-

- Looking for a starting point or more instructions? Head over to{" "} - - Templates - {" "} - or the{" "} - - Learning - {" "} - center. -

+
+ {/* Navbar */} + + + {/* Hero Section */} +
+
+
+
+ + {homepageData.hero.tag} +
+ +

+ {homepageData.hero.title} +

+ +

+ {homepageData.hero.description} +

+ +
+ + + + + + +
+ + {/* Stats */} +
+ {homepageData.hero.stats.map((stat) => ( +
+

{stat.value}

+

{stat.label}

+
+ ))} +
+
-
+ + {/* Background decoration */} +
+
+
+ + + {/* Features Section */} +
+
+
+
+ {homepageData.features.tag} +
+

+ {homepageData.features.title} +

+

+ {homepageData.features.description} +

+
+ +
+ {homepageData.features.items.map((feature) => { + const Icon = FEATURE_ICONS[feature.icon]; + return ( +
+
+ {Icon && } +
+

+ {feature.title} +

+

+ {feature.description} +

+
+ ); + })} +
+
+
+ + {/* Dashboard Preview Section */} +
+
+
+
+
+ {homepageData.dashboardPreview.tag} +
+

+ {homepageData.dashboardPreview.title} +

+

+ {homepageData.dashboardPreview.description} +

+ +
+ {homepageData.dashboardPreview.highlights.map((item) => ( +
+
+ +
+ {item} +
+ ))} +
+ + + + +
+ + {/* Dashboard Mockup */} +
+
+ {/* Mini Header */} +
+
+
+
+
+
+
+
+ + {/* KPI Cards */} +
+ {[ + { label: "Penjualan", value: "Rp 12.4M", change: "+12.5%" }, + { label: "Transaksi", value: "1.248", change: "+8.2%" }, + { label: "Produk", value: "3.456", change: "-2.4%" }, + { label: "Pelanggan", value: "567", change: "+24.3%" }, + ].map((kpi) => ( +
+

{kpi.label}

+

{kpi.value}

+

+ {kpi.change} +

+
+ ))} +
+ + {/* Chart Mockup */} +
+
+ {[40, 55, 45, 65, 58, 72, 68, 78, 82, 75, 88, 95].map((h, i) => ( +
+ ))} +
+
+ + {/* Bottom Widgets */} +
+
+
+
+
+
+
+
+ {[100, 70, 45, 25].map((w, i) => ( +
+
+
+ ))} +
+
+
+ {[1, 2, 3, 4].map((i) => ( +
+
+
+
+
+
+ ))} +
+
+
+ + {/* Floating badge */} +
+ Real-time +
+
+
+
+
+ + {/* Benefits */} +
+
+
+ {[ + { + icon: Zap, + title: "Cepat & Responsif", + description: "Performa tinggi dengan teknologi modern. Transaksi diproses dalam hitungan detik." + }, + { + icon: Shield, + title: "Aman & Terpercaya", + description: "Data terenkripsi dengan backup otomatis. Keamanan data bisnis Anda adalah prioritas kami." + }, + { + icon: Clock, + title: "Hemat Waktu", + description: "Otomasi proses bisnis sehingga Anda bisa fokus mengembangkan usaha." + }, + ].map((benefit) => ( +
+
+ +
+

{benefit.title}

+

{benefit.description}

+
+ ))} +
+
+
+ + {/* Pricing Section */} +
+
+
+
+ {homepageData.pricing.tag} +
+

+ {homepageData.pricing.title} +

+

+ {homepageData.pricing.description} +

+
+ +
+ {homepageData.pricing.plans.map((plan) => ( +
+ {plan.popular && ( +
+ Populer +
+ )} + +
+

{plan.name}

+
+ {plan.price} + {plan.period !== "selamanya" && ( + {plan.period} + )} +
+

{plan.description}

+
+ +
+ {plan.features.map((feature) => ( +
+
+ +
+ {feature} +
+ ))} +
+ + + + +
+ ))} +
+
+
+ + {/* Testimonials */} +
+
+
+
+ {homepageData.testimonials.tag} +
+

+ {homepageData.testimonials.title} +

+
+ +
+ {homepageData.testimonials.items.map((item) => ( +
+
+ {[1, 2, 3, 4, 5].map((star) => ( + + ))} +
+

+ “{item.content}” +

+
+
+ {item.avatar} +
+
+

{item.name}

+

{item.role}

+
+
+
+ ))} +
+
+
+ + {/* CTA Section */} +
+
+
+

+ {homepageData.cta.title} +

+

+ {homepageData.cta.description} +

+ + + +
+
+
+ + {/* Footer */} +
); } diff --git a/src/data/homepage.json b/src/data/homepage.json new file mode 100644 index 0000000..cb156aa --- /dev/null +++ b/src/data/homepage.json @@ -0,0 +1,157 @@ +{ + "hero": { + "tag": "Platform Bisnis Modern", + "title": "Kelola Bisnis Anda\nLebih Mudah & Efisien", + "description": "Profitra adalah platform manajemen bisnis all-in-one dengan POS, inventori, laporan penjualan, dan analitik real-time. Dirancang untuk UMKM Indonesia.", + "cta": { + "primary": "Mulai Gratis", + "secondary": "Lihat Demo" + }, + "stats": [ + { "value": "10.000+", "label": "Bisnis Aktif" }, + { "value": "500rb+", "label": "Transaksi/Bulan" }, + { "value": "99.9%", "label": "Uptime" } + ] + }, + "features": { + "tag": "Fitur Unggulan", + "title": "Semua yang Anda Butuhkan\n dalam Satu Platform", + "description": "Dari kasir hingga laporan keuangan, Profitra menyediakan semua tools untuk mengelola bisnis Anda secara efisien.", + "items": [ + { + "icon": "ShoppingCart", + "title": "Point of Sale", + "description": "Kasir cepat dengan dukungan barcode, pembayaran split, dan cetak struk otomatis." + }, + { + "icon": "Package", + "title": "Manajemen Inventori", + "description": "Pantau stok real-time, atur stok minimum, dan dapatkan notifikasi saat stok menipis." + }, + { + "icon": "BarChart3", + "title": "Laporan Penjualan", + "description": "Analitik penjualan lengkap dengan grafik interaktif dan export ke Excel/PDF." + }, + { + "icon": "Users", + "title": "Manajemen Pelanggan", + "description": "Database pelanggan, riwayat transaksi, dan program loyalitas terintegrasi." + }, + { + "icon": "Receipt", + "title": "Pengeluaran & Hutang", + "description": "Catat pengeluaran, kelola hutang piutang, dan pantau arus kas bisnis Anda." + }, + { + "icon": "Smartphone", + "title": "Akses Multi-Device", + "description": "Akses dari laptop, tablet, atau smartphone kapan saja dan di mana saja." + } + ] + }, + "dashboardPreview": { + "tag": "Dashboard Analitik", + "title": "Pantau Bisnis Anda\nSecara Real-Time", + "description": "Dashboard interaktif dengan KPI cards, grafik penjualan, kategori produk, dan transaksi terakhir dalam satu tampilan.", + "highlights": [ + "KPI Cards dengan indikator tren", + "Grafik penjualan bulanan", + "Kategori produk & donut chart", + "Transaksi terakhir & produk terlaris" + ] + }, + "pricing": { + "tag": "Harga", + "title": "Pilih Paket Sesuai\nKebutuhan Bisnis Anda", + "description": "Mulai gratis dan upgrade sesuai pertumbuhan bisnis Anda.", + "plans": [ + { + "name": "Starter", + "price": "Gratis", + "period": "selamanya", + "description": "Untuk bisnis yang baru memulai", + "features": [ + "1 Outlet", + "1 Pengguna", + "Produk unlimited", + "Laporan dasar", + "Support email" + ], + "cta": "Mulai Gratis", + "popular": false + }, + { + "name": "Business", + "price": "Rp 99.000", + "period": "/bulan", + "description": "Untuk bisnis yang sedang berkembang", + "features": [ + "3 Outlet", + "5 Pengguna", + "Produk unlimited", + "Laporan lengkap", + "Multi-gudang", + "Support prioritas" + ], + "cta": "Coba 14 Hari Gratis", + "popular": true + }, + { + "name": "Enterprise", + "price": "Rp 299.000", + "period": "/bulan", + "description": "Untuk bisnis berskala besar", + "features": [ + "Outlet unlimited", + "Pengguna unlimited", + "Produk unlimited", + "Analitik advanced", + "API akses", + "Dedicated support", + "Custom branding" + ], + "cta": "Hubungi Sales", + "popular": false + } + ] + }, + "testimonials": { + "tag": "Testimoni", + "title": "Dipercaya oleh\nRibuan Bisnis di Indonesia", + "items": [ + { + "name": "Andi Wijaya", + "role": "Pemilik Warung Kopi", + "content": "Profitra sangat membantu mengelola inventori dan penjualan. Sekarang saya bisa pantau bisnis dari HP kapan saja.", + "avatar": "AW" + }, + { + "name": "Siti Nurhaliza", + "role": "Manajer Minimarket", + "content": "Laporan penjualan lengkap dan real-time. Sangat memudahkan pengambilan keputusan bisnis.", + "avatar": "SN" + }, + { + "name": "Budi Santoso", + "role": "Owner Restoran", + "content": "Fitur POS-nya cepat dan mudah digunakan. Karyawan baru bisa langsung pakai tanpa training lama.", + "avatar": "BS" + } + ] + }, + "cta": { + "title": "Siap Mengelola Bisnis\nLebih Efisien?", + "description": "Bergabung dengan 10.000+ bisnis yang sudah menggunakan Profitra. Mulai gratis sekarang, tidak perlu kartu kredit.", + "button": "Mulai Sekarang" + }, + "footer": { + "description": "Platform manajemen bisnis modern untuk UMKM Indonesia.", + "links": { + "Produk": ["Point of Sale", "Inventori", "Laporan", "Pelanggan"], + "Perusahaan": ["Tentang Kami", "Karir", "Blog", "Kontak"], + "Bantuan": ["Dokumentasi", "FAQ", "Support", "Status"] + }, + "copyright": "2024 Profitra. Semua hak dilindungi." + } +}