diff --git a/app/about/galery/page.tsx b/app/about/galery/page.tsx
new file mode 100644
index 0000000..ee50764
--- /dev/null
+++ b/app/about/galery/page.tsx
@@ -0,0 +1,16 @@
+import Footer from "@/components/landing-page/footer";
+import GallerySection from "@/components/landing-page/galery";
+import Navbar from "@/components/landing-page/navbar";
+
+export default function AboutPage() {
+  return (
+    <div className="relative min-h-screen font-[family-name:var(--font-geist-sans)]">
+      <div className="relative z-10 bg-white w-full mx-auto">
+        <Navbar />
+        <GallerySection />
+
+        <Footer />
+      </div>
+    </div>
+  );
+}
diff --git a/app/about/page.tsx b/app/about/profile/page.tsx
similarity index 55%
rename from app/about/page.tsx
rename to app/about/profile/page.tsx
index 38db846..784ff56 100644
--- a/app/about/page.tsx
+++ b/app/about/profile/page.tsx
@@ -1,14 +1,7 @@
 import Agent from "@/components/landing-page/agent";
 import Footer from "@/components/landing-page/footer";
-import Galeri from "@/components/landing-page/galeri";
 import HeaderAbout from "@/components/landing-page/header-about";
-import HeaderItems from "@/components/landing-page/header-item";
-import Help from "@/components/landing-page/help";
-import FormJaecoo from "@/components/landing-page/jaecoo-form";
 import Navbar from "@/components/landing-page/navbar";
