penambahan fitur 3 huruf setelah (.) pada form email

package-lock.json

@@ -8,8 +8,11 @@
       "name": "rekan-ai-tailwind",
       "version": "0.0.0",
       "dependencies": {
+        "framer-motion": "^12.4.3",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-google-recaptcha": "^3.1.0",
+        "react-intersection-observer": "^9.15.1",
         "react-router-dom": "^7.1.3"
       },
       "devDependencies": {
@@ -2862,6 +2865,33 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.4.3",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.4.3.tgz",
+      "integrity": "sha512-rsMeO7w3dKyNG09o3cGwSH49iHU+VgDmfSSfsX+wfkO3zDA6WWkh4sUsMXd155YROjZP+7FTIhDrBYfgZeHjKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.0.0",
+        "motion-utils": "^12.0.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -3182,6 +3212,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -3920,6 +3959,21 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.0.0.tgz",
+      "integrity": "sha512-CvYd15OeIR6kHgMdonCc1ihsaUG4MYh/wrkz8gZ3hBX/uamyZCXN9S9qJoYF03GqfTt7thTV/dxnHYX4+55vDg==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.0.0"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.0.0.tgz",
+      "integrity": "sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -3996,7 +4050,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -4483,7 +4536,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.4.0",
@@ -4534,6 +4586,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-async-script": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/react-async-script/-/react-async-script-1.2.0.tgz",
+      "integrity": "sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "hoist-non-react-statics": "^3.3.0",
+        "prop-types": "^15.5.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.4.1"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
@@ -4547,11 +4612,38 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-google-recaptcha": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-3.1.0.tgz",
+      "integrity": "sha512-cYW2/DWas8nEKZGD7SCu9BSuVz8iOcOLHChHyi7upUuVhkpkhYG/6N3KDiTQ3XAiZ2UAZkfvYKMfAHOzBOcGEg==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.5.0",
+        "react-async-script": "^1.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.4.1"
+      }
+    },
+    "node_modules/react-intersection-observer": {
+      "version": "9.15.1",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.15.1.tgz",
+      "integrity": "sha512-vGrqYEVWXfH+AGu241uzfUpNK4HAdhCkSAyFdkMb9VWWXs6mxzBLpWCxEy9YcnDNY2g9eO6z7qUtTBdA9hc8pA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/react-refresh": {
@@ -5390,6 +5482,12 @@
       "dev": true,
       "license": "Apache-2.0"
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
     "node_modules/turbo-stream": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",

package.json

@@ -10,8 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "framer-motion": "^12.4.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-google-recaptcha": "^3.1.0",
+    "react-intersection-observer": "^9.15.1",
     "react-router-dom": "^7.1.3"
   },
   "devDependencies": {

src/App.jsx

@@ -1,19 +1,31 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import Contact from "./pages/Contact"
 import Home from "./pages/Home"
+import FormSection from "./components/contact/FormSection"
 import SolusiPersonal from "./pages/SolusiPersonal"
 import SolusiStartup from "./pages/SolusiStartup"
 import SolusiCorporate from "./pages/SolusiCorporate"
-
+import NotFound from "./components/NotFound/NotFound"
+import Header from './components/beranda/Header';
+import WhatsAppButton from './components/beranda/WhatsAppButon';
 function App() {
   return (
     <Router>
       <Routes>
-        <Route path='/' element={<Home/>}/>
+        <Route path='/' element={<Home />} />
-        <Route path='/Contact' element={<Contact/>}/>
+        <Route path='/Contact' element={<Contact />} />
-        <Route path='/SolusiPersonal' element={<SolusiPersonal/>}/>
+        <Route path='/FormSection' element={<FormSection />} />
-        <Route path='/SolusiStartup' element={<SolusiStartup/>}/>
+        <Route path='/SolusiPersonal' element={<SolusiPersonal />} />
-        <Route path='/SolusiCorporate' element={<SolusiCorporate/>}/>
+        <Route path='/SolusiStartup' element={<SolusiStartup />} />
+        <Route path='/SolusiCorporate' element={<SolusiCorporate />} />
+        <Route path='/004' element={
+          <>
+            <Header />
+            <NotFound />
+            <WhatsAppButton/>
+          </>
+
+        } />
       </Routes>
     </Router>
 

src/assets/index.js

@@ -2,7 +2,11 @@ import Logo1 from './image/logo.png'
 import search from './image/search.png';
 import IconPersonal from './image/Frame 18.png';
 import IconStartup from './image/Frame 18 (1).png';
-import IconCorporate from './image/Frame 18 (2).png'
+import IconCorporate from './image/Frame 18 (2).png';
+import ProdukHr from './image/Frame 18 (3).png';
+import ProdukDoku from './image/Frame 18 (4).png';
+import ProdukLlm from './image/Frame 18 (5).png';
+import ProdukVeri from './image/Frame 18 (6).png';
 import row from './image/arrow.png';
 import row2 from './image/vector.png';
 import homeLogo from './image/Component 1.png';
@@ -80,5 +84,5 @@ export{
     swipper7,swipper8,swipper9,swipper10,swipper11,swipper12,swipper13,swipper14,
     swipper15,swipper16,swipper17,swipper18,swipper19,swipper20,swipper21,swipper22,
     swipper23,swipper24,bgSwiper,imgLeft1,imgLeft2,imgLeft3,imgRight,nvdia,kmn,kominfo,
-    ojk,facebook,x,instagram,frame,IconPersonal,IconStartup,IconCorporate
+    ojk,facebook,x,instagram,frame,IconPersonal,IconStartup,IconCorporate,ProdukDoku,ProdukHr,ProdukVeri,ProdukLlm
 }

src/components/NotFound/NotFound.jsx

@@ -0,0 +1,14 @@
+import { logonf } from "./asset";
+
+
+const NotFound = () => {
+    return (
+        <div className="justify-center text-center items-center flex flex-col mt-32 gap-4">
+            <img src={logonf} alt="404" />
+            <h1 className="font-bold text-[1.5rem]">Halaman Dalam Proses Pengembangan</h1>
+            <p className="text-[1rem] font-medium w-[50rem]">Terima kasih atas kunjungan Anda! Halaman ini sedang dalam tahap pengembangan untuk memberikan pengalaman terbaik. Nantikan segera pembaruan dari kami! </p>
+        </div>
+    );
+};
+
+export default NotFound;

src/components/NotFound/asset/index.js

@@ -0,0 +1,4 @@
+import logonf from './Black Blue and Pink Modern Twibbon Instagram Post 1.png';
+
+
+export {  logonf,  }

src/components/beranda/Banner.jsx

@@ -1,17 +1,21 @@
-import {waIcon2,L1,L2,L3,L4,R1,R2,R3,R4,bgcBanner} from '../../assets/';
+import { waIcon2, L1, L2, L3, L4, R1, R2, R3, R4, bgcBanner } from "../../assets/"
+import { Link } from "react-router-dom"
 
 function Banner() {
   return (
+    <div className="relative w-full overflow-hidden">
       <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="absolute top-0 left-0 w-full h-full"
         style={{
-                backgroundImage: ` linear-gradient(248.72deg, #5B59E0 50.11%, rgba(202, 43, 104, 0.4) 90%), url(${bgcBanner})`,
+          backgroundImage: `linear-gradient(248.72deg, #5B59E0 50.11%, rgba(202, 43, 104, 0.4) 90%), url(${bgcBanner})`,
-                backgroundSize: 'cover',
+          backgroundSize: "cover",
-                backgroundPosition: 'center',
+          backgroundPosition: "center",
-                backgroundRepeat: 'no-repeat',
+          backgroundRepeat: "no-repeat",
-                backgroundBlendMode: 'multiply',
+          backgroundBlendMode: "multiply",
         }}
-        >
+      ></div>
+
+      <div className="container mx-auto relative w-full flex flex-col items-center justify-center mt-20 h-auto md:h-[692px] text-white text-center">
         {/* Gambar L1-L4 untuk mobile */}
         <div className="grid md:hidden grid-cols-2 gap-4 px-4 mt-8">
           <img src={L1} alt="image 1" className="w-full rounded-lg shadow-lg object-cover" />
@@ -21,40 +25,80 @@ function Banner() {
         </div>
 
         {/* Teks dan tombol */}
-            <div className="px-4 mx-auto text-center w-full mt-8 md:mt-0">
+        <div className="container mx-auto px-4 text-center w-full mt-8 md:mt-0 z-10">
           <div className="text-customWhite max-w-[90%] md:max-w-[45%] mx-auto">
-                    <h1 className="text-xl md:text-[30px] font-semibold text-center leading-10">
+            <h1 className="text-xl md:text-[25px] lg:text-[24px] 2xl: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-[700px] mx-auto text-customWhite text-sm md:text-[18px] md:font-extralight md:leading-7">
+          <p className="mt-4 md:mt-14 max-w-[90%] md:max-w-[500px] 2xl:max-w-[700px]  mx-auto text-customWhite text-sm 2xl: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.
+            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-[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" />
+              <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-[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">
+            <Link to={"/Contact#form"}>
+              <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>
+            </Link>
           </div>
         </div>
 
         {/* Gambar L1-L4 untuk desktop */}
-            <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">
+        <div className="absolute hidden md:grid top-1/2 left-0 transform -translate-y-1/2 grid-cols-2 gap-4 w-[30vw] max-w-[400px]">
-                <img src={L1} alt="image 1" className="w-[200px] rounded-lg shadow-lg object-cover" />
+          <img
-                <img src={L2} alt="image 2" className="w-[150px] rounded-lg shadow-lg object-cover mt-20" />
+            src={L1}
-                <img src={L3} alt="image 3" className="w-[210px] rounded-lg shadow-lg object-cover" />
+            alt="image 1"
-                <img src={L4} alt="image 4" className="w-[150px] rounded-lg shadow-lg object-cover -mt-5" />
+            className="w-[15vw] max-w-[170px] 2xl:max-w-[200px] rounded-lg shadow-lg object-cover"
+          />
+          <img
+            src={L2}
+            alt="image 2"
+            className="w-[11vw] max-w-[135px] 2xl:max-w-[150px] md:-translate-x-9 2xl:-translate-x-0 rounded-lg shadow-lg object-cover mt-16"
+          />
+          <img
+            src={L3}
+            alt="image 3"
+            className="w-[16vw] max-w-[180px] 2xl:max-w-[210px] rounded-lg shadow-lg object-cover"
+          />
+          <img
+            src={L4}
+            alt="image 4"
+            className="w-[11vw] max-w-[120px] 2xl:max-w-[150px] md:-translate-x-5 2xl:-translate-x-0 rounded-lg shadow-lg object-cover -mt-1 2xl:-mt-11"
+          />
         </div>
 
         {/* Gambar R1-R4 untuk desktop */}
-            <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">
+        <div className="absolute hidden md:grid top-1/2 right-4 transform -translate-y-1/2 grid-cols-2 gap-4 w-[30vw] max-w-[400px]">
-                <img src={R1} alt="image 1" className="w-[150px] rounded-lg shadow-lg object-cover mt-20 ml-9" />
+          <img
-                <img src={R2} alt="image 2" className="w-[200px] rounded-lg shadow-lg object-cover -ml-7" />
+            src={R1}
-                <img src={R3} alt="image 3" className="w-[180px] rounded-lg shadow-lg object-cover ml-7" />
+            alt="image 1"
-                <img src={R4} alt="image 4" className="w-[206px] rounded-lg shadow-lg object-cover" />
+            className="w-[11vw] max-w-[135px] 2xl:max-w-[150px] rounded-lg shadow-lg object-cover mt-28 2xl:mt-20 ml-24 2xl:ml-9"
+          />
+          <img
+            src={R2}
+            alt="image 2"
+            className="w-[15vw] max-w-[170px] 2xl:max-w-[200px] rounded-lg shadow-lg object-cover 2xl:-ml-4 md:ml-8 md:mt-14 2xl:mt-0"
+          />
+          <img
+            src={R3}
+            alt="image 3"
+            className="w-[13vw] max-w-[145px] 2xl:max-w-[180px] rounded-lg shadow-lg object-cover ml-24 2xl:ml-7"
+          />
+          <img
+            src={R4}
+            alt="image 4"
+            className="w-[15vw] max-w-[170px] 2xl:max-w-[206px] rounded-lg shadow-lg object-cover ml-8 2xl:ml-0"
+          />
         </div>
 
         {/* Gambar R1-R4 untuk mobile */}
@@ -65,6 +109,7 @@ function Banner() {
           <img src={R4} alt="image 4" className="w-full rounded-lg shadow-lg object-cover" />
         </div>
       </div>
+    </div>
   )
 }
 

src/components/beranda/Footer.jsx

@@ -1,78 +1,130 @@
-import { nvdia,kmn,kominfo,ojk,x,instagram,facebook,frame, } from "../../assets";
+import { useNavigate, Link } from "react-router-dom"
 
+import {
+  nvidia,
+  kmn,
+  kominfo,
+  ojk,
+  facebook,
+  x,
+  instagram,
+  component11,
+} from "../contact/asset"; // Gambar logo sebagai partner dan logo medsos dan logo rekanai
 
 function Footer() {
+  const navigate = useNavigate();
   return (
-    <footer className="bg-customGrey h-[506px] py-10 text-[#212121]">
+    <footer className="bg-customGrey py-10 text-[#212121]">
+      <div className="container mx-auto">
         {/* Kontainer utama footer */}
         <div className="flex flex-col sm:flex-row sm:flex-wrap justify-between gap-5 mx-5 sm:mx-28 mt-20 text-sm">
           {/* Kolom 1: Logo perusahaan */}
-        <div className="mb-5 sm:mb-0">
+          <div className="mb-5 sm:mb-0 md:-ml-16">
             <img
-            src={frame} // Gambar logo perusahaan
+              src={component11} // Gambar logo perusahaan
               alt="Logo"
               className="max-w-[200px] w-[50.3px] h-[40.24px] sm:mx-0"
             />
           </div>
 
           {/* Kolom 2: Deskripsi singkat perusahaan */}
-        <div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
+          <div className="w-full sm:w-auto mb-5 sm:mb-0 md:pr-14 sm:pl-0">
             <div className="flex mb-5">
               <p>
                 <strong className="text-[25px] text-[#5B59E8]">Rekan AI</strong>{" "}
                 <br />
-              <span className="text-[#5B59E8] italic font-bold">
+                <span className="text-[#5B59E8] italic">
                   Reimagine Your Business with AI.
                 </span>
               </p>
             </div>
-          <p className="mb-10 text-[18px]">
+
-            Jl. Anggrek No.6, Sawah Lama, Kec. Ciputat, Kota Tangerang Selatan,
+            <div className="flex space-x-3">
-            Banten 15413
-          </p>
-          <p className="mb-4 text-[18px]">Lebih dekat dengan Kami</p>
-          <div className="flex space-x-5">
               {/* Tautan ke media sosial */}
               <a href="#">
-              <img src={instagram} alt="Instagram" className="w-5 h-5"  /> {/* Ikon Instagram */}
+                <img src={instagram} alt="Instagram" className="w-5 h-5" />{" "}
               </a>
               <a href="#">
-              <img src={facebook} alt="Facebook" className="w-5 h-5" /> {/* Ikon Facebook */}
+                <img src={facebook} alt="Facebook" className="w-5 h-5" />{" "}
               </a>
               <a href="#">
-              <img src={x} alt="Twitter" className="w-5 h-5" /> {/* Ikon Twitter (X) */}
+                <img src={x} alt="Twitter" className="w-5 h-5" />{" "}
               </a>
             </div>
           </div>
 
           {/* Kolom 3: Produk perusahaan */}
-        <div className="flex-1 mb-5 sm:mb-0 md:ml-16 sm:pl-0">
+          <div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
-          <h4 className="text-[18px] font-semibold mb-4">Produk Kami</h4>
+            <h4 className="text-base font-semibold mb-4">Produk Kami</h4>
             <ul className="space-y-4 text-[18px]">
-            <li>Rekan Doku</li> {/* Produk: Dokumen otomatis */}
+              <li>Rekan Doku</li>
-            <li>Rekan Veri</li> {/* Produk: Verifikasi data */}
+              <li>Rekan Veri</li>
-            <li>Rekan HR</li> {/* Produk: Manajemen SDM */}
+              <li>Rekan HR</li>
-            <li>Rekan LLM</li> {/* Produk: Model bahasa besar */}
+              <li>Rekan LLM</li>
             </ul>
           </div>
 
           {/* Kolom 4: Solusi yang ditawarkan */}
-        <div className="flex-1 mb-5 md:-mx-28 sm:mb-0 sm:pl-0">
+          <div className="flex-1 flex flex-col mb-5 sm:mb-0 sm:pl-0">
-          <h4 className="text-[18px] font-semibold mb-4">Solusi Kami</h4>
+            <h4 className="text-base font-semibold mb-4">Solusi Kami</h4>
             <ul className="space-y-4 text-[18px]">
-            <li>Personal</li> {/* Solusi untuk individu */}
+              <li>
-            <li>UMKM</li> {/* Solusi untuk Usaha Mikro, Kecil, dan Menengah */}
+                <button
-            <li>Corporate Business</li> {/* Solusi untuk perusahaan besar */}
+                  onClick={() => {
+                    navigate("/SolusiPersonal");
+                    window.scrollTo({ top: 0, behavior: "smooth" });
+                  }}
+                  className="block w-full text-left"
+                >
+                  Personal
+                </button>
+              </li>
+              <li>
+                <button
+                  onClick={() => {
+                    navigate("/SolusiStartup");
+                    window.scrollTo({ top: 0, behavior: "smooth" });
+                  }}
+                  className="block w-full text-left">
+                  Startup
+                </button>
+              </li>
+              <li>
+                <button
+                  onClick={() => {
+                    navigate("/SolusiCorporate");
+                    window.scrollTo({ top: 0, behavior: "smooth" });
+                  }}
+                  className="block w-full text-left">
+                  Corporate Business
+                </button>
+              </li>
             </ul>
           </div>
 
+
           {/* Kolom 5: Informasi kontak */}
           <div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
             <h4 className="text-[18px] font-semibold mb-4">Hubungi Kami</h4>
             <ul className="space-y-4 text-[18px]">
-            <li>Email: support@rekanai.com</li> {/* Email dukungan */}
+              <li>
-            <li>Phone: +68452098</li> {/* Nomor telepon */}
+                <button
-            <li>F.A.Q</li> {/* Halaman Pertanyaan yang Sering Diajukan */}
+                  onClick={() => {
+                    navigate("/Contact");
+                    window.scrollTo({ top: 0, behavior: "smooth" });
+                  }}
+                  className="block w-full text-left">
+                  Kontak Kami
+                </button>
+              </li>
+              <li>
+                <Link to={"/Contact#faq"}>
+                  <button
+                    className="block w-full text-left">
+                    F.A.Q
+                  </button>
+                </Link>
+              </li>
             </ul>
           </div>
 
@@ -80,28 +132,29 @@ function Footer() {
           <div className="mb-5 sm:mb-0 sm:pl-0">
             <div className="mb-4">
               <img
-              src={nvdia} // Gambar logo partner NVIDIA
+                src={nvidia}
                 alt="NVIDIA Inception Premier Member"
                 className="w-[221px] h-[83px]"
               />
             </div>
             <div className="flex gap-5">
-            <img src={kmn} alt="Partner 1" className="w-[56px] h-[72px]" /> {/* Gambar logo partner Kementerian */}
+              <img src={kmn} alt="Partner 1" className="w-[56px] h-[72px]" />
-            <img src={kominfo} alt="Partner 2" className="w-[63px] h-[62px]" /> {/* Gambar logo partner Kominfo */}
+              <img src={kominfo} alt="Partner 2" className="w-[63px] h-[62px]" />
-            <img src={ojk} alt="Partner 3" className="w-[77px] h-[60px]" /> {/* Gambar logo partner OJK */}
+              <img src={ojk} alt="Partner 3" className="w-[77px] h-[60px]" />
             </div>
           </div>
         </div>
 
         {/* Bagian hak cipta */}
-      <div className="text-left mt-40 mx-5 sm:mx-28 text-xs">
+        <div className="text-left mt-[92.78px] md:ml-44 sm:mx-28 text-xs">
           <p>
             © Copyright 2025 Rekan AI. Seluruh hak cipta dilindungi undang-undang
           </p>
         </div>
+      </div>
+
     </footer>
   );
 }
 
-
 export default Footer;

src/components/beranda/Header.jsx

@@ -1,32 +1,80 @@
-import { useState } from "react"
+import { useState, useRef, useEffect } from "react"
 import { useNavigate } from "react-router-dom"
-import { Logo1, search, row, IconPersonal, IconCorporate, IconStartup } from "../../assets"
+import { Logo1, search, row, IconPersonal, IconCorporate, IconStartup, ProdukDoku, ProdukHr, ProdukLlm, ProdukVeri } 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);
+  const [searchQuery, setSearchQuery] = useState("")
+
+  const handleSearch = (e) => {
+    setSearchQuery(e.target.value)
+  }
+
+  const handleSearchSubmit = (e) => {
+    e.preventDefault()
+    const query = searchQuery.toLowerCase()
+
+    // Solutions mapping
+    if (query.includes("solusi personal") || query.includes("personal")) {
+      navigate("/SolusiPersonal")
+    } else if (query.includes("solusi startup") || query.includes("startup")) {
+      navigate("/SolusiStartup")
+    } else if (query.includes("solusi corporate") || query.includes("corporate") || query.includes("business")) {
+      navigate("/SolusiCorporate")
+    }
+
+    window.scrollTo({ top: 0, behavior: "smooth" })
+    setSearchQuery("") // Clear search after submission
+  }
+
+  // Referensi untuk mendeteksi klik di luar dropdown
+  const solusiRef = useRef(null);
+  const produkRef = useRef(null);
+
+  // Fungsi untuk menutup dropdown jika klik di luar elemen
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (solusiRef.current && !solusiRef.current.contains(event.target)) {
+        setIsSolusiOpen(false);
+      }
+      if (produkRef.current && !produkRef.current.contains(event.target)) {
+        setIsProdukOpen(false);
+      }
+    }
+    
+
+    // Tambahkan event listener saat dropdown terbuka
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
 
   return (
     <header className="fixed top-0 left-0 w-full z-50 font-montserrat 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-shrink-0">
+        <div className="flex-shrink-0 md:mr-5">
           <img src={Logo1 || "/placeholder.svg"} alt="Logo" className="w-[150px] h-auto" />
         </div>
 
         {/* Desktop Navigation */}
         <div className="hidden lg:flex items-center space-x-8">
           <button
-            onClick={() => navigate("/")}
+            onClick={() => {
+              navigate("/")
+              window.scrollTo({ top: 0, behavior: "smooth" });
+            }}
             className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]"
           >
             Beranda
           </button>
 
           {/* Produk Dropdown */}
-          <div className="relative">
+          <div className="relative" ref={produkRef}>
             <button
               onClick={() => setIsProdukOpen(!isProdukOpen)}
               className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center"
@@ -47,23 +95,79 @@ const Header = () => {
             </button>
 
             {isProdukOpen && (
-              <ul className="absolute left-0 top-full mt-2 w-48 bg-white list-none py-2 shadow-lg rounded-md">
+              <div className="absolute md:left-[350px] 2xl:left-[448px] -translate-x-1/2 top-full md:top-11 mt-2 w-[1450px]">
-                <li className="px-5 py-2 hover:text-[#5a55ff]">
+                <div className="bg-customRed bg-opacity-80 rounded-xl p-8">
-                  <a href="#produk1" className="text-[#212121]">
+                  <div className="flex justify-center gap-8">
-                    Produk 1
+                    {/* HR */}
-                  </a>
+                    <button
-                </li>
+                      onClick={() => {
-                <li className="px-5 py-2 hover:text-[#5a55ff]">
+                        navigate("/004");
-                  <a href="#produk2" className="text-[#212121]">
+                        window.scrollTo({ top: 0, behavior: "smooth" });
-                    Produk 2
+                      }}
-                  </a>
+                      className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
-                </li>
+                    >
-              </ul>
+                      <img src={ProdukHr} alt="" className="w-16 h-16" />
+                      <div className="text-left">
+                        <h3 className="font-medium text-base py-2">Rekan HR</h3>
+                        <p className="text-xs text-customBlack">
+                          Manajemen absensi karyawan
+                        </p>
+                      </div>
+                    </button>
+
+                    {/* DOKU */}
+                    <button
+                      onClick={() => {
+                        navigate("/004");
+                        window.scrollTo({ top: 0, behavior: "smooth" });
+                      }}
+                      className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
+                    >
+                      <img src={ProdukDoku} alt="" className="w-16 h-16" />
+                      <div className="text-left">
+                        <h3 className="font-medium text-base py-1">Rekan Doku</h3>
+                        <p className="text-xs text-customBlack">
+                          Kelola dokumen <br /> digital
+                        </p>
+                      </div>
+                    </button>
+
+                    {/* LLM */}
+                    <button
+                      onClick={() => {
+                        navigate("/004");
+                        window.scrollTo({ top: 0, behavior: "smooth" });
+                      }}
+                      className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
+                    >
+                      <img src={ProdukLlm} alt="" className="w-16 h-16" />
+                      <div className="text-left">
+                        <h3 className="font-medium text-base py-1">Rekan LLM</h3>
+                        <p className="text-xs text-customBlack">Solusi analisis berbasis <br /> data</p>
+                      </div>
+                    </button>
+                    {/* VERI */}
+                    <button
+                      onClick={() => {
+                        navigate("/004");
+                        window.scrollTo({ top: 0, behavior: "smooth" });
+                      }}
+                      className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
+                    >
+                      <img src={ProdukVeri} alt="" className="w-16 h-16" />
+                      <div className="text-left">
+                        <h3 className="font-medium text-base py-1">Rekan Veri</h3>
+                        <p className="text-xs text-customBlack">Verifikasi data secara <br /> akurat</p>
+                      </div>
+                    </button>
+                  </div>
+                </div>
+              </div>
             )}
           </div>
 
           {/* Solusi Dropdown - Desktop */}
-          <div className="relative">
+          <div className="relative" ref={solusiRef}>
             <button
               onClick={() => setIsSolusiOpen(!isSolusiOpen)}
               className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center"
@@ -84,17 +188,20 @@ const Header = () => {
             </button>
 
             {isSolusiOpen && (
-              <div className="absolute left-64 -translate-x-1/2 top-full md:top-11 mt-2 w-[5000px]">
+              <div className="absolute md:left-[235px] 2xl:left-[340px] -translate-x-1/2 top-full md:top-11 mt-2 w-[1450px] ">
-                <div className="bg-customRed rounded-xl p-8">
+                <div className="bg-customRed bg-opacity-80 rounded-xl p-8 md:h-[168px]">
                   <div className="flex justify-center gap-8">
                     {/* Personal */}
                     <button
-                      onClick={() => navigate("/SolusiPersonal")}
+                      onClick={() => {
+                        navigate("/SolusiPersonal");
+                        window.scrollTo({ top: 0, behavior: "smooth" });
+                      }}
                       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>
+                        <h3 className="font-medium text-base py-1">Personal</h3>
                         <p className="text-xs text-customBlack">
                           Solusi efisien <br /> kebutuhan personal
                         </p>
@@ -103,12 +210,15 @@ const Header = () => {
 
                     {/* Startup */}
                     <button
-                      onClick={() => navigate("/SolusiStartup")}
+                      onClick={() => {
+                        navigate("/SolusiStartup");
+                        window.scrollTo({ top: 0, behavior: "smooth" });
+                      }}
                       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>
+                        <h3 className="font-medium text-base py-1">Startup</h3>
                         <p className="text-xs text-customBlack">
                           Dukungan penuh <br /> untuk bisnis Startup
                         </p>
@@ -117,12 +227,15 @@ const Header = () => {
 
                     {/* Corporate */}
                     <button
-                      onClick={() => navigate("/SolusiCorporate")}
+                      onClick={() => {
+                        navigate("/SolusiCorporate");
+                        window.scrollTo({ top: 0, behavior: "smooth" });
+                      }}
                       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>
+                        <h3 className="font-medium text-base py-1">Corporate Business</h3>
                         <p className="text-xs text-customBlack">Solusi strategis untuk bisnis skala besar</p>
                       </div>
                     </button>
@@ -133,7 +246,10 @@ const Header = () => {
           </div>
 
           <button
-            onClick={() => navigate("/Contact")}
+            onClick={() => {
+              navigate("/Contact");
+              window.scrollTo({ top: 0, behavior: "smooth" });
+            }}
             className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]"
           >
             Hubungi Kami
@@ -142,16 +258,21 @@ const Header = () => {
 
         {/* Search Bar */}
         <div className="hidden lg:flex items-center flex-1 max-w-xl mx-8">
-          <div className="relative w-full">
+          <form onSubmit={handleSearchSubmit} className="relative w-full">
             <input
               type="text"
               placeholder="Pencarian..."
+              value={searchQuery}
+              onChange={handleSearch}
               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]">
+            <button
+              type="submit"
+              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>
+          </form>
         </div>
 
         {/* Konsultasi Button */}
@@ -194,12 +315,53 @@ const Header = () => {
                 {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">
+                      <button
-                        Produk 1
+                        onClick={() => navigate("/SolusiPersonal")}
-                      </a>
+                        className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
-                      <a href="#produk2" className="block p-4 bg-white rounded-lg">
+                      >
-                        Produk 2
+                        <img src={ProdukHr} alt="" className="w-12 h-12" />
-                      </a>
+                        <div className="text-left">
+                          <h3 className="font-medium text-base">Rekan HR</h3>
+                          <p className="text-xs text-customBlack">
+                            Manajemen absensi karyawan
+                          </p>
+                        </div>
+                      </button>
+
+                      <button
+                        onClick={() => navigate("/SolusiStartup")}
+                        className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
+                      >
+                        <img src={ProdukDoku} alt="" className="w-12 h-12" />
+                        <div className="text-left">
+                          <h3 className="font-medium text-base">Rekan Doku</h3>
+                          <p className="text-xs text-customBlack">
+                            Kelola dokumen digital
+                          </p>
+                        </div>
+                      </button>
+
+                      <button
+                        onClick={() => navigate("/SolusiCorporate")}
+                        className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
+                      >
+                      <img src={ProdukLlm} alt="" className="w-12 h-12" />
+                      <div className="text-left">
+                        <h3 className="font-medium text-base">Rekan LLM</h3>
+                        <p className="text-xs text-customBlack">Solusi analisis berbasis data</p>
+                      </div>
+                      </button>
+
+                      <button
+                        onClick={() => navigate("/SolusiCorporate")}
+                        className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
+                      >
+                      <img src={ProdukVeri} alt="" className="w-12 h-12" />
+                      <div className="text-left">
+                        <h3 className="font-medium text-base">Rekan Veri</h3>
+                        <p className="text-xs text-customBlack">Verifikasi data secara akurat</p>
+                      </div>
+                      </button>
                     </div>
                   </div>
                 )}

src/components/beranda/Hero.jsx

@@ -1,12 +1,49 @@
 import { homeLogo, waIcon, homeImg } from '../../assets';
+import { useNavigate, Link } from "react-router-dom";
+import { motion } from "framer-motion";
+import { useEffect, useState } from "react";
 
 function Hero() {
+  const [inView, setInView] = useState(false);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setInView(true);
+          } else {
+            setInView(false);
+          }
+        });
+      },
+      { threshold: 0.2 }
+    );
+
+    const target = document.querySelector("#hero-section");
+    if (target) {
+      observer.observe(target);
+    }
+
+    return () => {
+      if (target) {
+        observer.unobserve(target);
+      }
+    };
+  }, []);
+
   return (
-    <div className="w-full overflow-hidden" id="Home">
+    <div className="translate-y-24 md:translate-y-0 w-full overflow-hidden" id="Home">
-      <div className="container mx-auto px-4 lg:px-6">
+      <div className="container mx-auto px-4 lg:px-12">
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center py-12 lg:py-16">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center py-12 lg:py-16" id="hero-section">
           {/* Left Section */}
-          <div className="space-y-6 md:-mt-32 mt-10 text-center lg:text-left order-1 lg:order-none">
+          <motion.div
+            initial={{ opacity: 0, x: -50 }}
+            animate={{ opacity: inView ? 1 : 0, x: inView ? 0 : -50 }}
+            transition={{ duration: 0.8 }}
+            className="space-y-6 md:-mt-40 -mt-28 text-center lg:text-left order-1 md:-ml-4 2xl:-ml-4 lg:order-none"
+            >
             <img src={homeLogo} alt="Rekan AI Logo" className="h-12 w-auto lg:mx-0" />
             <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.
@@ -15,23 +52,36 @@ function Hero() {
               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>
+          </motion.div>
 
-          {/* Right Section - Adjust order for mobile */}
+          {/* Right Section */}
-          <div className="relative w-full aspect-square lg:aspect-auto md:w-[650px] md:h-[680px] lg:h-[600px] order-2 lg:order-none">
+          <motion.div 
+            initial={{ opacity: 0, scale: 0.8 }} 
+            animate={{ opacity: inView ? 1 : 0, scale: inView ? 1 : 0.8 }} 
+            transition={{ duration: 0.8, delay: 0.3 }}
+            className="relative w-full aspect-square lg:aspect-auto md:w-[650px] md:h-[680px] lg:h-[600px] order-2 lg:order-none"
+          >
             <img src={homeImg} alt="Rekan AI Illustration" className="object-contain" />
-          </div>
+          </motion.div>
 
-          {/* Buttons - Ensure they come last on mobile */}
+          {/* Buttons */}
-          <div className="flex flex-col sm:flex-row gap-4 md:-mt-96 order-3 lg:order-none">
+          <motion.div 
-            <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 font-medium text-base lg:text-lg hover:bg-pink-50 transition-colors">
+            initial={{ opacity: 0, y: 50 }} 
+            animate={{ opacity: inView ? 1 : 0, y: inView ? 0 : 50 }} 
+            transition={{ duration: 0.8, delay: 0.6 }}
+            className="flex flex-col sm:flex-row gap-4 md:-mt-96 order-3 lg:order-none"
+            id="button-section"
+          >
+            <button className="flex items-center justify-center px-6 py-3 border-2 md:w-[245px] md:h-[62px] border-customRed rounded-[14px] text-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="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">
+            <Link to={"/Contact#form"}>
+              <button className="flex items-center justify-center px-6 py-3 rounded-[14px] w-[358px] h-[55px] md:w-[245px] md:h-[62px] 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>
+            </Link>
+          </motion.div>
         </div>
       </div>
     </div>

src/components/beranda/Kenapa.jsx

@@ -1,26 +1,64 @@
-import {imgLeft,chek2,waIcon,circle1,circle2} from '../../assets'
+import { imgLeft, chek2, waIcon, circle1, circle2 } from '../../assets';
+import { Link } from "react-router-dom";
+import { motion } from "framer-motion";
+import { useInView } from "react-intersection-observer";
 
 function Kenapa() {
+  const options = { triggerOnce: false, threshold: 0.2 };
+  const { ref: sectionRef, inView: sectionInView } = useInView(options);
+  const { ref: textRef, inView: textInView } = useInView(options);
+  const { ref: listRef, inView: listInView } = useInView(options);
+  const { ref: buttonRef, inView: buttonInView } = useInView(options);
+
   return (
-    <div className="flex justify-center items-center bg-customWhite mt-5 min-h-screen">
+    <div ref={sectionRef} className="container mx-auto flex justify-center items-center bg-customWhite mt-5 min-h-screen">
-      <div className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52">
+      <motion.div
+        initial={{ opacity: 0, y: 50 }}
+        animate={sectionInView ? { opacity: 1, y: 0 } : {}}
+        transition={{ duration: 0.8 }}
+        className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52"
+      >
         {/* Decorative Circles */}
         <div className="absolute hidden md:flex top-1 right-24 flex-col items-end space-y-4">
-          <img src={circle1} alt="Circle 1" className="w-auto h-auto" />
+          <motion.img
-          <img src={circle2} alt="Circle 2" className="w-auto h-auto" />
+            src={circle1} alt="Circle 1"
+            className="w-auto h-auto"
+            initial={{ opacity: 0, scale: 0.5 }}
+            animate={sectionInView ? { opacity: 1, scale: 1 } : {}}
+            transition={{ duration: 0.6, delay: 0.3 }}
+          />
+          <motion.img
+            src={circle2} alt="Circle 2"
+            className="w-auto h-auto"
+            initial={{ opacity: 0, scale: 0.5 }}
+            animate={sectionInView ? { opacity: 1, scale: 1 } : {}}
+            transition={{ duration: 0.6, delay: 0.5 }}
+          />
         </div>
 
         {/* Image Section */}
-        <div className="relative w-full md:w-1/2 p-5 flex justify-center md:ml-14 md:justify-start">
+        <motion.div
+          ref={textRef}
+          className="relative w-full md:w-1/2 p-5 flex justify-center md:ml-14 md:justify-start"
+          initial={{ opacity: 0, x: -50 }}
+          animate={textInView ? { opacity: 1, x: 0 } : {}}
+          transition={{ duration: 0.8 }}
+        >
           <img
             src={imgLeft}
             alt="Woman with Tablet"
             className="w-[300px] h-auto md:w-[654.5px] md:h-[609.67px]"
           />
-        </div>
+        </motion.div>
 
         {/* 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">
+        <motion.div
+          ref={listRef}
+          className="w-full md:w-[40%] p-6 md:p-10 flex flex-col items-center md:items-start md:mr-28 text-center md:text-left"
+          initial={{ opacity: 0, x: 50 }}
+          animate={listInView ? { opacity: 1, x: 0 } : {}}
+          transition={{ duration: 0.8, delay: 0.3 }}
+        >
           <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
@@ -29,35 +67,51 @@ function Kenapa() {
             memberikan wawasan berbasis data yang akurat.
           </p>
           <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">
+            {[
+              "Automasi proses untuk mengurangi biaya dan meningkatkan produktivitas.",
+              "Analisis data real-time untuk pengambilan keputusan yang lebih tepat.",
+              "Menciptakan interaksi pelanggan yang lebih relevan dan berkesan.",
+              "Verifikasi dan autentikasi berbasis AI yang memperkuat keamanan data."
+            ].map((text, index) => (
+              <motion.li
+                key={index}
+                className="flex items-center"
+                initial={{ opacity: 0, x: -20 }}
+                animate={listInView ? { opacity: 1, x: 0 } : {}}
+                transition={{ duration: 0.6, delay: index * 0.2 }}
+              >
                 <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.
+                {text}
-            </li>
+              </motion.li>
-            <li className="flex items-center">
+            ))}
-              <img src={chek2} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
-              Analisis data real-time untuk pengambilan keputusan yang lebih tepat.
-            </li>
-            <li className="flex items-center">
-              <img src={chek2} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
-              Menciptakan interaksi pelanggan yang lebih relevan dan berkesan.
-            </li>
-            <li className="flex items-center">
-              <img src={chek2} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
-              Verifikasi dan autentikasi berbasis AI yang memperkuat keamanan data.
-            </li>
           </ul>
 
-          <div className="flex flex-col md:flex-row mt-8 md:mt-20 space-y-4 md:space-y-0 md:space-x-10 w-full">
+          <div ref={buttonRef} className="flex flex-col md:flex-row mt-8 md:mt-20 space-y-4 md:space-y-0 md:space-x-10 w-full">
-            <button className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-customRed text-customRed md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition">
+          <Link to={""} className="w-full md:w-[245px]">
+            <motion.button
+              className="flex items-center justify-center w-full md:w-[245px] md:h-[62px] h-[50px]  border-2 border-customRed text-customRed md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition"
+              initial={{ opacity: 0, scale: 0.8 }}
+              animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
+              transition={{ duration: 0.5, delay: 0.8 }}
+            >
               <img src={waIcon} alt="WhatsApp Icon" className="mr-2 w-4 h-4 md:w-[30px] md:h-[30px]" />
               Konsultasi Gratis
-            </button>
+            </motion.button>
-            <button className="w-full md:w-[276px] h-[50px] md:h-[70px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white md:text-xl font-medium rounded-[14px] hover:opacity-90 transition">
+          </Link>
+            <Link to={"/Contact#form"} className="w-full md:w-[245px]">
+              <motion.button
+                className="flex items-center justify-center w-full  h-[50px] md:w-[245px] md:h-[62px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white md:text-xl font-medium rounded-[14px] hover:opacity-90 transition"
+                initial={{ opacity: 0, scale: 0.8 }}
+                animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
+                transition={{ duration: 0.5, delay: 1 }}
+              >
                 Coba Sekarang
-            </button>
+              </motion.button>
-          </div>
+            </Link>
-        </div>
           </div>
+
+        </motion.div>
+      </motion.div>
     </div>
   );
 }

src/components/beranda/MasaDepan.jsx

@@ -1,40 +1,72 @@
 import React from "react";
+import { motion } from "framer-motion";
 import { waIcon } from "../../assets";
+import { Link } from "react-router-dom";
+
 function MasaDepan() {
   return (
     <>
-      <div className="flex flex-col items-center justify-center text-center w-full h-[65vh] -mt-3">
       {/* Tagline Section */}
+      <motion.div
+        initial={{ opacity: 0, y: 50 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 1.2, ease: "easeOut" }}
+        className="flex flex-col items-center justify-center text-center w-full h-[65vh] -mt-3"
+      >
         <div className="mb-5">
           <div className="flex flex-col sm:flex-row items-center justify-center gap-2 p-4">
-            <span className="flex items-center justify-center bg-[#CA2B68] text-white font-semibold text-2xl rounded-2xl w-48 h-12">
+            <motion.span
+              initial={{ scale: 0.8, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              transition={{ duration: 1.2, ease: "easeOut" }}
+              className="flex items-center justify-center bg-[#CA2B68] text-white font-semibold text-2xl rounded-2xl w-48 h-12"
+            >
               #Rekan AI
-            </span>
+            </motion.span>
-            <h1 className="text-2xl sm:text-[32px] font-semibold text-[#212121]">
+            <motion.h1
+              initial={{ opacity: 0, x: -50 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 1.2, ease: "easeOut" }}
+              className="text-2xl sm:text-[32px] font-semibold text-[#212121]"
+            >
               Masa Depan Bisnis, Dimulai Hari Ini
-            </h1>
+            </motion.h1>
           </div>
-          <p className="text-base sm:text-xl text-customBlack-600 md:max-w-[80%] md:ml-24 mt-2 leading-relaxed px-4 sm:px-0">
+          <motion.p
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 1.2, ease: "easeOut", delay: 0.3 }}
+            className="text-base sm:text-xl text-customBlack-600 md:max-w-[80%] md:ml-24 mt-2 leading-relaxed px-4 sm:px-0"
+          >
             Bersama Rekan AI, bawa bisnis Anda menuju masa depan yang lebih
             cerdas, efisien, dan kompetitif.
-          </p>
+          </motion.p>
         </div>
+      </motion.div>
 
-
-      </div>
       {/* Button Section */}
-      <div className="flex flex-col justify-center md:-mt-32 md:mb-56 sm:flex-row gap-6 sm:gap-12 -mt-10 mb-20 px-4 sm:px-0">
+      <motion.div
-    <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]">
+        initial={{ opacity: 0, y: 50 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        transition={{ duration: 1.2, ease: "easeOut" }}
+        viewport={{ once: false, amount: 0.2 }}
+        className="flex flex-col justify-center md:-mt-32 md:mb-56 sm:flex-row gap-6 sm:gap-12 -mt-10 mb-20 px-4 sm:px-0"
+      >
+        <motion.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-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
           Konsultasi Gratis
-    </button>
+        </motion.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">
+        <Link to={"/Contact#form"}>
+          <motion.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>
+          </motion.button>
-</div>
+        </Link>
-
+      </motion.div>
     </>
-
   );
 }
 

src/components/beranda/Mendukung.jsx

@@ -1,7 +1,11 @@
 import React from 'react';
+import { motion } from 'framer-motion';
+import { useInView } from 'react-intersection-observer';
 import { imgLeft1, imgLeft2, imgLeft3, imgRight } from '../../assets';
 
 function Mendukung() {
+  const { ref, inView } = useInView({ triggerOnce: false, threshold: 0.2 });
+
   const items = [
     { id: 1, image: imgLeft1, title: 'Personal' },
     { id: 2, image: imgLeft2, title: 'UMKM' },
@@ -9,9 +13,22 @@ function Mendukung() {
   ];
 
   return (
-    <div className="flex flex-col md:flex-row items-center justify-between gap-4 h-auto md:h-screen px-6 md:px-32 py-8 md:py-0" id="solusi2">
+    <motion.div 
+      ref={ref}
+      initial={{ opacity: 0 }} 
+      animate={inView ? { opacity: 1 } : { opacity: 0 }} 
+      transition={{ duration: 1 }}
+      className="container mx-auto flex flex-col md:flex-row items-center justify-between gap-4 h-auto md:h-screen px-6 md:px-32 py-8 md:py-0" 
+      id="solusi2"
+    >
       {/* Left Content */}
-      <div className="flex flex-col justify-center w-full md:w-[45%] space-y-8 order-2 md:order-1">
+      <motion.div 
+        ref={ref}
+        initial={{ x: -50, opacity: 0 }} 
+        animate={inView ? { x: 0, opacity: 1 } : { x: -50, opacity: 0 }} 
+        transition={{ duration: 1 }}
+        className="flex flex-col justify-center w-full md:w-[45%] space-y-8 order-2 md:order-1"
+      >
         <p className="text-[24px] md:text-[32px] font-semibold text-customBlack text-left md:text-left">
           Solusi Mendukung Bisnis di Setiap
           <br />
@@ -22,30 +39,41 @@ function Mendukung() {
         </p>
 
         <div className="flex flex-col md:flex-row justify-center md:justify-between gap-6">
-          {items.map((item) => (
+          {items.map((item, index) => (
-            <div key={item.id} className="flex flex-col items-center w-full md:w-auto md:mt-5">
+            <motion.div 
+              key={item.id} 
+              ref={ref}
+              initial={{ y: 50, opacity: 0 }} 
+              animate={inView ? { y: 0, opacity: 1 } : { y: 50, opacity: 0 }} 
+              transition={{ duration: 0.8, delay: index * 0.2 }}
+              className="flex flex-col items-center w-full md:w-auto md:mt-5"
+            >
               {/* Image */}
               <img
                 src={item.image}
                 alt={item.title}
-                className="w-[190px] h-[150px] sm:w-[150px] sm:h-[150px] md:w-[223px] md:h-[223px] rounded-lg"
+                className="w-[190px] h-[150px] sm:w-[150px] sm:h-[150px] md:w-[190px] md:h-[200px] rounded-lg"
               />
               {/* Title */}
-              <p className="bg-[#5B59E8] text-white text-center rounded-lg shadow-md w-[190px] sm:w-[150px] md:w-[223px] h-10 flex items-center justify-center text-sm font-bold mt-4">
+              <p className="bg-[#5B59E8] text-white text-center rounded-lg shadow-md w-[190px] sm:w-[150px] md:w-[190px] h-10 flex items-center justify-center text-sm font-bold mt-4">
                 {item.title}
               </p>
-            </div>
+            </motion.div>
           ))}
         </div>
-
+      </motion.div>
-      </div>
 
       {/* Right Content */}
-      <div className="w-full md:w-2/5 mt-8 md:mt-0 order-1 md:order-2">
+      <motion.div 
+        ref={ref}
+        initial={{ x: 50, opacity: 0 }} 
+        animate={inView ? { x: 0, opacity: 1 } : { x: 50, opacity: 0 }} 
+        transition={{ duration: 1 }}
+        className="w-full md:w-2/5 mt-8 md:mt-0 order-1 md:order-2"
+      >
         <img src={imgRight} alt="Image Right" className="w-auto h-auto" />
-      </div>
+      </motion.div>
-    </div>
+    </motion.div>
-
   );
 }
 

src/components/beranda/Mitra.jsx

@@ -78,9 +78,9 @@ function Mitra() {
     useEffect(() => {
         const interval = setInterval(() => {
             handleNext();
-        }, 8900); // Slider bergerak setiap 4 detik
+        }, 8900); 
 
-        return () => clearInterval(interval); // Membersihkan interval saat komponen unmount
+        return () => clearInterval(interval);
     }, [currentIndex]);
 
     return (

src/components/beranda/Solusi.jsx

@@ -1,71 +1,129 @@
-import {card1,card2,card3,card4,chek,} from '../../assets';
+import { card1, card2, card3, card4, chek } from "../../assets"
+import { motion } from "framer-motion"
+import { useState, useEffect, useRef } from "react"
 
+// Custom hook untuk menggunakan Intersection Observer
+const useIntersectionObserver = (options = {}) => {
+  const [isIntersecting, setIsIntersecting] = useState(false)
+  const ref = useRef(null)
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsIntersecting(entry.isIntersecting)
+      },
+      {
+        threshold: 0.5, // Ketika 50% elemen terlihat
+        ...options,
+      }
+    )
+
+    if (ref.current) {
+      observer.observe(ref.current)
+    }
+
+    return () => {
+      if (ref.current) {
+        observer.unobserve(ref.current)
+      }
+    }
+  }, [options])
+
+  return [ref, isIntersecting]
+}
 
 function Solusi() {
   const cards = [
     {
       image: card1,
-      description: 'Rekan HR menghadirkan solusi automasi untuk proses HR, mulai dari rekrutmen hingga manajemen kinerja. Platform ini membantu perusahaan meningkatkan efisiensi administrasi dan kepuasan karyawan melalui integrasi AI.',
+      description:
-      features: ['Automasi Proses HR', 'Manajemen Karyawan'],
+        "Rekan HR menghadirkan solusi automasi untuk proses HR, mulai dari rekrutmen hingga manajemen kinerja. Platform ini membantu perusahaan meningkatkan efisiensi administrasi dan kepuasan karyawan melalui integrasi AI.",
+      features: ["Automasi Proses HR", "Manajemen Karyawan"],
     },
     {
       image: card2,
-      description: 'Rekan Doku adalah platform digital untuk autentikasi dan pengelolaan dokumen yang aman dan efisien. Dengan fitur e-Meterai dan e-Signature, Rekan Doku memastikan dokumen sah secara hukum dan terorganisir dengan baik.',
+      description:
-      features: ['Autentikasi dokumen', 'Meterai dan Tanda Tangan Digital'],
+        "Rekan Doku adalah platform digital untuk autentikasi dan pengelolaan dokumen yang aman dan efisien. Dengan fitur e-Meterai dan e-Signature, Rekan Doku memastikan dokumen sah secara hukum dan terorganisir dengan baik.",
+      features: ["Autentikasi dokumen", "Meterai dan Tanda Tangan Digital"],
     },
     {
       image: card3,
-      description: 'Rekan LLM memanfaatkan kecerdasan buatan berbasis model bahasa besar (Large Language Model) untuk menganalisis data. Solusi ini mempercepat pengambilan keputusan strategis.',
+      description:
-      features: ['(Large Language Model) System', 'Virtual Assistant'],
+        "Rekan LLM memanfaatkan kecerdasan buatan berbasis model bahasa besar (Large Language Model) untuk menganalisis data. Solusi ini mempercepat pengambilan keputusan strategis.",
+      features: ["(Large Language Model) System", "Virtual Assistant"],
     },
     {
       image: card4,
-      description: 'Rekan Veri menyediakan layanan verifikasi data secara instan dan akurat untuk berbagai kebutuhan bisnis. Rekan Veri membantu memastikan keaslian informasi pelanggan dan memperkuat keamanan transaksi digital.',
+      description:
-      features: ['Verifikasi Data dan Dokumen', 'Keaslian Informasi Pelanggan'],
+        "Rekan Veri menyediakan layanan verifikasi data secara instan dan akurat untuk berbagai kebutuhan bisnis. Rekan Veri membantu memastikan keaslian informasi pelanggan dan memperkuat keamanan transaksi digital.",
+      features: ["Verifikasi Data dan Dokumen", "Keaslian Informasi Pelanggan"],
     },
-  ];
+  ]
 
   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 md:-mt-48">
+      <div className="text-center mb-12 md:-mt-48 px-4">
-        <div className="flex flex-col md:flex-row items-center justify-center gap-4">
+        <motion.div
+          className="flex flex-col md:flex-row items-center justify-center gap-4"
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 1 }}
+        >
           <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">
             #Rekan AI
           </span>
-        </div>
+        </motion.div>
-        <p className="text-customBlack md:text-[20px] mt-4 md:max-w-[85%] md:ml-24 text-center items-center">
+        <motion.p
-          Kami menyediakan berbagai produk berbasis AI yang dirancang khusus untuk mendukung bisnis Anda dari berbagai aspek.
+          className="text-customBlack md:text-[20px] mt-4 md:max-w-[85%] mx-auto text-center"
-        </p>
+          initial={{ opacity: 0 }}
-      </div>
+          animate={{ opacity: 1 }}
-
+          transition={{ delay: 0.5, duration: 1 }}
-
-      <div className="mt-24 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
-        {cards.map((card, index) => (
-          <div
-            key={index}
-            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" />
+          Kami menyediakan berbagai produk berbasis AI yang dirancang khusus untuk mendukung bisnis Anda dari berbagai
-            <p className="text-customBlack text-left mt-4 flex-1">{card.description}</p>
+          aspek.
-            <ul className="text-left space-y-4 mb-8">
+        </motion.p>
+      </div>
+
+      <div className="mt-24 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 lg:gap-8 px-4 md:px-6 lg:px-8">
+        {cards.map((card, index) => {
+          const [ref, isIntersecting] = useIntersectionObserver({
+            threshold: 0.5, // Set threshold when 50% of the element is visible
+          })
+
+          return (
+            <motion.div
+              key={index}
+              ref={ref}
+              className="bg-customWhite rounded-xl border p-4 md:p-6 flex flex-col items-center w-full max-w-[350px] mx-auto min-h-[500px]"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: isIntersecting ? 1 : 0, y: isIntersecting ? 0 : 20 }}
+              transition={{ delay: index * 0.3 + 0.5, duration: 0.5 }}
+            >
+              <img
+                src={card.image || "/placeholder.svg"}
+                alt={`Card ${index + 1}`}
+                className="w-24 h-32 md:w-32 md:h-40 lg:w-40 lg:h-48 object-contain mb-4 md:mb-6"
+              />
+              <p className="text-customBlack text-left mt-2 md:mt-4 flex-grow text-sm md:text-base">
+                {card.description}
+              </p>
+              <ul className="text-left space-y-2 md:space-y-4 my-4 md:my-6 w-full min-h-[80px]">
                 {card.features.map((feature, i) => (
-                <li key={i} className="flex items-center gap-2">
+                  <li key={i} className="flex items-center gap-2 text-sm md:text-base">
-                  <img src={chek} alt="Check" className="mr-2 w-auto h-auto" /> {feature}
+                    <img src={chek || "/placeholder.svg"} alt="Check" className="w-4 h-4 md:w-5 md:h-5" /> {feature}
                   </li>
                 ))}
               </ul>
-            <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">
+              <button className="w-full h-12 md:h-14 bg-white border border-blue-600 text-customBlue font-medium py-2 px-4 rounded-[18px] hover:bg-blue-600 hover:text-white transition duration-300 text-sm md:text-base">
                 Selengkapnya <span>&rarr;</span>
               </button>
+            </motion.div>
+          )
+        })}
       </div>
-        ))}
-      </div>
-
-
-
     </section>
-  );
+  )
 }
 
-export default Solusi;
+export default Solusi

src/components/beranda/WhatsAppButon.jsx

@@ -2,7 +2,7 @@ import { waButton } from "../../assets";
 
 const WhatsAppButton = () => {
   return (
-    <div className="fixed bottom-2 right-2 md:right-16 flex justify-center items-center w-16 h-16 md:w-20 md:h-20 rounded-full z-50 cursor-pointer border-4 border-[#6950DA] bg-gradient-to-l from-[#FD66B9] to-[#A162F9] m-[10px]">
+    <div className="fixed bottom-2 right-2 md:right-5 flex justify-center items-center w-16 h-16 md:w-16 md:h-16 rounded-full z-50 cursor-pointer border-4 border-[#6950DA] bg-gradient-to-l from-[#FD66B9] to-[#A162F9] m-[10px]">
       <img
         className="w-10 h-10 md:w-auto md:h-auto"
         src={waButton}

src/components/contact/BottomCTA.jsx

@@ -1,40 +1,47 @@
 import { wagreen } from "./asset"; // Import gambar WhatsApp untuk ikon
+import { motion } from "framer-motion";
 
 const BottomCTA = () => {
   return (
-    <section className="w-full bg-white text-center py-10 mb-[113px]">
+    <motion.section 
-      {/* Bagian ini untuk menampilkan teks yang memberi tahu pengguna bahwa mereka bisa menghubungi jika masih ada pertanyaan */}
+      initial={{ opacity: 0, y: 50 }} 
+      whileInView={{ opacity: 1, y: 0 }} 
+      transition={{ duration: 1.2, ease: "easeOut" }} 
+      viewport={{ once: false, amount: 0.2 }}
+      className="w-full bg-white text-center py-10 mb-[113px]"
+    >
       <div className="flex flex-wrap justify-center gap-2">
         <h3 className="text-[#212121] text-center text-[32px] font-[550] leading-[48px] tracking-[0.005em]">
           Masih punya pertanyaan seputar
         </h3>
-
         <h3 className="text-[24px] sm:text-xl md:text-2xl text-[#212121] mb-3">
-          {/* Menampilkan tag #Rekan AI dengan background warna dan teks putih */}
+          <span className="bg-[#dc0168] rounded-[18px] text-[#ffffff] px-9 py-2 inline-block mr-[5px]">
-          <span className="bg-[#dc0168] bg-[length:100%] rounded-[18px] text-[#ffffff] px-9 py-2 inline-block mr-[5px]">
             #Rekan AI
           </span>
           <span className="font-semibold ml-1">?</span>
         </h3>
       </div>
 
-      {/* Pesan yang memberi tahu pengguna untuk menghubungi jika pertanyaan belum terjawab */}
+      <p className="text-[20px] font-normal leading-[30px] tracking-[0.005em] text-center text-[#212121] mb-5 mx-auto">
-      <p className=" text-[20px] font-normal leading-[30px] tracking-[0.005em] text-center text-[#212121] mb-5 mx-auto">
+        Jika pertanyaan Anda belum terjawab di atas, jangan ragu untuk menghubungi kami melalui formulir<br />
-        Jika pertanyaan Anda belum terjawab di atas, jangan ragu untuk menghubungi kami melalui formulir<br />kontak atau email. Kami dengan senang hati akan membantu!
+        kontak atau email. Kami dengan senang hati akan membantu!
       </p>
 
-      {/* Bagian tombol CTA */}
       <div className="flex flex-col justify-center md:mt-12 sm:flex-row gap-6 sm:gap-12 sm:mt-1 px-4 sm: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-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
+        <motion.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-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]"
+        >
           <img src={wagreen} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
           Konsultasi Gratis
-        </button>
+        </motion.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-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
-          Coba Sekarang
-        </button>
-      </div>
         
-    </section>
+        <motion.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-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90"
+        >
+          Coba Sekarang
+        </motion.button>
+      </div>
+    </motion.section>
   );
 };
 

src/components/contact/CustomerService.jsx

@@ -1,13 +1,37 @@
 import { email, phone, customer } from "./asset";
+import { motion } from "framer-motion";
+import { useEffect } from "react";
+import { useInView } from "react-intersection-observer";
 
 const CustomerService = () => {
+    const { ref: leftRef, inView: leftInView } = useInView({ triggerOnce: false, threshold: 0.2 });
+    const { ref: rightRef, inView: rightInView } = useInView({ triggerOnce: false, threshold: 0.2 });
+
+    const fadeInLeft = {
+        hidden: { opacity: 0, x: -100 },
+        visible: { opacity: 1, x: 0, transition: { duration: 0.8 } },
+    };
+
+    const fadeInRight = {
+        hidden: { opacity: 0, x: 100 },
+        visible: { opacity: 1, x: 0, transition: { duration: 0.8 } },
+    };
+
     return (
-        <section className="main-container mt-[180px] mb-16  md:mt-20 flex flex-col md:flex-row items-center px-5 py-10 max-w-7xl mx-auto md:mb-[150px] 2xl:px-20 2xl:gap-20">
+        <section className="main-container mt-[180px] mb-16 md:mt-20 flex flex-col md:flex-row items-center px-5 py-10 max-w-7xl mx-auto md:mb-[100px] 2xl:px-20 2xl:gap-20">
             {/* LEFT SECTION - Informasi */}
-            <div className="w-full md:w-[650px] 2xl:w-[750px] h-auto gap-[29px] text-left md:mt-0 pl-10">
+            <motion.div
+                ref={leftRef}
+                className="w-full md:w-[650px] 2xl:w-[750px] h-auto gap-[29px] text-left md:mt-0 lg: 2xl:ml-[-165px]"
+                initial="hidden"
+                animate={leftInView ? "visible" : "hidden"}
+                variants={fadeInLeft}
+                key="left-content"
+            >
+
                 <div className="mb-5">
                     <h2 className="text-[#212121] text-[28px] md:text-[32px] font-[550] leading-[36px] md:leading-[48px] 2xl:leading-[52px]">
-                        Kami Siap Membantu Bisnis Anda
+                        Kami Siap Membantu Bisnis Anda <br />
                         Lebih Maju!
                     </h2>
                 </div>
@@ -50,16 +74,23 @@ const CustomerService = () => {
                         </div>
                     </div>
                 </div>
-            </div>
+            </motion.div>
 
             {/* RIGHT SECTION - Gambar */}
-            <div className=" flex justify-center md:justify-end items-center pr-10">
+            <motion.div
+                ref={rightRef}
+                className="flex justify-center md:justify-end items-center md:mr-[-70px]"
+                initial="hidden"
+                animate={rightInView ? "visible" : "hidden"}
+                variants={fadeInRight}
+                key="right-content"
+            >
                 <img
                     src={customer}
                     alt="Customer Service"
                     className="w-full h-auto md:w-auto md:h-auto"
                 />
-            </div>
+            </motion.div>
         </section>
     );
 };

src/components/contact/FAQSection.jsx

@@ -1,19 +1,41 @@
-import { useState } from "react";
+"use client"
+
+import { useState, useEffect } from "react"
+import { useLocation } from "react-router-dom"
+import { motion, useAnimation } from "framer-motion"
+import { useInView } from "react-intersection-observer"
 
 const FAQ = () => {
-  // State untuk menyimpan indeks pertanyaan yang sedang dibuka
+  const location = useLocation()
-  // Jika tidak ada pertanyaan yang terbuka, nilai adalah null
+  const controls = useAnimation()
-  const [openQuestion, setOpenQuestion] = useState(null);
+  const [ref, inView] = useInView({
+    threshold: 0.1,
+    triggerOnce: false,
+  })
+
+  useEffect(() => {
+    if (inView) {
+      controls.start("visible")
+    } else {
+      controls.start("hidden")
+    }
+  }, [controls, inView])
+
+  useEffect(() => {
+    if (location.hash) {
+      const element = document.querySelector(location.hash)
+      if (element) {
+        element.scrollIntoView({ behavior: "smooth" })
+      }
+    }
+  }, [location])
+
+  const [openQuestion, setOpenQuestion] = useState(null)
 
-  // Fungsi untuk membuka atau menutup pertanyaan berdasarkan indeks
-  // Jika pertanyaan yang sama diklik lagi, tutup pertanyaan tersebut
   const toggleQuestion = (index) => {
-    // Cek apakah pertanyaan yang sama diklik
+    setOpenQuestion(openQuestion === index ? null : index)
-    // Jika iya, tutup (set openQuestion ke null), jika tidak, buka pertanyaan tersebut
+  }
-    setOpenQuestion(openQuestion === index ? null : index);
-  };
 
-  // Data FAQ yang berisi array objek dengan pertanyaan dan jawaban
   const faqData = [
     {
       question: "Apa itu Rekan AI?",
@@ -108,11 +130,33 @@ const FAQ = () => {
         </p>
       ),
     },
-  ];
+  ]
+
+  // Animation variants for the container
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.5,
+      },
+    },
+  }
+
+  // Animation variants for each FAQ item
+  const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 1,
+      },
+    },
+  }
 
   return (
-    <div className="text-[#212121] max-w-4xl mx-auto px-4 py-6 text-center ">
+    <div className="text-[#212121] max-w-4xl mx-auto px-4 py-6 text-center " id="faq" ref={ref}>
-      {/* Judul halaman FAQ */}
       <div className="mt-[111px]">
         <h1 className="text-[32px] font-[505] leading-[48px] tracking-[0.005em] text-center mb-4">
           Frequently Asked Questions
@@ -122,36 +166,38 @@ const FAQ = () => {
         </h2>
       </div>
 
-      {/* Bagian FAQ */}
+      <motion.div
-      <div className="space-y-[22px] mb-[110px] mt-[60px]">
+        className="space-y-[22px] mb-[110px] mt-[60px]"
-        {faqData.map((item, index) => (
+        variants={containerVariants}
-          <div
+        initial="hidden"
-            key={index}
+        animate={controls}
-            className="text-[20px] border border-[#5B59E8] p-[5px] rounded-[12px] overflow-hidden "
+      >
+        {faqData.map((item, index) => (
+          <motion.div
+            key={index}
+            className="text-[20px] border border-[#5B59E8] p-[5px] rounded-[12px] overflow-hidden"
+            variants={itemVariants}
           >
-            {/* Bagian untuk menampilkan pertanyaan dan tanda buka/tutup */}
             <div
               className={`flex justify-between items-center cursor-pointer bg-white ml-4 ${
-                // Jika pertanyaan ini dibuka, beri highlight
                 openQuestion === index ? "text-blue-500" : ""
               }`}
-              onClick={() => toggleQuestion(index)} // Ketika pertanyaan diklik, panggil toggleQuestion
+              onClick={() => toggleQuestion(index)}
             >
               <span className="font-[550]">{item.question}</span>
-              <span className="text-[39px] text-[#845FF1] mr-4">{openQuestion === index ? "–" : "+"}</span> {/* Tampilkan tanda buka atau tutup */}
+              <span className="text-[39px] text-[#845FF1] mr-4">{openQuestion === index ? "–" : "+"}</span>
             </div>
 
-            {/* Bagian untuk menampilkan jawaban jika pertanyaan ini terbuka */}
             {openQuestion === index && (
               <div className="p-4 text-[16px] ml-4 text-left bg-white text-sm">
                 {item.answer}
               </div>
             )}
-          </div>
+          </motion.div>
         ))}
+      </motion.div>
     </div>
-    </div>
+  )
-  );
+}
-};
 
-export default FAQ;
+export default FAQ

src/components/contact/Footer.jsx

@@ -35,13 +35,7 @@ function Footer() {
               </span>
             </p>
           </div>
-          <p className="mb-[39px] text-[18px] w-full sm:w-auto">
+
-            <span className="block md:inline">Jl. Anggrek No.6, Sawah Lama, Kec.</span>
-            <br className="hidden md:block" />
-            <span className="block md:inline">Ciputat, Kota Tangerang Selatan, Banten</span>
-            <br className="hidden md:block" />
-            <span className="block md:inline">15413</span>
-          </p>
           <p className="mb-4 text-[18px]">Lebih dekat dengan Kami</p>
           <div className="flex space-x-3">
             {/* Tautan ke media sosial */}
@@ -73,7 +67,7 @@ function Footer() {
           <h4 className="text-base font-semibold mb-4">Solusi Kami</h4>
           <ul className="space-y-4 text-[18px]">
             <li>Personal</li>
-            <li>UMKM</li>
+            <li>Startup</li>
             <li>Corporate Business</li>
           </ul>
         </div>

src/components/contact/FormSection.jsx

@@ -1,100 +1,160 @@
-import { img10 } from "./asset";
+"use client"
+
+import { useEffect, useState } from "react"
+import { useLocation } from "react-router-dom"
+import ReCAPTCHA from "react-google-recaptcha"
+import { motion, useAnimation } from "framer-motion"
+import { useInView } from "react-intersection-observer"
+import useRecaptcha from "./Recaptcha/useRecaptcha"
+import { img10 } from "./asset"
 
 const ContactForm = () => {
+  const { capchaToken, handleRecaptcha } = useRecaptcha()
+  const location = useLocation()
+  const controls = useAnimation()
+  const [ref, inView] = useInView({
+    threshold: 0.1, // Trigger when 10% of the element is in view
+  })
+  const [email, setEmail] = useState("");
+  const [error, setError] = useState("");
+  const [isValid, setIsValid] = useState(false); // Untuk validasi tombol submit
+
+  useEffect(() => {
+    if (inView) {
+      controls.start("visible")
+    } else {
+      controls.start("hidden")
+    }
+  }, [controls, inView])
+
+  useEffect(() => {
+    if (location.hash) {
+      const element = document.querySelector(location.hash)
+      if (element) {
+        element.scrollIntoView({ behavior: "smooth" })
+      }
+    }
+  }, [location])
+
+  const textVariants = {
+    hidden: { opacity: 0, x: -50 },
+    visible: { opacity: 1, x: 0, transition: { duration: 0.8, ease: "easeOut" } },
+  }
+
+  const formVariants = {
+    hidden: { opacity: 0, y: 50 },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut" } },
+  }
+
+  const handleChange = (e) => {
+    const value = e.target.value;
+    setEmail(value);
+
+    // Regex untuk memastikan hanya 3 huruf setelah titik
+    const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{3}$/;
+
+    if (!emailPattern.test(value) && value !== "") {
+      setError("Domain email harus memiliki 3 huruf setelah titik.");
+      setIsValid(false); // Tidak valid, tombol submit dinonaktifkan
+    } else {
+      setError("");
+      setIsValid(true); // Valid, tombol submit bisa digunakan
+    }
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!isValid) {
+      alert("Silakan perbaiki email Anda sebelum mengirim formulir.");
+      return;
+    }
+    alert("Formulir berhasil dikirim!");
+    // Tambahkan logika pengiriman data di sini
+  };
+
   return (
     <div
-      className="flex min-h-screen items-center justify-center p-5 text-white rounded-tl-[80px] rounded-tr-[80px]"
+      className="relative flex min-h-screen w-full items-center justify-center p-5 text-white rounded-tl-[80px] rounded-tr-[80px]"
+      id="form"
       style={{
-        background: `linear-gradient(45deg, #DC016866 15%, rgba(91, 89, 232, 1),rgba(91, 89, 232, 1)), url(${img10})`,
+        background: `linear-gradient(45deg, #DC016866 15%, rgba(91, 89, 232, 1), rgba(91, 89, 232, 1)), url(${img10})`,
         backgroundSize: "cover",
         backgroundPosition: "center",
         backgroundRepeat: "no-repeat",
       }}
+      ref={ref}
     >
-      <div className="flex flex-col lg:flex-row items-start w-full 2xl:max-w-[100%] 2xl:max-h-[100%] sm:mt-[79px] sm:mb-[79px] 2xl:mt-[-125px] 2xl:px-10">
+      <div className="container mx-auto flex flex-col lg:flex-row items-center justify-center gap-8 py-16 px-4 lg:px-8">
-        {/* Bagian Kiri */}
+        {/* Left Section */}
-        <div className="flex-1 p-5 mb-10 lg:mb-0 md:ml-28 2xl:mt-28 md:max-w-[40%]">
+        <motion.div
-          {/* Judul utama */}
+          className="w-full md:mt-[-650px] md:ml-14 lg:w-[50%] space-y-6"
-          <h2 className="text-[32px] font-[550] leading-[48px] tracking-[0.005em] text-left mt-16 mb-[39px] 2xl:text-[36px] 2xl:leading-[52px]">
+          initial="hidden"
-            Isi formulir di samping ini dan kami akan menghubungi Anda secepat
+          animate={controls}
-            mungkin
+          variants={textVariants}
+        >
+          <h2 className="text-2xl md:text-[32px] font-[550] leading-tight md:leading-[48px] tracking-[0.005em] 2xl:text-[36px] 2xl:leading-[52px]">
+            Isi formulir di samping ini dan kami akan menghubungi Anda secepat mungkin
           </h2>
-
+          <p className="text-base md:text-[18px]  font-[400] leading-relaxed md:leading-[30px] tracking-[0.005em] 2xl:text-[20px] 2xl:leading-[34px]">
-          {/* Deskripsi tambahan */}
+            Kami percaya bahwa kolaborasi adalah kunci kesuksesan. Hubungi kami hari ini, dan mari wujudkan masa depan
-          <p className="text-[18px] font-[400] leading-[30px] tracking-[0.005em] text-left mb-6 2xl:text-[20px] 2xl:leading-[34px]">
+            bisnis Anda bersama Rekan AI!
-            Kami percaya bahwa kolaborasi adalah kunci kesuksesan. Hubungi kami
-            hari ini, dan mari wujudkan masa depan bisnis Anda bersama Rekan AI!
           </p>
-        </div>
+        </motion.div>
 
-        {/* Bagian Form */}
+        {/* Form Section */}
-
+        <motion.div className="w-full lg:w-7/12 xl:w-6/12" initial="hidden" animate={controls} variants={formVariants}>
-        <div
+          <div className="bg-white text-[#212121] rounded-[25px] p-6 md:p-[40px] border-[8px] border-[#F086A4] 2xl:px-[60px] 2xl:py-[50px] max-w-[794px] mx-auto">
-          className="bg-white text-[#212121] mt-5  rounded-[25px] md:ml-24 md:mt-52 p-[40px] border-[8px] border-[#F086A4] md:w-[794px] 2xl:px-[60px] 2xl:py-[50px]"
+            <h3 className="text-2xl md:text-[32px] font-[550] mb-4 text-[#212121] 2xl:text-[28px] 2xl:mb-6">
-        >
-
-
-          {/* Judul form */}
-          <h3 className="text-[32px] font-[550] mb-4 text-[#212121] 2xl:text-[28px] 2xl:mb-6">
               Hubungi Tim Terbaik Kami
             </h3>
-          {/* Deskripsi form */}
+            <p className="mb-6 text-[#212121] 2xl:text-[18px]">Silakan isi data diri Anda pada formulir di bawah ini</p>
-          <p className="mb-6 text-[#212121] 2xl:text-[18px]">
-            Silakan isi data diri Anda pada formulir di bawah ini
-          </p>
 
-          {/* Formulir input */}
+            <form className="flex flex-col gap-4">
-          <form className="flex flex-col gap-4 px-2">
-            {/* Input Nama */}
               <div>
                 <label className="text-[#6B5CEA]">Nama (Tanpa Gelar)*</label>
                 <input
                   type="text"
                   placeholder="Masukkan nama Anda"
                   required
+                  maxLength={50}
                   className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
                 />
               </div>
-
-            {/* Input Nomor Telepon */}
               <div>
                 <label className="text-[#6B5CEA]">Nomor Telepon*</label>
                 <input
                   type="tel"
                   placeholder="Masukkan nomor telepon Anda"
                   required
+                  maxLength={20}
                   className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
                   pattern="[0-9]*"
                   onInput={(e) => {
-                  e.target.value = e.target.value.replace(/[^0-9]/g, "");
+                    e.target.value = e.target.value.replace(/[^0-9]/g, "")
                   }}
                 />
               </div>
-
-            {/* Input Email */}
               <div>
               <label className="text-[#6B5CEA]">Email*</label>
                 <input
                   type="email"
+                  value={email}
+                  onChange={handleChange}
                   placeholder="Masukkan email Anda"
                   required
                   className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
                 />
+                {error && <p className="text-red-500 mt-1">{error}</p>}
               </div>
-
-            {/* Input Nama Organisasi */}
               <div>
-              <label className="text-[#6B5CEA]">
+                <label className="text-[#6B5CEA]">Nama Organisasi/Perusahaan</label>
-                Nama Organisasi/Perusahaan
-              </label>
                 <input
                   type="text"
+                  maxLength={50}
                   placeholder="Masukkan nama organisasi/perusahaan Anda"
                   className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
                 />
               </div>
-
-            {/* Dropdown Pilih Kebutuhan */}
               <div className="relative">
                 <label className="text-[#6B5CEA]">Pilih Kebutuhan</label>
                 <select
@@ -106,47 +166,37 @@ const ContactForm = () => {
                   <option value="pelatihan">Pelatihan</option>
                   <option value="pengembangan">Pengembangan</option>
                 </select>
-              {/* Tanda panah kustom */}
                 <div className="absolute inset-y-0 right-5 flex items-center pointer-events-none">
                   <svg
-                  className="w-6 text-[#5B59E8]"
+                    className="w-8 mt-7 text-[#5B59E8]"
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke="currentColor"
                   >
-                  <path
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M19 9l-7 7-7-7"
-                  />
                   </svg>
                 </div>
               </div>
 
-            {/* Checkbox Verifikasi */}
               <div className="flex items-center gap-2">
-              <input
+                <ReCAPTCHA sitekey="6LcIYNYqAAAAAJW_YJRWbBDBGt1gsKwsL9vK1SfW" onChange={handleRecaptcha} />
-                type="checkbox"
-                required
-                className="focus:ring-2 focus:ring-indigo-500"
-              />
-              <span className="text-[#212121]">Saya bukan robot</span>
               </div>
 
-            {/* Tombol Kirim */}
               <button
                 type="submit"
-              className="bg-indigo-500 hover:bg-indigo-600 text-white py-3 px-6 rounded-lg shadow-md transition-all w-[173px] 2xl:w-[200px] 2xl:py-4"
+                className={`bg-[#5B59E0] hover:bg-indigo-700 text-white py-3 px-6 rounded-lg shadow-md transition-all w-[173px] 2xl:w-[200px] 2xl:py-4 ${!isValid ? "opacity-50 cursor-not-allowed" : ""}`}
+                disabled={!isValid || !capchaToken} // Tombol akan dinonaktifkan jika email tidak valid atau captcha belum diisi
               >
                 Kirim Pesan
               </button>
             </form>
           </div>
+        </motion.div>
       </div>
     </div>
-  );
+  )
-};
+}
+
+export default ContactForm
 
-export default ContactForm;

src/components/contact/Recaptcha/useRecaptcha.js

@@ -0,0 +1,23 @@
+import { useState, useRef } from "react";
+
+const useRecaptcha = () => {
+  const [capchaToken, setCapchaToken] = useState(null); // Menyimpan token reCAPTCHA
+  const recaptchaRef = useRef(); // Menggunakan ref untuk reCAPTCHA jika perlu manipulasi lebih lanjut
+
+  // Fungsi untuk menangani perubahan token setelah reCAPTCHA berhasil
+  const handleRecaptcha = (token) => {
+    if (token) {
+      setCapchaToken(token); // Set token jika berhasil
+    } else {
+      setCapchaToken(null); // Reset token jika tidak ada token
+    }
+  };
+
+  return {
+    capchaToken, // Mengembalikan token
+    recaptchaRef, // Referensi reCAPTCHA
+    handleRecaptcha, // Fungsi untuk menangani perubahan token
+  };
+};
+
+export default useRecaptcha;

src/components/solusi/CardCorporate/CardCorporate.jsx

@@ -1,5 +1,36 @@
+import { motion } from "framer-motion";
+import { useEffect, useState, useRef } from "react";
 import { CardCp1, CardCp2, CardCp3 } from "../asset";
 
+const useIntersectionObserver = (options = {}) => {
+  const [isIntersecting, setIsIntersecting] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsIntersecting(entry.isIntersecting);
+      },
+      {
+        threshold: 0.5,
+        ...options,
+      }
+    );
+
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+
+    return () => {
+      if (ref.current) {
+        observer.unobserve(ref.current);
+      }
+    };
+  }, [options]);
+
+  return [ref, isIntersecting];
+};
+
 export default function FeatureCards() {
   const features = [
     {
@@ -24,22 +55,36 @@ export default function FeatureCards() {
 
   return (
     <div className="container mx-auto px-4 py-16 md:mt-[-185px] text-center mb-[-70px]">
-      <h2 className="text-[#212121] text-[32px] font-semibold mb-[91px] mt-[81px]">
+      <motion.h2
+        className="text-[#212121] text-[32px] font-semibold mb-[91px] mt-[81px]"
+        initial={{ opacity: 0, y: -20 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        transition={{ duration: 1 }}
+      >
         Dengan solusi terintegrasi, <span className="text-[#CA2B68]">#Rekan AI</span>, membantu perusahaan tetap unggul dan adaptif di tengah persaingan global.
-      </h2>
+      </motion.h2>
+
       <div className="grid grid-cols-1 md:grid-cols-3 gap-[50px]">
-        {features.map((feature, index) => (
+        {features.map((feature, index) => {
-          <div
+          const [ref, isIntersecting] = useIntersectionObserver();
+          return (
+            <motion.div
               key={index}
+              ref={ref}
               className="px-6 py-12 bg-white rounded-[10px] border shadow-lg transition-shadow duration-300 flex flex-col items-center text-center"
+              initial={{ opacity: 0, y: 20 }}
+              animate={isIntersecting ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
+              transition={{ delay: index * 0.3 + 0.5, duration: 0.5 }}
             >
               <div className="mb-4 relative w-16 h-16">
                 <img src={feature.icon} alt={feature.title} className="object-contain" />
               </div>
               <h3 className="text-[16px] font-semibold mb-3 text-[#212121]">{feature.title}</h3>
               <p className="text-[#212121] text-[14px] leading-relaxed">{feature.description}</p>
-          </div>
+            </motion.div>
-        ))}
+          );
+        })}
       </div>
     </div>
   );

src/components/solusi/CardPersonal/CardPersonal.jsx

@@ -1,5 +1,36 @@
+import { motion } from "framer-motion";
+import { useEffect, useState, useRef } from "react";
 import { card1, card2, card3 } from "../asset";
 
+const useIntersectionObserver = (options = {}) => {
+  const [isIntersecting, setIsIntersecting] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsIntersecting(entry.isIntersecting);
+      },
+      {
+        threshold: 0.5,
+        ...options,
+      }
+    );
+
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+
+    return () => {
+      if (ref.current) {
+        observer.unobserve(ref.current);
+      }
+    };
+  }, [options]);
+
+  return [ref, isIntersecting];
+};
+
 export default function FeatureCards() {
   const features = [
     {
@@ -24,22 +55,36 @@ export default function FeatureCards() {
 
   return (
     <div className="container mx-auto px-4 py-16 md:mt-[-185px] text-center mb-[-70px]">
-      <h2 className="text-[#212121] text-[32px] font-semibold mb-[91px] mt-[81px]">
+      <motion.h2
+        className="text-[#212121] text-[32px] font-semibold mb-[91px] mt-[81px]"
+        initial={{ opacity: 0, y: -20 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        transition={{ duration: 1 }}
+      >
         Dengan <span className="text-[#CA2B68]">#Rekan AI</span>, Anda bisa menghemat waktu, meningkatkan produktivitas, dan mendapatkan solusi yang benar-benar relevan dengan kebutuhan Anda.
-      </h2>
+      </motion.h2>
+
       <div className="grid grid-cols-1 md:grid-cols-3 gap-[50px]">
-        {features.map((feature, index) => (
+        {features.map((feature, index) => {
-          <div
+          const [ref, isIntersecting] = useIntersectionObserver();
+          return (
+            <motion.div
               key={index}
+              ref={ref}
               className="px-6 py-12 bg-white rounded-[10px] border shadow-lg transition-shadow duration-300 flex flex-col items-center text-center"
+              initial={{ opacity: 0, y: 20 }}
+              animate={isIntersecting ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
+              transition={{ delay: index * 0.3 + 0.5, duration: 0.5 }}
             >
               <div className="mb-4 relative w-16 h-16">
                 <img src={feature.icon} alt={feature.title} className="object-contain" />
               </div>
               <h3 className="text-[16px] font-semibold mb-3 text-[#212121]">{feature.title}</h3>
               <p className="text-[#212121] text-[14px] leading-relaxed">{feature.description}</p>
-          </div>
+            </motion.div>
-        ))}
+          );
+        })}
       </div>
     </div>
   );

src/components/solusi/CardStartup/CardStartup.jsx

@@ -1,5 +1,36 @@
+import { motion } from "framer-motion";
+import { useEffect, useState, useRef } from "react";
 import { CardStart1, CardStart2, CardStart3 } from "../asset";
 
+const useIntersectionObserver = (options = {}) => {
+  const [isIntersecting, setIsIntersecting] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsIntersecting(entry.isIntersecting);
+      },
+      {
+        threshold: 0.5,
+        ...options,
+      }
+    );
+
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+
+    return () => {
+      if (ref.current) {
+        observer.unobserve(ref.current);
+      }
+    };
+  }, [options]);
+
+  return [ref, isIntersecting];
+};
+
 export default function FeatureCards() {
   const features = [
     {
@@ -24,22 +55,35 @@ export default function FeatureCards() {
 
   return (
     <div className="container mx-auto px-4 py-16 md:mt-[-185px] text-center mb-[-70px]">
-      <h2 className="text-[#212121] text-[32px] font-semibold mb-[91px] mt-[81px]">
+      <motion.h2
+        className="text-[#212121] text-[32px] font-semibold mb-[91px] mt-[81px]"
+        initial={{ opacity: 0, y: -20 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        transition={{ duration: 1 }}
+      >
         Bersama <span className="text-[#CA2B68]">#Rekan AI</span>, Startup lebih produktif, efisien, dan siap bersaing di era digital.
-      </h2>
+      </motion.h2>
       <div className="grid grid-cols-1 md:grid-cols-3 gap-[50px]">
-        {features.map((feature, index) => (
+        {features.map((feature, index) => {
-          <div
+          const [ref, isIntersecting] = useIntersectionObserver();
+          return (
+            <motion.div
               key={index}
+              ref={ref}
               className="px-6 py-12 bg-white rounded-[10px] border shadow-lg transition-shadow duration-300 flex flex-col items-center text-center"
+              initial={{ opacity: 0, y: 20 }}
+              animate={isIntersecting ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
+              transition={{ delay: index * 0.3 + 0.5, duration: 0.5 }}
             >
               <div className="mb-4 relative w-16 h-16">
                 <img src={feature.icon} alt={feature.title} className="object-contain" />
               </div>
               <h3 className="text-[16px] font-semibold mb-3 text-[#212121]">{feature.title}</h3>
               <p className="text-[#212121] text-[14px] leading-relaxed">{feature.description}</p>
-          </div>
+            </motion.div>
-        ))}
+          );
+        })}
       </div>
     </div>
   );

src/components/solusi/HeadCorporate/HeadCorporate.jsx

@@ -1,11 +1,25 @@
+import { Link } from "react-router-dom";
 import { component11, wagreen, hc } from "../asset";
+import { motion } from "framer-motion";
+import { useInView } from "react-intersection-observer";
 
 export default function HeadCorporate() {
+  const options = { triggerOnce: false, threshold: 0.2 };
+  const { ref: sectionRef, inView: sectionInView } = useInView(options);
+  const { ref: textRef, inView: textInView } = useInView(options);
+  const { ref: buttonRef, inView: buttonInView } = useInView(options);
+
   return (
-    <div className="container  mx-auto px-4 lg:px-6">
+    <div ref={sectionRef} className="container mx-auto px-4 lg:px-6">
       <div className="grid grid-cols-1 lg:grid-cols-2 items-center gap-12 py-8 mt-[200px] lg:mt-[85px]">
         {/* Left Column */}
-        <div className="space-y-6 md:-mt-40 -mt-28 text-center lg:text-left order-1 lg:order-none">
+        <motion.div
+          ref={textRef}
+          className="space-y-6 md:-mt-40 -mt-28 text-center lg:text-left order-1 lg:order-none"
+          initial={{ opacity: 0, x: -50 }}
+          animate={textInView ? { opacity: 1, x: 0 } : {}}
+          transition={{ duration: 0.8 }}
+        >
           {/* Logo and Tagline */}
           <div className="flex items-center lg:justify-start">
             <span className="flex items-center justify-center w-[53.52px] h-[43px] ml-[2px] mb-4">
@@ -25,10 +39,15 @@ export default function HeadCorporate() {
           <p className="text-[20px] lg:text-[18px] text-customBlack mt-7">
             Rekan AI hadir sebagai mitra strategis untuk perusahaan berskala besar, menghadirkan teknologi yang mampu mengoptimalkan proses bisnis, meningkatkan keamanan data, dan mempercepat pengambilan keputusan.
           </p>
-        </div>
+        </motion.div>
 
         {/* Right Column - Hero Image */}
-        <div className="order-2 lg:order-none flex justify-center">
+        <motion.div
+          className="order-2 lg:order-none flex justify-center"
+          initial={{ opacity: 0, x: 50 }}
+          animate={textInView ? { opacity: 1, x: 0 } : {}}
+          transition={{ duration: 0.8 }}
+        >
           <img
             src={hc}
             alt="Hero Illustration"
@@ -36,18 +55,31 @@ export default function HeadCorporate() {
             height={743}
             className="w-full h-auto md:w-[600px] md:h-[600px]"
           />
-        </div>
+        </motion.div>
 
         {/* Buttons - Ensure they come last on mobile */}
-        <div className="flex flex-col sm:flex-row gap-4 md:-mt-96 order-3 lg:order-none">
+        <motion.div
-        <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 font-medium text-base lg:text-lg hover:bg-pink-50 transition-colors">
+          ref={buttonRef}
+          className="flex flex-col sm:flex-row gap-4 md:-mt-96 order-3 lg:order-none"
+          initial={{ opacity: 0, y: 50 }}
+          animate={buttonInView ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.8 }}
+        >
+          <button className="flex items-center justify-center px-6 py-3 border-2 md:w-[245px] md:h-[62px] border-customRed rounded-[14px] text-customRed font-medium text-base lg:text-lg hover:bg-pink-50 transition-colors">
             <img src={wagreen} alt="WhatsApp Icon" width={30} height={30} className="mr-2" />
             Konsultasi Gratis
           </button>
-          <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">
+          <Link to={"/Contact#form"}>
+            <motion.button
+              className="flex items-center justify-center px-6 py-3 rounded-[14px] w-[358px] h-[55px] md:w-[245px] md:h-[62px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-base lg:text-lg hover:opacity-90 transition-opacity"
+              initial={{ opacity: 0, scale: 0.8 }}
+              animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
+              transition={{ duration: 0.5 }}
+            >
               Coba Sekarang
-          </button>
+            </motion.button>
-        </div>
+          </Link>
+        </motion.div>
       </div>
     </div>
   );

src/components/solusi/HeadPersonal/HeadPersonal.jsx

@@ -1,11 +1,25 @@
 import { component11, wagreen, start22 } from "../asset";
+import { Link } from "react-router-dom";
+import { motion } from "framer-motion";
+import { useInView } from "react-intersection-observer";
 
 export default function HeadPersonal() {
+  const options = { triggerOnce: false, threshold: 0.2 };
+  const { ref: sectionRef, inView: sectionInView } = useInView(options);
+  const { ref: textRef, inView: textInView } = useInView(options);
+  const { ref: buttonRef, inView: buttonInView } = useInView(options);
+
   return (
-    <div className="container  mx-auto px-4 lg:px-6">
+    <div ref={sectionRef} className="container mx-auto px-4 lg:px-6">
       <div className="grid grid-cols-1 lg:grid-cols-2 items-center gap-12 py-8 mt-[200px] lg:mt-[85px]">
         {/* Left Column */}
-        <div className="space-y-6 md:-mt-40 -mt-28 text-center lg:text-left order-1 lg:order-none">
+        <motion.div
+          ref={textRef}
+          className="space-y-6 md:-mt-40 -mt-28 text-center lg:text-left order-1 lg:order-none"
+          initial={{ opacity: 0, x: -50 }}
+          animate={textInView ? { opacity: 1, x: 0 } : {}}
+          transition={{ duration: 0.8 }}
+        >
           {/* Logo and Tagline */}
           <div className="flex items-center lg:justify-start">
             <span className="flex items-center justify-center w-[53.52px] h-[43px] ml-[2px] mb-4">
@@ -27,10 +41,15 @@ export default function HeadPersonal() {
             pelajar, atau individu yang mencari kemudahan dalam kehidupan sehari-hari, Rekan AI menawarkan teknologi
             yang mudah digunakan, efisien, dan dapat diandalkan.
           </p>
-        </div>
+        </motion.div>
 
         {/* Right Column - Hero Image */}
-        <div className="order-2 lg:order-none flex justify-center">
+        <motion.div
+          className="order-2 lg:order-none flex justify-center"
+          initial={{ opacity: 0, x: 50 }}
+          animate={textInView ? { opacity: 1, x: 0 } : {}}
+          transition={{ duration: 0.8 }}
+        >
           <img
             src={start22}
             alt="Hero Illustration"
@@ -38,18 +57,31 @@ export default function HeadPersonal() {
             height={743}
             className="w-full h-auto md:w-[600px] md:h-[600px]"
           />
-        </div>
+        </motion.div>
 
         {/* Buttons - Ensure they come last on mobile */}
-        <div className="flex flex-col sm:flex-row gap-4 md:-mt-96 order-3 lg:order-none">
+        <motion.div
-        <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 font-medium text-base lg:text-lg hover:bg-pink-50 transition-colors">
+          ref={buttonRef}
+          className="flex flex-col sm:flex-row gap-4 md:-mt-96 order-3 lg:order-none"
+          initial={{ opacity: 0, y: 50 }}
+          animate={buttonInView ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.8 }}
+        >
+          <button className="flex items-center justify-center px-6 py-3 border-2 md:w-[245px] md:h-[62px] border-customRed rounded-[14px] text-customRed font-medium text-base lg:text-lg hover:bg-pink-50 transition-colors">
             <img src={wagreen} alt="WhatsApp Icon" width={30} height={30} className="mr-2" />
             Konsultasi Gratis
           </button>
-          <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">
+          <Link to={"/Contact#form"}>
+            <motion.button
+              className="flex items-center justify-center px-6 py-3 rounded-[14px] w-[358px] h-[55px] md:w-[245px] md:h-[62px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-base lg:text-lg hover:opacity-90 transition-opacity"
+              initial={{ opacity: 0, scale: 0.8 }}
+              animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
+              transition={{ duration: 0.5 }}
+            >
               Coba Sekarang
-          </button>
+            </motion.button>
-        </div>
+          </Link>
+        </motion.div>
       </div>
     </div>
   );

src/components/solusi/HeadStartup/HeadStartup.jsx

@@ -1,11 +1,25 @@
 import { component11, wagreen, hs } from "../asset";
+import { Link } from "react-router-dom";
+import { motion } from "framer-motion";
+import { useInView } from "react-intersection-observer";
 
 export default function HeadPersonal() {
+  const options = { triggerOnce: false, threshold: 0.2 };
+  const { ref: sectionRef, inView: sectionInView } = useInView(options);
+  const { ref: textRef, inView: textInView } = useInView(options);
+  const { ref: buttonRef, inView: buttonInView } = useInView(options);
+
   return (
-    <div className="container  mx-auto px-4 lg:px-6">
+    <div ref={sectionRef} className="container mx-auto px-4 lg:px-6">
       <div className="grid grid-cols-1 lg:grid-cols-2 items-center gap-12 py-8 mt-[200px] lg:mt-[85px]">
         {/* Left Column */}
-        <div className="space-y-6 md:-mt-40 -mt-28 text-center lg:text-left order-1 lg:order-none">
+        <motion.div
+          ref={textRef}
+          className="space-y-6 md:-mt-40 -mt-28 text-center lg:text-left order-1 lg:order-none"
+          initial={{ opacity: 0, x: -50 }}
+          animate={textInView ? { opacity: 1, x: 0 } : {}}
+          transition={{ duration: 0.8 }}
+        >
           {/* Logo and Tagline */}
           <div className="flex items-center lg:justify-start">
             <span className="flex items-center justify-center w-[53.52px] h-[43px] ml-[2px] mb-4">
@@ -25,10 +39,15 @@ export default function HeadPersonal() {
           <p className="text-[20px] lg:text-[18px] text-customBlack mt-7">
             Rekan AI hadir sebagai mitra terpercaya bagi Startup di seluruh Indonesia. Dengan solusi berbasis teknologi, kami membantu para pelaku pengembang Startup untuk bekerja lebih cerdas, mengurangi beban operasional, dan mencapai pertumbuhan yang berkelanjutan.
           </p>
-        </div>
+        </motion.div>
 
         {/* Right Column - Hero Image */}
-        <div className="order-2 lg:order-none flex justify-center">
+        <motion.div
+          className="order-2 lg:order-none flex justify-center"
+          initial={{ opacity: 0, x: 50 }}
+          animate={textInView ? { opacity: 1, x: 0 } : {}}
+          transition={{ duration: 0.8 }}
+        >
           <img
             src={hs}
             alt="Hero Illustration"
@@ -36,18 +55,31 @@ export default function HeadPersonal() {
             height={743}
             className="w-full h-auto md:w-[600px] md:h-[600px]"
           />
-        </div>
+        </motion.div>
 
         {/* Buttons - Ensure they come last on mobile */}
-        <div className="flex flex-col sm:flex-row gap-4 md:-mt-96 order-3 lg:order-none">
+        <motion.div
-        <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 font-medium text-base lg:text-lg hover:bg-pink-50 transition-colors">
+          ref={buttonRef}
+          className="flex flex-col sm:flex-row gap-4 md:-mt-96 order-3 lg:order-none"
+          initial={{ opacity: 0, y: 50 }}
+          animate={buttonInView ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.8 }}
+        >
+          <button className="flex items-center justify-center px-6 py-3 border-2 md:w-[245px] md:h-[62px] border-customRed rounded-[14px] text-customRed font-medium text-base lg:text-lg hover:bg-pink-50 transition-colors">
             <img src={wagreen} alt="WhatsApp Icon" width={30} height={30} className="mr-2" />
             Konsultasi Gratis
           </button>
-          <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">
+          <Link to={"/Contact#form"}>
+            <motion.button
+              className="flex items-center justify-center px-6 py-3 rounded-[14px] w-[358px] h-[55px] md:w-[245px] md:h-[62px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-base lg:text-lg hover:opacity-90 transition-opacity"
+              initial={{ opacity: 0, scale: 0.8 }}
+              animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
+              transition={{ duration: 0.5 }}
+            >
               Coba Sekarang
-          </button>
+            </motion.button>
-        </div>
+          </Link>
+        </motion.div>
       </div>
     </div>
   );

src/components/solusi/MengapaCorporate/MengapaCorporate.jsx

@@ -1,55 +1,94 @@
-import { chek2, wagreen, start33, start44, start55 } from "../asset"
+import { motion } from "framer-motion";
+import { useEffect, useState } from "react";
+import { useInView } from "react-intersection-observer";
+import { Link } from "react-router-dom";
+import { chek2, wagreen, start55 } from "../asset";
 
 function Kenapa() {
+  const { ref, inView } = useInView({ triggerOnce: false, threshold: 0.2 });
+
   return (
-    <div className="flex justify-center items-center bg-customWhite mt-5 min-h-screen">
+    <div ref={ref} className="container mx-auto flex justify-center items-center bg-customWhite mt-5 min-h-screen">
-      <div className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52">
+      <motion.div 
+        initial={{ opacity: 0, y: 50 }} 
+        animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }} 
+        transition={{ duration: 0.8 }}
+        className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52"
+      >
         {/* Image Section */}
-        <div className="relative w-full md:w-2/5 p-5 flex justify-center md:ml-14 md:justify-start">
+        <motion.div 
+          initial={{ opacity: 0, scale: 0.8 }}
+          animate={inView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
+          transition={{ duration: 1 }}
+          className="relative w-full md:w-2/5 p-5 flex justify-center md:ml-14 md:justify-start"
+        >
           <img
             src={start55 || "/placeholder.svg"}
             alt="Woman with Tablet"
             className="w-full md:w-[654.5px] max-h-[609.67px] h-auto object-contain"
           />
-        </div>
+        </motion.div>
 
         {/* Text Section */}
-        <div className="w-full md:w-3/5 p-6 md:p-10 flex flex-col items-center md:items-start md:mr-28 text-center md:text-left text-[#212121] ">
+        <motion.div 
-          <h2 className="text-[32px] font-semibold">Mengapa Rekan AI untuk Corporate Business?</h2>
+          initial={{ opacity: 0, x: 50 }}
-          <p className="mt-4 text-sm md:max-w-[90%] md:leading-8 text-[20px]">
+          animate={inView ? { opacity: 1, x: 0 } : { opacity: 0, x: 50 }}
+          transition={{ duration: 1, delay: 0.3 }}
+          className="w-full md:w-3/5 p-6 md:p-10 flex flex-col items-center md:items-start md:mr-28 text-center md:text-left text-[#212121] "
+        >
+          <h2 className="text-[30px] font-semibold">Mengapa Rekan AI untuk Corporate Business?</h2>
+          <p className="mt-4 text-sm md:leading-8 md:text-lg">
             Rekan AI dirancang khusus untuk mendukung kebutuhan bisnis berskala besar dengan menghadirkan solusi yang dapat meningkatkan efisiensi, mempercepat proses, dan membantu pengambilan keputusan strategis. Dengan teknologi mutakhir yang fleksibel dan aman, Rekan AI menjadi mitra terpercaya dalam perjalanan transformasi digital perusahaan Anda.
           </p>
           <ul className="mt-8 space-y-4 md:space-y-6 text-[16px] md:max-w-[70%] font-medium">
-            <li className="flex items-center ">
+            {["Standar keamanan tinggi dengan enkripsi dan sertifikasi resmi yang melindungi data perusahaan.",
-              <img src={chek2 || "/placeholder.svg"} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
+              "Solusi yang fleksibel dan dapat diimplementasikan di berbagai cabang perusahaan di seluruh dunia.",
-              Standar keamanan tinggi dengan enkripsi dan sertifikasi resmi yang melindungi data perusahaan.
+              "Automasi dan integrasi sistem yang mempercepat proses bisnis dan memangkas biaya operasional."].map((text, index) => (
-            </li>
+              <motion.li 
-            <li className="flex items-center">
+                key={index}
-              <img src={chek2 || "/placeholder.svg"} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
+                initial={{ opacity: 0, x: -30 }}
-              Solusi yang fleksibel dan dapat diimplementasikan di berbagai cabang perusahaan di seluruh dunia.            </li>
+                animate={inView ? { opacity: 1, x: 0 } : { opacity: 0, x: -30 }}
-            <li className="flex items-center">
+                transition={{ duration: 0.8, delay: index * 0.2 }}
-              <img src={chek2 || "/placeholder.svg"} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
+                className="flex items-center"
-              Automasi dan integrasi sistem yang mempercepat proses bisnis dan memangkas biaya operasional.            </li>
+              >
+                <img src={chek2 || "/placeholder.svg"} alt="Check" className="w-6 h-6 md:w-9 md:h-9 mr-3" />
+                {text}
+              </motion.li>
+            ))}
           </ul>
 
-          <div className="flex flex-col md:flex-row mt-8 md:mt-20 space-y-4 md:space-y-0 md:space-x-10 w-full mb-[112px]">
+          <motion.div
-            <button className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-[#CA2B68] text-[#CA2B68] md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition">
+            initial={{ opacity: 0, y: 30 }}
+            animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
+            transition={{ duration: 0.8, delay: 0.5 }}
+            className="flex flex-col md:flex-row mt-8 md:mt-20 space-y-4 md:space-y-0 md:space-x-10 w-full mb-[112px]"
+          >
+            <motion.button
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+              className="flex items-center justify-center w-full md:w-[245px] h-[50px] md:h-[62px] border-2 border-[#CA2B68] text-[#CA2B68] md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition"
+            >
               <img
                 src={wagreen || "/placeholder.svg"}
                 alt="WhatsApp Icon"
                 className="mr-2 w-4 h-4 md:w-[30px] md:h-[30px]"
               />
               Konsultasi Gratis
-            </button>
+            </motion.button>
-            <button className="w-full md:w-[276px] h-[50px] md:h-[70px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white md:text-xl font-medium rounded-[14px] hover:opacity-90 transition">
+            <Link to={"/Contact#form"}>
+              <motion.button
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                className="w-full md:w-[245px] h-[50px] md:h-[62px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white md:text-xl font-medium rounded-[14px] hover:opacity-90 transition"
+              >
                 Coba Sekarang
-            </button>
+              </motion.button>
+            </Link>
+          </motion.div>
+        </motion.div>
+      </motion.div>
     </div>
-        </div>
+  );
-      </div>
-    </div>
-  )
 }
 
-export default Kenapa
+export default Kenapa;
-

src/components/solusi/MengapaStartup/MengapaStartup.jsx

@@ -1,57 +1,94 @@
-import { chek2, wagreen, start44 } from "../asset"
+import { motion } from "framer-motion";
+import { useEffect, useState } from "react";
+import { useInView } from "react-intersection-observer";
+import { Link } from "react-router-dom";
+import { chek2, wagreen, start44 } from "../asset";
 
 function Kenapa() {
+  const { ref, inView } = useInView({ triggerOnce: false, threshold: 0.2 });
+
   return (
-        <div className="flex justify-center items-center bg-customWhite mt-5 min-h-screen">
+    <div ref={ref} className="container mx-auto flex justify-center items-center bg-customWhite mt-5 min-h-screen">
-            <div className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52">
+      <motion.div 
+        initial={{ opacity: 0, y: 50 }} 
+        animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }} 
+        transition={{ duration: 0.8 }}
+        className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52"
+      >
         {/* Image Section */}
-                <div className="relative w-full md:w-2/5 p-5 flex justify-center md:ml-14 md:justify-start">
+        <motion.div 
+          initial={{ opacity: 0, scale: 0.8 }}
+          animate={inView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
+          transition={{ duration: 1 }}
+          className="relative w-full md:w-2/5 p-5 flex justify-center md:ml-14 md:justify-start"
+        >
           <img
             src={start44 || "/placeholder.svg"}
             alt="Woman with Tablet"
             className="w-full md:w-[654.5px] max-h-[609.67px] h-auto object-contain"
           />
-                </div>
+        </motion.div>
 
         {/* Text Section */}
-                <div className="w-full md:w-3/5 p-6 md:p-10 flex flex-col items-center md:items-start md:mr-28 text-center md:text-left text-[#212121] ">
+        <motion.div 
-                    <h2 className="text-[32px] font-semibold">Kenapa Memilih Rekan AI untuk Startup Anda?</h2>
+          initial={{ opacity: 0, x: 50 }}
-                    <p className="mt-4 text-sm md:max-w-[90%] md:leading-8 text-[20px]">
+          animate={inView ? { opacity: 1, x: 0 } : { opacity: 0, x: 50 }}
+          transition={{ duration: 1, delay: 0.3 }}
+          className="w-full md:w-3/5 p-6 md:p-10 flex flex-col items-center md:items-start md:mr-28 text-center md:text-left text-[#212121] "
+        >
+          <h2 className="text-[30px] font-semibold">Kenapa Memilih Rekan AI untuk Startup Anda?</h2>
+          <p className="mt-4 text-sm md:leading-8 md:text-xl">
             Startup adalah tulang punggung perekonomian, dan Rekan AI hadir untuk memberdayakan pelaku usaha agar dapat bersaing di era digital. Dengan solusi berbasis AI, kami membantu usaha kecil dan menengah mencapai efisiensi yang lebih baik, memperluas jangkauan pasar, dan meningkatkan kepuasan pelanggan.
           </p>
           <ul className="mt-8 space-y-4 md:space-y-6 text-[16px] md:max-w-[70%] font-medium">
-                        <li className="flex items-center ">
+            {["Teknologi kami dirancang agar dapat diakses oleh siapa saja, tanpa memerlukan latar belakang teknis.",
+              "Rekan AI menawarkan solusi dengan harga yang sesuai untuk Startup.",
+              "Kami membantu Anda menciptakan peluang baru dengan teknologi yang mendukung setiap tahap perkembangan bisnis."].map((text, index) => (
+              <motion.li 
+                key={index}
+                initial={{ opacity: 0, x: -30 }}
+                animate={inView ? { opacity: 1, x: 0 } : { opacity: 0, x: -30 }}
+                transition={{ duration: 0.8, delay: index * 0.2 }}
+                className="flex items-center"
+              >
                 <img src={chek2 || "/placeholder.svg"} alt="Check" className="w-6 h-6 md:w-9 md:h-9 mr-3" />
-                            Teknologi kami dirancang agar dapat diakses oleh siapa saja, tanpa memerlukan latar belakang teknis.
+                {text}
-                        </li>
+              </motion.li>
-                        <li className="flex items-center">
+            ))}
-                            <img src={chek2 || "/placeholder.svg"} alt="Check" className="w-6 h-6 md:w-9 md:h-9 mr-3" />
-                            Rekan AI menawarkan solusi dengan harga yang sesuai untuk Startup.
-                        </li>
-                        <li className="flex items-center">
-                            <img src={chek2 || "/placeholder.svg"} alt="Check" className="w-6 h-6 md:w-9 md:h-9 mr-3" />
-                            Kami membantu Anda menciptakan peluang baru dengan teknologi yang mendukung setiap tahap perkembangan bisnis.
-                        </li>
           </ul>
 
-                    <div className="flex flex-col md:flex-row mt-8 md:mt-20 space-y-4 md:space-y-0 md:space-x-10 w-full mb-[112px]">
+          <motion.div
-                        <button className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-[#CA2B68] text-[#CA2B68] md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition">
+            initial={{ opacity: 0, y: 30 }}
+            animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
+            transition={{ duration: 0.8, delay: 0.5 }}
+            className="flex flex-col md:flex-row mt-8 md:mt-20 space-y-4 md:space-y-0 md:space-x-10 w-full mb-[112px]"
+          >
+            <motion.button
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+              className="flex items-center justify-center w-full md:w-[245px] h-[50px] md:h-[62px] border-2 border-[#CA2B68] text-[#CA2B68] md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition"
+            >
               <img
                 src={wagreen || "/placeholder.svg"}
                 alt="WhatsApp Icon"
                 className="mr-2 w-4 h-4 md:w-[30px] md:h-[30px]"
               />
               Konsultasi Gratis
-                        </button>
+            </motion.button>
-                        <button className="w-full md:w-[276px] h-[50px] md:h-[70px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white md:text-xl font-medium rounded-[14px] hover:opacity-90 transition">
+            <Link to={"/Contact#form"}>
+              <motion.button
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                className="w-full md:w-[245px] h-[50px] md:h-[62px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white md:text-xl font-medium rounded-[14px] hover:opacity-90 transition"
+              >
                 Coba Sekarang
-                        </button>
+              </motion.button>
+            </Link>
+          </motion.div>
+        </motion.div>
+      </motion.div>
     </div>
-                </div>
+  );
-            </div>
-        </div>
-    )
 }
 
-export default Kenapa
+export default Kenapa;
-

src/components/solusi/MengapapPersonal/MengapapPersonal.jsx

@@ -1,60 +1,97 @@
-import { chek2, wagreen, start33 } from "../asset"
+import { motion } from "framer-motion";
+import { useEffect, useState } from "react";
+import { useInView } from "react-intersection-observer";
+import { chek2, wagreen, start33 } from "../asset";
+import { Link } from "react-router-dom";
 
 function Kenapa() {
+  const { ref, inView } = useInView({ triggerOnce: false, threshold: 0.2 });
+
   return (
-    <div className="flex justify-center items-center bg-customWhite mt-5 min-h-screen">
+    <div ref={ref} className="container mx-auto flex justify-center items-center bg-customWhite mt-5 min-h-screen">
-      <div className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52">
+      <motion.div
+        initial={{ opacity: 0, y: 50 }}
+        animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
+        transition={{ duration: 0.8 }}
+        className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52"
+      >
         {/* Image Section */}
-        <div className="relative w-full md:w-2/5 p-5 flex justify-center md:ml-14 md:justify-start">
+        <motion.div
+          initial={{ opacity: 0, scale: 0.8 }}
+          animate={inView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
+          transition={{ duration: 1 }}
+          className="relative w-full md:w-2/5 p-5 flex justify-center md:ml-14 md:justify-start"
+        >
           <img
             src={start33 || "/placeholder.svg"}
             alt="Woman with Tablet"
             className="w-full md:w-[654.5px] max-h-[609.67px] h-auto object-contain"
           />
-        </div>
+        </motion.div>
 
         {/* Text Section */}
-        <div className="w-full md:w-3/5 p-6 md:p-10 flex flex-col items-center md:items-start md:mr-28 text-center md:text-left text-[#212121] ">
+        <motion.div
-          <h2 className="text-[32px] font-semibold">Mengapa Memilih Rekan AI untuk Penggunaan Pribadi?</h2>
+          initial={{ opacity: 0, x: 50 }}
-          <p className="mt-4 text-sm md:max-w-[90%] md:leading-8 text-[20px]">
+          animate={inView ? { opacity: 1, x: 0 } : { opacity: 0, x: 50 }}
+          transition={{ duration: 1, delay: 0.3 }}
+          className="w-full md:w-3/5 p-6 md:p-10 flex flex-col items-center md:items-start md:mr-28 text-center md:text-left text-[#212121] "
+        >
+          <h2 className="text-[30px] font-semibold">Mengapa Memilih Rekan AI untuk Penggunaan Pribadi?</h2>
+          <p className="mt-4 md:text-lg md:leading-8 text-sm">
             Rekan AI hadir untuk memberikan kemudahan dan efisiensi bagi individu yang ingin memanfaatkan kecerdasan
             buatan dalam kehidupan sehari-hari. Apakah Anda ingin meningkatkan produktivitas, mengelola data dengan
             aman, atau membuat keputusan yang lebih cerdas, Rekan AI adalah solusi tepat yang dirancang khusus untuk
             Anda.
           </p>
           <ul className="mt-8 space-y-4 md:space-y-6 text-[16px] md:max-w-[70%] font-medium">
-            <li className="flex items-center ">
+            {["Teknologi yang ramah pengguna, cocok untuk semua kalangan tanpa memerlukan keahlian teknis.",
+              "Data Anda aman dengan enkripsi tingkat tinggi, memastikan privasi Anda tetap terlindungi.",
+              "Dapatkan manfaat maksimal dari solusi AI yang dapat disesuaikan dengan kebutuhan individu Anda."].map((text, index) => (
+                <motion.li
+                  key={index}
+                  initial={{ opacity: 0, x: -30 }}
+                  animate={inView ? { opacity: 1, x: 0 } : { opacity: 0, x: -30 }}
+                  transition={{ duration: 0.8, delay: index * 0.2 }}
+                  className="flex items-center"
+                >
                   <img src={chek2 || "/placeholder.svg"} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
-              Teknologi yang ramah pengguna, cocok untuk semua kalangan tanpa memerlukan keahlian teknis.
+                  {text}
-            </li>
+                </motion.li>
-            <li className="flex items-center">
+              ))}
-              <img src={chek2 || "/placeholder.svg"} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
-              Data Anda aman dengan enkripsi tingkat tinggi, memastikan privasi Anda tetap terlindungi.
-            </li>
-            <li className="flex items-center">
-              <img src={chek2 || "/placeholder.svg"} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
-              Dapatkan manfaat maksimal dari solusi AI yang dapat disesuaikan dengan kebutuhan individu Anda.
-            </li>
           </ul>
 
-          <div className="flex flex-col md:flex-row mt-8 md:mt-20 space-y-4 md:space-y-0 md:space-x-10 w-full mb-[112px]">
+          <motion.div
-            <button className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-[#CA2B68] text-[#CA2B68] md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition">
+            initial={{ opacity: 0, y: 30 }}
+            animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
+            transition={{ duration: 0.8, delay: 0.5 }}
+            className="flex flex-col md:flex-row mt-8 md:mt-20 space-y-4 md:space-y-0 md:space-x-10 w-full mb-[112px]"
+          >
+            <motion.button
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+              className="flex items-center justify-center w-full md:w-[245px] h-[50px] md:h-[62px] border-2 border-[#CA2B68] text-[#CA2B68] md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition"
+            >
               <img
                 src={wagreen || "/placeholder.svg"}
                 alt="WhatsApp Icon"
                 className="mr-2 w-4 h-4 md:w-[30px] md:h-[30px]"
               />
               Konsultasi Gratis
-            </button>
+            </motion.button>
-            <button className="w-full md:w-[276px] h-[50px] md:h-[70px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white md:text-xl font-medium rounded-[14px] hover:opacity-90 transition">
+            <Link to={"/Contact#form"}>
+              <motion.button
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                className="w-full md:w-[245px] h-[50px] md:h-[62px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white md:text-xl font-medium rounded-[14px] hover:opacity-90 transition"
+              >
                 Coba Sekarang
-            </button>
+              </motion.button>
+            </Link>
+          </motion.div>
+        </motion.div>
+      </motion.div>
     </div>
-        </div>
+  );
-      </div>
-    </div>
-  )
 }
 
-export default Kenapa
+export default Kenapa;
-

src/components/solusi/SolusiCorporate/SolusiCorporate.jsx

@@ -1,12 +1,25 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { data } from "./data";
 
 export default function BusinessSolution() {
   const [activeTab, setActiveTab] = useState("hr");
   const activeContent = data.content[activeTab];
+  const [isMobile, setIsMobile] = useState(false);
+
+  // Detect mobile screen size
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 768); // Set true jika lebar layar < 768px
+    };
+
+    window.addEventListener("resize", handleResize);
+    handleResize(); // Inisialisasi state saat pertama kali mount
+
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
 
   return (
-    <div className="min-h-screen p-4">
+    <div className="container w-[90vw] mx-auto p-4 overflow-hidden">
       {/* Header */}
       <div className="text-center mb-8">
         <h1 className="text-[32px] text-[#212121] font-semibold mb-2">{data.title}</h1>
@@ -14,8 +27,8 @@ export default function BusinessSolution() {
       </div>
 
       {/* Navigation Buttons */}
-      <div className="relative w-full max-w-[1539px] h-auto mx-auto bg-[#CA2B68] rounded-[14px] border border-[#D5DAE3] mb-8 p-4">
+      <div className="relative w-full max-w-[90vw] h-auto mx-auto bg-[#CA2B68] rounded-[14px] border border-[#D5DAE3] mb-8 p-4">
-        <div className="flex flex-wrap justify-center gap-4 text-[18px] md:text-[24px]">
+        <div className={`flex ${isMobile ? "flex-wrap" : "justify-center"} gap-4 text-[18px] md:text-[24px]`}>
           {data.tabs.map((button) => (
             <button
               key={button.key}
@@ -32,9 +45,9 @@ export default function BusinessSolution() {
 
       {/* Content Section */}
       {activeContent && (
-        <div className="max-w-7xl mx-auto flex flex-col sm:flex-row flex-wrap gap-8 justify-center lg:justify-start">
+        <div className="max-w-[90vw] mx-auto flex flex-col sm:flex-row flex-wrap gap-8 justify-center lg:justify-start">
           {/* Image Section */}
-          <div className="w-full sm:w-[400px] md:w-[500px] lg:w-[618px] h-auto rounded-[14px] border border-gray-200 overflow-hidden shadow-lg">
+          <div className={`w-full sm:w-[300px] md:w-[500px] md:ml-7 lg:w-[618px] max-w-[90vw] rounded-[14px] border border-gray-200 overflow-hidden shadow-lg`}>
             <img
               src={activeContent.image || "/placeholder.svg"}
               alt={activeContent.title}
@@ -43,7 +56,7 @@ export default function BusinessSolution() {
           </div>
 
           {/* Text Content */}
-          <div className="flex-1 max-w-full md:max-w-[600px]">
+          <div className="flex-1 md:pl-7 max-w-full ">
             <h2 className="text-[24px] md:text-[32px] text-[#212121] font-semibold mb-6">{activeContent.title}</h2>
             <p className="text-[#212121] text-[16px] md:text-[20px] mb-8">{activeContent.description}</p>
 

src/components/solusi/SolusiCorporate/data.js

@@ -87,7 +87,7 @@ export const data = {
           {
             title: "Pengurangan Risiko Fraud",
             description:
-              "Cegah potensi penipuan dengan verifikasi data yang komprehensif dan terintegrasi.",
+              "Cegah potensi penipuan dengan verifikasi data yang komprehensif dan terintegrasi.3",
             icon: maskcek
           }
         ]

src/components/solusi/SolusiPersonal/SolusiPersonal.jsx

@@ -1,12 +1,25 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { data } from "./data";
 
 export default function BusinessSolution() {
   const [activeTab, setActiveTab] = useState("hr");
   const activeContent = data.content[activeTab];
+  const [isMobile, setIsMobile] = useState(false);
+
+  // Detect mobile screen size
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 768); // Set true jika lebar layar < 768px
+    };
+
+    window.addEventListener("resize", handleResize);
+    handleResize(); // Inisialisasi state saat pertama kali mount
+
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
 
   return (
-    <div className="min-h-screen p-4">
+    <div className="container w-[90vw] mx-auto p-4 overflow-hidden">
       {/* Header */}
       <div className="text-center mb-8">
         <h1 className="text-[32px] text-[#212121] font-semibold mb-2">{data.title}</h1>
@@ -14,8 +27,8 @@ export default function BusinessSolution() {
       </div>
 
       {/* Navigation Buttons */}
-      <div className="relative w-full max-w-[1539px] h-auto mx-auto bg-[#CA2B68] rounded-[14px] border border-[#D5DAE3] mb-8 p-4">
+      <div className="relative w-full max-w-[90vw] h-auto mx-auto bg-[#CA2B68] rounded-[14px] border border-[#D5DAE3] mb-8 p-4">
-        <div className="flex flex-wrap justify-center gap-4 text-[18px] md:text-[24px]">
+        <div className={`flex ${isMobile ? "flex-wrap" : "justify-center"} gap-4 text-[18px] md:text-[24px]`}>
           {data.tabs.map((button) => (
             <button
               key={button.key}
@@ -32,9 +45,9 @@ export default function BusinessSolution() {
 
       {/* Content Section */}
       {activeContent && (
-        <div className="max-w-7xl mx-auto flex flex-col sm:flex-row flex-wrap gap-8 justify-center lg:justify-start">
+        <div className="max-w-[90vw] mx-auto flex flex-col sm:flex-row flex-wrap gap-8 justify-center lg:justify-start">
           {/* Image Section */}
-          <div className="w-full sm:w-[400px] md:w-[500px] lg:w-[618px] h-auto rounded-[14px] border border-gray-200 overflow-hidden shadow-lg">
+          <div className={`w-full sm:w-[300px] md:w-[500px] md:ml-7 lg:w-[618px] max-w-[90vw] rounded-[14px] border border-gray-200 overflow-hidden shadow-lg`}>
             <img
               src={activeContent.image || "/placeholder.svg"}
               alt={activeContent.title}
@@ -43,7 +56,7 @@ export default function BusinessSolution() {
           </div>
 
           {/* Text Content */}
-          <div className="flex-1 max-w-full md:max-w-[600px]">
+          <div className="flex-1 md:pl-7 max-w-full ">
             <h2 className="text-[24px] md:text-[32px] text-[#212121] font-semibold mb-6">{activeContent.title}</h2>
             <p className="text-[#212121] text-[16px] md:text-[20px] mb-8">{activeContent.description}</p>
 

src/components/solusi/SolusiStartup/SolusiStartup.jsx

@@ -1,12 +1,25 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { data } from "./data";
 
 export default function BusinessSolution() {
   const [activeTab, setActiveTab] = useState("hr");
   const activeContent = data.content[activeTab];
+  const [isMobile, setIsMobile] = useState(false);
+
+  // Detect mobile screen size
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 768); // Set true jika lebar layar < 768px
+    };
+
+    window.addEventListener("resize", handleResize);
+    handleResize(); // Inisialisasi state saat pertama kali mount
+
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
 
   return (
-    <div className="min-h-screen p-4">
+    <div className="container w-[90vw] mx-auto p-4 overflow-hidden">
       {/* Header */}
       <div className="text-center mb-8">
         <h1 className="text-[32px] text-[#212121] font-semibold mb-2">{data.title}</h1>
@@ -14,8 +27,8 @@ export default function BusinessSolution() {
       </div>
 
       {/* Navigation Buttons */}
-      <div className="relative w-full max-w-[1539px] h-auto mx-auto bg-[#CA2B68] rounded-[14px] border border-[#D5DAE3] mb-8 p-4">
+      <div className="relative w-full max-w-[90vw] h-auto mx-auto bg-[#CA2B68] rounded-[14px] border border-[#D5DAE3] mb-8 p-4">
-        <div className="flex flex-wrap justify-center gap-4 text-[18px] md:text-[24px]">
+        <div className={`flex ${isMobile ? "flex-wrap" : "justify-center"} gap-4 text-[18px] md:text-[24px]`}>
           {data.tabs.map((button) => (
             <button
               key={button.key}
@@ -32,9 +45,9 @@ export default function BusinessSolution() {
 
       {/* Content Section */}
       {activeContent && (
-        <div className="max-w-7xl mx-auto flex flex-col sm:flex-row flex-wrap gap-8 justify-center lg:justify-start">
+        <div className="max-w-[90vw] mx-auto flex flex-col sm:flex-row flex-wrap gap-8 justify-center lg:justify-start">
           {/* Image Section */}
-          <div className="w-full sm:w-[400px] md:w-[500px] lg:w-[618px] h-auto rounded-[14px] border border-gray-200 overflow-hidden shadow-lg">
+          <div className={`w-full sm:w-[300px] md:w-[500px] md:ml-7 lg:w-[618px] max-w-[90vw] rounded-[14px] border border-gray-200 overflow-hidden shadow-lg`}>
             <img
               src={activeContent.image || "/placeholder.svg"}
               alt={activeContent.title}
@@ -43,7 +56,7 @@ export default function BusinessSolution() {
           </div>
 
           {/* Text Content */}
-          <div className="flex-1 max-w-full md:max-w-[600px]">
+          <div className="flex-1 md:pl-7 max-w-full ">
             <h2 className="text-[24px] md:text-[32px] text-[#212121] font-semibold mb-6">{activeContent.title}</h2>
             <p className="text-[#212121] text-[16px] md:text-[20px] mb-8">{activeContent.description}</p>
 

src/components/solusi/TransformasiCorpo/TransformasiCorpo.jsx

@@ -1,9 +1,17 @@
+import { Link } from "react-router-dom";
 import { wagreen } from "../asset";
+import { motion } from "framer-motion";
 
 function Transformasi() {
   return (
     <>
-      <div className="flex flex-col items-center justify-center text-center w-full h-[65vh] mb-20 -mt-3">
+      <motion.div 
+        initial={{ opacity: 0, y: 50 }} 
+        whileInView={{ opacity: 1, y: 0 }} 
+        transition={{ duration: 1.2, ease: "easeOut" }} 
+        viewport={{ once: false, amount: 0.2 }}
+        className="flex flex-col items-center justify-center text-center w-full h-[65vh] mb-20 -mt-3"
+      >
         {/* Tagline Section */}
         <div className="mb-5">
           <div className="flex flex-col sm:flex-row items-center justify-center gap-2 p-4">
@@ -16,23 +24,32 @@ function Transformasi() {
           </div>
           <p className="text-base sm:text-xl text-customBlack-600 md:ml-24 mt-2 leading-relaxed px-4 sm:px-0">
           Bersama Rekan AI, bawa bisnis Anda menuju masa depan yang lebih cerdas, efisien, dan kompetitif.
-
-
           </p>
         </div>
+      </motion.div>
 
-      </div>
+      <motion.div 
-      <div className="flex flex-col justify-center md:-mt-52 md:mb-56 sm:flex-row gap-6 sm:gap-12 -mt-10 mb-20 px-4 sm:px-0">
+        initial={{ opacity: 0, y: 50 }} 
-        <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-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
+        whileInView={{ opacity: 1, y: 0 }} 
+        transition={{ duration: 1.2, ease: "easeOut" }} 
+        viewport={{ once: false, amount: 0.2 }}
+        className="flex flex-col justify-center md:-mt-52 md:mb-56 sm:flex-row gap-6 sm:gap-12 -mt-10 mb-20 px-4 sm:px-0"
+      >
+        <motion.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-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]"
+        >
           <img src={wagreen} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
           Konsultasi Gratis
-        </button>
+        </motion.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-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
+        <Link to={"/Contact#form"}>
+          <motion.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-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90"
+          >
             Coba Sekarang
-        </button>
+          </motion.button>
-      </div>
+        </Link>
+      </motion.div>
     </>
-
   );
 }
 

src/components/solusi/TransformasiCorporate/TransformasiCorporate.jsx

@@ -1,41 +0,0 @@
-import React from "react";
-import { wagreen } from "../asset";
-
-function MasaDepan() {
-  return (
-    <>
-      <div className="flex flex-col items-center justify-center text-center w-full h-[65vh] -mt-3">
-        {/* Tagline Section */}
-        <div className="mb-5">
-          <div className="flex flex-col sm:flex-row items-center justify-center gap-2 p-4">
-            <span className="flex items-center justify-center bg-[#CA2B68] text-white font-semibold text-2xl rounded-2xl w-48 h-12">
-              #Rekan AI
-            </span>
-            <h1 className="text-2xl sm:text-[32px] font-semibold text-[#212121]">
-            Transformasi Digital Anda Dimulai di Sini
-            </h1>
-          </div>
-          <p className="text-base sm:text-xl text-[#212121] md:max-w-[80%] md:ml-24 mt-2 leading-relaxed px-4 sm:px-0">
-          Bersama Rekan AI, bawa bisnis Anda menuju masa depan yang lebih cerdas, efisien, dan kompetitif.
-          </p>
-        </div>
-
-
-      </div>
-      {/* Button Section */}
-      <div className="flex flex-col justify-center md:-mt-32 md:mb-56 sm:flex-row gap-6 sm:gap-12 -mt-10 mb-20 px-4 sm: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={wagreen} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[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">
-        Coba Sekarang
-    </button>
-</div>
-
-    </>
-
-  );
-}
-
-export default MasaDepan;

src/components/solusi/TransformasiPersonal/TransformasiPersonal.jsx

@@ -1,9 +1,17 @@
 import { wagreen } from "../asset";
+import { Link } from "react-router-dom";
+import { motion } from "framer-motion";
 
 function Transformasi() {
   return (
     <>
-      <div className="flex flex-col items-center justify-center text-center w-full h-[65vh] mb-20 -mt-3">
+      <motion.div 
+        initial={{ opacity: 0, y: 50 }} 
+        whileInView={{ opacity: 1, y: 0 }} 
+        transition={{ duration: 1.2, ease: "easeOut" }} 
+        viewport={{ once: false, amount: 0.2 }}
+        className="flex flex-col items-center justify-center text-center w-full h-[65vh] mb-20 -mt-3"
+      >
         {/* Tagline Section */}
         <div className="mb-5">
           <div className="flex flex-col sm:flex-row items-center justify-center gap-2 p-4">
@@ -24,19 +32,30 @@ function Transformasi() {
             </span>
           </p>
         </div>
+      </motion.div>
 
-      </div>
+      <motion.div 
-      <div className="flex flex-col justify-center md:-mt-52 md:mb-56 sm:flex-row gap-6 sm:gap-12 -mt-10 mb-20 px-4 sm:px-0">
+        initial={{ opacity: 0, y: 50 }} 
-        <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-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
+        whileInView={{ opacity: 1, y: 0 }} 
+        transition={{ duration: 1.2, ease: "easeOut" }} 
+        viewport={{ once: false, amount: 0.2 }}
+        className="flex flex-col justify-center md:-mt-52 md:mb-56 sm:flex-row gap-6 sm:gap-12 -mt-10 mb-20 px-4 sm:px-0"
+      >
+        <motion.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-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]"
+        >
           <img src={wagreen} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
           Konsultasi Gratis
-        </button>
+        </motion.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-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
+        <Link to={"/Contact#form"}>
+          <motion.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-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90"
+          >
             Coba Sekarang
-        </button>
+          </motion.button>
-      </div>
+        </Link>
+      </motion.div>
     </>
-
   );
 }
 

src/components/solusi/TransformasiStart/TransformasiStart.jsx

@@ -1,9 +1,17 @@
+import { Link } from "react-router-dom";
 import { wagreen } from "../asset";
+import { motion } from "framer-motion";
 
 function Transformasi() {
   return (
     <>
-      <div className="flex flex-col items-center justify-center text-center w-full h-[65vh] mb-20 -mt-3">
+      <motion.div 
+        initial={{ opacity: 0, y: 50 }} 
+        whileInView={{ opacity: 1, y: 0 }} 
+        transition={{ duration: 1.2, ease: "easeOut" }} 
+        viewport={{ once: false, amount: 0.2 }}
+        className="flex flex-col items-center justify-center text-center w-full h-[65vh] mb-20 -mt-3"
+      >
         {/* Tagline Section */}
         <div className="mb-5">
           <div className="flex flex-col sm:flex-row items-center justify-center gap-2 p-4">
@@ -24,19 +32,30 @@ function Transformasi() {
             </span>
           </p>
         </div>
+      </motion.div>
 
-      </div>
+      <motion.div 
-      <div className="flex flex-col justify-center md:-mt-52 md:mb-56 sm:flex-row gap-6 sm:gap-12 -mt-10 mb-20 px-4 sm:px-0">
+        initial={{ opacity: 0, y: 50 }} 
-        <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-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
+        whileInView={{ opacity: 1, y: 0 }} 
+        transition={{ duration: 1.2, ease: "easeOut" }} 
+        viewport={{ once: false, amount: 0.2 }}
+        className="flex flex-col justify-center md:-mt-52 md:mb-56 sm:flex-row gap-6 sm:gap-12 -mt-10 mb-20 px-4 sm:px-0"
+      >
+        <motion.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-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]"
+        >
           <img src={wagreen} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
           Konsultasi Gratis
-        </button>
+        </motion.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-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
+        <Link to={"/Contact#form"}>
+          <motion.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-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90"
+          >
             Coba Sekarang
-        </button>
+          </motion.button>
-      </div>
+        </Link>
+      </motion.div>
     </>
-
   );
 }
 

src/components/solusi/asset/index.js

@@ -21,7 +21,7 @@ import x from "./x.png";
 import chek2 from "./Frame 811480.png";
 import start22 from "./Frame 811554.png";
 import maskcek from "./Mask group (1).png";
-import card1 from "./Play Now (33) 1.png";
+import card1 from "./Frame 8115681.png";
 import card2 from "./Play Now (32) 1.png";
 import card3 from "./Play Now (30) 2.png";
 import rekan1 from "./Play Now (34) 1.png";

src/pages/Contact.jsx

@@ -4,7 +4,7 @@ import FormSection from "../components/contact/FormSection"
 import FAQSection from "../components/contact/FAQSection"
 import BottomCTA from "../components/contact/BottomCTA"
 import WhatsAppButton from "../components/beranda/WhatsAppButon"
-import Footer from "../components/contact/Footer"
+import Footer from "../components/beranda/Footer"
 function Contact() {
   return (
     <>

src/pages/Home.jsx

@@ -1,14 +1,14 @@
-import Header from "../components/beranda/Header"
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import Hero from "../components/beranda/Hero"
+import Header from "../components/beranda/Header";
-import Solusi from "../components/beranda/Solusi"
+import Hero from "../components/beranda/Hero";
-import Banner from "../components/beranda/Banner"
+import Solusi from "../components/beranda/Solusi";
-import Kenapa from "../components/beranda/Kenapa"
+import Banner from "../components/beranda/Banner";
-import Mitra from '../components/beranda/Mitra'
+import Kenapa from "../components/beranda/Kenapa";
-import Mendukung from "../components/beranda/Mendukung"
+import Mitra from '../components/beranda/Mitra';
-import Footer from "../components/contact/Footer"
+import Mendukung from "../components/beranda/Mendukung";
-import MasaDepan from "../components/beranda/MasaDepan"
+import Footer from "../components/beranda/Footer";
-import WhatsAppButton from "../components/beranda/WhatsAppButon"
+import MasaDepan from "../components/beranda/MasaDepan";
-
+import WhatsAppButton from "../components/beranda/WhatsAppButon";
 
 function Home() {
   return (
@@ -24,8 +24,8 @@ function Home() {
       <Footer />
       <WhatsAppButton />
     </>
-
+  );
-  )
 }
 
-export default Home
+
+export default Home;

src/pages/SolusiCorporate.jsx

@@ -5,7 +5,7 @@ import MengapaCorporate from '../components/solusi/MengapaCorporate/MengapaCorpo
 import SolusiCorporate from '../components/solusi/SolusiCorporate/SolusiCorporate'
 import TransformasiCorpo from '../components/solusi/TransformasiCorpo/TransformasiCorpo'
 import WhatsAppButton from "../components/beranda/WhatsAppButon"
-import Footer from "../components/contact/Footer"
+import Footer from "../components/beranda/Footer"
 function Contact() {
   return (
     <>

src/pages/SolusiPersonal.jsx

@@ -5,7 +5,7 @@ import MengapapPersonal from '../components/solusi/MengapapPersonal/MengapapPers
 import SolusiPersonal from '../components/solusi/SolusiPersonal/SolusiPersonal'
 import TransformasiPersonal from '../components/solusi/TransformasiPersonal/TransformasiPersonal'
 import WhatsAppButton from "../components/beranda/WhatsAppButon"
-import Footer from "../components/contact/Footer"
+import Footer from "../components/beranda/Footer"
 function Contact() {
   return (
     <>

src/pages/SolusiStartup.jsx

@@ -1,7 +1,7 @@
 import Header from "../components/beranda/Header"
 import HeadStartup from '../components/solusi/HeadStartup/HeadStartup'
 import WhatsAppButton from "../components/beranda/WhatsAppButon"
-import Footer from "../components/contact/Footer"
+import Footer from "../components/beranda/Footer"
 import CardStartup from "../components/solusi/CardStartup/CardStartup"
 import MengapaStartup from "../components/solusi/MengapaStartup/MengapaStartup"
 import SolusiStartup from "../components/solusi/SolusiStartup/SolusiStartup"