From d969a8369064b4b7fcad687b53aed6f0c2cdf308 Mon Sep 17 00:00:00 2001
From: Anang Yusman <anangyusman23@gmail.com>
Date: Thu, 16 Apr 2026 15:34:49 +0800
Subject: [PATCH] update landing

---
 components/landing-page/landing-site-nav.tsx  | 329 +++++++++++-------
 .../landing-page/retracting-sidedar.tsx       |   3 -
 2 files changed, 200 insertions(+), 132 deletions(-)

diff --git a/components/landing-page/landing-site-nav.tsx b/components/landing-page/landing-site-nav.tsx
index 07136a7..fa8b976 100644
--- a/components/landing-page/landing-site-nav.tsx
+++ b/components/landing-page/landing-site-nav.tsx
@@ -24,7 +24,9 @@ import {
 const LANDING_SECTION_IDS = new Set(["products", "services"]);
 
 function scrollToSectionId(id: string) {
-  document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
+  document
+    .getElementById(id)
+    ?.scrollIntoView({ behavior: "smooth", block: "start" });
 }
 
 export type LandingSiteNavProps = {
@@ -46,6 +48,7 @@ export default function LandingSiteNav({
   const router = useRouter();
   const [open, setOpen] = useState(false);
   const [openKonten, setOpenKonten] = useState(false);
+  const [activeMenu, setActiveMenu] = useState<string | null>(null);
 
   useEffect(() => {
     if (pathname !== "/") return;
@@ -77,6 +80,26 @@ export default function LandingSiteNav({
     }
   };
 
+  function MenuItem({
+    icon,
+    label,
+    onClick,
+  }: {
+    icon: React.ReactNode;
+    label: string;
+    onClick?: () => void;
+  }) {
+    return (
+      <div
+        onClick={onClick}
+        className="flex cursor-pointer items-center gap-3  border-white/20 pb-3 hover:opacity-80"
+      >
+        {icon}
+        <span>{label}</span>
+      </div>
+    );
+  }
+
   const searchField = (
     <div className="relative min-w-0 max-w-[min(100%,11rem)] flex-1 sm:max-w-none sm:flex-initial md:w-56 lg:w-64">
       <Search
@@ -96,8 +119,11 @@ export default function LandingSiteNav({
   return (
     <>
       <nav
-        className="fixed top-0 left-0 right-0 z-30 w-full border-b border-gray-100 bg-white/95 shadow-sm backdrop-blur-sm supports-[backdrop-filter]:bg-white/80"
-        aria-label="Main"
+        className={`fixed top-0 left-0 right-0 z-100 w-full transition-all duration-300 ${
+          open
+            ? "bg-[#966314] text-white border-none"
+            : "bg-white/95 text-gray-900 border-b border-gray-100"
+        }`}
       >
         <div className="container mx-auto flex items-center justify-between gap-4 px-4 py-4 md:px-6">
           <Link href="/" className="shrink-0">
@@ -113,11 +139,7 @@ export default function LandingSiteNav({
 
           <div className="flex min-w-0 flex-1 items-center justify-end gap-3 md:gap-5">
             {searchFormAction ? (
-              <form
-                method="get"
-                action={searchFormAction}
-                className="contents"
-              >
+              <form method="get" action={searchFormAction} className="contents">
                 {searchField}
               </form>
             ) : (
@@ -126,9 +148,16 @@ export default function LandingSiteNav({
 
             <button
               type="button"
-              className="hidden items-center gap-2 text-sm text-gray-800 sm:flex"
+              className={`hidden items-center gap-2 text-sm  sm:flex ${
+                open ? " text-white" : " text-black "
+              }`}
             >
-              <Globe className="size-[18px] text-gray-600" strokeWidth={1.75} />
+              <Globe
+                className={`size-[18px] ${
+                  open ? " text-white" : " text-black "
+                }`}
+                strokeWidth={1.75}
+              />
               English
             </button>
 
@@ -140,9 +169,14 @@ export default function LandingSiteNav({
             <button
               type="button"
               onClick={() => setOpen(true)}
-              className="flex items-center gap-2 text-sm font-semibold text-gray-900"
+              className={`flex items-center gap-2 text-sm font-semibold ${
+                open ? " text-white" : " text-black "
+              }`}
             >
-              <Menu className="size-5 text-gray-900" strokeWidth={2} />
+              <Menu
+                className={`size-5 ${open ? " text-white" : " text-black "}`}
+                strokeWidth={2}
+              />
               Menu
             </button>
           </div>
@@ -158,132 +192,169 @@ export default function LandingSiteNav({
         />
       ) : null}
 
-      <aside
-        className={`fixed top-0 right-0 z-[100] h-full w-[280px] bg-[#966314] text-white transition-transform duration-300 ${
-          open ? "translate-x-0" : "translate-x-full"
+      <div
+        className={`fixed top-[80px] left-0 right-0 bottom-0 z-100 bg-gradient-to-bl from-[#966314] to-[#b07a1c] text-white transition-all duration-300 ${
+          open ? "opacity-100 visible" : "opacity-0 invisible"
         }`}
       >
-        <div className="flex items-center justify-between border-b border-white/20 p-6">
-          <div className="flex rounded-full bg-white text-sm font-semibold text-[#966314]">
-            <button type="button" className="rounded-full bg-white px-3 py-1">
-              ID
-            </button>
-            <button type="button" className="px-3 py-1">
-              EN
+        <div className="flex h-full flex-col p-10">
+          {/* TOP BAR */}
+          <div className="flex justify-end items-end mb-10">
+            <button onClick={() => setOpen(false)}>
+              <X size={24} />
             </button>
           </div>
 
-          <button type="button" onClick={() => setOpen(false)}>
-            <X />
-          </button>
-        </div>
+          {/* MENU */}
+          <div className="grid grid-cols-2 gap-16 flex-1">
+            <div className="flex flex-col gap-6 text-2xl font-semibold">
+              <MenuItem
+                icon={<Home size={22} />}
+                label="Home"
+                onClick={goHome}
+              />
 
-        <nav className="flex flex-col gap-6 overflow-y-auto p-6 text-sm font-medium">
-          <button
-            type="button"
-            className="w-full border-0 bg-transparent p-0 text-left text-inherit"
-            onClick={goHome}
-          >
-            <MenuItem icon={<Home size={18} />} label="Home" />
-          </button>
+              <MenuItem
+                icon={<Box size={22} />}
+                label="Product"
+                onClick={() => setActiveMenu("product")}
+              />
 
-          {newsHub ? (
-            <div className="-mt-2 border-b border-white/20 pb-2">
-              <button
-                type="button"
-                className="flex w-full items-center justify-between border-0 bg-transparent py-1 text-left text-inherit"
-                onClick={() => setOpenKonten((v) => !v)}
-              >
-                <span>Konten</span>
-                <ChevronDown
-                  size={18}
-                  className={`transition-transform ${openKonten ? "rotate-180" : ""}`}
-                />
-              </button>
-              <div
-                className={`mt-2 space-y-1 overflow-hidden pl-2 transition-all ${
-                  openKonten ? "max-h-60 opacity-100" : "max-h-0 opacity-0"
-                }`}
-              >
-                <Link
-                  href="/video/filter"
-                  className="block rounded-md px-2 py-2 hover:bg-white/10"
-                  onClick={() => setOpen(false)}
-                >
-                  <span className="flex items-center justify-between text-sm">
-                    Audio Visual <Video size={16} />
-                  </span>
-                </Link>
-                <Link
-                  href="/audio/filter"
-                  className="block rounded-md px-2 py-2 hover:bg-white/10"
-                  onClick={() => setOpen(false)}
-                >
-                  <span className="flex items-center justify-between text-sm">
-                    Audio <Music size={16} />
-                  </span>
-                </Link>
-                <Link
-                  href="/image/filter"
-                  className="block rounded-md px-2 py-2 hover:bg-white/10"
-                  onClick={() => setOpen(false)}
-                >
-                  <span className="flex items-center justify-between text-sm">
-                    Foto <ImageIcon size={16} />
-                  </span>
-                </Link>
-                <Link
-                  href="/document/filter"
-                  className="block rounded-md px-2 py-2 hover:bg-white/10"
-                  onClick={() => setOpen(false)}
-                >
-                  <span className="flex items-center justify-between text-sm">
-                    Teks <FileText size={16} />
-                  </span>
-                </Link>
+              <MenuItem
+                icon={<Briefcase size={22} />}
+                label="Services"
+                onClick={() => setActiveMenu("services")}
+              />
+
+              <MenuItem
+                icon={<Newspaper size={22} />}
+                label="News and Services"
+                onClick={() => setActiveMenu("news&services")}
+              />
+
+              <MenuItem
+                icon={<LogIn size={22} />}
+                label="Login"
+                onClick={() => router.push("/auth")}
+              />
+            </div>
+            <div className="flex flex-col justify-start pt-4">
+              {activeMenu === "product" && (
+                <div className="space-y-4">
+                  <p className="text-sm opacity-70">Product</p>
+
+                  <p className="text-lg font-semibold cursor-pointer hover:underline">
+                    MediaHUB Content Aggregator
+                  </p>
+                  <p className="text-lg font-semibold cursor-pointer hover:underline">
+                    Multipool Reputation Management
+                  </p>
+                  <p className="text-lg font-semibold cursor-pointer hover:underline">
+                    PR Room Opinion Management
+                  </p>
+                </div>
+              )}
+
+              {activeMenu === "services" && (
+                <div className="space-y-4">
+                  <p className="text-sm opacity-70">Services</p>
+
+                  <p className="text-lg font-semibold cursor-pointer hover:underline">
+                    Artifintel
+                  </p>
+                  <p className="text-lg font-semibold cursor-pointer hover:underline">
+                    Produksi Video Animasi
+                  </p>
+                  <p className="text-lg font-semibold cursor-pointer hover:underline">
+                    Reelithic
+                  </p>
+                  <p className="text-lg font-semibold cursor-pointer hover:underline">
+                    Qudoin
+                  </p>
+                  <p className="text-lg font-semibold cursor-pointer hover:underline">
+                    Talkshow Ai
+                  </p>
+                </div>
+              )}
+              {activeMenu === "news&services" && (
+                <div className="space-y-4">
+                  <p className="text-sm opacity-70">News & Services</p>
+                  <Link
+                    href="/news-services"
+                    className="block rounded-md px-2 py-2 hover:bg-white/10"
+                    onClick={() => setOpen(false)}
+                  >
+                    <p className="text-lg font-semibold cursor-pointer hover:underline">
+                      Homepage News
+                    </p>
+                  </Link>
+                  <Link
+                    href="/video/filter"
+                    className="block rounded-md px-2 py-2 hover:bg-white/10"
+                    onClick={() => setOpen(false)}
+                  >
+                    <p className="text-lg font-semibold cursor-pointer hover:underline">
+                      Audio Visual
+                    </p>
+                  </Link>
+                  <Link
+                    href="/audio/filter"
+                    className="block rounded-md px-2 py-2 hover:bg-white/10"
+                    onClick={() => setOpen(false)}
+                  >
+                    <p className="text-lg font-semibold cursor-pointer hover:underline">
+                      Audio
+                    </p>
+                  </Link>
+                  <Link
+                    href="/image/filter"
+                    className="block rounded-md px-2 py-2 hover:bg-white/10"
+                    onClick={() => setOpen(false)}
+                  >
+                    <p className="text-lg font-semibold cursor-pointer hover:underline">
+                      Foto
+                    </p>
+                  </Link>
+                  <Link
+                    href="/document/filter"
+                    className="block rounded-md px-2 py-2 hover:bg-white/10"
+                    onClick={() => setOpen(false)}
+                  >
+                    <p className="text-lg font-semibold cursor-pointer hover:underline">
+                      Teks
+                    </p>
+                  </Link>
+                </div>
+              )}
+            </div>
+          </div>
+          <div className="mt-auto grid grid-cols-2 gap-10 pt-10">
+            {/* POPULAR */}
+            <div>
+              <p className="text-sm opacity-70 mb-3">POPULAR PAGES</p>
+              <ul className="space-y-2 text-sm">
+                <li>Berita 1...</li>
+                <li>Berita 2...</li>
+                <li>Berita 3...</li>
+              </ul>
+            </div>
+
+            {/* EVENT */}
+            <div>
+              <p className="text-sm opacity-70 mb-3">Upcoming Event</p>
+              <div className="bg-white/10 rounded-xl p-4 flex gap-3">
+                <div className="w-16 h-16 bg-white/20 rounded-md" />
+                <div>
+                  <p className="font-semibold">2026 Internal Conference</p>
+                  <p className="text-xs opacity-70">
+                    Lorem ipsum dolor sit amet...
+                  </p>
+                </div>
               </div>
             </div>
-          ) : null}
-
-          <button
-            type="button"
-            className="w-full border-0 bg-transparent p-0 text-left text-inherit"
-            onClick={() => {
-              setOpen(false);
-              if (pathname === "/") {
-                scrollToSectionId("products");
-              } else {
-                router.push("/#products");
-              }
-            }}
-          >
-            <MenuItem icon={<Box size={18} />} label="Product" />
-          </button>
-          <button
-            type="button"
-            className="w-full border-0 bg-transparent p-0 text-left text-inherit"
-            onClick={() => {
-              setOpen(false);
-              if (pathname === "/") {
-                scrollToSectionId("services");
-              } else {
-                router.push("/#services");
-              }
-            }}
-          >
-            <MenuItem icon={<Briefcase size={18} />} label="Services" />
-          </button>
-          <Link href="/news-services?highlight=1" onClick={() => setOpen(false)}>
-            <MenuItem
-              icon={<Newspaper size={18} />}
-              label="News and Services"
-            />
-          </Link>
-          <Link href="/auth" onClick={() => setOpen(false)}>
-            <MenuItem icon={<LogIn size={18} />} label="Login" />
-          </Link>
-        </nav>
-      </aside>
+          </div>
+        </div>
+      </div>
     </>
   );
 }
diff --git a/components/landing-page/retracting-sidedar.tsx b/components/landing-page/retracting-sidedar.tsx
index 67b4994..bc515e9 100644
--- a/components/landing-page/retracting-sidedar.tsx
+++ b/components/landing-page/retracting-sidedar.tsx
@@ -402,9 +402,6 @@ const SidebarContent = ({
 
                 <div className="space-y-2">
                   {section.items?.map((item: any) => {
-                    // =============================
-                    // ITEM WITH CHILDREN (ACCORDION)
-                    // =============================
                     if (item.children) {
                       const isExpanded = openMenus.includes(item.title);