diff --git a/package-lock.json b/package-lock.json
index c72fe61..2361023 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "rekanaiv3",
       "version": "0.0.0",
       "dependencies": {
+        "axios": "^1.7.9",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
       },
@@ -1701,6 +1702,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.20",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
@@ -1755,6 +1762,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.9",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz",
+      "integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1998,6 +2016,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -2172,6 +2202,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -2805,6 +2844,26 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -2832,6 +2891,20 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
+      "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -3881,6 +3954,27 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -4475,6 +4569,12 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
diff --git a/package.json b/package.json
index 630fd53..be53e7b 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.7.9",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
diff --git a/src/App.jsx b/src/App.jsx
index 9fd820e..a737b45 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,8 +1,9 @@
 import Header from "./componen/Header/Header";  // Mengimpor komponen Header untuk ditampilkan di bagian atas halaman
 import CustomerService from "./componen/customer/CustomerService";  // Mengimpor komponen CustomerService untuk menampilkan informasi layanan pelanggan
-import FormSection from "./componen/form/FormSection";  // Mengimpor komponen FormSection yang berisi form
-import FAQ from "./componen/faq/FAQSection";  // Mengimpor komponen FAQ untuk menampilkan bagian pertanyaan yang sering diajukan
+import CardContent from "./componen/CardContent/CardContent";  // Mengimpor komponen FormSection yang berisi form
+import SolusiBisnis from "./componen/solusibisnis/solusibisnis";  // Mengimpor komponen FAQ untuk menampilkan bagian pertanyaan yang sering diajukan
 import BottomCTA from "./componen/bottom/BottomCTA";  // Mengimpor komponen BottomCTA untuk panggilan aksi di bagian bawah halaman
+import Transformasi from "./componen/Transformasi/Transformas"
 import Footer from "./componen/footer/Footer";  // Mengimpor komponen Footer untuk menampilkan bagian footer
 import WhatsAppButton from "./componen/whatsappbutton/whatsappbutton";  // Mengimpor komponen WhatsAppButton untuk menampilkan tombol WhatsApp
 
