feat: add animation and adjust ui

app/[locale]/(public)/audio/filter/page.tsx

@@ -1,6 +1,5 @@
 "use client";
 import React, { useEffect, useState } from "react";
-import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import { getListContent } from "@/service/landing/landing";
@@ -8,6 +7,7 @@ import { formatDateToIndonesian } from "@/utils/globals";
 import { useParams, usePathname, useRouter, useSearchParams } from "next/navigation";
 import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 import LandingPagination from "@/components/landing-page/pagination";
+import { Reveal } from "@/components/landing-page/Reveal";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -110,6 +110,7 @@ const FilterPage = () => {
       </div>
       {/* Left */}
       <div className="flex flex-col lg:flex-row gap-6 p-4">
+        <Reveal>
           {/* Sidebar Kiri */}
           <div className="lg:w-1/4 w-full bg-white p-4 rounded-lg shadow-md">
             <h2 className="text-lg font-semibold mb-4">Filter</h2>
@@ -170,8 +171,10 @@ const FilterPage = () => {
               </div>
             </div>
           </div>
+        </Reveal>
 
         {/* Konten Kanan */}
+        <Reveal>
           <div className="flex-1">
             <div className="flex flex-col items-end mb-4">
               <h2 className="text-lg font-semibold tetx-red-300">Urutkan berdasarkan</h2>
@@ -216,6 +219,7 @@ const FilterPage = () => {
             </div>
             <LandingPagination table={table} totalData={totalData} totalPage={totalPage} />
           </div>
+        </Reveal>
       </div>
     </div>
   );

app/[locale]/(public)/contact/page.tsx

@@ -1,8 +1,11 @@
+"use client";
+import { Reveal } from "@/components/landing-page/Reveal";
 import React from "react";
 
 const ContactForm = () => {
   return (
     <div className="max-w-2xl mx-auto bg-white p-6">
+      <Reveal>
         {/* Header */}
         <div className="flex items-center justify-center mb-6">
           <img src="/assets/icons-contact.png" alt="contact" />
@@ -49,6 +52,7 @@ const ContactForm = () => {
             Kirim
           </button>
         </form>
+      </Reveal>
     </div>
   );
 };

app/[locale]/(public)/document/filter/page.tsx

@@ -8,6 +8,7 @@ import { formatDateToIndonesian } from "@/utils/globals";
 import { useParams, usePathname, useRouter, useSearchParams } from "next/navigation";
 import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 import LandingPagination from "@/components/landing-page/pagination";
+import { Reveal } from "@/components/landing-page/Reveal";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -175,7 +176,9 @@ const DocumentPage = () => {
         </div>
 
         {/* Konten Kanan */}
+
         <div className="flex-1">
+          <Reveal>
             <div className="flex flex-col items-end mb-4">
               <h2 className="text-lg font-semibold tetx-red-300">Urutkan berdasarkan</h2>
               <select className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
@@ -183,8 +186,10 @@ const DocumentPage = () => {
                 <option value="terlama">Terpopuler</option>
               </select>
             </div>
+          </Reveal>
 
           {/* Card */}
+          <Reveal>
             <div className=" grid grid-cols-1 md:grid-cols-2 gap-6">
               {documentData?.map((document: any) => (
                 <a href="#" key={document?.id} className="flex flex-col bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
@@ -213,6 +218,7 @@ const DocumentPage = () => {
               ))}
             </div>
             <LandingPagination table={table} totalData={totalData} totalPage={totalPage} />
+          </Reveal>
         </div>
       </div>
     </div>

app/[locale]/(public)/faqs/page.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { Reveal } from "@/components/landing-page/Reveal";
 import React, { useState } from "react";
 
 interface FAQItem {
@@ -33,8 +34,9 @@ const FAQS: React.FC = () => {
   };
 
   return (
-    <div className="max-w-3xl mx-auto h-screen p-6">
+    <div className="max-w-3xl mx-auto h-screen p-6 mt-20">
       {/* Header */}
+      <Reveal>
         <div className="flex items-center justify-center mb-6">
           <img src="/assets/icons-faqs.png" alt="Faqs" />
           <h2 className="ml-4 text-lg lg:text-2xl font-bold text-gray-800">Frequently Asked Questions</h2>
@@ -52,6 +54,7 @@ const FAQS: React.FC = () => {
             </div>
           ))}
         </div>
+      </Reveal>
     </div>
   );
 };

app/[locale]/(public)/feedback/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Reveal } from "@/components/landing-page/Reveal";
 import React, { useState } from "react";
 
 interface RatingProps {
@@ -46,6 +47,7 @@ const FeedbackForm: React.FC = () => {
   };
 
   return (
+    <Reveal>
       <div className="max-w-6xl flex flex-col mx-auto p-4 lg:p-40 gap-5">
         <div className="flex items-center justify-center mb-6">
           <img src="/assets/icons-feedback.png" alt="Feedback" />
@@ -60,6 +62,7 @@ const FeedbackForm: React.FC = () => {
           </button>
         </div>
       </div>
+    </Reveal>
   );
 };
 

app/[locale]/(public)/image/detail/[slug]/page.tsx

@@ -10,6 +10,7 @@ import { Icon } from "@iconify/react/dist/iconify.js";
 import { textEllipsis } from "@/utils/globals";
 import { getDetail } from "@/service/landing/landing";
 import NewContent from "@/components/landing-page/new-content";
+import { Reveal } from "@/components/landing-page/Reveal";
 
 const dummyImage = [
   { id: 1, thumbnail: "/assets/banner-sample.png" },
@@ -81,11 +82,11 @@ const DetailInfo = () => {
 
   return (
     <div className="min-h-screen px-4 md:px-24 py-4">
-      {/* Container Utama */}
       <div className="rounded-md overflow-hidden md:flex">
         {/* Bagian Kiri */}
+        <Reveal>
           <div className="md:w-3/4">
-          {/* Gambar Utama */}
+            {/* Gambar Besar */}
             <div className="relative">
               <img src={detailDataImage?.files[selectedImage]?.url} alt="Main" className="w-full rounded-lg" />
               <div className="absolute top-4 left-4"></div>
@@ -100,8 +101,10 @@ const DetailInfo = () => {
               ))}
             </div>
           </div>
+        </Reveal>
 
         {/* Bagian Kanan */}
+        <Reveal>
           <div className="md:w-1/4 p-4 bg-gray-300  rounded-lg mx-4">
             <div className="flex flex-col mb-3 items-center justify-center cursor-pointer">
               <svg xmlns="http://www.w3.org/2000/svg" width="2.5em" height="2.5em" viewBox="0 0 24 24">
@@ -156,9 +159,11 @@ const DetailInfo = () => {
               Download
             </button>
           </div>
+        </Reveal>
       </div>
 
       {/* Footer Informasi */}
+      <Reveal>
         <div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
           <div className="flex flex-row items-center">
             oleh&nbsp;<span className="font-semibold text-black">{detailDataImage?.uploadedBy?.userLevel?.name}</span>&nbsp; | &nbsp;Diupdate pada {detailDataImage?.updatedAt} WIB &nbsp;|&nbsp;
@@ -185,6 +190,7 @@ const DetailInfo = () => {
         <div className="px-4">
           <NewContent type={"similar"} />
         </div>
+      </Reveal>
     </div>
   );
 };

app/[locale]/(public)/image/filter/page.tsx

@@ -8,6 +8,7 @@ import { useParams, usePathname, useRouter, useSearchParams } from "next/navigat
 import { getListContent } from "@/service/landing/landing";
 import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 import LandingPagination from "@/components/landing-page/pagination";
+import { Reveal } from "@/components/landing-page/Reveal";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -55,9 +56,8 @@ const FilterPage = () => {
   });
   const [page, setPage] = useState(1);
 
-  
   React.useEffect(() => {
-    const pageFromUrl = searchParams?.get('page');
+    const pageFromUrl = searchParams?.get("page");
     if (pageFromUrl) {
       setPage(Number(pageFromUrl));
     }
@@ -102,6 +102,7 @@ const FilterPage = () => {
   return (
     <div className="flex flex-col">
       {/* Header */}
+
       <div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-gray-200">
         <p>
           {" "}
@@ -110,7 +111,9 @@ const FilterPage = () => {
         <p className="font-bold">|</p>
         <p>Terdapat 324911 artikel berisi Audio Visual yang dapat diunduh </p>
       </div>
+
       {/* Left */}
+
       <div className="flex flex-col lg:flex-row gap-6 p-4">
         <div className="lg:w-1/4 w-full bg-white p-4 rounded-lg shadow-md">
           <h2 className="text-lg font-semibold mb-4">Filter</h2>
@@ -169,6 +172,7 @@ const FilterPage = () => {
         </div>
 
         {/* Konten Kanan */}
+        <Reveal>
           <div className="flex-1">
             <div className="flex flex-col items-end mb-4">
               <h2 className="text-lg font-semibold">Urutkan berdasarkan</h2>
@@ -195,8 +199,9 @@ const FilterPage = () => {
                 </Card>
               ))}
             </div>
-          <LandingPagination table={table} totalData={totalData} totalPage={totalPage}/>
+            <LandingPagination table={table} totalData={totalData} totalPage={totalPage} />
           </div>
+        </Reveal>
       </div>
     </div>
   );

app/[locale]/(public)/schedule/page.tsx

@@ -266,7 +266,7 @@ const Schedule = () => {
       if (itemFound?.length == 1) {
         return (
           <a
-            className={`cursor-pointer ${Number(itemFound[0]?.uploaderLevelNumber) == 1 ? "bg-yellow-300" : Number(itemFound[0]?.uploaderLevelNumber) == 2 ? "bg-blue-400" : "bg-gray-500"}`}
+            className={`cursor-pointer text-center ${Number(itemFound[0]?.uploaderLevelNumber) == 1 ? "bg-yellow-300" : Number(itemFound[0]?.uploaderLevelNumber) == 2 ? "bg-blue-400" : "bg-gray-500"}`}
             onClick={() => {
               getItem(itemFound[0]);
             }}
@@ -485,25 +485,46 @@ const Schedule = () => {
                 </svg>
               </span>
             </div>
-            <div className="card border border-slate-400 p-2 rounded-lg">
+
-              <div className="card-header">
+            {/* jadwal hari ini */}
-                <a className="accordion-icon">
+            <Collapsible className="border border-slate-400 p-2 rounded-lg" open={isOpen} onOpenChange={setIsOpen}>
-                  <h5 className="py-2 theme-text text-left">
+              <CollapsibleTrigger>
+                <h5 className="py-2 flex justify-between items-center">
                   Jadwal Hari Ini
-                    <span className="float-right">
+                  <span className="flex items-end">
                     <Icon icon="fa:angle-down" className="ml-1" />
                   </span>
                 </h5>
-                </a>
+              </CollapsibleTrigger>
+              {todayList?.map((list: any) => (
+                <CollapsibleContent className={`flex flex-row gap-3 ${isOpen ? "border-b-2 border-black my-3" : ""}`}>
+                  <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">{new Date(list.startDate).getDate()}</div>
+                  <div className="flex flex-col">
+                    <h3 className="font-bold">{list?.title}</h3>
+                    <p className="flex flex-row items-center gap-2">
+                      <Icon icon="iconamoon:clock-thin" />
+                      {list?.startTime} - {list?.endTime} WIB
+                    </p>
+                    <p className="flex flex-row items-start gap-2 ">
+                      <Icon icon="bxs:map" width={40} />
+                      {list?.address}
+                    </p>
+                    <p>Pembicara :</p>
+                    <p className="flex flex-row items-center gap-2">
+                      <Icon icon="ic:round-person" />
+                      {list?.speakerTitle}&nbsp;{list?.speakerName}
+                    </p>
                   </div>
-            </div>
+                </CollapsibleContent>
-            {/* jadwal sebelumnya */}
+              ))}
+            </Collapsible>
 
+            {/* jadwal sebelumnya */}
             <Collapsible className="border border-slate-400 p-2 rounded-lg" open={isOpen} onOpenChange={setIsOpen}>
               <CollapsibleTrigger>
                 <h5 className="py-2 flex justify-between items-center">
                   Jadwal Sebelumnya
-                  <span className="float-right">
+                  <span className="flex items-end">
                     <Icon icon="fa:angle-down" className="ml-1" />
                   </span>
                 </h5>
@@ -529,48 +550,66 @@ const Schedule = () => {
                   </div>
                 </CollapsibleContent>
               ))}
+            </Collapsible>
 
+            {/* jadwal selanjutnya */}
+            <Collapsible className="border border-slate-400 p-2 rounded-lg" open={isOpen} onOpenChange={setIsOpen}>
+              <CollapsibleTrigger>
+                <h5 className="py-2 flex justify-end items-center">
+                  Jadwal Selanjutnya
+                  <span className="flex items-end">
+                    <Icon icon="fa:angle-down" className="ml-1 flex" />
+                  </span>
+                </h5>
+              </CollapsibleTrigger>
+              {nextdayList?.map((list: any) => (
                 <CollapsibleContent className={`flex flex-row gap-3 ${isOpen ? "border-b-2 border-black my-3" : ""}`}>
-                <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">6</div>
+                  <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">{new Date(list.startDate).getDate()}</div>
                   <div className="flex flex-col">
-                  <h3 className="font-bold">Test Event</h3>
+                    <h3 className="font-bold">{list?.title}</h3>
                     <p className="flex flex-row items-center gap-2">
                       <Icon icon="iconamoon:clock-thin" />
-                    08.00 - 12.00 WIB
+                      {list?.startTime} - {list?.endTime} WIB
                     </p>
                     <p className="flex flex-row items-start gap-2 ">
                       <Icon icon="bxs:map" width={40} />
-                    Jl. Trunojoyo No.3 2, RT.2/RW.1, Selong, Kec. Kby. Baru, Kota Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12110, Indonesia.
+                      {list?.address}
                     </p>
                     <p>Pembicara :</p>
                     <p className="flex flex-row items-center gap-2">
                       <Icon icon="ic:round-person" />
-                    Hanif Salafi
+                      {list?.speakerTitle}&nbsp;{list?.speakerName}
                     </p>
                   </div>
                 </CollapsibleContent>
+              ))}
             </Collapsible>
+          </div>
+        </div>
+      </div>
 
-            <div className="card border border-slate-400 p-2 rounded-lg">
-              <div className="card-header">
-                <a className="accordion-icon">
-                  <h5 className="py-2 theme-text text-left">
-                    Jadwal Selanjutnya
-                    <span className="float-right">
-                      <Icon icon="fa:angle-down" className="ml-1" />
-                    </span>
-                  </h5>
-                </a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
       <AlertDialog open={openDialog} onOpenChange={setOpenDialog}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+            <AlertDialogTitle>Test Event</AlertDialogTitle>
-            <AlertDialogDescription>This action cannot be undone. This will permanently delete your account and remove your data from our servers.</AlertDialogDescription>
+            <AlertDialogDescription>
+              <p className="flex flex-row items-center gap-2">
+                <Icon icon="iconamoon:clock-thin" />
+                08.00 - 12.00 WIB
+              </p>
+            </AlertDialogDescription>
+            <AlertDialogDescription>
+              <p className="flex flex-row items-start gap-2 ">
+                <Icon icon="bxs:map" width={30} />
+                Jl. Trunojoyo No.3 2, RT.2/RW.1, Selong, Kec. Kby. Baru, Kota Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12110, Indonesia.
+              </p>
+            </AlertDialogDescription>
+            <AlertDialogDescription>
+              <p className="flex flex-row items-center gap-2">
+                <Icon icon="ic:round-person" />
+                Hanif Salafi
+              </p>
+            </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel>Cancel</AlertDialogCancel>

app/[locale]/(public)/video/filter/page.tsx

@@ -8,6 +8,7 @@ import { formatDateToIndonesian } from "@/utils/globals";
 import { useParams, usePathname, useRouter, useSearchParams } from "next/navigation";
 import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 import LandingPagination from "@/components/landing-page/pagination";
+import { Reveal } from "@/components/landing-page/Reveal";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -114,6 +115,7 @@ const FilterPage = () => {
       {/* Left */}
       <div className="flex flex-col lg:flex-row gap-6 p-4">
         <div className="lg:w-1/4 w-full bg-white p-4 rounded-lg shadow-md">
+          <Reveal>
             <h2 className="text-lg font-semibold mb-4">Filter</h2>
             <div className="space-y-6">
               <div>
@@ -167,10 +169,12 @@ const FilterPage = () => {
                 </ul>
               </div>
             </div>
+          </Reveal>
         </div>
 
         {/* Konten Kanan */}
         <div className="flex-1">
+          <Reveal>
             <div className="flex flex-col items-end mb-4">
               <h2 className="text-lg font-semibold">Urutkan berdasarkan</h2>
               <select className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
@@ -197,6 +201,7 @@ const FilterPage = () => {
               ))}
             </div>
             <LandingPagination table={table} totalData={totalData} totalPage={totalPage} />
+          </Reveal>
         </div>
       </div>
     </div>

app/[locale]/page.tsx

@@ -9,10 +9,12 @@ import Hero from "@/components/landing-page/hero";
 import Footer from "@/components/landing-page/footer";
 import Division from "@/components/landing-page/division";
 import Navbar from "@/components/landing-page/navbar";
+import { ReactLenis } from "@studio-freight/react-lenis";
 
 const Home = ({ params: { locale } }: { params: { locale: string } }) => {
   return (
     <>
+      <ReactLenis root>
         <Navbar />
         <Hero />
         <SearchSection />
@@ -23,6 +25,7 @@ const Home = ({ params: { locale } }: { params: { locale: string } }) => {
         <Coverage />
         <Division />
         <Footer />
+      </ReactLenis>
     </>
   );
 };

components/landing-page/Reveal.tsx

@@ -0,0 +1,58 @@
+import React, { useRef, useEffect } from "react";
+import { motion, useInView, useAnimation } from "framer-motion";
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export const Reveal = ({ children }: Props) => {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: false });
+  const mainControls = useAnimation();
+  const slideControls = useAnimation();
+
+  useEffect(() => {
+    if (isInView) {
+      mainControls.start("visible");
+      slideControls.start("visible");
+    } else mainControls.start("hidden");
+  }, [isInView]);
+
+  return (
+    <div ref={ref}>
+      <motion.div
+        variants={{
+          hidden: { opacity: 0, y: 75 },
+          visible: { opacity: 1, y: 0 },
+        }}
+        initial="hidden"
+        animate={mainControls}
+        transition={{
+          duration: 1,
+          delay: 0.1,
+        }}
+      >
+        {children}
+      </motion.div>
+      {/* TODO green slide thingy */}
+      {/* <motion.div
+        variants={{
+          hidden: { left: 0 },
+          visible: { left: "100%" },
+        }}
+        initial="hidden"
+        animate={slideControls}
+        transition={{ duration: 0.5, ease: "easeIn" }}
+        style={{
+          position: "absolute",
+          top: 4,
+          bottom: 4,
+          left: 0,
+          right: 0,
+          background: "#5e84ff",
+          zIndex: 20,
+        }}
+      /> */}
+    </div>
+  );
+};

components/landing-page/content-category.tsx

@@ -2,6 +2,7 @@ import { getCategoryData } from "@/service/landing/landing";
 import Link from "next/link";
 import React, { useEffect, useState } from "react";
 import { Button } from "../ui/button";
+import { Reveal } from "./Reveal";
 
 const ContentCategory = () => {
   const [categories, setCategories] = useState<any>();
@@ -19,6 +20,7 @@ const ContentCategory = () => {
 
   return (
     <div className="mx-auto px-4 lg:px-20 py-10 max-w-screen-2xl ">
+      <Reveal>
         <h2 className="text-center text-xl lg:text-2xl font-bold text-[#bb3523] mb-4">
           Kategori <span className="text-black dark:text-white">Konten</span>
         </h2>
@@ -52,6 +54,7 @@ const ContentCategory = () => {
             Lihat Lebih {seeAllValue ? "Sedikit" : "Banyak"}
           </Button>
         </div>
+      </Reveal>
     </div>
   );
 };

components/landing-page/coverage.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { Button } from "../ui/button";
+import { Reveal } from "./Reveal";
 
 const Coverage: React.FC = () => {
   const [searchTerm, setSearchTerm] = useState("");
@@ -46,6 +47,7 @@ const Coverage: React.FC = () => {
 
   return (
     <div className="max-w-screen-xl mx-auto px-4 lg:px-12 py-6">
+      <Reveal>
         {/* Header */}
         <h2 className="text-center text-2xl font-bold text-gray-800 dark:text-white mb-4">
           Liputan <span className="text-[#bb3523]">Wilayah</span>
@@ -93,6 +95,7 @@ const Coverage: React.FC = () => {
             Lihat Lebih {seeAllValue ? "Sedikit" : "Banyak"}
           </Button>
         </div>
+      </Reveal>
     </div>
   );
 };

components/landing-page/division.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { Button } from "../ui/button";
+import { Reveal } from "./Reveal";
 
 const Division = () => {
   const [searchTerm, setSearchTerm] = useState("");
@@ -49,6 +50,7 @@ const Division = () => {
   return (
     <div className="max-w-screen-xl mx-auto px-4 lg:px-12 py-6">
       {/* Header */}
+      <Reveal>
         <h2 className="text-center text-2xl font-bold text-gray-800 dark:text-white mb-4">
           Liputan <span className="text-[#bb3523]">Satker</span>
         </h2>
@@ -95,6 +97,7 @@ const Division = () => {
             Lihat Lebih {seeAllValue ? "Sedikit" : "Banyak"}
           </Button>
         </div>
+      </Reveal> 
     </div>
   );
 };

components/landing-page/hero.tsx

@@ -30,7 +30,7 @@ const Hero: React.FC = () => {
           {heroData?.map((list: any) => (
             <CarouselItem key={list?.id}>
               <div className="relative h-[310px] lg:h-[420px]">
-                <img src={list?.thumbnailLink} alt="Gambar Utama" className="w-auto h-[310px] lg:h-[420px] rounded-lg" />
+                <img src={list?.thumbnailLink} alt="Gambar Utama" className="w-full h-[310px] lg:h-[420px] rounded-lg" />
                 <div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-black dark:text-white p-4 rounded-b-lg">
                   <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{list?.categoryName}</span>
                   <Link href={`${locale}/image/detail/${list?.slug}`}>

components/landing-page/navbar.tsx

@@ -107,28 +107,28 @@ const Navbar = () => {
                 </NavigationMenuTrigger>
                 <NavigationMenuContent className="p-0 rounded-md overflow-hidden w-full">
                   <NavigationMenuLink onClick={() => router.push(generateLocalizedPath("/video/filter", String(locale)))} className="flex items-start gap-1.5 p-2 hover:bg-white">
-                    <span className="text-slate-600 hover:text-[#bb3523]  flex flex-row justify-center items-center px-5 py-2">
+                    <p className="text-slate-600 hover:text-[#bb3523]  flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
                       <FiYoutube className="mr-2" />
                       Video
-                    </span>
+                    </p>
                   </NavigationMenuLink>
                   <NavigationMenuLink onClick={() => router.push(generateLocalizedPath("/audio/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2 hover:bg-white">
-                    <span className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2">
+                    <p className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
                       <FiMusic className="mr-2" />
                       Audio
-                    </span>
+                    </p>
                   </NavigationMenuLink>
                   <NavigationMenuLink onClick={() => router.push(generateLocalizedPath("/image/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2 hover:bg-white">
-                    <span className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2">
+                    <p className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
                       <FiImage className="mr-2" />
                       Foto
-                    </span>
+                    </p>
                   </NavigationMenuLink>
                   <NavigationMenuLink onClick={() => router.push(generateLocalizedPath("/document/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2 hover:bg-white">
-                    <span className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2">
+                    <p className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
                       <FiFile className="mr-2" />
                       Teks
-                    </span>
+                    </p>
                   </NavigationMenuLink>
                 </NavigationMenuContent>
               </NavigationMenuItem>

components/landing-page/new-content.tsx

@@ -1,12 +1,14 @@
 import React, { useEffect, useState } from "react";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
-import Link from "next/link";
 import { useParams, usePathname, useRouter } from "next/navigation";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import { formatDateToIndonesian, textEllipsis } from "@/utils/globals";
 import { generateLocalizedPath } from "@/utils/globals";
 import { getListContent } from "@/service/landing/landing";
+import { Link } from "@/i18n/routing";
+import { motion } from "framer-motion";
+import { Reveal } from "./Reveal";
 
 const NewContent = (props: { type: string }) => {
   const [newContent, setNewContent] = useState<any>();
@@ -33,6 +35,7 @@ const NewContent = (props: { type: string }) => {
 
   return (
     <div className="px-4 lg:px-16">
+      <Reveal>
         <div className="flex flex-col p-4">
           <div className="mx-auto w-full max-w-7xl justify-start flex px-5 flex-col lg:flex-row gap-5 mb-4">
             <h2 className="flex items-center text-sm lg:text-xl w-fit font-bold bg-[#bb3523] px-4 py-1 rounded-lg text-white">
@@ -47,18 +50,21 @@ const NewContent = (props: { type: string }) => {
                 >
                   Audio Visual
                 </TabsTrigger>
+                <div className="text-[#bb3523] text-lg">|</div>
                 <TabsTrigger
                   value="audio"
                   className="relative text-sm md:text-xl font-bold text-black dark:text-white 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>
+                <div className="text-[#bb3523] text-lg">|</div>
                 <TabsTrigger
                   value="image"
                   className="relative text-sm md:text-xl font-bold text-black dark:text-white 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>
+                <div className="text-[#bb3523] text-lg">|</div>
                 <TabsTrigger
                   value="text"
                   className="relative text-sm md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
@@ -193,10 +199,11 @@ const NewContent = (props: { type: string }) => {
           </div>
         </div>
         <div className="flex items-center flex-row justify-center">
-        <Link href="#" className="border text-[#bb3523] text-sm lg:text-md px-4 py-1 border-[#bb3523]">
+          <Link href="/video/filter" className="border text-[#bb3523] text-sm lg:text-md px-4 py-1 border-[#bb3523]">
             LIHAT SEMUA
           </Link>
         </div>
+      </Reveal>
     </div>
   );
 };

package-lock.json

@@ -52,6 +52,7 @@
         "@reach/combobox": "^0.18.0",
         "@react-google-maps/api": "^2.20.3",
         "@south-paw/react-vector-maps": "^3.2.0",
+        "@studio-freight/react-lenis": "^0.0.47",
         "@tanstack/react-table": "^8.19.2",
         "@types/cleave.js": "^1.4.12",
         "@types/crypto-js": "^4.2.2",
@@ -75,7 +76,7 @@
         "embla-carousel-autoplay": "^8.1.3",
         "embla-carousel-react": "^8.1.3",
         "emoji-mart": "^5.6.0",
-        "framer-motion": "^11.12.0",
+        "framer-motion": "^11.15.0",
         "geojson": "^0.5.0",
         "google-map-react": "^2.2.1",
         "html-react-parser": "^5.2.0",
@@ -3340,6 +3341,50 @@
         "react": ">=16.8.0"
       }
     },
+    "node_modules/@studio-freight/hamo": {
+      "version": "0.6.33",
+      "resolved": "https://registry.npmjs.org/@studio-freight/hamo/-/hamo-0.6.33.tgz",
+      "integrity": "sha512-U3Nvw5wDvB/jps2/ZbGL2TFL+CcZvJF/tkjL7S7ajuzDi9T5VkqCguws6tuWHttZ74Z6DfXxV1b8F1EB30AyJg==",
+      "deprecated": "Please use @darkroom.engineering/hamo instead",
+      "dependencies": {
+        "@studio-freight/tempus": "^0.0.38",
+        "just-debounce-it": "^3.2.0",
+        "nanoevents": "^9.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+      }
+    },
+    "node_modules/@studio-freight/lenis": {
+      "version": "1.0.42",
+      "resolved": "https://registry.npmjs.org/@studio-freight/lenis/-/lenis-1.0.42.tgz",
+      "integrity": "sha512-HJAGf2DeM+BTvKzHv752z6Z7zy6bA643nZM7W88Ft9tnw2GsJSp6iJ+3cekjyMIWH+cloL2U9X82dKXgdU8kPg==",
+      "deprecated": "'@studio-freight/lenis' has been renamed to just 'lenis', run 'npx @darkroom.engineering/codemods' to update your dependecies accordingly."
+    },
+    "node_modules/@studio-freight/react-lenis": {
+      "version": "0.0.47",
+      "resolved": "https://registry.npmjs.org/@studio-freight/react-lenis/-/react-lenis-0.0.47.tgz",
+      "integrity": "sha512-h+IAqiyiNo8mRo/CA3/sHCqX2IV0tTLyzZRWsdRaLPtM2aBaRqK0+ISYWTUmktQfcf3qvp4hsn0Oeyt9uXwLTQ==",
+      "dependencies": {
+        "@studio-freight/hamo": "^0.6.28",
+        "@studio-freight/lenis": "^1.0.40",
+        "@types/react": "^18.0.0",
+        "clsx": "^2.0.0",
+        "react": "^18.0.0",
+        "zustand": "^4.4.7"
+      },
+      "peerDependencies": {
+        "react": "^17 || ^18",
+        "react-dom": "^17 || ^18"
+      }
+    },
+    "node_modules/@studio-freight/tempus": {
+      "version": "0.0.38",
+      "resolved": "https://registry.npmjs.org/@studio-freight/tempus/-/tempus-0.0.38.tgz",
+      "integrity": "sha512-AO1O2fEmfUqWGjEofmPNMQRlwgZ96eB5OFsVJjeH8/RKd1/Yf4zbPnXO+r2TD4aueA6X9JRCJU2GUprI9+m8uQ==",
+      "deprecated": "Please use @darkroom.engineering/tempus instead"
+    },
     "node_modules/@swc/counter": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
@@ -6655,18 +6700,18 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "11.13.3",
+      "version": "11.15.0",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.13.3.tgz",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.15.0.tgz",
-      "integrity": "sha512-3ZSNuYpDFeNxqVKUyYipOm5A1fXSbMje1XIfEWxKTJ4ughl5FEjvkp6gKmFHLjzwijCVU/PjsMNlTMVCmi+Twg==",
+      "integrity": "sha512-MLk8IvZntxOMg7lDBLw2qgTHHv664bYoYmnFTmE0Gm/FW67aOJk0WM3ctMcG+Xhcv+vh5uyyXwxvxhSeJzSe+w==",
       "dependencies": {
-        "motion-dom": "^11.13.0",
+        "motion-dom": "^11.14.3",
-        "motion-utils": "^11.13.0",
+        "motion-utils": "^11.14.3",
         "tslib": "^2.4.0"
       },
       "peerDependencies": {
         "@emotion/is-prop-valid": "*",
-        "react": "^18.0.0",
+        "react": "^18.0.0 || ^19.0.0",
-        "react-dom": "^18.0.0"
+        "react-dom": "^18.0.0 || ^19.0.0"
       },
       "peerDependenciesMeta": {
         "@emotion/is-prop-valid": {
@@ -8493,6 +8538,11 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/just-debounce-it": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/just-debounce-it/-/just-debounce-it-3.2.0.tgz",
+      "integrity": "sha512-WXzwLL0745uNuedrCsCs3rpmfD6DBaf7uuVwaq98/8dafURfgQaBsSpjiPp5+CW6Vjltwy9cOGI6qE71b3T8iQ=="
+    },
     "node_modules/katex": {
       "version": "0.16.15",
       "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.15.tgz",
@@ -10278,14 +10328,14 @@
       }
     },
     "node_modules/motion-dom": {
-      "version": "11.13.0",
+      "version": "11.14.3",
-      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.13.0.tgz",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.14.3.tgz",
-      "integrity": "sha512-Oc1MLGJQ6nrvXccXA89lXtOqFyBmvHtaDcTRGT66o8Czl7nuA8BeHAd9MQV1pQKX0d2RHFBFaw5g3k23hQJt0w=="
+      "integrity": "sha512-lW+D2wBy5vxLJi6aCP0xyxTxlTfiu+b+zcpVbGVFUxotwThqhdpPRSmX8xztAgtZMPMeU0WGVn/k1w4I+TbPqA=="
     },
     "node_modules/motion-utils": {
-      "version": "11.13.0",
+      "version": "11.14.3",
-      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.13.0.tgz",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.14.3.tgz",
-      "integrity": "sha512-lq6TzXkH5c/ysJQBxgLXgM01qwBH1b4goTPh57VvZWJbVJZF/0SB31UWEn4EIqbVPf3au88n2rvK17SpDTja1A=="
+      "integrity": "sha512-Xg+8xnqIJTpr0L/cidfTTBFkvRw26ZtGGuIhA94J9PQ2p4mEa06Xx7QVYZH0BP+EpMSaDlu+q0I0mmvwADPsaQ=="
     },
     "node_modules/mri": {
       "version": "1.2.0",
@@ -10319,6 +10369,14 @@
         "thenify-all": "^1.0.0"
       }
     },
+    "node_modules/nanoevents": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/nanoevents/-/nanoevents-9.1.0.tgz",
+      "integrity": "sha512-Jd0fILWG44a9luj8v5kED4WI+zfkkgwKyRQKItTtlPfEsh7Lznfi1kr8/iZ+XAIss4Qq5GqRB0qtWbaz9ceO/A==",
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.8",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
@@ -14392,6 +14450,41 @@
         "url": "https://github.com/sponsors/colinhacks"
       }
     },
+    "node_modules/zustand": {
+      "version": "4.5.5",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.5.tgz",
+      "integrity": "sha512-+0PALYNJNgK6hldkgDq2vLrw5f6g/jCInz52n9RTpropGgeAf/ioFUCdtsjCqu4gNhW9D01rUQBROoRjdzyn2Q==",
+      "dependencies": {
+        "use-sync-external-store": "1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/zustand/node_modules/use-sync-external-store": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
+      "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/zwitch": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",

package.json

@@ -53,6 +53,7 @@
     "@reach/combobox": "^0.18.0",
     "@react-google-maps/api": "^2.20.3",
     "@south-paw/react-vector-maps": "^3.2.0",
+    "@studio-freight/react-lenis": "^0.0.47",
     "@tanstack/react-table": "^8.19.2",
     "@types/cleave.js": "^1.4.12",
     "@types/crypto-js": "^4.2.2",
@@ -76,7 +77,7 @@
     "embla-carousel-autoplay": "^8.1.3",
     "embla-carousel-react": "^8.1.3",
     "emoji-mart": "^5.6.0",
-    "framer-motion": "^11.12.0",
+    "framer-motion": "^11.15.0",
     "geojson": "^0.5.0",
     "google-map-react": "^2.2.1",
     "html-react-parser": "^5.2.0",