From c335fc05f826ebb5c657628f3c8989eab9cbcebb Mon Sep 17 00:00:00 2001
From: Yogamnan <amnannajid3@gmail.com>
Date: Wed, 22 Jan 2025 10:55:07 +0700
Subject: [PATCH] revisi 1

---
 src/components/Banner.jsx    | 10 +++++-----
 src/components/Footer.jsx    | 24 ++++++++++++------------
 src/components/Header.jsx    |  2 +-
 src/components/Hero.jsx      |  4 ++--
 src/components/Kenapa.jsx    | 12 ++++++------
 src/components/MasaDepan.jsx |  6 +++---
 src/components/Mendukung.jsx |  4 ++--
 src/components/Mitra.jsx     | 12 ++++++------
 src/components/Solusi.jsx    | 10 +++++-----
 9 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/src/components/Banner.jsx b/src/components/Banner.jsx
index b9a0f1a..23324ea 100644
--- a/src/components/Banner.jsx
+++ b/src/components/Banner.jsx
@@ -5,7 +5,7 @@ function Banner() {
         <div
             className="relative flex flex-col items-center justify-center mt-20 w-full h-auto md:h-[692px] bg-cover bg-center text-white text-center"
             style={{
-                backgroundImage: `linear-gradient(to right, rgba(220, 1, 104, 0.4),rgba(91, 89, 232, 1) ), url(${bgcBanner})`,
+                backgroundImage: `linear-gradient(to right, rgba(220, 1, 150, 0.4),rgba(91, 89, 232, 0.9),rgba(91, 89, 232, 1) ), url(${bgcBanner})`,
                 backgroundSize: 'cover',
                 backgroundPosition: 'center',
                 backgroundRepeat: 'no-repeat',
@@ -23,15 +23,15 @@ function Banner() {
             {/* Teks dan tombol */}
             <div className="px-4 mx-auto text-center w-full mt-8 md:mt-0">
                 <div className="text-customWhite max-w-[90%] md:max-w-[45%] mx-auto">
-                    <h1 className="text-xl md:text-[32px] font-semibold text-center">
+                    <h1 className="text-xl md:text-[32px] font-semibold text-center leading-10">
                         Bersama Rekan AI, Wujudkan Masa Depan Bisnis yang Lebih Inovatif dan Kompetitif.
                     </h1>
                 </div>
-                <p className="mt-4 md:mt-16 max-w-[90%] md:max-w-[800px] mx-auto text-gray-200 text-sm md:text-base">
+                <p className="mt-4 md:mt-14 max-w-[90%] md:max-w-[750px] mx-auto text-customWhite text-sm md:text-[20px] md:font-extralight md:leading-7">
                     Dari autentikasi dokumen hingga analisis data dan automasi HR, Rekan AI menawarkan produk-produk cerdas yang siap membantu bisnis Anda tumbuh dan bersaing di pasar yang dinamis.
                 </p>
-                <div className="flex flex-col md:flex-row gap-4 mt-4 md:mt-16 justify-center">
-                    <button className="flex items-center justify-center w-full md:w-[317px] h-[50px] md:h-[70px] rounded-2xl border-2 border-white text-white text-sm md:text-lg font-bold hover:bg-white hover:bg-opacity-10">
+                <div className="flex flex-col md:flex-row gap-4 mt-4 md:mt-20 justify-center">
+                    <button className="flex items-center justify-center w-full md:w-[317px] h-[50px] md:h-[70px] rounded-2xl border-[1px] border-white text-white text-sm md:text-lg font-bold hover:bg-white hover:bg-opacity-10">
                         <img src={waIcon2} alt="WhatsApp Icon" className="mr-2 h-4 md:h-5 w-auto" />
                         Konsultasi Gratis
                     </button>
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index d2bc6b8..f8b83ac 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -3,7 +3,7 @@ import { nvdia,kmn,kominfo,ojk,x,instagram,facebook,frame, } from "../assets";
 
 function Footer() {
   return (
-    <footer className="bg-customGrey py-10 text-[#212121]">
+    <footer className="bg-customGrey h-[506px] py-10 text-[#212121]">
       {/* Kontainer utama footer */}
       <div className="flex flex-col sm:flex-row sm:flex-wrap justify-between gap-5 mx-5 sm:mx-28 mt-20 text-sm">
         {/* Kolom 1: Logo perusahaan */}
@@ -21,16 +21,16 @@ function Footer() {
             <p>
               <strong className="text-[25px] text-[#5B59E8]">Rekan AI</strong>{" "}
               <br />
-              <span className="text-[#5B59E8] italic">
+              <span className="text-[#5B59E8] italic font-bold">
                 Reimagine Your Business with AI.
               </span>
             </p>
           </div>
-          <p className="mb-10">
+          <p className="mb-10 text-[18px]">
             Jl. Anggrek No.6, Sawah Lama, Kec. Ciputat, Kota Tangerang Selatan,
             Banten 15413
           </p>
-          <p className="mb-4">Lebih dekat dengan Kami</p>
+          <p className="mb-4 text-[18px]">Lebih dekat dengan Kami</p>
           <div className="flex space-x-5">
             {/* Tautan ke media sosial */}
             <a href="#">
@@ -46,9 +46,9 @@ function Footer() {
         </div>
 
         {/* Kolom 3: Produk perusahaan */}
-        <div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
-          <h4 className="text-base font-semibold mb-4">Produk Kami</h4>
-          <ul className="space-y-4">
+        <div className="flex-1 mb-5 sm:mb-0 md:ml-16 sm:pl-0">
+          <h4 className="text-[18px] font-semibold mb-4">Produk Kami</h4>
+          <ul className="space-y-4 text-[18px]">
             <li>Rekan Doku</li> {/* Produk: Dokumen otomatis */}
             <li>Rekan Veri</li> {/* Produk: Verifikasi data */}
             <li>Rekan HR</li> {/* Produk: Manajemen SDM */}
@@ -57,9 +57,9 @@ function Footer() {
         </div>
 
         {/* Kolom 4: Solusi yang ditawarkan */}
-        <div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
-          <h4 className="text-base font-semibold mb-4">Solusi Kami</h4>
-          <ul className="space-y-4">
+        <div className="flex-1 mb-5 md:-mx-28 sm:mb-0 sm:pl-0">
+          <h4 className="text-[18px] font-semibold mb-4">Solusi Kami</h4>
+          <ul className="space-y-4 text-[18px]">
             <li>Personal</li> {/* Solusi untuk individu */}
             <li>UMKM</li> {/* Solusi untuk Usaha Mikro, Kecil, dan Menengah */}
             <li>Corporate Business</li> {/* Solusi untuk perusahaan besar */}
@@ -68,8 +68,8 @@ function Footer() {
 
         {/* Kolom 5: Informasi kontak */}
         <div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
-          <h4 className="text-base font-semibold mb-4">Hubungi Kami</h4>
-          <ul className="space-y-4">
+          <h4 className="text-[18px] font-semibold mb-4">Hubungi Kami</h4>
+          <ul className="space-y-4 text-[18px]">
             <li>Email: support@rekanai.com</li> {/* Email dukungan */}
             <li>Phone: +68452098</li> {/* Nomor telepon */}
             <li>F.A.Q</li> {/* Halaman Pertanyaan yang Sering Diajukan */}
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 841e443..c6d5228 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -73,7 +73,7 @@ const Header = () => {
         </ul>
 
         {/* Pencarian */}
-        <div className="relative flex items-center gap-2 w-full sm:w-auto order-2 sm:order-none">
+        <div className="relative flex items-center gap-2 w-full sm:w-auto order-2 sm:order-none md:ml-36">
           <input
             type="text"
             placeholder="Pencarian..."
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index 4db36ec..5fc103b 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -11,7 +11,7 @@ function Hero() {
                 2xl:ml-28 xl:ml-24 items-center">
                 
                 {/* Left Section */}
-                <div className="box text-left px-4 lg:px-0">
+                <div className="box text-left px-4 lg:px-0 md:-ml-6 md:-mt-20">
                     <img className="mb-5 mx-auto lg:mx-0" src={homeLogo} alt="Home Logo" />
                     <h1 className="text-customBlack text-[24px] lg:text-[32px] font-semibold py-4">
                         Ciptakan Pengalaman Pelanggan yang Tak Terlupakan dengan Solusi AI dari Rekan AI.
@@ -28,7 +28,7 @@ function Hero() {
             </div>
 
             {/* Buttons */}
-            <div className="flex flex-col lg:flex-row mt-8 lg:-mt-11 lg:ml-28 gap-6 items-center px-4 lg:px-0">
+            <div className="flex flex-col lg:flex-row mt-8 lg:-mt-28 lg:ml-28 gap-6 items-center px-4 lg:px-0">
                 <button className="w-full lg:w-[270px] h-[70px] btn2 flex items-center justify-center py-3 border-2 border-[#DC0168] rounded-[14px] text-[#DC0168] font-bold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
                     <img src={waIcon} alt="WhatsApp Icon" className="mr-2 h-[1.2rem] w-auto" />
                     Konsultasi Gratis
diff --git a/src/components/Kenapa.jsx b/src/components/Kenapa.jsx
index 8667647..eb92fa6 100644
--- a/src/components/Kenapa.jsx
+++ b/src/components/Kenapa.jsx
@@ -11,7 +11,7 @@ function Kenapa() {
         </div>
 
         {/* Image Section */}
-        <div className="relative w-full md:w-1/2 p-5 flex justify-center md:justify-start">
+        <div className="relative w-full md:w-1/2 p-5 flex justify-center md:ml-14 md:justify-start">
           <img
             src={imgLeft}
             alt="Woman with Tablet"
@@ -22,13 +22,13 @@ function Kenapa() {
         {/* Text Section */}
         <div className="w-full md:w-1/2 p-6 md:p-10 flex flex-col items-center md:items-start text-center md:text-left">
           <h2 className="text-2xl md:text-3xl font-semibold text-gray-800">Kenapa Harus Rekan AI?</h2>
-          <p className="text-customBlack mt-4 text-sm md:text-base">
+          <p className="text-customBlack mt-4 text-sm md:max-w-[75%] md:leading-8 md:text-[18px]">
             Rekan AI adalah mitra inovasi bisnis Anda dalam menghadapi era
             digital. Kami menghadirkan teknologi kecerdasan buatan yang dirancang
             untuk meningkatkan efisiensi operasional, mempercepat proses, dan
             memberikan wawasan berbasis data yang akurat.
           </p>
-          <ul className="mt-8 space-y-4 md:space-y-6 text-sm md:text-base text-customBlack font-medium">
+          <ul className="mt-8 space-y-4 md:space-y-6 text-sm md:max-w-[70%] md:text-base text-customBlack font-medium">
             <li className="flex items-center">
               <img src={chek2} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
               Automasi proses untuk mengurangi biaya dan meningkatkan produktivitas.
@@ -47,12 +47,12 @@ function Kenapa() {
             </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-4 w-full">
-            <button className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-pink-600 text-pink-700 font-bold rounded-lg hover:bg-white hover:bg-opacity-10 transition">
+          <div className="flex flex-col md:flex-row mt-8 md:mt-20 space-y-4 md:space-y-0 md:space-x-10 w-full">
+            <button className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-pink-600 text-pink-700 font-bold rounded-[14px] hover:bg-white hover:bg-opacity-10 transition">
               <img src={waIcon} alt="WhatsApp Icon" className="mr-2 w-4 h-4 md:w-5 md:h-5" />
               Konsultasi Gratis
             </button>
-            <button className="w-full md:w-[276px] h-[50px] md:h-[70px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white font-bold rounded-lg hover:opacity-90 transition">
+            <button className="w-full md:w-[276px] h-[50px] md:h-[70px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white font-bold rounded-[14px] hover:opacity-90 transition">
               Coba Sekarang
             </button>
           </div>
diff --git a/src/components/MasaDepan.jsx b/src/components/MasaDepan.jsx
index 7fe99fc..7f3ccb8 100644
--- a/src/components/MasaDepan.jsx
+++ b/src/components/MasaDepan.jsx
@@ -6,14 +6,14 @@ function MasaDepan() {
       {/* 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-xl rounded-2xl w-48 h-12">
+          <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-3xl font-semibold text-black">
+          <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-lg text-gray-600 mt-2 leading-relaxed px-4 sm:px-0">
+        <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>
diff --git a/src/components/Mendukung.jsx b/src/components/Mendukung.jsx
index 4ee0c39..c35fea3 100644
--- a/src/components/Mendukung.jsx
+++ b/src/components/Mendukung.jsx
@@ -11,7 +11,7 @@ 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-2/5 space-y-8 order-2 md:order-1">
+  <div className="flex flex-col justify-center w-full md:w-[45%] space-y-8 order-2 md:order-1">
     <p className="text-[24px] md:text-[32px] font-semibold text-customBlack text-left md:text-left">
       Solusi Mendukung Bisnis di Setiap Skala Usaha
     </p>
@@ -21,7 +21,7 @@ function Mendukung() {
 
     <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">
+    <div key={item.id} className="flex flex-col items-center w-full md:w-auto md:mt-5">
       {/* Image */}
       <img 
         src={item.image} 
diff --git a/src/components/Mitra.jsx b/src/components/Mitra.jsx
index bae26a9..9544e1f 100644
--- a/src/components/Mitra.jsx
+++ b/src/components/Mitra.jsx
@@ -78,7 +78,7 @@ function Mitra() {
     useEffect(() => {
         const interval = setInterval(() => {
             handleNext();
-        }, 7900); // Slider bergerak setiap 4 detik
+        }, 8900); // Slider bergerak setiap 4 detik
 
         return () => clearInterval(interval); // Membersihkan interval saat komponen unmount
     }, [currentIndex]);
@@ -91,7 +91,7 @@ function Mitra() {
             >
                 <div className="bg-gradient-to-b from-[#e5e4ff] via-[#A1A0F2] to-[#5B59E8] w-[90%] md:w-[1214px] h-[640px] rounded-[36px] flex items-center justify-center relative">
                     <div className="text-white ml-4 md:ml-20 -mt-8 md:-mt-20">
-                        <div className="bg-white text-[#DC0168] flex items-center justify-center text-center rounded-[18px] shadow-md w-[90%] md:w-[467px] h-[56px]">
+                        <div className="bg-white text-[#DC0168] flex items-center justify-center text-center rounded-[18px] shadow-md w-[90%] md:w-[510px] h-[56px]">
                             <p className="text-sm md:text-lg font-semibold m-0">
                                 Saatnya Melangkah lebih jauh untuk bisnis Anda!
                             </p>
@@ -107,8 +107,8 @@ function Mitra() {
                 </div>
             </div>
 
-            <section className="flex justify-center 2xl:w-[1516px] w-screen mb-40 -mt-[350px] md:-mt-[292px] mx-auto">
-                <div className="bg-customWhite shadow-lg rounded-[34px] px-4 md:px-8 py-4 flex items-center gap-2 md:gap-4 w-[95%] md:w-[80%] mx-auto z-10 overflow-hidden">
+            <section className="flex justify-center 2xl:w-[1516px] w-screen mb-40 -mt-[350px] md:-mt-[290px] mx-auto">
+                <div className="bg-customWhite shadow-lg rounded-[37px] px-4 md:px-8 py-4 flex items-center gap-2 md:gap-4 w-[95%] md:w-[80%] mx-auto z-10 overflow-hidden">
                     {/* Prev Button (Hidden on Mobile) */}
                     <button onClick={handlePrev} className="hidden md:block">
                         <img src= {arrow1} alt="Previous" className="w-4 h-4 md:w-6 md:h-6" />
@@ -116,14 +116,14 @@ function Mitra() {
                     {/* Carousel Items */}
                     <div className="overflow-hidden flex-1">
                         <div
-                            className="flex transition-transform duration-[10000ms] ease-in-out"
+                            className="flex transition-transform duration-[10500ms] ease-in-out"
                             style={{ transform: `translateX(-${currentIndex * 100}%)` }}
                         >
                             {Array.from(
                                 { length: Math.ceil(items.length / itemsPerSlide) },
                                 (_, slideIndex) => (
                                     <div
-                                        className="flex-shrink-0 w-full grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-4"
+                                        className="flex-shrink-0 w-full grid grid-cols-2 md:grid-cols-4 gap-1 md:gap-4"
                                         key={slideIndex}
                                     >
                                         {items
diff --git a/src/components/Solusi.jsx b/src/components/Solusi.jsx
index 69f3a59..2b3947f 100644
--- a/src/components/Solusi.jsx
+++ b/src/components/Solusi.jsx
@@ -26,15 +26,15 @@ function Solusi() {
   ];
 
   return (
-    <section className="min-h-screen flex flex-col items-center justify-center py-8 bg-customWhite mt-16" id="solusi">
-      <div className="text-center mb-16">
+    <section className="min-h-screen flex flex-col items-center justify-center py-8 bg-customWhite mt-24" id="solusi">
+      <div className="text-center mb-12">
         <div className="flex flex-col md:flex-row items-center justify-center gap-4">
-          <h1 className="text-2xl md:text-4xl font-semibold">Ragam Solusi Terbaik Dari</h1>
+          <h1 className="text-2xl md:text-[32px] font-semibold">Ragam Solusi Terbaik Dari</h1>
           <span className="flex items-center justify-center text-lg md:text-2xl text-customWhite bg-customRed rounded-xl font-bold w-[194px] h-[48px] text-center">
             #Rekan AI
           </span>
         </div>
-        <p className="text-gray-600 mt-4 max-w-[95%] text-center items-center">
+        <p className="text-customBlack md:text-[20px] mt-4 md:max-w-[85%] md:ml-24 text-center items-center">
           Kami menyediakan berbagai produk berbasis AI yang dirancang khusus untuk mendukung bisnis Anda dari berbagai aspek.
         </p>
       </div>
@@ -55,7 +55,7 @@ function Solusi() {
                 </li>
               ))}
             </ul>
-            <button className="w-[355px] h-[62px] bg-white border-2 border-blue-600 text-blue-600 font-semibold py-2 px-4 rounded-full hover:bg-blue-600 hover:text-white transition duration-300">
+            <button className="w-[355px] h-[62px] bg-white border-[1px] shadow-sm shadow-zinc-800 border-blue-600 text-blue-600 font-semibold py-2 px-4 rounded-[18px] hover:bg-blue-600 hover:text-white transition duration-300">
               Selengkapnya <span>&rarr;</span>
             </button>
           </div>