@@ -11,9 +12,10 @@ function App() {
     <>
       <Header />  {/* Menampilkan komponen Header */}
       <CustomerService />  {/* Menampilkan komponen CustomerService */}
-      <FormSection />  {/* Menampilkan komponen FormSection */}
-      <FAQ />  {/* Menampilkan komponen FAQ */}
-      <BottomCTA />  {/* Menampilkan komponen BottomCTA */}
+      <CardContent />  {/* Menampilkan komponen FormSection */}
+      <BottomCTA />  {/* Menampilkan komponen FAQ */}
+      <SolusiBisnis />  {/* Menampilkan komponen BottomCTA */}
+      <Transformasi />
       <Footer />  {/* Menampilkan komponen Footer */}
       <WhatsAppButton />  {/* Menampilkan komponen WhatsAppButton */}
     </>
diff --git a/src/componen/CardContent/CardContent.jsx b/src/componen/CardContent/CardContent.jsx
new file mode 100644
index 0000000..507fc49
--- /dev/null
+++ b/src/componen/CardContent/CardContent.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>
+  );
+}
\ No newline at end of file
diff --git a/src/componen/Transformasi/Transformas.jsx b/src/componen/Transformasi/Transformas.jsx
new file mode 100644
index 0000000..26073c2
--- /dev/null
+++ b/src/componen/Transformasi/Transformas.jsx
@@ -0,0 +1,45 @@
+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>
+
+      {/* 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={wagreen}
+            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;
diff --git a/src/componen/asset/Frame 811480.png b/src/componen/asset/Frame 811480.png
new file mode 100644
index 0000000..b582fa1
Binary files /dev/null and b/src/componen/asset/Frame 811480.png differ
diff --git a/src/componen/asset/Frame 811554.png b/src/componen/asset/Frame 811554.png
new file mode 100644
index 0000000..fa8780b
Binary files /dev/null and b/src/componen/asset/Frame 811554.png differ
diff --git a/src/componen/asset/Frame 811555.png b/src/componen/asset/Frame 811555.png
new file mode 100644
index 0000000..0417c80
Binary files /dev/null and b/src/componen/asset/Frame 811555.png differ
diff --git a/src/componen/asset/Mask group (1).png b/src/componen/asset/Mask group (1).png
new file mode 100644
index 0000000..4033f7e
Binary files /dev/null and b/src/componen/asset/Mask group (1).png differ
diff --git a/src/componen/asset/Play Now (30) 2.png b/src/componen/asset/Play Now (30) 2.png
new file mode 100644
index 0000000..0aea36d
Binary files /dev/null and b/src/componen/asset/Play Now (30) 2.png differ
diff --git a/src/componen/asset/Play Now (32) 1.png b/src/componen/asset/Play Now (32) 1.png
new file mode 100644
index 0000000..ff83234
Binary files /dev/null and b/src/componen/asset/Play Now (32) 1.png differ
diff --git a/src/componen/asset/Play Now (33) 1.png b/src/componen/asset/Play Now (33) 1.png
new file mode 100644
index 0000000..1ad9582
Binary files /dev/null and b/src/componen/asset/Play Now (33) 1.png differ
diff --git a/src/componen/asset/Play Now (34) 1.png b/src/componen/asset/Play Now (34) 1.png
new file mode 100644
index 0000000..2f03349
Binary files /dev/null and b/src/componen/asset/Play Now (34) 1.png differ
diff --git a/src/componen/asset/Play Now (36) 1.png b/src/componen/asset/Play Now (36) 1.png
new file mode 100644
index 0000000..d96739b
Binary files /dev/null and b/src/componen/asset/Play Now (36) 1.png differ
diff --git a/src/componen/asset/Play Now (38) 1.png b/src/componen/asset/Play Now (38) 1.png
new file mode 100644
index 0000000..034cee4
Binary files /dev/null and b/src/componen/asset/Play Now (38) 1.png differ
diff --git a/src/componen/asset/Play Now (39) 1.png b/src/componen/asset/Play Now (39) 1.png
new file mode 100644
index 0000000..d3d9751
Binary files /dev/null and b/src/componen/asset/Play Now (39) 1.png differ
diff --git a/src/componen/asset/image 25.png b/src/componen/asset/image 25.png
new file mode 100644
index 0000000..80a8e3c
Binary files /dev/null and b/src/componen/asset/image 25.png differ
diff --git a/src/componen/asset/index.js b/src/componen/asset/index.js
index 1a83171..4ff4ec3 100644
--- a/src/componen/asset/index.js
+++ b/src/componen/asset/index.js
@@ -1,25 +1,65 @@
-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 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";
 
-
-export{
-    row,component11,customer,email,facebook,frame,frame27,img10,instagram,kmn,kominfo,Logo1,nvidia,ojk,phone,search,telephone,wagreen,wabutton,x
-}
\ No newline at end of file
+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,
+};
diff --git a/src/componen/bottom/BottomCTA.jsx b/src/componen/bottom/BottomCTA.jsx
index 0ebf389..cd6746b 100644
--- a/src/componen/bottom/BottomCTA.jsx
+++ b/src/componen/bottom/BottomCTA.jsx
@@ -1,44 +1,77 @@
-import { wagreen } from "../asset"; // Import gambar WhatsApp untuk ikon
+import { chek2, wagreen, start33 } from "../asset";
 
-const BottomCTA = () => {
+function Kenapa() {
   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>
+    <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>
 
-        <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>
+        {/* 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>
-      
-      {/* 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>
+    </div>
   );
-};
+}
 
-export default BottomCTA;
+export default Kenapa;
diff --git a/src/componen/customer/CustomerService.jsx b/src/componen/customer/CustomerService.jsx
index 9419b6d..dc2fb7b 100644
--- a/src/componen/customer/CustomerService.jsx
+++ b/src/componen/customer/CustomerService.jsx
@@ -1,79 +1,67 @@
-import { email, phone, customer } from "../asset";
+import { component11, wagreen, start22 } from "../asset";
 
-const CustomerService = () => {
-    return (
-        <section className="main-container mt-[180px] md:mt-[115px] 2xl:mt-[45px] flex flex-col md:flex-row justify-between items-center px-5 py-10 max-w-7xl mx-auto gap-10 mb-[114px] 2xl:px-20 2xl:gap-20">
-            {/* Container utama */}
+function Hero() {
+  return (
+    <div
+      className=" container px-4 sm:px-6 lg:px-8 mx-auto mt-[150px]"
+      id="Home"
+    >
+      <div
+        className="
+                hero 
+                grid grid-cols-1 lg:grid-cols-2 gap-10 
+                mt-40 sm:mt-28 md:mt-32 lg:mt-36 xl:mt-24
+                items-center"
+      >
+        {/* Left Section */}
+        <div className="text-left px-4 sm:px-6 lg:px-0 mt-[-150px]">
+          <div className="flex items-center">
+            <img
+              className="mb-5 mt-5 mx-auto lg:mx-0 w-3/4 sm:w-2/3 md:w-1/2 lg:w-auto"
+              src={component11}
+              alt="Home Logo"
+            />
+            <span className="flex items-center justify-center ml-2 bg-pink-600 text-white w-full sm:w-auto px-6 py-2 rounded-[14px] text-lg sm:text-2xl text-center mt-2 sm:mt-0">
+              # Solusi Personal
+            </span>
+          </div>
+          <h1 className="text-customBlack text-[32px]  font-semibold py-4">
+            Saatnya mengintegrasikan AI ke dalam kehidupan Anda!
+          </h1>
+          <p className="text-customBlack text-[20px]">
+            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>
 
-            <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] 2xl:text-[28px] 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-[18px] 2xl:text-[18px]">
-                    Butuh informasi lebih lanjut tentang produk atau solusi kami?{" "}
-                    <span className="hidden lg:inline">
-                        <br />
-                    </span>{" "}
-                    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] 2xl:text-base">
-                                Kirim pertanyaan Anda ke{" "}
-                                <strong className="text-[#5B59E8]">
-                                    support@rekanai.com
-                                </strong>{" "}
-                                dan tim kami
-                            </p>
-                            <p className="text-sm text-[#212121] 2xl:text-base">
-                                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">
-                            <p className="text-sm text-[#212121] 2xl:text-base">
-                                Hubungi kami di{" "}
-                                <strong className="text-[#5B59E8]">
-                                    (+62) 123-4567-890
-                                </strong>
-                            </p>
-                            <p className="text-sm text-[#212121] 2xl:text-base">
-                                (Senin - Jumat, 08:00 - 17:00 WIB).
-                            </p>
-                        </div>
-                    </div>
-                </div>
-            </div>
+        {/* Right Section (Home Image) */}
+        <div className="flex justify-center lg:justify-end px-4 sm:px-6 lg:px-0">
+          <img
+            src={start22}
+            alt="Home Image"
+            className="w-full max-w-[500px] sm:max-w-[600px] md:max-w-[700px] lg:max-w-[807px] h-auto"
+          />
+        </div>
+      </div>
 
