From f38f28aaee0b54393ef4fbd737f5d89696cdfd57 Mon Sep 17 00:00:00 2001
From: Anang Yusman <anangyusman23@gmail.com>
Date: Thu, 16 Apr 2026 17:19:59 +0800
Subject: [PATCH] update data

---
 components/landing-page/landing-site-nav.tsx | 107 ++++++++++++++++---
 1 file changed, 91 insertions(+), 16 deletions(-)

diff --git a/components/landing-page/landing-site-nav.tsx b/components/landing-page/landing-site-nav.tsx
index fa8b976..f943bcb 100644
--- a/components/landing-page/landing-site-nav.tsx
+++ b/components/landing-page/landing-site-nav.tsx
@@ -20,6 +20,7 @@ import {
   Image as ImageIcon,
   FileText,
 } from "lucide-react";
+import { fetchPublishedArticles } from "@/lib/articles-public";
 
 const LANDING_SECTION_IDS = new Set(["products", "services"]);
 
@@ -49,6 +50,49 @@ export default function LandingSiteNav({
   const [open, setOpen] = useState(false);
   const [openKonten, setOpenKonten] = useState(false);
   const [activeMenu, setActiveMenu] = useState<string | null>(null);
+  const [event, setEvent] = useState<any>(null);
+  const [popular, setPopular] = useState<any[]>([]);
+
+  useEffect(() => {
+    const loadPopular = async () => {
+      const res = await fetchPublishedArticles(
+        {
+          typeId: 1,
+          limit: 3,
+          page: 1,
+          sortBy: "view_count",
+          sort: "desc",
+        },
+        { mode: "client" },
+      );
+
+      setPopular(res?.items ?? []);
+    };
+
+    loadPopular();
+  }, []);
+
+  useEffect(() => {
+    const loadEvent = async () => {
+      const res = await fetchPublishedArticles(
+        {
+          typeId: 1,
+          limit: 1,
+          page: 1,
+          sortBy: "created_at",
+          sort: "desc",
+        },
+        { mode: "client" },
+      );
+
+      const firstItem = res?.items?.[0];
+      if (firstItem) {
+        setEvent(firstItem);
+      }
+    };
+
+    loadEvent();
+  }, []);
 
   useEffect(() => {
     if (pathname !== "/") return;
@@ -330,27 +374,58 @@ export default function LandingSiteNav({
           </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>
+            <ul className="space-y-3 text-sm">
+              <p className="text-[16px] opacity-70 mb-3">POPULAR PAGES</p>
+              {popular.length > 0 ? (
+                popular.map((item) => (
+                  <li key={item.id}>
+                    <Link
+                      href={`/news/${item.slug}`}
+                      onClick={() => setOpen(false)}
+                      className="hover:underline line-clamp-2 text-sm"
+                    >
+                      {item.title}
+                    </Link>
+                  </li>
+                ))
+              ) : (
+                <li className="opacity-50">Loading...</li>
+              )}
+            </ul>
 
             {/* 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>
+
+              {event ? (
+                <div className="bg-white/10 rounded-xl p-4 flex gap-4 items-center">
+                  {/* IMAGE */}
+                  <div className="w-20 h-20 rounded-md overflow-hidden bg-white/20 shrink-0">
+                    {event.thumbnailUrl ? (
+                      <Image
+                        src={event.thumbnailUrl}
+                        alt={event.title}
+                        width={80}
+                        height={80}
+                        className="w-full h-full object-cover"
+                      />
+                    ) : (
+                      <div className="w-full h-full bg-white/20" />
+                    )}
+                  </div>
+
+                  {/* TEXT */}
+                  <div className="flex flex-col">
+                    <p className="font-semibold line-clamp-2">{event.title}</p>
+
+                    <p className="text-xs opacity-70 line-clamp-2">
+                      {event.description?.slice(0, 120)}...
+                    </p>
+                  </div>
                 </div>
-              </div>
+              ) : (
+                <p className="text-xs opacity-50">Loading...</p>
+              )}
             </div>
           </div>
         </div>