From 527af57c876c94052fcc603c1bf4a0350ea0ae0f Mon Sep 17 00:00:00 2001
From: Carls2320 <devencarlo3@gmail.com>
Date: Fri, 7 Feb 2025 16:57:09 +0700
Subject: [PATCH] satu perubahan lagi setelah ini

---
 src/App.jsx                                   |  4 +-
 .../CardPersonal.jsx}                         |  2 +-
 src/componen/HeadPersonal/HeadPersonal.jsx    | 86 +++++++++----------
 .../MengapapPersonal/MengapapPersonal.jsx     |  2 +-
 4 files changed, 43 insertions(+), 51 deletions(-)
 rename src/componen/{CardContent/CardContent.jsx => CardPersonal/CardPersonal.jsx} (96%)

diff --git a/src/App.jsx b/src/App.jsx
index 05ac2a0..ba927a9 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,6 +1,6 @@
 import Header from "./componen/Header/Header";  // Mengimpor komponen Header untuk ditampilkan di bagian atas halaman
 import HeadPersonal from "./componen/HeadPersonal/HeadPersonal";  // Mengimpor komponen CustomerService untuk menampilkan informasi layanan pelanggan
-import CardContent from "./componen/CardContent/CardContent";  // Mengimpor komponen FormSection yang berisi form
+import CardPersonal from "./componen/CardPersonal/CardPersonal";  // Mengimpor komponen FormSection yang berisi form
 import SolusiBisnis from "./componen/solusibisnis/solusibisnis";  // Mengimpor komponen FAQ untuk menampilkan bagian pertanyaan yang sering diajukan
 import MengapapPersonal from "./componen/MengapapPersonal/MengapapPersonal";  // Mengimpor komponen BottomCTA untuk panggilan aksi di bagian bawah halaman
 import Transformasi from "./componen/Transformasi/Transformas"
@@ -12,7 +12,7 @@ function App() {
     <>
       <Header />  {/* Menampilkan komponen Header */}
       <HeadPersonal />  {/* Menampilkan komponen CustomerService */}
-      <CardContent />  {/* Menampilkan komponen FormSection */}
+      <CardPersonal />  {/* Menampilkan komponen FormSection */}
       <MengapapPersonal />  {/* Menampilkan komponen FAQ */}
       <SolusiBisnis />  {/* Menampilkan komponen BottomCTA */}
       <Transformasi />
diff --git a/src/componen/CardContent/CardContent.jsx b/src/componen/CardPersonal/CardPersonal.jsx
similarity index 96%
rename from src/componen/CardContent/CardContent.jsx
rename to src/componen/CardPersonal/CardPersonal.jsx
index 507fc49..7106ee3 100644
--- a/src/componen/CardContent/CardContent.jsx
+++ b/src/componen/CardPersonal/CardPersonal.jsx
@@ -23,7 +23,7 @@ export default function FeatureCards() {
   ];
 
   return (
-    <div className="container mx-auto px-4 py-16 text-center">
+    <div className="container mx-auto px-4 py-16 text-center mb-[-70px]">
       <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>
diff --git a/src/componen/HeadPersonal/HeadPersonal.jsx b/src/componen/HeadPersonal/HeadPersonal.jsx
index 36849ed..53cd0c1 100644
--- a/src/componen/HeadPersonal/HeadPersonal.jsx
+++ b/src/componen/HeadPersonal/HeadPersonal.jsx
@@ -1,65 +1,57 @@
 import { component11, wagreen, start22 } from "../asset";
 
-function Hero() {
+export default function Hero() {
   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">
+    <div className="container mx-auto px-4 lg:px-6">
+      <div className="flex flex-col lg:mt-[50px] lg:flex-row items-center mt-[200px]  gap-12 py-8">
+        {/* Left Column */}
+        <div className="flex-1 space-y-7">
+          {/* Logo and Tagline */}
+          <div className="flex items-center">
+            <span className="flex items-center justify-center w-[53.52px] h-[43px] ml-[2px] mb-4">
+              <img src= {component11} alt="Logo" width={53.52} height={43} />
+            </span>
+            <span className="inline-flex] items-center ml-[17px] 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">
+
+          {/* Header Text */}
+          <h1 className="text-[32px] text-[#212121] font-bold mt-7">
             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.
+
+          {/* Description */}
+          <p className="text-[20px] text-[#212121] mt-7">
+            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>
+
+          {/* Buttons */}
+          <div className="flex flex-col lg:flex-row gap-6 mt-[79px]">
+            <button className="flex items-center justify-center w-full lg:w-[270px] h-[70px] border-2 border-[#DC0168] rounded-[14px] text-[#DC0168] font-bold text-[18px] lg:text-[20px] hover:bg-[#ffffff1a] transition-all">
+              <img src= {wagreen} alt="WhatsApp Icon" width={30} height={30} className="mr-2" />
+              Konsultasi Gratis
+            </button>
+            <button className="w-full lg:w-[276px] h-[70px] rounded-[14px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-bold text-[18px] lg:text-[20px] hover:opacity-90 transition-all">
+              Coba Sekarang
+            </button>
+          </div>
         </div>
 
-        {/* Right Section (Home Image) */}
-        <div className="flex justify-center lg:justify-end mt-8 lg:mt-0">
+        {/* Right Column - Hero Image */}
+        <div className="flex-1 mt-[149px] 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}
+            src= {start22}
+            alt="Hero Illustration"
+            width={716}
+            height={743}
+            className="w-full h-auto"
           />
         </div>
       </div>
-
-      {/* Buttons */}
-      <div className="flex flex-col lg:flex-row mt-8 lg:-mt-28 lg:ml-28 gap-6 items-center px-4 lg:px-0">
-        <button className="w-full lg:w-[270px] h-[70px] btn2 flex items-center justify-center py-3 border-2 border-[#DC0168] rounded-[14px] text-[#DC0168]  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 Hero;
diff --git a/src/componen/MengapapPersonal/MengapapPersonal.jsx b/src/componen/MengapapPersonal/MengapapPersonal.jsx
index cd6746b..b80df49 100644
--- a/src/componen/MengapapPersonal/MengapapPersonal.jsx
+++ b/src/componen/MengapapPersonal/MengapapPersonal.jsx
@@ -14,7 +14,7 @@ function Kenapa() {
         </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]">
+        <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>