-import NearestLocation from "@/components/landing-page/nearest-location";
-
-import Service from "@/components/landing-page/service";
 
 export default function AboutPage() {
   return (
@@ -17,9 +10,6 @@ export default function AboutPage() {
         <Navbar />
         <HeaderAbout />
         <Agent />
-        <Galeri />
-        <FormJaecoo />
-        <Help />
         <Footer />
       </div>
     </div>
diff --git a/app/about/sosmed/page.tsx b/app/about/sosmed/page.tsx
new file mode 100644
index 0000000..17871c6
--- /dev/null
+++ b/app/about/sosmed/page.tsx
@@ -0,0 +1,18 @@
+import Footer from "@/components/landing-page/footer";
+import Navbar from "@/components/landing-page/navbar";
+
+import Service from "@/components/landing-page/service";
+import SosmedSection from "@/components/landing-page/social-media";
+
+export default function AboutPage() {
+  return (
+    <div className="relative min-h-screen font-[family-name:var(--font-geist-sans)]">
+      <div className="relative z-10 bg-white w-full mx-auto">
+        <Navbar />
+        <SosmedSection />
+
+        <Footer />
+      </div>
+    </div>
+  );
+}
diff --git a/app/customer-service/after-sales/page.tsx b/app/customer-service/after-sales/page.tsx
new file mode 100644
index 0000000..a66d7ec
--- /dev/null
+++ b/app/customer-service/after-sales/page.tsx
@@ -0,0 +1,15 @@
+import Footer from "@/components/landing-page/footer";
+import HeaderAfterSalesServices from "@/components/landing-page/header-after-sales";
+import Navbar from "@/components/landing-page/navbar";
+
+export default function AfterSalesServicesPage() {
+  return (
+    <div className="relative min-h-screen font-[family-name:var(--font-geist-sans)]">
+      <div className="relative z-10 bg-white w-full mx-auto">
+        <Navbar />
+        <HeaderAfterSalesServices />
+        <Footer />
+      </div>
+    </div>
+  );
+}
diff --git a/app/customer-service/sales/page.tsx b/app/customer-service/sales/page.tsx
new file mode 100644
index 0000000..179dc37
--- /dev/null
+++ b/app/customer-service/sales/page.tsx
@@ -0,0 +1,15 @@
+import Footer from "@/components/landing-page/footer";
+import HeaderSalesServices from "@/components/landing-page/header-sales";
+import Navbar from "@/components/landing-page/navbar";
+
+export default function SalesServicesPage() {
+  return (
+    <div className="relative min-h-screen font-[family-name:var(--font-geist-sans)]">
+      <div className="relative z-10 bg-white w-full mx-auto">
+        <Navbar />
+        <HeaderSalesServices />
+        <Footer />
+      </div>
+    </div>
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
index cb18965..fbaf312 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,7 +1,6 @@
 import Footer from "@/components/landing-page/footer";
 import Header from "@/components/landing-page/header";
 import Items from "@/components/landing-page/items";
-import Location from "@/components/landing-page/location";
 import Navbar from "@/components/landing-page/navbar";
 import Video from "@/components/landing-page/video";
 import Agent from "@/components/landing-page/agent";
@@ -17,7 +16,7 @@ export default function Home() {
         <Items />
         <Video />
         <Agent />
-        <Location />
+        {/* <Location /> */}
         <Footer />
       </div>
     </div>
diff --git a/app/price/price-information/page.tsx b/app/price/price-information/page.tsx
new file mode 100644
index 0000000..465e2ed
--- /dev/null
+++ b/app/price/price-information/page.tsx
@@ -0,0 +1,15 @@
+import Footer from "@/components/landing-page/footer";
+import HeaderPriceInformation from "@/components/landing-page/header-price";
+import Navbar from "@/components/landing-page/navbar";
+
+export default function PriceInformationPage() {
+  return (
+    <div className="relative min-h-screen font-[family-name:var(--font-geist-sans)]">
+      <div className="relative z-10 bg-white w-full mx-auto">
+        <Navbar />
+        <HeaderPriceInformation />
+        <Footer />
+      </div>
+    </div>
+  );
+}
diff --git a/app/price/promo/page.tsx b/app/price/promo/page.tsx
new file mode 100644
index 0000000..6aaa47a
--- /dev/null
+++ b/app/price/promo/page.tsx
@@ -0,0 +1,15 @@
+import Footer from "@/components/landing-page/footer";
+import Navbar from "@/components/landing-page/navbar";
+import HeaderPromo from "@/components/landing-page/promo";
+
+export default function PromoPage() {
+  return (
+    <div className="relative min-h-screen font-[family-name:var(--font-geist-sans)]">
+      <div className="relative z-10 bg-white w-full mx-auto">
+        <Navbar />
+        <HeaderPromo />
+        <Footer />
+      </div>
+    </div>
+  );
+}
diff --git a/app/product/j7-awd/page.tsx b/app/product/j7-awd/page.tsx
new file mode 100644
index 0000000..38eae0e
--- /dev/null
+++ b/app/product/j7-awd/page.tsx
@@ -0,0 +1,21 @@
+import Exterior from "@/components/landing-page/exterior";
+import FeaturesAndSpecifications from "@/components/landing-page/features-and-specifications";
+import Footer from "@/components/landing-page/footer";
+import HeaderProductJ7Awd from "@/components/landing-page/header-product-j7-awd";
+import Interior from "@/components/landing-page/interior";
+import Navbar from "@/components/landing-page/navbar";
+
+export default function ProductJ7Page() {
+  return (
+    <div className="relative min-h-screen font-[family-name:var(--font-geist-sans)]">
+      <div className="relative z-10 bg-white w-full mx-auto">
+        <Navbar />
+        <HeaderProductJ7Awd />
+        <Exterior />
+        <Interior />
+        <FeaturesAndSpecifications />
+        <Footer />
+      </div>
+    </div>
+  );
+}
diff --git a/app/product/j7-shs/page.tsx b/app/product/j7-shs/page.tsx
new file mode 100644
index 0000000..0e92ec1
--- /dev/null
+++ b/app/product/j7-shs/page.tsx
@@ -0,0 +1,21 @@
+import ExteriorShs from "@/components/landing-page/exterior-shs";
+import FeaturesAndSpecificationsShs from "@/components/landing-page/features-and-specifications-shs";
+import Footer from "@/components/landing-page/footer";
+import HeaderProductJ7Shs from "@/components/landing-page/header-product-j7-shs";
+import InteriorShs from "@/components/landing-page/interior-shs";
+import Navbar from "@/components/landing-page/navbar";
+
+export default function ProductJ7ShsPage() {
+  return (
+    <div className="relative min-h-screen font-[family-name:var(--font-geist-sans)]">
+      <div className="relative z-10 bg-white w-full mx-auto">
+        <Navbar />
+        <HeaderProductJ7Shs />
+        <ExteriorShs />
+        <InteriorShs />
+        <FeaturesAndSpecificationsShs />
+        <Footer />
+      </div>
+    </div>
+  );
+}
diff --git a/app/product/j8-awd/page.tsx b/app/product/j8-awd/page.tsx
new file mode 100644
index 0000000..45d5e8b
--- /dev/null
+++ b/app/product/j8-awd/page.tsx
@@ -0,0 +1,21 @@
+import ExteriorJ8Awd from "@/components/landing-page/exterior-j8-awd";
+import FeaturesAndSpecificationsJ8 from "@/components/landing-page/features-and-specifications-j8";
+import Footer from "@/components/landing-page/footer";
+import HeaderProductJ8Awd from "@/components/landing-page/header-product-j8-awd";
+import InteriorJ8Awd from "@/components/landing-page/interior-j8-awd";
+import Navbar from "@/components/landing-page/navbar";
+
+export default function ProductJ8Page() {
+  return (
+    <div className="relative min-h-screen font-[family-name:var(--font-geist-sans)]">
+      <div className="relative z-10 bg-white w-full mx-auto">
+        <Navbar />
+        <HeaderProductJ8Awd />
+        <ExteriorJ8Awd />
+        <InteriorJ8Awd />
+        <FeaturesAndSpecificationsJ8 />
+        <Footer />
+      </div>
+    </div>
+  );
+}
diff --git a/app/product/page.tsx b/app/product/page.tsx
index 98eea1b..37746a4 100644
--- a/app/product/page.tsx
+++ b/app/product/page.tsx
@@ -1,7 +1,7 @@
 import Exterior from "@/components/landing-page/exterior";
 import FeaturesAndSpecifications from "@/components/landing-page/features-and-specifications";
 import Footer from "@/components/landing-page/footer";
-import HeaderProduct from "@/components/landing-page/header-product";
+import HeaderProduct from "@/components/landing-page/header-product-j7-awd";
 import Interior from "@/components/landing-page/interior";
 import Navbar from "@/components/landing-page/navbar";
 
diff --git a/app/service/after-sales/page.tsx b/app/service/after-sales/page.tsx
new file mode 100644
index 0000000..2a7ae65
--- /dev/null
+++ b/app/service/after-sales/page.tsx
@@ -0,0 +1,15 @@
+import HeaderAfterSales from "@/components/landing-page/after-sales";
+import Footer from "@/components/landing-page/footer";
+import Navbar from "@/components/landing-page/navbar";
+
+export default function AfterSalesPage() {
+  return (
+    <div className="relative min-h-screen font-[family-name:var(--font-geist-sans)]">
+      <div className="relative z-10 bg-white w-full mx-auto">
+        <Navbar />
+        <HeaderAfterSales />
+        <Footer />
+      </div>
+    </div>
+  );
+}
diff --git a/app/service/program-service/page.tsx b/app/service/program-service/page.tsx
new file mode 100644
index 0000000..da88ff7
--- /dev/null
+++ b/app/service/program-service/page.tsx
@@ -0,0 +1,15 @@
+import Footer from "@/components/landing-page/footer";
+import Navbar from "@/components/landing-page/navbar";
+import HeaderProgramSales from "@/components/landing-page/program-sales";
+
+export default function ProgramSalesPage() {
+  return (
+    <div className="relative min-h-screen font-[family-name:var(--font-geist-sans)]">
+      <div className="relative z-10 bg-white w-full mx-auto">
+        <Navbar />
+        <HeaderProgramSales />
+        <Footer />
+      </div>
+    </div>
+  );
+}
diff --git a/components/landing-page/after-sales.tsx b/components/landing-page/after-sales.tsx
new file mode 100644
index 0000000..c048f4e
--- /dev/null
+++ b/components/landing-page/after-sales.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import Image from "next/image";
+import { motion } from "framer-motion";
+
+export default function HeaderAfterSales() {
+  const services = [
+    {
+      image: "/after-sales.png",
+      title: "GARANSI KENDARAAN",
+      description:
+        "Jaecoo Indonesia berkomitmen seluruh pelanggan setia Jaecoo Indonesia dengan memberikan garansi kendaraan selama 6 tahun apabila terdapat cacat material atau kesalahan dari hasil kerja pabrik.",
+    },
+    {
+      image: "/after-sales.png",
+      title: "GARANSI MESIN",
+      description:
+        "Jaecoo Indonesia memberikan garansi mesin selama 10 tahun apabila terdapat cacat material atau kesalahan dari hasil kerja pabrik.",
+    },
+    {
+      image: "/after-sales.png",
+      title: "FREE BIAYA PERAWATAN",
+      description:
+        "Jaecoo Indonesia memberikan gratis biaya perawatan atau service di Dealer Resmi Jaecoo selama 4 tahun kepada seluruh pelanggan Jaecoo Indonesia.",
+    },
+    {
+      image: "/after-sales2.png",
+      title: "SPAREPART",
+      description:
+        "Jaecoo Indonesia menyediakan sparepart berkualitas terbaik dan orisinil dari pabrik Jaecoo Indonesia.",
+    },
+  ];
+
+  return (
+    <>
+      <section className="py-10 px-4 sm:px-6 md:px-10 bg-white">
+        <motion.div
+          initial={{ opacity: 0, y: 50 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+          className="flex flex-col items-center gap-6"
+        >
+          <div className="relative w-full max-w-[1400px] mx-auto overflow-hidden">
+            <div className="relative pt-[40%]">
+              {" "}
+              {/* Ini mengatur tinggi sesuai rasio gambar */}
+              <Image
+                src="/banner-after-sales.png"
+                alt="about-header"
+                fill
+                className="object-contain"
+                sizes="(max-width: 768px) 100vw, 1400px"
+                priority
+              />
+            </div>
+          </div>
+
+          <div className="w-full max-w-[1400px] mx-auto mt-12">
+            <h2 className="text-3xl font-bold text-black mb-8">
+              After Sales Services
+            </h2>
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+              {services.map((item, index) => (
+                <div key={index} className="flex flex-col gap-4">
+                  <div className="relative w-full h-80">
+                    <Image
+                      src={item.image}
+                      alt={item.title}
+                      fill
+                      className="object-cover "
+                    />
+                  </div>
+                  <h3 className="text-lg font-semibold text-[#1F6779]">
+                    {item.title}
+                  </h3>
+                  <p className="text-[#1F6779] text-[18px]">
+                    {item.description}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </motion.div>
+      </section>
+    </>
+  );
+}
diff --git a/components/landing-page/agent.tsx b/components/landing-page/agent.tsx
index dd7de6b..7957675 100644
--- a/components/landing-page/agent.tsx
+++ b/components/landing-page/agent.tsx
@@ -4,6 +4,11 @@ import Image from "next/image";
 import { motion } from "framer-motion";
 
 const agents = [
+  {
+    name: "Henny",
+    title: "Branch Manager Jaecoo Kelapa Gading",
+    image: "/henny.png",
+  },
   {
     name: "Zamroni",
     title: "Spv Jaecoo Kelapa Gading",
@@ -24,16 +29,11 @@ const agents = [
     title: "Spv Jaecoo Kelapa Gading",
     image: "/amendra.png",
   },
-  {
-    name: "Henny",
-    title: "Branch Manager Jaecoo Kelapa Gading",
-    image: "/henny.png",
-  },
 ];
 
 export default function Agent() {
   return (
-    <section className="py-16 px-6 md:px-12 bg-[#f9f9f9] text-center mt-0">
+    <section className="py-16 px-6 md:px-5 bg-[#FAFDFF] text-center mt-0">
       <motion.h2
         initial={{ opacity: 0, y: 30 }}
         whileInView={{ opacity: 1, y: 0 }}
@@ -41,20 +41,10 @@ export default function Agent() {
         viewport={{ once: true }}
         className="text-3xl md:text-6xl font-semibold text-gray-900 mb-2"
       >
-        Agen Unggulan Kami
+        Our Teams
       </motion.h2>
 
-      <motion.p
-        initial={{ opacity: 0, y: 20 }}
-        whileInView={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.6, delay: 0.2 }}
-        viewport={{ once: true }}
-        className="text-gray-600 mb-10 text-lg"
-      >
-        Temui anggota tim kami yang luar biasa
-      </motion.p>
-
-      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6 justify-center">
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-5 gap-2 place-items-center mt-10">
         {agents.map((agent, index) => (
           <motion.div
             key={index}
@@ -66,9 +56,9 @@ export default function Agent() {
               ease: "easeOut",
             }}
             viewport={{ once: true, amount: 0.3 }}
-            className="bg-white shadow-md px-4 py-10 flex flex-col items-center h-[317px]"
+            className="bg-white shadow-md  py-4 gap-2 flex flex-col items-center h-[300px] w-[250px]"
           >
-            <div className="relative w-36 h-40 mb-14">
+            <div className="relative w-44 h-48 mb-3">
               <Image
                 src={agent.image}
                 alt={agent.name}
@@ -76,8 +66,8 @@ export default function Agent() {
                 className="rounded-full object-cover"
               />
             </div>
-            <h3 className="text-2xl text-gray-900">{agent.name}</h3>
-            <p className="text-xs text-gray-600 text-center mt-1">
+            <h3 className="text-lg text-gray-900 text-center">{agent.name}</h3>
+            <p className="text-sm text-gray-600 text-center mt-1">
               {agent.title}
             </p>
           </motion.div>
diff --git a/components/landing-page/best-agent.tsx b/components/landing-page/best-agent.tsx
new file mode 100644
index 0000000..c4b3e8a
--- /dev/null
+++ b/components/landing-page/best-agent.tsx
@@ -0,0 +1,68 @@
+"use client";
+
+import Image from "next/image";
+import { motion } from "framer-motion";
+
+const agents = [
+  {
+    name: "Johny Nugroho",
+    title: "Branch Manager Jaecoo Cihampelas Bandung",
+    image: "/johny.png",
+  },
+  {
+    name: "Basuki Pamungkas",
+    title: "Spv Jaecoo Cihampelas Bandung",
+    image: "/basuki.png",
+  },
+  {
+    name: "Deni Tihayar",
+    title: "Spv Jaecoo Cihampelas Bandung",
+    image: "/deni.png",
+  },
+];
+
+export default function BestAgent() {
+  return (
+    <section className="py-16 px-4 sm:px-6 md:px-12 bg-[#f9f9f9] text-center mt-0">
+      <motion.h2
+        initial={{ opacity: 0, y: 30 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.6 }}
+        viewport={{ once: true }}
+        className="text-2xl sm:text-3xl md:text-4xl font-semibold text-gray-900 mb-10"
+      >
+        Our Teams
+      </motion.h2>
+
+      <div className="flex flex-col md:flex-row flex-wrap items-center justify-center gap-6">
+        {agents.map((agent, index) => (
+          <motion.div
+            key={index}
+            initial={{ opacity: 0, y: 40 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{
+              duration: 0.6,
+              delay: index * 0.2 + 0.3,
+              ease: "easeOut",
+            }}
+            viewport={{ once: true, amount: 0.3 }}
+            className="bg-white shadow-md p-4 flex flex-col items-center w-full max-w-[224px] h-[340px] sm:h-[300px]"
+          >
+            <div className="relative w-28 h-36 mb-3">
+              <Image
+                src={agent.image}
+                alt={agent.name}
+                fill
+                className="rounded-full object-cover"
+              />
+            </div>
+            <h3 className="text-lg text-gray-900 text-center">{agent.name}</h3>
+            <p className="text-xs text-gray-600 text-center mt-1">
+              {agent.title}
+            </p>
+          </motion.div>
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/components/landing-page/exterior-j8-awd.tsx b/components/landing-page/exterior-j8-awd.tsx
new file mode 100644
index 0000000..5294660
--- /dev/null
+++ b/components/landing-page/exterior-j8-awd.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import Image from "next/image";
+import { motion } from "framer-motion";
+import { useInView } from "react-intersection-observer";
+import { useEffect, useState } from "react";
+
+const featuresJ8 = [
+  {
+    title: "ARDIS",
+    description:
+      "ARDIS (All-Road Drive Intelligent System) automatically adjusts power to each wheel, giving you better grip, stability, and control on any road.",
+    image: "/ex-j8.png",
+  },
+  {
+    title: "CDC Magnetic Suspension",
+    description:
+      "Equipped with real-time road condition detection, the J8 instantly adjusts shock absorbers to keep the vehicle stable, ensuring a smooth and controlled ride.",
+    image: "/ex-j8-2.png",
+  },
+  {
+    title: "2.0L Turbocharged Engine",
+    description:
+      "Equipped with a 2.0L turbo engine that delivers 183 kW and 385 Nm, the J8 offers strong performance and smooth control for any road.",
+    image: "/ex-j8-3.png",
+  },
+  {
+    title: "Waterfall Grille Design",
+    description:
+      "Features a bold, flowing design that captures attention at first glance. The cascading pattern blends elegance with energy, reflecting modern confidence while optimizing airflow for improved vehicle performance.",
+    image: "/ex-j8-4.png",
+  },
+  {
+    title: "LED Tech Headlamp",
+    description: "",
+    image: "/ex-j8-5.png",
+  },
+  {
+    title: "20-inch Alloy Wheels",
+    description:
+      "Striking 20-inch alloy wheels deliver a blend of style and durability. ",
+    image: "/ex-j8-6.png",
+  },
+  {
+    title: "Hidden door handles",
+    description:
+      "Seamlessly integrated into the vehicle body to reduce wind noise and drag.",
+    image: "/ex-j8-7.png",
+  },
+  {
+    title: "Strong Through Waistline",
+    description:
+      "The J8’s exterior embodies bold simplicity with crisp, powerful lines and a golden-ratio silhouette.",
+    image: "/ex-j8-8.png",
+  },
+];
+
+export default function ExteriorJ8Awd() {
+  const [ref, inView] = useInView({ triggerOnce: true, threshold: 0.2 });
+  const [show, setShow] = useState(false);
+
+  useEffect(() => {
+    if (inView) {
+      setShow(true);
+    }
+  }, [inView]);
+
+  return (
+    <section
+      ref={ref}
+      className="py-10 px-4 sm:px-6 md:px-20 bg-white overflow-hidden"
+    >
+      <motion.h2
+        initial={{ opacity: 0, y: 20 }}
+        animate={show ? { opacity: 1, y: 0 } : {}}
+        transition={{ duration: 0.6 }}
+        className="text-2xl mt-5 mb-8"
+      >
+        <span className="text-[#1F6779] font-semibold">Jaecoo 8 AWD</span>{" "}
+        Teknologi dan Exterior
+      </motion.h2>
+
+      <motion.div
+        initial={{ opacity: 0, y: 50 }}
+        animate={show ? { opacity: 1, y: 0 } : {}}
+        transition={{ delay: 0.2, duration: 0.8 }}
+        className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-2 sm:gap-4 mt-5"
+      >
+        {featuresJ8.map((item, index) => (
+          <motion.div
+            key={index}
+            className="relative aspect-[4/3] overflow-hidden group"
+            whileHover={{ scale: 1.02 }}
+            transition={{ duration: 0.3 }}
+          >
+            <Image
+              src={item.image}
+              alt={item.title}
+              fill
+              className="object-cover group-hover:scale-105 transition-transform duration-300"
+              sizes="(max-width: 768px) 100vw, 25vw"
+            />
+            <div className="absolute bottom-0 bg-gradient-to-t from-black/80 to-transparent p-4">
+              <h3 className="text-sm sm:text-base font-bold text-white">
+                {item.title}
+              </h3>
+              <p className="text-xs sm:text-sm text-gray-300 mt-1">
+                {item.description}
+              </p>
+            </div>
+          </motion.div>
+        ))}
+      </motion.div>
+    </section>
+  );
+}
diff --git a/components/landing-page/exterior-shs.tsx b/components/landing-page/exterior-shs.tsx
new file mode 100644
index 0000000..17562db
--- /dev/null
+++ b/components/landing-page/exterior-shs.tsx
@@ -0,0 +1,141 @@
+"use client";
+
+import Image from "next/image";
+import { motion } from "framer-motion";
+import { useInView } from "react-intersection-observer";
+import { useEffect, useState } from "react";
+
+const featuresshs = [
+  {
+    title: "Rear view mirrors",
+    description:
+      "The mirrors on the pillars are a discreet but aesthetic design detail of the Jaecoo J7 SHS. Their contrasting inserts harmoniously resonate with other accent touches of the exterior.",
+    image: "/ex-shs3.png",
+  },
+  {
+    title: "Wheels 19”",
+    description:
+      "Built with a lightweight aluminum chassis, offering enhanced strength, durability, and improved performance for a superior driving experience.",
+    image: "/ex-shs4.png",
+  },
+  {
+    title: "Retractable handles",
+    description:
+      "The designers used a spectacular solution - door handles that automatically extend using an electric drive. Minimal force is required to open the door.",
+    image: "/ex-shs5.png",
+  },
+  {
+    title: "Rear Bumper Design",
+    description:
+      "Featuring refined lines and bold contours, the rear bumper enhances the vehicle's sporty and stylish character.",
+    image: "/ex-shs6.png",
+  },
+];
+
+export default function ExteriorShs() {
+  const [ref, inView] = useInView({ triggerOnce: true, threshold: 0.2 });
+  const [show, setShow] = useState(false);
+
+  useEffect(() => {
+    if (inView) {
+      setShow(true);
+    }
+  }, [inView]);
+
+  return (
+    <section
+      ref={ref}
+      className="py-10 px-4 sm:px-6 md:px-20 bg-white overflow-hidden"
+    >
+      <motion.h2
+        initial={{ opacity: 0, y: 20 }}
+        animate={show ? { opacity: 1, y: 0 } : {}}
+        transition={{ duration: 0.6 }}
+        className="text-2xl mt-5 mb-8"
+      >
+        <span className="text-[#1F6779] font-semibold">Jaecoo 7 SHS</span>{" "}
+        Teknologi dan Exterior
+      </motion.h2>
+
+      <motion.div
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={show ? { opacity: 1, scale: 1 } : {}}
+        transition={{ duration: 0.8 }}
+        className="relative w-full h-[300px] sm:h-[400px] md:h-[600px] my-5"
+      >
+        <Image
+          src="/ex-shs.png"
+          alt="Aluminium Chassis"
+          fill
+          className="object-cover"
+          sizes="100vw"
+        />
+        <div className="absolute bottom-6 left-3 sm:left-3 md:left-6 max-w-5xl">
+          <h2 className="text-xl sm:text-xl font-semibold text-white">
+            5th generation 1.5t + 1dht
+          </h2>
+          <p className="text-xs sm:text-xs mt-2 text-gray-200">
+            Drive with peace of mind, protected by 7 strategically placed
+            airbags designed for maximum safety in every journey.
+          </p>
+        </div>
+      </motion.div>
+      <motion.div
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={show ? { opacity: 1, scale: 1 } : {}}
+        transition={{ duration: 0.8 }}
+        className="relative w-full h-[300px] sm:h-[400px] md:h-[600px]"
+      >
+        <Image
+          src="/ex-shs2.png"
+          alt="Aluminium Chassis"
+          fill
+          className="object-cover"
+          sizes="100vw"
+        />
+        <div className="absolute bottom-6 left-3 sm:left-3 md:left-6 max-w-5xl">
+          <h2 className="text-xl sm:text-xl font-semibold text-white">
+            IP68 protection hybrid battery
+          </h2>
+          <p className="text-xs sm:text-xs mt-2 text-gray-200">
+            Advanced Hybrid Battery Pack Designed for Durability and Performance
+            with IP68 Protection. Engineered for toughness, this hybrid battery
+            pack features IP68 protection and triple-layer safety against
+            damage.
+          </p>
+        </div>
+      </motion.div>
+      <motion.div
+        initial={{ opacity: 0, y: 50 }}
+        animate={show ? { opacity: 1, y: 0 } : {}}
+        transition={{ delay: 0.2, duration: 0.8 }}
+        className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-2 sm:gap-4 mt-5"
+      >
+        {featuresshs.map((item, index) => (
+          <motion.div
+            key={index}
+            className="relative aspect-[4/3] overflow-hidden group"
+            whileHover={{ scale: 1.02 }}
+            transition={{ duration: 0.3 }}
+          >
+            <Image
+              src={item.image}
+              alt={item.title}
+              fill
+              className="object-cover group-hover:scale-105 transition-transform duration-300"
+              sizes="(max-width: 768px) 100vw, 25vw"
+            />
+            <div className="absolute bottom-0 bg-gradient-to-t from-black/80 to-transparent p-4">
+              <h3 className="text-sm sm:text-base font-bold text-white">
+                {item.title}
+              </h3>
+              <p className="text-xs sm:text-sm text-gray-300 mt-1">
+                {item.description}
+              </p>
+            </div>
+          </motion.div>
+        ))}
+      </motion.div>
+    </section>
+  );
+}
diff --git a/components/landing-page/features-and-specifications-j8.tsx b/components/landing-page/features-and-specifications-j8.tsx
new file mode 100644
index 0000000..89c782e
--- /dev/null
+++ b/components/landing-page/features-and-specifications-j8.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import Image from "next/image";
+
+export default function FeaturesAndSpecificationsJ8() {
+  return (
+    <section className="pt-10 px-4 sm:px-6 md:px-20 bg-white">
+      <h2 className="text-2xl mt-5 mb-8">
+        <span className="text-[#1F6779] font-semibold">Jaecoo 8 AWD</span> Fitur
+      </h2>
+
+      <div className="relative w-full h-[300px] sm:h-[400px] md:h-[600px]">
+        <Image
+          src="/fitur1.png"
+          alt="Aluminium Chassis"
+          fill
+          className="object-cover"
+          sizes="100vw"
+        />
+        <div className="absolute bottom-26 left-3 sm:left-10 md:left-26 max-w-xs bg-white/60 rounded-lg p-4">
+          <h2 className="text-xl sm:text-sm font-semibold text-black">
+            Lane Changing Assistance
+          </h2>
+          <p className="text-xs sm:text-xs mt-2 text-black">
+            Advanced safety feature that monitors surrounding traffic and
+            provides alerts or steering support to help ensure sasfe and
+            confident lane changes
+          </p>
+        </div>
+      </div>
+
+      <div className="relative w-full h-[300px] sm:h-[400px] md:h-[600px] my-20">
+        <Image
+          src="/awd-fitur8.png"
+          alt="Aluminium Chassis"
+          fill
+          className="object-cover"
+          sizes="100vw"
+        />
+      </div>
+      <h2 className="text-2xl mt-5 mb-8">
+        <span className="text-[#1F6779] font-semibold">Jaecoo 8 AWD</span>{" "}
+        Spesifikasi
+      </h2>
+      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-x-32 gap-y-6 text-sm sm:text-base text-start my-10">
+        <div>
+          <p className="text-gray-500">Max Power</p>
+          <p className="font-bold">248ps</p>
+        </div>
+        <div>
+          <p className="text-gray-500">AWD Technology</p>
+          <p className="font-bold">ARDIS</p>
+        </div>
+        <div>
+          <p className="text-gray-500">Suspension</p>
+          <p className="font-bold">CDC Magnetic</p>
+        </div>
+        <div>
+          <p className="text-gray-500">ADAS</p>
+          <p className="font-bold">19 adas</p>
+        </div>
+        <div>
+          <p className="text-gray-500">Engine</p>
+          <p className="font-bold">2.0TGDI</p>
+        </div>
+        <div>
+          <p className="text-gray-500">0-100km-h</p>
+          <p className="font-bold">8.8s</p>
+        </div>
+        <div>
+          <p className="text-gray-500">airbag</p>
+          <p className="font-bold">10 airbags</p>
+        </div>
+        <div>
+          <p className="text-gray-500">Torque</p>
+          <p className="font-bold">385N.m</p>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/landing-page/features-and-specifications-shs.tsx b/components/landing-page/features-and-specifications-shs.tsx
new file mode 100644
index 0000000..d6864ef
--- /dev/null
+++ b/components/landing-page/features-and-specifications-shs.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+import Image from "next/image";
+
+export default function FeaturesAndSpecificationsShs() {
+  return (
+    <section className="pt-10 px-4 sm:px-6 md:px-20 bg-white">
+      <h2 className="text-2xl mt-5 mb-8">
+        <span className="text-[#1F6779] font-semibold">Jaecoo 7 SHS</span> Fitur
+      </h2>
+
+      <div className="relative w-full h-[300px] sm:h-[400px] md:h-[600px]">
+        <Image
+          src="/fitur1.png"
+          alt="Aluminium Chassis"
+          fill
+          className="object-cover"
+          sizes="100vw"
+        />
+        <div className="absolute bottom-26 left-3 sm:left-10 md:left-26 max-w-xs bg-white/60 rounded-lg p-4">
+          <h2 className="text-xl sm:text-sm font-semibold text-black">
+            Lane Changing Assistance
+          </h2>
+          <p className="text-xs sm:text-xs mt-2 text-black">
+            Advanced safety feature that monitors surrounding traffic and
+            provides alerts or steering support to help ensure sasfe and
+            confident lane changes
+          </p>
+        </div>
+      </div>
+      <div className="relative w-full h-[300px] sm:h-[400px] md:h-[600px] my-20">
+        <Image
+          src="/fitur2.png"
+          alt="Aluminium Chassis"
+          fill
+          className="object-cover"
+          sizes="100vw"
+        />
+      </div>
+      <h2 className="text-2xl mt-5 mb-8">
+        <span className="text-[#1F6779] font-semibold">Jaecoo 7 SHS</span>{" "}
+        Spesifikasi
+      </h2>
+      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-x-32 gap-y-6 text-sm sm:text-base text-start my-10">
+        <div>
+          <p className="text-gray-500">Max Range</p>
+          <p className="font-bold">1,200km</p>
+        </div>
+        <div>
+          <p className="text-gray-500">Power Train</p>
+          <p className="font-bold">1.5T+1DHT</p>
+        </div>
+        <div>
+          <p className="text-gray-500">Pure EV Mode Range</p>
+          <p className="font-bold">WLTP 90km</p>
+        </div>
+        <div>
+          <p className="text-gray-500">ADAS</p>
+          <p className="font-bold">19 ADAS</p>
+        </div>
+        <div>
+          <p className="text-gray-500">Battery Capacity</p>
+          <p className="font-bold">18.3kWh</p>
+        </div>
+        <div>
+          <p className="text-gray-500">0-100km-h</p>
+          <p className="font-bold">8,5s</p>
+        </div>
+        <div>
+          <p className="text-gray-500">Airbag</p>
+          <p className="font-bold">8 airbags</p>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/landing-page/features-and-specifications.tsx b/components/landing-page/features-and-specifications.tsx
index 57b5c02..2d9ab00 100644
--- a/components/landing-page/features-and-specifications.tsx
+++ b/components/landing-page/features-and-specifications.tsx
@@ -75,99 +75,6 @@ export default function FeaturesAndSpecifications() {
           <p className="font-bold">19 adas</p>
         </div>
       </div>
-      <div className="grid grid-cols-1 sm:grid-cols-3 gap-6   pt-10  ">
-        <div className="text-start px-4 border-l border-gray-300">
-          <div className="mb-14 ml-3">
-            <div className="text-4xl mb-2">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="30"
-                height="30"
-                viewBox="0 0 24 24"
-              >
-                <g fill="none">
-                  <path
-                    stroke="currentColor"
-                    // stroke-linejoin="round"
-                    // stroke-width="2"
-                    d="M12 13v7.098c0 .399 0 .598-.129.67c-.129.071-.298-.035-.636-.246L4.94 16.588c-.46-.288-.69-.431-.815-.658C4 15.705 4 15.434 4 14.893V8m8 5L4 8m8 5l5.286-3.304c1.218-.761 1.827-1.142 1.827-1.696s-.609-.935-1.827-1.696L13.06 3.663c-.516-.323-.773-.484-1.06-.484s-.544.161-1.06.484L4 8"
-                  />
-                  <path
-                    fill="currentColor"
-                    d="M19 12a1 1 0 1 0 2 0zm.875-3.93L19 8.553zM19 9.107V12h2V9.108zm.59-2.544l-3.06-1.912l-1.06 1.696l3.06 1.913zM21 9.109c0-.252.001-.51-.02-.733a2 2 0 0 0-.23-.79l-1.75.97c-.027-.05-.02-.073-.011.01c.01.106.011.254.011.543zm-2.47-.848c.246.154.37.233.454.298c.067.05.043.045.016-.004l1.75-.97a2 2 0 0 0-.549-.614c-.177-.136-.397-.272-.611-.405z"
-                  />
-                  <circle
-                    cx="17.5"
-                    cy="16.5"
-                    r="2.5"
-                    stroke="currentColor"
-                    // stroke-width="2"
-                  />
-                  <path
-                    stroke="currentColor"
-                    // stroke-linecap="round"
-                    // stroke-width="2"
-                    d="m21 20l-1.5-1.5"
-                  />
-                  <path
-                    fill="currentColor"
-                    d="M14.53 20.598a1 1 0 0 0-1.06-1.696zM11 20.375l-.53.848zm.937.444l-.063.998zm.126 0L12 19.82zm-.533-1.292l-3-1.875l-1.06 1.696l3 1.875zm1.94-.625l-.5.313l1.06 1.695l.5-.312zm-.5.313l-.5.312l1.06 1.696l.5-.312zm-2.5 2.008c.213.133.429.27.625.368c.214.108.47.206.779.226L12 19.82c.056.003.072.022-.005-.016a7 7 0 0 1-.465-.278zm2-1.696a7 7 0 0 1-.465.278c-.077.038-.061.02-.005.016l.126 1.996c.31-.02.565-.118.779-.226c.196-.099.412-.235.625-.368zm-.596 2.29q.126.008.252 0L12 19.82z"
-                  />
-                </g>
-              </svg>
-            </div>
-            <p className="font-semibold mb-1"> {">"}TERSEDIA DALAM STOK</p>
-            <p className="text-gray-600 text-sm">
-              Jelajahi pilihan hebat kami dari mobil Jaecoo
-            </p>
-          </div>
-        </div>
-
-        <div className="text-start px-4 border-l border-r border-gray-300">
-          <div className="mb-14 ml-3">
-            <div className="text-2xl mb-2">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="30"
-                height="30"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  fill="currentColor"
-                  d="M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20zm8-7L4 8v10h16V8zm0-2l8-5H4zM4 8V6v12z"
-                />
-              </svg>
-            </div>
-            <p className="font-semibold mb-1">{">"}BERITAHU SAYA</p>
-            <p className="text-gray-600 text-sm">
-              Daftar untuk semua berita terbaru dari Jaecoo
-            </p>
-          </div>
-        </div>
-
-        <div className="text-start px-4 border-r border-gray-300">
-          <div className="mb-14">
-            <div className="text-2xl mb-2">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="30"
-                height="30"
-                viewBox="0 0 512 512"
-              >
-                <path
-                  fill="currentColor"
-                  //   fill-rule="evenodd"
-                  d="M256 42.667c117.821 0 213.334 95.513 213.334 213.333c0 117.821-95.513 213.334-213.334 213.334c-117.82 0-213.333-95.513-213.333-213.334C42.667 138.18 138.18 42.667 256 42.667M85.334 256c0 87.032 65.145 158.848 149.332 169.346V316.358c-21.87-7.73-38.283-27.01-41.913-50.51L85.636 245.762q-.301 5.081-.302 10.238m341.031-10.238l-107.118 20.086c-3.629 23.5-20.043 42.78-41.913 50.51v108.988C361.523 414.848 426.668 343.032 426.668 256q-.001-5.156-.302-10.238M256 85.334c-76.056 0-140.493 49.75-162.541 118.484l107.16 20.085C211.699 204.827 232.352 192 256 192c23.65 0 44.302 12.827 55.382 31.903l107.16-20.085C396.493 135.084 332.057 85.334 256 85.334"
-                />
-              </svg>
-            </div>
-            <p className="font-semibold mb-1">{">"}PESAN TEST DRIVE</p>
-            <p className="text-gray-600 text-sm">
-              Atur test drive di jalan melalui Dealer terdekat kami
-            </p>
-          </div>
-        </div>
-      </div>
     </section>
   );
 }
diff --git a/components/landing-page/galery.tsx b/components/landing-page/galery.tsx
new file mode 100644
index 0000000..adbc481
--- /dev/null
+++ b/components/landing-page/galery.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+const imagesPerPage = 6;
+
+const galleryImages = [
+  "/gl1.png",
+  "/gl-2-news.png",
+  "/gl3.png",
+  "/gl4.png",
+  "/gl5.png",
+  "/gl6.png",
+  "/gl7.png",
+  "/gl8.png",
+  "/gl9.png",
+];
+
+export default function GallerySection() {
+  const [currentPage, setCurrentPage] = useState(1);
+  const totalPages = Math.ceil(galleryImages.length / imagesPerPage);
+
+  const paginatedImages = galleryImages.slice(
+    (currentPage - 1) * imagesPerPage,
+    currentPage * imagesPerPage
+  );
+
+  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="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+        {paginatedImages.map((img, index) => (
+          <div key={index} className="relative w-full aspect-[3/2]">
+            <Image
+              src={img}
+              alt={`gallery-${index}`}
+              fill
+              className="object-cover"
+            />
+          </div>
+        ))}
+      </div>
+
+      <div className="flex items-center justify-center gap-2 mt-10">
+        <button
+          onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
+          disabled={currentPage === 1}
+          className="p-2 rounded-md hover:bg-gray-200 disabled:opacity-30"
+        >
+          <ChevronLeft />
+        </button>
+        {[...Array(totalPages)].map((_, i) => (
+          <button
+            key={i}
+            onClick={() => setCurrentPage(i + 1)}
+            className={`w-8 h-8 rounded-md border text-sm ${
+              currentPage === i + 1
+                ? "bg-[#1F6779] text-white"
+                : "text-gray-700 hover:bg-gray-100"
+            }`}
+          >
+            {i + 1}
+          </button>
+        ))}
+        <button
+          onClick={() =>
+            setCurrentPage((prev) => Math.min(prev + 1, totalPages))
+          }
+          disabled={currentPage === totalPages}
+          className="p-2 rounded-md hover:bg-gray-200 disabled:opacity-30"
+        >
+          <ChevronRight />
+        </button>
+      </div>
+    </section>
+  );
+}
diff --git a/components/landing-page/header-about.tsx b/components/landing-page/header-about.tsx
index 3be2178..41e3fbc 100644
--- a/components/landing-page/header-about.tsx
+++ b/components/landing-page/header-about.tsx
@@ -6,52 +6,112 @@ import { motion } from "framer-motion";
 export default function HeaderAbout() {
   return (
     <section className="py-10 px-4 sm:px-6 md:px-10 bg-white">
-      <div className="flex flex-col items-center gap-6">
-        <motion.div
-          className="relative w-full h-[300px] sm:h-[400px] md:h-[640px] overflow-hidden "
-          initial={{ opacity: 0, y: 40 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.8, ease: [0.25, 0.1, 0.25, 1] }}
-          viewport={{ once: true }}
-        >
+      <motion.div
+        initial={{ opacity: 0, y: 50 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8 }}
+        className="flex flex-col items-center gap-6 mb-24"
+      >
+        <h2 className="text-4xl font-bold mb-1">
+          Mengenal Lebih Dekat Dealer Resmi{" "}
+          <span className="text-[#1F6779]">Jaecoo</span>
+        </h2>
+        <p className="text-lg">
+          Komitmen kami adalah memberikan layanan terbaik dan pengalaman premium
+          di setiap kunjungan Anda.
+        </p>
+        <div className="relative w-full max-w-[1400px] mx-auto h-[300px] sm:h-[400px] md:h-[500px] overflow-hidden">
           <Image
-            src="/about-i.png"
+            src="/journey-2.png"
             alt="about-header"
             fill
             className="object-cover"
             sizes="(max-width: 768px) 100vw, 640px"
             priority
           />
-        </motion.div>
-      </div>
-
-      <div className="w-full flex flex-col lg:flex-row gap-10 mt-10">
+        </div>
+      </motion.div>
+      <div className="max-w-[1400px] mx-auto flex flex-col lg:flex-row gap-10 my-10">
         <motion.div
-          className="w-full lg:w-6/12 space-y-6 sm:ml-15"
+          className="relative w-full lg:w-[536px] h-[300px] sm:h-[400px] lg:h-[576px] overflow-hidden"
+          initial={{ opacity: 0, x: 40 }}
+          whileInView={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.8, ease: [0.25, 0.1, 0.25, 1] }}
+          viewport={{ once: true }}
+        >
+          <Image
+            src="/mas-group.png"
+            alt="Dealer Jaecoo"
+            fill
+            className="object-cover object-center"
+            sizes="(max-width: 768px) 100vw, 536px"
+          />
+        </motion.div>
+        <motion.div
+          className="w-full lg:w-8/12 space-y-10 "
           initial={{ opacity: 0, x: -40 }}
           whileInView={{ opacity: 1, x: 0 }}
           transition={{ duration: 0.8, ease: [0.25, 0.1, 0.25, 1] }}
           viewport={{ once: true }}
         >
           <h2 className="text-2xl sm:text-3xl font-bold text-black">
-            Mengenal Lebih Dekat Dealer Resmi Jaecoo
+            <span className="text-[#1F6779]">Mas </span>Group
+          </h2>
+
+          <div className="flex flex-col gap-8 mt-5">
+            <p className="text-black leading-relaxed text-xl">
+               MAS Group began its journey as a vehicle rental service provider,
+              supporting Chevron Group’s oil and gas exploration vendors in Riau
+              Province. In 2002, with the entry of Ford Motor Company into the
+              Indonesian market, we were appointed as an authorized Ford dealer
+              for the Riau region.
+            </p>
+            <p className="text-black leading-relaxed text-xl">
+              Thanks to our team’s extensive experience and the strength of our
+              product offerings, we successfully secured large fleet contracts
+              and were consistently recognized by Ford Motor Indonesia as one of
+              its top-performing dealers over several consecutive years.
+            </p>
+            <p className="text-black leading-relaxed text-xl">
+              Building on this success, we expanded our automotive portfolio to
+              include Mercedes-Benz trucks dealership operations and broadened
+              our car rental services to meet the increasing demand from sectors
+              such as coal mining, oil and gas, palm oil plantations, and
+              logistics.
+            </p>
+            <p className="text-black leading-relaxed text-xl">
+              Today, we are proud to be a major EV dealer in Indonesia,
+              representing several leading brands: Chery & Tiggo ,Great Wall
+              Motors (Tank, Haval, Ora), MG, Omoda & Jaecoo and Lepas.
+            </p>
+          </div>
+        </motion.div>
+      </div>
+      <div className="max-w-[1400px] mx-auto flex flex-col lg:flex-row gap-10 mt-24">
+        <motion.div
+          className="w-full lg:w-8/12 space-y-6 "
+          initial={{ opacity: 0, x: -40 }}
+          whileInView={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.8, ease: [0.25, 0.1, 0.25, 1] }}
+          viewport={{ once: true }}
+        >
+          <h2 className="text-2xl sm:text-4xl font-bold text-black">
+            Mengenal Lebih Dekat Dealer Resmi{" "}
+            <span className="text-[#1F6779]">Jaecoo</span>
           </h2>
 
           <div>
-            <h3 className="text-lg sm:text-xl font-semibold text-gray-800 mb-2">
-              Deskripsi Singkat
-            </h3>
-            <p className="text-gray-600 leading-relaxed text-base">
-              Dealer resmi Jaecoo sejak 2023, berlokasi di pusat Bandung. Kami
+            <p className="text-gray-600 leading-relaxed text-xl">
+              Dealer resmi Jaecoo sejak 2025, berlokasi di Kelapa Gading. Kami
               melayani penjualan, servis, serta test drive dengan fasilitas
               showroom modern dan teknisi bersertifikat.
             </p>
           </div>
 
-          <div className="text-gray-700 text-sm space-y-2">
+          <div className="text-gray-700 text-xl space-y-2">
             <p>
-              <strong>Alamat:</strong> Jaecoo Cihampelas Bandung, Jl. Cihampelas
-              No. 264-268, Bandung, Jawa Barat 40131
+              <strong>Alamat:</strong> Jaecoo 1S Kelapa Gading, Jl. Boulevard
+              Raya Blok LA 6 No. 34-35, Kelapa Gading, Jakarta Utara 14240
             </p>
             <p>
               <strong>Telepon:</strong> 021-12345678
@@ -70,7 +130,7 @@ export default function HeaderAbout() {
           viewport={{ once: true }}
         >
           <Image
-            src="/dealer.png"
+            src="/dealer-2.png"
             alt="Dealer Jaecoo"
             fill
             className="object-cover object-center"
diff --git a/components/landing-page/header-after-sales.tsx b/components/landing-page/header-after-sales.tsx
new file mode 100644
index 0000000..bd3d83f
--- /dev/null
+++ b/components/landing-page/header-after-sales.tsx
@@ -0,0 +1,115 @@
+"use client";
+
+import Image from "next/image";
+import { Button } from "../ui/button";
+import { motion } from "framer-motion";
+import { useState } from "react";
+
+export default function HeaderAfterSalesServices() {
+  const cars = [
+    {
+      title: "JAECOO J7 AWD",
+      image: "/j7-awd-nobg.png",
+      price: "Rp 549.000.000",
+      oldPrice: "Rp 544.000.000",
+      capacity: "18.3kWh",
+      wheels: `19"`,
+      seats: "Leather",
+      display: `14.8"`,
+    },
+    {
+      title: "JAECOO J7 SHS",
+      image: "/j7-shs-nobg.png",
+      price: "Rp 599.000.000",
+      oldPrice: "Rp 594.000.000",
+      capacity: "18.3kWh",
+      wheels: `19"`,
+      seats: "Leather",
+      display: `14.8"`,
+    },
+    {
+      title: "JAECOO J8 AWD",
+      image: "/j8-awd-nobg.png",
+      price: "Rp 812.000.000",
+      oldPrice: "Rp 807.000.000",
+      capacity: "18.3kWh",
+      wheels: `19"`,
+      seats: "Leather",
+      display: `14.8"`,
+    },
+  ];
+  return (
+    <>
+      <section className="py-10 px-4 sm:px-6 md:px-10 bg-white">
+        <motion.div
+          initial={{ opacity: 0, y: 50 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+          className="flex flex-col items-center gap-6"
+        >
+          <h2 className="text-4xl font-bold mb-1">
+            Layanan Konsumen After Sales
+          </h2>
+          <div className="relative w-full max-w-[1400px] mx-auto h-[300px] sm:h-[400px] md:h-[640px] overflow-hidden">
+            <Image
+              src="/layanan-sales.png"
+              alt="about-header"
+              fill
+              className="object-cover"
+              sizes="(max-width: 768px) 100vw, 640px"
+              priority
+            />
+          </div>
+        </motion.div>
+        <motion.div
+          initial={{ opacity: 0, y: 50 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+          className="flex flex-col items-center gap-6 mt-20"
+        >
+          <div className="w-full max-w-[1400px] mx-auto grid grid-cols-1 lg:grid-cols-[3fr_1fr] gap-6">
+            <div className="relative h-[300px] sm:h-[400px] md:h-[600px] w-full overflow-hidden ">
+              <Image
+                src="/further-news.png"
+                alt="Banner After Sales"
+                fill
+                className="rounded-md object-cover"
+                priority
+              />
+            </div>
+
+            <div className="flex flex-col items-center lg:items-start justify-center text-center lg:text-left gap-4 px-4 py-6">
+              <Image
+                src="/jhony.png"
+                alt="Johny"
+                width={150}
+                height={150}
+                className="rounded-md object-cover"
+              />
+              <div>
+                <h3 className="text-xl font-semibold">Taufik</h3>
+                <p className="text-sm text-gray-600 mt-1">
+                  Silahkan Hubungi Taufik untuk Layanan Konsumen After Sales
+                  Jaecoo Kelapa Gading
+                </p>
+              </div>
+              <Button
+                asChild
+                className="bg-transparent hover:bg-green-600  mt-4 w-full border border-[#BCD4DF] text-[#1F6779]"
+                size={"lg"}
+              >
+                <a
+                  href="https://wa.me/62XXXXXXXXXX"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Whatsapp →
+                </a>
+              </Button>
+            </div>
+          </div>
+        </motion.div>
+      </section>
+    </>
+  );
+}
diff --git a/components/landing-page/header-price.tsx b/components/landing-page/header-price.tsx
new file mode 100644
index 0000000..0654560
--- /dev/null
+++ b/components/landing-page/header-price.tsx
@@ -0,0 +1,273 @@
+"use client";
+
+import Image from "next/image";
+import { Button } from "../ui/button";
+import { motion } from "framer-motion";
+import { useState } from "react";
+import Link from "next/link";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../ui/dialog";
+import { Input } from "../ui/input";
+import { Textarea } from "../ui/textarea";
+
+export default function HeaderPriceInformation() {
+  const [open, setOpen] = useState(false);
+  const cars = [
+    {
+      title: "JAECOO J7 AWD",
+      image: "/j7-awd-nobg.png",
+      price: "Rp 549.000.000",
+      oldPrice: "Rp 544.000.000",
+      capacity: "18.3kWh",
+      wheels: `19"`,
+      seats: "Leather",
+      display: `14.8"`,
+    },
+    {
+      title: "JAECOO J7 SHS",
+      image: "/j7-shs-nobg.png",
+      price: "Rp 599.000.000",
+      oldPrice: "Rp 594.000.000",
+      capacity: "18.3kWh",
+      wheels: `19"`,
+      seats: "Leather",
+      display: `14.8"`,
+    },
+    {
+      title: "JAECOO J8 AWD",
+      image: "/j8-awd-nobg.png",
+      price: "Rp 812.000.000",
+      oldPrice: "Rp 807.000.000",
+      capacity: "18.3kWh",
+      wheels: `19"`,
+      seats: "Leather",
+      display: `14.8"`,
+    },
+  ];
+  return (
+    <>
+      <section className="py-10 px-4 sm:px-6 md:px-10 bg-white">
+        <motion.div
+          initial={{ opacity: 0, y: 50 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+          className="flex flex-col items-center gap-6"
+        >
+          <h2 className="text-4xl font-bold mb-1">
+            Harga Terbaik Di Dealer Resmi Kami
+          </h2>
+          <p className="text-lg">
+            Dapatkan penawaran terbaik di dealer resmi kami untuk pengalaman
+            berkendara yang tak terlupakan!
+          </p>
+          <div className="relative w-full max-w-[1400px] mx-auto h-[300px] sm:h-[400px] md:h-[640px] overflow-hidden">
+            <Image
+              src="/price-header.png"
+              alt="about-header"
+              fill
+              className="object-cover"
+              sizes="(max-width: 768px) 100vw, 640px"
+              priority
+            />
+          </div>
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 w-full max-w-[1400px] mt-10">
+            {cars.map((car, idx) => (
+              <div
+                key={idx}
+                className="relative rounded-2xl border p-6 pt-10 flex flex-col items-center shadow-sm"
+              >
+                <span className="absolute top-4 left-4 bg-[#1F6779] text-white text-sm px-3 py-1 rounded-md z-10">
+                  NEW OFFER
+                </span>
+
+                <h3 className="text-3xl font-bold text-center mt-5">
+                  {car.title}
+                </h3>
+                <div className="relative w-full h-48 my-4">
+                  <Image
+                    src={car.image}
+                    alt={car.title}
+                    fill
+                    className="object-contain"
+                  />
+                </div>
+                <div className="flex  items-center justify-center border rounded-lg p-3 w-full text-center mb-2 gap-3">
+                  <p className="text-xs text-[#1F6779]">START FROM</p>
+                  <p className="text-2xl font-bold text-[#1F6779]">
+                    {car.price}
+                  </p>
+                  <div className="text-[#1F6779]">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="13"
+                      height="13"
+                      viewBox="0 0 32 32"
+                    >
+                      <path
+                        fill="currentColor"
+                        d="M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2m0 26a12 12 0 1 1 12-12a12 12 0 0 1-12 12"
+                      />
+                      <path
+                        fill="currentColor"
+                        d="M15 8h2v11h-2zm1 14a1.5 1.5 0 1 0 1.5 1.5A1.5 1.5 0 0 0 16 22"
+                      />
+                    </svg>
+                  </div>
+                </div>
+                <p className="text-[15px] text-black text-start mb-4">
+                  *Save Rp 5.000.000 on the previous driveway price of{" "}
+                  {car.oldPrice}. Offer ends 31st August 2025.
+                </p>
+                <div className="grid grid-cols-2 gap-2 w-full text-lg text-center mb-4">
+                  <div className="bg-[#EAF7FF] p-5 rounded-md flex items-center gap-2">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="36"
+                      height="36"
+                      viewBox="0 0 36 36"
+                    >
+                      <path
+                        fill="currentColor"
+                        d="M22 4V2.62a.6.6 0 0 0-.58-.62h-6.84a.6.6 0 0 0-.58.62V4h-4a1.09 1.09 0 0 0-1 1.07v28a1 1 0 0 0 1 .93h16a1 1 0 0 0 1-.94v-28A1.09 1.09 0 0 0 26 4Zm-1.74 21.44a1.2 1.2 0 0 1-2.15 1.07l-5.46-10.95l6 1l-2.29-4a1.2 1.2 0 1 1 2.08-1.2l4.83 8.37l-6.37-1.03Z"
+                        className="clr-i-solid clr-i-solid-path-1"
+                      />
+                      <path fill="none" d="M0 0h36v36H0z" />
+                    </svg>
+                    <div className="flex flex-col items-center">
+                      <span className="font-bold">{car.capacity}</span>{" "}
+                      <span className="text-sm">Battery Capacity</span>
+                    </div>
+                  </div>
+                  <div className="bg-[#EAF7FF] p-5 rounded-md flex items-center gap-2">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="24"
+                      height="24"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        fill="currentColor"
+                        // fill-rule="evenodd"
+                        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10m5.954-9.25h-3.049a3 3 0 0 1-.803 1.39l1.524 2.64a6 6 0 0 0 2.328-4.03m-3.626 4.782l-1.525-2.64a3 3 0 0 1-1.606 0l-1.525 2.64A6 6 0 0 0 12 18c.825 0 1.612-.167 2.328-.468m-5.954-.751l1.524-2.64a3 3 0 0 1-.804-1.391H6.046a6 6 0 0 0 2.328 4.03m9.58-5.531h-3.049a3 3 0 0 0-.803-1.39l1.524-2.64a6 6 0 0 1 2.328 4.03m-3.626-4.782A6 6 0 0 0 12 6c-.825 0-1.612.167-2.328.468l1.525 2.64a3 3 0 0 1 1.606 0zM9.898 9.86L8.374 7.22a6 6 0 0 0-2.328 4.03h3.049c.138-.535.42-1.013.803-1.39"
+                        // clip-rule="evenodd"
+                      />
+                    </svg>
+                    <div className="flex flex-col items-center justify-center text-center">
+                      <span className="font-bold">{car.wheels}</span>{" "}
+                      <span className="text-sm">Alloy Wheels</span>
+                    </div>
+                  </div>
+                  <div className="bg-[#EAF7FF] p-5 rounded-md flex items-center gap-2">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="24"
+                      height="24"
+                      viewBox="0 0 512 512"
+                    >
+                      <path
+                        fill="currentColor"
+                        d="m71.47 18.38l-.01.01c-6.58-.1-14.25.79-21.52 2.41c-8.31 1.84-16.18 4.69-21.3 7.56c-2.57 1.44-4.42 2.9-5.24 3.8l25.86 90.54c7.22-9.1 15.41-16.6 23.75-22.2c9.69-6.44 19.19-10.67 27.89-12.47c0-13.14-.3-25.92-1.8-36.76c-1.9-13.05-5.6-23.03-11.5-28.91c-1.3-1.35-6.28-3.44-13.39-3.88c-.89 0-1.81-.1-2.74-.1m29.03 92.12c-6.7.4-14.2 3.5-21.1 8.7c-13.68 10.3-24.04 28.7-24.34 40.2l45.74 240.3c7.6-9.5 19.2-15.7 32.2-15.7c11.5 0 22 4.9 29.5 12.7c5.1-1.1 10.5-2.2 16.4-3.3c1.5-.3 3.1-.5 4.7-.8c-13.5-92.5-35.3-199.6-65.2-275.3c-5.2-4.8-10.3-6.7-15.6-6.8zm283 39.5l-53.6 167.4l17.2 5.4l24-75.1l117.1 37.5l5.4-17.2l-117-37.4l24.1-75.2zm-38.7 245.3c-21.5.1-46.3 1.4-71 3.7c-33 2.9-66 7.4-91.6 12.1c-3.5.6-6.8 1.3-10 1.9q1.8 5.7 1.8 12c0 22.5-18.5 41-41 41c-5.6 0-11-1.2-15.9-3.2c-3.1 8.9-5.4 17.6-6.7 24.2H398c5 0 7.7-1.8 10.7-6.4c3.1-4.7 5.4-12.4 6.3-21.5c1.9-18.1-2.1-41.2-9.1-55.1c.3.5-2.8-2.5-10.2-4.4s-18.1-3.3-30.7-3.9c-6.3-.3-13.1-.4-20.2-.4M133 402c-12.8 0-23 10.2-23 23s10.2 23 23 23s23-10.2 23-23s-10.2-23-23-23"
+                      />
+                    </svg>
+                    <div className="flex flex-col items-center justify-center text-center ml-5">
+                      <span className="font-bold">{car.seats}</span>{" "}
+                      <span className="text-sm"> Seats</span>
+                    </div>
+                  </div>
+                  <div className="bg-[#EAF7FF] p-5 rounded-md flex items-center gap-2">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="24"
+                      height="24"
+                      viewBox="0 0 36 36"
+                    >
+                      <path
+                        fill="currentColor"
+                        d="M32.5 3h-29A1.5 1.5 0 0 0 2 4.5v21A1.5 1.5 0 0 0 3.5 27h29a1.5 1.5 0 0 0 1.5-1.5v-21A1.5 1.5 0 0 0 32.5 3M32 25H4V5h28Z"
+                        className="clr-i-outline clr-i-outline-path-1"
+                      />
+                      <path
+                        fill="currentColor"
+                        d="M7.7 8.76h20.43l1.81-1.6H6.1V23h1.6z"
+                        className="clr-i-outline clr-i-outline-path-2"
+                      />
+                      <path
+                        fill="currentColor"
+                        d="M26 32h-1.74a3.6 3.6 0 0 1-1.5-2.52v-1.35h-1.52v1.37a4.2 4.2 0 0 0 .93 2.5h-8.34a4.2 4.2 0 0 0 .93-2.52v-1.35h-1.52v1.37a3.6 3.6 0 0 1-1.5 2.5h-1.8a1 1 0 1 0 0 2h16.12a.92.92 0 0 0 1-1A1 1 0 0 0 26 32"
+                        className="clr-i-outline clr-i-outline-path-3"
+                      />
+                      <path fill="none" d="M0 0h36v36H0z" />
+                    </svg>
+                    <div className="flex flex-col items-center justify-center text-center ml-5">
+                      <span className="font-bold">{car.display}</span>{" "}
+                      <span className="text-sm"> Display</span>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex gap-2 w-full ">
+                  <Link href={"/product"} className="w-full">
+                    <Button
+                      className=" w-full border-[#1F6779] text-lg p-6"
+                      variant="outline"
+                    >
+                      View Specs
+                    </Button>
+                  </Link>
+                  <Dialog open={open} onOpenChange={setOpen}>
+                    <DialogTrigger asChild>
+                      <Button className="bg-[#1F6779] text-white h-[30px] md:w-[200px] md:h-[50px] p-6  hover:cursor-pointer">
+                        TEST DRIVE
+                      </Button>
+                    </DialogTrigger>
+                    <DialogContent className="sm:max-w-[1400px] h-[600px]">
+                      <div className="flex items-center gap-4">
+                        <Image
+                          src="/masjaecoonav.png"
+                          alt="MAS JAECOO Logo"
+                          width={300}
+                          height={30}
+                          className=" object-fill"
+                        />
+                      </div>
+                      <DialogHeader>
+                        <DialogTitle className="text-4xl text-center mb-4 font-bold">
+                          FORM TEST DRIVE
+                        </DialogTitle>
+                      </DialogHeader>
+
+                      {/* Form */}
+                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 px-10">
+                        <Input placeholder="Nama" />
+                        <Input placeholder="Email" />
+                        <Input placeholder="Mobile Number" />
+                        <Input placeholder="Location" />
+                      </div>
+
+                      <div className="mt-3 px-10">
+                        <Textarea placeholder="Full Message" rows={4} />
+                      </div>
+
+                      <div className="mt-6 text-left ml-10">
+                        <Button
+                          onClick={() => setOpen(false)}
+                          className="bg-[#1F6779] text-white rounded-full"
+                        >
+                          SEND INQUIRY
+                        </Button>
+                      </div>
+                    </DialogContent>
+                  </Dialog>
+                </div>
+              </div>
+            ))}
+          </div>
+        </motion.div>
+      </section>
+    </>
+  );
+}
diff --git a/components/landing-page/header-product-j7-awd.tsx b/components/landing-page/header-product-j7-awd.tsx
new file mode 100644
index 0000000..1f55b2b
--- /dev/null
+++ b/components/landing-page/header-product-j7-awd.tsx
@@ -0,0 +1,175 @@
+"use client";
+
+import Image from "next/image";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { Textarea } from "../ui/textarea";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../ui/dialog";
+import { motion } from "framer-motion";
+import { useState } from "react";
+import { Download } from "lucide-react";
+
+export default function HeaderProductJ7Awd() {
+  const [open, setOpen] = useState(false);
+  const [selectedColorIndex, setSelectedColorIndex] = useState(0);
+  const [openBrosur, setOpenBrosur] = useState(false);
+  const fileId = "1Nici3bdjUG524sUYQgHfbeO63xW6f1_o";
+  const fileLink = `https://drive.google.com/file/d/${fileId}/view`;
+  const embedLink = `https://drive.google.com/file/d/${fileId}/preview`;
+  const downloadLink = `https://drive.google.com/uc?export=download&id=${fileId}`;
+
+  const images = [
+    "/jj7-cars.png",
+    "/green-j7-awd.png",
+    "/black-j7-awd.png",
+    "/white-j7-awd.png",
+  ];
+
+  const gradients = [
+    "linear-gradient(to bottom, #B0B5C2, #B0B5C2)",
+    "linear-gradient(to bottom, #5D6B4F, #5D6B4F)",
+    "linear-gradient(to bottom, #1A1A1A, #3A3A3A)",
+    "linear-gradient(to bottom, #FFFFFF, #FFFFFF)",
+  ];
+  return (
+    <>
+      <section className="py-10 px-4 sm:px-6 md:px-10 bg-white">
+        <motion.div
+          initial={{ opacity: 0, y: 50 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+          className="flex flex-col items-center gap-6"
+        >
+          <div className="relative w-full h-[300px] sm:h-[400px] md:h-[640px] overflow-hidden">
+            <Image
+              src="/product1.jpg"
+              alt="about-header"
+              fill
+              className="object-cover"
+              sizes="(max-width: 768px) 100vw, 640px"
+              priority
+            />
+
+            <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex items-center gap-3">
+              <Dialog open={openBrosur} onOpenChange={setOpenBrosur}>
+                <DialogTrigger asChild>
+                  <Button className="bg-white text-black border w-[100px] h-[30px] md:w-[200px] md:h-[40px] rounded-xl hover:bg-amber-50 hover:cursor-pointer">
+                    BROSUR
+                  </Button>
+                </DialogTrigger>
+
+                <DialogContent className=" w-full p-0 overflow-hidden">
+                  <div className="flex justify-end p-4 bg-white z-50">
+                    <a
+                      href={downloadLink}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="absolute top-2 right-3 z-50 bg-black text-white p-2 rounded hover:bg-gray-800 mb-3"
+                    >
+                      <Download size={18} />
+                    </a>
+                  </div>
+
+                  <iframe
+                    src={embedLink}
+                    className="w-full h-[70vh] border-t"
+                    allow="autoplay"
+                  ></iframe>
+                </DialogContent>
+              </Dialog>
+
+              <Dialog open={open} onOpenChange={setOpen}>
+                <DialogTrigger asChild>
+                  <Button className="bg-[#1F6779] text-white h-[30px] md:w-[200px] md:h-[40px] rounded-xl hover:cursor-pointer">
+                    TEST DRIVE
+                  </Button>
+                </DialogTrigger>
+                <DialogContent className="sm:max-w-[1400px] h-[600px]">
+                  <div className="flex items-center gap-4">
+                    <Image
+                      src="/masjaecoonav.png"
+                      alt="MAS JAECOO Logo"
+                      width={300}
+                      height={30}
+                      className=" object-fill"
+                    />
+                  </div>
+                  <DialogHeader>
+                    <DialogTitle className="text-4xl text-center mb-4 font-bold">
+                      FORM TEST DRIVE
+                    </DialogTitle>
+                  </DialogHeader>
+
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 px-10">
+                    <Input placeholder="Nama" />
+                    <Input placeholder="Email" />
+                    <Input placeholder="Mobile Number" />
+                    <Input placeholder="Location" />
+                  </div>
+
+                  <div className="mt-3 px-10">
+                    <Textarea placeholder="Full Message" rows={4} />
+                  </div>
+
+                  <div className="mt-6 text-left ml-10">
+                    <Button
+                      onClick={() => setOpen(false)}
+                      className="bg-[#1F6779] text-white rounded-full"
+                    >
+                      SEND INQUIRY
+                    </Button>
+                  </div>
+                </DialogContent>
+              </Dialog>
+            </div>
+          </div>
+        </motion.div>
+      </section>
+
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 0.5, duration: 0.8 }}
+        className="relative w-full h-[200px] sm:h-[400px] md:h-[740px] overflow-hidden"
+      >
+        <div className="relative w-full h-[200px] sm:h-[300px] md:h-[740px] lg:h-[740px]">
+          <Image
+            src={images[selectedColorIndex]}
+            alt="about-header"
+            fill
+            className="object-cover"
+            sizes="(max-width: 640px) 100vw, (max-width: 1024px) 100vw, 1400px"
+            priority
+          />
+        </div>
+
+        <motion.div
+          initial={{ opacity: 0, x: -40 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ delay: 0.8, duration: 0.6 }}
+          className="absolute top-32 md:top-1/2 left-14 md:left-56 transform -translate-y-1/2 flex flex-col gap-4 z-10"
+        >
+          {gradients.map((bg, index) => (
+            <motion.button
+              key={index}
+              onClick={() => setSelectedColorIndex(index)}
+              whileHover={{ scale: 1.1 }}
+              whileTap={{ scale: 0.95 }}
+              className={`w-4 h-4 md:w-6 md:h-6 rounded-full border-2 ${
+                selectedColorIndex === index ? "border-black" : "border-white"
+              } shadow-md hover:cursor-pointer`}
+              style={{ background: bg }}
+              aria-label={`Pilih warna ${index + 1}`}
+            />
+          ))}
+        </motion.div>
+      </motion.div>
+    </>
+  );
+}
diff --git a/components/landing-page/header-product-j7-shs.tsx b/components/landing-page/header-product-j7-shs.tsx
new file mode 100644
index 0000000..9c4855d
--- /dev/null
+++ b/components/landing-page/header-product-j7-shs.tsx
@@ -0,0 +1,175 @@
+"use client";
+
+import Image from "next/image";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { Textarea } from "../ui/textarea";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../ui/dialog";
+import { motion } from "framer-motion";
+import { useState } from "react";
+import { Download } from "lucide-react";
+
+export default function HeaderProductJ7Shs() {
+  const [open, setOpen] = useState(false);
+  const [selectedColorIndex, setSelectedColorIndex] = useState(0);
+  const [openBrosur, setOpenBrosur] = useState(false);
+  const fileId = "1Nici3bdjUG524sUYQgHfbeO63xW6f1_o";
+  const fileLink = `https://drive.google.com/file/d/${fileId}/view`;
+  const embedLink = `https://drive.google.com/file/d/${fileId}/preview`;
+  const downloadLink = `https://drive.google.com/uc?export=download&id=${fileId}`;
+
+  const images = [
+    "/jj7-blue.png",
+    "/jj7-white.png",
+    "/jj7-silver.png",
+    "/jj7-black.png",
+  ];
+
+  const gradients = [
+    "linear-gradient(to bottom, #527D97, #527D97)",
+    "linear-gradient(to bottom, #FFFFFF, #FFFFFF)",
+    "linear-gradient(to bottom, #E1ECF4, #FFFFFF)",
+    "linear-gradient(to bottom, #1A1A1A, #3A3A3A)",
+  ];
+  return (
+    <>
+      <section className="py-10 px-4 sm:px-6 md:px-10 bg-white">
+        <motion.div
+          initial={{ opacity: 0, y: 50 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+          className="flex flex-col items-center gap-6"
+        >
+          <div className="relative w-full h-[300px] sm:h-[400px] md:h-[700px] overflow-hidden">
+            <Image
+              src="/shs-header.png"
+              alt="about-header"
+              fill
+              className="object-cover"
+              sizes="(max-width: 768px) 100vw, 640px"
+              priority
+            />
+
+            <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex items-center gap-3">
+              <Dialog open={openBrosur} onOpenChange={setOpenBrosur}>
+                <DialogTrigger asChild>
+                  <Button className="bg-white text-black border w-[100px] h-[30px] md:w-[200px] md:h-[40px] rounded-xl hover:bg-amber-50 hover:cursor-pointer">
+                    BROSUR
+                  </Button>
+                </DialogTrigger>
+
+                <DialogContent className=" w-full p-0 overflow-hidden">
+                  <div className="flex justify-end p-4 bg-white z-50">
+                    <a
+                      href={downloadLink}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="absolute top-2 right-3 z-50 bg-black text-white p-2 rounded hover:bg-gray-800 mb-3"
+                    >
+                      <Download size={18} />
+                    </a>
+                  </div>
+
+                  <iframe
+                    src={embedLink}
+                    className="w-full h-[70vh] border-t"
+                    allow="autoplay"
+                  ></iframe>
+                </DialogContent>
+              </Dialog>
+
+              <Dialog open={open} onOpenChange={setOpen}>
+                <DialogTrigger asChild>
+                  <Button className="bg-[#1F6779] text-white h-[30px] md:w-[200px] md:h-[40px] rounded-xl hover:cursor-pointer">
+                    TEST DRIVE
+                  </Button>
+                </DialogTrigger>
+                <DialogContent className="sm:max-w-[1400px] h-[600px]">
+                  <div className="flex items-center gap-4">
+                    <Image
+                      src="/masjaecoonav.png"
+                      alt="MAS JAECOO Logo"
+                      width={300}
+                      height={30}
+                      className=" object-fill"
+                    />
+                  </div>
+                  <DialogHeader>
+                    <DialogTitle className="text-4xl text-center mb-4 font-bold">
+                      FORM TEST DRIVE
+                    </DialogTitle>
+                  </DialogHeader>
+
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 px-10">
+                    <Input placeholder="Nama" />
+                    <Input placeholder="Email" />
+                    <Input placeholder="Mobile Number" />
+                    <Input placeholder="Location" />
+                  </div>
+
+                  <div className="mt-3 px-10">
+                    <Textarea placeholder="Full Message" rows={4} />
+                  </div>
+
+                  <div className="mt-6 text-left ml-10">
+                    <Button
+                      onClick={() => setOpen(false)}
+                      className="bg-[#1F6779] text-white rounded-full"
+                    >
+                      SEND INQUIRY
+                    </Button>
+                  </div>
+                </DialogContent>
+              </Dialog>
+            </div>
+          </div>
+        </motion.div>
+      </section>
+
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 0.5, duration: 0.8 }}
+        className="relative w-full h-[200px] sm:h-[400px] md:h-[740px] overflow-hidden"
+      >
+        <div className="relative w-full h-[200px] sm:h-[300px] md:h-[740px] lg:h-[740px]">
+          <Image
+            src={images[selectedColorIndex]}
+            alt="about-header"
+            fill
+            className="object-cover"
+            sizes="(max-width: 640px) 100vw, (max-width: 1024px) 100vw, 1400px"
+            priority
+          />
+        </div>
+
+        <motion.div
+          initial={{ opacity: 0, x: -40 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ delay: 0.8, duration: 0.6 }}
+          className="absolute top-32 md:top-1/2 left-14 md:left-56 transform -translate-y-1/2 flex flex-col gap-4 z-10"
+        >
+          {gradients.map((bg, index) => (
+            <motion.button
+              key={index}
+              onClick={() => setSelectedColorIndex(index)}
+              whileHover={{ scale: 1.1 }}
+              whileTap={{ scale: 0.95 }}
+              className={`w-4 h-4 md:w-6 md:h-6 rounded-full border-2 ${
+                selectedColorIndex === index ? "border-black" : "border-white"
+              } shadow-md hover:cursor-pointer`}
+              style={{ background: bg }}
+              aria-label={`Pilih warna ${index + 1}`}
+            />
+          ))}
+        </motion.div>
+      </motion.div>
+    </>
+  );
+}
diff --git a/components/landing-page/header-product-j8-awd.tsx b/components/landing-page/header-product-j8-awd.tsx
new file mode 100644
index 0000000..5e6152c
--- /dev/null
+++ b/components/landing-page/header-product-j8-awd.tsx
@@ -0,0 +1,170 @@
+"use client";
+
+import Image from "next/image";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { Textarea } from "../ui/textarea";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../ui/dialog";
+import { motion } from "framer-motion";
+import { useState } from "react";
+import { Download } from "lucide-react";
+
+export default function HeaderProductJ8Awd() {
+  const [open, setOpen] = useState(false);
+  const [selectedColorIndex, setSelectedColorIndex] = useState(0);
+  const [openBrosur, setOpenBrosur] = useState(false);
+  const fileId = "1Nici3bdjUG524sUYQgHfbeO63xW6f1_o";
+  const fileLink = `https://drive.google.com/file/d/${fileId}/view`;
+  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 gradients = [
+    "linear-gradient(to bottom, #527D97, #1F6779)",
+    "linear-gradient(to bottom, #FFFFFF, #FFFFFF)",
+    "linear-gradient(to bottom, #E1ECF4, #FFFFFF)",
+    "linear-gradient(to bottom, #1A1A1A, #3A3A3A)",
+  ];
+  return (
+    <>
+      <section className="py-10 px-4 sm:px-6 md:px-10 bg-white">
+        <motion.div
+          initial={{ opacity: 0, y: 50 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+          className="flex flex-col items-center gap-6"
+        >
+          <div className="relative w-full h-[200px] sm:h-[300px] md:h-[500px] lg:h-[700px] overflow-hidden">
+            <Image
+              src="/awd-8.png"
+              alt="about-header"
+              fill
+              className="object-cover object-center"
+              sizes="(max-width: 640px) 100vw, (max-width: 1024px) 100vw, 1400px"
+              priority
+            />
+
+            <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex items-center gap-3">
+              <Dialog open={openBrosur} onOpenChange={setOpenBrosur}>
+                <DialogTrigger asChild>
+                  <Button className="bg-white text-black border w-[100px] h-[30px] md:w-[200px] md:h-[40px] rounded-xl hover:bg-amber-50 hover:cursor-pointer">
+                    BROSUR
+                  </Button>
+                </DialogTrigger>
+
+                <DialogContent className=" w-full p-0 overflow-hidden">
+                  <div className="flex justify-end p-4 bg-white z-50">
+                    <a
+                      href={downloadLink}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="absolute top-2 right-3 z-50 bg-black text-white p-2 rounded hover:bg-gray-800 mb-3"
+                    >
+                      <Download size={18} />
+                    </a>
+                  </div>
+
+                  <iframe
+                    src={embedLink}
+                    className="w-full h-[70vh] border-t"
+                    allow="autoplay"
+                  ></iframe>
+                </DialogContent>
+              </Dialog>
+
+              <Dialog open={open} onOpenChange={setOpen}>
+                <DialogTrigger asChild>
+                  <Button className="bg-[#1F6779] text-white h-[30px] md:w-[200px] md:h-[40px] rounded-xl hover:cursor-pointer">
+                    TEST DRIVE
+                  </Button>
+                </DialogTrigger>
+                <DialogContent className="sm:max-w-[1400px] h-[600px]">
+                  <div className="flex items-center gap-4">
+                    <Image
+                      src="/masjaecoonav.png"
+                      alt="MAS JAECOO Logo"
+                      width={300}
+                      height={30}
+                      className=" object-fill"
+                    />
+                  </div>
+                  <DialogHeader>
+                    <DialogTitle className="text-4xl text-center mb-4 font-bold">
+                      FORM TEST DRIVE
+                    </DialogTitle>
+                  </DialogHeader>
+
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 px-10">
+                    <Input placeholder="Nama" />
+                    <Input placeholder="Email" />
+                    <Input placeholder="Mobile Number" />
+                    <Input placeholder="Location" />
+                  </div>
+
+                  <div className="mt-3 px-10">
+                    <Textarea placeholder="Full Message" rows={4} />
+                  </div>
+
+                  <div className="mt-6 text-left ml-10">
+                    <Button
+                      onClick={() => setOpen(false)}
+                      className="bg-[#1F6779] text-white rounded-full"
+                    >
+                      SEND INQUIRY
+                    </Button>
+                  </div>
+                </DialogContent>
+              </Dialog>
+            </div>
+          </div>
+        </motion.div>
+      </section>
+
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 0.5, duration: 0.8 }}
+        className="relative w-full h-[200px] sm:h-[400px] md:h-[740px] overflow-hidden"
+      >
+        <div className="relative w-full h-[200px] sm:h-[300px] md:h-[740px] lg:h-[740px]">
+          <Image
+            src={images[selectedColorIndex]}
+            alt="about-header"
+            fill
+            className="object-cover"
+            sizes="(max-width: 640px) 100vw, (max-width: 1024px) 100vw, 1400px"
+            priority
+          />
+        </div>
+
+        <motion.div
+          initial={{ opacity: 0, x: -40 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ delay: 0.8, duration: 0.6 }}
+          className="absolute top-32 md:top-1/2 left-14 md:left-56 transform -translate-y-1/2 flex flex-col gap-4 z-10"
+        >
+          {gradients.map((bg, index) => (
+            <motion.button
+              key={index}
+              onClick={() => setSelectedColorIndex(index)}
+              whileHover={{ scale: 1.1 }}
+              whileTap={{ scale: 0.95 }}
+              className={`w-4 h-4 md:w-6 md:h-6 rounded-full border-2 ${
+                selectedColorIndex === index ? "border-black" : "border-white"
+              } shadow-md hover:cursor-pointer`}
+              style={{ background: bg }}
+              aria-label={`Pilih warna ${index + 1}`}
+            />
+          ))}
+        </motion.div>
+      </motion.div>
+    </>
+  );
+}
diff --git a/components/landing-page/header-product.tsx b/components/landing-page/header-product.tsx
deleted file mode 100644
index 3c7d4d9..0000000
--- a/components/landing-page/header-product.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-"use client";
-
-import Image from "next/image";
-import { Button } from "../ui/button";
-import { motion } from "framer-motion";
-import Link from "next/link";
-
-export default function HeaderProduct() {
-  return (
-    <>
-      <section className="py-10 px-4 sm:px-6 md:px-10 bg-white">
-        <motion.div
-          initial={{ opacity: 0, y: 50 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.8 }}
-          className="flex flex-col items-center gap-6"
-        >
-          <div className="relative w-full h-[300px] sm:h-[400px] md:h-[640px] overflow-hidden">
-            <Image
-              src="/product1.jpg"
-              alt="about-header"
-              fill
-              className="object-cover"
-              sizes="(max-width: 768px) 100vw, 640px"
-              priority
-            />
-          </div>
-        </motion.div>
-
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.3, duration: 0.6 }}
-          className="flex flex-col md:flex-row justify-between items-center my-8"
-        >
-          <p className="text-lg md:text-5xl font-bold">JAECOO 7 AWD</p>
-          <div className="flex items-center mt-2 md:mt-0 gap-3">
-            <a
-              href="https://drive.google.com/file/d/1Nici3bdjUG524sUYQgHfbeO63xW6f1_o/view"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <Button className="bg-white text-black border w-[100px] h-[30px] md:w-[200px] md:h-[40px] rounded-xl hover:bg-amber-50 hover:cursor-pointer">
-                BROSUR
-              </Button>
-            </a>
-
-            <Link href={"/about"}>
-              <Button className="bg-[#1F6779] h-[30px] md:w-[200px] md:h-[40px] rounded-xl hover:cursor-pointer">
-                TEST DRIVE
-              </Button>
-            </Link>
-          </div>
-        </motion.div>
-      </section>
-
-      <motion.div
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ delay: 0.5, duration: 0.8 }}
-        className="relative w-full h-[300px] sm:h-[400px] md:h-[640px] overflow-hidden"
-      >
-        <Image
-          src="/color.png"
-          alt="about-header"
-          fill
-          className="object-cover"
-          sizes="(max-width: 768px) 100vw, 640px"
-          priority
-        />
-
-        <motion.div
-          initial={{ opacity: 0, x: -40 }}
-          animate={{ opacity: 1, x: 0 }}
-          transition={{ delay: 0.8, duration: 0.6 }}
-          className="absolute top-1/2 left-5 md:left-56 transform -translate-y-1/2 flex flex-col gap-4 z-10"
-        >
-          {[
-            "linear-gradient(to bottom, #C9CCD3, #FFFFFF)",
-            "linear-gradient(to bottom, #788662, #C9CCD3)",
-            "linear-gradient(to bottom, #1A1A1A, #3A3A3A)",
-            "linear-gradient(to bottom, #E1ECF4, #FFFFFF)",
-          ].map((bg, index) => (
-            <motion.button
-              key={index}
-              whileHover={{ scale: 1.1 }}
-              whileTap={{ scale: 0.95 }}
-              className="w-6 h-6 rounded-full border border-white shadow-md hover:cursor-pointer"
-              style={{ background: bg }}
-            />
-          ))}
-        </motion.div>
-      </motion.div>
-    </>
-  );
-}
diff --git a/components/landing-page/header-sales.tsx b/components/landing-page/header-sales.tsx
new file mode 100644
index 0000000..e1ed68d
--- /dev/null
+++ b/components/landing-page/header-sales.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import Image from "next/image";
+import { Button } from "../ui/button";
+import { motion } from "framer-motion";
+
+export default function HeaderSalesServices() {
+  return (
+    <>
+      <section className="py-10 px-4 sm:px-6 md:px-10 bg-white">
+        <motion.div
+          initial={{ opacity: 0, y: 50 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+          className="flex flex-col items-center gap-6"
+        >
+          <h2 className="text-4xl font-bold mb-1">Layanan Konsumen Sales</h2>
+          <div className="relative w-full max-w-[1400px] mx-auto h-[300px] sm:h-[400px] md:h-[640px] overflow-hidden">
+            <Image
+              src="/layanan-sales.png"
+              alt="about-header"
+              fill
+              className="object-cover"
+              sizes="(max-width: 768px) 100vw, 640px"
+              priority
+            />
+          </div>
+        </motion.div>
+        <motion.div
+          initial={{ opacity: 0, y: 50 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+          className="flex flex-col items-center gap-6 mt-20"
+        >
+          <div className="w-full max-w-[1400px] mx-auto grid grid-cols-1 lg:grid-cols-[3fr_1fr] gap-6">
+            <div className="relative h-[300px] sm:h-[400px] md:h-[600px] w-full overflow-hidden ">
+              <Image
+                src="/further-news.png"
+                alt="Banner After Sales"
+                fill
+                className="rounded-md object-cover"
+                priority
+              />
+            </div>
+
+            <div className="flex flex-col items-center lg:items-start justify-center text-center lg:text-left gap-4 px-4 py-6">
+              <Image
+                src="/jhony.png"
+                alt="Johny"
+                width={150}
+                height={150}
+                className="rounded-md object-cover"
+              />
+              <div>
+                <h3 className="text-xl font-semibold">Taufik</h3>
+                <p className="text-sm text-gray-600 mt-1">
+                  Silahkan Hubungi Taufik untuk Layanan Konsumen After Sales
+                  Jaecoo Kelapa Gading
+                </p>
+              </div>
+              <Button
+                asChild
+                className="bg-transparent hover:bg-green-600  mt-4 w-full border border-[#BCD4DF] text-[#1F6779]"
+                size={"lg"}
+              >
+                <a
+                  href="https://wa.me/62XXXXXXXXXX"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Whatsapp →
+                </a>
+              </Button>
+            </div>
+          </div>
+        </motion.div>
+      </section>
+    </>
+  );
+}
diff --git a/components/landing-page/header.tsx b/components/landing-page/header.tsx
index 4881c49..82c3f89 100644
--- a/components/landing-page/header.tsx
+++ b/components/landing-page/header.tsx
@@ -11,17 +11,44 @@ import {
 import { Button } from "@/components/ui/button";
 import { motion } from "framer-motion";
 import Link from "next/link";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../ui/dialog";
+import { Input } from "../ui/input";
+import { Textarea } from "../ui/textarea";
+import { useState } from "react";
+import Autoplay from "embla-carousel-autoplay"; // ✅ Import plugin autoplay
+import { useRef } from "react";
 
-const heroImages = ["/Hero.png", "/hero2.png", "/hero3.png"];
+const heroImages = [
+  "/Hero.png",
+  "/Carousell-01.png",
+  "/Carousell-02.png",
+  "/Carousell-03.png",
+  "/Carousell-04.png",
+  "/Carousell-05.png",
+];
 
 export default function Header() {
+  const [open, setOpen] = useState(false);
+
+  // ✅ Gunakan useRef untuk plugin autoplay
+  const plugin = useRef(Autoplay({ delay: 4000, stopOnInteraction: false }));
+
   return (
     <section className="relative w-full overflow-hidden bg-white">
-      <Carousel className="w-full relative">
+      <Carousel
+        className="w-full relative"
+        plugins={[plugin.current]} // ✅ Tambahkan plugin di sini
+      >
         <CarouselContent>
           {heroImages.map((img, index) => (
             <CarouselItem key={index}>
-              <div className="relative w-full h-[810px]">
+              <div className="relative w-full h-[400px] sm:h-[500px] md:h-[810px]">
                 <Image
                   src={img}
                   alt={`JAECOO Image ${index + 1}`}
@@ -31,12 +58,12 @@ export default function Header() {
                 />
 
                 {index === 0 && (
-                  <div className="absolute inset-0 flex flex-col justify-center items-start px-6 md:px-28 z-10">
+                  <div className="absolute inset-0 flex flex-col justify-center items-start px-4 sm:px-8 md:px-28 z-10">
                     <motion.h1
                       initial={{ opacity: 0, y: 40 }}
                       animate={{ opacity: 1, y: 0 }}
                       transition={{ duration: 0.8, ease: "easeOut" }}
-                      className="text-3xl sm:text-4xl md:text-5xl font-bold text-black mb-4"
+                      className="text-2xl sm:text-3xl md:text-5xl font-bold text-black mb-4"
                     >
                       JAECOO J7 AWD
                     </motion.h1>
@@ -49,36 +76,82 @@ export default function Header() {
                         ease: "easeOut",
                         delay: 0.2,
                       }}
-                      className="text-lg text-black mb-6"
+                      className="text-sm sm:text-base md:text-lg text-black mb-6"
                     >
                       DELICATE OFF-ROAD SUV
                     </motion.p>
 
                     <motion.div
-                      className="flex items-center gap-4"
+                      className="flex flex-col sm:flex-row items-start sm:items-center gap-3 sm:gap-4"
                       initial={{ opacity: 0, y: 40 }}
                       animate={{ opacity: 1, y: 0 }}
                       transition={{ duration: 1, ease: "easeOut", delay: 0.4 }}
                     >
-                      <Link href={"/about"}>
-                        <Button className="rounded-full bg-[#155B6E] px-6 py-2 text-white hover:cursor-pointer">
-                          TEST DRIVE
-                        </Button>
-                      </Link>
-                      <Link href={"/product"}>
-                        <Button
-                          variant="outline"
-                          className="rounded-full border-black text-black px-6 py-2 hover:cursor-pointer hover:bg-amber-50"
-                        >
-                          JELAJAHI
-                        </Button>
-                      </Link>
+                      <motion.div
+                        className="flex items-center gap-4"
+                        initial={{ opacity: 0, y: 40 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{
+                          duration: 1,
+                          ease: "easeOut",
+                          delay: 0.4,
+                        }}
+                      >
+                        <Dialog open={open} onOpenChange={setOpen}>
+                          <DialogTrigger asChild>
+                            <Button className="bg-[#1F6779] text-white h-[30px] md:h-[40px] rounded-full hover:cursor-pointer">
+                              TEST DRIVE
+                            </Button>
+                          </DialogTrigger>
+                          <DialogContent className="sm:max-w-[1400px] h-[600px]">
+                            <div className="flex items-center gap-4">
+                              <Image
+                                src="/masjaecoonav.png"
+                                alt="MAS JAECOO Logo"
+                                width={300}
+                                height={30}
+                                className=" object-fill"
+                              />
+                            </div>
+                            <DialogHeader>
+                              <DialogTitle className="text-2xl text-center mb-4">
+                                FORM TEST DRIVE
+                              </DialogTitle>
+                            </DialogHeader>
+
+                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 px-10">
+                              <Input placeholder="Nama" />
+                              <Input placeholder="Email" />
+                              <Input placeholder="Mobile Number" />
+                              <Input placeholder="Location" />
+                            </div>
+
+                            <div className="mt-3 px-10">
+                              <Textarea placeholder="Full Message" rows={4} />
+                            </div>
+
+                            <div className="mt-6 text-left ml-10">
+                              <Button
+                                onClick={() => setOpen(false)}
+                                className="bg-[#1F6779] text-white rounded-full"
+                              >
+                                SEND INQUIRY
+                              </Button>
+                            </div>
+                          </DialogContent>
+                        </Dialog>
+                        <Link href={"/product"}>
+                          <Button
+                            variant="outline"
+                            className="rounded-full border-black text-black px-6 py-2 hover:cursor-pointer hover:bg-amber-50"
+                          >
+                            EXPLORE
+                          </Button>
+                        </Link>
+                      </motion.div>
                     </motion.div>
                   </div>
                 )}
-
-                <CarouselPrevious className="absolute left-6 top-1/2 -translate-y-1/2 z-20 border border-[#155B6E] text-[#155B6E] bg-white" />
-                <CarouselNext className="absolute right-6 top-1/2 -translate-y-1/2 z-20 border border-[#155B6E] text-[#155B6E] bg-white" />
               </div>
             </CarouselItem>
           ))}
diff --git a/components/landing-page/interior-j8-awd.tsx b/components/landing-page/interior-j8-awd.tsx
new file mode 100644
index 0000000..b46599e
--- /dev/null
+++ b/components/landing-page/interior-j8-awd.tsx
@@ -0,0 +1,86 @@
+"use client";
+import Image from "next/image";
+import { motion } from "framer-motion";
+import { useInView } from "react-intersection-observer";
+
+const featuresJ8Awd = [
+  {
+    title: "Crystal Drive Mode Selector",
+    description:
+      "The stunning Crystal Drive Mode Selector offers seven distinct drive modes: City, Snow, Sand, Mud, Normal, ECO, and Sport. Its elegant design elevates cabin aesthetics while providing intuitive fingertip access to tailor the driving experience — from smooth city commutes to off-road adventures.",
+    image: "/in-j8awd2.png",
+  },
+  {
+    title: "Headrest Speaker",
+    description:
+      "Embedded within the premium 14-speaker Sony sound system, the headrest speakers deliver immersive, high-fidelity audio directly to occupants. Designed to enhance entertainment quality and ensure privacy during calls, this feature offers clear sound without disturbing others, blending innovation with comfort.",
+    image: "/in-j8awd3.png",
+  },
+  {
+    title: "Zero Gravity Seat",
+    description:
+      "Experience true zero-gravity relaxation with an adjustable 123° seat angle, an exclusive sleep headrest, and adjustable earpieces for an optimal fit. Double-layer noise-canceling acoustic glass effectively blocks out external noise, creating a peaceful retreat from the busy world.",
+    image: "/in-j8awd4.png",
+  },
+];
+
+export default function InteriorJ8Awd() {
+  const { ref, inView } = useInView({ triggerOnce: true, threshold: 0.2 });
+
+  return (
+    <section className="py-10 px-4 sm:px-6 md:px-20 bg-white" ref={ref}>
+      <motion.h2
+        className="text-2xl mt-5 mb-8"
+        initial={{ opacity: 0, y: 30 }}
+        animate={inView ? { opacity: 1, y: 0 } : {}}
+        transition={{ duration: 0.6 }}
+      >
+        <span className="text-[#1F6779] font-semibold">Jaecoo 8 AWD</span>{" "}
+        Interior
+      </motion.h2>
+
+      <motion.div
+        className="relative w-full h-[300px] sm:h-[400px] md:h-[600px]"
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={inView ? { opacity: 1, scale: 1 } : {}}
+        transition={{ duration: 0.7 }}
+      >
+        <Image
+          src="/in-j8awd1.png"
+          alt="Interior Hero"
+          fill
+          className="object-cover"
+          sizes="100vw"
+        />
+      </motion.div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2 sm:gap-4 mt-5">
+        {featuresJ8Awd.map((item, index) => (
+          <motion.div
+            key={index}
+            className="relative aspect-[3/2] overflow-hidden group"
+            initial={{ opacity: 0, y: 20 }}
+            animate={inView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.4, delay: index * 0.1 }}
+          >
+            <Image
+              src={item.image}
+              alt={item.title}
+              fill
+              className="object-cover group-hover:scale-105 transition-transform duration-300"
+              sizes="(max-width: 768px) 100vw, 25vw"
+            />
+            <div className="absolute bottom-0 bg-gradient-to-t from-black/80 to-transparent p-4">
+              <h3 className="text-sm sm:text-base font-bold text-white">
+                {item.title}
+              </h3>
+              <p className="text-xs sm:text-sm text-gray-300 mt-1">
+                {item.description}
+              </p>
+            </div>
+          </motion.div>
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/components/landing-page/interior-shs.tsx b/components/landing-page/interior-shs.tsx
new file mode 100644
index 0000000..3866714
--- /dev/null
+++ b/components/landing-page/interior-shs.tsx
@@ -0,0 +1,146 @@
+"use client";
+import Image from "next/image";
+import { motion } from "framer-motion";
+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: "Horizontal Side by Side Cup Holder",
+    description:
+      "Keep your beverages secure and within reach with the stylish Horizontal Side-by-Side Cup Holder.",
+    image: "/in-shs3.png",
+  },
+  {
+    title: "EV/ HEV Button",
+    description:
+      "Effortlessly switch between power modes with the EV/HEV Button, designed for optimal driving efficiency.",
+    image: "/in-shs4.png",
+  },
+  {
+    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",
+  },
+];
+
+const interior = [
+  {
+    title: "Dual Door Armrest",
+    description:
+      "A seamless blend of style and performance with the Avantgrade Fighter-Inspired Transmission Shifter.",
+    image: "/in-shs6.png",
+  },
+  {
+    title: "Ventilated Leather Seats",
+    description:
+      "Stay cool and comfortable with Ventilated Leather Seats, designed for luxury and relaxation.",
+    image: "/in-shs7.png",
+  },
+  {
+    title: "Sony 8-Speaker Audio system",
+    description:
+      "Immerse yourself in rich, high-quality sound with the Sony 8-speaker audio system, delivering an exceptional listening experience on every journey.",
+    image: "/in-shs8.png",
+  },
+  {
+    title: "Minimalist Door Latch Design",
+    description:
+      "Redefine sophistication with the Minimalist Door Latch Design, offering a seamless blend of style and utility.",
+    image: "/in-shs9.png",
+  },
+];
+export default function InteriorShs() {
+  const { ref, inView } = useInView({ triggerOnce: true, threshold: 0.2 });
+
+  return (
+    <section className="py-10 px-4 sm:px-6 md:px-20 bg-white" ref={ref}>
+      <motion.h2
+        className="text-2xl mt-5 mb-8"
+        initial={{ opacity: 0, y: 30 }}
+        animate={inView ? { opacity: 1, y: 0 } : {}}
+        transition={{ duration: 0.6 }}
+      >
+        <span className="text-[#1F6779] font-semibold">Jaecoo 7 SHS</span>{" "}
+        Interior
+      </motion.h2>
+
+      <motion.div
+        className="relative w-full h-[300px] sm:h-[400px] md:h-[600px]"
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={inView ? { opacity: 1, scale: 1 } : {}}
+        transition={{ duration: 0.7 }}
+      >
+        <Image
+          src="/in-shs.png"
+          alt="Interior Hero"
+          fill
+          className="object-cover"
+          sizes="100vw"
+        />
+      </motion.div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-2 sm:gap-4 mt-5">
+        {featuresInt.map((item, index) => (
+          <motion.div
+            key={index}
+            className="relative aspect-[4/3] overflow-hidden group"
+            initial={{ opacity: 0, y: 20 }}
+            animate={inView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.4, delay: index * 0.1 }}
+          >
+            <Image
+              src={item.image}
+              alt={item.title}
+              fill
+              className="object-cover group-hover:scale-105 transition-transform duration-300"
+              sizes="(max-width: 768px) 100vw, 25vw"
+            />
+            <div className="absolute bottom-0 bg-gradient-to-t from-black/80 to-transparent p-4">
+              <h3 className="text-sm sm:text-base font-bold text-white">
+                {item.title}
+              </h3>
+              <p className="text-xs sm:text-sm text-gray-300 mt-1">
+                {item.description}
+              </p>
+            </div>
+          </motion.div>
+        ))}
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-2 sm:gap-4 mt-5">
+        {interior.map((item, index) => (
+          <motion.div
+            key={index}
+            className="relative aspect-[4/3] overflow-hidden group"
+            initial={{ opacity: 0, y: 20 }}
+            animate={inView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.4, delay: index * 0.1 }}
+          >
+            <Image
+              src={item.image}
+              alt={item.title}
+              fill
+              className="object-cover group-hover:scale-105 transition-transform duration-300"
+              sizes="(max-width: 768px) 100vw, 25vw"
+            />
+            <div className="absolute bottom-0 bg-gradient-to-t from-black/80 to-transparent p-4">
+              <h3 className="text-sm sm:text-base font-bold text-white">
+                {item.title}
+              </h3>
+              <p className="text-xs sm:text-sm text-gray-300 mt-1">
+                {item.description}
+              </p>
+            </div>
+          </motion.div>
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/components/landing-page/items.tsx b/components/landing-page/items.tsx
index 6b63cc7..5b7ca9c 100644
--- a/components/landing-page/items.tsx
+++ b/components/landing-page/items.tsx
@@ -4,26 +4,40 @@ import Image from "next/image";
 import { Button } from "@/components/ui/button";
 import { motion } from "framer-motion";
 import Link from "next/link";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../ui/dialog";
+import { Input } from "../ui/input";
+import { Textarea } from "../ui/textarea";
+import { useState } from "react";
 
 const items = [
   {
     image: "/new-car2.png",
     title: "JAECOO J7 AWD",
     description: "DELICATE OFF-ROAD SUV",
+    link: "/product/j7-awd",
   },
   {
     image: "/new-car1.png",
     title: "JAECOO J7 SHS",
     description: "SUPER HYBRID SYSTEM = SUPER HEV + EV",
+    link: "/product/j7-shs",
   },
   {
     image: "/new-car3.png",
     title: "JAECOO J8 AWD",
     description: "FIRST CLASS OFF-ROAD",
+    link: "/product/j8-awd",
   },
 ];
 
 export default function Items() {
+  const [open, setOpen] = useState(false);
   return (
     <section className="py-10 px-4 sm:px-6 md:px-10 bg-white">
       <div className="flex flex-col items-center gap-10">
@@ -73,12 +87,51 @@ export default function Items() {
                   animate={{ opacity: 1, y: 0 }}
                   transition={{ delay: index * 0.25 + 0.6, duration: 0.6 }}
                 >
-                  <Link href="/about">
-                    <Button className="rounded-full bg-[#155B6E] px-6 py-2 text-white hover:cursor-pointer">
-                      TEST DRIVE
-                    </Button>
-                  </Link>
-                  <Link href="/product">
+                  <Dialog open={open} onOpenChange={setOpen}>
+                    <DialogTrigger asChild>
+                      <Button className="bg-[#1F6779] text-white h-[30px] md:h-[40px] rounded-full hover:cursor-pointer">
+                        TEST DRIVE
+                      </Button>
+                    </DialogTrigger>
+                    <DialogContent className="sm:max-w-[1400px] h-[600px]">
+                      <div className="flex items-center gap-4">
+                        <Image
+                          src="/masjaecoonav.png"
+                          alt="MAS JAECOO Logo"
+                          width={300}
+                          height={30}
+                          className=" object-fill"
+                        />
+                      </div>
+                      <DialogHeader>
+                        <DialogTitle className="text-2xl text-center mb-4">
+                          FORM TEST DRIVE
+                        </DialogTitle>
+                      </DialogHeader>
+
+                      {/* Form */}
+                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 px-10">
+                        <Input placeholder="Nama" />
+                        <Input placeholder="Email" />
+                        <Input placeholder="Mobile Number" />
+                        <Input placeholder="Location" />
+                      </div>
+
+                      <div className="mt-3 px-10">
+                        <Textarea placeholder="Full Message" rows={4} />
+                      </div>
+
+                      <div className="mt-6 text-left ml-10">
+                        <Button
+                          onClick={() => setOpen(false)}
+                          className="bg-[#1F6779] text-white rounded-full"
+                        >
+                          SEND INQUIRY
+                        </Button>
+                      </div>
+                    </DialogContent>
+                  </Dialog>
+                  <Link href={item?.link}>
                     <Button
                       variant="outline"
                       className="rounded-full border-white text-black px-6 py-2 hover:text-black hover:bg-amber-50 hover:border-white hover:cursor-pointer"
diff --git a/components/landing-page/navbar.tsx b/components/landing-page/navbar.tsx
index 2cc6f96..1cb1eed 100644
--- a/components/landing-page/navbar.tsx
+++ b/components/landing-page/navbar.tsx
@@ -6,12 +6,33 @@ import { ChevronDown, Lock, Menu, X } from "lucide-react";
 import { useEffect, useState } from "react";
 import { usePathname } from "next/navigation";
 import { AnimatePresence, motion } from "framer-motion";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../ui/dialog";
+import { Input } from "../ui/input";
+import { Textarea } from "../ui/textarea";
 
 export default function Navbar() {
   const pathname = usePathname();
+  const [open, setOpen] = useState(false);
   const [showProdukMenu, setShowProdukMenu] = useState(false);
+  const [showPriceMenu, setShowPriceMenu] = useState(false);
+  const [showServiceMenu, setShowServiceMenu] = useState(false);
+  const [showAboutMenu, setShowAboutMenu] = useState(false);
+  const [showConsumerMenu, setShowConsumerMenu] = useState(false);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
+  const [showProdukMenuMobile, setShowProdukMenuMobile] = useState(false); // fix here
+  const [openMobile, setOpenMobile] = useState(false);
+  const [showPriceMenuMobile, setShowPriceMenuMobile] = useState(false);
+  const [showServiceMenuMobile, setShowServiceMenuMobile] = useState(false);
+  const [showAboutMenuMobile, setShowAboutMenuMobile] = useState(false);
+  const [showConsumerMenuMobile, setShowConsumerMenuMobile] = useState(false);
+
   const isActive = (path: string) =>
     pathname === path || pathname.startsWith(path + "/");
 
@@ -28,17 +49,64 @@ export default function Navbar() {
     {
       name: "JAECOO J7 AWD",
       img: "/j7awd.png",
-      link: "/produk/jaecoo7",
+      link: "/product/j7-awd",
     },
     {
       name: "JAECOO J7 SHS",
       img: "/j7shs.png",
-      link: "/produk/jaecoo7",
+      link: "/product/j7-shs",
     },
     {
       name: "JAECOO J8 AWD",
       img: "/j8awd.png",
-      link: "/produk/jaecoo8",
+      link: "/product/j8-awd",
+    },
+  ];
+  const priceList = [
+    {
+      name: "INFORMASI HARGA",
+      link: "/price/price-information",
+    },
+    {
+      name: "PROMO",
+      link: "/price/promo",
+    },
+  ];
+
+  const serviceList = [
+    {
+      name: "PROGRAM SERVICE",
+      link: "/service/program-service",
+    },
+    {
+      name: "AFTER SALES",
+      link: "/service/after-sales",
+    },
+  ];
+
+  const aboutList = [
+    {
+      name: "PROFILE",
+      link: "/about/profile",
+    },
+    {
+      name: "SOCIAL MEDIA",
+      link: "/about/sosmed",
+    },
+    {
+      name: "GALERY",
+      link: "/about/galery",
+    },
+  ];
+
+  const consumerList = [
+    {
+      name: "AFTER SALES",
+      link: "/customer-service/after-sales",
+    },
+    {
+      name: "SALES",
+      link: "/customer-service/sales",
     },
   ];
 
@@ -72,11 +140,11 @@ export default function Navbar() {
           <Link href="/">
             <Button
               variant="ghost"
-              className={`hover:cursor-pointer rounded-full px-5 ${
+              className={`hover:cursor-pointer rounded-full font-bold px-5 ${
                 isActive("/") ? "bg-[#C2D8E2] text-[#1F3D4A]" : ""
               }`}
             >
-              BERANDA
+              HOMEPAGE
             </Button>
           </Link>
         </li>
@@ -94,7 +162,7 @@ export default function Navbar() {
                 : ""
             }`}
           >
-            PRODUK <ChevronDown className="w-4 h-4" />
+            PRODUCTS <ChevronDown className="w-4 h-4" />
           </Button>
 
           <AnimatePresence>
@@ -127,20 +195,56 @@ export default function Navbar() {
                       />
                       <p className="font-bold mt-4 text-center">{car.name}</p>
                       <div className="flex flex-col sm:flex-row gap-2 mt-2 items-center">
-                        <Link href="/about" className="w-[200px]">
-                          <Button
-                            variant="default"
-                            className="bg-[#0C5B71] text-white px-4 rounded-full w-full hover:cursor-pointer"
-                          >
-                            TEST DRIVE
-                          </Button>
-                        </Link>
-                        <Link href="/product" className="w-[200px]">
+                        <Dialog open={open} onOpenChange={setOpen}>
+                          <DialogTrigger asChild>
+                            <Button className="bg-[#1F6779] text-white h-[30px] md:w-[200px] md:h-[40px] rounded-full hover:cursor-pointer">
+                              TEST DRIVE
+                            </Button>
+                          </DialogTrigger>
+                          <DialogContent className="sm:max-w-[1400px] h-[600px]">
+                            <div className="flex items-center gap-4">
+                              <Image
+                                src="/masjaecoonav.png"
+                                alt="MAS JAECOO Logo"
+                                width={300}
+                                height={30}
+                                className=" object-fill"
+                              />
+                            </div>
+                            <DialogHeader>
+                              <DialogTitle className="text-4xl text-center mb-4 font-bold">
+                                FORM TEST DRIVE
+                              </DialogTitle>
+                            </DialogHeader>
+
+                            {/* Form */}
+                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 px-10">
+                              <Input placeholder="Nama" />
+                              <Input placeholder="Email" />
+                              <Input placeholder="Mobile Number" />
+                              <Input placeholder="Location" />
+                            </div>
+
+                            <div className="mt-3 px-10">
+                              <Textarea placeholder="Full Message" rows={4} />
+                            </div>
+
+                            <div className="mt-6 text-left ml-10">
+                              <Button
+                                onClick={() => setOpen(false)}
+                                className="bg-[#1F6779] text-white rounded-full"
+                              >
+                                SEND INQUIRY
+                              </Button>
+                            </div>
+                          </DialogContent>
+                        </Dialog>
+                        <Link href={car.link} className="w-[200px]">
                           <Button
                             variant="outline"
                             className="rounded-full px-4 w-full hover:cursor-pointer hover:bg-amber-50"
                           >
-                            JELAJAHI
+                            EXPLORE
                           </Button>
                         </Link>
                       </div>
@@ -151,31 +255,194 @@ export default function Navbar() {
             )}
           </AnimatePresence>
         </li>
+        <li className="relative">
+          <Button
+            variant="ghost"
+            onClick={(e) => {
+              e.stopPropagation();
+              setShowPriceMenu((prev) => !prev);
+            }}
+            className={`flex items-center gap-1 font-bold text-sm focus:outline-none hover:cursor-pointer rounded-full px-5 py-2 ${
+              isActive("/price") ? "bg-[#C2D8E2] text-[#1F3D4A]" : ""
+            }`}
+          >
+            HARGA <ChevronDown className="w-4 h-4" />
+          </Button>
 
-        <li>
-          <Link href="/service">
-            <Button
-              variant="ghost"
-              className={`hover:cursor-pointer rounded-full px-5 ${
-                isActive("/service") ? "bg-[#C2D8E2] text-[#1F3D4A]" : ""
-              }`}
-            >
-              SERVIS
-            </Button>
-          </Link>
+          <AnimatePresence>
+            {showPriceMenu && (
+              <motion.div
+                key="harga-dropdown"
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: 20 }}
+                transition={{ duration: 0.3 }}
+                className="absolute top-full mt-2 left-0 z-50 border-t-4 border-[#1F6779] bg-white shadow-xl py-4 w-[200px]"
+                onClick={(e) => e.stopPropagation()}
+              >
+                <div className="flex flex-col gap-2 px-4">
+                  {priceList.map((item, i) => (
+                    <motion.div
+                      key={i}
+                      initial={{ opacity: 0, y: 10 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      exit={{ opacity: 0, y: 10 }}
+                      transition={{ delay: 0.1 * i }}
+                    >
+                      <Link
+                        href={item.link}
+                        className="block w-full text-sm text-left px-3 py-2 rounded-md hover:bg-gray-100 hover:text-[#1F6779] font-medium"
+                      >
+                        {item.name}
+                      </Link>
+                    </motion.div>
+                  ))}
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </li>
+        <li className="relative">
+          <Button
+            variant="ghost"
+            onClick={(e) => {
+              e.stopPropagation();
+              setShowServiceMenu((prev) => !prev);
+            }}
+            className={`flex items-center gap-1 font-bold text-sm focus:outline-none hover:cursor-pointer rounded-full px-5 py-2 ${
+              isActive("/service") ? "bg-[#C2D8E2] text-[#1F3D4A]" : ""
+            }`}
+          >
+            SERVICES <ChevronDown className="w-4 h-4" />
+          </Button>
+
+          <AnimatePresence>
+            {showServiceMenu && (
+              <motion.div
+                key="harga-dropdown"
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: 20 }}
+                transition={{ duration: 0.3 }}
+                className="absolute top-full mt-2 left-0 z-50 border-t-4 border-[#1F6779] bg-white shadow-xl py-4 w-[200px]"
+                onClick={(e) => e.stopPropagation()}
+              >
+                <div className="flex flex-col gap-2 px-4">
+                  {serviceList.map((item, i) => (
+                    <motion.div
+                      key={i}
+                      initial={{ opacity: 0, y: 10 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      exit={{ opacity: 0, y: 10 }}
+                      transition={{ delay: 0.1 * i }}
+                    >
+                      <Link
+                        href={item.link}
+                        className="block w-full text-sm text-left px-3 py-2 rounded-md hover:bg-gray-100 hover:text-[#1F6779] font-medium"
+                      >
+                        {item.name}
+                      </Link>
+                    </motion.div>
+                  ))}
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
         </li>
 
-        <li>
-          <Link href="/about">
-            <Button
-              variant="ghost"
-              className={`hover:cursor-pointer rounded-full px-5 ${
-                isActive("/about") ? "bg-[#C2D8E2] text-[#1F3D4A]" : ""
-              }`}
-            >
-              TENTANG DEALER JAECOO
-            </Button>
-          </Link>
+        <li className="relative">
+          <Button
+            variant="ghost"
+            onClick={(e) => {
+              e.stopPropagation();
+              setShowAboutMenu((prev) => !prev);
+            }}
+            className={`flex items-center gap-1 font-bold text-sm focus:outline-none hover:cursor-pointer rounded-full px-5 py-2 ${
+              isActive("/about") ? "bg-[#C2D8E2] text-[#1F3D4A]" : ""
+            }`}
+          >
+            TENTANG DEALER <ChevronDown className="w-4 h-4" />
+          </Button>
+
+          <AnimatePresence>
+            {showAboutMenu && (
+              <motion.div
+                key="harga-dropdown"
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: 20 }}
+                transition={{ duration: 0.3 }}
+                className="absolute top-full mt-2 left-0 z-50 border-t-4 border-[#1F6779] bg-white shadow-xl py-4 w-[200px]"
+                onClick={(e) => e.stopPropagation()}
+              >
+                <div className="flex flex-col gap-2 px-4">
+                  {aboutList.map((item, i) => (
+                    <motion.div
+                      key={i}
+                      initial={{ opacity: 0, y: 10 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      exit={{ opacity: 0, y: 10 }}
+                      transition={{ delay: 0.1 * i }}
+                    >
+                      <Link
+                        href={item.link}
+                        className="block w-full text-sm text-left px-3 py-2 rounded-md hover:bg-gray-100 hover:text-[#1F6779] font-medium"
+                      >
+                        {item.name}
+                      </Link>
+                    </motion.div>
+                  ))}
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </li>
+        <li className="relative">
+          <Button
+            variant="ghost"
+            onClick={(e) => {
+              e.stopPropagation();
+              setShowConsumerMenu((prev) => !prev);
+            }}
+            className={`flex items-center gap-1 font-bold text-sm focus:outline-none hover:cursor-pointer rounded-full px-5 py-2 ${
+              isActive("/customer-service") ? "bg-[#C2D8E2] text-[#1F3D4A]" : ""
+            }`}
+          >
+            LAYANAN KONSUMEN <ChevronDown className="w-4 h-4" />
+          </Button>
+
+          <AnimatePresence>
+            {showConsumerMenu && (
+              <motion.div
+                key="harga-dropdown"
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: 20 }}
+                transition={{ duration: 0.3 }}
+                className="absolute top-full mt-2 left-0 z-50 border-t-4 border-[#1F6779] bg-white shadow-xl py-4 w-[200px]"
+                onClick={(e) => e.stopPropagation()}
+              >
+                <div className="flex flex-col gap-2 px-4">
+                  {consumerList.map((item, i) => (
+                    <motion.div
+                      key={i}
+                      initial={{ opacity: 0, y: 10 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      exit={{ opacity: 0, y: 10 }}
+                      transition={{ delay: 0.1 * i }}
+                    >
+                      <Link
+                        href={item.link}
+                        className="block w-full text-sm text-left px-3 py-2 rounded-md hover:bg-gray-100 hover:text-[#1F6779] font-medium"
+                      >
+                        {item.name}
+                      </Link>
+                    </motion.div>
+                  ))}
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
         </li>
       </ul>
 
@@ -189,7 +456,7 @@ export default function Navbar() {
       </div>
 
       {isMobileMenuOpen && (
-        <div className="absolute top-full left-0 right-0 bg-white px-6 py-4 shadow-md flex flex-col gap-4 text-sm font-medium sm:hidden z-40">
+        <div className="absolute top-full left-0 right-0 bg-white px-6 py-4 shadow-md flex flex-col gap-4 text-sm font-bold sm:hidden z-40">
           <Link href="/" onClick={() => setIsMobileMenuOpen(false)}>
             <Button
               variant="ghost"
@@ -197,41 +464,245 @@ export default function Navbar() {
                 isActive("/") ? "bg-[#C2D8E2] text-[#1F3D4A]" : ""
               }`}
             >
-              BERANDA
+              HOMEPAGE
             </Button>
           </Link>
-          <Link href="/product" onClick={() => setIsMobileMenuOpen(false)}>
+          <div className="block lg:hidden w-full">
             <Button
               variant="ghost"
-              className={`flex items-center gap-1 font-bold text-sm focus:outline-none rounded-full px-5 py-2 ${
+              onClick={() => setShowProdukMenuMobile((prev) => !prev)} // ← FIX
+              className={`w-full text-left flex items-center justify-start gap-1 font-bold text-sm focus:outline-none rounded-full px-5 py-2 ${
                 isActive("/product") || isActive("/produk")
                   ? "bg-[#C2D8E2] text-[#1F3D4A]"
                   : ""
               }`}
             >
-              PRODUK
+              PRODUCTS <ChevronDown className="w-4 h-4" />
             </Button>
-          </Link>
-          <Link href="/service" onClick={() => setIsMobileMenuOpen(false)}>
+
+            {showProdukMenuMobile && (
+              <div className="w-full mt-2 bg-white shadow px-4 py-4 rounded-xl">
+                <div className="flex flex-col gap-6">
+                  {produkList.map((car, i) => (
+                    <div
+                      key={i}
+                      className="flex flex-col items-center text-center"
+                    >
+                      <Image
+                        src={car.img}
+                        alt={car.name}
+                        width={250}
+                        height={150}
+                        className="object-contain"
+                      />
+                      <p className="font-bold mt-4">{car.name}</p>
+
+                      <div className="flex flex-col gap-2 mt-2 w-full items-center">
+                        <Dialog open={openMobile} onOpenChange={setOpenMobile}>
+                          <DialogTrigger asChild>
+                            <Button className="bg-[#1F6779] text-white h-[40px] w-full rounded-full hover:cursor-pointer">
+                              TEST DRIVE
+                            </Button>
+                          </DialogTrigger>
+                          <DialogContent className="sm:max-w-[1400px] h-[600px]">
+                            <div className="flex items-center gap-4">
+                              <Image
+                                src="/masjaecoonav.png"
+                                alt="MAS JAECOO Logo"
+                                width={300}
+                                height={30}
+                                className=" object-fill"
+                              />
+                            </div>
+                            <DialogHeader>
+                              <DialogTitle className="text-2xl text-center mb-4 font-bold">
+                                FORM TEST DRIVE
+                              </DialogTitle>
+                            </DialogHeader>
+
+                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 ">
+                              <Input placeholder="Nama" />
+                              <Input placeholder="Email" />
+                              <Input placeholder="Mobile Number" />
+                              <Input placeholder="Location" />
+                            </div>
+
+                            <div className="mt-3 ">
+                              <Textarea placeholder="Full Message" rows={4} />
+                            </div>
+
+                            <div className="mt-6 text-left">
+                              <Button
+                                onClick={() => setOpen(false)}
+                                className="bg-[#1F6779] text-white rounded-full"
+                              >
+                                SEND INQUIRY
+                              </Button>
+                            </div>
+                          </DialogContent>
+                        </Dialog>
+
+                        <Link href={car.link} className="w-full">
+                          <Button
+                            variant="outline"
+                            className="rounded-full px-4 w-full hover:cursor-pointer hover:bg-amber-50"
+                          >
+                            EXPLORE
+                          </Button>
+                        </Link>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+          <div className="block lg:hidden w-full">
             <Button
               variant="ghost"
-              className={`w-full justify-start ${
+              onClick={() => setShowPriceMenuMobile((prev) => !prev)}
+              className={`w-full text-left flex items-center justify-start gap-1 font-bold text-sm focus:outline-none rounded-full px-5 py-2 ${
+                isActive("/price") ? "bg-[#C2D8E2] text-[#1F3D4A]" : ""
+              }`}
+            >
+              HARGA <ChevronDown className="w-4 h-4" />
+            </Button>
+
+            {showPriceMenuMobile && (
+              <div className="w-full mt-2 bg-white shadow px-4 py-4 rounded-xl">
+                <div className="flex flex-col gap-4">
+                  {priceList.map((item, i) => (
+                    <Link
+                      key={i}
+                      href={item.link}
+                      onClick={() => {
+                        setIsMobileMenuOpen(false);
+                        setShowPriceMenuMobile(false);
+                      }}
+                      className="block w-full"
+                    >
+                      <Button
+                        variant="ghost"
+                        className="w-full justify-start text-left text-sm font-medium hover:bg-gray-100 hover:text-[#1F6779]"
+                      >
+                        {item.name}
+                      </Button>
+                    </Link>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+          <div className="block lg:hidden w-full">
+            <Button
+              variant="ghost"
+              onClick={() => setShowServiceMenuMobile((prev) => !prev)}
+              className={`w-full text-left flex items-center justify-start gap-1 font-bold text-sm focus:outline-none rounded-full px-5 py-2 ${
                 isActive("/service") ? "bg-[#C2D8E2] text-[#1F3D4A]" : ""
               }`}
             >
-              SERVIS
+              SERVICES <ChevronDown className="w-4 h-4" />
             </Button>
-          </Link>
-          <Link href="/about" onClick={() => setIsMobileMenuOpen(false)}>
+
+            {showServiceMenuMobile && (
+              <div className="w-full mt-2 bg-white shadow px-4 py-4 rounded-xl">
+                <div className="flex flex-col gap-4">
+                  {serviceList.map((item, i) => (
+                    <Link
+                      key={i}
+                      href={item.link}
+                      onClick={() => {
+                        setIsMobileMenuOpen(false);
+                        setShowServiceMenuMobile(false);
+                      }}
+                      className="block w-full"
+                    >
+                      <Button
+                        variant="ghost"
+                        className="w-full justify-start text-left text-sm font-medium hover:bg-gray-100 hover:text-[#1F6779]"
+                      >
+                        {item.name}
+                      </Button>
+                    </Link>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+          <div className="block lg:hidden w-full">
             <Button
               variant="ghost"
-              className={`w-full justify-start ${
+              onClick={() => setShowAboutMenuMobile((prev) => !prev)}
+              className={`w-full text-left flex items-center justify-start gap-1 font-bold text-sm focus:outline-none rounded-full px-5 py-2 ${
                 isActive("/about") ? "bg-[#C2D8E2] text-[#1F3D4A]" : ""
               }`}
             >
-              TENTANG DEALER JAECOO
+              TENTANG DEALER JAECOO <ChevronDown className="w-4 h-4" />
             </Button>
-          </Link>
+
+            {showAboutMenuMobile && (
+              <div className="w-full mt-2 bg-white shadow px-4 py-4 rounded-xl">
+                <div className="flex flex-col gap-4">
+                  {aboutList.map((item, i) => (
+                    <Link
+                      key={i}
+                      href={item.link}
+                      onClick={() => {
+                        setIsMobileMenuOpen(false);
+                        setShowAboutMenuMobile(false);
+                      }}
+                      className="block w-full"
+                    >
+                      <Button
+                        variant="ghost"
+                        className="w-full justify-start text-left text-sm font-medium hover:bg-gray-100 hover:text-[#1F6779]"
+                      >
+                        {item.name}
+                      </Button>
+                    </Link>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+          <div className="block lg:hidden w-full">
+            <Button
+              variant="ghost"
+              onClick={() => setShowConsumerMenuMobile((prev) => !prev)}
+              className={`w-full text-left flex items-center justify-start gap-1 font-bold text-sm focus:outline-none rounded-full px-5 py-2 ${
+                isActive("/customer-service")
+                  ? "bg-[#C2D8E2] text-[#1F3D4A]"
+                  : ""
+              }`}
+            >
+              LAYANAN KONSUMEN <ChevronDown className="w-4 h-4" />
+            </Button>
+
+            {showConsumerMenuMobile && (
+              <div className="w-full mt-2 bg-white shadow px-4 py-4 rounded-xl">
+                <div className="flex flex-col gap-4">
+                  {consumerList.map((item, i) => (
+                    <Link
+                      key={i}
+                      href={item.link}
+                      onClick={() => {
+                        setIsMobileMenuOpen(false);
+                        setShowConsumerMenuMobile(false);
+                      }}
+                      className="block w-full"
+                    >
+                      <Button
+                        variant="ghost"
+                        className="w-full justify-start text-left text-sm font-medium hover:bg-gray-100 hover:text-[#1F6779]"
+                      >
+                        {item.name}
+                      </Button>
+                    </Link>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
           <Link href="/auth" onClick={() => setIsMobileMenuOpen(false)}>
             <Button className="bg-[#1F6779] w-full justify-start">
               <Lock className="w-3 h-3 mr-1" />
diff --git a/components/landing-page/program-sales.tsx b/components/landing-page/program-sales.tsx
new file mode 100644
index 0000000..f5b016a
--- /dev/null
+++ b/components/landing-page/program-sales.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import Image from "next/image";
+import { motion } from "framer-motion";
+
+const teamMembers = [
+  {
+    name: "Arlene McCoy",
+    role: "Service Advisor",
+    image: "/arlene.png",
+  },
+  {
+    name: "Jacob Jones",
+    role: "Foreman / Kepala Mekanik",
+    image: "/jacob.png",
+  },
+  {
+    name: "Cameron Williamson",
+    role: "Technician",
+    image: "/cameron.png",
+  },
+  {
+    name: "Devon Lane",
+    role: "QC",
+    image: "/devon.png",
+  },
+  {
+    name: "Esther Howard",
+    role: "Service Manager",
+    image: "/howard.png",
+  },
+  {
+    name: "LIA KURNIA PUTRI",
+    role: "CRO",
+    image: "/lia.png",
+  },
+];
+
+const topMembers = teamMembers.slice(0, 5);
+const bottomMember = teamMembers[5];
+
+export default function HeaderProgramSales() {
+  return (
+    <>
+      <section className="py-10 px-4 sm:px-6 md:px-10 bg-white">
+        <motion.div
+          initial={{ opacity: 0, y: 50 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+          className="flex flex-col items-center gap-6"
+        >
+          <h2 className="text-4xl font-bold mb-1">Program Services</h2>
+
+          <div className="relative w-full max-w-[1400px] mx-auto h-[300px] sm:h-[400px] md:h-[640px] overflow-hidden">
+            <Image
+              src="/promo.png"
+              alt="about-header"
+              fill
+              className="object-cover"
+              sizes="(max-width: 768px) 100vw, 1400px"
+              priority
+            />
+          </div>
+
+          <div className="relative w-full max-w-[1400px] mx-auto h-[300px] sm:h-[400px] md:h-[640px] overflow-hidden mt-5">
+            <Image
+              src="/promo.png"
+              alt="about-header"
+              fill
+              className="object-cover"
+              sizes="(max-width: 768px) 100vw, 1400px"
+              priority
+            />
+          </div>
+
+          <div className="w-full max-w-[1200px] mt-12">
+            <h2 className="text-3xl font-bold text-center mb-8">Our Teams</h2>
+
+            <div className="grid grid-cols-1 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6 justify-center">
+              {topMembers.map((member, index) => (
+                <div
+                  key={index}
+                  className="bg-white rounded-lg shadow-sm p-6 text-center hover:shadow-md transition-shadow duration-300 h-[300px]"
+                >
+                  <div className=" w-40 h-40 mx-auto rounded-full overflow-hidden mb-8">
+                    <Image
+                      src={member.image}
+                      alt={member.name}
+                      width={96}
+                      height={96}
+                      className="object-cover w-full h-full"
+                    />
+                  </div>
+                  <h3 className="font-semibold text-md mb-3">{member.name}</h3>
+                  <p className="text-gray-500 text-sm">{member.role}</p>
+                </div>
+              ))}
+            </div>
+
+            <div className="md:flex w-full md:justify-center mt-8">
+              <div className="bg-white rounded-lg shadow-sm p-6 text-center hover:shadow-md transition-shadow duration-300 h-[300px]">
+                <div className="w-40 h-40  rounded-full overflow-hidden mb-8 mx-auto md:mx-2">
+                  <Image
+                    src={bottomMember.image}
+                    alt={bottomMember.name}
+                    width={96}
+                    height={96}
+                    className="object-cover w-full h-full"
+                  />
+                </div>
+                <h3 className="font-semibold text-md mb-3">
+                  {bottomMember.name}
+                </h3>
+                <p className="text-gray-500 text-sm">{bottomMember.role}</p>
+              </div>
+            </div>
+          </div>
+        </motion.div>
+      </section>
+    </>
+  );
+}
diff --git a/components/landing-page/promo.tsx b/components/landing-page/promo.tsx
new file mode 100644
index 0000000..6e28efc
--- /dev/null
+++ b/components/landing-page/promo.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import Image from "next/image";
+import { motion } from "framer-motion";
+
+export default function HeaderPromo() {
+  return (
+    <>
+      <section className="py-10 px-4 sm:px-6 md:px-10 bg-white">
+        <motion.div
+          initial={{ opacity: 0, y: 50 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+          className="flex flex-col items-center gap-6"
+        >
+          <div className="relative w-full max-w-[1400px] mx-auto h-[300px] sm:h-[400px] md:h-[640px] overflow-hidden">
+            <Image
+              src="/promo.png"
+              alt="about-header"
+              fill
+              className="object-cover"
+              sizes="(max-width: 768px) 100vw, 640px"
+              priority
+            />
+          </div>
+        </motion.div>
+      </section>
+    </>
+  );
+}
diff --git a/components/landing-page/retracting-sidedar.tsx b/components/landing-page/retracting-sidedar.tsx
index 313b351..5fb6d9b 100644
--- a/components/landing-page/retracting-sidedar.tsx
+++ b/components/landing-page/retracting-sidedar.tsx
@@ -135,7 +135,6 @@ export const RetractingSidebar = ({
         )}
       </AnimatePresence>
 
-      {/* Mobile Toggle Button */}
       <AnimatePresence>
         {!sidebarData && (
           <motion.button
@@ -154,7 +153,6 @@ export const RetractingSidebar = ({
         )}
       </AnimatePresence>
 
-      {/* MOBILE SIDEBAR */}
       <AnimatePresence>
         {sidebarData && (
           <motion.div
@@ -192,11 +190,8 @@ const SidebarContent = ({
   const { theme, toggleTheme } = useTheme();
   return (
     <div className="flex flex-col h-full">
-      {/* SCROLLABLE TOP SECTION */}
       <div className="flex-1 overflow-y-auto">
-        {/* HEADER SECTION */}
         <div className="flex flex-col space-y-6">
-          {/* Logo and Toggle */}
           <div className="flex items-center justify-between px-4 py-6">
             <Link href="/" className="flex items-center space-x-3">
               <div className="relative">
@@ -237,7 +232,6 @@ const SidebarContent = ({
             )}
           </div>
 
-          {/* Navigation Sections */}
           <div className="space-y-3 px-3 pb-6">
             {sidebarSections.map((section, sectionIndex) => (
               <motion.div
@@ -275,14 +269,7 @@ const SidebarContent = ({
         </div>
       </div>
 
-      {/* FIXED BOTTOM SECTION */}
       <div className="flex-shrink-0 space-y-1 border-t border-slate-200/60 dark:border-slate-700/60 bg-white/50 dark:bg-slate-800/50 backdrop-blur-sm">
-        {/* Divider */}
-        {/* <div className="px-3 pb-2">
-          <div className="h-px bg-gradient-to-r from-transparent via-slate-300 to-transparent"></div>
-        </div> */}
-
-        {/* Theme Toggle */}
         <div className="px-3 pt-1">
           <motion.button
             onClick={toggleTheme}
@@ -333,7 +320,6 @@ const SidebarContent = ({
           </motion.button>
         </div>
 
-        {/* Settings */}
         <div className="px-3">
           <Link href="/settings">
             <Option
@@ -347,7 +333,6 @@ const SidebarContent = ({
           </Link>
         </div>
 
-        {/* User Profile */}
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
@@ -425,7 +410,6 @@ const Sidebar = () => {
         width: open ? "120px" : "90px",
       }}
     >
-      {/* BAGIAN ATAS */}
       <div>
         {!open && (
           <div className="w-full flex justify-center items-center">
diff --git a/components/landing-page/social-media.tsx b/components/landing-page/social-media.tsx
new file mode 100644
index 0000000..3933599
--- /dev/null
+++ b/components/landing-page/social-media.tsx
@@ -0,0 +1,157 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import { ArrowRight } from "lucide-react";
+import Link from "next/link";
+
+const tabs = ["INSTAGRAM", "TIKTOK", "FACEBOOK", "YOUTUBE"];
+
+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"];
+
+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>
+
+      <div className="flex flex-wrap gap-4 items-center justify-center mb-8">
+        {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"
+            }`}
+          >
+            {tab}
+          </button>
+        ))}
+      </div>
+
+      {activeTab === "INSTAGRAM" && (
+        <>
+          <div className="flex flex-wrap justify-center items-center gap-4">
+            {instagramPosts.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={`Instagram post ${i + 1}`}
+                  fill
+                  className="w-full h-full object-cover"
+                />
+              </div>
+            ))}
+          </div>
+
+          <div className="flex justify-center mt-10">
+            <Link href={"https://www.instagram.com/jaecoo_kelapagading"}>
+              <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 === "TIKTOK" && (
+        <>
+          <div className="flex flex-wrap justify-center items-center gap-4">
+            {tiktokPosts.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={`Tiktok post ${i + 1}`}
+                  fill
+                  className="w-full h-full object-cover"
+                />
+              </div>
+            ))}
+          </div>
+
+          <div className="flex justify-center mt-10">
+            <Link href={"https://www.tiktok.com/@jaecoo_kelapagading"}>
+              <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} />
+              </button>
+            </Link>
+          </div>
+        </>
+      )}
+    </section>
+  );
+}
diff --git a/components/landing-page/video.tsx b/components/landing-page/video.tsx
index 20838f2..89777c1 100644
--- a/components/landing-page/video.tsx
+++ b/components/landing-page/video.tsx
@@ -1,8 +1,20 @@
 "use client";
 
+import Image from "next/image";
+
 export default function Video() {
   return (
     <section className="pt-10 bg-white">
+      <div className="relative mb-10 w-full h-[250px] sm:h-[500px] md:h-[700px]">
+        <Image
+          src={"/maintenance.png"}
+          alt="maintenance"
+          fill
+          className="object-cover"
+          priority
+        />
+      </div>
+
       <div className="relative w-full h-[500px] overflow-hidden">
         <iframe
           className="w-full h-full"
diff --git a/package-lock.json b/package-lock.json
index 174bbbb..7c4bd12 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,6 +31,7 @@
         "clsx": "^2.1.1",
         "date-fns": "^4.1.0",
         "dompurify": "^3.2.6",
+        "embla-carousel-autoplay": "^8.6.0",
         "embla-carousel-react": "^8.6.0",
         "framer-motion": "^12.23.0",
         "iconify": "^1.4.0",
@@ -3036,6 +3037,7 @@
       "version": "19.1.8",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.8.tgz",
       "integrity": "sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g==",
+      "dev": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -3044,7 +3046,7 @@
       "version": "19.1.6",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.6.tgz",
       "integrity": "sha512-4hOiT/dwO8Ko0gV1m/TJZYk3y0KBnY9vzDh7W+DH17b2HFSOGgdj33dhihPeuy3l0q23+4e+hoXHV6hCC4dCXw==",
-      "devOptional": true,
+      "dev": true,
       "peerDependencies": {
         "@types/react": "^19.0.0"
       }
@@ -3594,6 +3596,14 @@
       "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
       "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA=="
     },
+    "node_modules/embla-carousel-autoplay": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel-autoplay/-/embla-carousel-autoplay-8.6.0.tgz",
+      "integrity": "sha512-OBu5G3nwaSXkZCo1A6LTaFMZ8EpkYbwIaH+bPqdBnDGQ2fh4+NbzjXjs2SktoPNKCtflfVMc75njaDHOYXcrsA==",
+      "peerDependencies": {
+        "embla-carousel": "8.6.0"
+      }
+    },
     "node_modules/embla-carousel-react": {
       "version": "8.6.0",
       "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.6.0.tgz",
diff --git a/package.json b/package.json
index 4c6da72..62d7488 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "dompurify": "^3.2.6",
+    "embla-carousel-autoplay": "^8.6.0",
     "embla-carousel-react": "^8.6.0",
     "framer-motion": "^12.23.0",
     "iconify": "^1.4.0",
diff --git a/public/Carousell-01.png b/public/Carousell-01.png
new file mode 100644
index 0000000..bba8ceb
Binary files /dev/null and b/public/Carousell-01.png differ
diff --git a/public/Carousell-02.png b/public/Carousell-02.png
new file mode 100644
index 0000000..394a8ea
Binary files /dev/null and b/public/Carousell-02.png differ
diff --git a/public/Carousell-03.png b/public/Carousell-03.png
new file mode 100644
index 0000000..2f3603d
Binary files /dev/null and b/public/Carousell-03.png differ
diff --git a/public/Carousell-04.png b/public/Carousell-04.png
new file mode 100644
index 0000000..8e279d6
Binary files /dev/null and b/public/Carousell-04.png differ
diff --git a/public/Carousell-05.png b/public/Carousell-05.png
new file mode 100644
index 0000000..d507834
Binary files /dev/null and b/public/Carousell-05.png differ
diff --git a/public/about-i copy.png b/public/about-i copy.png
new file mode 100644
index 0000000..a1677c1
Binary files /dev/null and b/public/about-i copy.png differ
diff --git a/public/after-sales.png b/public/after-sales.png
new file mode 100644
index 0000000..bfcf46a
Binary files /dev/null and b/public/after-sales.png differ
diff --git a/public/after-sales2.png b/public/after-sales2.png
new file mode 100644
index 0000000..393ee6a
Binary files /dev/null and b/public/after-sales2.png differ
diff --git a/public/arlene.png b/public/arlene.png
new file mode 100644
index 0000000..fafc0d3
Binary files /dev/null and b/public/arlene.png differ
diff --git a/public/awd-8.png b/public/awd-8.png
new file mode 100644
index 0000000..732c442
Binary files /dev/null and b/public/awd-8.png differ
diff --git a/public/awd-fitur8.png b/public/awd-fitur8.png
new file mode 100644
index 0000000..fc3cfa5
Binary files /dev/null and b/public/awd-fitur8.png differ
diff --git a/public/banner-after-sales.png b/public/banner-after-sales.png
new file mode 100644
index 0000000..fb9a3ec
Binary files /dev/null and b/public/banner-after-sales.png differ
diff --git a/public/black-j7-awd.png b/public/black-j7-awd.png
new file mode 100644
index 0000000..4b74395
Binary files /dev/null and b/public/black-j7-awd.png differ
diff --git a/public/black.png b/public/black.png
new file mode 100644
index 0000000..f4f82e5
Binary files /dev/null and b/public/black.png differ
diff --git a/public/cameron.png b/public/cameron.png
new file mode 100644
index 0000000..bb194e9
Binary files /dev/null and b/public/cameron.png differ
diff --git a/public/dealer-2.png b/public/dealer-2.png
new file mode 100644
index 0000000..0632c43
Binary files /dev/null and b/public/dealer-2.png differ
diff --git a/public/devon.png b/public/devon.png
new file mode 100644
index 0000000..b6bbb85
Binary files /dev/null and b/public/devon.png differ
diff --git a/public/ex-j8-2.png b/public/ex-j8-2.png
new file mode 100644
index 0000000..393ee6a
Binary files /dev/null and b/public/ex-j8-2.png differ
diff --git a/public/ex-j8-3.png b/public/ex-j8-3.png
new file mode 100644
index 0000000..1e40eaa
Binary files /dev/null and b/public/ex-j8-3.png differ
diff --git a/public/ex-j8-4.png b/public/ex-j8-4.png
new file mode 100644
index 0000000..adfe4c6
Binary files /dev/null and b/public/ex-j8-4.png differ
diff --git a/public/ex-j8-5.png b/public/ex-j8-5.png
new file mode 100644
index 0000000..81403a6
Binary files /dev/null and b/public/ex-j8-5.png differ
diff --git a/public/ex-j8-6.png b/public/ex-j8-6.png
new file mode 100644
index 0000000..7aeea59
Binary files /dev/null and b/public/ex-j8-6.png differ
diff --git a/public/ex-j8-7.png b/public/ex-j8-7.png
new file mode 100644
index 0000000..b52c328
Binary files /dev/null and b/public/ex-j8-7.png differ
diff --git a/public/ex-j8-8.png b/public/ex-j8-8.png
new file mode 100644
index 0000000..2ea3a01
Binary files /dev/null and b/public/ex-j8-8.png differ
diff --git a/public/ex-j8.png b/public/ex-j8.png
new file mode 100644
index 0000000..97cc998
Binary files /dev/null and b/public/ex-j8.png differ
diff --git a/public/ex-shs.png b/public/ex-shs.png
new file mode 100644
index 0000000..64b26ac
Binary files /dev/null and b/public/ex-shs.png differ
diff --git a/public/ex-shs2.png b/public/ex-shs2.png
new file mode 100644
index 0000000..4c08092
Binary files /dev/null and b/public/ex-shs2.png differ
diff --git a/public/ex-shs3.png b/public/ex-shs3.png
new file mode 100644
index 0000000..790d7c6
Binary files /dev/null and b/public/ex-shs3.png differ
diff --git a/public/ex-shs4.png b/public/ex-shs4.png
new file mode 100644
index 0000000..3e65bac
Binary files /dev/null and b/public/ex-shs4.png differ
diff --git a/public/ex-shs5.png b/public/ex-shs5.png
new file mode 100644
index 0000000..d63ba5f
Binary files /dev/null and b/public/ex-shs5.png differ
diff --git a/public/ex-shs6.png b/public/ex-shs6.png
new file mode 100644
index 0000000..baa3484
Binary files /dev/null and b/public/ex-shs6.png differ
diff --git a/public/further-news.png b/public/further-news.png
new file mode 100644
index 0000000..16e0bf4
Binary files /dev/null and b/public/further-news.png differ
diff --git a/public/gl-2-news.png b/public/gl-2-news.png
new file mode 100644
index 0000000..1deae06
Binary files /dev/null and b/public/gl-2-news.png differ
diff --git a/public/gl1.png b/public/gl1.png
new file mode 100644
index 0000000..c8022c8
Binary files /dev/null and b/public/gl1.png differ
diff --git a/public/gl3.png b/public/gl3.png
new file mode 100644
index 0000000..7503225
Binary files /dev/null and b/public/gl3.png differ
diff --git a/public/gl4.png b/public/gl4.png
new file mode 100644
index 0000000..bb7cecb
Binary files /dev/null and b/public/gl4.png differ
diff --git a/public/gl5.png b/public/gl5.png
new file mode 100644
index 0000000..fcefa16
Binary files /dev/null and b/public/gl5.png differ
diff --git a/public/gl6.png b/public/gl6.png
new file mode 100644
index 0000000..63d757d
Binary files /dev/null and b/public/gl6.png differ
diff --git a/public/green-j7-awd.png b/public/green-j7-awd.png
new file mode 100644
index 0000000..1e6d0c3
Binary files /dev/null and b/public/green-j7-awd.png differ
diff --git a/public/green.png b/public/green.png
new file mode 100644
index 0000000..527e908
Binary files /dev/null and b/public/green.png differ
diff --git a/public/howard.png b/public/howard.png
new file mode 100644
index 0000000..b53e1cf
Binary files /dev/null and b/public/howard.png differ
diff --git a/public/ig-news1.png b/public/ig-news1.png
new file mode 100644
index 0000000..4da6206
Binary files /dev/null and b/public/ig-news1.png differ
diff --git a/public/ig-news2.png b/public/ig-news2.png
new file mode 100644
index 0000000..3b41dea
Binary files /dev/null and b/public/ig-news2.png differ
diff --git a/public/ig-news3.png b/public/ig-news3.png
new file mode 100644
index 0000000..e63318f
Binary files /dev/null and b/public/ig-news3.png differ
diff --git a/public/ig1.png b/public/ig1.png
new file mode 100644
index 0000000..aa84aa4
Binary files /dev/null and b/public/ig1.png differ
diff --git a/public/ig2.png b/public/ig2.png
new file mode 100644
index 0000000..0129f70
Binary files /dev/null and b/public/ig2.png differ
diff --git a/public/ig3.png b/public/ig3.png
new file mode 100644
index 0000000..dd746ee
Binary files /dev/null and b/public/ig3.png differ
diff --git a/public/in-j8awd1.png b/public/in-j8awd1.png
new file mode 100644
index 0000000..b8db3fa
Binary files /dev/null and b/public/in-j8awd1.png differ
diff --git a/public/in-j8awd2.png b/public/in-j8awd2.png
new file mode 100644
index 0000000..2801616
Binary files /dev/null and b/public/in-j8awd2.png differ
diff --git a/public/in-j8awd3.png b/public/in-j8awd3.png
new file mode 100644
index 0000000..2ad1729
Binary files /dev/null and b/public/in-j8awd3.png differ
diff --git a/public/in-j8awd4.png b/public/in-j8awd4.png
new file mode 100644
index 0000000..2cf92c0
Binary files /dev/null and b/public/in-j8awd4.png differ
diff --git a/public/in-shs.png b/public/in-shs.png
new file mode 100644
index 0000000..5c04523
Binary files /dev/null and b/public/in-shs.png differ
diff --git a/public/in-shs2.png b/public/in-shs2.png
new file mode 100644
index 0000000..5c83111
Binary files /dev/null and b/public/in-shs2.png differ
diff --git a/public/in-shs3.png b/public/in-shs3.png
new file mode 100644
index 0000000..8745393
Binary files /dev/null and b/public/in-shs3.png differ
diff --git a/public/in-shs4.png b/public/in-shs4.png
new file mode 100644
index 0000000..9b3d59e
Binary files /dev/null and b/public/in-shs4.png differ
diff --git a/public/in-shs5.png b/public/in-shs5.png
new file mode 100644
index 0000000..360ceab
Binary files /dev/null and b/public/in-shs5.png differ
diff --git a/public/in-shs6.png b/public/in-shs6.png
new file mode 100644
index 0000000..ef99922
Binary files /dev/null and b/public/in-shs6.png differ
diff --git a/public/in-shs7.png b/public/in-shs7.png
new file mode 100644
index 0000000..e179b29
Binary files /dev/null and b/public/in-shs7.png differ
diff --git a/public/in-shs8.png b/public/in-shs8.png
new file mode 100644
index 0000000..05e42eb
Binary files /dev/null and b/public/in-shs8.png differ
diff --git a/public/in-shs9.png b/public/in-shs9.png
new file mode 100644
index 0000000..a3c14ff
Binary files /dev/null and b/public/in-shs9.png differ
diff --git a/public/j7-awd-nobg.png b/public/j7-awd-nobg.png
new file mode 100644
index 0000000..622ac8d
Binary files /dev/null and b/public/j7-awd-nobg.png differ
diff --git a/public/j7-shs-nobg.png b/public/j7-shs-nobg.png
new file mode 100644
index 0000000..e2e6fc9
Binary files /dev/null and b/public/j7-shs-nobg.png differ
diff --git a/public/j7awd copy.png b/public/j7awd copy.png
new file mode 100644
index 0000000..b11dfd0
Binary files /dev/null and b/public/j7awd copy.png differ
diff --git a/public/j7shs copy.png b/public/j7shs copy.png
new file mode 100644
index 0000000..b5c99f4
Binary files /dev/null and b/public/j7shs copy.png differ
diff --git a/public/j8-awd-nobg.png b/public/j8-awd-nobg.png
new file mode 100644
index 0000000..b8117c2
Binary files /dev/null and b/public/j8-awd-nobg.png differ
diff --git a/public/j8awd copy.png b/public/j8awd copy.png
new file mode 100644
index 0000000..b61d6c9
Binary files /dev/null and b/public/j8awd copy.png differ
diff --git a/public/jacob.png b/public/jacob.png
new file mode 100644
index 0000000..a458a1d
Binary files /dev/null and b/public/jacob.png differ
diff --git a/public/jhony.png b/public/jhony.png
new file mode 100644
index 0000000..eaf85e8
Binary files /dev/null and b/public/jhony.png differ
diff --git a/public/jj7-black.png b/public/jj7-black.png
new file mode 100644
index 0000000..8206863
Binary files /dev/null and b/public/jj7-black.png differ
diff --git a/public/jj7-blue.png b/public/jj7-blue.png
new file mode 100644
index 0000000..4f603de
Binary files /dev/null and b/public/jj7-blue.png differ
diff --git a/public/jj7-cars.png b/public/jj7-cars.png
new file mode 100644
index 0000000..646f9c1
Binary files /dev/null and b/public/jj7-cars.png differ
diff --git a/public/jj7-silver.png b/public/jj7-silver.png
new file mode 100644
index 0000000..5f8d953
Binary files /dev/null and b/public/jj7-silver.png differ
diff --git a/public/jj7-white.png b/public/jj7-white.png
new file mode 100644
index 0000000..208b7e1
Binary files /dev/null and b/public/jj7-white.png differ
diff --git a/public/journey-2.png b/public/journey-2.png
new file mode 100644
index 0000000..dcb1edd
Binary files /dev/null and b/public/journey-2.png differ
diff --git a/public/layanan-sales.png b/public/layanan-sales.png
new file mode 100644
index 0000000..fde27f3
Binary files /dev/null and b/public/layanan-sales.png differ
diff --git a/public/lia.png b/public/lia.png
new file mode 100644
index 0000000..3be8f2b
Binary files /dev/null and b/public/lia.png differ
diff --git a/public/maintenance.png b/public/maintenance.png
new file mode 100644
index 0000000..d2d0358
Binary files /dev/null and b/public/maintenance.png differ
diff --git a/public/mas-group.png b/public/mas-group.png
new file mode 100644
index 0000000..82488fb
Binary files /dev/null and b/public/mas-group.png differ
diff --git a/public/price-header.png b/public/price-header.png
new file mode 100644
index 0000000..206fc61
Binary files /dev/null and b/public/price-header.png differ
diff --git a/public/promo.png b/public/promo.png
new file mode 100644
index 0000000..5c829da
Binary files /dev/null and b/public/promo.png differ
diff --git a/public/shs-header.png b/public/shs-header.png
new file mode 100644
index 0000000..269d80d
Binary files /dev/null and b/public/shs-header.png differ
diff --git a/public/silver.png b/public/silver.png
new file mode 100644
index 0000000..46e71c3
Binary files /dev/null and b/public/silver.png differ
diff --git a/public/tk-news1.png b/public/tk-news1.png
new file mode 100644
index 0000000..900de4f
Binary files /dev/null and b/public/tk-news1.png differ
diff --git a/public/tk-news2.png b/public/tk-news2.png
new file mode 100644
index 0000000..cfd0dc8
Binary files /dev/null and b/public/tk-news2.png differ
diff --git a/public/tk-news3.png b/public/tk-news3.png
new file mode 100644
index 0000000..d95cadd
Binary files /dev/null and b/public/tk-news3.png differ
diff --git a/public/white-j7-awd.png b/public/white-j7-awd.png
new file mode 100644
index 0000000..a1433d6
Binary files /dev/null and b/public/white-j7-awd.png differ
diff --git a/public/white.png b/public/white.png
new file mode 100644
index 0000000..7b25a2b
Binary files /dev/null and b/public/white.png differ