add hubungi kami

src/components/beranda/Banner.jsx

@@ -0,0 +1,71 @@
+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(248.72deg, #5B59E0 50.11%, rgba(202, 43, 104, 0.4) 90%), url(${bgcBanner})`,
+                backgroundSize: 'cover',
+                backgroundPosition: 'center',
+                backgroundRepeat: 'no-repeat',
+                backgroundBlendMode: 'multiply',
+            }}
+        >
+            {/* 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" />
+                <img src={L2} alt="image 2" className="w-full rounded-lg shadow-lg object-cover" />
+                <img src={L3} alt="image 3" className="w-full rounded-lg shadow-lg object-cover" />
+                <img src={L4} alt="image 4" className="w-full rounded-lg shadow-lg object-cover" />
+            </div>
+
+            {/* Teks dan tombol */}
+            <div className="px-4 mx-auto text-center w-full mt-8 md:mt-0">
+                <div className="text-customWhite max-w-[90%] md:max-w-[45%] mx-auto">
+                    <h1 className="text-xl md:text-[32px] font-semibold text-center leading-10">
+                        Bersama Rekan AI, Wujudkan Masa Depan Bisnis yang Lebih Inovatif dan Kompetitif.
+                    </h1>
+                </div>
+                <p className="mt-4 md:mt-14 max-w-[90%] md:max-w-[750px] mx-auto text-customWhite text-sm md:text-[20px] md:font-extralight md:leading-7">
+                    Dari autentikasi dokumen hingga analisis data dan automasi HR, Rekan AI menawarkan produk-produk cerdas yang siap membantu bisnis Anda tumbuh dan bersaing di pasar yang dinamis.
+                </p>
+                <div className="flex flex-col md:flex-row gap-4 mt-4 md:mt-20 justify-center">
+                    <button className="flex items-center justify-center w-full md:w-[317px] h-[50px] md:h-[70px] rounded-2xl border-[1px] border-white text-white text-sm md:text-lg font-bold hover:bg-white hover:bg-opacity-10">
+                        <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">
+                        Coba Sekarang
+                    </button>
+                </div>
+            </div>
+
+            {/* Gambar L1-L4 untuk desktop */}
+            <div className="absolute hidden md:grid top-[50%] left-0 transform -translate-y-1/2 grid-cols-2 gap-4 max-w-full ml-16">
+                <img src={L1} alt="image 1" className="w-auto rounded-lg shadow-lg object-cover" />
+                <img src={L2} alt="image 2" className="w-auto rounded-lg shadow-lg object-cover mt-20" />
+                <img src={L3} alt="image 3" className="w-auto rounded-lg shadow-lg object-cover" />
+                <img src={L4} alt="image 4" className="w-auto rounded-lg shadow-lg object-cover -mt-10" />
+            </div>
+
+            {/* Gambar R1-R4 untuk desktop */}
+            <div className="absolute hidden md:grid top-[50%] right-0 transform -translate-y-1/2 grid-cols-2 gap-4 max-w-full justify-end mr-16">
+                <img src={R1} alt="image 1" className="w-auto rounded-lg shadow-lg object-cover mt-20 ml-9" />
+                <img src={R2} alt="image 2" className="w-auto rounded-lg shadow-lg object-cover -ml-7" />
+                <img src={R3} alt="image 3" className="w-auto rounded-lg shadow-lg object-cover ml-7" />
+                <img src={R4} alt="image 4" className="w-auto rounded-lg shadow-lg object-cover" />
+            </div>
+
+            {/* Gambar R1-R4 untuk mobile */}
+            <div className="grid md:hidden grid-cols-2 gap-4 px-4 mt-8 mb-8">
+                <img src={R1} alt="image 1" className="w-full rounded-lg shadow-lg object-cover" />
+                <img src={R2} alt="image 2" className="w-full rounded-lg shadow-lg object-cover" />
+                <img src={R3} alt="image 3" className="w-full rounded-lg shadow-lg object-cover" />
+                <img src={R4} alt="image 4" className="w-full rounded-lg shadow-lg object-cover" />
+            </div>
+        </div>
+    )
+}
+
+export default Banner

src/components/beranda/Footer.jsx

