diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
index 41b50f30..7f532bad 100644
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -3,7 +3,11 @@
 import Navbar from "@/components/landing-page/Navbar";
 import Hero from "@/components/landing-page/Hero";
 import SearchSection from "@/components/landing-page/SearchSection";
-import Carousel from "@/components/landing-page/Carousel";
+import KontenTerbaru from "@/components/landing-page/KontenTerbaru";
+import KontenTerpopuler from "@/components/landing-page/KontenTerpopuler";
+import KategoriKonten from "@/components/landing-page/KategoriKonten";
+import LiputanWilayah from "@/components/landing-page/LiputanWilayah";
+import Footer from "@/components/landing-page/Footer";
 
 
 const Home = ({ params: { locale } }: { params: { locale: string } }) => {
@@ -12,7 +16,12 @@ const Home = ({ params: { locale } }: { params: { locale: string } }) => {
       <Navbar />
       <Hero />
       <SearchSection />
-      <Carousel />
+      <KontenTerbaru />
+      <KontenTerpopuler />
+      <KategoriKonten />
+      <LiputanWilayah />
+      <Footer />
+     
     </>
   );
 };
diff --git a/components/landing-page/Carousel.tsx b/components/landing-page/Carousel.tsx
deleted file mode 100644
index ac87111e..00000000
--- a/components/landing-page/Carousel.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from "react";
-
-const Carousel = () => {
-  return (
-    <div className="max-w-5xl mx-auto p-4">
-      <div className="flex justify-between items-center mb-4">
-        <h2 className="text-xl font-bold bg-[#bb3523] px-4 py-1 rounded-full text-white">
-          <span className="text-black">Konten</span> Terbaru
-        </h2>
-        <div className="flex space-x-4">
-          <button className="text-sm font-medium">Audio Visual</button>
-          <button className="text-sm font-medium">Audio</button>
-          <button className="text-sm font-medium">Foto</button>
-          <button className="text-sm font-medium">Teks</button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Carousel;
diff --git a/components/landing-page/Footer.tsx b/components/landing-page/Footer.tsx
new file mode 100644
index 00000000..1e8bdcfc
--- /dev/null
+++ b/components/landing-page/Footer.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+
+const Footer = () => {
+  return (
+    <footer className="bg-red-600 text-white text-sm py-4">
+      <div className="container mx-auto flex flex-col md:flex-row justify-between items-center space-y-2 md:space-y-0 px-4">
+        {/* Hak Cipta */}
+        <div className="text-center md:text-left">Hak Cipta © 2023 Divisi Humas Polri. All Right Reserved.</div>
+
+        {/* Menu Links */}
+        <div className="flex flex-wrap justify-center items-center space-x-3">
+          <a href="#" className="hover:underline">
+            FeedBack
+          </a>
+          <span className="hidden md:inline-block">|</span>
+          <a href="#" className="hover:underline">
+            Hubungi Kami
+          </a>
+          <span className="hidden md:inline-block">|</span>
+          <a href="#" className="hover:underline">
+            FAQ
+          </a>
+          <span className="hidden md:inline-block">|</span>
+          <a href="#" className="hover:underline">
+            Privacy
+          </a>
+        </div>
+
+        {/* Social Media Icons */}
+        <div className="flex justify-center items-center space-x-3">
+          <span className="text-sm">Follow Us:</span>
+          <a href="#" aria-label="Facebook">
+            <img src="/assets/facebook.svg" alt="Facebook" className="w-5 h-5" />
+          </a>
+          <a href="#" aria-label="Instagram">
+            <img src="/assets/instagram.svg" alt="Instagram" className="w-5 h-5" />
+          </a>
+          <a href="#" aria-label="Twitter">
+            <img src="/assets/twitter.svg" alt="Instagram" className="w-5 h-5" />
+          </a>
+          <a href="#" aria-label="TikTok">
+            <img src="/assets/tiktok.svg" alt="TikTok" className="w-5 h-5" />
+          </a>
+          <a href="#" aria-label="YouTube">
+            <img src="/assets/youtube.svg" alt="YouTube" className="w-5 h-5" />
+          </a>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/components/landing-page/Hero.tsx b/components/landing-page/Hero.tsx
index 061417e3..dd4ba93c 100644
--- a/components/landing-page/Hero.tsx
+++ b/components/landing-page/Hero.tsx
@@ -3,19 +3,10 @@ import React, { useEffect, useState } from "react";
 const images = ["/assets/banner-sample.png", "/assets/img-header-blog.png"];
 
 const Hero: React.FC = () => {
-  const [currentImageIndex, setCurrentImageIndex] = useState(0);
-  useEffect(() => {
-    const intervalId = setInterval(() => {
-      setCurrentImageIndex((prevIndex) => (prevIndex + 1) % images.length);
-    }, 10000);
-    return () => clearInterval(intervalId);
-  }, []);
-
   return (
-    <div 
-    className="flex flex-col lg:flex-row items-start gap-4 p-4 max-w-screen-xl h-fit mx-auto">
+    <div className="flex flex-col lg:flex-row items-start gap-4 p-4 max-w-screen-xl h-fit mx-auto">
       {/* Section Gambar Utama */}
-      <div className="lg:w-2/3 w-full">
+      <div className="lg:w-2/3 w-full lg:h-full">
         <div className="relative">
           <img src="/assets/banner-sample.png" alt="Gambar Utama" className="w-full rounded-lg" />
           <div className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 text-white p-4 rounded-b-lg">
@@ -27,7 +18,7 @@ const Hero: React.FC = () => {
       </div>
 
       {/* Section Daftar Artikel */}
-      <div className="lg:w-1/3 w-full">
+      <div className="lg:w-1/3 lg:h-full w-full">
         <ul className="space-y-4">
           {[
             {
@@ -35,34 +26,34 @@ const Hero: React.FC = () => {
               title: "Doa Bersama Lintas Agama Jelang Pilkada di Papua",
               time: "26 November 2024 16:33 WIT",
               views: 13,
+              src: "https://mediahub.polri.go.id/api/media/view?id=113865&operation=thumbnail&isSmall=true&currentMilis=1732784412735",
             },
             {
               label: "OPS MANTAP PRAJA & PILKADA 2024",
               title: "Potret Pengawalan Distribusi Logistik Pilkada ke Distrik-distrik di Kabupaten Yahukimo",
               time: "26 November 2024 16:29 WIT",
               views: 29,
+              src: "https://mediahub.polri.go.id/api/media/view?id=113948&operation=thumbnail&isSmall=true&currentMilis=1732784412735",
             },
             {
               label: "INFOGRAFIS",
               title: "Dirgahayu ke-62 Seskoal",
               time: "26 November 2024 16:26 WIB",
               views: 2,
+              src: "https://mediahub.polri.go.id/api/media/view?id=113624&operation=thumbnail&isSmall=true&currentMilis=1732784412736",
             },
             {
               label: "UNGKAP KASUS",
               title: "Evakuasi 30 Korban Kecelakaan Maut Truk di Tolikara",
               time: "26 November 2024 16:25 WIT",
               views: 26,
+              src: "https://mediahub.polri.go.id/api/media/view?id=113815&operation=thumbnail&isSmall=true&currentMilis=1732784412736",
             },
           ].map((item, index) => (
             <li key={index} className="flex gap-4 items-start bg-white shadow rounded-lg p-4">
               <div className="flex-shrink-0 w-24 h-16 bg-gray-200 rounded-lg">
                 {/* Placeholder Thumbnail */}
-                <img
-                  src="/"
-                  alt={item.title}
-                  className="w-full h-full object-cover rounded-lg"
-                />
+                <img src={item.src} alt={item.title} className="w-full h-full object-cover rounded-lg" />
               </div>
               <div>
                 <span className="text-white bg-[#bb3523] px-4 py-1 rounded-lg  text-xs font-bold uppercase">{item.label}</span>
diff --git a/components/landing-page/KategoriKonten.tsx b/components/landing-page/KategoriKonten.tsx
new file mode 100644
index 00000000..8a406ba3
--- /dev/null
+++ b/components/landing-page/KategoriKonten.tsx
@@ -0,0 +1,93 @@
+import Link from "next/link";
+import React from "react";
+
+const KategoriKonten = () => {
+  return (
+    <div className="max-w-screen-xl mx-auto px-4 py-10">
+      <h2 className="text-center text-xl lg:text-2xl font-bold text-red-600 mb-4">
+        Kategori <span className="text-black">Konten</span>
+      </h2>
+      <div className="w-48 h-1 bg-red-600 mx-auto mb-6"></div>
+      <div className="grid my-3 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        <Link href="#" className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
+          <img src="https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=125&currentMilis=1732769540018" className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
+          <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent text-white p-2">
+            <h3 className="text-sm font-semibold truncate">PON XXI</h3>
+          </div>
+        </Link>
+        <Link href="#" className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
+          <img src="https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=128&currentMilis=1732769540018" className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
+          <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent text-white p-2">
+            <h3 className="text-sm font-semibold truncate">OPS LILIN NATARU 2024</h3>
+          </div>
+        </Link>
+        <Link href="#" className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
+          <img src="https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=127&currentMilis=1732769540018" className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
+          <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent text-white p-2">
+            <h3 className="text-sm font-semibold truncate">HUT HUMAS KE-73</h3>
+          </div>
+        </Link>
+        <Link href="#" className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
+          <img src="https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=126&currentMilis=1732769540018" className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
+          <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent text-white p-2">
+            <h3 className="text-sm font-semibold truncate">OPS ZEBRA 2024</h3>
+          </div>
+        </Link>
+      </div>
+      <div className="grid my-3 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        <Link href="#" className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
+          <img src="https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=93&currentMilis=1732769540018" className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
+          <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent text-white p-2">
+            <h3 className="text-sm font-semibold truncate">OPS MANTAP PRAJA & PILKADA 2024</h3>
+          </div>
+        </Link>
+        <Link href="#" className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
+          <img src="https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=94&currentMilis=1732769540018" className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
+          <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent text-white p-2">
+            <h3 className="text-sm font-semibold truncate">PENANGANAN KARHUTLA</h3>
+          </div>
+        </Link>
+        <Link href="#" className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
+          <img src="https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=1&currentMilis=1732769540018" className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
+          <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent text-white p-2">
+            <h3 className="text-sm font-semibold truncate">PERS RILIS</h3>
+          </div>
+        </Link>
+        <Link href="#" className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
+          <img src="https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=2&currentMilis=1732769540018" className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
+          <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black backdrop:to-transparent text-white p-2">
+            <h3 className="text-sm font-semibold truncate">SEPUTAR PRESTASI</h3>
+          </div>
+        </Link>
+      </div>
+      <div className="grid my-3 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        <Link href="#" className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
+          <img src="https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=3&currentMilis=1732769540018" className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
+          <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent text-white p-2">
+            <h3 className="text-sm font-semibold truncate">LIPUTAN KEGIATAN</h3>
+          </div>
+        </Link>
+        <Link href="#" className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
+          <img src="https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=5&currentMilis=1732769540018" className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
+          <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent text-white p-2">
+            <h3 className="text-sm font-semibold truncate">UNGKAP KASUS</h3>
+          </div>
+        </Link>
+        <Link href="#" className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
+          <img src="https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=6&currentMilis=1732769540018" className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
+          <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent text-white p-2">
+            <h3 className="text-sm font-semibold truncate">GIAT PIMPINAN</h3>
+          </div>
+        </Link>
+        <Link href="#" className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
+          <img src="https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=75&currentMilis=1732769540018" className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
+          <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent text-white p-2">
+            <h3 className="text-sm font-semibold truncate">INFO GRAFIS</h3>
+          </div>
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default KategoriKonten;
diff --git a/components/landing-page/KontenTerbaru.tsx b/components/landing-page/KontenTerbaru.tsx
new file mode 100644
index 00000000..7a9b4f96
--- /dev/null
+++ b/components/landing-page/KontenTerbaru.tsx
@@ -0,0 +1,119 @@
+import React, { useState } from "react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
+import { Card, CardContent } from "../ui/card";
+import Link from "next/link";
+
+const dummyImage = [
+  { id: 1, thumbnail: "/assets/banner-sample.png" },
+  { id: 2, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=125&currentMilis=1732769540018" },
+  { id: 3, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=128&currentMilis=1732769540018" },
+  { id: 4, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=127&currentMilis=1732769540018" },
+  { id: 5, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=93&currentMilis=1732769540018" },
+];
+
+const KontenTerbaru = () => {
+  const [selectedTab, setSelectedTab] = useState("video");
+
+  return (
+    <div className="w-full">
+      <div className="space-x-5 flex flex-col p-4">
+        <div className="flex px-10 flex-row gap-5 mb-4">
+          <h2 className="flex items-center text-xl font-bold bg-[#bb3523] px-4 py-1 rounded-lg text-white">
+            <span className="text-black ">Konten {" "}</span> Terbaru
+          </h2>
+          <Tabs value={selectedTab} onValueChange={setSelectedTab}>
+            <TabsList>
+              <TabsTrigger value="video" className="relative text-lg md:text-xl font-bold text-black dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
+                Audio Visual
+              </TabsTrigger>
+              <TabsTrigger value="audio" className="relative text-lg md:text-xl font-bold text-black dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
+                Audio
+              </TabsTrigger>
+              <TabsTrigger value="image" className="relative text-lg md:text-xl font-bold text-black dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
+                Foto
+              </TabsTrigger>
+              <TabsTrigger value="teks" className="relative text-lg md:text-xl font-bold text-black dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
+                Teks
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
+        </div>
+        <div className="px-10">
+          {selectedTab == "video" ? (
+            <Carousel>
+              <CarouselContent>
+                {dummyImage.map((image) => (
+                  <CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
+                    <Card>
+                      <CardContent className="flex items-center justify-center">
+                        <img src={image.thumbnail} className="h-60 object-cover w-full" />
+                      </CardContent>
+                    </Card>
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+              <CarouselPrevious />
+              <CarouselNext />
+            </Carousel>
+          ) : selectedTab == "audio" ? (
+            <Carousel>
+              <CarouselContent>
+                {dummyImage.map((image) => (
+                  <CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
+                    <Card>
+                      <CardContent className="flex items-center justify-center">
+                        <img src={image.thumbnail} className="h-60 object-cover w-full" />
+                      </CardContent>
+                    </Card>
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+              <CarouselPrevious />
+              <CarouselNext />
+            </Carousel>
+          ) : selectedTab == "image" ? (
+            <Carousel>
+              <CarouselContent>
+                {dummyImage.map((image) => (
+                  <CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
+                    <Card>
+                      <CardContent className="flex items-center justify-center">
+                        <img src={image.thumbnail} className="h-60 object-cover w-full" />
+                      </CardContent>
+                    </Card>
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+              <CarouselPrevious />
+              <CarouselNext />
+            </Carousel>
+          ) : (
+            <Carousel>
+              <CarouselContent>
+                {dummyImage.map((image) => (
+                  <CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
+                    <Card>
+                      <CardContent>
+                        <img src={image.thumbnail} className="h-60 object-cover w-full" />
+                      </CardContent>
+                    </Card>
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+              <CarouselPrevious />
+              <CarouselNext />
+            </Carousel>
+          )}
+        </div>
+      </div>
+      <div className="flex items-center flex-row justify-center">
+        <Link href="#" className="border text-red-500 text-md px-4 py-1 border-red-500">
+          LIHAT SEMUA
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default KontenTerbaru;
diff --git a/components/landing-page/KontenTerpopuler.tsx b/components/landing-page/KontenTerpopuler.tsx
new file mode 100644
index 00000000..f67fab1f
--- /dev/null
+++ b/components/landing-page/KontenTerpopuler.tsx
@@ -0,0 +1,119 @@
+import React from "react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
+import { Card, CardContent } from "../ui/card";
+import Link from "next/link";
+import { useState } from "react";
+
+const dummyImage = [
+  { id: 1, thumbnail: "/assets/banner-sample.png" },
+  { id: 2, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=125&currentMilis=1732769540018" },
+  { id: 3, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=128&currentMilis=1732769540018" },
+  { id: 4, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=127&currentMilis=1732769540018" },
+  { id: 5, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=93&currentMilis=1732769540018" },
+];
+
+const KontenTerpopuler = () => {
+  const [selectedTab, setSelectedTab] = useState("video");
+  return (
+    <div className="w-full">
+      <div className="space-x-5 flex flex-col  p-4">
+        <div className="flex px-10 flex-row gap-5 mb-4">
+          <h2 className="flex items-center text-xl font-bold bg-[#bb3523] px-4 py-1 rounded-lg text-white">
+            <span className="text-black ">Konten {" "}</span> Terpopuler
+          </h2>
+          <Tabs value={selectedTab} onValueChange={setSelectedTab}>
+            <TabsList>
+              <TabsTrigger value="video" className="relative text-lg md:text-xl font-bold text-black dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
+                Audio Visual
+              </TabsTrigger>
+              <TabsTrigger value="audio" className="relative text-lg md:text-xl font-bold text-black dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
+                Audio
+              </TabsTrigger>
+              <TabsTrigger value="image" className="relative text-lg md:text-xl font-bold text-black dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
+                Foto
+              </TabsTrigger>
+              <TabsTrigger value="teks" className="relative text-lg md:text-xl font-bold text-black dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
+                Teks
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
+        </div>
+        <div className="px-10">
+          {selectedTab == "video" ? (
+            <Carousel>
+              <CarouselContent>
+                {dummyImage.map((image) => (
+                  <CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
+                    <Card>
+                      <CardContent className="flex items-center justify-center">
+                        <img src={image.thumbnail} className="h-60 object-cover w-full" />
+                      </CardContent>
+                    </Card>
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+              <CarouselPrevious />
+              <CarouselNext />
+            </Carousel>
+          ) : selectedTab == "audio" ? (
+            <Carousel>
+              <CarouselContent>
+                {dummyImage.map((image) => (
+                  <CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
+                    <Card>
+                      <CardContent className="flex items-center justify-center">
+                        <img src={image.thumbnail} className="h-60 object-cover w-full" />
+                      </CardContent>
+                    </Card>
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+              <CarouselPrevious />
+              <CarouselNext />
+            </Carousel>
+          ) : selectedTab == "image" ? (
+            <Carousel>
+              <CarouselContent>
+                {dummyImage.map((image) => (
+                  <CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
+                    <Card>
+                      <CardContent className="flex items-center justify-center">
+                        <img src={image.thumbnail} className="h-60 object-cover w-full" />
+                      </CardContent>
+                    </Card>
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+              <CarouselPrevious />
+              <CarouselNext />
+            </Carousel>
+          ) : (
+            <Carousel>
+              <CarouselContent>
+                {dummyImage.map((image) => (
+                  <CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
+                    <Card>
+                      <CardContent>
+                        <img src={image.thumbnail} className="h-60 object-cover w-full" />
+                      </CardContent>
+                    </Card>
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+              <CarouselPrevious />
+              <CarouselNext />
+            </Carousel>
+          )}
+        </div>
+      </div>
+      <div className="flex items-center flex-row justify-center">
+        <Link href="#" className="border text-red-500 text-md px-4 py-1 border-red-500">
+          LIHAT SEMUA
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default KontenTerpopuler;
diff --git a/components/landing-page/LiputanWilayah.tsx b/components/landing-page/LiputanWilayah.tsx
new file mode 100644
index 00000000..e7d3a42c
--- /dev/null
+++ b/components/landing-page/LiputanWilayah.tsx
@@ -0,0 +1,86 @@
+import React, { useState } from "react";
+
+
+
+const LiputanWilayah: React.FC = () => {
+  const [searchTerm, setSearchTerm] = useState("");
+
+  
+  const regions = [
+    { name: "Polda Metro Jaya", logo: "/assets/polda/polda-metro.png" },
+    { name: "Polda Jawa Barat", logo: "/assets/polda/polda-jabar.png" },
+    { name: "Polda Banten", logo: "/assets/polda/polda-banten.png" },
+    { name: "Polda Jawa Tengah", logo: "/assets/polda/polda-jateng.png" },
+    { name: "Polda D.I Yogyakarta", logo: "/assets/polda/polda-diy.png" },
+    { name: "Polda Jawa Timur", logo: "/assets/polda/polda-jatim.png" },
+    { name: "Polda Aceh", logo: "/assets/polda/polda-aceh.png" },
+    { name: "Polda Sumatera Utara", logo: "/assets/polda/polda-sumut.png" },
+    { name: "Polda Sumatera Barat", logo: "/assets/polda/polda-sumbar.png" },
+    { name: "Polda Riau", logo: "/assets/polda/polda-riau.png" },
+    { name: "Polda Kep. Riau", logo: "/assets/polda/polda-kepri.png" },
+    { name: "Polda Jambi", logo: "/assets/polda/polda-jambi.png" },
+    { name: "Polda Sumatera Selatan", logo: "/assets/polda/polda-sumsel.png" },
+    { name: "Polda Kep. Bangka Belitung", logo: "/assets/polda/polda-bangkabelitung.png" },
+    { name: "Polda Bengkulu", logo: "/assets/polda/polda-bengkulu.png" },
+    { name: "Polda Lampung", logo: "/assets/polda/polda-lampung.png" },
+    { name: "Polda Nusa Tenggara Barat", logo: "/assets/polda/polda-ntb.png" },
+    { name: "Polda Nusa Tenggara Timur", logo: "/assets/polda/polda-ntt.png" },
+    { name: "Polda Bali", logo: "/assets/polda/polda-bali.png" },
+    { name: "Polda Kalimantan Barat", logo: "/assets/polda/polda-kalbar.png" },
+    { name: "Polda Kalimantan Tengah", logo: "/assets/polda/polda-kalteng.png" },
+    { name: "Polda Kalimantan Selatan", logo: "/assets/polda/polda-kalsel.png" },
+    { name: "Polda Kalimantan Timur", logo: "/assets/polda/polda-kaltim.png" },
+    { name: "Polda Kalimantan Utara", logo: "/assets/polda/polda-kalut.png" },
+    { name: "Polda Sulawesi Tengah", logo: "/assets/polda/polda-sulteng.png" },
+    { name: "Polda Sulawesi Utara", logo: "/assets/polda/polda-sulut.png" },
+    { name: "Polda Gorontalo", logo: "/assets/polda/polda-gorontalo.png" },
+    { name: "Polda Sulawesi Barat", logo: "/assets/polda/polda-sulbar.png" },
+    { name: "Polda Sulawesi Selatan", logo: "/assets/polda/polda-sulsel.png" },
+    { name: "Polda Sulawesi Tenggara", logo: "/assets/polda/polda-sultenggara.png" },
+    { name: "Polda Maluku Utara", logo: "/assets/polda/polda-malut.png" },
+    { name: "Polda Maluku", logo: "/assets/polda/polda-maluku.png" },
+    { name: "Polda Papua Barat", logo: "/assets/polda/polda-papbar.png" },
+    { name: "Polda Papua", logo: "/assets/polda/polda-papua.png" },
+    { name: "Satuan Kerja POLRI", logo: "/assets/polda/polda-satker.jpeg" },
+    { name: "Internasional", logo: "/assets/polda/internasional.png" },
+  ];
+
+ 
+  const filteredRegions = regions.filter((region) => region.name.toLowerCase().includes(searchTerm.toLowerCase()));
+
+  return (
+    <div className="max-w-screen-xl mx-auto px-4 py-6">
+      {/* Header */}
+      <h2 className="text-center text-2xl font-bold text-gray-800 mb-4">
+        Liputan <span className="text-red-600">Wilayah</span>
+      </h2>
+      <div className="h-1 w-48 bg-red-600 mx-auto mb-6 rounded"></div>
+
+      {/* Pencarian */}
+      <div className="flex items-center justify-center gap-4 mb-6">
+        <input
+          type="text"
+          placeholder="Pencarian"
+          className="w-full max-w-sm px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-red-600 focus:outline-none"
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+        />
+        <button className="px-2 lg:px-4 lg:py-2 bg-red-600 text-white rounded-md hover:bg-red-700">Cari Liputan &gt;</button>
+      </div>
+
+      {/* Grid Wilayah */}
+      <div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-7 lg:grid-cols-9 gap-6">
+        {filteredRegions.map((region, index) => (
+          <div key={index} className="flex flex-col items-center text-center group">
+            <div className="relative w-20 h-20 rounded-full border-2 border-red-600 overflow-hidden mb-2 flex items-center justify-center">
+              <img src={region.logo} alt={region.name} className="w-3/4 h-3/4 object-contain group-hover:scale-110 transition-transform duration-300" />
+            </div>
+            <p className="text-md font-semibold">{region.name}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default LiputanWilayah;
diff --git a/components/landing-page/Navbar.tsx b/components/landing-page/Navbar.tsx
index 76e701f2..3932a04e 100644
--- a/components/landing-page/Navbar.tsx
+++ b/components/landing-page/Navbar.tsx
@@ -2,7 +2,9 @@
 
 import React, { useState } from "react";
 import ThemeSwitcher from "@/components/partials/header/theme-switcher";
-import StaggeredDropDown from "./StaggeredDropdown";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu";
+import Link from "next/link";
+import { FiFile, FiImage, FiMusic, FiYoutube } from "react-icons/fi";
 
 const Navbar = () => {
   const [menuOpen, setMenuOpen] = useState(false);
@@ -22,16 +24,49 @@ const Navbar = () => {
 
         {/* Desktop Navigation */}
         <div className="hidden md:flex items-center space-x-6">
-          <span>
-            <svg className="ml-6 " width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path
-                d="M20 7.5H5C4.6023 7.5004 4.221 7.65856 3.93978 7.93978C3.65856 8.221 3.5004 8.6023 3.5 9V19.5C3.5004 19.8977 3.65856 20.279 3.93978 20.5602C4.221 20.8414 4.6023 20.9996 5 21H20C20.3977 20.9996 20.779 20.8414 21.0602 20.5602C21.3414 20.279 21.4996 19.8977 21.5 19.5V9C21.4996 8.6023 21.3414 8.221 21.0602 7.93978C20.779 7.65856 20.3977 7.5004 20 7.5ZM10.25 17.25V11.25L15.5 14.25L10.25 17.25ZM5 4.5H20V6H5V4.5ZM6.5 1.5H18.5V3H6.5V1.5Z"
-                fill="#000000"
-              />
-            </svg>
-          </span>
-          <StaggeredDropDown />
-          <button className="text-black font-medium flex flex-row items-center justify-center hover:text-gray-800">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <a className="bg-white text-black flex flex-row justify-center items-center ml-5 cursor-pointer">
+                <svg className="mx-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path
+                    d="M20 7.5H5C4.6023 7.5004 4.221 7.65856 3.93978 7.93978C3.65856 8.221 3.5004 8.6023 3.5 9V19.5C3.5004 19.8977 3.65856 20.279 3.93978 20.5602C4.221 20.8414 4.6023 20.9996 5 21H20C20.3977 20.9996 20.779 20.8414 21.0602 20.5602C21.3414 20.279 21.4996 19.8977 21.5 19.5V9C21.4996 8.6023 21.3414 8.221 21.0602 7.93978C20.779 7.65856 20.3977 7.5004 20 7.5ZM10.25 17.25V11.25L15.5 14.25L10.25 17.25ZM5 4.5H20V6H5V4.5ZM6.5 1.5H18.5V3H6.5V1.5Z"
+                    fill="#000000"
+                  />
+                </svg>
+                Konten
+                <svg className="flex items-center justify-center" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+                  <path fill="currentColor" fill-rule="evenodd" d="m6 7l6 6l6-6l2 2l-8 8l-8-8z" />
+                </svg>
+              </a>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="p-0 rounded-md overflow-hidden">
+              <DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
+                <span className="text-default-700c flex flex-row justify-center items-center group-hover:text-primary-foreground">
+                  <FiYoutube className="mr-2" />
+                  Audio Visual
+                </span>
+              </DropdownMenuItem>
+              <DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
+                <span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
+                  <FiMusic className="mr-2" />
+                  Audio
+                </span>
+              </DropdownMenuItem>
+              <DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
+                <span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
+                  <FiImage className="mr-2" />
+                  Foto
+                </span>
+              </DropdownMenuItem>
+              <DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
+                <span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
+                  <FiFile className="mr-2" />
+                  Teks
+                </span>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <Link href="#" className="text-black font-medium flex flex-row items-center justify-center hover:text-gray-800">
             <span>
               <svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
@@ -41,8 +76,8 @@ const Navbar = () => {
               </svg>
             </span>
             Jadwal
-          </button>
-          <button className="text-black flex flex-row items-center justify-center font-medium hover:text-gray-800">
+          </Link>
+          <Link href="" className="text-black flex flex-row items-center justify-center font-medium hover:text-gray-800">
             <span>
               <svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
@@ -54,11 +89,11 @@ const Navbar = () => {
               </svg>
             </span>
             Indeks
-          </button>
-          <div className="flex items-center space-x-1 text-red-600">
+          </Link>
+          <Link href="#" className="flex items-center space-x-1 text-red-600">
             <span className="w-2 h-2 bg-red-500 rounded-full"></span>
             <span className="font-medium">Live</span>
-          </div>
+          </Link>
           <div className="flex items-center space-x-1  ">
             <a href="https://tvradio.polri.go.id/">
               <img src="/assets/polriTv.png" className="w-full h-auto" />
@@ -83,7 +118,7 @@ const Navbar = () => {
       {/* Mobile Menu */}
       {menuOpen && (
         <div className="md:hidden bg-white px-4 size-9 py-3 space-y-3">
-          <button className="flex text-black flex-row justify-center items-center font-medium hover:text-gray-800">
+          <Link href="#" className="flex text-black flex-row justify-center items-center font-medium hover:text-gray-800">
             <span>
               <svg className="ml-6 -right-3" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
@@ -93,8 +128,8 @@ const Navbar = () => {
               </svg>
             </span>
             Konten
-          </button>
-          <button className="flex text-black flex-row justify-center items-center  font-medium hover:text-gray-800">
+          </Link>
+          <Link href="#" className="flex  text-black flex-row justify-center items-center  font-medium hover:text-gray-800">
             <span>
               <svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
@@ -104,8 +139,8 @@ const Navbar = () => {
               </svg>
             </span>
             Jadwal
-          </button>
-          <button className="flex text-black flex-row justify-center items-center  font-medium hover:text-gray-800">
+          </Link>
+          <Link href="#" className="flex text-black flex-row justify-center items-center  font-medium hover:text-gray-800">
             <span>
               <svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
@@ -117,7 +152,7 @@ const Navbar = () => {
               </svg>
             </span>
             Indeks
-          </button>
+          </Link>
           <div className="flex items-center space-x-1 text-red-600">
             <span className="w-2 h-2 bg-red-500 rounded-full"></span>
             <span className="font-medium">Live</span>
diff --git a/components/landing-page/NewsTicker.tsx b/components/landing-page/NewsTicker.tsx
new file mode 100644
index 00000000..5d78c30f
--- /dev/null
+++ b/components/landing-page/NewsTicker.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const NewsTicker = () => {
+  return (
+    <div></div>
+  )
+}
+
+export default NewsTicker
\ No newline at end of file
diff --git a/components/landing-page/SearchSection.tsx b/components/landing-page/SearchSection.tsx
index 868c6887..9042b2ee 100644
--- a/components/landing-page/SearchSection.tsx
+++ b/components/landing-page/SearchSection.tsx
@@ -1,5 +1,6 @@
 import React from "react";
-import StaggeredDropDown from "./StaggeredDropdown";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu";
+import { FiFile, FiImage, FiMusic, FiYoutube } from "react-icons/fi";
 
 const SearchSection: React.FC = () => {
   return (
@@ -9,7 +10,7 @@ const SearchSection: React.FC = () => {
         <h1 className="text-2xl md:text-3xl font-bold text-gray-800">
           <span className="text-red-600">Eksplorasi</span> dan <span className="text-red-600">Download</span> Liputan Resmi Kami
         </h1>
-        <div className="w-auto h-1 bg-red-600 mx-auto mt-2"></div>
+        <div className="w-full h-1 bg-red-600 mx-auto mt-2"></div>
         <p className="text-sm md:text-base text-gray-500 mt-4">Liputan resmi yang bersumber dari kegiatan Polri di Mabes dan Polda seluruh Indonesia</p>
 
         {/* Search Form */}
@@ -17,15 +18,48 @@ const SearchSection: React.FC = () => {
           {/* Dropdown */}
           <div className="flex items-center border border-gray-300 rounded-lg overflow-hidden">
             <button className="flex items-center px-4 py-2 bg-gray-100 text-gray-600 hover:bg-gray-200">
-              <span className="material-icons text-gray-500 mr-2">
-                <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path
-                    d="M20 7.5H5C4.6023 7.5004 4.221 7.65856 3.93978 7.93978C3.65856 8.221 3.5004 8.6023 3.5 9V19.5C3.5004 19.8977 3.65856 20.279 3.93978 20.5602C4.221 20.8414 4.6023 20.9996 5 21H20C20.3977 20.9996 20.779 20.8414 21.0602 20.5602C21.3414 20.279 21.4996 19.8977 21.5 19.5V9C21.4996 8.6023 21.3414 8.221 21.0602 7.93978C20.779 7.65856 20.3977 7.5004 20 7.5ZM10.25 17.25V11.25L15.5 14.25L10.25 17.25ZM5 4.5H20V6H5V4.5ZM6.5 1.5H18.5V3H6.5V1.5Z"
-                    fill="#000000"
-                  />
-                </svg>
-              </span>
-              <StaggeredDropDown />
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <a className="text-black flex flex-row justify-center items-center ml-5 cursor-pointer">
+                    <svg className="mx-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <path
+                        d="M20 7.5H5C4.6023 7.5004 4.221 7.65856 3.93978 7.93978C3.65856 8.221 3.5004 8.6023 3.5 9V19.5C3.5004 19.8977 3.65856 20.279 3.93978 20.5602C4.221 20.8414 4.6023 20.9996 5 21H20C20.3977 20.9996 20.779 20.8414 21.0602 20.5602C21.3414 20.279 21.4996 19.8977 21.5 19.5V9C21.4996 8.6023 21.3414 8.221 21.0602 7.93978C20.779 7.65856 20.3977 7.5004 20 7.5ZM10.25 17.25V11.25L15.5 14.25L10.25 17.25ZM5 4.5H20V6H5V4.5ZM6.5 1.5H18.5V3H6.5V1.5Z"
+                        fill="#000000"
+                      />
+                    </svg>
+                    Konten
+                    <svg className="flex items-center justify-center" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+                      <path fill="currentColor" fill-rule="evenodd" d="m6 7l6 6l6-6l2 2l-8 8l-8-8z" />
+                    </svg>
+                  </a>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="p-0 rounded-md overflow-hidden">
+                  <DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
+                    <span className="text-default-700c flex flex-row justify-center items-center group-hover:text-primary-foreground">
+                      <FiYoutube className="mr-2" />
+                      Audio Visual
+                    </span>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
+                    <span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
+                      <FiMusic className="mr-2" />
+                      Audio
+                    </span>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
+                    <span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
+                      <FiImage className="mr-2" />
+                      Foto
+                    </span>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
+                    <span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
+                      <FiFile className="mr-2" />
+                      Teks
+                    </span>
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
             </button>
           </div>
 
diff --git a/components/landing-page/StaggeredDropdown.tsx b/components/landing-page/StaggeredDropdown.tsx
deleted file mode 100644
index 52eb76b8..00000000
--- a/components/landing-page/StaggeredDropdown.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { FiChevronDown, FiYoutube, FiMusic, FiImage, FiFile } from "react-icons/fi";
-import { motion } from "framer-motion";
-import { Dispatch, SetStateAction, useState } from "react";
-import { IconType } from "react-icons";
-
-const StaggeredDropDown = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <div className="flex items-center  justify-center bg-white ">
-      <motion.div animate={open ? "open" : "closed"} className="relative">
-        <button onClick={() => setOpen((pv) => !pv)} className="flex items-center text-black transition-colors">
-          <span className="font-medium text-md">Konten</span>
-          <motion.span variants={iconVariants}>
-            <FiChevronDown />
-          </motion.span>
-        </button>
-
-        <motion.ul
-          initial={wrapperVariants.closed}
-          variants={wrapperVariants}
-          style={{ originY: "top", translateX: "-50%" }}
-          className="flex flex-col z-50 gap-2 p-2 rounded-lg shadow-xl absolute top-[120%] left-[50%] w-48 overflow-hidden bg-white"
-        >
-          <Option setOpen={setOpen} Icon={FiYoutube} text="Audio Visual" />
-          <Option setOpen={setOpen} Icon={FiMusic} text="Audio" />
-          <Option setOpen={setOpen} Icon={FiImage} text="Foto" />
-          <Option setOpen={setOpen} Icon={FiFile} text="Teks" />
-        </motion.ul>
-      </motion.div>
-    </div>
-  );
-};
-
-const Option = ({ text, Icon, setOpen }: { text: string; Icon: IconType; setOpen: Dispatch<SetStateAction<boolean>> }) => {
-  return (
-    <motion.li
-      variants={itemVariants}
-      onClick={() => setOpen(false)}
-      className="flex items-center gap-2 w-full p-2 text-xs font-medium whitespace-nowrap rounded-md hover:bg-indigo-100 text-slate-700 hover:text-red-500 transition-colors cursor-pointer"
-    >
-      <motion.span variants={actionIconVariants}>
-        <Icon />
-      </motion.span>
-      <span>{text}</span>
-    </motion.li>
-  );
-};
-
-export default StaggeredDropDown;
-
-const wrapperVariants = {
-  open: {
-    scaleY: 1,
-    transition: {
-      when: "beforeChildren",
-      staggerChildren: 0.1,
-    },
-  },
-  closed: {
-    scaleY: 0,
-    transition: {
-      when: "afterChildren",
-      staggerChildren: 0.1,
-    },
-  },
-};
-
-const iconVariants = {
-  open: { rotate: 180 },
-  closed: { rotate: 0 },
-};
-
-const itemVariants = {
-  open: {
-    opacity: 1,
-    y: 0,
-    transition: {
-      when: "beforeChildren",
-    },
-  },
-  closed: {
-    opacity: 0,
-    y: -15,
-    transition: {
-      when: "afterChildren",
-    },
-  },
-};
-
-const actionIconVariants = {
-  open: { scale: 1, y: 0 },
-  closed: { scale: 0, y: -7 },
-};
diff --git a/package-lock.json b/package-lock.json
index da0764a8..e0828d86 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -81,6 +81,7 @@
         "nextra-theme-docs": "^2.13.4",
         "quill": "^2.0.2",
         "react": "^18",
+        "react-advanced-news-ticker": "^1.0.1",
         "react-apexcharts": "^1.4.1",
         "react-chartjs-2": "^5.2.0",
         "react-day-picker": "^8.10.1",
@@ -10678,6 +10679,28 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-advanced-news-ticker": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/react-advanced-news-ticker/-/react-advanced-news-ticker-1.0.1.tgz",
+      "integrity": "sha512-gWFW9jovuA5472Rkt13+SHnblWu9OyZ2seFC/xMgf5OthPCyVnt6gSlX3NTq4QCEEhUlVJzsm+xY+G+VKg85ag==",
+      "dependencies": {
+        "prop-types": "^15.7.2",
+        "react": "^16.13.1"
+      }
+    },
+    "node_modules/react-advanced-news-ticker/node_modules/react": {
+      "version": "16.14.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
+      "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/react-apexcharts": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/react-apexcharts/-/react-apexcharts-1.6.0.tgz",
diff --git a/package.json b/package.json
index e43c8a66..e1a9d998 100644
--- a/package.json
+++ b/package.json
@@ -82,6 +82,7 @@
     "nextra-theme-docs": "^2.13.4",
     "quill": "^2.0.2",
     "react": "^18",
+    "react-advanced-news-ticker": "^1.0.1",
     "react-apexcharts": "^1.4.1",
     "react-chartjs-2": "^5.2.0",
     "react-day-picker": "^8.10.1",
diff --git a/public/assets/facebook.svg b/public/assets/facebook.svg
new file mode 100644
index 00000000..d4b05b9f
--- /dev/null
+++ b/public/assets/facebook.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="white" d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95"/></svg>
\ No newline at end of file
diff --git a/public/assets/instagram.svg b/public/assets/instagram.svg
new file mode 100644
index 00000000..adbe9c31
--- /dev/null
+++ b/public/assets/instagram.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="white" d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3"/></svg>
\ No newline at end of file
diff --git a/public/assets/polda/internasional.png b/public/assets/polda/internasional.png
new file mode 100644
index 00000000..9637ada0
Binary files /dev/null and b/public/assets/polda/internasional.png differ
diff --git a/public/assets/polda/polda-aceh.png b/public/assets/polda/polda-aceh.png
new file mode 100644
index 00000000..b6a8c17b
Binary files /dev/null and b/public/assets/polda/polda-aceh.png differ
diff --git a/public/assets/polda/polda-bali.png b/public/assets/polda/polda-bali.png
new file mode 100644
index 00000000..bb03bf77
Binary files /dev/null and b/public/assets/polda/polda-bali.png differ
diff --git a/public/assets/polda/polda-bangkabelitung.png b/public/assets/polda/polda-bangkabelitung.png
new file mode 100644
index 00000000..fe6de95c
Binary files /dev/null and b/public/assets/polda/polda-bangkabelitung.png differ
diff --git a/public/assets/polda/polda-banten.png b/public/assets/polda/polda-banten.png
new file mode 100644
index 00000000..da59f3d7
Binary files /dev/null and b/public/assets/polda/polda-banten.png differ
diff --git a/public/assets/polda/polda-bengkulu.png b/public/assets/polda/polda-bengkulu.png
new file mode 100644
index 00000000..74d1c510
Binary files /dev/null and b/public/assets/polda/polda-bengkulu.png differ
diff --git a/public/assets/polda/polda-diy.png b/public/assets/polda/polda-diy.png
new file mode 100644
index 00000000..6957c18f
Binary files /dev/null and b/public/assets/polda/polda-diy.png differ
diff --git a/public/assets/polda/polda-gorontalo.png b/public/assets/polda/polda-gorontalo.png
new file mode 100644
index 00000000..8b3fe29e
Binary files /dev/null and b/public/assets/polda/polda-gorontalo.png differ
diff --git a/public/assets/polda/polda-jabar.png b/public/assets/polda/polda-jabar.png
new file mode 100644
index 00000000..5d4345c7
Binary files /dev/null and b/public/assets/polda/polda-jabar.png differ
diff --git a/public/assets/polda/polda-jambi.png b/public/assets/polda/polda-jambi.png
new file mode 100644
index 00000000..447ff436
Binary files /dev/null and b/public/assets/polda/polda-jambi.png differ
diff --git a/public/assets/polda/polda-jateng.png b/public/assets/polda/polda-jateng.png
new file mode 100644
index 00000000..0cf70cbe
Binary files /dev/null and b/public/assets/polda/polda-jateng.png differ
diff --git a/public/assets/polda/polda-jatim.png b/public/assets/polda/polda-jatim.png
new file mode 100644
index 00000000..4ff768ea
Binary files /dev/null and b/public/assets/polda/polda-jatim.png differ
diff --git a/public/assets/polda/polda-kalbar.png b/public/assets/polda/polda-kalbar.png
new file mode 100644
index 00000000..0ae2f184
Binary files /dev/null and b/public/assets/polda/polda-kalbar.png differ
diff --git a/public/assets/polda/polda-kalsel.png b/public/assets/polda/polda-kalsel.png
new file mode 100644
index 00000000..f5d5cc7a
Binary files /dev/null and b/public/assets/polda/polda-kalsel.png differ
diff --git a/public/assets/polda/polda-kalteng.png b/public/assets/polda/polda-kalteng.png
new file mode 100644
index 00000000..875c173f
Binary files /dev/null and b/public/assets/polda/polda-kalteng.png differ
diff --git a/public/assets/polda/polda-kaltim.png b/public/assets/polda/polda-kaltim.png
new file mode 100644
index 00000000..d5415301
Binary files /dev/null and b/public/assets/polda/polda-kaltim.png differ
diff --git a/public/assets/polda/polda-kalut.png b/public/assets/polda/polda-kalut.png
new file mode 100644
index 00000000..e773598b
Binary files /dev/null and b/public/assets/polda/polda-kalut.png differ
diff --git a/public/assets/polda/polda-kepri.png b/public/assets/polda/polda-kepri.png
new file mode 100644
index 00000000..417bfd0a
Binary files /dev/null and b/public/assets/polda/polda-kepri.png differ
diff --git a/public/assets/polda/polda-lampung.png b/public/assets/polda/polda-lampung.png
new file mode 100644
index 00000000..27fb0431
Binary files /dev/null and b/public/assets/polda/polda-lampung.png differ
diff --git a/public/assets/polda/polda-maluku.png b/public/assets/polda/polda-maluku.png
new file mode 100644
index 00000000..48ecaac3
Binary files /dev/null and b/public/assets/polda/polda-maluku.png differ
diff --git a/public/assets/polda/polda-malut.png b/public/assets/polda/polda-malut.png
new file mode 100644
index 00000000..9b38f4b6
Binary files /dev/null and b/public/assets/polda/polda-malut.png differ
diff --git a/public/assets/polda/polda-metro.png b/public/assets/polda/polda-metro.png
new file mode 100644
index 00000000..c4f7513b
Binary files /dev/null and b/public/assets/polda/polda-metro.png differ
diff --git a/public/assets/polda/polda-ntb.png b/public/assets/polda/polda-ntb.png
new file mode 100644
index 00000000..61ad0d8d
Binary files /dev/null and b/public/assets/polda/polda-ntb.png differ
diff --git a/public/assets/polda/polda-ntt.png b/public/assets/polda/polda-ntt.png
new file mode 100644
index 00000000..f90ed894
Binary files /dev/null and b/public/assets/polda/polda-ntt.png differ
diff --git a/public/assets/polda/polda-papbar.png b/public/assets/polda/polda-papbar.png
new file mode 100644
index 00000000..ccf1adad
Binary files /dev/null and b/public/assets/polda/polda-papbar.png differ
diff --git a/public/assets/polda/polda-papua.png b/public/assets/polda/polda-papua.png
new file mode 100644
index 00000000..82bbc670
Binary files /dev/null and b/public/assets/polda/polda-papua.png differ
diff --git a/public/assets/polda/polda-riau.png b/public/assets/polda/polda-riau.png
new file mode 100644
index 00000000..dc63b94f
Binary files /dev/null and b/public/assets/polda/polda-riau.png differ
diff --git a/public/assets/polda/polda-satker.jpeg b/public/assets/polda/polda-satker.jpeg
new file mode 100644
index 00000000..ca5d444e
Binary files /dev/null and b/public/assets/polda/polda-satker.jpeg differ
diff --git a/public/assets/polda/polda-sulbar.png b/public/assets/polda/polda-sulbar.png
new file mode 100644
index 00000000..52f624fa
Binary files /dev/null and b/public/assets/polda/polda-sulbar.png differ
diff --git a/public/assets/polda/polda-sulsel.png b/public/assets/polda/polda-sulsel.png
new file mode 100644
index 00000000..3bcb3065
Binary files /dev/null and b/public/assets/polda/polda-sulsel.png differ
diff --git a/public/assets/polda/polda-sulteng.png b/public/assets/polda/polda-sulteng.png
new file mode 100644
index 00000000..a22b7cc0
Binary files /dev/null and b/public/assets/polda/polda-sulteng.png differ
diff --git a/public/assets/polda/polda-sultenggara.png b/public/assets/polda/polda-sultenggara.png
new file mode 100644
index 00000000..a8f96543
Binary files /dev/null and b/public/assets/polda/polda-sultenggara.png differ
diff --git a/public/assets/polda/polda-sulut.png b/public/assets/polda/polda-sulut.png
new file mode 100644
index 00000000..799c3f33
Binary files /dev/null and b/public/assets/polda/polda-sulut.png differ
diff --git a/public/assets/polda/polda-sumbar.png b/public/assets/polda/polda-sumbar.png
new file mode 100644
index 00000000..787096ed
Binary files /dev/null and b/public/assets/polda/polda-sumbar.png differ
diff --git a/public/assets/polda/polda-sumsel.png b/public/assets/polda/polda-sumsel.png
new file mode 100644
index 00000000..5c4d9bda
Binary files /dev/null and b/public/assets/polda/polda-sumsel.png differ
diff --git a/public/assets/polda/polda-sumut.png b/public/assets/polda/polda-sumut.png
new file mode 100644
index 00000000..e1b939b2
Binary files /dev/null and b/public/assets/polda/polda-sumut.png differ
diff --git a/public/assets/tiktok.svg b/public/assets/tiktok.svg
new file mode 100644
index 00000000..50d5332a
--- /dev/null
+++ b/public/assets/tiktok.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="white" d="M16.6 5.82s.51.5 0 0A4.28 4.28 0 0 1 15.54 3h-3.09v12.4a2.59 2.59 0 0 1-2.59 2.5c-1.42 0-2.6-1.16-2.6-2.6c0-1.72 1.66-3.01 3.37-2.48V9.66c-3.45-.46-6.47 2.22-6.47 5.64c0 3.33 2.76 5.7 5.69 5.7c3.14 0 5.69-2.55 5.69-5.7V9.01a7.35 7.35 0 0 0 4.3 1.38V7.3s-1.88.09-3.24-1.48"/></svg>
\ No newline at end of file
diff --git a/public/assets/twitter.svg b/public/assets/twitter.svg
new file mode 100644
index 00000000..a2dae043
--- /dev/null
+++ b/public/assets/twitter.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m13.081 10.712l-4.786-6.71a.6.6 0 0 0-.489-.252H5.28a.6.6 0 0 0-.488.948l6.127 8.59m2.162-2.576l6.127 8.59a.6.6 0 0 1-.488.948h-2.526a.6.6 0 0 1-.489-.252l-4.786-6.71m2.162-2.576l5.842-6.962m-8.004 9.538L5.077 20.25"/></svg>
\ No newline at end of file
diff --git a/public/assets/youtube.svg b/public/assets/youtube.svg
new file mode 100644
index 00000000..aeb05e56
--- /dev/null
+++ b/public/assets/youtube.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="white" d="M12 4c.855 0 1.732.022 2.582.058l1.004.048l.961.057l.9.061l.822.064a3.8 3.8 0 0 1 3.494 3.423l.04.425l.075.91c.07.943.122 1.971.122 2.954s-.052 2.011-.122 2.954l-.075.91l-.04.425a3.8 3.8 0 0 1-3.495 3.423l-.82.063l-.9.062l-.962.057l-1.004.048A62 62 0 0 1 12 20a62 62 0 0 1-2.582-.058l-1.004-.048l-.961-.057l-.9-.062l-.822-.063a3.8 3.8 0 0 1-3.494-3.423l-.04-.425l-.075-.91A41 41 0 0 1 2 12c0-.983.052-2.011.122-2.954l.075-.91l.04-.425A3.8 3.8 0 0 1 5.73 4.288l.821-.064l.9-.061l.962-.057l1.004-.048A62 62 0 0 1 12 4m-2 5.575v4.85c0 .462.5.75.9.52l4.2-2.425a.6.6 0 0 0 0-1.04l-4.2-2.424a.6.6 0 0 0-.9.52Z"/></g></svg>
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index e7ff90fd..b9effb6d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -21,6 +21,6 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "components/landing-page/NewsTicker.tsx", "components/landing-page/NavBottom.js"],
   "exclude": ["node_modules"]
 }