From ff016f6f21e5e59fd04da7649922b6ef607a154b Mon Sep 17 00:00:00 2001
From: Yogamnan <amnannajid3@gmail.com>
Date: Wed, 12 Feb 2025 10:47:27 +0700
Subject: [PATCH] after merge

---
 src/components/beranda/Banner.jsx    | 170 +++++++++++++++++----------
 src/components/beranda/Header.jsx    |   2 +-
 src/components/beranda/Hero.jsx      |   2 +-
 src/components/beranda/Mendukung.jsx |   4 +-
 src/components/beranda/Solusi.jsx    |  82 +++++++------
 5 files changed, 154 insertions(+), 106 deletions(-)

diff --git a/src/components/beranda/Banner.jsx b/src/components/beranda/Banner.jsx
index 3946c1f..77b9080 100644
--- a/src/components/beranda/Banner.jsx
+++ b/src/components/beranda/Banner.jsx
@@ -1,71 +1,111 @@
-import {waIcon2,L1,L2,L3,L4,R1,R2,R3,R4,bgcBanner} from '../../assets/';
+import { waIcon2, L1, L2, L3, L4, R1, R2, R3, R4, bgcBanner } from "../../assets/"
 
 function Banner() {
-    return (
-        <div
-            className=" relative flex flex-col items-center justify-center mt-20 w-full h-auto md:h-[692px] bg-cover bg-center text-white text-center"
-            style={{
-                backgroundImage: ` linear-gradient(248.72deg, #5B59E0 50.11%, rgba(202, 43, 104, 0.4) 90%), url(${bgcBanner})`,
-                backgroundSize: 'cover',
-                backgroundPosition: 'center',
-                backgroundRepeat: 'no-repeat',
-                backgroundBlendMode: 'multiply',
-            }}
-        >
-            {/* Gambar L1-L4 untuk mobile */}
-            <div className="grid md:hidden grid-cols-2 gap-4 px-4 mt-8">
-                <img src={L1} alt="image 1" className="w-full rounded-lg shadow-lg object-cover" />
-                <img src={L2} alt="image 2" className="w-full rounded-lg shadow-lg object-cover" />
-                <img src={L3} alt="image 3" className="w-full rounded-lg shadow-lg object-cover" />
-                <img src={L4} alt="image 4" className="w-full rounded-lg shadow-lg object-cover" />
-            </div>
-
-            {/* Teks dan tombol */}
-            <div className="px-4 mx-auto text-center w-full mt-8 md:mt-0">
-                <div className="text-customWhite max-w-[90%] md:max-w-[45%] mx-auto">
-                    <h1 className="text-xl md:text-[30px] font-semibold text-center leading-10">
-                        Bersama Rekan AI, Wujudkan Masa Depan Bisnis yang Lebih Inovatif dan Kompetitif.
-                    </h1>
-                </div>
-                <p className="mt-4 md:mt-14 max-w-[90%] md:max-w-[700px] mx-auto text-customWhite text-sm md:text-[18px] md:font-extralight md:leading-7">
-                    Dari autentikasi dokumen hingga analisis data dan automasi HR, Rekan AI menawarkan produk-produk cerdas yang siap membantu bisnis Anda tumbuh dan bersaing di pasar yang dinamis.
-                </p>
-                <div className="flex flex-col md:flex-row gap-4 mt-4 md:mt-20 justify-center">
-                    <button className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[65px] rounded-2xl border-[1px] border-white text-white text-sm md:text-lg font-bold hover:bg-white hover:bg-opacity-10">
-                        <img src={waIcon2} alt="WhatsApp Icon" className="mr-2 h-4 md:h-[30px] md:w-[30px] w-auto" />
-                        Konsultasi Gratis
-                    </button>
-                    <button className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[65px] rounded-2xl px-4 md:px-8 py-2 md:py-3 border-[1px] border-white bg-gradient-to-r from-[#dc0168] to-[#5b59e8] text-white text-sm md:text-lg font-bold hover:opacity-90">
-                        Coba Sekarang
-                    </button>
-                </div>
-            </div>
-
-            {/* Gambar L1-L4 untuk desktop */}
-            <div className="absolute hidden md:grid top-[50%] -left-14 transform -translate-y-1/2 grid-cols-2 gap-4 max-w-full ml-16">
-                <img src={L1} alt="image 1" className="w-[200px] rounded-lg shadow-lg object-cover" />
-                <img src={L2} alt="image 2" className="w-[150px] rounded-lg shadow-lg object-cover mt-20" />
-                <img src={L3} alt="image 3" className="w-[210px] rounded-lg shadow-lg object-cover" />
-                <img src={L4} alt="image 4" className="w-[150px] rounded-lg shadow-lg object-cover -mt-5" />
-            </div>
-
-            {/* Gambar R1-R4 untuk desktop */}
-            <div className="absolute hidden md:grid top-[50%] -right-16 transform -translate-y-1/2 grid-cols-2 gap-4 max-w-full justify-end mr-16">
-                <img src={R1} alt="image 1" className="w-[150px] rounded-lg shadow-lg object-cover mt-20 ml-9" />
-                <img src={R2} alt="image 2" className="w-[200px] rounded-lg shadow-lg object-cover -ml-7" />
-                <img src={R3} alt="image 3" className="w-[180px] rounded-lg shadow-lg object-cover ml-7" />
-                <img src={R4} alt="image 4" className="w-[206px] rounded-lg shadow-lg object-cover" />
-            </div>
-
-            {/* Gambar R1-R4 untuk mobile */}
-            <div className="grid md:hidden grid-cols-2 gap-4 px-4 mt-8 mb-8">
-                <img src={R1} alt="image 1" className="w-full rounded-lg shadow-lg object-cover" />
-                <img src={R2} alt="image 2" className="w-full rounded-lg shadow-lg object-cover" />
-                <img src={R3} alt="image 3" className="w-full rounded-lg shadow-lg object-cover" />
-                <img src={R4} alt="image 4" className="w-full rounded-lg shadow-lg object-cover" />
-            </div>
+  return (
+    <div className="relative w-full overflow-hidden">
+      <div
+        className="relative flex flex-col items-center justify-center mt-20 w-full max-w-[1920px] mx-auto h-auto md:h-[692px] bg-cover bg-center text-white text-center"
+        style={{
+          backgroundImage: `linear-gradient(248.72deg, #5B59E0 50.11%, rgba(202, 43, 104, 0.4) 90%), url(${bgcBanner})`,
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          backgroundRepeat: "no-repeat",
+          backgroundBlendMode: "multiply",
+        }}
+      >
+        {/* Gambar L1-L4 untuk mobile */}
+        <div className="grid md:hidden grid-cols-2 gap-4 px-4 mt-8">
+          <img src={L1} alt="image 1" className="w-full rounded-lg shadow-lg object-cover" />
+          <img src={L2} alt="image 2" className="w-full rounded-lg shadow-lg object-cover" />
+          <img src={L3} alt="image 3" className="w-full rounded-lg shadow-lg object-cover" />
+          <img src={L4} alt="image 4" className="w-full rounded-lg shadow-lg object-cover" />
         </div>
-    )
+
+        {/* Teks dan tombol */}
+        <div className="px-4 mx-auto text-center w-full mt-8 md:mt-0 z-10">
+          <div className="text-customWhite max-w-[90%] md:max-w-[45%] mx-auto">
+            <h1 className="text-xl md:text-[30px] font-semibold text-center leading-10">
+              Bersama Rekan AI, Wujudkan Masa Depan Bisnis yang Lebih Inovatif dan Kompetitif.
+            </h1>
+          </div>
+          <p className="mt-4 md:mt-14 max-w-[90%] md:max-w-[700px] mx-auto text-customWhite text-sm md:text-[18px] md:font-extralight md:leading-7">
+            Dari autentikasi dokumen hingga analisis data dan automasi HR, Rekan AI menawarkan produk-produk cerdas yang
+            siap membantu bisnis Anda tumbuh dan bersaing di pasar yang dinamis.
+          </p>
+          <div className="flex flex-col md:flex-row gap-4 mt-4 md:mt-20 justify-center">
+            <button className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[65px] rounded-2xl border-[1px] border-white text-white text-sm md:text-lg font-bold hover:bg-white hover:bg-opacity-10">
+              <img
+                src={waIcon2}
+                alt="WhatsApp Icon"
+                className="mr-2 h-4 md:h-[30px] md:w-[30px] w-auto"
+              />
+              Konsultasi Gratis
+            </button>
+            <button className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[65px] rounded-2xl px-4 md:px-8 py-2 md:py-3 border-[1px] border-white bg-gradient-to-r from-[#dc0168] to-[#5b59e8] text-white text-sm md:text-lg font-bold hover:opacity-90">
+              Coba Sekarang
+            </button>
+          </div>
+        </div>
+
+        {/* Gambar L1-L4 untuk desktop */}
+        <div className="absolute hidden md:grid top-1/2 left-0 transform -translate-y-1/2 grid-cols-2 gap-4 w-[30vw] max-w-[400px]">
+          <img
+            src={L1}
+            alt="image 1"
+            className="w-[15vw] max-w-[200px] rounded-lg shadow-lg object-cover"
+          />
+          <img
+            src={L2}
+            alt="image 2"
+            className="w-[11vw] max-w-[150px] rounded-lg shadow-lg object-cover mt-16"
+          />
+          <img
+            src={L3}
+            alt="image 3"
+            className="w-[16vw] max-w-[210px] rounded-lg shadow-lg object-cover"
+          />
+          <img
+            src={L4}
+            alt="image 4"
+            className="w-[11vw] max-w-[150px] rounded-lg shadow-lg object-cover -mt-11"
+          />
+        </div>
+
+        {/* Gambar R1-R4 untuk desktop */}
+        <div className="absolute hidden md:grid top-1/2 right-4 transform -translate-y-1/2 grid-cols-2 gap-4 w-[30vw] max-w-[400px]">
+          <img
+            src={R1}
+            alt="image 1"
+            className="w-[11vw] max-w-[150px] rounded-lg shadow-lg object-cover mt-20 ml-9"
+          />
+          <img
+            src={R2}
+            alt="image 2"
+            className="w-[15vw] max-w-[200px] rounded-lg shadow-lg object-cover -ml-4"
+          />
+          <img
+            src={R3}
+            alt="image 3"
+            className="w-[13vw] max-w-[180px] rounded-lg shadow-lg object-cover ml-7"
+          />
+          <img
+            src={R4}
+            alt="image 4"
+            className="w-[15vw] max-w-[206px] rounded-lg shadow-lg object-cover"
+          />
+        </div>
+
+        {/* Gambar R1-R4 untuk mobile */}
+        <div className="grid md:hidden grid-cols-2 gap-4 px-4 mt-8 mb-8">
+          <img src={R1} alt="image 1" className="w-full rounded-lg shadow-lg object-cover" />
+          <img src={R2} alt="image 2" className="w-full rounded-lg shadow-lg object-cover" />
+          <img src={R3} alt="image 3" className="w-full rounded-lg shadow-lg object-cover" />
+          <img src={R4} alt="image 4" className="w-full rounded-lg shadow-lg object-cover" />
+        </div>
+      </div>
+    </div>
+  )
 }
 
 export default Banner
+
diff --git a/src/components/beranda/Header.jsx b/src/components/beranda/Header.jsx
index aec05dc..45e963d 100644
--- a/src/components/beranda/Header.jsx
+++ b/src/components/beranda/Header.jsx
@@ -12,7 +12,7 @@ const Header = () => {
     <header className="fixed top-0 left-0 w-full z-50 font-montserrat bg-white shadow-md">
       <nav className="container mx-auto flex items-center justify-between h-20 px-5 lg:px-8 transition-all duration-300">
         {/* Logo */}
-        <div className="flex-shrink-0">
+        <div className="flex-shrink-0 md:mr-5">
           <img src={Logo1 || "/placeholder.svg"} alt="Logo" className="w-[150px] h-auto" />
         </div>
 
diff --git a/src/components/beranda/Hero.jsx b/src/components/beranda/Hero.jsx
index 452c2f9..0380972 100644
--- a/src/components/beranda/Hero.jsx
+++ b/src/components/beranda/Hero.jsx
@@ -3,7 +3,7 @@ import { homeLogo, waIcon, homeImg } from '../../assets';
 function Hero() {
   return (
     <div className="w-full overflow-hidden" id="Home">
-      <div className="container mx-auto px-4 lg:px-6">
+      <div className="container mx-auto px-4 lg:px-12">
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center py-12 lg:py-16">
           {/* Left Section */}
           <div className="space-y-6 md:-mt-32 mt-10 text-center lg:text-left order-1 lg:order-none">
diff --git a/src/components/beranda/Mendukung.jsx b/src/components/beranda/Mendukung.jsx
index ec3c546..b0eee04 100644
--- a/src/components/beranda/Mendukung.jsx
+++ b/src/components/beranda/Mendukung.jsx
@@ -28,10 +28,10 @@ function Mendukung() {
               <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"
+                className="w-[190px] h-[150px] sm:w-[150px] sm:h-[150px] md:w-[190px] md:h-[200px] 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">
+              <p className="bg-[#5B59E8] text-white text-center rounded-lg shadow-md w-[190px] sm:w-[150px] md:w-[190px] h-10 flex items-center justify-center text-sm font-bold mt-4">
                 {item.title}
               </p>
             </div>
diff --git a/src/components/beranda/Solusi.jsx b/src/components/beranda/Solusi.jsx
index 0353a4c..7593145 100644
--- a/src/components/beranda/Solusi.jsx
+++ b/src/components/beranda/Solusi.jsx
@@ -1,71 +1,79 @@
-import {card1,card2,card3,card4,chek,} from '../../assets';
-
+import { card1, card2, card3, card4, chek } from "../../assets"
 
 function Solusi() {
   const cards = [
     {
       image: card1,
-      description: 'Rekan HR menghadirkan solusi automasi untuk proses HR, mulai dari rekrutmen hingga manajemen kinerja. Platform ini membantu perusahaan meningkatkan efisiensi administrasi dan kepuasan karyawan melalui integrasi AI.',
-      features: ['Automasi Proses HR', 'Manajemen Karyawan'],
+      description:
+        "Rekan HR menghadirkan solusi automasi untuk proses HR, mulai dari rekrutmen hingga manajemen kinerja. Platform ini membantu perusahaan meningkatkan efisiensi administrasi dan kepuasan karyawan melalui integrasi AI.",
+      features: ["Automasi Proses HR", "Manajemen Karyawan"],
     },
     {
       image: card2,
-      description: 'Rekan Doku adalah platform digital untuk autentikasi dan pengelolaan dokumen yang aman dan efisien. Dengan fitur e-Meterai dan e-Signature, Rekan Doku memastikan dokumen sah secara hukum dan terorganisir dengan baik.',
-      features: ['Autentikasi dokumen', 'Meterai dan Tanda Tangan Digital'],
+      description:
+        "Rekan Doku adalah platform digital untuk autentikasi dan pengelolaan dokumen yang aman dan efisien. Dengan fitur e-Meterai dan e-Signature, Rekan Doku memastikan dokumen sah secara hukum dan terorganisir dengan baik.",
+      features: ["Autentikasi dokumen", "Meterai dan Tanda Tangan Digital"],
     },
     {
       image: card3,
-      description: 'Rekan LLM memanfaatkan kecerdasan buatan berbasis model bahasa besar (Large Language Model) untuk menganalisis data. Solusi ini mempercepat pengambilan keputusan strategis.',
-      features: ['(Large Language Model) System', 'Virtual Assistant'],
+      description:
+        "Rekan LLM memanfaatkan kecerdasan buatan berbasis model bahasa besar (Large Language Model) untuk menganalisis data. Solusi ini mempercepat pengambilan keputusan strategis.",
+      features: ["(Large Language Model) System", "Virtual Assistant"],
     },
     {
       image: card4,
-      description: 'Rekan Veri menyediakan layanan verifikasi data secara instan dan akurat untuk berbagai kebutuhan bisnis. Rekan Veri membantu memastikan keaslian informasi pelanggan dan memperkuat keamanan transaksi digital.',
-      features: ['Verifikasi Data dan Dokumen', 'Keaslian Informasi Pelanggan'],
+      description:
+        "Rekan Veri menyediakan layanan verifikasi data secara instan dan akurat untuk berbagai kebutuhan bisnis. Rekan Veri membantu memastikan keaslian informasi pelanggan dan memperkuat keamanan transaksi digital.",
+      features: ["Verifikasi Data dan Dokumen", "Keaslian Informasi Pelanggan"],
     },
-  ];
+  ]
 
   return (
     <section className="min-h-screen flex flex-col items-center justify-center py-8 bg-customWhite mt-24" id="solusi">
-      <div className="text-center mb-12 md:-mt-48">
+      <div className="text-center mb-12 md:-mt-48 px-4">
         <div className="flex flex-col md:flex-row items-center justify-center gap-4">
           <h1 className="text-2xl md:text-[32px] font-semibold">Ragam Solusi Terbaik Dari</h1>
           <span className="flex items-center justify-center text-lg md:text-2xl text-customWhite bg-customRed rounded-[19px] font-bold w-[194px] h-[48px] text-center">
             #Rekan AI
           </span>
         </div>
-        <p className="text-customBlack md:text-[20px] mt-4 md:max-w-[85%] md:ml-24 text-center items-center">
-          Kami menyediakan berbagai produk berbasis AI yang dirancang khusus untuk mendukung bisnis Anda dari berbagai aspek.
+        <p className="text-customBlack md:text-[20px] mt-4 md:max-w-[85%] mx-auto text-center">
+          Kami menyediakan berbagai produk berbasis AI yang dirancang khusus untuk mendukung bisnis Anda dari berbagai
+          aspek.
         </p>
       </div>
 
-
-      <div className="mt-24 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+      <div className="mt-24 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 lg:gap-8 px-4 md:px-6 lg:px-8">
         {cards.map((card, index) => (
           <div
-            key={index}
-            className="bg-customWhite rounded-xl border p-6 flex flex-col items-center h-[681px] w-[402px] md:h-[695px] md:w-[350px]"
-          >
-            <img src={card.image} alt={`Card ${index + 1}`} className="w-[130px] h-[170px] md:w-auto md:h-auto xl:w-auto xl:h-auto 2xl:w-auto 2xl:h-auto mb-6" />
-            <p className="text-customBlack text-left mt-4 flex-1">{card.description}</p>
-            <ul className="text-left space-y-4 mb-8">
-              {card.features.map((feature, i) => (
-                <li key={i} className="flex items-center gap-2">
-                  <img src={chek} alt="Check" className="mr-2 w-auto h-auto" /> {feature}
-                </li>
-              ))}
-            </ul>
-            <button className="w-[355px] h-[62px] md:w-[330px] md:h-[60px] bg-white border-[1px] shadow-sm shadow-zinc-800 border-blue-600 text-customBlue font-medium py-2 px-4 rounded-[18px] hover:bg-blue-600 hover:text-white transition duration-300">
-              Selengkapnya <span>&rarr;</span>
-            </button>
-          </div>
+          key={index}
+          className="bg-customWhite rounded-xl border p-4 md:p-6 flex flex-col items-center w-full max-w-[350px] mx-auto min-h-[500px]"
+        >
+          <img
+            src={card.image || "/placeholder.svg"}
+            alt={`Card ${index + 1}`}
+            className="w-24 h-32 md:w-32 md:h-40 lg:w-40 lg:h-48 object-contain mb-4 md:mb-6"
+          />
+          <p className="text-customBlack text-left mt-2 md:mt-4 flex-grow text-sm md:text-base">
+            {card.description}
+          </p>
+          <ul className="text-left space-y-2 md:space-y-4 my-4 md:my-6 w-full min-h-[80px]">
+            {card.features.map((feature, i) => (
+              <li key={i} className="flex items-center gap-2 text-sm md:text-base">
+                <img src={chek || "/placeholder.svg"} alt="Check" className="w-4 h-4 md:w-5 md:h-5" /> {feature}
+              </li>
+            ))}
+          </ul>
+          <button className="w-full h-12 md:h-14 bg-white border border-blue-600 text-customBlue font-medium py-2 px-4 rounded-[18px] hover:bg-blue-600 hover:text-white transition duration-300 text-sm md:text-base">
+            Selengkapnya <span>&rarr;</span>
+          </button>
+        </div>
+        
         ))}
       </div>
-
-
-
     </section>
-  );
+  )
 }
 
-export default Solusi;
+export default Solusi
+