add solusi

src/App.jsx

@@ -1,12 +1,18 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import Contact from "./pages/Contact"
 import Home from "./pages/Home"
+import SolusiPersonal from "./pages/SolusiPersonal"
+import SolusiStartup from "./pages/SolusiStartup"
+
 function App() {
   return (
     <Router>
       <Routes>
         <Route path='/' element={<Home/>}/>
         <Route path='/Contact' element={<Contact/>}/>
+        <Route path='/SolusiPersonal' element={<SolusiPersonal/>}/>
+        <Route path='/SolusiStartup' element={<SolusiStartup/>}/>
+
       </Routes>
     </Router>
 

src/components/beranda/Header.jsx

@@ -49,27 +49,30 @@ const Header = () => {
 
           {/* Solusi Dropdown */}
           <li className="relative group">
-            <button onClick={() => setIsSolusiOpen(!isSolusiOpen)} className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center">
+            <button
+              onClick={() => setIsSolusiOpen(!isSolusiOpen)}
+              className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center"
+            >
               Solusi
               <img src={row} alt="arrow" className="ml-1" />
             </button>
             {isSolusiOpen && (
               <ul
-                className="absolute md:left-[-550px] top-12 w-screen h-[173px] bg-customRed text-black list-none py-4 shadow-lg z-50 gap-10 px-10 flex flex-row justify-center items-center"
+                className="absolute left-[-20px] md:left-[-550px] top-12 w-screen bg-customRed text-black list-none py-4 shadow-lg z-50 gap-10 px-10 flex md:flex-row flex-col justify-center items-center"
               >
-                <div className="flex flex-row justify-center items-center gap-10 mr-96">
+                <div className="flex md:flex-row flex-col justify-center items-center gap-3 md:gap-10 md:mr-96">
                   {/* Personal */}
-                  <li className=" px-5 py-4 bg-white rounded-xl w-[282px] h-[94px] flex items-start gap-4 hover:bg-gray-100">
-                    <img src={IconPersonal} alt="" className="w-69 h-69" />
+                  <li onClick={() => navigate("/SolusiPersonal")} className="px-5 py-4 bg-white rounded-xl w-[282px] h-[94px] flex items-start gap-4 hover:bg-gray-100">
+                    <img src={IconPersonal} alt="" className="w-16 h-16" />
                     <div>
-                      <h3 className="font-medium text-base">Personal</h3>
+                      <h3  className="font-medium text-base">Personal</h3>
                       <p className="text-xs text-customBlack">Solusi efisien <br /> kebutuhan personal</p>
                     </div>
                   </li>
 
                   {/* Startup */}
-                  <li className="px-5 py-4 bg-white rounded-xl w-[282px] h-[94px] flex items-start gap-4 hover:bg-gray-100">
-                    <img src={IconStartup} alt="" className="w-69 h-69" />
+                  <li onClick={() => navigate("/SolusiStartup")} className="px-5 py-4 bg-white rounded-xl w-[282px] h-[94px] flex items-start gap-4 hover:bg-gray-100">
+                    <img src={IconStartup} alt="" className="w-16 h-16" />
                     <div>
                       <h3 className="font-medium text-base">Startup</h3>
                       <p className="text-xs text-customBlack">Dukungan penuh <br /> untuk bisnis Startup</p>
@@ -77,19 +80,20 @@ const Header = () => {
                   </li>
 
                   {/* Corporate Business */}
-                  <li className="px-5 py-4 bg-white rounded-xl w-[282px] h-[94px] flex items-start gap-4 hover:bg-gray-100">
-                    <img src={IconCorporate} alt="" className="w-69 h-69" />
+                  <li onClick={() => navigate("/SolusiPersonal")} className="px-5 py-4 bg-white rounded-xl w-[282px] h-[94px] flex items-start gap-4 hover:bg-gray-100">
+                    <img src={IconCorporate} alt="" className="w-16 h-16" />
                     <div>
                       <h3 className="font-medium text-base">Corporate Business</h3>
                       <p className="text-xs text-customBlack">Solusi strategis untuk bisnis skala besar</p>
                     </div>
                   </li>
                 </div>
-
               </ul>
             )}
           </li>
 
+
+
           <li>
             <button onClick={() => navigate("/Contact")} className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]">
               Hubungi Kami

src/components/beranda/Hero.jsx

@@ -29,11 +29,11 @@ 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]">
+                <button className="w-full lg:w-[270px] h-[70px] btn2 flex items-center justify-center py-3 border-2 border-[#DC0168] rounded-[14px] text-[#DC0168] font-medium text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
                     <img src={waIcon} alt="WhatsApp Icon" className="mr-2 h-[30px] w-[30px]" />
                     Konsultasi Gratis
                 </button>
-                <button className="w-full lg:w-[276px] h-[70px] btn2 flex items-center justify-center py-3 px-8 rounded-[14px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-bold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
+                <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>

src/components/beranda/MasaDepan.jsx

@@ -2,38 +2,39 @@ 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 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-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>
-        <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>
+      {/* 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={waIcon} 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>
+
+    </>
+
   );
 }
 

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 = [
@@ -10,44 +10,43 @@ 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">
-  {/* 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>
+      {/* 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 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-auto h-auto" />
+      </div>
     </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/contact/BottomCTA.jsx

@@ -17,26 +17,23 @@ const BottomCTA = () => {
           <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-[30px] w-[30px]" />
+      <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]">
+          <img src={wagreen} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
           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">
+        <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>
   );
 };

src/components/solusi/CardPersonal/CardPersonal.jsx

@@ -0,0 +1,46 @@
+import { card1, card2, card3 } from "../asset";
+
+export default function FeatureCards() {
+  const features = [
+    {
+      icon: card1,
+      title: "Kemudahan Pengelolaan Dokumen",
+      description:
+        "Dengan fitur pengelolaan dokumen yang mudah dan cepat, anda dapat dengan mudah mengelola semua dokumen anda saat dan berikutnya.",
+    },
+    {
+      icon: card3,
+      title: "Efisiensi dalam Sehari-Hari",
+      description:
+        "Dengan fitur pencarian yang canggih, anda dapat dengan cepat menemukan pengaturan upload, penghapus, dan semua kebutuhan praktis, sehingga anda bisa fokus pada hal yang penting.",
+    },
+    {
+      icon: card2,
+      title: "Teknologi yang Mudah Diakses",
+      description:
+        "Seluruh fitur di dalam aplikasi kami dirancang dengan teknologi yang aman, yang dapat memberikan manfaat keseluruhan kepada semua pengguna layanan kami.",
+    },
+  ];
+
+  return (
+    <div className="container mx-auto px-4 py-16 text-center">
+      <h2 className="text-[#212121] text-[32px] font-semibold mb-[91px] mt-[81px]">
+        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>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-[50px]">
+        {features.map((feature, index) => (
+          <div
+            key={index}
+            className="px-6 py-12 bg-white rounded-[10px] border shadow-lg transition-shadow duration-300 flex flex-col items-center text-center"
+          >
+            <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>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/solusi/CardStartup/CardStartup.jsx

@@ -0,0 +1,46 @@
+import { CardStart1, CardStart2, CardStart3 } from "../asset";
+
+export default function FeatureCards() {
+  const features = [
+    {
+      icon: CardStart1,
+      title: "Solusi Bisnis yang Praktis",
+      description:
+        "Rekan AI menghadirkan teknologi yang intuitif dan mudah digunakan, memungkinkan pelaku Startup mengelola bisnis lebih efisien tanpa perlu keahlian teknis. Setiap fitur dirancang untuk mempercepat dan menyederhanakan operasional bisnis sehari-hari."
+    },
+    {
+      icon: CardStart2,
+      title: "Hemat Biaya, Maksimal Hasil",
+      description:
+        "Optimalkan efisiensi bisnis dengan solusi berbasis AI yang terjangkau. Dengan mengurangi pekerjaan manual dan meningkatkan produktivitas. Menekan biaya operasional tanpa mengorbankan kualitas layanan maupun kepuasan pelanggan."
+    },
+    {
+      icon: CardStart3,
+      title: "Skalabilitas Bisnis",
+      description:
+        " Rekan AI dirancang untuk beradaptasi dengan kebutuhan Anda. Dengan sistem yang dapat diperluas, Startup dapat mengembangkan bisnisnya secara bertahap tanpa perlu khawatir akan keterbatasan teknologi."
+    },
+  ];
+
+  return (
+    <div className="container mx-auto px-4 py-16 text-center">
+      <h2 className="text-[#212121] text-[32px] font-semibold mb-[91px] mt-[81px]">
+        Bersama <span className="text-[#CA2B68]">#Rekan AI</span>, Startup lebih produktif, <br /> efisien, dan siap bersaing di era digital.
+      </h2>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-[50px]">
+        {features.map((feature, index) => (
+          <div
+            key={index}
+            className="px-6 py-12 bg-white rounded-[10px] border shadow-lg transition-shadow duration-300 flex flex-col items-center text-center"
+          >
+            <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>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/solusi/HeadPersonal/HeadPersonal.jsx

@@ -0,0 +1,65 @@
+import { component11, wagreen, start22 } from "../asset";
+
+function HeadPersonal() {
+  return (
+    <div
+      className="container px-4 sm:px-6 lg:px-8 mx-auto mt-16 sm:mt-20 md:mt-24 lg:mt-28 xl:mt-32"
+      id="Home"
+    >
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12">
+        {/* Left Section */}
+        <div className="text-left items-center">
+          <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 mb-6">
+            <img
+              className="w-3/4 sm:w-auto max-h-20 object-contain"
+              src={component11 || "/placeholder.svg"}
+              alt="Home Logo"
+              width={200}
+              height={80}
+            />
+            <span className="inline-flex items-center justify-center bg-pink-600 text-white px-4 py-2 rounded-[14px] text-base sm:text-lg md:text-xl mt-[-20px] lg:text-2xl text-center">
+              # Solusi Personal
+            </span>
+          </div>
+          <h1 className="text-customBlack text-2xl sm:text-3xl md:text-4xl lg:text-[32px] font-semibold mb-4">
+            Saatnya mengintegrasikan AI ke dalam kehidupan Anda!
+          </h1>
+          <p className="text-customBlack text-base sm:text-lg md:text-xl lg:text-[20px] mb-8">
+            Rekan AI dirancang untuk mendukung kebutuhan personal Anda di era
+            digital. Baik Anda seorang profesional, pelajar, atau individu yang
+            mencari kemudahan dalam kehidupan sehari-hari, Rekan AI menawarkan
+            teknologi yang mudah digunakan, efisien, dan dapat diandalkan.
+          </p>
+        </div>
+
+        {/* Right Section (Home Image) */}
+        <div className="flex justify-center lg:justify-end mt-8 lg:mt-0">
+          <img
+            src={start22 || "/placeholder.svg"}
+            alt="Home Image"
+            className="w-full max-w-[500px] sm:max-w-[600px] md:max-w-[700px] lg:max-w-[807px] h-auto"
+            width={807}
+            height={600}
+          />
+        </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]  text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
+          <img
+            src={wagreen}
+            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 text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
+          Coba Sekarang
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default HeadPersonal;

src/components/solusi/HeadStartup/HeadStartup.jsx

@@ -0,0 +1,65 @@
+import { component11, wagreen, start22 } from "../asset";
+
+function HeadPersonal() {
+  return (
+    <div
+      className="container px-4 sm:px-6 lg:px-8 mx-auto mt-16 sm:mt-20 md:mt-24 lg:mt-28 xl:mt-32"
+      id="Home"
+    >
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12">
+        {/* Left Section */}
+        <div className="text-left items-center">
+          <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 mb-6">
+            <img
+              className="w-3/4 sm:w-auto max-h-20 object-contain"
+              src={component11 || "/placeholder.svg"}
+              alt="Home Logo"
+              width={200}
+              height={80}
+            />
+            <span className="inline-flex items-center justify-center bg-pink-600 text-white px-4 py-2 rounded-[14px] text-base sm:text-lg md:text-xl mt-[-20px] lg:text-2xl text-center">
+              # Solusi Personal
+            </span>
+          </div>
+          <h1 className="text-customBlack text-2xl sm:text-3xl md:text-4xl lg:text-[32px] font-semibold mb-4">
+          Tumbuh Lebih Cepat dengan Automasi dan Analisis yang Terjangkau
+                    </h1>
+          <p className="text-customBlack text-base sm:text-lg md:text-xl lg:text-[20px] mb-8">
+            Rekan AI dirancang untuk mendukung kebutuhan personal Anda di era
+            digital. Baik Anda seorang profesional, pelajar, atau individu yang
+            mencari kemudahan dalam kehidupan sehari-hari, Rekan AI menawarkan
+            teknologi yang mudah digunakan, efisien, dan dapat diandalkan.
+          </p>
+        </div>
+
+        {/* Right Section (Home Image) */}
+        <div className="flex justify-center lg:justify-end mt-8 lg:mt-0">
+          <img
+            src={start22 || "/placeholder.svg"}
+            alt="Home Image"
+            className="w-full max-w-[500px] sm:max-w-[600px] md:max-w-[700px] lg:max-w-[807px] h-auto"
+            width={807}
+            height={600}
+          />
+        </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]  text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
+          <img
+            src={wagreen}
+            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 text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
+          Coba Sekarang
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default HeadPersonal;

src/components/solusi/MengapaStartup/MengapaStartup.jsx

@@ -0,0 +1,69 @@
+import { chek2, wagreen, start44 } from "../asset";
+
+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">
+                {/* Image Section */}
+                <div className="relative w-full md:w-1/2 p-5 flex justify-center md:ml-14 md:justify-start">
+                    <img
+                        src={start44}
+                        alt="Woman with Tablet"
+                        className="w-full md:w-[654.5px] max-h-[609.67px] h-auto object-contain"
+                    />
+                </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 text-[#212121]">
+                    <h2 className="text-[32px] font-semibold">
+                        Kenapa Memilih Rekan AI untuk Startup Anda?</h2>
+                    <p className="mt-4 text-sm md:max-w-[90%] md:leading-8 text-[20px]">
+                    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 ">
+                            <img
+                                src={chek2}
+                                alt="Check"
+                                className="w-6 h-6 md:w-11 md:h-11 mr-3"
+                            />
+                            Teknologi kami dirancang agar dapat diakses oleh siapa saja, tanpa memerlukan latar belakang teknis.
+                        </li>
+                        <li className="flex items-center">
+                            <img
+                                src={chek2}
+                                alt="Check"
+                                className="w-6 h-6 md:w-11 md:h-11 mr-3"
+                            />
+                            Rekan AI menawarkan solusi dengan harga yang sesuai untuk Startup.
+                        </li>
+                        <li className="flex items-center">
+                            <img
+                                src={chek2}
+                                alt="Check"
+                                className="w-6 h-6 md:w-11 md:h-11 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]">
+                        <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">
+                            <img
+                                src={wagreen}
+                                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/solusi/MengapapPersonal/MengapapPersonal.jsx

@@ -0,0 +1,77 @@
+import { chek2, wagreen, start33 } from "../asset";
+
+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">
+        {/* Image Section */}
+        <div className="relative w-full md:w-1/2 p-5 flex justify-center md:ml-14 md:justify-start">
+          <img
+            src={start33}
+            alt="Woman with Tablet"
+            className="w-full md:w-[654.5px] max-h-[609.67px] h-auto object-contain"
+          />
+        </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 text-[#212121]">
+          <h2 className="text-[32px] font-semibold">
+            Mengapa Memilih Rekan AI untuk Penggunaan Pribadi?
+          </h2>
+          <p className="mt-4 text-sm md:max-w-[90%] md:leading-8 text-[20px]">
+            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 ">
+              <img
+                src={chek2}
+                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.
+            </li>
+            <li className="flex items-center">
+              <img
+                src={chek2}
+                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}
+                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]">
+            <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">
+              <img
+                src={wagreen}
+                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/solusi/SolusiPersonal/SolusiPersonal.jsx

@@ -0,0 +1,73 @@
+import { useState } from "react";
+import { data } from "./data";
+
+export default function BusinessSolution() {
+  const [activeTab, setActiveTab] = useState("hr");
+  const activeContent = data.content[activeTab];
+
+  return (
+    <div className="min-h-screen p-4">
+      {/* Header */}
+      <div className="text-center mb-8">
+        <h1 className="text-[32px] text-[#212121] font-semibold mb-2">{data.title}</h1>
+        <p className="text-[36px] text-[#5B59E0]">{data.subtitle}</p>
+      </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="flex flex-wrap justify-center gap-4 text-[18px] md:text-[24px]">
+          {data.tabs.map((button) => (
+            <button
+              key={button.key}
+              className={`w-full sm:w-[200px] md:w-[250px] lg:w-[300px] xl:w-[352px] h-[60px] md:h-[77px] rounded-[14px] border ${
+                activeTab === button.key ? "bg-white text-[#CA2B68] shadow-lg" : "bg-[#CA2B68] text-[#FFFFFF]"
+              } font-semibold transition-colors`}
+              onClick={() => setActiveTab(button.key)}
+            >
+              {button.name}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* 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">
+          {/* 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">
+            <img
+              src={activeContent.image || "/placeholder.svg"}
+              alt={activeContent.title}
+              className="object-cover w-full h-full"
+            />
+          </div>
+
+          {/* Text Content */}
+          <div className="flex-1 max-w-full md:max-w-[600px]">
+            <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>
+
+            {/* Features */}
+            <div className="space-y-6">
+              {activeContent.features.map((feature, index) => (
+                <div key={index} className="flex items-start gap-6">
+                  <div className="w-[80px] h-[80px] md:w-[108px] md:h-[106px] rounded-[14px] border border-[#D5DAE3] shadow-lg flex items-center justify-center flex-shrink-0">
+                    <img
+                      src={feature.icon || "/checkmark.svg"}
+                      alt="Feature Icon"
+                      className="object-contain w-[50px] h-[40px] md:w-[64px] md:h-[50.3px]"
+                    />
+                  </div>
+                  <div>
+                    <h3 className="text-[18px] md:text-[20px] font-medium text-[#CA2B68] mb-2">{feature.title}</h3>
+                    <p className="text-[16px] md:text-[18px] text-[#212121]">{feature.description}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/solusi/SolusiPersonal/data.js

@@ -0,0 +1,96 @@
+import { maskcek, rekan1, rekan2, rekan3, rekan4 } from "../asset";
+
+
+// data.json
+export const data = {
+    title: "Solusi Bisnis",
+    subtitle: "Pilihan Terbaik untuk Solusi Bisnis UMKM",
+    tabs: [
+      { name: "Rekan HR", key: "hr" },
+      { name: "Rekan Doku", key: "doku" },
+      { name: "Rekan LLM", key: "llm" },
+      { name: "Rekan Veri", key: "veri" }
+    ],
+    content: {
+      hr: {
+        title: "Rekan HR – Manajemen Kehidupan Kerja yang Lebih Teratur",
+        description:
+          "Rekan HR mempermudah pengelolaan aktivitas kerja pribadi, mendukung keseimbangan antara karier dan kehidupan sehari-hari.",
+        image: rekan1,
+        features: [
+          {
+            title: "Manajemen Aktivitas Pribadi",
+            description:
+              "Gunakan fitur pengingat tugas, jadwal, dan pengelolaan waktu untuk mendukung produktivitas Anda.",
+            icon: maskcek
+          },
+          {
+            title: "Dukungan untuk Pengembangan Karier",
+            description:
+              "Nikmati fitur analisis kinerja pribadi untuk membantu Anda mengidentifikasi area pengembangan dan mencapai tujuan karier Anda.",
+            icon: maskcek
+          }
+        ]
+      },
+      doku: {
+        title: "Rekan Doku – Dokumen Anda, Kendali Anda",
+        description:
+          "Kelola dokumen pribadi dengan mudah dan aman menggunakan Rekan Doku. Produk ini memastikan dokumen digital Anda sah secara hukum dan tersimpan dengan baik.",
+        image: rekan2,
+        features: [
+          {
+            title: "Autentikasi Dokumen Digital",
+            description:
+              "Berikan keabsahan pada dokumen penting seperti kontrak kerja, sertifikat, atau surat pribadi dengan e-Meterai dan tanda tangan digital yang diakui secara hukum.",
+            icon: maskcek
+          },
+          {
+            title: "Manajemen Dokumen Terpusat",
+            description:
+              "Simpan, atur, dan akses dokumen kapan saja dari satu platform yang aman, memastikan kemudahan dan kenyamanan Anda.",
+            icon: maskcek
+          }
+        ]
+      },
+      llm: {
+        title: "Rekan LLM – Kecerdasan Teknologi untuk Mendukung Kehidupan Anda",
+        description:
+          "Rekan LLM memberikan kemudahan bagi Anda untuk memahami data, mendapatkan wawasan, dan meningkatkan efisiensi sehari-hari.",
+        image: rekan3,
+        features: [
+          {
+            title: "Analisis Pribadi Berbasis AI",
+            description:
+              "Gunakan data untuk memahami pola pengeluaran, perencanaan keuangan, atau tren yang relevan dengan kebutuhan Anda.",
+            icon: maskcek
+          },
+          {
+            title: "Keputusan Lebih Tepat dengan Data",
+            description:
+              "Dapatkan rekomendasi berbasis AI untuk berbagai keputusan penting, dari belanja hingga perencanaan aktivitas.",
+            icon: maskcek
+          }
+        ]
+      },
+      veri: {
+        title: "Rekan Veri – Data yang Tepat untuk Keputusan yang Benar",
+        description:
+          "Lindungi diri Anda dari risiko dengan memastikan keakuratan data dalam berbagai kebutuhan pribadi. Rekan Veri adalah solusi cepat untuk memvalidasi informasi penting.",
+        image: rekan4,
+        features: [
+          {
+            title: "Verifikasi Data Cepat",
+            description:
+              "Gunakan sistem canggih untuk memverifikasi identitas pelanggan dengan cepat dan akurat.",
+            icon: maskcek
+          },
+          {
+            title: "Efisiensi dalam Verifikasi",
+            description:
+              "Hemat waktu dengan fitur verifikasi otomatis yang memberikan hasil instan dan akurat.",
+            icon: maskcek
+          }
+        ]
+      }
+    }
+  };

src/components/solusi/SolusiStartup/SolusiStartup.jsx

@@ -0,0 +1,73 @@
+import { useState } from "react";
+import { data } from "./data";
+
+export default function BusinessSolution() {
+  const [activeTab, setActiveTab] = useState("hr");
+  const activeContent = data.content[activeTab];
+
+  return (
+    <div className="min-h-screen p-4">
+      {/* Header */}
+      <div className="text-center mb-8">
+        <h1 className="text-[32px] text-[#212121] font-semibold mb-2">{data.title}</h1>
+        <p className="text-[36px] text-[#5B59E0]">{data.subtitle}</p>
+      </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="flex flex-wrap justify-center gap-4 text-[18px] md:text-[24px]">
+          {data.tabs.map((button) => (
+            <button
+              key={button.key}
+              className={`w-full sm:w-[200px] md:w-[250px] lg:w-[300px] xl:w-[352px] h-[60px] md:h-[77px] rounded-[14px] border ${
+                activeTab === button.key ? "bg-white text-[#CA2B68] shadow-lg" : "bg-[#CA2B68] text-[#FFFFFF]"
+              } font-semibold transition-colors`}
+              onClick={() => setActiveTab(button.key)}
+            >
+              {button.name}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* 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">
+          {/* 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">
+            <img
+              src={activeContent.image || "/placeholder.svg"}
+              alt={activeContent.title}
+              className="object-cover w-full h-full"
+            />
+          </div>
+
+          {/* Text Content */}
+          <div className="flex-1 max-w-full md:max-w-[600px]">
+            <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>
+
+            {/* Features */}
+            <div className="space-y-6">
+              {activeContent.features.map((feature, index) => (
+                <div key={index} className="flex items-start gap-6">
+                  <div className="w-[80px] h-[80px] md:w-[108px] md:h-[106px] rounded-[14px] border border-[#D5DAE3] shadow-lg flex items-center justify-center flex-shrink-0">
+                    <img
+                      src={feature.icon || "/checkmark.svg"}
+                      alt="Feature Icon"
+                      className="object-contain w-[50px] h-[40px] md:w-[64px] md:h-[50.3px]"
+                    />
+                  </div>
+                  <div>
+                    <h3 className="text-[18px] md:text-[20px] font-medium text-[#CA2B68] mb-2">{feature.title}</h3>
+                    <p className="text-[16px] md:text-[18px] text-[#212121]">{feature.description}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/solusi/SolusiStartup/data.js

@@ -0,0 +1,96 @@
+import { maskcek,rs1, rs2, rs3, rs4 } from "../asset";
+
+
+// data.json
+export const data = {
+    title: "Solusi Bisnis",
+    subtitle: "Pilihan Terbaik untuk Solusi Bisnis Startup",
+    tabs: [
+      { name: "Rekan HR", key: "hr" },
+      { name: "Rekan Doku", key: "doku" },
+      { name: "Rekan LLM", key: "llm" },
+      { name: "Rekan Veri", key: "veri" }
+    ],
+    content: {
+      hr: {
+        title: "Rekan HR – Solusi Manajemen Sumber Daya Manusia",
+        description:
+        "Kelola tim dan proses HR secara otomatis agar bisnis Anda dapat berjalan lebih efisien. Rekan HR membantu Startup membangun tim yang solid dan produktif.",
+        image: rs1,
+        features: [
+          {
+            title: "Manajemen Tim Yang Efektif",
+            description:
+              "Otomatiskan penggajian, absensi, dan pengelolaan cuti karyawan agar lebih efisien dan terstruktur.",
+            icon: maskcek
+          },
+          {
+            title: "Dukungan SDM Yang Lebih Baik",
+            description:
+              "Tingkatkan kinerja dan kesejahteraan tim dengan sistem yang mendukung pengembangan karyawan secara berkelanjutan.",
+            icon: maskcek
+          }
+        ]
+      },
+      doku: {
+        title: "Rekan Doku – Dokumen Anda, Kendali Anda",
+        description:
+          "Kelola dokumen pribadi dengan mudah dan aman menggunakan Rekan Doku. Produk ini memastikan dokumen digital Anda sah secara hukum dan tersimpan dengan baik.",
+        image: rs2,
+        features: [
+          {
+            title: "Autentikasi Dokumen Digital",
+            description:
+              "Berikan keabsahan pada dokumen penting seperti kontrak kerja, sertifikat, atau surat pribadi dengan e-Meterai dan tanda tangan digital yang diakui secara hukum.",
+            icon: maskcek
+          },
+          {
+            title: "Manajemen Dokumen Terpusat",
+            description:
+              "Simpan, atur, dan akses dokumen kapan saja dari satu platform yang aman, memastikan kemudahan dan kenyamanan Anda.",
+            icon: maskcek
+          }
+        ]
+      },
+      llm: {
+        title: "Rekan LLM – Kecerdasan Teknologi untuk Mendukung Kehidupan Anda",
+        description:
+          "Rekan LLM memberikan kemudahan bagi Anda untuk memahami data, mendapatkan wawasan, dan meningkatkan efisiensi sehari-hari.",
+        image: rs3,
+        features: [
+          {
+            title: "Analisis Pribadi Berbasis AI",
+            description:
+              "Gunakan data untuk memahami pola pengeluaran, perencanaan keuangan, atau tren yang relevan dengan kebutuhan Anda.",
+            icon: maskcek
+          },
+          {
+            title: "Keputusan Lebih Tepat dengan Data",
+            description:
+              "Dapatkan rekomendasi berbasis AI untuk berbagai keputusan penting, dari belanja hingga perencanaan aktivitas.",
+            icon: maskcek
+          }
+        ]
+      },
+      veri: {
+        title: "Rekan Veri – Data yang Tepat untuk Keputusan yang Benar",
+        description:
+          "Lindungi diri Anda dari risiko dengan memastikan keakuratan data dalam berbagai kebutuhan pribadi. Rekan Veri adalah solusi cepat untuk memvalidasi informasi penting.",
+        image: rs4,
+        features: [
+          {
+            title: "Verifikasi Data Cepat",
+            description:
+              "Gunakan sistem canggih untuk memverifikasi identitas pelanggan dengan cepat dan akurat.",
+            icon: maskcek
+          },
+          {
+            title: "Efisiensi dalam Verifikasi",
+            description:
+              "Hemat waktu dengan fitur verifikasi otomatis yang memberikan hasil instan dan akurat.",
+            icon: maskcek
+          }
+        ]
+      }
+    }
+  };

src/components/solusi/Transformasi/Transformas.jsx

@@ -0,0 +1,43 @@
+import { wagreen } from "../asset";
+
+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">
+              Transformasi Digital Anda Dimulai di Sini
+            </h1>
+          </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, Anda dapat menikmati kemudahan dan efisiensi yang didukung teknologi mutakhir.
+            <span className="block sm:hidden mt-2">
+              Saatnya mengintegrasikan AI ke dalam kehidupan Anda!
+            </span>
+            <span className="hidden sm:block mt-2">
+              Saatnya mengintegrasikan AI ke dalam kehidupan Anda!
+            </span>
+          </p>
+        </div>
+
+      </div>
+      <div className="flex flex-col justify-center md:-mt-60 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-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>
+        <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>
+    </>
+
+  );
+}
+
+export default MasaDepan;

src/components/solusi/asset/index.js

@@ -0,0 +1,81 @@
+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";
+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 card2 from "./Play Now (32) 1.png";
+import card3 from "./Play Now (30) 2.png";
+import rekan1 from "./Play Now (34) 1.png";
+import rekan2 from "./Play Now (36) 1.png";
+import rekan3 from "./Play Now (38) 1.png";
+import rekan4 from "./Play Now (39) 1.png";
+import start33 from "./Frame 811555.png";
+import CardStart1 from "./Play Now (30) 3.png"
+import CardStart2 from "./Play Now (32) 2.png"
+import CardStart3 from "./Play Now (30) 1.png"
+import start44 from "./Frame 811556.png"
+import rs1 from "./Frame 87.png"
+import rs2 from "./Frame 87 (1).png"
+import rs3 from "./Frame 87 (2).png"
+import rs4 from "./Frame 87 (3).png"
+
+export {
+  row,
+  component11,
+  customer,
+  email,
+  facebook,
+  frame,
+  frame27,
+  img10,
+  instagram,
+  kmn,
+  kominfo,
+  Logo1,
+  nvidia,
+  ojk,
+  phone,
+  search,
+  telephone,
+  wagreen,
+  wabutton,
+  x,
+  chek2,
+  start22,
+  maskcek,
+  card1,
+  card2,
+  card3,
+  rekan1,
+  rekan2,
+  rekan3,
+  rekan4,
+  start33,
+  CardStart1,
+  CardStart2,
+  CardStart3,
+  start44,
+  rs1,
+  rs2,
+  rs3,
+  rs4,
+};

src/pages/SolusiPersonal.jsx

@@ -0,0 +1,25 @@
+import Header from "../components/beranda/Header"
+import HeadPersonal from '../components/solusi/HeadPersonal/HeadPersonal'
+import CardPersonal from '../components/solusi/CardPersonal/CardPersonal'
+import MengapapPersonal from '../components/solusi/MengapapPersonal/MengapapPersonal'
+import SolusiPersonal from '../components/solusi/SolusiPersonal/SolusiPersonal'
+import Transformas from '../components/solusi/Transformasi/Transformas'
+import WhatsAppButton from "../components/beranda/WhatsAppButon"
+import Footer from "../components/contact/Footer"
+function Contact() {
+  return (
+    <>
+    <Header />
+    <HeadPersonal />
+    <CardPersonal />
+    <MengapapPersonal />
+    <SolusiPersonal />
+    <Transformas />
+    <Footer />
+    <WhatsAppButton />
+    </>
+
+  )
+}
+
+export default Contact

src/pages/SolusiStartup.jsx

@@ -0,0 +1,25 @@
+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 CardStartup from "../components/solusi/CardStartup/CardStartup"
+import MengapaStartup from "../components/solusi/MengapaStartup/MengapaStartup"
+import SolusiStartup from "../components/solusi/SolusiStartup/SolusiStartup"
+import Transformas from "../components/solusi/Transformasi/Transformas"
+function Contact() {
+  return (
+    <>
+    <Header />
+    <HeadStartup />
+    <CardStartup />
+    <MengapaStartup />
+    <SolusiStartup />
+    <Transformas />
+    <Footer />
+    <WhatsAppButton />
+    </>
+
+  )
+}
+
+export default Contact

tailwind.config.js

@@ -12,7 +12,7 @@ export default {
         customBlack: '#212121',
         customRed: '#DC0168',
         customGrey: 'rgba(212, 218, 228, 0.12)'
-      }
+      },
     },
   },
   plugins: [],