-            <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>
-    );
-};
+      {/* Buttons */}
+      <div className="flex flex-col sm:flex-row justify-center  sm:justify-start mt-[-185px] gap-4 sm:gap-6 lg:gap-8 items-center px-4 sm:px-6 lg:px-0">
+        <button className="w-full sm:w-[230px] md:w-[250px] lg:w-[270px] h-[60px] sm:h-[70px] btn2 flex items-center justify-center py-4 sm:py-3 border-2 border-[#DC0168] rounded-[14px] text-[#DC0168] font-bold text-[16px] sm: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-[25px] sm:h-[30px] w-[25px] sm:w-[30px]"
+          />
+          Konsultasi Gratis
+        </button>
+        <button className="w-full sm:w-[236px] md:w-[256px] lg:w-[276px] h-[60px] sm:h-[70px] btn2 flex items-center justify-center py-4 sm:py-3 px-6 sm:px-8 rounded-[14px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-bold text-[16px] sm:text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
+          Coba Sekarang
+        </button>
+      </div>
+    </div>
+  );
+}
 
-export default CustomerService;
+export default Hero;
diff --git a/src/componen/faq/FAQSection.jsx b/src/componen/faq/FAQSection.jsx
deleted file mode 100644
index ba7e200..0000000
--- a/src/componen/faq/FAQSection.jsx
+++ /dev/null
@@ -1,157 +0,0 @@
-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;
diff --git a/src/componen/form/FormSection.jsx b/src/componen/form/FormSection.jsx
deleted file mode 100644
index 59c97a0..0000000
--- a/src/componen/form/FormSection.jsx
+++ /dev/null
@@ -1,147 +0,0 @@
-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 max-w-[90%] 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 sm mt-20 2xl:mt-28">
-          {/* Judul utama */}
-          <h2 className="text-[32px] font-[550] leading-[48px] tracking-[0.005em] text-left 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="flex-1 bg-white text-[#212121] rounded-[25px] 2xl:mt-[100px] p-[40px] border-[8px] border-[#F086A4] w-full 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;
diff --git a/src/componen/solusibisnis/data.js b/src/componen/solusibisnis/data.js
new file mode 100644
index 0000000..985d2ef
--- /dev/null
+++ b/src/componen/solusibisnis/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
+          }
+        ]
+      }
+    }
+  };
\ No newline at end of file
diff --git a/src/componen/solusibisnis/solusibisnis.jsx b/src/componen/solusibisnis/solusibisnis.jsx
new file mode 100644
index 0000000..ecca628
--- /dev/null
+++ b/src/componen/solusibisnis/solusibisnis.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>
+  );
+}
diff --git a/vite.config.js b/vite.config.js
index 8b0f57b..3444850 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,7 +1,16 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
 
-// https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3000', // Ganti dengan URL backend NestJS
+        changeOrigin: true,
+        secure: false,
+        rewrite: (path) => path.replace(/^\/api/, '')
+      }
+    }
+  }
+});