Upload perdana untuk deploy
This commit is contained in:
@@ -0,0 +1,130 @@
|
||||
@import 'tailwindcss';
|
||||
@import 'tw-animate-css';
|
||||
@import 'shadcn/tailwind.css';
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme inline {
|
||||
--font-heading: var(--font-jakarta), 'Plus Jakarta Sans Fallback';
|
||||
--font-sans: var(--font-jakarta), 'Plus Jakarta Sans Fallback';
|
||||
--font-mono: var(--font-geist-mono), 'Geist Mono Fallback';
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-ring: var(--ring);
|
||||
--color-input: var(--input);
|
||||
--color-border: var(--border);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-card: var(--card);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-background: var(--background);
|
||||
--radius-sm: calc(var(--radius) * 0.6);
|
||||
--radius-md: calc(var(--radius) * 0.8);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) * 1.4);
|
||||
--radius-2xl: calc(var(--radius) * 1.8);
|
||||
--radius-3xl: calc(var(--radius) * 2.2);
|
||||
--radius-4xl: calc(var(--radius) * 2.6);
|
||||
}
|
||||
|
||||
:root {
|
||||
--background: oklch(0.985 0.003 17);
|
||||
--foreground: oklch(0.22 0.02 25);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.22 0.02 25);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.22 0.02 25);
|
||||
--primary: oklch(0.52 0.21 27);
|
||||
--primary-foreground: oklch(0.99 0.005 17);
|
||||
--secondary: oklch(0.96 0.008 20);
|
||||
--secondary-foreground: oklch(0.3 0.02 25);
|
||||
--muted: oklch(0.96 0.006 20);
|
||||
--muted-foreground: oklch(0.52 0.02 25);
|
||||
--accent: oklch(0.95 0.03 22);
|
||||
--accent-foreground: oklch(0.45 0.2 27);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.91 0.008 25);
|
||||
--input: oklch(0.91 0.008 25);
|
||||
--ring: oklch(0.52 0.21 27);
|
||||
--chart-1: oklch(0.87 0 0);
|
||||
--chart-2: oklch(0.556 0 0);
|
||||
--chart-3: oklch(0.439 0 0);
|
||||
--chart-4: oklch(0.371 0 0);
|
||||
--chart-5: oklch(0.269 0 0);
|
||||
--radius: 0.625rem;
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.205 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.97 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.145 0 0);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.205 0 0);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.205 0 0);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.922 0 0);
|
||||
--primary-foreground: oklch(0.205 0 0);
|
||||
--secondary: oklch(0.269 0 0);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.269 0 0);
|
||||
--muted-foreground: oklch(0.708 0 0);
|
||||
--accent: oklch(0.269 0 0);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.556 0 0);
|
||||
--chart-1: oklch(0.87 0 0);
|
||||
--chart-2: oklch(0.556 0 0);
|
||||
--chart-3: oklch(0.439 0 0);
|
||||
--chart-4: oklch(0.371 0 0);
|
||||
--chart-5: oklch(0.269 0 0);
|
||||
--sidebar: oklch(0.205 0 0);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.269 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.556 0 0);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
html {
|
||||
@apply font-sans;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
import { Analytics } from '@vercel/analytics/next'
|
||||
import type { Metadata } from 'next'
|
||||
import { Plus_Jakarta_Sans, Geist_Mono } from 'next/font/google'
|
||||
import './globals.css'
|
||||
|
||||
const jakarta = Plus_Jakarta_Sans({
|
||||
variable: '--font-jakarta',
|
||||
subsets: ['latin'],
|
||||
display: 'swap',
|
||||
})
|
||||
const geistMono = Geist_Mono({
|
||||
variable: '--font-geist-mono',
|
||||
subsets: ['latin'],
|
||||
})
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'WebGIS Geospasial — Masuk',
|
||||
description:
|
||||
'Platform analisis spasial untuk pengentasan kemiskinan berbasis data geospasial.',
|
||||
generator: 'v0.app',
|
||||
icons: {
|
||||
icon: [
|
||||
{
|
||||
url: '/icon-light-32x32.png',
|
||||
media: '(prefers-color-scheme: light)',
|
||||
},
|
||||
{
|
||||
url: '/icon-dark-32x32.png',
|
||||
media: '(prefers-color-scheme: dark)',
|
||||
},
|
||||
{
|
||||
url: '/icon.svg',
|
||||
type: 'image/svg+xml',
|
||||
},
|
||||
],
|
||||
apple: '/apple-icon.png',
|
||||
},
|
||||
}
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode
|
||||
}>) {
|
||||
return (
|
||||
<html lang="id" className={`${jakarta.variable} ${geistMono.variable} bg-background`}>
|
||||
<body className="font-sans antialiased">{children}{process.env.NODE_ENV === 'production' && <Analytics />}</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user