110 lines
4.0 KiB
TypeScript
110 lines
4.0 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
|
|
function formatSubmittedAt() {
|
|
const now = new Date();
|
|
const day = now.toLocaleDateString("en-GB", {
|
|
day: "2-digit",
|
|
month: "short",
|
|
});
|
|
const time = now.toLocaleTimeString("en-GB", {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
});
|
|
|
|
return `${day}, ${time}`;
|
|
}
|
|
|
|
export default function SuccessPage() {
|
|
const submittedAt = formatSubmittedAt();
|
|
|
|
return (
|
|
<div className="min-h-screen bg-surface flex items-center justify-center p-6">
|
|
<div className="max-w-2xl w-full">
|
|
{/* Badge */}
|
|
<div className="inline-flex items-center gap-2 px-4 py-1.5 bg-primary/10 rounded-full mb-8">
|
|
<span className="w-2 h-2 rounded-full bg-primary" />
|
|
<span className="text-xs font-black uppercase tracking-widest text-primary">
|
|
Submission Complete
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex flex-col md:flex-row gap-12 items-start md:items-center">
|
|
{/* Left: Text */}
|
|
<div className="flex-1">
|
|
<h1 className="font-headline font-black text-5xl md:text-6xl text-on-surface leading-tight tracking-tight mb-6">
|
|
Data Submitted{" "}
|
|
<span className="text-primary italic">Successfully</span>
|
|
</h1>
|
|
<p className="text-on-surface-variant leading-relaxed mb-8 max-w-sm">
|
|
Profil UMKM institusional Anda telah tercatat dan sedang ditinjau
|
|
oleh tim verifikasi kami. Setelah disetujui, Anda akan mendapat akses
|
|
penuh ke protokol{" "}
|
|
<span className="text-tertiary font-semibold">Trading Desk Alpha</span>.
|
|
Lanjutkan ke dashboard untuk memantau status Anda.
|
|
</p>
|
|
|
|
<Link
|
|
href="/dashboard"
|
|
className="inline-flex items-center gap-3 editorial-gradient text-on-primary font-headline font-bold px-8 py-4 rounded-xl shadow-lg shadow-primary/20 hover:scale-[1.02] active:scale-95 transition-all text-lg"
|
|
>
|
|
Lanjutkan ke Dashboard
|
|
<span className="material-symbols-outlined">arrow_forward</span>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Right: Visual */}
|
|
<div className="relative shrink-0">
|
|
{/* Red card */}
|
|
<div className="w-48 h-48 bg-primary rounded-2xl flex items-center justify-center shadow-xl shadow-primary/30">
|
|
<div className="w-20 h-20 bg-white rounded-full flex items-center justify-center shadow-md">
|
|
<span
|
|
className="material-symbols-outlined text-primary text-4xl"
|
|
style={{ fontVariationSettings: "'FILL' 1" }}
|
|
>
|
|
check
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Timeline */}
|
|
<div className="mt-20 flex items-start gap-0">
|
|
{/* Submitted */}
|
|
<div className="flex-1">
|
|
<div className="h-0.5 bg-primary mb-3" />
|
|
<p className="text-[10px] font-black uppercase tracking-widest text-primary">
|
|
Submitted
|
|
</p>
|
|
<p className="text-xs text-on-surface-variant font-medium mt-0.5">
|
|
{submittedAt}
|
|
</p>
|
|
</div>
|
|
{/* Verification */}
|
|
<div className="flex-1">
|
|
<div className="h-0.5 bg-secondary mb-3" />
|
|
<p className="text-[10px] font-black uppercase tracking-widest text-secondary">
|
|
Verification
|
|
</p>
|
|
<p className="text-xs text-on-surface-variant font-medium mt-0.5">
|
|
In Progress
|
|
</p>
|
|
</div>
|
|
{/* Approval */}
|
|
<div className="flex-1">
|
|
<div className="h-0.5 bg-outline-variant mb-3" />
|
|
<p className="text-[10px] font-black uppercase tracking-widest text-outline">
|
|
Approval
|
|
</p>
|
|
<p className="text-xs text-on-surface-variant font-medium mt-0.5">
|
|
Pending Review
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|