add hubungi kami

2025-01-31 14:27:13 +07:00 · 2025-01-31 14:27:13 +07:00 · 153214d438
parent c335fc05f8
commit 153214d438
43 changed files with 771 additions and 94 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -9,7 +9,8 @@
      "version": "0.0.0",
      "dependencies": {
        "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "react-dom": "^18.3.1",
+        "react-router-dom": "^7.1.3"
      },
      "devDependencies": {
        "@eslint/js": "^9.17.0",
@ -1399,6 +1400,12 @@
        "@babel/types": "^7.20.7"
      }
    },
+    "node_modules/@types/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
+      "license": "MIT"
+    },
    "node_modules/@types/estree": {
      "version": "1.0.6",
      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
@ -2022,6 +2029,15 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
    "node_modules/cross-spawn": {
      "version": "7.0.6",
      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@ -4548,6 +4564,46 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/react-router": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.3.tgz",
+      "integrity": "sha512-EezYymLY6Guk/zLQ2vRA8WvdUhWFEj5fcE3RfWihhxXBW7+cd1LsIiA3lmx+KCmneAGQuyBv820o44L2+TtkSA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/cookie": "^0.6.0",
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0",
+        "turbo-stream": "2.4.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.1.3.tgz",
+      "integrity": "sha512-qQGTE+77hleBzv9SIUIkGRvuFBQGagW+TQKy53UTZAO/3+YFNBYvRsNIZ1GT17yHbc63FylMOdS+m3oUriF1GA==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.1.3"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
    "node_modules/read-cache": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@ -4791,6 +4847,12 @@
        "semver": "bin/semver.js"
      }
    },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+      "license": "MIT"
+    },
    "node_modules/set-function-length": {
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@ -5328,6 +5390,12 @@
      "dev": true,
      "license": "Apache-2.0"
    },
