fix zoom, ( tinggal nunggu tempalte solusi)

src/components/beranda/Banner.jsx

@@ -3,7 +3,7 @@ import {waIcon2,L1,L2,L3,L4,R1,R2,R3,R4,bgcBanner} from '../../assets/';
 function Banner() {
     return (
         <div
-            className="relative flex flex-col items-center justify-center mt-20 w-full h-auto md:h-[692px] bg-cover bg-center text-white text-center"
+            className=" relative flex flex-col items-center justify-center mt-20 w-full h-auto md:h-[692px] bg-cover bg-center text-white text-center"
             style={{
                 backgroundImage: ` linear-gradient(248.72deg, #5B59E0 50.11%, rgba(202, 43, 104, 0.4) 90%), url(${bgcBanner})`,
                 backgroundSize: 'cover',
@@ -23,38 +23,38 @@ function Banner() {
             {/* Teks dan tombol */}
             <div className="px-4 mx-auto text-center w-full mt-8 md:mt-0">
                 <div className="text-customWhite max-w-[90%] md:max-w-[45%] mx-auto">
-                    <h1 className="text-xl md:text-[32px] font-semibold text-center leading-10">
+                    <h1 className="text-xl md:text-[30px] font-semibold text-center leading-10">
                         Bersama Rekan AI, Wujudkan Masa Depan Bisnis yang Lebih Inovatif dan Kompetitif.
                     </h1>
                 </div>
-                <p className="mt-4 md:mt-14 max-w-[90%] md:max-w-[750px] mx-auto text-customWhite text-sm md:text-[20px] md:font-extralight md:leading-7">
+                <p className="mt-4 md:mt-14 max-w-[90%] md:max-w-[700px] mx-auto text-customWhite text-sm md:text-[18px] md:font-extralight md:leading-7">
                     Dari autentikasi dokumen hingga analisis data dan automasi HR, Rekan AI menawarkan produk-produk cerdas yang siap membantu bisnis Anda tumbuh dan bersaing di pasar yang dinamis.
                 </p>
                 <div className="flex flex-col md:flex-row gap-4 mt-4 md:mt-20 justify-center">
-                    <button className="flex items-center justify-center w-full md:w-[317px] h-[50px] md:h-[70px] rounded-2xl border-[1px] border-white text-white text-sm md:text-lg font-bold hover:bg-white hover:bg-opacity-10">
+                    <button className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[65px] rounded-2xl border-[1px] border-white text-white text-sm md:text-lg font-bold hover:bg-white hover:bg-opacity-10">
                         <img src={waIcon2} alt="WhatsApp Icon" className="mr-2 h-4 md:h-[30px] md:w-[30px] w-auto" />
                         Konsultasi Gratis
                     </button>
-                    <button className="flex items-center justify-center w-full md:w-[324px] h-[50px] md:h-[70px] rounded-2xl px-4 md:px-8 py-2 md:py-3 border-[1px] border-white bg-gradient-to-r from-[#dc0168] to-[#5b59e8] text-white text-sm md:text-lg font-bold hover:opacity-90">
+                    <button className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[65px] rounded-2xl px-4 md:px-8 py-2 md:py-3 border-[1px] border-white bg-gradient-to-r from-[#dc0168] to-[#5b59e8] text-white text-sm md:text-lg font-bold hover:opacity-90">
                         Coba Sekarang
                     </button>
                 </div>
             </div>
 
             {/* Gambar L1-L4 untuk desktop */}
-            <div className="absolute hidden md:grid top-[50%] left-0 transform -translate-y-1/2 grid-cols-2 gap-4 max-w-full ml-16">
+            <div className="absolute hidden md:grid top-[50%] -left-14 transform -translate-y-1/2 grid-cols-2 gap-4 max-w-full ml-16">
-                <img src={L1} alt="image 1" className="w-auto rounded-lg shadow-lg object-cover" />
+                <img src={L1} alt="image 1" className="w-[200px] rounded-lg shadow-lg object-cover" />
-                <img src={L2} alt="image 2" className="w-auto rounded-lg shadow-lg object-cover mt-20" />
+                <img src={L2} alt="image 2" className="w-[150px] rounded-lg shadow-lg object-cover mt-20" />
-                <img src={L3} alt="image 3" className="w-auto rounded-lg shadow-lg object-cover" />
+                <img src={L3} alt="image 3" className="w-[210px] rounded-lg shadow-lg object-cover" />
-                <img src={L4} alt="image 4" className="w-auto rounded-lg shadow-lg object-cover -mt-10" />
+                <img src={L4} alt="image 4" className="w-[150px] rounded-lg shadow-lg object-cover -mt-5" />
             </div>
 
             {/* Gambar R1-R4 untuk desktop */}
-            <div className="absolute hidden md:grid top-[50%] right-0 transform -translate-y-1/2 grid-cols-2 gap-4 max-w-full justify-end mr-16">
+            <div className="absolute hidden md:grid top-[50%] -right-16 transform -translate-y-1/2 grid-cols-2 gap-4 max-w-full justify-end mr-16">
-                <img src={R1} alt="image 1" className="w-auto rounded-lg shadow-lg object-cover mt-20 ml-9" />
+                <img src={R1} alt="image 1" className="w-[150px] rounded-lg shadow-lg object-cover mt-20 ml-9" />
-                <img src={R2} alt="image 2" className="w-auto rounded-lg shadow-lg object-cover -ml-7" />
+                <img src={R2} alt="image 2" className="w-[200px] rounded-lg shadow-lg object-cover -ml-7" />
-                <img src={R3} alt="image 3" className="w-auto rounded-lg shadow-lg object-cover ml-7" />
+                <img src={R3} alt="image 3" className="w-[180px] rounded-lg shadow-lg object-cover ml-7" />
-                <img src={R4} alt="image 4" className="w-auto rounded-lg shadow-lg object-cover" />
+                <img src={R4} alt="image 4" className="w-[206px] rounded-lg shadow-lg object-cover" />
             </div>
 
             {/* Gambar R1-R4 untuk mobile */}

src/components/beranda/Header.jsx

@@ -1,125 +1,292 @@
-import { useState } from "react";
+"use client"
-import { useNavigate } from "react-router-dom";
+
-import { Logo1, search, row, IconPersonal, IconCorporate, IconStartup } from "../../assets";
+import { useState } from "react"
+import { useNavigate } from "react-router-dom"
+import { Logo1, search, row, IconPersonal, IconCorporate, IconStartup } from "../../assets"
 
 const Header = () => {
-  const navigate = useNavigate();
+  const navigate = useNavigate()
-  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
-  const [isSolusiOpen, setIsSolusiOpen] = useState(false);
+  const [isSolusiOpen, setIsSolusiOpen] = useState(false)
-  const [isProdukOpen, setIsProdukOpen] = useState(false);
+  const [isProdukOpen, setIsProdukOpen] = useState(false)
 
   return (
     <header className="fixed top-0 left-0 w-full z-50 font-montserrat bg-white shadow-md">
-      <nav className="flex items-center justify-between px-5 sm:px-10 md:px-20 py-3 gap-4 flex-wrap relative bg-white shadow-md">
+      <nav className="container mx-auto flex items-center justify-between h-20 px-5 lg:px-8 transition-all duration-300">
         {/* Logo */}
-        <div className="flex items-center gap-2">
+        <div className="flex-shrink-0">
-          <img src={Logo1} alt="Logo" className="w-[203px] h-[36.05px]" />
+          <img src={Logo1 || "/placeholder.svg"} alt="Logo" className="w-[150px] h-auto" />
         </div>
 
-        {/* Tombol Hamburger (Mobile) */}
+        {/* Desktop Navigation */}
-        <div className="sm:hidden flex items-center">
+        <div className="hidden lg:flex items-center space-x-8">
-          <button onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)} className="text-[#212121]">
+          <button
-            <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            onClick={() => navigate("/")}
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
+            className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]"
-            </svg>
+          >
-          </button>
-        </div>
-
-        {/* Menu Navigasi */}
-        <ul className={`${isMobileMenuOpen ? "flex" : "hidden"} sm:flex flex-col sm:flex-row list-none gap-5 sm:gap-10 absolute sm:relative top-full left-0 sm:top-auto sm:left-auto w-full sm:w-auto bg-white sm:bg-transparent p-5 sm:p-0 shadow-md sm:shadow-none z-40`}>
-          <li>
-            <button onClick={() => navigate("/")} className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]">
             Beranda
           </button>
-          </li>
 
           {/* Produk Dropdown */}
-          <li className="relative">
+          <div className="relative">
-            <button onClick={() => setIsProdukOpen(!isProdukOpen)} className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center">
+            <button
+              onClick={() => setIsProdukOpen(!isProdukOpen)}
+              className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center"
+            >
               Produk
-              <img src={row} alt="arrow" className="ml-1" />
+              <svg
+                stroke="currentColor"
+                fill="currentColor"
+                strokeWidth="0"
+                viewBox="0 0 448 512"
+                className={`ml-1 text-sm text-[#112C6F] transition-transform duration-200 ${isProdukOpen ? "rotate-180" : "rotate-0"}`}
+                height="1em"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path>
+              </svg>
             </button>
+
             {isProdukOpen && (
-              <ul className="absolute left-0 top-full w-48 bg-white list-none py-2 shadow-lg z-50">
+              <ul className="absolute left-0 top-full mt-2 w-48 bg-white list-none py-2 shadow-lg rounded-md">
-                <li className="px-5 py-2 hover:text-[#5a55ff]"><a href="#produk1" className="text-[#212121]">Produk 1</a></li>
+                <li className="px-5 py-2 hover:text-[#5a55ff]">
-                <li className="px-5 py-2 hover:text-[#5a55ff]"><a href="#produk2" className="text-[#212121]">Produk 2</a></li>
+                  <a href="#produk1" className="text-[#212121]">
+                    Produk 1
+                  </a>
+                </li>
+                <li className="px-5 py-2 hover:text-[#5a55ff]">
+                  <a href="#produk2" className="text-[#212121]">
+                    Produk 2
+                  </a>
+                </li>
               </ul>
             )}
-          </li>
+          </div>
 
-          {/* Solusi Dropdown */}
+          {/* Solusi Dropdown - Desktop */}
-          <li className="relative group">
+          <div className="relative">
             <button
               onClick={() => setIsSolusiOpen(!isSolusiOpen)}
               className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center"
             >
-              Solusi
+              Produk
-              <img src={row} alt="arrow" className="ml-1" />
+              <svg
-            </button>
+                stroke="currentColor"
-            {isSolusiOpen && (
+                fill="currentColor"
-              <ul
+                strokeWidth="0"
-                className="absolute left-[-20px] md:left-[-550px] top-12 w-screen bg-customRed text-black list-none py-4 shadow-lg z-50 gap-10 px-10 flex md:flex-row flex-col justify-center items-center"
+                viewBox="0 0 448 512"
+                className={`ml-1 text-sm text-[#112C6F] transition-transform duration-200 ${isSolusiOpen ? "rotate-180" : "rotate-0"}`}
+                height="1em"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                <div className="flex md:flex-row flex-col justify-center items-center gap-3 md:gap-10 md:mr-96">
+                <path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path>
+              </svg>
+            </button>
+
+            {isSolusiOpen && (
+              <div className="absolute left-64 -translate-x-1/2 top-full md:top-11 mt-2 w-[5000px]">
+                <div className="bg-customRed rounded-xl p-8">
+                  <div className="flex justify-center gap-8">
                     {/* Personal */}
-                  <li onClick={() => navigate("/SolusiPersonal")} className="px-5 py-4 bg-white rounded-xl w-[282px] h-[94px] flex items-start gap-4 hover:bg-gray-100">
+                    <button
-                    <img src={IconPersonal} alt="" className="w-16 h-16" />
+                      onClick={() => navigate("/SolusiPersonal")}
-                    <div>
+                      className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
+                    >
+                      <img src={IconPersonal || "/placeholder.svg"} alt="" className="w-16 h-16" />
+                      <div className="text-left">
                         <h3 className="font-medium text-base">Personal</h3>
-                      <p className="text-xs text-customBlack">Solusi efisien <br /> kebutuhan personal</p>
+                        <p className="text-xs text-customBlack">
+                          Solusi efisien <br /> kebutuhan personal
+                        </p>
                       </div>
-                  </li>
+                    </button>
 
                     {/* Startup */}
-                  <li onClick={() => navigate("/SolusiStartup")} className="px-5 py-4 bg-white rounded-xl w-[282px] h-[94px] flex items-start gap-4 hover:bg-gray-100">
+                    <button
-                    <img src={IconStartup} alt="" className="w-16 h-16" />
+                      onClick={() => navigate("/SolusiStartup")}
-                    <div>
+                      className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
+                    >
+                      <img src={IconStartup || "/placeholder.svg"} alt="" className="w-16 h-16" />
+                      <div className="text-left">
                         <h3 className="font-medium text-base">Startup</h3>
-                      <p className="text-xs text-customBlack">Dukungan penuh <br /> untuk bisnis Startup</p>
+                        <p className="text-xs text-customBlack">
+                          Dukungan penuh <br /> untuk bisnis Startup
+                        </p>
                       </div>
-                  </li>
+                    </button>
 
-                  {/* Corporate Business */}
+                    {/* Corporate */}
-                  <li onClick={() => navigate("/SolusiPersonal")} className="px-5 py-4 bg-white rounded-xl w-[282px] h-[94px] flex items-start gap-4 hover:bg-gray-100">
+                    <button
-                    <img src={IconCorporate} alt="" className="w-16 h-16" />
+                      onClick={() => navigate("/SolusiCorporate")}
-                    <div>
+                      className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
+                    >
+                      <img src={IconCorporate || "/placeholder.svg"} alt="" className="w-16 h-16" />
+                      <div className="text-left">
                         <h3 className="font-medium text-base">Corporate Business</h3>
                         <p className="text-xs text-customBlack">Solusi strategis untuk bisnis skala besar</p>
                       </div>
-                  </li>
+                    </button>
+                  </div>
+                </div>
               </div>
-              </ul>
             )}
-          </li>
+          </div>
 
-
+          <button
-
+            onClick={() => navigate("/Contact")}
-          <li>
+            className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]"
-            <button onClick={() => navigate("/Contact")} className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]">
+          >
             Hubungi Kami
           </button>
-          </li>
-        </ul>
-
-        {/* Pencarian */}
-        <div className="relative flex items-center gap-2 w-full sm:w-auto order-2 sm:order-none md:ml-52">
-          <input type="text" placeholder="Pencarian..." className="w-full sm:w-[592px] h-12 px-4 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#5a55ff]" />
-          <button className="absolute right-4 sm:right-2 text-gray-500 hover:text-[#5a55ff]">
-            <img src={search} alt="search" className="w-5 h-5" />
-          </button>
         </div>
 
-        {/* Tombol Konsultasi */}
+        {/* Search Bar */}
-        <button className="bg-[#DC0168] h-[48px] md:w-[184px] md:h-[48px] text-white px-5 py-2 text-sm font-bold rounded-md hover:bg-[#e6006e] transition order-3 sm:order-none w-full sm:w-auto mt-3 sm:mt-0">
+        <div className="hidden lg:flex items-center flex-1 max-w-xl mx-8">
+          <div className="relative w-full">
+            <input
+              type="text"
+              placeholder="Pencarian..."
+              className="w-full h-12 px-4 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#5a55ff]"
+            />
+            <button className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500 hover:text-[#5a55ff]">
+              <img src={search || "/placeholder.svg"} alt="search" className="w-5 h-5" />
+            </button>
+          </div>
+        </div>
+
+        {/* Konsultasi Button */}
+        <button className="hidden lg:block bg-[#DC0168] px-6 py-3 text-white text-sm font-bold rounded-md hover:bg-[#e6006e] transition whitespace-nowrap">
           Konsultasi Gratis
         </button>
+
+        {/* Mobile Menu Button */}
+        <button onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)} className="lg:hidden text-[#212121]">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-6 w-6"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
+          </svg>
+        </button>
+
+        {/* Mobile Menu */}
+        {isMobileMenuOpen && (
+          <div className="lg:hidden absolute top-full left-0 w-full bg-white shadow-md">
+            <div className="flex flex-col">
+              <button
+                onClick={() => navigate("/")}
+                className="px-5 py-4 text-left text-[#212121] text-base hover:bg-gray-50"
+              >
+                Beranda
+              </button>
+
+              <div className="relative">
+                <button
+                  onClick={() => setIsProdukOpen(!isProdukOpen)}
+                  className="w-full px-5 py-4 text-left text-[#212121] text-base hover:bg-gray-50 flex items-center justify-between"
+                >
+                  Produk
+                  <img src={row || "/placeholder.svg"} alt="arrow" className="ml-1" />
+                </button>
+                {isProdukOpen && (
+                  <div className="bg-[#DC0168] px-5 py-4">
+                    <div className="space-y-3">
+                      <a href="#produk1" className="block p-4 bg-white rounded-lg">
+                        Produk 1
+                      </a>
+                      <a href="#produk2" className="block p-4 bg-white rounded-lg">
+                        Produk 2
+                      </a>
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              <div className="relative">
+                <button
+                  onClick={() => setIsSolusiOpen(!isSolusiOpen)}
+                  className="w-full px-5 py-4 text-left text-[#212121] text-base hover:bg-gray-50 flex items-center justify-between"
+                >
+                  Solusi
+                  <img src={row || "/placeholder.svg"} alt="arrow" className="ml-1" />
+                </button>
+                {isSolusiOpen && (
+                  <div className="bg-[#DC0168] px-5 py-4">
+                    <div className="space-y-3">
+                      <button
+                        onClick={() => navigate("/SolusiPersonal")}
+                        className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
+                      >
+                        <img src={IconPersonal || "/placeholder.svg"} alt="" className="w-12 h-12" />
+                        <div className="text-left">
+                          <h3 className="font-medium text-base">Personal</h3>
+                          <p className="text-xs text-customBlack">Solusi efisien kebutuhan personal</p>
+                        </div>
+                      </button>
+
+                      <button
+                        onClick={() => navigate("/SolusiStartup")}
+                        className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
+                      >
+                        <img src={IconStartup || "/placeholder.svg"} alt="" className="w-12 h-12" />
+                        <div className="text-left">
+                          <h3 className="font-medium text-base">Startup</h3>
+                          <p className="text-xs text-customBlack">Dukungan penuh untuk bisnis Startup</p>
+                        </div>
+                      </button>
+
+                      <button
+                        onClick={() => navigate("/SolusiCorporate")}
+                        className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
+                      >
+                        <img src={IconCorporate || "/placeholder.svg"} alt="" className="w-12 h-12" />
+                        <div className="text-left">
+                          <h3 className="font-medium text-base">Corporate Business</h3>
+                          <p className="text-xs text-customBlack">Solusi strategis untuk bisnis skala besar</p>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              <button
+                onClick={() => navigate("/Contact")}
+                className="px-5 py-4 text-left text-[#212121] text-base hover:bg-gray-50"
+              >
+                Hubungi Kami
+              </button>
+
+              <div className="p-5">
+                <div className="relative">
+                  <input
+                    type="text"
+                    placeholder="Pencarian..."
+                    className="w-full h-12 px-4 text-sm border border-gray-300 rounded-md"
+                  />
+                  <button className="absolute right-4 top-1/2 -translate-y-1/2">
+                    <img src={search || "/placeholder.svg"} alt="search" className="w-5 h-5" />
+                  </button>
+                </div>
+              </div>
+
+              <div className="p-5 pt-0">
+                <button className="w-full bg-[#DC0168] px-6 py-3 text-white text-sm font-bold rounded-md">
+                  Konsultasi Gratis
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
       </nav>
-
     </header>
+  )
+}
 
-  );
+export default Header
-};
-
-export default Header;
-
 

src/components/beranda/Hero.jsx

@@ -1,44 +1,49 @@
 import {homeLogo,waIcon,homeImg} from '../../assets';
 
 
+
 function Hero() {
     return (
-        <div className="container py-0 px-0" id="Home">
+      <div className="w-full overflow-hidden" id="Home">
-            <div className="
+        <div className="container mx-auto px-4 lg:px-6">
-                hero 
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center py-12 lg:py-16">
-                grid grid-cols-1 lg:grid-cols-2 gap-10 
-                mt-56 sm:mt-28 md:mt-32 xl:mt-36 2xl:mt-24
-                2xl:ml-28 xl:ml-24 items-center">
-                
             {/* Left Section */}
-                <div className="box text-left px-4 lg:px-0 md:-ml-6 md:-mt-20">
+            <div className="space-y-6 md:-mt-10 mt-10">
-                    <img className="mb-5 mx-auto lg:mx-0" src={homeLogo} alt="Home Logo" />
+              <img src={homeLogo} alt="Rekan AI Logo" className="h-12 w-auto" />
-                    <h1 className="text-customBlack text-[24px] lg:text-[32px] font-semibold py-4">
+              <h1 className="text-[24px] lg:text-[30px] font-semibold text-customBlack leading-tight">
                 Ciptakan Pengalaman Pelanggan yang Tak Terlupakan dengan Solusi AI dari Rekan AI.
               </h1>
-                    <p className="text-customBlack text-[16px] lg:text-[20px]">
+              <p className="text-[16px] lg:text-[18px] lg:max-w-[90%] text-customBlack">
-                        Rekan AI menghadirkan teknologi kecerdasan buatan untuk membantu bisnis Anda beradaptasi dan tumbuh di era digital. Dari automasi hingga analisis data, kami membawa solusi cerdas yang mudah diimplementasikan.
+                Rekan AI menghadirkan teknologi kecerdasan buatan untuk membantu bisnis Anda beradaptasi dan tumbuh di era
+                digital. Dari automasi hingga analisis data, kami membawa solusi cerdas yang mudah diimplementasikan.
               </p>
-                </div>
   
-                {/* Right Section (Home Image) */}
+              {/* Buttons - Moved inside left column for better mobile layout */}
-                <div className="box flex justify-center 2xl:ml-20 2xl:mr-[-11rem] px-4 lg:px-0">
+              <div className="flex flex-col sm:flex-row gap-4 pt-4">
-                    <img src={homeImg} alt="Home Image" className="w-full max-w-[807px] h-auto" />
+                <button className="flex items-center justify-center px-6 py-3 border-2 md:w-[245px] md:h-[55px]  border-customRed rounded-[14px] text-customRed border-customRed font-medium text-base lg:text-lg hover:bg-pink-50 transition-colors">
-                </div>
+                  <img src={waIcon} alt="WhatsApp Icon" className="mr-2 h-7 w-7" />
-            </div>
-
-            {/* Buttons */}
-            <div className="flex flex-col lg:flex-row mt-8 lg:-mt-28 lg:ml-28 gap-6 items-center px-4 lg:px-0">
-                <button className="w-full lg:w-[270px] h-[70px] btn2 flex items-center justify-center py-3 border-2 border-[#DC0168] rounded-[14px] text-[#DC0168] font-medium text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
-                    <img src={waIcon} alt="WhatsApp Icon" className="mr-2 h-[30px] w-[30px]" />
                   Konsultasi Gratis
                 </button>
-                <button className="w-full lg:w-[276px] h-[70px] btn2 flex items-center justify-center py-3 px-8 rounded-[14px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
+                <button className="flex items-center justify-center px-6 py-3 rounded-[14px] md:w-[245px] md:h-[55px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-base lg:text-lg hover:opacity-90 transition-opacity">
                   Coba Sekarang
                 </button>
               </div>
             </div>
-    );
-}
   
-export default Hero;
+            {/* Right Section */}
+            <div className="relative">
+              <div className="relative w-full aspect-square lg:aspect-auto lg:h-[600px]">
+                <img
+                  src={homeImg}
+                  alt="Rekan AI Illustration"
+                  className="object-contain"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+  
+  export default Hero

src/components/beranda/Kenapa.jsx

@@ -21,14 +21,14 @@ function Kenapa() {
 
         {/* Text Section */}
         <div className="w-full md:w-1/2 p-6 md:p-10 flex flex-col items-center md:items-start md:mr-28 text-center md:text-left">
-          <h2 className="text-2xl md:text-3xl font-semibold text-gray-800">Kenapa Harus Rekan AI?</h2>
+          <h2 className="text-2xl md:text-[28px] font-semibold text-customBlack">Kenapa Harus Rekan AI?</h2>
-          <p className="text-customBlack mt-4 text-sm md:max-w-[90%] md:leading-8 md:text-[20px]">
+          <p className="text-customBlack mt-4 text-sm  md:leading-7 md:text-[18px]">
             Rekan AI adalah mitra inovasi bisnis Anda dalam menghadapi era
             digital. Kami menghadirkan teknologi kecerdasan buatan yang dirancang
             untuk meningkatkan efisiensi operasional, mempercepat proses, dan
             memberikan wawasan berbasis data yang akurat.
           </p>
-          <ul className="mt-8 space-y-4 md:space-y-6 text-sm md:max-w-[70%] md:text-base text-customBlack font-medium">
+          <ul className="mt-8 space-y-4 md:space-y-6 text-sm md:max-w-[90%] md:text-base text-customBlack font-medium">
             <li className="flex items-center">
               <img src={chek2} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
               Automasi proses untuk mengurangi biaya dan meningkatkan produktivitas.

src/components/beranda/Solusi.jsx

@@ -27,7 +27,7 @@ function Solusi() {
 
   return (
     <section className="min-h-screen flex flex-col items-center justify-center py-8 bg-customWhite mt-24" id="solusi">
-      <div className="text-center mb-12">
+      <div className="text-center mb-12 md:-mt-48">
         <div className="flex flex-col md:flex-row items-center justify-center gap-4">
           <h1 className="text-2xl md:text-[32px] font-semibold">Ragam Solusi Terbaik Dari</h1>
           <span className="flex items-center justify-center text-lg md:text-2xl text-customWhite bg-customRed rounded-[19px] font-bold w-[194px] h-[48px] text-center">
@@ -44,7 +44,7 @@ function Solusi() {
         {cards.map((card, index) => (
           <div
             key={index}
-            className="bg-customWhite rounded-xl border p-6 flex flex-col items-center h-[681px] w-[402px]"
+            className="bg-customWhite rounded-xl border p-6 flex flex-col items-center h-[681px] w-[402px] md:h-[695px] md:w-[350px]"
           >
             <img src={card.image} alt={`Card ${index + 1}`} className="w-[130px] h-[170px] md:w-auto md:h-auto xl:w-auto xl:h-auto 2xl:w-auto 2xl:h-auto mb-6" />
             <p className="text-customBlack text-left mt-4 flex-1">{card.description}</p>
@@ -55,7 +55,7 @@ function Solusi() {
                 </li>
               ))}
             </ul>
-            <button className="w-[355px] h-[62px] bg-white border-[1px] shadow-sm shadow-zinc-800 border-blue-600 text-customBlue font-medium py-2 px-4 rounded-[18px] hover:bg-blue-600 hover:text-white transition duration-300">
+            <button className="w-[355px] h-[62px] md:w-[330px] md:h-[60px] bg-white border-[1px] shadow-sm shadow-zinc-800 border-blue-600 text-customBlue font-medium py-2 px-4 rounded-[18px] hover:bg-blue-600 hover:text-white transition duration-300">
               Selengkapnya <span>&rarr;</span>
             </button>
           </div>

src/components/solusi/SolusiStartup/data.js

@@ -33,7 +33,7 @@ export const data = {
         ]
       },
       doku: {
-        title: "Rekan Doku – Dokumen Anda, Kendali Anda",
+        title: "Rekan Doku – Autentikasi dan Manajemen Dokumen Digital",
         description:
           "Kelola dokumen pribadi dengan mudah dan aman menggunakan Rekan Doku. Produk ini memastikan dokumen digital Anda sah secara hukum dan tersimpan dengan baik.",
         image: rs2,