@@ -0,0 +1,107 @@
+import { nvdia,kmn,kominfo,ojk,x,instagram,facebook,frame, } from "../../assets";
+
+
+function Footer() {
+  return (
+    <footer className="bg-customGrey h-[506px] 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={frame} // 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 font-bold">
+                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,
+            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 */}
+            </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 md:ml-16 sm:pl-0">
+          <h4 className="text-[18px] 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 md:-mx-28 sm:mb-0 sm:pl-0">
+          <h4 className="text-[18px] 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-[18px] 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={nvdia} // 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-40 mx-5 sm:mx-28 text-xs">
+        <p>
+          © Copyright 2025 Rekan AI. Seluruh hak cipta dilindungi undang-undang
+        </p>
+      </div>
+    </footer>
+  );
+}
+
+
+export default Footer;

src/components/beranda/Header.jsx

@@ -0,0 +1,103 @@
+import { useState } from 'react';
+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">
+        {/* Logo */}
+        <div className="flex items-center gap-2">
+          <img src={Logo1} alt="Logo" className="w-[203px] h-[36.05px]" />
+        </div>
+
+        {/* Tombol Hamburger (Responsive) */}
+        <div className="sm:hidden flex items-center">
+          <button
+            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+            className="text-[#212121]"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Menu Navigasi */}
+        <ul
+          className={`${
+            isMobileMenuOpen ? 'flex' : 'hidden'
+          } sm:flex flex-col sm:flex-row list-none gap-5 sm:gap-10 absolute sm:relative top-full left-0 sm:top-auto sm:left-auto w-full sm:w-auto bg-white sm:bg-transparent p-5 sm:p-0 shadow-md sm:shadow-none z-40`}
+        >
+          <li className="relative group">
+          <button
+              onClick={() => navigate('/')}  // Menggunakan navigate() untuk berpindah ke halaman beranda
+              className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]"
+            >
+              Beranda
+            </button>
+            
+          </li>
+          <li className="relative group">
+            <a href="#produk" className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center">
+              Produk
+              <img src={row} alt="arrow" className="ml-1" />
+            </a>
+            <ul className="absolute left-0 top-full hidden w-40 bg-white list-none py-2 shadow-lg group-hover:block z-50">
+              <li className="px-5 py-2 hover:text-[#5a55ff]">
+                <a href="#produk1" className="text-[#212121]">Produk 1</a>
+              </li>
+              <li className="px-5 py-2 hover:text-[#5a55ff]">
+                <a href="#produk2" className="text-[#212121]">Produk 2</a>
+              </li>
+            </ul>
+          </li>
+          <li className="relative group">
+            <a href="#solusi" className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center">
+              Solusi
+              <img src={row} alt="arrow" className="ml-1" />
+            </a>
+            <ul className="absolute left-0 top-full hidden w-40 bg-white list-none py-2 shadow-lg group-hover:block z-50">
+              <li className="px-5 py-2 hover:text-[#5a55ff]">
+                <a href="#solusi1" className="text-[#212121]">Solusi 1</a>
+              </li>
+              <li className="px-5 py-2 hover:text-[#5a55ff]">
+                <a href="#solusi2" className="text-[#212121]">Solusi 2</a>
+              </li>
+            </ul>
+          </li>
+          <li>
+          <button
+              onClick={() => navigate('/Contact')} // Navigasi ke halaman kontak
+              className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]"
+            >
+              Hubungi Kami
+            </button>
+          </li>
+        </ul>
+
+        {/* Pencarian */}
+        <div className="relative flex items-center gap-2 w-full sm:w-auto order-2 sm:order-none md:ml-52">
+          <input
+            type="text"
+            placeholder="Pencarian..."
+            className="w-full sm:w-[592px] h-12 px-4 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#5a55ff]"
+          />
+          <button className="absolute right-4 sm:right-2 text-gray-500 hover:text-[#5a55ff]">
+            <img src={search} alt="search" className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Tombol Konsultasi */}
+        <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>
+    </header>
+  );
+};
+
+export default Header;

src/components/beranda/Hero.jsx