+    "node_modules/turbo-stream": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
+      "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==",
+      "license": "ISC"
+    },
    "node_modules/type-check": {
      "version": "0.4.0",
      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
--- a/package.json
+++ b/package.json
@ -11,7 +11,8 @@
  },
  "dependencies": {
    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^7.1.3"
  },
  "devDependencies": {
    "@eslint/js": "^9.17.0",
--- a/src/App.jsx
+++ b/src/App.jsx
@ -1,27 +1,14 @@
-import Header from "./components/Header"
-import Hero from "./components/Hero"
-import Solusi from "./components/solusi"
-import Banner from "./components/Banner"
-import Kenapa from "./components/Kenapa"
-import Mitra from './components/Mitra'
-import Mendukung from "./components/Mendukung"
-import Footer from "./components/Footer"
-import MasaDepan from "./components/MasaDepan"
-import WhatsAppButton from "./components/WhatsAppButon"
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import Contact from "./pages/Contact"
+import Home from "./pages/Home"
 function App() {
  return (
-    <>
-        <Header />
-        <Hero />
-        <Solusi />
-        <Banner />
-        <Kenapa />
-        <Mitra />
-        <Mendukung />
-        <MasaDepan />
-        <Footer />
-        <WhatsAppButton />
-    </>
+    <Router>
+      <Routes>
+        <Route path='/' element={<Home/>}/>
+        <Route path='/Contact' element={<Contact/>}/>
+      </Routes>
+    </Router>

  )
 }
--- a/src/assets/image/vector.png
+++ b/src/assets/image/vector.png
--- a/src/assets/index.js
+++ b/src/assets/index.js
@ -1,6 +1,7 @@
 import Logo1 from './image/logo.png'
 import search from './image/search.png';
 import row from './image/arrow.png';
+import row2 from './image/vector.png';
 import homeLogo from './image/Component 1.png';
 import waIcon from './image/whatsapp-color_svgrepo.com (1).png';
 import homeImg from './image/Component 3.png';
@ -69,7 +70,7 @@ import frame from "./image/Component 11.png";


 export{
-    Logo1, search,row,homeLogo,waIcon,homeImg,card1,card2,card3,card4,chek,
+    Logo1, search,row,row2,homeLogo,waIcon,homeImg,card1,card2,card3,card4,chek,
    waIcon2,L1,L2,L3,L4,R1,R2,R3,R4,bgcBanner,imgLeft,chek2,circle1,circle2,
    mitraImg,arrow1,arrow2,swipper1,swipper2,swipper3,swipper4,swipper5,swipper6,
    swipper7,swipper8,swipper9,swipper10,swipper11,swipper12,swipper13,swipper14,
--- a/src/components/beranda/Banner.jsx
+++ b/src/components/beranda/Banner.jsx
@ -1,11 +1,11 @@
-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/';

 function Banner() {
    return (
        <div
            className="relative flex flex-col items-center justify-center mt-20 w-full h-auto md:h-[692px] bg-cover bg-center text-white text-center"
            style={{
-                backgroundImage: `linear-gradient(to right, rgba(220, 1, 150, 0.4),rgba(91, 89, 232, 0.9),rgba(91, 89, 232, 1) ), url(${bgcBanner})`,
+                backgroundImage: ` linear-gradient(248.72deg, #5B59E0 50.11%, rgba(202, 43, 104, 0.4) 90%), url(${bgcBanner})`,
                backgroundSize: 'cover',
                backgroundPosition: 'center',
                backgroundRepeat: 'no-repeat',
@ -32,7 +32,7 @@ function Banner() {
                </p>
                <div className="flex flex-col md:flex-row gap-4 mt-4 md:mt-20 justify-center">
                    <button className="flex items-center justify-center w-full md:w-[317px] h-[50px] md:h-[70px] rounded-2xl border-[1px] border-white text-white text-sm md:text-lg font-bold hover:bg-white hover:bg-opacity-10">
-                        <img src={waIcon2} alt="WhatsApp Icon" className="mr-2 h-4 md:h-5 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-[324px] h-[50px] md:h-[70px] rounded-2xl px-4 md:px-8 py-2 md:py-3 border-[1px] border-white bg-gradient-to-r from-[#dc0168] to-[#5b59e8] text-white text-sm md:text-lg font-bold hover:opacity-90">
--- a/src/components/beranda/Footer.jsx
+++ b/src/components/beranda/Footer.jsx
@ -1,4 +1,4 @@
-import { nvdia,kmn,kominfo,ojk,x,instagram,facebook,frame, } from "../assets";
+import { nvdia,kmn,kominfo,ojk,x,instagram,facebook,frame, } from "../../assets";


 function Footer() {
--- a/src/components/beranda/Header.jsx
+++ b/src/components/beranda/Header.jsx
@ -1,11 +1,11 @@
 import { useState } from 'react';
-import { Logo1 } from '../assets'
-import {search} from '../assets';
-import {row} from '../assets';
-
+import { Logo1 } from '../../assets'
+import {search} from '../../assets';
+import {row} from '../../assets';
+import { useNavigate } from 'react-router-dom';
 const Header = () => {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
-
+  const navigate = useNavigate ()
  return (
    <header className="fixed top-0 left-0 w-full z-50 font-montserrat bg-white shadow-md">
      <nav className="flex items-center justify-between px-5 sm:px-10 md:px-20 py-3 gap-4 flex-wrap relative">
@ -33,9 +33,13 @@ const Header = () => {
          } sm:flex flex-col sm:flex-row list-none gap-5 sm:gap-10 absolute sm:relative top-full left-0 sm:top-auto sm:left-auto w-full sm:w-auto bg-white sm:bg-transparent p-5 sm:p-0 shadow-md sm:shadow-none z-40`}
        >
          <li className="relative group">
-            <a href="#home" className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]">
+          <button
+              onClick={() => navigate('/')}  // Menggunakan navigate() untuk berpindah ke halaman beranda
+              className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]"
+            >
              Beranda
-            </a>
+            </button>
+            
          </li>
          <li className="relative group">
            <a href="#produk" className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center">
@ -66,14 +70,17 @@ const Header = () => {
            </ul>
          </li>
          <li>
-            <a href="#hubungi" className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]">
+          <button
+              onClick={() => navigate('/Contact')} // Navigasi ke halaman kontak
+              className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]"
+            >
              Hubungi Kami
-            </a>
+            </button>
          </li>
        </ul>

        {/* Pencarian */}
-        <div className="relative flex items-center gap-2 w-full sm:w-auto order-2 sm:order-none md:ml-36">
+        <div className="relative flex items-center gap-2 w-full sm:w-auto order-2 sm:order-none md:ml-52">
          <input
            type="text"
            placeholder="Pencarian..."
@ -85,7 +92,7 @@ const Header = () => {
        </div>

        {/* Tombol Konsultasi */}
-        <button className="bg-[#DC0168] text-white px-5 py-2 text-sm font-bold rounded-md hover:bg-[#e6006e] transition order-3 sm:order-none w-full sm:w-auto mt-3 sm:mt-0">
+        <button className="bg-[#DC0168] h-[48px] md:w-[184px] md:h-[48px] text-white px-5 py-2 text-sm font-bold rounded-md hover:bg-[#e6006e] transition order-3 sm:order-none w-full sm:w-auto mt-3 sm:mt-0">
          Konsultasi Gratis
        </button>
      </nav>
--- a/src/components/beranda/Hero.jsx
+++ b/src/components/beranda/Hero.jsx
@ -1,9 +1,9 @@
-import {homeLogo,waIcon,homeImg} from '../assets';
+import {homeLogo,waIcon,homeImg} from '../../assets';


 function Hero() {
    return (
-        <div className="container py-0 px-0" id="Hero">
+        <div className="container py-0 px-0" id="Home">
            <div className="
                hero 
                grid grid-cols-1 lg:grid-cols-2 gap-10 
@ -30,7 +30,7 @@ function Hero() {
            {/* Buttons */}
            <div className="flex flex-col lg:flex-row mt-8 lg:-mt-28 lg:ml-28 gap-6 items-center px-4 lg:px-0">
                <button className="w-full lg:w-[270px] h-[70px] btn2 flex items-center justify-center py-3 border-2 border-[#DC0168] rounded-[14px] text-[#DC0168] font-bold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
-                    <img src={waIcon} alt="WhatsApp Icon" className="mr-2 h-[1.2rem] w-auto" />
+                    <img src={waIcon} alt="WhatsApp Icon" className="mr-2 h-[30px] w-[30px]" />
                    Konsultasi Gratis
                </button>
                <button className="w-full lg:w-[276px] h-[70px] btn2 flex items-center justify-center py-3 px-8 rounded-[14px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-bold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
--- a/src/components/beranda/Kenapa.jsx
+++ b/src/components/beranda/Kenapa.jsx
@ -1,4 +1,4 @@
-import {imgLeft,chek2,waIcon,circle1,circle2} from '../assets'
+import {imgLeft,chek2,waIcon,circle1,circle2} from '../../assets'

 function Kenapa() {
  return (
@ -20,9 +20,9 @@ function Kenapa() {
        </div>

        {/* Text Section */}
-        <div className="w-full md:w-1/2 p-6 md:p-10 flex flex-col items-center md:items-start text-center md:text-left">
+        <div className="w-full md:w-1/2 p-6 md:p-10 flex flex-col items-center md:items-start md:mr-28 text-center md:text-left">
          <h2 className="text-2xl md:text-3xl font-semibold text-gray-800">Kenapa Harus Rekan AI?</h2>
-          <p className="text-customBlack mt-4 text-sm md:max-w-[75%] md:leading-8 md:text-[18px]">
+          <p className="text-customBlack mt-4 text-sm md:max-w-[90%] md:leading-8 md:text-[20px]">
            Rekan AI adalah mitra inovasi bisnis Anda dalam menghadapi era
            digital. Kami menghadirkan teknologi kecerdasan buatan yang dirancang
            untuk meningkatkan efisiensi operasional, mempercepat proses, dan
@ -48,11 +48,11 @@ function Kenapa() {
          </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">
-            <button className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-pink-600 text-pink-700 font-bold rounded-[14px] hover:bg-white hover:bg-opacity-10 transition">
-              <img src={waIcon} alt="WhatsApp Icon" className="mr-2 w-4 h-4 md:w-5 md:h-5" />
+            <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">
+              <img src={waIcon} alt="WhatsApp Icon" className="mr-2 w-4 h-4 md:w-[30px] md:h-[30px]" />
              Konsultasi Gratis
            </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 font-bold rounded-[14px] hover:opacity-90 transition">
+            <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">
              Coba Sekarang
            </button>
          </div>
--- a/src/components/beranda/MasaDepan.jsx
+++ b/src/components/beranda/MasaDepan.jsx
@ -1,5 +1,5 @@
 import React from "react";
-import { waIcon } from "../assets";
+import { waIcon } from "../../assets";
 function MasaDepan() {
  return (
    <div className="flex flex-col items-center justify-center text-center w-full h-[65vh] mb-20 -mt-3">
@ -21,11 +21,11 @@ function MasaDepan() {

      {/* Button Section */}
      <div className="flex flex-col sm:flex-row gap-6 sm:gap-12 mt-8">
-        <button className="flex items-center justify-center bg-transparent text-pink-600 border-2 border-pink-600 rounded-[14px] font-medium text-lg sm:text-xl px-8 py-4 hover:bg-pink-50 transition-all duration-300 w-full sm:w-[270px] h-[70px]">
+        <button className="flex items-center justify-center bg-transparent text-pink-600 border-2 border-pink-600 rounded-[14px] font-medium text-lg sm:text-xl  py-4 hover:bg-pink-50 transition-all duration-300 w-full sm:w-[270px] h-[70px]">
          <img
            src={waIcon}
            alt="WhatsApp Icon"
-            className="mr-2 w-5 h-5"
+            className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]"
          />
          Konsultasi Gratis
        </button>
--- a/src/components/beranda/Mendukung.jsx
+++ b/src/components/beranda/Mendukung.jsx
@ -1,5 +1,5 @@
 import React from 'react';
-import { imgLeft1,imgLeft2,imgLeft3,imgRight } from '../assets';
+import { imgLeft1,imgLeft2,imgLeft3,imgRight } from '../../assets';

 function Mendukung() {
  const items = [
@ -13,7 +13,9 @@ function Mendukung() {
  {/* Left Content */}
  <div 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 Skala Usaha
+      Solusi Mendukung Bisnis di Setiap
+      <br />
+       Skala Usaha
    </p>
    <p className="text-[16px] md:text-[20px] font-normal text-customBlack text-left md:text-left">
      Kami menawarkan berbagai teknologi AI yang dapat mengotomatisasi proses, menganalisis data dengan akurat, dan memberikan pengalaman pelanggan yang lebih personal. Dengan implementasi yang mudah dan hasil yang cepat, Rekan AI menjadi mitra terbaik untuk mendukung pertumbuhan bisnis Anda.
--- a/src/components/beranda/Mitra.jsx
+++ b/src/components/beranda/Mitra.jsx
@ -1,58 +1,58 @@
 import React, { useState, useEffect } from "react";
-import {mitraImg} from "../assets";
-import {arrow1} from "../assets";
-import {arrow2} from "../assets";
-import {swipper1} from "../assets";
-import {swipper2} from "../assets";
-import {swipper3} from "../assets";
-import {swipper4} from "../assets";
-import {swipper5} from "../assets";
-import {swipper6} from "../assets";
-import {swipper7} from "../assets";
-import {swipper8} from "../assets";
-import {swipper9} from "../assets";
-import {swipper10} from "../assets";
-import {swipper11} from "../assets";
-import {swipper12} from "../assets";
-import {swipper13} from "../assets";
-import {swipper14} from "../assets";
-import {swipper15} from "../assets";
-import {swipper16} from "../assets";
-import {swipper17} from "../assets";
-import {swipper18} from "../assets";
-import {swipper19} from "../assets";
-import {swipper20} from "../assets";
-import {swipper21} from "../assets";
-import {swipper22} from "../assets";
-import {swipper23} from "../assets";
-import {swipper24} from "../assets";
-import { bgSwiper } from "../assets";
+import {mitraImg} from "../../assets";
+import {arrow1} from "../../assets";
+import {arrow2} from "../../assets";
+import {swipper1} from "../../assets";
+import {swipper2} from "../../assets";
+import {swipper3} from "../../assets";
+import {swipper4} from "../../assets";
+import {swipper5} from "../../assets";
+import {swipper6} from "../../assets";
+import {swipper7} from "../../assets";
+import {swipper8} from "../../assets";
+import {swipper9} from "../../assets";
+import {swipper10} from "../../assets";
+import {swipper11} from "../../assets";
+import {swipper12} from "../../assets";
+import {swipper13} from "../../assets";
+import {swipper14} from "../../assets";
+import {swipper15} from "../../assets";
+import {swipper16} from "../../assets";
+import {swipper17} from "../../assets";
+import {swipper18} from "../../assets";
+import {swipper19} from "../../assets";
+import {swipper20} from "../../assets";
+import {swipper21} from "../../assets";
+import {swipper22} from "../../assets";
+import {swipper23} from "../../assets";
+import {swipper24} from "../../assets";
+import { bgSwiper } from "../../assets";
 function Mitra() {
    const items = [
        { id: 1, logo: swipper1, name: "Item 1" },
        { id: 2, logo: swipper2, name: "Item 2" },
        { id: 3, logo: swipper3, name: "Item 3" },
        { id: 4, logo: swipper4, name: "Item 4" },
-        { id: 5, logo: swipper5, name: "Item 5" },
+        { id: 5, logo: swipper11, name: "Item 5" },
        { id: 6, logo: swipper6, name: "Item 6" },
        { id: 7, logo: swipper7, name: "Item 7" },
        { id: 8, logo: swipper8, name: "Item 8" },
        { id: 9, logo: swipper9, name: "Item 9" },
        { id: 10, logo: swipper10, name: "Item 10" },
-        { id: 11, logo: swipper11, name: "Item 11" },
+        { id: 11, logo: swipper13, name: "Item 11" },
        { id: 12, logo: swipper12, name: "Item 12" },
-        { id: 13, logo: swipper13, name: "Item 13" },
-        { id: 14, logo: swipper14, name: "Item 14" },
+        { id: 13, logo: swipper5, name: "Item 13" },
+        { id: 14, logo: swipper16, name: "Item 14" },
        { id: 15, logo: swipper15, name: "Item 15" },
-        { id: 16, logo: swipper16, name: "Item 16" },
-        { id: 17, logo: swipper17, name: "Item 17" },
+        { id: 16, logo: swipper17, name: "Item 16" },
+        { id: 17, logo: swipper24, name: "Item 17" },
        { id: 18, logo: swipper18, name: "Item 18" },
        { id: 19, logo: swipper19, name: "Item 19" },
        { id: 20, logo: swipper20, name: "Item 20" },
        { id: 21, logo: swipper21, name: "Item 21" },
        { id: 22, logo: swipper22, name: "Item 22" },
        { id: 23, logo: swipper23, name: "Item 23" },
-        { id: 24, logo: swipper24, name: "Item 24" },
+        { id: 24, logo: swipper14, name: "Item 24" },
    ];

    const [currentIndex, setCurrentIndex] = useState(0);
--- a/src/components/beranda/Solusi.jsx
+++ b/src/components/beranda/Solusi.jsx
@ -1,4 +1,4 @@
-import {card1,card2,card3,card4,chek} from '../assets';
+import {card1,card2,card3,card4,chek,} from '../../assets';


 function Solusi() {
@ -30,7 +30,7 @@ function Solusi() {
      <div className="text-center mb-12">
        <div className="flex flex-col md:flex-row items-center justify-center gap-4">
          <h1 className="text-2xl md:text-[32px] font-semibold">Ragam Solusi Terbaik Dari</h1>
-          <span className="flex items-center justify-center text-lg md:text-2xl text-customWhite bg-customRed rounded-xl font-bold w-[194px] h-[48px] text-center">
+          <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>
@ -44,7 +44,7 @@ function Solusi() {
        {cards.map((card, index) => (
          <div
            key={index}
-            className="bg-customWhite rounded-xl shadow-md p-6 flex flex-col items-center h-[681px] w-[402px]"
+            className="bg-customWhite rounded-xl border p-6 flex flex-col items-center h-[681px] w-[402px]"
          >
            <img src={card.image} alt={`Card ${index + 1}`} className="w-[130px] h-[170px] md:w-auto md:h-auto xl:w-auto xl:h-auto 2xl:w-auto 2xl:h-auto mb-6" />
            <p className="text-customBlack text-left mt-4 flex-1">{card.description}</p>
@ -55,7 +55,7 @@ function Solusi() {
                </li>
              ))}
            </ul>
-            <button className="w-[355px] h-[62px] bg-white border-[1px] shadow-sm shadow-zinc-800 border-blue-600 text-blue-600 font-semibold py-2 px-4 rounded-[18px] hover:bg-blue-600 hover:text-white transition duration-300">
+            <button className="w-[355px] h-[62px] bg-white border-[1px] shadow-sm shadow-zinc-800 border-blue-600 text-customBlue font-medium py-2 px-4 rounded-[18px] hover:bg-blue-600 hover:text-white transition duration-300">
              Selengkapnya <span>&rarr;</span>
            </button>
          </div>
--- a/src/components/beranda/WhatsAppButon.jsx
+++ b/src/components/beranda/WhatsAppButon.jsx
@ -1,4 +1,4 @@
-import WaButtons from '../assets/image/Whatsapp.png';
+import WaButtons from '../../assets/image/Whatsapp.png';

 const WhatsAppButton = () => {
  return (
--- a/src/components/contact/BottomCTA.jsx
+++ b/src/components/contact/BottomCTA.jsx
@ -0,0 +1,44 @@
+import { wagreen } from "./asset"; // Import gambar WhatsApp untuk ikon
+
+const BottomCTA = () => {
+  return (
+    <section className="w-full bg-white text-center py-10 mb-[113px]">
+      {/* Bagian ini untuk menampilkan teks yang memberi tahu pengguna bahwa mereka bisa menghubungi jika masih ada pertanyaan */}
+      <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] 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">
+        Jika pertanyaan Anda belum terjawab di atas, jangan ragu untuk menghubungi kami melalui formulir<br />kontak atau email. Kami dengan senang hati akan membantu!
+      </p>
+
+      {/* Bagian tombol CTA */}
+      <div className="flex justify-center flex-col lg:flex-row mt-8 lg:mt-16 gap-6">
+        {/* Tombol Konsultasi Gratis dengan ikon WhatsApp */}
+        <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] text-[20px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
+          {/* Gambar WhatsApp di kiri tombol */}
+          <img src={wagreen} alt="WhatsApp Icon" className="mr-2 h-[1.2rem] w-auto" />
+          Konsultasi Gratis
+        </button>
+
+        {/* Tombol Coba Sekarang dengan efek gradient */}
+        <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 text-[20px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
+          Coba Sekarang
+        </button>
+      </div>
+    </section>
+  );
+};
+
+export default BottomCTA;
--- a/src/components/contact/CustomerService.jsx
+++ b/src/components/contact/CustomerService.jsx
@ -0,0 +1,73 @@
+import { email, phone, customer } from "./asset";
+
+const CustomerService = () => {
+    return (
+        <section className="main-container mt-[180px] mb-16 md:mt-20 flex flex-col md:flex-row justify-between items-center px-5 py-10 max-w-7xl mx-auto gap-10 md:mb-[150px] 2xl:px-20 2xl:gap-20">
+            {/* Container utama */}
+
+            <div className="w-full md:w-[773px] 2xl:w-[900px] h-auto gap-[29px] text-left">
+                {/* Teks dan informasi */}
+                <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{" "}
+                        <span className="hidden lg:inline">
+                            <br />
+                        </span>{" "}
+                        Anda Lebih Maju!
+                    </h2>
+                </div>
+                <p className="text-[#212121] leading-relaxed mb-6 text-[16px] md:text-[20px]">
+                    Butuh informasi lebih lanjut tentang produk atau solusi kami? Tim Rekan AI siap menjawab pertanyaan Anda dengan cepat dan
+                    profesional.
+                </p>
+                <div className="flex flex-col gap-6">
+                    <div className="flex items-start gap-6">
+                        <img
+                            src={email}
+                            alt="Email Icon"
+                            className="w-10 h-10 object-contain"
+                        />
+                        <div className="text-left">
+                            <p className="text-sm text-[#212121] md:text-[18px]">
+                                Kirim pertanyaan Anda ke{" "}
+                                <strong className="text-[#5B59E8] md:text-[18px]">
+                                    support@rekanai.com
+                                </strong>{" "}
+                                dan tim kami akan segera merespons.
+                            </p>
+                            
+                        </div>
+                    </div>
+                    <div className="flex items-start gap-6">
+                        <img
+                            src={phone}
+                            alt="Phone Icon"
+                            className="w-10 h-10 object-contain"
+                        />
+                        <div className="text-left text-[16px] md:text-[18px]">
+                            <p className=" text-[#212121]">
+                                Hubungi kami di{" "}
+                                <strong className="text-[#5B59E8]">
+                                    (+62) 123-4567-890
+                                </strong>
+                            </p>
+                            <p className=" text-[#212121]">
+                                (Senin - Jumat, 08:00 - 17:00 WIB).
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {/*RIGHT SECTION */}
+            <div className="flex-1 flex justify-center items-center">
+                <img
+                    src={customer}
+                    alt="Customer Service"
+                    className="w-full md:w-[400px] lg:w-[500px] 2xl:w-[600px] max-w-xs sm:max-w-sm md:max-w-md h-auto object-contain"
+                />
+            </div>
+        </section>
+    );
+};
+
+export default CustomerService;
--- a/src/components/contact/FAQSection.jsx
+++ b/src/components/contact/FAQSection.jsx
@ -0,0 +1,157 @@
+import { useState } from "react";
+
+const FAQ = () => {
+  // State untuk menyimpan indeks pertanyaan yang sedang dibuka
+  // Jika tidak ada pertanyaan yang terbuka, nilai adalah null
+  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
+    // 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?",
+      answer: (
+        <p>
+          Rekan AI adalah platform teknologi kecerdasan buatan (AI) yang
+          menyediakan solusi berbasis AI untuk meningkatkan efisiensi
+          operasional, analisis data, dan pengalaman pelanggan bagi UMKM hingga
+          perusahaan besar.
+        </p>
+      ),
+    },
+    {
+      question: "Apa saja produk yang ditawarkan oleh Rekan AI?",
+      answer: (
+        <div>
+          <p className="mb-1">Kami menawarkan beberapa produk unggulan, termasuk:</p>
+          <ul className="list-decimal list-inside space-y-1">
+            <li>
+              Rekan Doku: Solusi autentikasi dan manajemen dokumen digital.
+            </li>
+            <li>Rekan HR: Automasi dan optimalisasi proses HR.</li>
+            <li>
+              Rekan LLM: AI berbasis model bahasa besar untuk analisis dan
+              komunikasi.
+            </li>
+            <li>Rekan Veri: Verifikasi data yang cepat dan akurat.</li>
+          </ul>
+        </div>
+      ),
+    },
+    {
+      question: "Bagaimana cara menghubungi tim Rekan AI?",
+      answer: (
+        <div>
+          <p className="mb-1">Anda dapat menghubungi kami melalui:</p>
+          <ul className="list-decimal list-inside space-y-1">
+            <li>Email: support@rekanai.com</li>
+            <li>Telepon: (+62) 123-4567-890</li>
+            <li>WhatsApp: (+62) 812-3456-7890</li>
+          </ul>
+        </div>
+      ),
+    },
+    {
+      question: "Apakah solusi Rekan AI mudah diimplementasikan?",
+      answer: (
+        <p>
+          Ya, produk kami dirancang untuk integrasi yang mulus dengan sistem
+          bisnis Anda yang sudah ada. Kami juga menyediakan dukungan teknis
+          untuk memastikan implementasi berjalan lancar.
+        </p>
+      ),
+    },
+    {
+      question: "Apakah Rekan AI cocok untuk UMKM?",
+      answer: (
+        <p>
+          Tentu saja! Kami menawarkan solusi yang terjangkau, mudah digunakan,
+          dan dapat membantu UMKM meningkatkan efisiensi, mengurangi biaya
+          operasional, dan mempercepat pertumbuhan.
+        </p>
+      ),
+    },
+    {
+      question: "Bagaimana dengan keamanan data?",
+      answer: (
+        <p>
+          Keamanan adalah prioritas kami. Semua produk Rekan AI menggunakan
+          teknologi enkripsi canggih untuk melindungi data Anda dari ancaman
+          cyber.
+        </p>
+      ),
+    },
+    {
+      question: "Bagaimana saya memulai menggunakan produk Rekan AI?",
+      answer: (
+        <p>
+          Anda dapat memulai dengan menghubungi tim kami untuk demo produk atau
+          konsultasi gratis. Kami akan membantu Anda menemukan solusi yang
+          paling sesuai dengan kebutuhan bisnis Anda.
+        </p>
+      ),
+    },
+    {
+      question: "Apakah Rekan AI memiliki paket harga yang bisa dipilih?",
+      answer: (
+        <p>
+          Ya, kami dapat memberikan paket harga terbaik untuk solusi produk yang
+          Anda pilih. Informasi lebih lanjut silakan hubungi kami dan
+          konsultasikan kebutuhan Anda secara gratis.
+        </p>
+      ),
+    },
+  ];
+
+  return (
+    <div className="text-[#212121] max-w-4xl mx-auto px-4 py-6 text-center ">
+      {/* 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
+        </h1>
+        <h2 className="text-[20px] font-normal leading-[30px] tracking-[0.005em] text-center mb-6">
+          Pertanyaan Umum tentang Rekan AI
+        </h2>
+      </div>
+
+      {/* Bagian FAQ */}
+      <div className="space-y-[22px] mb-[110px] mt-[60px]">
+        {faqData.map((item, index) => (
+          <div
+            key={index}
+            className="text-[20px] border border-[#5B59E8] p-[5px] rounded-[12px] overflow-hidden "
+          >
+            {/* 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
+            >
+              <span className="font-[550]">{item.question}</span>
+              <span className="text-[39px] text-[#845FF1] mr-4">{openQuestion === index ? "–" : "+"}</span> {/* Tampilkan tanda buka atau tutup */}
+            </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>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default FAQ;
--- a/src/components/contact/Footer.jsx
+++ b/src/components/contact/Footer.jsx
@ -0,0 +1,106 @@
+// Import gambar-gambar yang digunakan dalam komponen Footer
+import { nvidia,kmn,kominfo,ojk,facebook,x,instagram,component11 } from "./asset"; // Gambar logo sebagai partner dan logo medsos dan logo rekanai
+
+function Footer() {
+  return (
+    <footer className="bg-customGrey py-10 text-[#212121]">
+      {/* 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">
+          <img
+            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="flex mb-5">
+            <p>
+              <strong className="text-[25px] text-[#5B59E8]">Rekan AI</strong>{" "}
+              <br />
+              <span className="text-[#5B59E8] italic">
+                Reimagine Your Business with AI.
+              </span>
+            </p>
+          </div>
+          <p className="mb-[39px] text-[18px]">
+            Jl. Anggrek No.6, Sawah Lama, Kec. Ciputat, Kota Tangerang Selatan,
+            Banten 15413
+          </p>
+          <p className="mb-4 text-[18px]">Lebih dekat dengan Kami</p>
+          <div className="flex space-x-3">
+            {/* Tautan ke media sosial */}
+            <a href="#">
+              <img src={instagram} alt="Instagram" className="w-5 h-5" /> {/* Ikon Instagram */}
+            </a>
+            <a href="#">
+              <img src={facebook} alt="Facebook" className="w-5 h-5" /> {/* Ikon Facebook */}
+            </a>
+            <a href="#">
+              <img src={x} alt="Twitter" className="w-5 h-5" /> {/* Ikon Twitter (X) */}
+            </a>
+          </div>
+        </div>
+
+        {/* Kolom 3: Produk perusahaan */}
+        <div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
+          <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 Veri</li> {/* Produk: Verifikasi data */}
+            <li>Rekan HR</li> {/* Produk: Manajemen SDM */}
+            <li>Rekan LLM</li> {/* Produk: Model bahasa besar */}
+          </ul>
+        </div>
+
+        {/* Kolom 4: Solusi yang ditawarkan */}
+        <div className="flex-1 mb-5 sm:mb-0 sm:pl-0 md:mx-[10runrpx] 2xl:mx-[-120px]">
+          <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>UMKM</li> {/* Solusi untuk Usaha Mikro, Kecil, dan Menengah */}
+            <li>Corporate Business</li> {/* Solusi untuk perusahaan besar */}
+          </ul>
+        </div>
+
+        {/* Kolom 5: Informasi kontak */}
+        <div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
+          <h4 className="text-base font-semibold mb-4">Hubungi Kami</h4>
+          <ul className="space-y-4 text-[18px]">
+            <li>Email: support@rekanai.com</li> {/* Email dukungan */}
+            <li>Phone: +68452098</li> {/* Nomor telepon */}
+            <li>F.A.Q</li> {/* Halaman Pertanyaan yang Sering Diajukan */}
+          </ul>
+        </div>
+
+        {/* Kolom 6: Partner perusahaan */}
+        <div className="mb-5 sm:mb-0 sm:pl-0">
+          <div className="mb-4">
+            <img
+              src={nvidia} // Gambar logo partner 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={kominfo} alt="Partner 2" className="w-[63px] h-[62px]" /> {/* Gambar logo partner Kominfo */}
+            <img src={ojk} alt="Partner 3" className="w-[77px] h-[60px]" /> {/* Gambar logo partner OJK */}
+          </div>
+        </div>
+      </div>
+
+      {/* Bagian hak cipta */}
+      <div className="text-left mt-[92.78px] mx-5 sm:mx-28 text-xs">
+        <p>
+          © Copyright 2025 Rekan AI. Seluruh hak cipta dilindungi undang-undang
+        </p>
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;
--- a/src/components/contact/FormSection.jsx
+++ b/src/components/contact/FormSection.jsx
@ -0,0 +1,152 @@
+import { img10 } from "./asset";
+
+const ContactForm = () => {
+  return (
+    <div
+      className="flex min-h-screen items-center justify-center p-5 text-white rounded-tl-[80px] rounded-tr-[80px]"
+      style={{
+        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",
+      }}
+    >
+      <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">
+        {/* Bagian Kiri */}
+        <div className="flex-1 p-5 mb-10 lg:mb-0 md:ml-28 2xl:mt-28 md:max-w-[40%]">
+          {/* Judul utama */}
+          <h2 className="text-[32px] font-[550] leading-[48px] tracking-[0.005em] text-left mt-16 mb-[39px] 2xl:text-[36px] 2xl:leading-[52px]">
+            Isi formulir di samping ini dan kami akan menghubungi Anda secepat
+            mungkin
+          </h2>
+
+          {/* Deskripsi tambahan */}
+          <p className="text-[18px] font-[400] leading-[30px] tracking-[0.005em] text-left mb-6 2xl:text-[20px] 2xl:leading-[34px]">
+            Kami percaya bahwa kolaborasi adalah kunci kesuksesan. Hubungi kami
+            hari ini, dan mari wujudkan masa depan bisnis Anda bersama Rekan AI!
+          </p>
+        </div>
+
+        {/* Bagian Form */}
+
+        <div
+          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]"
+        >
+
+
+          {/* 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>
+
+          {/* Formulir input */}
+          <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
+                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
+                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, "");
+                }}
+              />
+            </div>
+
+            {/* Input Email */}
+            <div>
+              <label className="text-[#6B5CEA]">Email*</label>
+              <input
+                type="email"
+                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"
+              />
+            </div>
+
+            {/* Input Nama Organisasi */}
+            <div>
+              <label className="text-[#6B5CEA]">
+                Nama Organisasi/Perusahaan
+              </label>
+              <input
+                type="text"
+                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
+                required
+                className="appearance-none w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
+              >
+                <option value="">Pilih kebutuhan Anda</option>
+                <option value="konsultasi">Konsultasi</option>
+                <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]"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    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
+                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"
+            >
+              Kirim Pesan
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ContactForm;
--- a/src/components/contact/asset/Component
+++ b/src/components/contact/asset/Component
--- a/src/components/contact/asset/Frame.png
+++ b/src/components/contact/asset/Frame.png
--- a/src/components/contact/asset/Frame27.png
+++ b/src/components/contact/asset/Frame27.png
--- a/src/components/contact/asset/Whatsapp22.png
+++ b/src/components/contact/asset/Whatsapp22.png
--- a/src/components/contact/asset/arrow.png
+++ b/src/components/contact/asset/arrow.png
--- a/src/components/contact/asset/customer.png
+++ b/src/components/contact/asset/customer.png
--- a/src/components/contact/asset/email.png
+++ b/src/components/contact/asset/email.png
--- a/src/components/contact/asset/facebook.png
+++ b/src/components/contact/asset/facebook.png
--- a/src/components/contact/asset/image
+++ b/src/components/contact/asset/image
--- a/src/components/contact/asset/index.js
+++ b/src/components/contact/asset/index.js
@ -0,0 +1,25 @@
+import row from './arrow.png';
+import component11 from './Component 11.png';
+import customer from './customer.png';
+import email from './email.png';
+import facebook from './facebook.png';
+import frame from './Frame.png';
+import frame27 from './Frame27.png';
+import img10 from './image 10.png';
+import instagram from './instagram.png';
+import kmn from './kementerian.png';
+import kominfo from './kominfo.png';
+import Logo1 from './logo.png';
+import nvidia from './nvidia.png';
+import ojk from './ojk.png';
+import phone from './phone.png';
+import search from './search.png';
+import telephone from './telephone.png';
+import wagreen from './whatsapp-color_svgrepo.com.png';
+import wabutton from './Whatsapp22.png';
+import x from './x.png';
+
+
+export{
+    row,component11,customer,email,facebook,frame,frame27,img10,instagram,kmn,kominfo,Logo1,nvidia,ojk,phone,search,telephone,wagreen,wabutton,x
+}
--- a/src/components/contact/asset/instagram.png
+++ b/src/components/contact/asset/instagram.png
--- a/src/components/contact/asset/kementerian.png
+++ b/src/components/contact/asset/kementerian.png
--- a/src/components/contact/asset/kominfo.png
+++ b/src/components/contact/asset/kominfo.png
--- a/src/components/contact/asset/logo.png
+++ b/src/components/contact/asset/logo.png
--- a/src/components/contact/asset/nvidia.png
+++ b/src/components/contact/asset/nvidia.png
--- a/src/components/contact/asset/ojk.png
+++ b/src/components/contact/asset/ojk.png
--- a/src/components/contact/asset/phone.png
+++ b/src/components/contact/asset/phone.png
--- a/src/components/contact/asset/search.png
+++ b/src/components/contact/asset/search.png
--- a/src/components/contact/asset/telephone.png
+++ b/src/components/contact/asset/telephone.png
--- a/src/components/contact/asset/whatsapp-color_svgrepo.com.png
+++ b/src/components/contact/asset/whatsapp-color_svgrepo.com.png
--- a/src/components/contact/asset/x.png
+++ b/src/components/contact/asset/x.png
--- a/src/pages/Contact.jsx
+++ b/src/pages/Contact.jsx
@ -0,0 +1,23 @@
+import Header from "../components/beranda/Header"
+import CustomerService from "../components/contact/CustomerService"
+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"
+function Contact() {
+  return (
+    <>
+    <Header />
+    <CustomerService />
+    <FormSection />
+    <FAQSection />
+    <BottomCTA />
+    <Footer />
+    <WhatsAppButton />
+    </>
+
+  )
+}
+
+export default Contact
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@ -0,0 +1,31 @@
+import Header from "../components/beranda/Header"
+import Hero from "../components/beranda/Hero"
+import Solusi from "../components/beranda/Solusi"
+import Banner from "../components/beranda/Banner"
+import Kenapa from "../components/beranda/Kenapa"
+import Mitra from '../components/beranda/Mitra'
+import Mendukung from "../components/beranda/Mendukung"
+import Footer from "../components/contact/Footer"
+import MasaDepan from "../components/beranda/MasaDepan"
+import WhatsAppButton from "../components/beranda/WhatsAppButon"
+
+
+function Home() {
+  return (
+    <>
+        <Header />
+        <Hero />
+        <Solusi />
+        <Banner />
+        <Kenapa />
+        <Mitra />
+        <Mendukung />
+        <MasaDepan />
+        <Footer />
+        <WhatsAppButton />
+    </>
+
+  )
+}
+
+export default Home