From 2edeedbf9eb47bbc8d1dcc381d279d36c0deb69d Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Thu, 23 Apr 2026 21:25:21 +0700
Subject: [PATCH] feat: implement responsive mobile-friendly navigation with
 burger menu and update UI styling

---
 resources/js/pages/homepage.tsx | 92 ++++++++++++++++++++++++---------
 1 file changed, 67 insertions(+), 25 deletions(-)
diff --git a/resources/js/pages/homepage.tsx b/resources/js/pages/homepage.tsx
index 3a292f2..9085b22 100644
--- a/resources/js/pages/homepage.tsx
+++ b/resources/js/pages/homepage.tsx
@@ -1,47 +1,89 @@
 import { Head, Link, usePage } from '@inertiajs/react';
 import { dashboard, login } from '@/routes';
+import { Menu, X } from 'lucide-react';
+import { useState } from 'react';
 
 export default function Homepage() {
     const { auth } = usePage().props as any;
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
 
     return (
         <>
             <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 */}
-                <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="relative z-10 flex min-h-screen flex-col">
-                    {/* Header */}
-                    <header className="flex items-center justify-between px-8 py-6 lg:px-12">
-                        <div className="flex items-center gap-2">
-                            <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>
-                            <span className="text-xl font-bold tracking-tight">VN Group</span>
-                        </div>
-                        <nav className="flex items-center gap-6">
-                            {auth.user ? (
-                                <Link
-                                    href={dashboard()}
-                                    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"
+                    {/* Header / Navbar */}
+                    <header className="fixed top-6 left-0 right-0 z-50 px-6">
+                        <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">
+                            {/* Left: Logo */}
+                            <div className="flex items-center gap-2">
+                                <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>
+                                <span className="text-xl font-bold tracking-tight text-white">VN Group</span>
+                            </div>
+
+                            {/* Center: Menu (Desktop) */}
+                            <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
-                                </Link>
-                            ) : (
-                                <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>
-                            )}
+                                    {isMenuOpen ? <X size={20} /> : <Menu size={20} />}
+                                </button>
+                            </div>
                         </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>
 
                     {/* 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">
-                            <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
                             </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">