@@ -0,0 +1,44 @@
+import {homeLogo,waIcon,homeImg} from '../../assets';
+
+
+function Hero() {
+    return (
+        <div className="container py-0 px-0" id="Home">
+            <div className="
+                hero 
+                grid grid-cols-1 lg:grid-cols-2 gap-10 
+                mt-56 sm:mt-28 md:mt-32 xl:mt-36 2xl:mt-24
+                2xl:ml-28 xl:ml-24 items-center">
+                
+                {/* Left Section */}
+                <div className="box text-left px-4 lg:px-0 md:-ml-6 md:-mt-20">
+                    <img className="mb-5 mx-auto lg:mx-0" src={homeLogo} alt="Home Logo" />
+                    <h1 className="text-customBlack text-[24px] lg:text-[32px] font-semibold py-4">
+                        Ciptakan Pengalaman Pelanggan yang Tak Terlupakan dengan Solusi AI dari Rekan AI.
+                    </h1>
+                    <p className="text-customBlack text-[16px] lg:text-[20px]">
+                        Rekan AI menghadirkan teknologi kecerdasan buatan untuk membantu bisnis Anda beradaptasi dan tumbuh di era digital. Dari automasi hingga analisis data, kami membawa solusi cerdas yang mudah diimplementasikan.
+                    </p>
+                </div>
+
+                {/* Right Section (Home Image) */}
+                <div className="box flex justify-center 2xl:ml-20 2xl:mr-[-11rem] px-4 lg:px-0">
+                    <img src={homeImg} alt="Home Image" className="w-full max-w-[807px] h-auto" />
+                </div>
+            </div>
+
+            {/* Buttons */}
+            <div className="flex flex-col lg:flex-row mt-8 lg:-mt-28 lg:ml-28 gap-6 items-center px-4 lg:px-0">
+                <button className="w-full lg:w-[270px] h-[70px] btn2 flex items-center justify-center py-3 border-2 border-[#DC0168] rounded-[14px] text-[#DC0168] font-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-[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">
+                    Coba Sekarang
+                </button>
+            </div>
+        </div>
+    );
+}
+
+export default Hero;

src/components/beranda/Kenapa.jsx

@@ -0,0 +1,65 @@
+import {imgLeft,chek2,waIcon,circle1,circle2} from '../../assets'
+
+function Kenapa() {
+  return (
+    <div className="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">
+        {/* 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" />
+          <img src={circle2} alt="Circle 2" className="w-auto h-auto" />
+        </div>
+
+        {/* Image Section */}
+        <div className="relative w-full md:w-1/2 p-5 flex justify-center md:ml-14 md:justify-start">
+          <img
+            src={imgLeft}
+            alt="Woman with Tablet"
+            className="w-[300px] h-auto md:w-[654.5px] md:h-[609.67px]"
+          />
+        </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">
+          <h2 className="text-2xl md:text-3xl font-semibold text-gray-800">Kenapa Harus Rekan AI?</h2>
+          <p className="text-customBlack mt-4 text-sm md:max-w-[90%] md:leading-8 md:text-[20px]">
+            Rekan AI adalah mitra inovasi bisnis Anda dalam menghadapi era
+            digital. Kami menghadirkan teknologi kecerdasan buatan yang dirancang
+            untuk meningkatkan efisiensi operasional, mempercepat proses, dan
+            memberikan wawasan berbasis data yang akurat.
+          </p>
+          <ul className="mt-8 space-y-4 md:space-y-6 text-sm md:max-w-[70%] md:text-base text-customBlack font-medium">
+            <li className="flex items-center">
+              <img src={chek2} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
+              Automasi proses untuk mengurangi biaya dan meningkatkan produktivitas.
+            </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">
+            <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 md:text-xl font-medium rounded-[14px] hover:opacity-90 transition">
+              Coba Sekarang
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Kenapa;

src/components/beranda/MasaDepan.jsx

@@ -0,0 +1,40 @@
+import React from "react";
+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">
+      {/* 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-pink-600 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-black">
+            Masa Depan Bisnis, Dimulai Hari Ini
+          </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">
+          Bersama Rekan AI, bawa bisnis Anda menuju masa depan yang lebih
+          cerdas, efisien, dan kompetitif.
+        </p>
+      </div>
+
+      {/* 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  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-4 w-5 h-5 md:w-[30px] md:h-[30px]"
+          />
+          Konsultasi Gratis
+        </button>
+        <button className="flex items-center justify-center bg-gradient-to-r from-pink-600 to-blue-600 text-white rounded-[14px] font-medium text-lg sm:text-xl px-8 py-4 hover:opacity-90 transition-all duration-300 w-full sm:w-[276px] h-[70px]">
+          Coba Sekarang
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default MasaDepan;

src/components/beranda/Mendukung.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { imgLeft1,imgLeft2,imgLeft3,imgRight } from '../../assets';
+
+function Mendukung() {
+  const items = [
+    { id: 1, image: imgLeft1, title: 'Personal' },
+    { id: 2, image: imgLeft2, title: 'UMKM' },
+    { id: 3, image: imgLeft3, title: 'Corporate Business' },
+  ];
+
+  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">
+  {/* 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
+      <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.
+    </p>
+
+    <div className="flex flex-col md:flex-row justify-center md:justify-between gap-6">
+  {items.map((item) => (
+    <div key={item.id} 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" 
+      />
+      {/* 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">
+        {item.title}
+      </p>
+    </div>
+  ))}
+</div>
+
+  </div>
+
+  {/* Right Content */}
+  <div 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-full h-auto" />
+  </div>
+</div>
+
+  );
+}
+
+export default Mendukung;
+        

