diff --git a/components/landing-page/footer.tsx b/components/landing-page/footer.tsx
index 793f244..13f1b0c 100644
--- a/components/landing-page/footer.tsx
+++ b/components/landing-page/footer.tsx
@@ -1,4 +1,5 @@
 import Image from "next/image";
+import Link from "next/link";
 
 export default function Footer() {
   return (
@@ -13,72 +14,50 @@ export default function Footer() {
             className="ml-4"
           />
 
-          <div className="flex gap-4 mt-6 ml-24 md:ml-20 text-xl text-[#c7dbe3]">
-            <div className="hover:text-white cursor-pointer">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="18"
-                height="18"
-                viewBox="0 0 24 24"
-              >
-                <g
-                  fill="none"
-                  stroke="currentColor"
-                  // stroke-width="1.5"
+          <div className="flex gap-4 mt-6 ml-8 md:ml-8 text-xl text-[#c7dbe3]">
+            <Link href={"https://www.instagram.com/jaecoo_kelapagading"}>
+              <div className="hover:text-white cursor-pointer">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="18"
+                  height="18"
+                  viewBox="0 0 24 24"
+                >
+                  <g
+                    fill="none"
+                    stroke="currentColor"
+                    // stroke-width="1.5"
+                  >
+                    <path
+                      // stroke-linecap="round"
+                      // stroke-linejoin="round"
+                      d="M12 16a4 4 0 1 0 0-8a4 4 0 0 0 0 8"
+                    />
+                    <path d="M3 16V8a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5v8a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5Z" />
+                    <path
+                      // stroke-linecap="round"
+                      // stroke-linejoin="round"
+                      d="m17.5 6.51l.01-.011"
+                    />
+                  </g>
+                </svg>
+              </div>
+            </Link>
+            <Link href={"https://www.tiktok.com/@jaecoo_kelapagading"}>
+              <div className="hover:text-white cursor-pointer">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="18"
+                  height="18"
+                  viewBox="0 0 24 24"
                 >
                   <path
-                    // stroke-linecap="round"
-                    // stroke-linejoin="round"
-                    d="M12 16a4 4 0 1 0 0-8a4 4 0 0 0 0 8"
+                    fill="currentColor"
+                    d="M16 8.245V15.5a6.5 6.5 0 1 1-5-6.326v3.163a3.5 3.5 0 1 0 2 3.163V2h3a5 5 0 0 0 5 5v3a7.97 7.97 0 0 1-5-1.755"
                   />
-                  <path d="M3 16V8a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5v8a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5Z" />
-                  <path
-                    // stroke-linecap="round"
-                    // stroke-linejoin="round"
-                    d="m17.5 6.51l.01-.011"
-                  />
-                </g>
-              </svg>
-            </div>
-            <div className="hover:text-white cursor-pointer">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="18"
-                height="18"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  fill="currentColor"
-                  d="M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.326-.043-1.557-.14-2.857-.14C11.928 2 10 3.657 10 6.7v2.8H7v4h3V22h4z"
-                />
-              </svg>
-            </div>
-            <div className="hover:text-white cursor-pointer">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="18"
-                height="18"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  fill="currentColor"
-                  d="M16 8.245V15.5a6.5 6.5 0 1 1-5-6.326v3.163a3.5 3.5 0 1 0 2 3.163V2h3a5 5 0 0 0 5 5v3a7.97 7.97 0 0 1-5-1.755"
-                />
-              </svg>
-            </div>
-            <div className="hover:text-white cursor-pointer">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="18"
-                height="18"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  fill="currentColor"
-                  d="M12.244 4c.534.003 1.87.016 3.29.073l.504.022c1.429.067 2.857.183 3.566.38c.945.266 1.687 1.04 1.938 2.022c.4 1.56.45 4.602.456 5.339l.001.152v.174c-.007.737-.057 3.78-.457 5.339c-.254.985-.997 1.76-1.938 2.022c-.709.197-2.137.313-3.566.38l-.504.023c-1.42.056-2.756.07-3.29.072l-.235.001h-.255c-1.13-.007-5.856-.058-7.36-.476c-.944-.266-1.687-1.04-1.938-2.022c-.4-1.56-.45-4.602-.456-5.339v-.326c.006-.737.056-3.78.456-5.339c.254-.985.997-1.76 1.939-2.021c1.503-.419 6.23-.47 7.36-.476zM9.999 8.5v7l6-3.5z"
-                />
-              </svg>
-            </div>
+                </svg>
+              </div>
+            </Link>
           </div>
         </div>
         <div className="md:w-8/12 ">
@@ -130,10 +109,14 @@ export default function Footer() {
               <h4 className="font-semibold text-white mb-4">CONTACT</h4>
               <ul className="space-y-4 text-sm">
                 <li>
-                  <a href="https://jaecoo.com" target="_blank" rel="noreferrer">
-                    jaecoo.com
+                  <a
+                    href="mailto:jaecookelapagading@gmail.com"
+                    className="hover:underline"
+                  >
+                    jaecookelapagading@gmail.com
                   </a>
                 </li>
+
                 <li>0816 1124 631</li>
                 <li>
                   <p className="font-semibold text-white">
diff --git a/components/landing-page/galery.tsx b/components/landing-page/galery.tsx
index 59d59fa..3b9ee8c 100644
--- a/components/landing-page/galery.tsx
+++ b/components/landing-page/galery.tsx
@@ -11,6 +11,17 @@ import {
 export default function GallerySection() {
   const [data, setData] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
+  const TABS = [
+    "All",
+    "Grand Opening",
+    "IIMS",
+    "GIIAS",
+    "GJAW",
+    "Exhibitions",
+    "Test Drive",
+  ];
+
+  const [activeTab, setActiveTab] = useState("All");
 
   const fetchData = async () => {
     try {
@@ -54,34 +65,62 @@ export default function GallerySection() {
     fetchData();
   }, []);
 
+  const filteredData = data.filter((item) => {
+    if (activeTab === "All") return true;
+    if (activeTab === "Grand Opening") return true; // sementara
+    return false; // tab lain belum ada konten
+  });
+
   return (
     <section className="py-16 px-4 max-w-[1400px] mx-auto">
       <h2 className="text-4xl font-bold mb-8">Galeri Kami</h2>
+      <div className="flex justify-center  gap-2 mb-10">
+        {TABS.map((tab) => (
+          <button
+            key={tab}
+            onClick={() => setActiveTab(tab)}
+            className={`px-4 py-2 rounded-full text-sm font-medium transition
+        ${
+          activeTab === tab
+            ? "bg-black text-white"
+            : "bg-gray-100 text-gray-600 hover:bg-gray-200"
+        }`}
+          >
+            {tab}
+          </button>
+        ))}
+      </div>
 
       {loading ? (
         <p className="text-center">Loading...</p>
       ) : (
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
-          {data.map((item: any) => (
-            <div
-              key={`gallery-${item.id}`} // 🔥 WAJIB unik
-              className="relative w-full aspect-[3/2] bg-gray-100 rounded overflow-hidden"
-            >
-              {item.image_url ? (
-                <Image
-                  src={item.image_url}
-                  alt={item.title}
-                  fill
-                  className="object-cover"
-                  unoptimized
-                />
-              ) : (
-                <div className="flex items-center justify-center h-full text-gray-400">
-                  No Image
-                </div>
-              )}
-            </div>
-          ))}
+          {filteredData.length > 0 ? (
+            filteredData.map((item: any) => (
+              <div
+                key={`gallery-${item.id}`}
+                className="relative w-full aspect-[3/2] bg-gray-100 rounded overflow-hidden"
+              >
+                {item.image_url ? (
+                  <Image
+                    src={item.image_url}
+                    alt={item.title}
+                    fill
+                    className="object-cover"
+                    unoptimized
+                  />
+                ) : (
+                  <div className="flex items-center justify-center h-full text-gray-400">
+                    No Image
+                  </div>
+                )}
+              </div>
+            ))
+          ) : (
+            <p className="col-span-full text-center text-gray-400">
+              Konten belum tersedia
+            </p>
+          )}
         </div>
       )}
     </section>
diff --git a/components/landing-page/header-price.tsx b/components/landing-page/header-price.tsx
index d17890f..29db6cc 100644
--- a/components/landing-page/header-price.tsx
+++ b/components/landing-page/header-price.tsx
@@ -45,7 +45,7 @@ export default function HeaderPriceInformation() {
     {
       title: "JAECOO J8 SHS-P ARDIS",
       image: "/j8-awd-nobg.png",
-      price: "Rp 812.000.000",
+      price: "Rp 828.000.000",
       oldPrice: "Rp 828.000.000",
       capacity: "34,46kWh",
       torque: "650Nm",
diff --git a/components/landing-page/header-product-j8-awd.tsx b/components/landing-page/header-product-j8-awd.tsx
index ef3cfab..e50ad59 100644
--- a/components/landing-page/header-product-j8-awd.tsx
+++ b/components/landing-page/header-product-j8-awd.tsx
@@ -25,7 +25,12 @@ export default function HeaderProductJ8Awd() {
   // const embedLink = `https://drive.google.com/file/d/${fileId}/preview`;
   // const downloadLink = `https://drive.google.com/uc?export=download&id=${fileId}`;
 
-  const images = ["/green.png", "/silver.png", "/white.png", "/black.png"];
+  const images = [
+    "/j8-green-ardis.png",
+    "/j8-silver-ardis.png",
+    "/j8-white-ardis.png",
+    "/j8-ardis-black.png",
+  ];
 
   const gradients = [
     "linear-gradient(to bottom, #527D97, #1F6779)",
diff --git a/components/landing-page/header.tsx b/components/landing-page/header.tsx
index 008e8a4..0b941d2 100644
--- a/components/landing-page/header.tsx
+++ b/components/landing-page/header.tsx
@@ -86,18 +86,18 @@ export default function Header() {
   const plugin = useRef(Autoplay({ delay: 4000, stopOnInteraction: false }));
 
   return (
-    <section className="relative w-full overflow-hidden bg-white">
+    <section className="relative w-full overflow-hidden bg-white mt-5">
       <Carousel className="w-full relative" plugins={[plugin.current]}>
         <CarouselContent>
           {banners.map((banner, index) => (
             <CarouselItem key={banner.id}>
-              <div className="relative w-full h-[400px] sm:h-[500px] md:h-[810px]">
+              <div className="relative w-full aspect-[16/9]">
                 <Image
                   src={banner.thumbnail_url}
                   alt={banner.title}
                   fill
                   priority={index === 0}
-                  className="object-cover"
+                  className="object-contain"
                 />
 
                 {/* {index === 0 && (
diff --git a/components/landing-page/interior-shs.tsx b/components/landing-page/interior-shs.tsx
index 298b8e9..d10b230 100644
--- a/components/landing-page/interior-shs.tsx
+++ b/components/landing-page/interior-shs.tsx
@@ -5,10 +5,9 @@ import { useInView } from "react-intersection-observer";
 
 const featuresInt = [
   {
-    title: "14.8 Screen with APPLE Carplay & Android Auto",
-    description:
-      "Stay connected and informed with a 14.8 display offering clear visuals and advanced functionality for a seamless driving experience.",
-    image: "/in-shs2.png",
+    title: "13.2 Screen with APPLE Carplay & Android Auto",
+    description: "13.2 Full HD Center Display",
+    image: "/headunit.png",
   },
   {
     title: "Horizontal Side by Side Cup Holder",
@@ -24,9 +23,8 @@ const featuresInt = [
   },
   {
     title: "Wireless Charging",
-    description:
-      "Stay powered up on the go with Wireless Charging, ensuring your devices are always ready when you are.",
-    image: "/in-shs5.png",
+    description: "Fast Wireless Charging 50W",
+    image: "/charging.png",
   },
 ];
 
@@ -78,7 +76,7 @@ export default function InteriorShs() {
         transition={{ duration: 0.7 }}
       >
         <Image
-          src="/in-shs.png"
+          src="/inter.png"
           alt="Interior Hero"
           fill
           className="object-cover"
diff --git a/components/landing-page/social-media.tsx b/components/landing-page/social-media.tsx
index 4426f2e..478217d 100644
--- a/components/landing-page/social-media.tsx
+++ b/components/landing-page/social-media.tsx
@@ -2,151 +2,124 @@
 
 import { useState } from "react";
 import Image from "next/image";
-import { ArrowRight } from "lucide-react";
 import Link from "next/link";
+import { ArrowRight } from "lucide-react";
 
 const tabs = ["INSTAGRAM", "TIKTOK"];
 
-const instagramPosts = ["/ig-news1.png", "/ig-news2.png", "/ig-news3.png"];
-const tiktokPosts = ["/tk-news1.png", "/tk-news2.png", "/tk-news3.png"];
-const youtubePosts = ["/tk-news1.png", "/tk-news2.png", "/tk-news3.png"];
-const facebookPosts = ["/tk-news1.png", "/tk-news2.png", "/tk-news3.png"];
+const instagramPosts = ["/Asset19.png", "/Asset20.png", "/isra.png"];
+
+const tiktokPosts = ["/tiktok1.jpeg", "/tiktok2.jpeg", "/tiktok3.jpeg"];
 
 export default function SosmedSection() {
   const [activeTab, setActiveTab] = useState("INSTAGRAM");
 
   return (
     <section className="px-4 py-16 max-w-[1400px] mx-auto">
-      <h2 className="text-3xl font-bold mb-6 text-start ml-16">
-        Sosial Media Kami
-      </h2>
+      {/* Title */}
+      <h2 className="text-3xl font-bold mb-2 ml-4">Sosial Media Kami</h2>
+      <p className="text-gray-500 text-sm mb-8 ml-4">
+        Preview konten dari media sosial resmi kami
+      </p>
 
-      <div className="flex flex-wrap gap-4 items-center justify-center mb-8">
+      {/* Tabs */}
+      <div className="flex gap-4 justify-center mb-10">
         {tabs.map((tab) => (
           <button
             key={tab}
             onClick={() => setActiveTab(tab)}
-            className={`text-sm font-medium px-4 py-2 rounded-full ${
-              activeTab === tab
-                ? "bg-[#BCD4DF] text-sky-700"
-                : "text-[gray-700] hover:bg-gray-100"
-            }`}
+            className={`px-5 py-2 rounded-full text-sm font-medium transition
+              ${
+                activeTab === tab
+                  ? "bg-[#BCD4DF] text-sky-700"
+                  : "bg-gray-100 text-gray-600 hover:bg-gray-200"
+              }`}
           >
             {tab}
           </button>
         ))}
       </div>
 
+      {/* INSTAGRAM */}
       {activeTab === "INSTAGRAM" && (
         <>
-          <div className="flex flex-wrap justify-center items-center gap-4">
+          <div className="flex flex-wrap justify-center gap-6">
             {instagramPosts.map((img, i) => (
-              <div
+              <Link
                 key={i}
-                className="relative w-full sm:w-[300px] md:w-[350px] lg:w-[400px] h-[400px] sm:h-[450px] md:h-[500px]"
+                href="https://www.instagram.com/jaecoo_kelapagading"
+                target="_blank"
               >
-                <Image
-                  src={img}
-                  alt={`Instagram post ${i + 1}`}
-                  fill
-                  className="w-full h-full object-cover"
-                />
-              </div>
+                <div className="relative w-full sm:w-[300px] md:w-[340px] aspect-[4/5] rounded-xl overflow-hidden bg-gray-100 group cursor-pointer shadow-sm">
+                  <Image
+                    src={img}
+                    alt={`Instagram post ${i + 1}`}
+                    fill
+                    className="object-cover transition-transform duration-300 group-hover:scale-105"
+                  />
+
+                  {/* Overlay */}
+                  <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition flex items-center justify-center">
+                    <span className="text-white text-sm font-semibold">
+                      View on Instagram
+                    </span>
+                  </div>
+                </div>
+              </Link>
             ))}
           </div>
 
-          <div className="flex justify-center mt-10">
-            <Link href={"https://www.instagram.com/jaecoo_kelapagading"}>
+          <div className="flex justify-center mt-12">
+            <Link
+              href="https://www.instagram.com/jaecoo_kelapagading"
+              target="_blank"
+            >
               <button className="bg-[#1F6779] hover:bg-sky-800 text-white px-6 py-3 rounded-md flex items-center gap-2 text-lg font-medium">
                 Lihat Selengkapnya
-                <ArrowRight size={35} />
+                <ArrowRight size={28} />
               </button>
             </Link>
           </div>
         </>
       )}
 
+      {/* TIKTOK */}
       {activeTab === "TIKTOK" && (
         <>
-          <div className="flex flex-wrap justify-center items-center gap-4">
+          <div className="flex flex-wrap justify-center gap-6">
             {tiktokPosts.map((img, i) => (
-              <div
+              <Link
                 key={i}
-                className="relative w-full sm:w-[300px] md:w-[350px] lg:w-[400px] h-[400px] sm:h-[450px] md:h-[500px]"
+                href="https://www.tiktok.com/@jaecoo_kelapagading"
+                target="_blank"
               >
-                <Image
-                  src={img}
-                  alt={`Tiktok post ${i + 1}`}
-                  fill
-                  className="w-full h-full object-cover"
-                />
-              </div>
+                <div className="relative w-full sm:w-[260px] md:w-[300px] aspect-[9/16] rounded-xl overflow-hidden bg-gray-100 group cursor-pointer shadow-sm">
+                  <Image
+                    src={img}
+                    alt={`TikTok post ${i + 1}`}
+                    fill
+                    className="object-cover transition-transform duration-300 group-hover:scale-105"
+                  />
+
+                  {/* Overlay */}
+                  <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition flex items-center justify-center">
+                    <span className="text-white text-sm font-semibold">
+                      View on TikTok
+                    </span>
+                  </div>
+                </div>
+              </Link>
             ))}
           </div>
 
-          <div className="flex justify-center mt-10">
-            <Link href={"https://www.tiktok.com/@jaecoo_kelapagading"}>
+          <div className="flex justify-center mt-12">
+            <Link
+              href="https://www.tiktok.com/@jaecoo_kelapagading"
+              target="_blank"
+            >
               <button className="bg-[#1F6779] hover:bg-sky-800 text-white px-6 py-3 rounded-md flex items-center gap-2 text-lg font-medium">
                 Lihat Selengkapnya
-                <ArrowRight size={35} />
-              </button>
-            </Link>
-          </div>
-        </>
-      )}
-
-      {activeTab === "FACEBOOK" && (
-        <>
-          <div className="flex flex-wrap justify-center items-center gap-4">
-            {facebookPosts.map((img, i) => (
-              <div
-                key={i}
-                className="relative w-full sm:w-[300px] md:w-[350px] lg:w-[400px] h-[400px] sm:h-[450px] md:h-[500px]"
-              >
-                <Image
-                  src={img}
-                  alt={`Facebook post ${i + 1}`}
-                  fill
-                  className="w-full h-full object-cover"
-                />
-              </div>
-            ))}
-          </div>
-
-          <div className="flex justify-center mt-10">
-            <Link href={"#"}>
-              <button className="bg-[#1F6779] hover:bg-sky-800 text-white px-6 py-3 rounded-md flex items-center gap-2 text-lg font-medium">
-                Lihat Selengkapnya
-                <ArrowRight size={35} />
-              </button>
-            </Link>
-          </div>
-        </>
-      )}
-
-      {activeTab === "YOUTUBE" && (
-        <>
-          <div className="flex flex-wrap justify-center items-center gap-4">
-            {youtubePosts.map((img, i) => (
-              <div
-                key={i}
-                className="relative w-full sm:w-[300px] md:w-[350px] lg:w-[400px] h-[400px] sm:h-[450px] md:h-[500px]"
-              >
-                <Image
-                  src={img}
-                  alt={`YouTube post ${i + 1}`}
-                  fill
-                  className="w-full h-full object-cover"
-                />
-              </div>
-            ))}
-          </div>
-
-          <div className="flex justify-center mt-10">
-            <Link href={"#"}>
-              <button className="bg-[#1F6779] hover:bg-sky-800 text-white px-6 py-3 rounded-md flex items-center gap-2 text-lg font-medium">
-                Lihat Selengkapnya
-                <ArrowRight size={35} />
+                <ArrowRight size={28} />
               </button>
             </Link>
           </div>
diff --git a/components/landing-page/video.tsx b/components/landing-page/video.tsx
index fc522a9..ab5c80d 100644
--- a/components/landing-page/video.tsx
+++ b/components/landing-page/video.tsx
@@ -45,15 +45,14 @@ export default function Video() {
 
   return (
     <section className="pt-10 bg-white">
-      <div className="relative mb-10 w-full h-[250px] sm:h-[600px] md:h-[800px]">
+      <div className="relative mb-10 w-full aspect-[16/9]">
         <Image
           src={banner?.thumbnail_url || "/maintenance.png"}
           alt={banner?.title || "Banner"}
           fill
-          className="object-cover"
+          className="object-contain"
           priority
         />
-        s
       </div>
 
       <div className="relative w-full h-[500px] overflow-hidden">
diff --git a/public/charging.png b/public/charging.png
new file mode 100644
index 0000000..d190a19
Binary files /dev/null and b/public/charging.png differ
diff --git a/public/front.png b/public/front.png
new file mode 100644
index 0000000..ad160ea
Binary files /dev/null and b/public/front.png differ
diff --git a/public/headunit.png b/public/headunit.png
new file mode 100644
index 0000000..80d6e56
Binary files /dev/null and b/public/headunit.png differ
diff --git a/public/inter.png b/public/inter.png
new file mode 100644
index 0000000..95c7775
Binary files /dev/null and b/public/inter.png differ
diff --git a/public/isra.png b/public/isra.png
new file mode 100644
index 0000000..aef1098
Binary files /dev/null and b/public/isra.png differ
diff --git a/public/j8-ardis-black.png b/public/j8-ardis-black.png
new file mode 100644
index 0000000..f538110
Binary files /dev/null and b/public/j8-ardis-black.png differ
diff --git a/public/j8-green-ardis.png b/public/j8-green-ardis.png
new file mode 100644
index 0000000..00ce4dc
Binary files /dev/null and b/public/j8-green-ardis.png differ
diff --git a/public/j8-silver-ardis.png b/public/j8-silver-ardis.png
new file mode 100644
index 0000000..02d2be6
Binary files /dev/null and b/public/j8-silver-ardis.png differ
diff --git a/public/j8-white-ardis.png b/public/j8-white-ardis.png
new file mode 100644
index 0000000..7816e44
Binary files /dev/null and b/public/j8-white-ardis.png differ
diff --git a/public/panoramic.png b/public/panoramic.png
new file mode 100644
index 0000000..79d6acb
Binary files /dev/null and b/public/panoramic.png differ
diff --git a/public/rear.png b/public/rear.png
new file mode 100644
index 0000000..ef3032a
Binary files /dev/null and b/public/rear.png differ
diff --git a/public/tiktok1.jpeg b/public/tiktok1.jpeg
new file mode 100644
index 0000000..8e0d8ad
Binary files /dev/null and b/public/tiktok1.jpeg differ
diff --git a/public/tiktok2.jpeg b/public/tiktok2.jpeg
new file mode 100644
index 0000000..b5f86b0
Binary files /dev/null and b/public/tiktok2.jpeg differ
diff --git a/public/tiktok3.jpeg b/public/tiktok3.jpeg
new file mode 100644
index 0000000..f283dc9
Binary files /dev/null and b/public/tiktok3.jpeg differ