feat: implement responsive mobile-friendly navigation with burger menu and update UI styling
This commit is contained in:
Yoga Pangestu
parent
f2be0157a3
commit
2edeedbf9e
@ -1,47 +1,89 @@
|
|||||||
import { Head, Link, usePage } from '@inertiajs/react';
|
import { Head, Link, usePage } from '@inertiajs/react';
|
||||||
import { dashboard, login } from '@/routes';
|
import { dashboard, login } from '@/routes';
|
||||||
|
import { Menu, X } from 'lucide-react';
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
export default function Homepage() {
|
export default function Homepage() {
|
||||||
const { auth } = usePage().props as any;
|
const { auth } = usePage().props as any;
|
||||||
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Head title="Welcome to VN Group" />
|
<Head title="Welcome to VN Group" />
|
||||||
<div className="relative min-h-screen overflow-hidden bg-[#0a0a0a] font-sans text-white selection:bg-orange-500/30">
|
<div className="relative min-h-screen overflow-hidden bg-[#0a0a0a] font-sans text-white selection:bg-indigo-500/30">
|
||||||
{/* Background Blobs */}
|
{/* Background Blobs */}
|
||||||
<div className="absolute top-[-10%] left-[-10%] h-[500px] w-[500px] rounded-full bg-orange-600/20 blur-[120px]"></div>
|
<div className="absolute top-[-10%] left-[-10%] h-[500px] w-[500px] rounded-full bg-indigo-600/20 blur-[120px]"></div>
|
||||||
<div className="absolute bottom-[-10%] right-[-10%] h-[500px] w-[500px] rounded-full bg-blue-600/10 blur-[120px]"></div>
|
<div className="absolute bottom-[-10%] right-[-10%] h-[500px] w-[500px] rounded-full bg-blue-600/10 blur-[120px]"></div>
|
||||||
|
|
||||||
<div className="relative z-10 flex min-h-screen flex-col">
|
<div className="relative z-10 flex min-h-screen flex-col">
|
||||||
{/* Header */}
|
{/* Header / Navbar */}
|
||||||
<header className="flex items-center justify-between px-8 py-6 lg:px-12">
|
<header className="fixed top-6 left-0 right-0 z-50 px-6">
|
||||||
<div className="flex items-center gap-2">
|
<nav className="mx-auto flex max-w-6xl items-center justify-between rounded-2xl border border-white/10 bg-white/5 px-6 py-3 shadow-2xl backdrop-blur-xl">
|
||||||
<div className="h-8 w-8 rounded-lg bg-gradient-to-br from-orange-500 to-red-600 shadow-lg shadow-orange-500/20"></div>
|
{/* Left: Logo */}
|
||||||
<span className="text-xl font-bold tracking-tight">VN Group</span>
|
<div className="flex items-center gap-2">
|
||||||
</div>
|
<div className="h-8 w-8 rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 shadow-lg shadow-indigo-500/20"></div>
|
||||||
<nav className="flex items-center gap-6">
|
<span className="text-xl font-bold tracking-tight text-white">VN Group</span>
|
||||||
{auth.user ? (
|
</div>
|
||||||
<Link
|
|
||||||
href={dashboard()}
|
{/* Center: Menu (Desktop) */}
|
||||||
className="rounded-full bg-white/5 px-6 py-2 text-sm font-medium transition-all hover:bg-white/10 hover:ring-1 hover:ring-white/20"
|
<div className="hidden items-center gap-8 md:flex">
|
||||||
|
<Link href="/" className="text-sm font-medium text-white transition-colors hover:text-indigo-500">Beranda</Link>
|
||||||
|
<Link href="#" className="text-sm font-medium text-zinc-400 transition-colors hover:text-white">Produk</Link>
|
||||||
|
<Link href="#" className="text-sm font-medium text-zinc-400 transition-colors hover:text-white">Cara Order</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right: Actions */}
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="hidden md:block">
|
||||||
|
{auth.user ? (
|
||||||
|
<Link
|
||||||
|
href={dashboard()}
|
||||||
|
className="rounded-xl bg-white/10 px-6 py-2 text-sm font-medium text-white transition-all hover:bg-white/20"
|
||||||
|
>
|
||||||
|
Dashboard
|
||||||
|
</Link>
|
||||||
|
) : (
|
||||||
|
<Link
|
||||||
|
href={login()}
|
||||||
|
className="rounded-xl bg-indigo-600 px-6 py-2 text-sm font-bold text-white transition-all hover:bg-indigo-500 hover:shadow-lg hover:shadow-indigo-600/20"
|
||||||
|
>
|
||||||
|
Masuk
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Burger Menu Button */}
|
||||||
|
<button
|
||||||
|
className="flex h-10 w-10 items-center justify-center rounded-xl bg-white/5 text-white md:hidden"
|
||||||
|
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||||
>
|
>
|
||||||
Dashboard
|
{isMenuOpen ? <X size={20} /> : <Menu size={20} />}
|
||||||
</Link>
|
</button>
|
||||||
) : (
|
</div>
|
||||||
<Link
|
|
||||||
href={login()}
|
|
||||||
className="rounded-full bg-orange-600 px-6 py-2 text-sm font-medium transition-all hover:bg-orange-500 hover:shadow-lg hover:shadow-orange-600/20"
|
|
||||||
>
|
|
||||||
Login
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
{/* Mobile Menu Dropdown */}
|
||||||
|
{isMenuOpen && (
|
||||||
|
<div className="mt-4 overflow-hidden rounded-2xl border border-white/10 bg-[#0a0a0a]/90 p-4 shadow-2xl backdrop-blur-2xl animate-in fade-in zoom-in-95 duration-200 md:hidden">
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
<Link href="/" className="px-4 py-2 text-sm font-medium text-white">Beranda</Link>
|
||||||
|
<Link href="#" className="px-4 py-2 text-sm font-medium text-zinc-400">Produk</Link>
|
||||||
|
<Link href="#" className="px-4 py-2 text-sm font-medium text-zinc-400">Cara Order</Link>
|
||||||
|
<hr className="border-white/10" />
|
||||||
|
{auth.user ? (
|
||||||
|
<Link href={dashboard()} className="rounded-xl bg-white/10 px-4 py-3 text-center text-sm font-medium text-white">Dashboard</Link>
|
||||||
|
) : (
|
||||||
|
<Link href={login()} className="rounded-xl bg-indigo-600 px-4 py-3 text-center text-sm font-bold text-white">Masuk</Link>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
{/* Main Content */}
|
{/* Main Content */}
|
||||||
<main className="flex flex-1 flex-col items-center justify-center px-6 text-center">
|
<main className="flex flex-1 flex-col items-center justify-center px-6 pt-32 text-center">
|
||||||
<div className="animate-in fade-in slide-in-from-bottom-8 duration-1000">
|
<div className="animate-in fade-in slide-in-from-bottom-8 duration-1000">
|
||||||
<h2 className="mb-2 text-sm font-semibold uppercase tracking-[0.3em] text-orange-500">
|
<h2 className="mb-2 text-sm font-semibold uppercase tracking-[0.3em] text-indigo-500">
|
||||||
Premium Experience
|
Premium Experience
|
||||||
</h2>
|
</h2>
|
||||||
<h1 className="mb-6 bg-gradient-to-b from-white to-white/60 bg-clip-text text-6xl font-extrabold tracking-tight text-transparent lg:text-8xl">
|
<h1 className="mb-6 bg-gradient-to-b from-white to-white/60 bg-clip-text text-6xl font-extrabold tracking-tight text-transparent lg:text-8xl">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user