From 27e04f61f61722db877d8021ba83acb4fc3ab922 Mon Sep 17 00:00:00 2001
From: Anang Yusman <anangyusman23@gmail.com>
Date: Sun, 13 Jul 2025 19:27:37 +0800
Subject: [PATCH] update

---
 components/landing-page/agent.tsx             |   2 +-
 components/landing-page/best-agent.tsx        |   9 +-
 .../landing-page/header-product-j7-awd.tsx    |  24 +-
 .../landing-page/header-product-j7-shs.tsx    |  24 +-
 .../landing-page/header-product-j8-awd.tsx    |  30 +-
 components/landing-page/header.tsx            | 124 ++++----
 components/landing-page/navbar.tsx            | 284 ++++++++++++++----
 components/landing-page/video.tsx             |  10 +-
 8 files changed, 352 insertions(+), 155 deletions(-)

diff --git a/components/landing-page/agent.tsx b/components/landing-page/agent.tsx
index af5511b..84d0cc6 100644
--- a/components/landing-page/agent.tsx
+++ b/components/landing-page/agent.tsx
@@ -44,7 +44,7 @@ export default function Agent() {
         Temui anggota tim kami yang luar biasa
       </motion.p>
 
-      <div className=" flex flex-row items-center justify-center gap-2">
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 place-items-center">
         {agents.map((agent, index) => (
           <motion.div
             key={index}
diff --git a/components/landing-page/best-agent.tsx b/components/landing-page/best-agent.tsx
index 51cb301..c4b3e8a 100644
--- a/components/landing-page/best-agent.tsx
+++ b/components/landing-page/best-agent.tsx
@@ -23,17 +23,18 @@ const agents = [
 
 export default function BestAgent() {
   return (
-    <section className="py-16 px-6 md:px-12 bg-[#f9f9f9] text-center mt-0">
+    <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-3xl md:text-4xl font-semibold text-gray-900 mb-10"
+        className="text-2xl sm:text-3xl md:text-4xl font-semibold text-gray-900 mb-10"
       >
         Our Teams
       </motion.h2>
-      <div className=" flex flex-row items-center justify-center gap-2">
+
+      <div className="flex flex-col md:flex-row flex-wrap items-center justify-center gap-6">
         {agents.map((agent, index) => (
           <motion.div
             key={index}
@@ -45,7 +46,7 @@ export default function BestAgent() {
               ease: "easeOut",
             }}
             viewport={{ once: true, amount: 0.3 }}
-            className="bg-white shadow-md px-2 py-4 gap-4 flex flex-col items-center h-[300px] w-[224px]"
+            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
diff --git a/components/landing-page/header-product-j7-awd.tsx b/components/landing-page/header-product-j7-awd.tsx
index 1a85c5f..305c949 100644
--- a/components/landing-page/header-product-j7-awd.tsx
+++ b/components/landing-page/header-product-j7-awd.tsx
@@ -142,22 +142,24 @@ export default function HeaderProductJ7Awd() {
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         transition={{ delay: 0.5, duration: 0.8 }}
-        className="relative w-full h-[300px] sm:h-[400px] md:h-[740px] overflow-hidden"
+        className="relative w-full h-[200px] sm:h-[400px] md:h-[740px] overflow-hidden"
       >
-        <Image
-          src={images[selectedColorIndex]}
-          alt="about-header"
-          fill
-          className="object-cover"
-          sizes="(max-width: 768px) 100vw, 640px"
-          priority
-        />
+        <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-1/2 left-5 md:left-56 transform -translate-y-1/2 flex flex-col gap-4 z-10"
+          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
@@ -165,7 +167,7 @@ export default function HeaderProductJ7Awd() {
               onClick={() => setSelectedColorIndex(index)}
               whileHover={{ scale: 1.1 }}
               whileTap={{ scale: 0.95 }}
-              className={`w-6 h-6 rounded-full border-2 ${
+              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 }}
diff --git a/components/landing-page/header-product-j7-shs.tsx b/components/landing-page/header-product-j7-shs.tsx
index 6549fc0..2f10aa8 100644
--- a/components/landing-page/header-product-j7-shs.tsx
+++ b/components/landing-page/header-product-j7-shs.tsx
@@ -142,22 +142,24 @@ export default function HeaderProductJ7Shs() {
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         transition={{ delay: 0.5, duration: 0.8 }}
-        className="relative w-full h-[300px] sm:h-[400px] md:h-[740px] overflow-hidden"
+        className="relative w-full h-[200px] sm:h-[400px] md:h-[740px] overflow-hidden"
       >
-        <Image
-          src={images[selectedColorIndex]}
-          alt="about-header"
-          fill
-          className="object-cover"
-          sizes="(max-width: 768px) 100vw, 640px"
-          priority
-        />
+        <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-1/2 left-5 md:left-56 transform -translate-y-1/2 flex flex-col gap-4 z-10"
+          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
@@ -165,7 +167,7 @@ export default function HeaderProductJ7Shs() {
               onClick={() => setSelectedColorIndex(index)}
               whileHover={{ scale: 1.1 }}
               whileTap={{ scale: 0.95 }}
-              className={`w-6 h-6 rounded-full border-2 ${
+              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 }}
diff --git a/components/landing-page/header-product-j8-awd.tsx b/components/landing-page/header-product-j8-awd.tsx
index 7c83d06..18e9213 100644
--- a/components/landing-page/header-product-j8-awd.tsx
+++ b/components/landing-page/header-product-j8-awd.tsx
@@ -46,13 +46,13 @@ export default function HeaderProductJ8Awd() {
           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">
+          <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"
-              sizes="(max-width: 768px) 100vw, 640px"
+              className="object-cover object-center"
+              sizes="(max-width: 640px) 100vw, (max-width: 1024px) 100vw, 1400px"
               priority
             />
 
@@ -142,22 +142,24 @@ export default function HeaderProductJ8Awd() {
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         transition={{ delay: 0.5, duration: 0.8 }}
-        className="relative w-full h-[300px] sm:h-[400px] md:h-[740px] overflow-hidden"
+        className="relative w-full h-[200px] sm:h-[400px] md:h-[740px] overflow-hidden"
       >
-        <Image
-          src={images[selectedColorIndex]}
-          alt="about-header"
-          fill
-          className="object-cover"
-          sizes="(max-width: 768px) 100vw, 640px"
-          priority
-        />
+        <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-1/2 left-5 md:left-56 transform -translate-y-1/2 flex flex-col gap-4 z-10"
+          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
@@ -165,7 +167,7 @@ export default function HeaderProductJ8Awd() {
               onClick={() => setSelectedColorIndex(index)}
               whileHover={{ scale: 1.1 }}
               whileTap={{ scale: 0.95 }}
-              className={`w-6 h-6 rounded-full border-2 ${
+              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 }}
diff --git a/components/landing-page/header.tsx b/components/landing-page/header.tsx
index bb87406..d28358b 100644
--- a/components/landing-page/header.tsx
+++ b/components/landing-page/header.tsx
@@ -41,7 +41,7 @@ export default function Header() {
         <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}`}
@@ -51,12 +51,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>
@@ -69,74 +69,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 }}
                     >
-                      <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
+                      <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>
-                          </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>
+                          </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/navbar.tsx b/components/landing-page/navbar.tsx
index a8c280a..1cb1eed 100644
--- a/components/landing-page/navbar.tsx
+++ b/components/landing-page/navbar.tsx
@@ -26,6 +26,13 @@ export default function Navbar() {
   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 + "/");
 
@@ -449,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"
@@ -457,76 +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="/price/price-information"
-            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 ${
-                isActive("/price/information")
+              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]" : ""
+              }`}
+            >
+              SERVICES <ChevronDown className="w-4 h-4" />
+            </Button>
+
+            {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"
+              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 <ChevronDown className="w-4 h-4" />
+            </Button>
+
+            {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]"
                   : ""
               }`}
             >
-              HARGA
+              LAYANAN KONSUMEN <ChevronDown className="w-4 h-4" />
             </Button>
-          </Link>
-          <Link
-            href="/service/program-service"
-            onClick={() => setIsMobileMenuOpen(false)}
-          >
-            <Button
-              variant="ghost"
-              className={`w-full justify-start ${
-                isActive("/service/program-service")
-                  ? "bg-[#C2D8E2] text-[#1F3D4A]"
-                  : ""
-              }`}
-            >
-              SERVICES
-            </Button>
-          </Link>
-          <Link href="/about/galery" onClick={() => setIsMobileMenuOpen(false)}>
-            <Button
-              variant="ghost"
-              className={`w-full justify-start ${
-                isActive("/about/galery") ? "bg-[#C2D8E2] text-[#1F3D4A]" : ""
-              }`}
-            >
-              TENTANG DEALER JAECOO
-            </Button>
-          </Link>
-          <Link
-            href="/customer-service/after-sales"
-            onClick={() => setIsMobileMenuOpen(false)}
-          >
-            <Button
-              variant="ghost"
-              className={`w-full justify-start ${
-                isActive("/customer-service/after-sales")
-                  ? "bg-[#C2D8E2] text-[#1F3D4A]"
-                  : ""
-              }`}
-            >
-              LAYANAN KONSUMEN
-            </Button>
-          </Link>
+
+            {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/video.tsx b/components/landing-page/video.tsx
index a92e5a8..d167935 100644
--- a/components/landing-page/video.tsx
+++ b/components/landing-page/video.tsx
@@ -5,8 +5,14 @@ import Image from "next/image";
 export default function Video() {
   return (
     <section className="pt-10 bg-white">
-      <div className="relative mb-10 w-full h-[600px]">
-        <Image src={"/maintenance.png"} alt="maintenance" fill />
+      <div className="relative mb-10 w-full h-[250px] sm:h-[400px] md:h-[600px]">
+        <Image
+          src={"/maintenance.png"}
+          alt="maintenance"
+          fill
+          className="object-cover"
+          priority
+        />
       </div>
 
       <div className="relative w-full h-[500px] overflow-hidden">