diff --git a/src/components/beranda/Banner.jsx b/src/components/beranda/Banner.jsx
index f5b2265..3946c1f 100644
--- a/src/components/beranda/Banner.jsx
+++ b/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">
-                <img src={L1} alt="image 1" className="w-auto 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={L3} alt="image 3" className="w-auto rounded-lg shadow-lg object-cover" />
-                <img src={L4} alt="image 4" className="w-auto rounded-lg shadow-lg object-cover -mt-10" />
+            <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-[200px] rounded-lg shadow-lg object-cover" />
+                <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-[210px] rounded-lg shadow-lg object-cover" />
+                <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">
-                <img src={R1} alt="image 1" className="w-auto 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={R3} alt="image 3" className="w-auto rounded-lg shadow-lg object-cover ml-7" />
-                <img src={R4} alt="image 4" className="w-auto rounded-lg shadow-lg object-cover" />
+            <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-[150px] rounded-lg shadow-lg object-cover mt-20 ml-9" />
+                <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-[180px] rounded-lg shadow-lg object-cover ml-7" />
+                <img src={R4} alt="image 4" className="w-[206px] rounded-lg shadow-lg object-cover" />
             </div>
 
             {/* Gambar R1-R4 untuk mobile */}
diff --git a/src/components/beranda/Header.jsx b/src/components/beranda/Header.jsx
index cbaa37b..eb5a746 100644
--- a/src/components/beranda/Header.jsx
+++ b/src/components/beranda/Header.jsx
@@ -1,125 +1,292 @@
-import { useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { Logo1, search, row, IconPersonal, IconCorporate, IconStartup } from "../../assets";
+"use client"
+
+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 [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
-  const [isSolusiOpen, setIsSolusiOpen] = useState(false);
-  const [isProdukOpen, setIsProdukOpen] = useState(false);
+  const navigate = useNavigate()
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
+  const [isSolusiOpen, setIsSolusiOpen] = 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">
-          <img src={Logo1} alt="Logo" className="w-[203px] h-[36.05px]" />
+        <div className="flex-shrink-0">
+          <img src={Logo1 || "/placeholder.svg"} alt="Logo" className="w-[150px] h-auto" />
         </div>
 
-        {/* Tombol Hamburger (Mobile) */}
-        <div className="sm:hidden flex items-center">
-          <button onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)} className="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>
+        {/* Desktop Navigation */}
+        <div className="hidden lg:flex items-center space-x-8">
+          <button
+            onClick={() => navigate("/")}
+            className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]"
+          >
+            Beranda
           </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">
-            <button onClick={() => setIsProdukOpen(!isProdukOpen)} className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center">
+          <div className="relative">
+            <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">
-                <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]"><a href="#produk2" className="text-[#212121]">Produk 2</a></li>
+              <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]">
+                  <a href="#produk2" className="text-[#212121]">
+                    Produk 2
+                  </a>
+                </li>
               </ul>
             )}
-          </li>
+          </div>
 
-          {/* Solusi Dropdown */}
-          <li className="relative group">
+          {/* Solusi Dropdown - Desktop */}
+          <div className="relative">
             <button
               onClick={() => setIsSolusiOpen(!isSolusiOpen)}
               className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center"
             >
