feat: initial commit with seeded database and premium ui changes
This commit is contained in:
Dodo
@@ -0,0 +1,111 @@
|
||||
import Link from "next/link";
|
||||
import { ArrowRight } from "lucide-react";
|
||||
|
||||
export function LandingAbout() {
|
||||
return (
|
||||
<section id="about" className="bg-white pt-16 sm:pt-20 lg:pt-32 pb-12 sm:pb-16 lg:pb-24 overflow-hidden w-full">
|
||||
<div className="w-full max-w-[1440px] mx-auto">
|
||||
|
||||
{/* Badge Row */}
|
||||
<div className="px-5 sm:px-8 lg:px-12 flex items-center gap-3 mb-6 sm:mb-8">
|
||||
<span className="w-6 h-6 sm:w-7 sm:h-7 rounded-full bg-gray-900 text-white text-[11px] sm:text-[12px] font-semibold flex items-center justify-center">
|
||||
1
|
||||
</span>
|
||||
<span className="text-[12px] sm:text-[13px] font-medium text-gray-900 border border-gray-200 rounded-full px-3 sm:px-4 py-1 sm:py-1.5">
|
||||
Introducing Waras GIS
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Heading */}
|
||||
<div className="px-5 sm:px-8 lg:px-12">
|
||||
<h2 className="font-medium leading-[1.12] tracking-[-0.02em] text-gray-900 mb-12 sm:mb-16 lg:mb-28 text-[clamp(1.5rem,4vw,3.2rem)] max-w-[900px]">
|
||||
Kecerdasan spasial terpadu, menyajikan <br className="hidden sm:block" />
|
||||
visualisasi data yang akurat & interaktif.
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Content Area - Mobile & Tablet Stacked */}
|
||||
<div className="lg:hidden px-5 sm:px-8 flex flex-col gap-8">
|
||||
<div className="flex flex-col items-start gap-4">
|
||||
<p className="text-[15px] sm:text-[17px] leading-[1.6] font-medium text-gray-900 max-w-[600px]">
|
||||
Melalui integrasi data kemiskinan daerah, tata guna lahan, dan jaringan fasilitas pengisian energi, kami membantu mewujudkan tata ruang wilayah yang transparan dan berbasis data.
|
||||
</p>
|
||||
|
||||
{/* About Button with Text Roll and Arrow - routes to Login */}
|
||||
<Link href="/auth/login" className="group flex items-center gap-3 bg-primary hover:bg-primary/80 text-primary-foreground text-[13px] font-medium rounded-full pl-5 pr-2 py-2 transition-colors duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)] cursor-pointer mt-2">
|
||||
<span className="overflow-hidden h-[20px] relative inline-block">
|
||||
<span className="flex flex-col transition-transform duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)] group-hover:-translate-y-1/2">
|
||||
<span className="h-[20px] flex items-center">Pelajari Selengkapnya</span>
|
||||
<span className="h-[20px] flex items-center">Pelajari Selengkapnya</span>
|
||||
</span>
|
||||
</span>
|
||||
<span className="w-7 h-7 rounded-full bg-white flex items-center justify-center text-primary transition-transform duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)] group-hover:rotate-[-45deg] shrink-0">
|
||||
<ArrowRight className="w-3.5 h-3.5" />
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Images */}
|
||||
<div className="flex flex-col sm:flex-row gap-4 sm:gap-5 w-full">
|
||||
<img
|
||||
src="https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260516_090123_74be96d4-9c1b-40cf-932a-96f4f4babed3.png&w=1280&q=85"
|
||||
alt="Analisis spasial tim perencanaan"
|
||||
className="w-full sm:w-[45%] aspect-[438/346] rounded-xl sm:rounded-2xl object-cover"
|
||||
/>
|
||||
<img
|
||||
src="https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260516_090133_c157d30b-a99a-4477-bec1-a446149ec3f2.png&w=1280&q=85"
|
||||
alt="Stasiun kerja visualisasi GIS"
|
||||
className="w-full sm:w-[55%] aspect-[900/600] rounded-xl sm:rounded-2xl object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content Area - Desktop Grid */}
|
||||
<div className="hidden lg:grid grid-cols-[26%_1fr_48%] items-end gap-6 xl:gap-8 px-8 lg:px-12">
|
||||
|
||||
{/* Left Column Image */}
|
||||
<div className="w-full">
|
||||
<img
|
||||
src="https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260516_090123_74be96d4-9c1b-40cf-932a-96f4f4babed3.png&w=1280&q=85"
|
||||
alt="Analisis spasial tim perencanaan"
|
||||
className="w-full aspect-[438/346] rounded-2xl object-cover shadow-[0_4px_20px_rgba(0,0,0,0.02)]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Center Column Copy & CTA */}
|
||||
<div className="flex flex-col items-start justify-between self-start h-full pl-6 pr-4">
|
||||
<p className="text-[16px] xl:text-[18px] leading-[1.65] font-medium text-gray-900 whitespace-nowrap">
|
||||
Melalui integrasi data kemiskinan daerah,<br />
|
||||
tata guna lahan, dan jaringan SPBU/EV,<br />
|
||||
kami membantu pengambilan keputusan.
|
||||
</p>
|
||||
|
||||
{/* About Button - routes to Login */}
|
||||
<Link href="/auth/login" className="group flex items-center gap-3 bg-primary hover:bg-primary/80 text-primary-foreground text-[13px] font-medium rounded-full pl-5 pr-2 py-2 transition-colors duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)] cursor-pointer mt-8">
|
||||
<span className="overflow-hidden h-[20px] relative inline-block">
|
||||
<span className="flex flex-col transition-transform duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)] group-hover:-translate-y-1/2">
|
||||
<span className="h-[20px] flex items-center">Pelajari Selengkapnya</span>
|
||||
<span className="h-[20px] flex items-center">Pelajari Selengkapnya</span>
|
||||
</span>
|
||||
</span>
|
||||
<span className="w-7 h-7 rounded-full bg-white flex items-center justify-center text-primary transition-transform duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)] group-hover:rotate-[-45deg] shrink-0">
|
||||
<ArrowRight className="w-3.5 h-3.5" />
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Right Column Image */}
|
||||
<div className="w-full">
|
||||
<img
|
||||
src="https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260516_090133_c157d30b-a99a-4477-bec1-a446149ec3f2.png&w=1280&q=85"
|
||||
alt="Stasiun kerja visualisasi GIS"
|
||||
className="w-full aspect-[3/2] rounded-2xl object-cover shadow-[0_4px_24px_rgba(0,0,0,0.03)]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
import Link from "next/link";
|
||||
import { ArrowRight } from "lucide-react";
|
||||
|
||||
export function LandingCta() {
|
||||
return (
|
||||
<section className="bg-white py-24 sm:py-32 relative overflow-hidden w-full border-t border-gray-100">
|
||||
<div className="w-full max-w-[1440px] mx-auto px-5 sm:px-8 lg:px-12 relative flex flex-col items-center justify-center text-center">
|
||||
|
||||
{/* Left Side ASCII Art - Enlarged Variant */}
|
||||
<div className="absolute left-2 sm:left-6 lg:left-10 top-1/2 -translate-y-1/2 hidden md:block pointer-events-none z-10 select-none opacity-25">
|
||||
<pre className="text-[10px] sm:text-[13px] md:text-[14px] leading-[1.15] font-mono text-gray-400 text-left">
|
||||
{` .
|
||||
...
|
||||
..\\\\/ .
|
||||
..AAA.AA
|
||||
......AA .
|
||||
..A .AAAAA .
|
||||
..A .AAAA * . ..A . ..hA\\/h .
|
||||
. . . .. * . .. V . Vh .
|
||||
. . . . . . .. h A - V .
|
||||
A . . ..A A . .V . V4 .
|
||||
4V44A.*.VVV A444V4---AA
|
||||
..A4\\\\----.V . .AAAA444444A4V444A...
|
||||
A.--444444444V4444A..* .AVA
|
||||
..V--AAA. V4....... ..A .
|
||||
... A44V4 .. ...
|
||||
.. . VVV .
|
||||
.
|
||||
`}
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
{/* Right Side ASCII Art - Enlarged Variant */}
|
||||
<div className="absolute right-2 sm:right-6 lg:right-10 top-1/2 -translate-y-1/2 hidden md:block pointer-events-none z-10 select-none opacity-25">
|
||||
<pre className="text-[10px] sm:text-[13px] md:text-[14px] leading-[1.15] font-mono text-gray-400 text-left">
|
||||
{` A
|
||||
-.
|
||||
..A .
|
||||
A444A .
|
||||
..A . 4 .
|
||||
.... AA . .
|
||||
..A .AAAA . ..A . . . .
|
||||
.....AAAA . . ..AA . .A .AVA .
|
||||
. . A . ..A . .. .V4 . .4V44A .
|
||||
. A . ..A4V . A44444444V4 .
|
||||
4V4V4.--AA
|
||||
..AAAA444444A4V444A...
|
||||
A.AVAAAAA4A4A....
|
||||
A4 ..V.AVA
|
||||
..V4V4A...
|
||||
..A...
|
||||
..A .
|
||||
.. .
|
||||
.
|
||||
`}
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
{/* Center Heading */}
|
||||
<h2 className="font-medium leading-[1.12] tracking-[-0.03em] text-gray-900 text-[clamp(1.75rem,5vw,3.5rem)] max-w-[850px] mb-10 sm:mb-12 relative z-20">
|
||||
Kelola data pemetaan daerah Anda <br className="hidden sm:block" /> tanpa hambatan.
|
||||
</h2>
|
||||
|
||||
{/* CTA Buttons */}
|
||||
<div className="flex flex-col sm:flex-row items-center gap-4 sm:gap-5 relative z-20">
|
||||
{/* Orange Button */}
|
||||
<Link href="/auth/login" className="group flex items-center gap-3 bg-primary hover:bg-primary/80 text-primary-foreground text-[13px] sm:text-[14px] font-medium rounded-full pl-5 sm:pl-6 pr-2 py-2 transition-colors duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)] cursor-pointer">
|
||||
<span className="overflow-hidden h-[20px] relative inline-block">
|
||||
<span className="flex flex-col transition-transform duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)] group-hover:-translate-y-1/2">
|
||||
<span className="h-[20px] flex items-center">Buka Dashboard</span>
|
||||
<span className="h-[20px] flex items-center">Buka Dashboard</span>
|
||||
</span>
|
||||
</span>
|
||||
<span className="w-7 h-7 sm:w-8 sm:h-8 rounded-full bg-white flex items-center justify-center text-primary transition-transform duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)] group-hover:rotate-[-45deg] shrink-0">
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{/* Outline Button */}
|
||||
<Link href="/auth/login" className="group flex items-center gap-3 border border-gray-900 text-gray-900 hover:bg-gray-900 hover:text-white text-[13px] sm:text-[14px] font-medium rounded-full pl-5 sm:pl-6 pr-2 py-2 transition-all duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)] cursor-pointer">
|
||||
<span className="overflow-hidden h-[20px] relative inline-block">
|
||||
<span className="flex flex-col transition-transform duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)] group-hover:-translate-y-1/2">
|
||||
<span className="h-[20px] flex items-center">Pelajari Dokumentasi</span>
|
||||
<span className="h-[20px] flex items-center text-white">Pelajari Dokumentasi</span>
|
||||
</span>
|
||||
</span>
|
||||
<span className="w-7 h-7 sm:w-8 sm:h-8 rounded-full bg-gray-900 text-white flex items-center justify-center transition-all duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)] group-hover:bg-white group-hover:text-gray-900 group-hover:rotate-[-45deg] shrink-0">
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
import Link from "next/link";
|
||||
|
||||
export function LandingFooter() {
|
||||
return (
|
||||
<footer className="bg-[#0b0a09] text-gray-400 relative overflow-hidden pt-20 sm:pt-28">
|
||||
|
||||
{/*
|
||||
Gradient Layer matching image_7203fe.jpg:
|
||||
A smooth radial ambient glow originating from the center-bottom to softly illuminate
|
||||
the giant typography, fading into a richer onyx black near the top.
|
||||
*/}
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_center_bottom,_rgba(40,38,35,0.45)_0%,_rgba(11,10,9,0)_70%)] pointer-events-none z-0"></div>
|
||||
|
||||
{/*
|
||||
High-fidelity Film Grain Texture Overlay:
|
||||
Using a dense, fine-grained SVG noise filter pattern to replicate the textured,
|
||||
premium look from the reference image.
|
||||
*/}
|
||||
<div className="absolute inset-0 pointer-events-none opacity-[0.18] mix-blend-overlay z-10 select-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
|
||||
<filter id="grainNoise">
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.15 0" />
|
||||
</filter>
|
||||
<rect width="100%" height="100%" filter="url(#grainNoise)" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="w-full max-w-[1440px] mx-auto px-5 sm:px-8 lg:px-12 relative z-20">
|
||||
|
||||
{/* Top Info and Links columns */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12 pb-16 sm:pb-20">
|
||||
|
||||
{/* Logo and Pitch */}
|
||||
<div className="col-span-2 flex flex-col items-start gap-4 pr-0 sm:pr-8">
|
||||
<div className="w-10 h-10 bg-white text-gray-900 rounded-full flex items-center justify-center font-bold text-[11px] tracking-tight">
|
||||
W
|
||||
</div>
|
||||
<p className="text-[14px] leading-relaxed text-gray-400 max-w-[320px] mt-2">
|
||||
Sistem Informasi Geografis terpadu untuk pemetaan statistik kemiskinan, tata guna lahan, dan jaringan fasilitas infrastruktur energi.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Column 1: Modul Peta */}
|
||||
<div className="flex flex-col items-start">
|
||||
<span className="text-[11px] tracking-wider text-gray-500 font-bold uppercase mb-4 sm:mb-5">
|
||||
Modul Peta
|
||||
</span>
|
||||
<div className="flex flex-col gap-2.5 sm:gap-3 text-[14px]">
|
||||
<a href="#projects" className="hover:text-white transition-colors duration-300">Peta Kemiskinan</a>
|
||||
<a href="#projects" className="hover:text-white transition-colors duration-300">Lahan & Jalan</a>
|
||||
<a href="#projects" className="hover:text-white transition-colors duration-300">SPBU & EV Charger</a>
|
||||
<Link href="/auth/login" className="hover:text-white transition-colors duration-300">Analisis Wilayah</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Column 2: Dokumen & Kontak */}
|
||||
<div className="flex flex-col gap-8">
|
||||
{/* Dokumen */}
|
||||
<div className="flex flex-col items-start">
|
||||
<span className="text-[11px] tracking-wider text-gray-500 font-bold uppercase mb-4">
|
||||
Dokumen
|
||||
</span>
|
||||
<div className="flex flex-col gap-2.5 text-[14px]">
|
||||
<Link href="/auth/login" className="hover:text-white transition-colors duration-300">Pusat Bantuan</Link>
|
||||
<Link href="/auth/login" className="hover:text-white transition-colors duration-300 font-medium text-gray-300">Play by the Rules</Link>
|
||||
<Link href="/auth/login" className="hover:text-white transition-colors duration-300">Privacy Policy</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Kontak */}
|
||||
<div className="flex flex-col items-start">
|
||||
<span className="text-[11px] tracking-wider text-gray-500 font-bold uppercase mb-4">
|
||||
Kontak
|
||||
</span>
|
||||
<div className="flex flex-col gap-2.5 text-[14px]">
|
||||
<Link href="/auth/login" className="hover:text-white transition-colors duration-300">Hubungi Kami</Link>
|
||||
<Link href="/auth/login" className="hover:text-white transition-colors duration-300">Keamanan Data</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Giant typography section matching the second image layout */}
|
||||
<div className="w-full text-center select-none pointer-events-none overflow-hidden relative h-[10vw] sm:h-[12vw] flex items-end justify-center mt-8 sm:mt-16">
|
||||
<span className="text-[28vw] font-bold text-white leading-[0.7] tracking-normal block opacity-95 translate-y-[20%] select-none">
|
||||
Waras
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
import { ArrowRight, Menu, X } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useScroll } from "@/hooks/use-scroll";
|
||||
import { Portal, PortalBackdrop } from "@/components/portal";
|
||||
|
||||
const navLinks = [
|
||||
{ label: "Tentang", href: "#about" },
|
||||
{ label: "Modul Peta", href: "#projects" },
|
||||
{ label: "Dokumentasi", href: "/auth/login" },
|
||||
];
|
||||
|
||||
export function LandingHeader() {
|
||||
const scrolled = useScroll(10);
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<header className="fixed inset-x-0 top-0 z-50">
|
||||
<div className="w-full max-w-[1440px] mx-auto p-2 sm:p-3">
|
||||
<nav
|
||||
className={cn(
|
||||
"flex items-center justify-between rounded-full p-[5px] border border-transparent transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)]",
|
||||
scrolled
|
||||
? "bg-white shadow-[0_2px_12px_rgba(0,0,0,0.06)] border-gray-100/50"
|
||||
: "bg-white/70 backdrop-blur-sm"
|
||||
)}
|
||||
>
|
||||
{/* Brand */}
|
||||
<Link
|
||||
href="/"
|
||||
className="w-9 h-9 sm:w-10 sm:h-10 bg-gray-900 rounded-full flex items-center justify-center text-white font-bold tracking-tight text-[10px] sm:text-[11px] hover:bg-gray-800 transition-colors duration-300 shrink-0"
|
||||
>
|
||||
W
|
||||
</Link>
|
||||
|
||||
{/* Desktop nav links */}
|
||||
<div className="hidden md:flex items-center gap-6">
|
||||
{navLinks.map((link) => (
|
||||
<Link
|
||||
key={link.label}
|
||||
href={link.href}
|
||||
className="text-[14px] font-medium text-gray-900 hover:text-gray-500 transition-colors duration-300"
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Desktop CTA - routes to Login */}
|
||||
<Link
|
||||
href="/auth/login"
|
||||
className="group hidden md:flex items-center gap-3 bg-primary hover:bg-primary/80 text-primary-foreground text-[14px] font-medium rounded-full pl-6 pr-2 py-2 transition-colors duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)] cursor-pointer"
|
||||
>
|
||||
<span className="overflow-hidden h-[20px] relative inline-block">
|
||||
<span className="flex flex-col transition-transform duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)] group-hover:-translate-y-1/2">
|
||||
<span className="h-[20px] flex items-center">Login</span>
|
||||
<span className="h-[20px] flex items-center">Login</span>
|
||||
</span>
|
||||
</span>
|
||||
<span className="w-8 h-8 rounded-full bg-white flex items-center justify-center text-primary transition-transform duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)] group-hover:rotate-[-45deg] shrink-0">
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{/* Mobile menu trigger */}
|
||||
<button
|
||||
onClick={() => setOpen((value) => !value)}
|
||||
className="md:hidden w-9 h-9 sm:w-10 sm:h-10 bg-gray-900 rounded-full flex items-center justify-center text-white transition-transform duration-300 active:scale-95 cursor-pointer shrink-0"
|
||||
aria-label="Toggle Navigation Menu"
|
||||
aria-controls="landing-mobile-nav"
|
||||
aria-expanded={open}
|
||||
>
|
||||
{open ? <X className="w-4 h-4" /> : <Menu className="w-4 h-4" />}
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu Overlay */}
|
||||
{open && (
|
||||
<Portal className="md:hidden justify-end" id="landing-mobile-nav">
|
||||
<PortalBackdrop onClick={() => setOpen(false)} />
|
||||
<div className="bg-white rounded-2xl mx-3 mb-3 p-6 flex flex-col gap-6 shadow-2xl animate-in slide-in-from-bottom duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]">
|
||||
<div className="flex justify-between items-center border-b pb-4 border-gray-100">
|
||||
<span className="text-[12px] font-semibold tracking-wider uppercase text-gray-900">
|
||||
Waras — Portal GIS
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setOpen(false)}
|
||||
className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-700 hover:bg-gray-200 transition-colors"
|
||||
aria-label="Tutup Menu"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-4 py-2">
|
||||
{navLinks.map((link) => (
|
||||
<Link
|
||||
key={link.label}
|
||||
href={link.href}
|
||||
onClick={() => setOpen(false)}
|
||||
className="text-[28px] sm:text-[32px] font-medium text-gray-900 hover:text-primary transition-colors"
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Action Button - routes to Login */}
|
||||
<Link
|
||||
href="/auth/login"
|
||||
onClick={() => setOpen(false)}
|
||||
className="group w-full flex items-center justify-between bg-primary text-primary-foreground text-[14px] font-medium rounded-full pl-6 pr-2 py-2.5 transition-all duration-300 hover:bg-primary/80"
|
||||
>
|
||||
<span>Login</span>
|
||||
<span className="w-8 h-8 rounded-full bg-white flex items-center justify-center text-primary">
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
</Portal>
|
||||
)}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import dynamic from "next/dynamic";
|
||||
import { ArrowRight } from "lucide-react";
|
||||
|
||||
// Dynamically import shaders to prevent SSR errors (WebGL/Canvas requires browser APIs)
|
||||
const Shader = dynamic(() => import("shaders/react").then((mod) => mod.Shader), { ssr: false });
|
||||
const Swirl = dynamic(() => import("shaders/react").then((mod) => mod.Swirl), { ssr: false });
|
||||
const ChromaFlow = dynamic(() => import("shaders/react").then((mod) => mod.ChromaFlow), { ssr: false });
|
||||
const FlutedGlass = dynamic(() => import("shaders/react").then((mod) => mod.FlutedGlass), { ssr: false });
|
||||
const FilmGrain = dynamic(() => import("shaders/react").then((mod) => mod.FilmGrain), { ssr: false });
|
||||
|
||||
export function LandingHero() {
|
||||
return (
|
||||
<section className="relative flex min-h-screen w-full flex-col justify-center overflow-hidden bg-[#EFEFEF]">
|
||||
|
||||
{/* Animated WebGL Shader Overlay */}
|
||||
<div className="absolute inset-0 z-10 pointer-events-none w-full h-full">
|
||||
<Shader className="w-full h-full">
|
||||
<Swirl colorA="#ffffff" colorB="#f0f0f0" detail={1.7} />
|
||||
<ChromaFlow
|
||||
baseColor="#ffffff"
|
||||
downColor="#ff5f03"
|
||||
leftColor="#ff5f03"
|
||||
rightColor="#ff5f03"
|
||||
upColor="#ff5f03"
|
||||
momentum={13}
|
||||
radius={3.5}
|
||||
/>
|
||||
<FlutedGlass
|
||||
aberration={0.61}
|
||||
angle={31}
|
||||
frequency={8}
|
||||
highlight={0.12}
|
||||
highlightSoftness={0}
|
||||
lightAngle={-90}
|
||||
refraction={4}
|
||||
shape="rounded"
|
||||
softness={1}
|
||||
speed={0.15}
|
||||
/>
|
||||
<FilmGrain strength={0.05} />
|
||||
</Shader>
|
||||
</div>
|
||||
|
||||
{/* Hero Content */}
|
||||
<div className="relative z-20 w-full max-w-[1440px] mx-auto px-5 sm:px-8 lg:px-12 pb-14 sm:pb-16 lg:pb-20">
|
||||
|
||||
<div className="text-[13px] sm:text-[14px] text-gray-900 font-semibold tracking-wider uppercase mb-5 sm:mb-8">
|
||||
Waras — Portal GIS
|
||||
</div>
|
||||
|
||||
<h1 className="font-medium leading-[1.08] tracking-[-0.03em] text-gray-900 text-[clamp(1.75rem,7vw,4.2rem)] sm:text-[clamp(2.5rem,5vw,4.2rem)] max-w-[1100px]">
|
||||
Satu peta untuk keputusan daerah yang lebih baik.
|
||||
</h1>
|
||||
|
||||
{/* CTA Row */}
|
||||
<div className="mt-8 sm:mt-12 flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-5">
|
||||
|
||||
{/* Orange Button with Text Roll and Rotated Arrow - routes to Login */}
|
||||
<Link href="/auth/login" className="group flex items-center gap-3 bg-primary hover:bg-primary/80 text-primary-foreground text-[13px] sm:text-[14px] font-medium rounded-full pl-5 sm:pl-6 pr-2 py-2 transition-colors duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)] cursor-pointer">
|
||||
<span className="overflow-hidden h-[20px] relative inline-block">
|
||||
<span className="flex flex-col transition-transform duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)] group-hover:-translate-y-1/2">
|
||||
<span className="h-[20px] flex items-center">Buka Dashboard</span>
|
||||
<span className="h-[20px] flex items-center">Buka Dashboard</span>
|
||||
</span>
|
||||
</span>
|
||||
<span className="w-7 h-7 sm:w-8 sm:h-8 rounded-full bg-white flex items-center justify-center text-primary transition-transform duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)] group-hover:rotate-[-45deg] shrink-0">
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
import Link from "next/link";
|
||||
import { ArrowRight } from "lucide-react";
|
||||
import { LinkIcon } from "@/components/landing/link-icon";
|
||||
|
||||
export function LandingProjects() {
|
||||
return (
|
||||
<section id="projects" className="bg-[#F5F5F5] pt-16 sm:pt-20 lg:pt-28 pb-16 sm:pb-20 lg:pb-28 w-full">
|
||||
<div className="w-full max-w-[1440px] mx-auto">
|
||||
|
||||
{/* Badge Row */}
|
||||
<div className="px-5 sm:px-8 lg:px-12 flex items-center gap-3 mb-6 sm:mb-8">
|
||||
<span className="w-6 h-6 sm:w-7 sm:h-7 rounded-full bg-gray-900 text-white text-[11px] sm:text-[12px] font-semibold flex items-center justify-center">
|
||||
2
|
||||
</span>
|
||||
<span className="text-[12px] sm:text-[13px] font-medium text-gray-900 border border-gray-300 rounded-full px-3 sm:px-4 py-1 sm:py-1.5">
|
||||
Modul Peta Visual
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Heading */}
|
||||
<div className="px-5 sm:px-8 lg:px-12 mb-10 sm:mb-14 lg:mb-16">
|
||||
<h2 className="font-medium leading-[1.08] tracking-[-0.03em] text-gray-900 text-[clamp(1.75rem,7vw,4.2rem)] sm:text-[clamp(2.5rem,5vw,4.2rem)]">
|
||||
Modul Sistem
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Grid Layout */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-5 sm:gap-6 lg:gap-7 px-5 sm:px-8 lg:px-12">
|
||||
|
||||
{/* Card 1: Poverty Map - links to Login */}
|
||||
<Link href="/auth/login" className="flex flex-col group cursor-pointer text-left">
|
||||
{/* Media Container */}
|
||||
<div className="relative aspect-[329/246] rounded-2xl overflow-hidden bg-[#1a1d2e] shadow-[0_4px_16px_rgba(0,0,0,0.015)]">
|
||||
<video
|
||||
src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260516_122702_390f5305-8719-41d5-ae80-d23ab3796c28.mp4"
|
||||
autoPlay
|
||||
muted
|
||||
loop
|
||||
playsInline
|
||||
className="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-102"
|
||||
/>
|
||||
|
||||
{/* Hover expandable white circle button */}
|
||||
<div className="absolute bottom-4 left-4 h-9 bg-white text-gray-900 rounded-full flex items-center overflow-hidden transition-all duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)] w-9 group-hover:w-[148px] px-2.5 justify-between shadow-md">
|
||||
<span className="text-[13px] font-medium whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-100 pl-1 text-gray-900">
|
||||
Buka Peta
|
||||
</span>
|
||||
<LinkIcon className="w-3.5 h-3.5 shrink-0 text-gray-900 transition-transform duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)] -rotate-45 group-hover:rotate-0" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Descriptions */}
|
||||
<p className="text-[13px] sm:text-[14px] text-gray-600 mt-4 leading-relaxed font-normal">
|
||||
Sistem analisis kemiskinan terpadu dengan visualisasi statistik desil wilayah dan indeks prioritas bantuan.
|
||||
</p>
|
||||
<h3 className="text-[14px] sm:text-[15px] font-semibold text-gray-900 mt-1">
|
||||
Peta & Statistik Kemiskinan
|
||||
</h3>
|
||||
</Link>
|
||||
|
||||
{/* Card 2: Gas Station Map - links to Login */}
|
||||
<Link href="/auth/login" className="flex flex-col group cursor-pointer text-left">
|
||||
{/* Media Container */}
|
||||
<div className="relative aspect-square rounded-2xl overflow-hidden bg-[#6b6b6b] shadow-[0_4px_16px_rgba(0,0,0,0.015)]">
|
||||
<video
|
||||
src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260516_123323_f909c2b8-ff6c-4edf-882b-8ebcdbe389b5.mp4"
|
||||
autoPlay
|
||||
muted
|
||||
loop
|
||||
playsInline
|
||||
className="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-102"
|
||||
/>
|
||||
|
||||
{/* Hover expandable dark circle button */}
|
||||
<div className="absolute bottom-4 left-4 h-9 bg-gray-900 text-white rounded-full flex items-center overflow-hidden transition-all duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)] w-9 group-hover:w-[168px] px-2.5 justify-between shadow-md">
|
||||
<span className="text-[13px] font-medium whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-100 pl-1 text-white">
|
||||
Buka Peta
|
||||
</span>
|
||||
<ArrowRight className="w-3.5 h-3.5 shrink-0 text-white transition-transform duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)] -rotate-45 group-hover:rotate-0" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Descriptions */}
|
||||
<p className="text-[13px] sm:text-[14px] text-gray-600 mt-4 leading-relaxed font-normal">
|
||||
Pemetaan stasiun pengisian energi (SPBU & EV Charger) beserta rincian fasilitas bengkel dan status operasional 24 jam.
|
||||
</p>
|
||||
<h3 className="text-[14px] sm:text-[15px] font-semibold text-gray-900 mt-1">
|
||||
Peta SPBU, EV Charger & Bengkel
|
||||
</h3>
|
||||
</Link>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import type { SVGProps } from "react";
|
||||
|
||||
export function LinkIcon(props: SVGProps<SVGSVGElement>) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
{...props}
|
||||
>
|
||||
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
|
||||
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user