src/components/beranda/Mitra.jsx

@@ -0,0 +1,154 @@
+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";
+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: 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: swipper13, name: "Item 11" },
+        { id: 12, logo: swipper12, name: "Item 12" },
+        { id: 13, logo: swipper5, name: "Item 13" },
+        { id: 14, logo: swipper16, name: "Item 14" },
+        { id: 15, logo: swipper15, name: "Item 15" },
+        { 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: swipper14, name: "Item 24" },
+    ];
+
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const itemsPerSlide = 4;
+
+    const handleNext = () => {
+        if (currentIndex < items.length / itemsPerSlide - 1) {
+            setCurrentIndex((prevIndex) => prevIndex + 1);
+        } else {
+            setCurrentIndex(0);
+        }
+    };
+
+    const handlePrev = () => {
+        if (currentIndex > 0) {
+            setCurrentIndex((prevIndex) => prevIndex - 1);
+        } else {
+            setCurrentIndex(Math.ceil(items.length / itemsPerSlide) - 1);
+        }
+    };
+
+    // Auto-slide functionality
+    useEffect(() => {
+        const interval = setInterval(() => {
+            handleNext();
+        }, 8900); // Slider bergerak setiap 4 detik
+
+        return () => clearInterval(interval); // Membersihkan interval saat komponen unmount
+    }, [currentIndex]);
+
+    return (
+        <>
+            <div
+                className="bg-cover bg-center h-[986px] flex items-center justify-center"
+                style={{ backgroundImage: `url(${bgSwiper})` }}
+            >
+                <div className="bg-gradient-to-b from-[#e5e4ff] via-[#A1A0F2] to-[#5B59E8] w-[90%] md:w-[1214px] h-[640px] rounded-[36px] flex items-center justify-center relative">
+                    <div className="text-white ml-4 md:ml-20 -mt-8 md:-mt-20">
+                        <div className="bg-white text-[#DC0168] flex items-center justify-center text-center rounded-[18px] shadow-md w-[90%] md:w-[510px] h-[56px]">
+                            <p className="text-sm md:text-lg font-semibold m-0">
+                                Saatnya Melangkah lebih jauh untuk bisnis Anda!
+                            </p>
+                        </div>
+                        <h1 className="text-[18px] md:text-[36px] leading-[28px] md:leading-[54px] font-semibold text-left mt-4 md:mt-6">
+                            Bergabunglah bersama Mereka yang telah mempercayai Kami sebagai mitra terbaik dalam memberikan solusi yang efesien.
+                        </h1>
+                    </div>
+                    <div className="ml-auto -mt-8 mr-4 md:-mt-20 md:mr-5 hidden md:block">
+                        {/* Gambar hanya muncul di tampilan medium ke atas */}
+                        <img src={mitraImg} alt="Mitra" className="w-[1745px] h-[402px]" />
+                    </div>
+                </div>
+            </div>
+
+            <section className="flex justify-center 2xl:w-[1516px] w-screen mb-40 -mt-[350px] md:-mt-[290px] mx-auto">
+                <div className="bg-customWhite shadow-lg rounded-[37px] px-4 md:px-8 py-4 flex items-center gap-2 md:gap-4 w-[95%] md:w-[80%] mx-auto z-10 overflow-hidden">
+                    {/* Prev Button (Hidden on Mobile) */}
+                    <button onClick={handlePrev} className="hidden md:block">
+                        <img src= {arrow1} alt="Previous" className="w-4 h-4 md:w-6 md:h-6" />
+                    </button>
+                    {/* Carousel Items */}
+                    <div className="overflow-hidden flex-1">
+                        <div
+                            className="flex transition-transform duration-[10500ms] ease-in-out"
+                            style={{ transform: `translateX(-${currentIndex * 100}%)` }}
+                        >
+                            {Array.from(
+                                { length: Math.ceil(items.length / itemsPerSlide) },
+                                (_, slideIndex) => (
+                                    <div
+                                        className="flex-shrink-0 w-full grid grid-cols-2 md:grid-cols-4 gap-1 md:gap-4"
+                                        key={slideIndex}
+                                    >
+                                        {items
+                                            .slice(slideIndex * itemsPerSlide, (slideIndex + 1) * itemsPerSlide)
+                                            .map((item) => (
+                                                <div className="flex flex-col items-center" key={item.id}>
+                                                    <img src={item.logo} alt={item.name} className="w-auto h-auto" />
+                                                </div>
+                                            ))}
+                                    </div>
+                                )
+                            )}
+                        </div>
+                    </div>
+                    {/* Next Button (Hidden on Mobile) */}
+                    <button onClick={handleNext} className="hidden md:block">
+                        <img src={arrow2} alt="Next" className="w-4 h-4 md:w-6 md:h-6" />
+                    </button>
+                </div>
+            </section>
+
+
+
+        </>
+    );
+}
+
+export default Mitra;