-              Solusi
-              <img src={row} alt="arrow" className="ml-1" />
-            </button>
-            {isSolusiOpen && (
-              <ul
-                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"
+              Produk
+              <svg
+                stroke="currentColor"
+                fill="currentColor"
+                strokeWidth="0"
+                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">
-                  {/* 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">
-                    <img src={IconPersonal} alt="" className="w-16 h-16" />
-                    <div>
-                      <h3  className="font-medium text-base">Personal</h3>
-                      <p className="text-xs text-customBlack">Solusi efisien <br /> kebutuhan personal</p>
-                    </div>
-                  </li>
-
-                  {/* 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">
-                    <img src={IconStartup} alt="" className="w-16 h-16" />
-                    <div>
-                      <h3 className="font-medium text-base">Startup</h3>
-                      <p className="text-xs text-customBlack">Dukungan penuh <br /> untuk bisnis Startup</p>
-                    </div>
-                  </li>
-
-                  {/* Corporate Business */}
-                  <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">
-                    <img src={IconCorporate} alt="" className="w-16 h-16" />
-                    <div>
-                      <h3 className="font-medium text-base">Corporate Business</h3>
-                      <p className="text-xs text-customBlack">Solusi strategis untuk bisnis skala besar</p>
-                    </div>
-                  </li>
-                </div>
-              </ul>
-            )}
-          </li>
-
-
-
-          <li>
-            <button onClick={() => navigate("/Contact")} className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]">
-              Hubungi Kami
+                <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>
-          </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" />
+            {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 */}
+                    <button
+                      onClick={() => navigate("/SolusiPersonal")}
+                      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>
+                      </div>
+                    </button>
+
+                    {/* Startup */}
+                    <button
+                      onClick={() => navigate("/SolusiStartup")}
+                      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>
+                      </div>
+                    </button>
+
+                    {/* Corporate */}
+                    <button
+                      onClick={() => navigate("/SolusiCorporate")}
+                      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>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+
+          <button
+            onClick={() => navigate("/Contact")}
+            className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]"
+          >
+            Hubungi Kami
           </button>
         </div>
 
-        {/* Tombol Konsultasi */}
-        <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">
+        {/* Search Bar */}
+        <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
 
diff --git a/src/components/beranda/Hero.jsx b/src/components/beranda/Hero.jsx
index 2b872f7..b8763b5 100644
--- a/src/components/beranda/Hero.jsx
+++ b/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="
-                hero 
-                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">
-                    <img className="mb-5 mx-auto lg:mx-0" src={homeLogo} alt="Home Logo" />
-                    <h1 className="text-customBlack text-[24px] lg:text-[32px] font-semibold py-4">
-                        Ciptakan Pengalaman Pelanggan yang Tak Terlupakan dengan Solusi AI dari Rekan AI.
-                    </h1>
-                    <p className="text-customBlack text-[16px] lg:text-[20px]">
-                        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) */}
-                <div className="box flex justify-center 2xl:ml-20 2xl:mr-[-11rem] px-4 lg:px-0">
-                    <img src={homeImg} alt="Home Image" className="w-full max-w-[807px] h-auto" />
-                </div>
-            </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
+      <div className="w-full overflow-hidden" id="Home">
+        <div className="container mx-auto px-4 lg:px-6">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center py-12 lg:py-16">
+            {/* Left Section */}
+            <div className="space-y-6 md:-mt-10 mt-10">
+              <img src={homeLogo} alt="Rekan AI Logo" className="h-12 w-auto" />
+              <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-[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.
+              </p>
+  
+              {/* Buttons - Moved inside left column for better mobile layout */}
+              <div className="flex flex-col sm:flex-row gap-4 pt-4">
+                <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">
+                  <img src={waIcon} alt="WhatsApp Icon" className="mr-2 h-7 w-7" />
+                  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">
-                    Coba Sekarang
+                <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>
+  
+            {/* 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>
-    );
-}
-
-export default Hero;
+      </div>
+    )
+  }
+  
+  export default Hero
diff --git a/src/components/beranda/Kenapa.jsx b/src/components/beranda/Kenapa.jsx
index 4c0ba54..0b632d3 100644
--- a/src/components/beranda/Kenapa.jsx
+++ b/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>
-          <p className="text-customBlack mt-4 text-sm md:max-w-[90%] md:leading-8 md:text-[20px]">
+          <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: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.
diff --git a/src/components/beranda/Solusi.jsx b/src/components/beranda/Solusi.jsx
index 86cfba9..0353a4c 100644
--- a/src/components/beranda/Solusi.jsx
+++ b/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>
diff --git a/src/components/solusi/SolusiStartup/data.js b/src/components/solusi/SolusiStartup/data.js
index 215a17c..5a40a58 100644
--- a/src/components/solusi/SolusiStartup/data.js
+++ b/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,