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.
This commit is contained in:
Yoga Pangestu
parent
0416e9191f
commit
314aab2600
549
src/app/page.tsx
549
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<string, React.ElementType> = {
|
||||
ShoppingCart,
|
||||
Package,
|
||||
BarChart3,
|
||||
Users,
|
||||
Receipt,
|
||||
Smartphone,
|
||||
};
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
||||
<main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={100}
|
||||
height={20}
|
||||
priority
|
||||
/>
|
||||
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
|
||||
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
|
||||
To get started, edit the page.tsx file.
|
||||
</h1>
|
||||
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
|
||||
Looking for a starting point or more instructions? Head over to{" "}
|
||||
<a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Templates
|
||||
</a>{" "}
|
||||
or the{" "}
|
||||
<a
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Learning
|
||||
</a>{" "}
|
||||
center.
|
||||
</p>
|
||||
<div className="min-h-screen bg-white">
|
||||
{/* Navbar */}
|
||||
<nav className="sticky top-0 z-50 border-b border-neutral-100 bg-white/80 backdrop-blur-md">
|
||||
<div className="mx-auto max-w-6xl flex items-center justify-between h-[72px] px-6">
|
||||
<Link href="/" className="flex items-center gap-3">
|
||||
<div className="w-9 h-9 rounded-md bg-neutral-900 flex items-center justify-center">
|
||||
<span className="text-white font-bold text-sm">P</span>
|
||||
</div>
|
||||
<span className="text-lg font-semibold tracking-tight text-neutral-900">
|
||||
Profitra
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
<div className="hidden md:flex items-center gap-8">
|
||||
<a href="#features" className="text-sm text-neutral-500 hover:text-neutral-900 transition-colors">
|
||||
Fitur
|
||||
</a>
|
||||
<a href="#pricing" className="text-sm text-neutral-500 hover:text-neutral-900 transition-colors">
|
||||
Harga
|
||||
</a>
|
||||
<a href="#testimonials" className="text-sm text-neutral-500 hover:text-neutral-900 transition-colors">
|
||||
Testimoni
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<Link href="/onboarding">
|
||||
<Button variant="ghost" size="sm" className="text-neutral-600 hover:text-neutral-900">
|
||||
Masuk
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/onboarding">
|
||||
<Button size="sm" className="bg-neutral-900 text-white hover:bg-neutral-800 rounded-md h-10">
|
||||
Mulai Gratis
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Deploy Now
|
||||
</a>
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Documentation
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative overflow-hidden">
|
||||
<div className="mx-auto max-w-6xl px-6 pt-20 pb-24 md:pt-28 md:pb-32">
|
||||
<div className="flex flex-col items-center text-center max-w-3xl mx-auto">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-neutral-100 text-neutral-600 text-xs font-medium mb-6">
|
||||
<Zap className="size-3" />
|
||||
{homepageData.hero.tag}
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-neutral-900 tracking-tight leading-tight whitespace-pre-line">
|
||||
{homepageData.hero.title}
|
||||
</h1>
|
||||
|
||||
<p className="mt-6 text-lg text-neutral-500 max-w-xl leading-relaxed">
|
||||
{homepageData.hero.description}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row items-center gap-3 mt-10">
|
||||
<Link href="/onboarding">
|
||||
<Button size="lg" className="bg-neutral-900 text-white hover:bg-neutral-800 rounded-md h-12 px-8 gap-2">
|
||||
{homepageData.hero.cta.primary}
|
||||
<ArrowRight className="size-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/dashboard">
|
||||
<Button variant="outline" size="lg" className="border-neutral-200 text-neutral-700 hover:bg-neutral-50 rounded-md h-12 px-8">
|
||||
{homepageData.hero.cta.secondary}
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="flex items-center gap-12 mt-16 pt-8 border-t border-neutral-100">
|
||||
{homepageData.hero.stats.map((stat) => (
|
||||
<div key={stat.label} className="text-center">
|
||||
<p className="text-2xl font-bold text-neutral-900">{stat.value}</p>
|
||||
<p className="text-sm text-neutral-500 mt-1">{stat.label}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Background decoration */}
|
||||
<div className="absolute inset-0 -z-10">
|
||||
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[600px] bg-gradient-to-b from-neutral-50 to-transparent rounded-full blur-3xl opacity-60" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Section */}
|
||||
<section id="features" className="py-20 md:py-28 bg-neutral-50">
|
||||
<div className="mx-auto max-w-6xl px-6">
|
||||
<div className="text-center max-w-2xl mx-auto mb-16">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white text-neutral-600 text-xs font-medium mb-4 border border-neutral-100">
|
||||
{homepageData.features.tag}
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-neutral-900 tracking-tight whitespace-pre-line">
|
||||
{homepageData.features.title}
|
||||
</h2>
|
||||
<p className="mt-4 text-neutral-500 leading-relaxed">
|
||||
{homepageData.features.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
|
||||
{homepageData.features.items.map((feature) => {
|
||||
const Icon = FEATURE_ICONS[feature.icon];
|
||||
return (
|
||||
<div
|
||||
key={feature.title}
|
||||
className="bg-white rounded-xl p-6 border border-neutral-100 hover:border-neutral-200 transition-colors"
|
||||
style={{ boxShadow: '0 1px 2px rgba(0,0,0,.05), 0 4px 10px rgba(0,0,0,.04)' }}
|
||||
>
|
||||
<div className="w-10 h-10 rounded-lg bg-neutral-100 flex items-center justify-center mb-4">
|
||||
{Icon && <Icon className="size-5 text-neutral-700" />}
|
||||
</div>
|
||||
<h3 className="text-base font-semibold text-neutral-900 mb-2">
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className="text-sm text-neutral-500 leading-relaxed">
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Dashboard Preview Section */}
|
||||
<section className="py-20 md:py-28 bg-white">
|
||||
<div className="mx-auto max-w-6xl px-6">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<div>
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-neutral-100 text-neutral-600 text-xs font-medium mb-4">
|
||||
{homepageData.dashboardPreview.tag}
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-neutral-900 tracking-tight whitespace-pre-line">
|
||||
{homepageData.dashboardPreview.title}
|
||||
</h2>
|
||||
<p className="mt-4 text-neutral-500 leading-relaxed">
|
||||
{homepageData.dashboardPreview.description}
|
||||
</p>
|
||||
|
||||
<div className="mt-8 space-y-3">
|
||||
{homepageData.dashboardPreview.highlights.map((item) => (
|
||||
<div key={item} className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-neutral-900 flex items-center justify-center shrink-0">
|
||||
<Check className="size-3 text-white" />
|
||||
</div>
|
||||
<span className="text-sm text-neutral-700">{item}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Link href="/dashboard" className="mt-8 inline-block">
|
||||
<Button variant="outline" className="border-neutral-200 text-neutral-700 hover:bg-neutral-50 rounded-md h-10 gap-2">
|
||||
Lihat Dashboard
|
||||
<ArrowRight className="size-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Dashboard Mockup */}
|
||||
<div className="relative">
|
||||
<div
|
||||
className="bg-white rounded-xl border border-neutral-200 p-5"
|
||||
style={{ boxShadow: '0 10px 30px rgba(0,0,0,.08)' }}
|
||||
>
|
||||
{/* Mini Header */}
|
||||
<div className="flex items-center justify-between mb-5">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-neutral-200" />
|
||||
<div className="w-3 h-3 rounded-full bg-neutral-200" />
|
||||
<div className="w-3 h-3 rounded-full bg-neutral-200" />
|
||||
</div>
|
||||
<div className="w-20 h-3 rounded bg-neutral-100" />
|
||||
</div>
|
||||
|
||||
{/* KPI Cards */}
|
||||
<div className="grid grid-cols-2 gap-3 mb-4">
|
||||
{[
|
||||
{ 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) => (
|
||||
<div key={kpi.label} className="bg-neutral-50 rounded-lg p-3">
|
||||
<p className="text-[10px] text-neutral-400">{kpi.label}</p>
|
||||
<p className="text-sm font-bold text-neutral-900 mt-0.5">{kpi.value}</p>
|
||||
<p className={`text-[10px] font-medium mt-0.5 ${kpi.change.startsWith('+') ? 'text-green-600' : 'text-red-500'}`}>
|
||||
{kpi.change}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Chart Mockup */}
|
||||
<div className="bg-neutral-50 rounded-lg p-4 mb-4">
|
||||
<div className="flex items-end gap-1.5 h-24">
|
||||
{[40, 55, 45, 65, 58, 72, 68, 78, 82, 75, 88, 95].map((h, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex-1 bg-neutral-700 rounded-t-sm"
|
||||
style={{ height: `${h}%` }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Widgets */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="bg-neutral-50 rounded-lg p-3">
|
||||
<div className="flex items-center gap-1.5 mb-2">
|
||||
<div className="w-2 h-2 rounded-full bg-neutral-900" />
|
||||
<div className="w-2 h-2 rounded-full bg-neutral-500" />
|
||||
<div className="w-2 h-2 rounded-full bg-neutral-300" />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
{[100, 70, 45, 25].map((w, i) => (
|
||||
<div key={i} className="h-1.5 rounded-full bg-neutral-200">
|
||||
<div className="h-full rounded-full bg-neutral-700" style={{ width: `${w}%` }} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-neutral-50 rounded-lg p-3">
|
||||
{[1, 2, 3, 4].map((i) => (
|
||||
<div key={i} className="flex items-center gap-2 py-1">
|
||||
<div className="w-5 h-5 rounded bg-neutral-200" />
|
||||
<div className="flex-1">
|
||||
<div className="h-1.5 w-full rounded bg-neutral-200" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Floating badge */}
|
||||
<div className="absolute -top-3 -right-3 bg-neutral-900 text-white text-xs font-medium px-3 py-1.5 rounded-full shadow-lg">
|
||||
Real-time
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Benefits */}
|
||||
<section className="py-20 md:py-28 bg-neutral-50">
|
||||
<div className="mx-auto max-w-6xl px-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{[
|
||||
{
|
||||
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) => (
|
||||
<div key={benefit.title} className="text-center">
|
||||
<div className="w-12 h-12 rounded-xl bg-white border border-neutral-100 flex items-center justify-center mx-auto mb-4" style={{ boxShadow: '0 1px 2px rgba(0,0,0,.05), 0 4px 10px rgba(0,0,0,.04)' }}>
|
||||
<benefit.icon className="size-6 text-neutral-700" />
|
||||
</div>
|
||||
<h3 className="text-base font-semibold text-neutral-900 mb-2">{benefit.title}</h3>
|
||||
<p className="text-sm text-neutral-500 leading-relaxed max-w-xs mx-auto">{benefit.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Pricing Section */}
|
||||
<section id="pricing" className="py-20 md:py-28 bg-white">
|
||||
<div className="mx-auto max-w-6xl px-6">
|
||||
<div className="text-center max-w-2xl mx-auto mb-16">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-neutral-100 text-neutral-600 text-xs font-medium mb-4">
|
||||
{homepageData.pricing.tag}
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-neutral-900 tracking-tight whitespace-pre-line">
|
||||
{homepageData.pricing.title}
|
||||
</h2>
|
||||
<p className="mt-4 text-neutral-500 leading-relaxed">
|
||||
{homepageData.pricing.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-5">
|
||||
{homepageData.pricing.plans.map((plan) => (
|
||||
<div
|
||||
key={plan.name}
|
||||
className={`relative bg-white rounded-xl p-6 border transition-colors ${
|
||||
plan.popular
|
||||
? "border-neutral-900"
|
||||
: "border-neutral-100 hover:border-neutral-200"
|
||||
}`}
|
||||
style={{ boxShadow: '0 1px 2px rgba(0,0,0,.05), 0 4px 10px rgba(0,0,0,.04)' }}
|
||||
>
|
||||
{plan.popular && (
|
||||
<div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-neutral-900 text-white text-xs font-medium px-3 py-1 rounded-full">
|
||||
Populer
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mb-6">
|
||||
<h3 className="text-base font-semibold text-neutral-900">{plan.name}</h3>
|
||||
<div className="mt-3 flex items-baseline gap-1">
|
||||
<span className="text-3xl font-bold text-neutral-900">{plan.price}</span>
|
||||
{plan.period !== "selamanya" && (
|
||||
<span className="text-sm text-neutral-400">{plan.period}</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="mt-2 text-sm text-neutral-500">{plan.description}</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 mb-8">
|
||||
{plan.features.map((feature) => (
|
||||
<div key={feature} className="flex items-center gap-3">
|
||||
<div className="w-4 h-4 rounded-full bg-neutral-100 flex items-center justify-center shrink-0">
|
||||
<Check className="size-2.5 text-neutral-700" />
|
||||
</div>
|
||||
<span className="text-sm text-neutral-600">{feature}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Link href="/onboarding">
|
||||
<Button
|
||||
variant={plan.popular ? "default" : "outline"}
|
||||
className={`w-full rounded-md h-10 ${
|
||||
plan.popular
|
||||
? "bg-neutral-900 text-white hover:bg-neutral-800"
|
||||
: "border-neutral-200 text-neutral-700 hover:bg-neutral-50"
|
||||
}`}
|
||||
>
|
||||
{plan.cta}
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Testimonials */}
|
||||
<section id="testimonials" className="py-20 md:py-28 bg-neutral-50">
|
||||
<div className="mx-auto max-w-6xl px-6">
|
||||
<div className="text-center max-w-2xl mx-auto mb-16">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white text-neutral-600 text-xs font-medium mb-4 border border-neutral-100">
|
||||
{homepageData.testimonials.tag}
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-neutral-900 tracking-tight whitespace-pre-line">
|
||||
{homepageData.testimonials.title}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-5">
|
||||
{homepageData.testimonials.items.map((item) => (
|
||||
<div
|
||||
key={item.name}
|
||||
className="bg-white rounded-xl p-6 border border-neutral-100"
|
||||
style={{ boxShadow: '0 1px 2px rgba(0,0,0,.05), 0 4px 10px rgba(0,0,0,.04)' }}
|
||||
>
|
||||
<div className="flex items-center gap-1 mb-4">
|
||||
{[1, 2, 3, 4, 5].map((star) => (
|
||||
<Star key={star} className="size-4 fill-neutral-900 text-neutral-900" />
|
||||
))}
|
||||
</div>
|
||||
<p className="text-sm text-neutral-600 leading-relaxed mb-6">
|
||||
“{item.content}”
|
||||
</p>
|
||||
<div className="flex items-center gap-3 pt-4 border-t border-neutral-100">
|
||||
<div className="w-9 h-9 rounded-full bg-neutral-200 flex items-center justify-center">
|
||||
<span className="text-xs font-semibold text-neutral-600">{item.avatar}</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-neutral-900">{item.name}</p>
|
||||
<p className="text-xs text-neutral-500">{item.role}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-20 md:py-28 bg-neutral-900">
|
||||
<div className="mx-auto max-w-6xl px-6">
|
||||
<div className="text-center max-w-2xl mx-auto">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-white tracking-tight whitespace-pre-line">
|
||||
{homepageData.cta.title}
|
||||
</h2>
|
||||
<p className="mt-4 text-neutral-400 leading-relaxed">
|
||||
{homepageData.cta.description}
|
||||
</p>
|
||||
<Link href="/onboarding" className="mt-8 inline-block">
|
||||
<Button size="lg" className="bg-white text-neutral-900 hover:bg-neutral-100 rounded-md h-12 px-8 gap-2">
|
||||
{homepageData.cta.button}
|
||||
<ArrowRight className="size-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="py-12 bg-white border-t border-neutral-100">
|
||||
<div className="mx-auto max-w-6xl px-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-5 gap-8 mb-12">
|
||||
{/* Brand */}
|
||||
<div className="md:col-span-2">
|
||||
<Link href="/" className="flex items-center gap-3 mb-4">
|
||||
<div className="w-9 h-9 rounded-md bg-neutral-900 flex items-center justify-center">
|
||||
<span className="text-white font-bold text-sm">P</span>
|
||||
</div>
|
||||
<span className="text-lg font-semibold tracking-tight text-neutral-900">
|
||||
Profitra
|
||||
</span>
|
||||
</Link>
|
||||
<p className="text-sm text-neutral-500 leading-relaxed max-w-xs">
|
||||
{homepageData.footer.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Links */}
|
||||
{Object.entries(homepageData.footer.links).map(([category, links]) => (
|
||||
<div key={category}>
|
||||
<h4 className="text-sm font-semibold text-neutral-900 mb-4">{category}</h4>
|
||||
<ul className="space-y-2.5">
|
||||
{links.map((link) => (
|
||||
<li key={link}>
|
||||
<a href="#" className="text-sm text-neutral-500 hover:text-neutral-900 transition-colors">
|
||||
{link}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="pt-8 border-t border-neutral-100 flex flex-col sm:flex-row items-center justify-between gap-4">
|
||||
<p className="text-sm text-neutral-400">
|
||||
© {homepageData.footer.copyright}
|
||||
</p>
|
||||
<div className="flex items-center gap-6">
|
||||
<a href="#" className="text-sm text-neutral-400 hover:text-neutral-900 transition-colors">
|
||||
Kebijakan Privasi
|
||||
</a>
|
||||
<a href="#" className="text-sm text-neutral-400 hover:text-neutral-900 transition-colors">
|
||||
Syarat & Ketentuan
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
157
src/data/homepage.json
Normal file
157
src/data/homepage.json
Normal file
@ -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."
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user