src/components/beranda/Solusi.jsx

@@ -0,0 +1,71 @@
+import {card1,card2,card3,card4,chek,} from '../../assets';
+
+
+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.',
+      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.',
+      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.',
+      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.',
+      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">
+        <div className="flex flex-col md:flex-row items-center justify-center gap-4">
+          <h1 className="text-2xl md:text-[32px] font-semibold">Ragam Solusi Terbaik Dari</h1>
+          <span className="flex items-center justify-center text-lg md:text-2xl text-customWhite bg-customRed rounded-[19px] font-bold w-[194px] h-[48px] text-center">
+            #Rekan AI
+          </span>
+        </div>
+        <p className="text-customBlack md:text-[20px] mt-4 md:max-w-[85%] md:ml-24 text-center items-center">
+          Kami menyediakan berbagai produk berbasis AI yang dirancang khusus untuk mendukung bisnis Anda dari berbagai aspek.
+        </p>
+      </div>
+
+
+      <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]"
+          >
+            <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>
+            <ul className="text-left space-y-4 mb-8">
+              {card.features.map((feature, i) => (
+                <li key={i} className="flex items-center gap-2">
+                  <img src={chek} alt="Check" className="mr-2 w-auto h-auto" /> {feature}
+                </li>
+              ))}
+            </ul>
+            <button className="w-[355px] h-[62px] bg-white border-[1px] shadow-sm shadow-zinc-800 border-blue-600 text-customBlue font-medium py-2 px-4 rounded-[18px] hover:bg-blue-600 hover:text-white transition duration-300">
+              Selengkapnya <span>&rarr;</span>
+            </button>
+          </div>
+        ))}
+      </div>
+
+
+
+    </section>
+  );
+}
+
+export default Solusi;

src/components/beranda/WhatsAppButon.jsx

@@ -0,0 +1,15 @@
+import WaButtons from '../../assets/image/Whatsapp.png';
+
+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]">
+      <img
+        className="w-10 h-10 md:w-12 md:h-12"
+        src={WaButtons}
+        alt="WhatsApp"
+      />
+    </div>
+  );
+};
+
+export default WhatsAppButton;