117 lines
4.6 KiB
TypeScript
117 lines
4.6 KiB
TypeScript
import Image from "next/image"
|
|
import { LoginForm } from "@/components/login-form"
|
|
|
|
export default function Page() {
|
|
return (
|
|
<main className="flex min-h-svh w-full">
|
|
{/* Left: hero / map */}
|
|
<section className="relative hidden w-1/2 overflow-hidden lg:block">
|
|
<Image
|
|
src="/images/map-bg.png"
|
|
alt="Visualisasi peta analisis spasial"
|
|
fill
|
|
priority
|
|
className="object-cover"
|
|
/>
|
|
{/* Layered red overlay for elegant depth */}
|
|
<div
|
|
aria-hidden
|
|
className="absolute inset-0 bg-gradient-to-br from-[oklch(0.42_0.2_27/0.85)] via-[oklch(0.32_0.15_25/0.8)] to-[oklch(0.18_0.06_25/0.92)]"
|
|
/>
|
|
{/* Fine grid texture */}
|
|
<div
|
|
aria-hidden
|
|
className="absolute inset-0 opacity-[0.06]"
|
|
style={{
|
|
backgroundImage:
|
|
"linear-gradient(to right, white 1px, transparent 1px), linear-gradient(to bottom, white 1px, transparent 1px)",
|
|
backgroundSize: "52px 52px",
|
|
}}
|
|
/>
|
|
|
|
{/* Content */}
|
|
<div className="relative z-10 flex h-full flex-col justify-between p-12 xl:p-16">
|
|
{/* Top badge */}
|
|
<div className="flex items-center gap-2.5">
|
|
<div className="flex h-9 w-9 items-center justify-center rounded-xl bg-white/15 backdrop-blur-sm ring-1 ring-white/25">
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
className="h-5 w-5 text-white"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
aria-hidden
|
|
>
|
|
<path d="M12 21s-7-5.6-7-11a7 7 0 1 1 14 0c0 5.4-7 11-7 11Z" />
|
|
<circle cx="12" cy="10" r="2.5" />
|
|
</svg>
|
|
</div>
|
|
<span className="font-heading text-sm font-bold tracking-wide text-white">
|
|
WebGIS Geospasial
|
|
</span>
|
|
</div>
|
|
|
|
{/* Headline */}
|
|
<div className="relative max-w-xl">
|
|
{/* glowing radial gradient behind headline */}
|
|
<div
|
|
aria-hidden
|
|
className="pointer-events-none absolute -left-10 top-8 -z-10 h-72 w-[34rem] -translate-y-4"
|
|
style={{
|
|
background:
|
|
"radial-gradient(closest-side, rgba(255,255,255,0.32), rgba(255,120,120,0.12), transparent)",
|
|
filter: "blur(8px)",
|
|
}}
|
|
/>
|
|
<div className="mb-5 inline-flex items-center gap-2 rounded-full bg-white/12 px-3.5 py-1.5 text-xs font-semibold text-white/90 ring-1 ring-white/20 backdrop-blur-sm">
|
|
<span className="h-1.5 w-1.5 rounded-full bg-white" />
|
|
Platform Analisis Data Spasial
|
|
</div>
|
|
<h1 className="font-heading text-4xl font-extrabold leading-[1.1] tracking-tight text-white text-balance xl:text-5xl">
|
|
Analisis Spasial Pengentasan Kemiskinan
|
|
</h1>
|
|
<p className="mt-5 max-w-md text-base leading-relaxed text-white/80 text-pretty">
|
|
Petakan, pantau, dan analisis indikator kemiskinan secara geospasial untuk
|
|
pengambilan keputusan kebijakan yang tepat sasaran dan berbasis data.
|
|
</p>
|
|
|
|
{/* Mini stats */}
|
|
<div className="mt-10 grid grid-cols-3 gap-4 border-t border-white/15 pt-7">
|
|
{[
|
|
{ v: "514", l: "Kabupaten/Kota" },
|
|
{ v: "34", l: "Provinsi" },
|
|
{ v: "99.9%", l: "Akurasi Data" },
|
|
].map((s) => (
|
|
<div key={s.l}>
|
|
<p className="font-heading text-2xl font-bold text-white">{s.v}</p>
|
|
<p className="mt-1 text-xs font-medium text-white/65">{s.l}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-xs font-medium text-white/55">
|
|
Data terintegrasi · Pembaruan berkala · Aman & terenkripsi
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Right: form */}
|
|
<section className="relative flex w-full items-center justify-center bg-background px-6 py-12 sm:px-10 lg:w-1/2">
|
|
{/* soft ambient accents */}
|
|
<div
|
|
aria-hidden
|
|
className="pointer-events-none absolute right-0 top-0 h-72 w-72 rounded-full bg-primary/8 blur-3xl"
|
|
/>
|
|
<div
|
|
aria-hidden
|
|
className="pointer-events-none absolute bottom-0 left-0 h-72 w-72 rounded-full bg-accent/40 blur-3xl"
|
|
/>
|
|
<LoginForm />
|
|
</section>
|
|
</main>
|
|
)
|
|
}
|