Merge branch 'main' of https://git.allbestsistem.com/amnannn/rekan_ai into carls2

2025-03-03 09:10:48 +07:00 · 2025-03-03 09:10:48 +07:00 · 15ec2fb804
commit 15ec2fb804
parent 4ee953668a 15478bd369
6 changed files with 178 additions and 147 deletions
--- a/src/components/beranda/Banner.jsx
+++ b/src/components/beranda/Banner.jsx
@ -27,11 +27,11 @@ function Banner() {
        {/* Teks dan tombol */}
        <div className="container mx-auto px-4 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">
+            <h1 className="text-xl md:text-[25px] lg:text-[24px] 2xl: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">
+          <p className="mt-4 md:mt-14 max-w-[90%] md:max-w-[500px] 2xl:max-w-[700px]  mx-auto text-customWhite text-sm 2xl: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>
@ -58,22 +58,22 @@ function Banner() {
          <img
            src={L1}
            alt="image 1"
-            className="w-[15vw] max-w-[200px] rounded-lg shadow-lg object-cover"
+            className="w-[15vw] max-w-[170px] 2xl: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"
+            className="w-[11vw] max-w-[135px] 2xl:max-w-[150px] md:-translate-x-9 2xl:-translate-x-0 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"
+            className="w-[16vw] max-w-[180px] 2xl: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"
+            className="w-[11vw] max-w-[120px] 2xl:max-w-[150px] md:-translate-x-5 2xl:-translate-x-0 rounded-lg shadow-lg object-cover -mt-1 2xl:-mt-11"
          />
        </div>

@ -82,22 +82,22 @@ function Banner() {
          <img
            src={R1}
            alt="image 1"
-            className="w-[11vw] max-w-[150px] rounded-lg shadow-lg object-cover mt-20 ml-9"
+            className="w-[11vw] max-w-[135px] 2xl:max-w-[150px] rounded-lg shadow-lg object-cover mt-28 2xl:mt-20 ml-24 2xl:ml-9"
          />
          <img
            src={R2}
            alt="image 2"
-            className="w-[15vw] max-w-[200px] rounded-lg shadow-lg object-cover -ml-4"
+            className="w-[15vw] max-w-[170px] 2xl:max-w-[200px] rounded-lg shadow-lg object-cover 2xl:-ml-4 md:ml-8 md:mt-14 2xl:mt-0"
          />
          <img
            src={R3}
            alt="image 3"
-            className="w-[13vw] max-w-[180px] rounded-lg shadow-lg object-cover ml-7"
+            className="w-[13vw] max-w-[145px] 2xl:max-w-[180px] rounded-lg shadow-lg object-cover ml-24 2xl:ml-7"
          />
          <img
            src={R4}
            alt="image 4"
-            className="w-[15vw] max-w-[206px] rounded-lg shadow-lg object-cover"
+            className="w-[15vw] max-w-[170px] 2xl:max-w-[206px] rounded-lg shadow-lg object-cover ml-8 2xl:ml-0"
          />
        </div>

--- a/src/components/beranda/Footer.jsx
+++ b/src/components/beranda/Footer.jsx
@ -15,10 +15,11 @@ function Footer() {
  const navigate = useNavigate();
  return (
    <footer className="bg-customGrey py-10 text-[#212121]">
+      <div className="container mx-auto">
        {/* 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 */}
-        <div className="mb-5 sm:mb-0">
+          <div className="mb-5 sm:mb-0 md:-ml-16">
            <img
              src={component11} // Gambar logo perusahaan
              alt="Logo"
@ -150,6 +151,8 @@ function Footer() {
            © Copyright 2025 Rekan AI. Seluruh hak cipta dilindungi undang-undang
          </p>
        </div>
+      </div>
+
    </footer>
  );
 }
--- a/src/components/beranda/Header.jsx
+++ b/src/components/beranda/Header.jsx
@ -7,6 +7,28 @@ const Header = () => {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [isSolusiOpen, setIsSolusiOpen] = useState(false);
  const [isProdukOpen, setIsProdukOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("")
+
+  const handleSearch = (e) => {
+    setSearchQuery(e.target.value)
+  }
+
+  const handleSearchSubmit = (e) => {
+    e.preventDefault()
+    const query = searchQuery.toLowerCase()
+
+    // Solutions mapping
+    if (query.includes("solusi personal") || query.includes("personal")) {
+      navigate("/SolusiPersonal")
+    } else if (query.includes("solusi startup") || query.includes("startup")) {
+      navigate("/SolusiStartup")
+    } else if (query.includes("solusi corporate") || query.includes("corporate") || query.includes("business")) {
+      navigate("/SolusiCorporate")
+    }
+
+    window.scrollTo({ top: 0, behavior: "smooth" })
+    setSearchQuery("") // Clear search after submission
+  }

  // Referensi untuk mendeteksi klik di luar dropdown
  const solusiRef = useRef(null);
@ -23,6 +45,7 @@ const Header = () => {
      }
    }
    
+
    // Tambahkan event listener saat dropdown terbuka
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
@ -72,7 +95,7 @@ const Header = () => {
            </button>

            {isProdukOpen && (
-              <div className="absolute left-[500px] -translate-x-1/2 top-full md:top-11 mt-2 w-[5000px]">
+              <div className="absolute left-[448px] -translate-x-1/2 top-full md:top-11 mt-2 w-[1450px]">
                <div className="bg-customRed bg-opacity-80 rounded-xl p-8">
                  <div className="flex justify-center gap-8">
                    {/* HR */}
@ -165,7 +188,7 @@ const Header = () => {
            </button>

            {isSolusiOpen && (
-              <div className="absolute left-64 -translate-x-1/2 top-full md:top-11 mt-2 w-[5000px]">
+              <div className="absolute left-[340px] -translate-x-1/2 top-full md:top-11 mt-2 w-[1450px]">
                <div className="bg-customRed bg-opacity-80 rounded-xl p-8">
                  <div className="flex justify-center gap-8">
                    {/* Personal */}
@ -235,16 +258,21 @@ const Header = () => {

        {/* Search Bar */}
        <div className="hidden lg:flex items-center flex-1 max-w-xl mx-8">
-          <div className="relative w-full">
+          <form onSubmit={handleSearchSubmit} className="relative w-full">
            <input
              type="text"
              placeholder="Pencarian..."
+              value={searchQuery}
+              onChange={handleSearch}
              className="w-full h-12 px-4 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#5a55ff]"
            />
-            <button className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500 hover:text-[#5a55ff]">
+            <button
+              type="submit"
+              className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500 hover:text-[#5a55ff]"
+            >
              <img src={search || "/placeholder.svg"} alt="search" className="w-5 h-5" />
            </button>
-          </div>
+          </form>
        </div>

        {/* Konsultasi Button */}
--- a/src/components/beranda/Kenapa.jsx
+++ b/src/components/beranda/Kenapa.jsx
@ -54,7 +54,7 @@ function Kenapa() {
        {/* Text Section */}
        <motion.div 
          ref={listRef}
-          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"
+          className="w-full md:w-[40%] p-6 md:p-10 flex flex-col items-center md:items-start md:mr-28 text-center md:text-left"
          initial={{ opacity: 0, x: 50 }}
          animate={listInView ? { opacity: 1, x: 0 } : {}}
          transition={{ duration: 0.8, delay: 0.3 }}
--- a/src/components/contact/CustomerService.jsx
+++ b/src/components/contact/CustomerService.jsx
@ -21,7 +21,7 @@ const CustomerService = () => {
            {/* LEFT SECTION - Informasi */}
            <motion.div
                ref={leftRef}
-                className="w-full md:w-[55%] h-auto text-left"
+                className="w-full md:w-[650px] 2xl:w-[750px] h-auto gap-[29px] text-left md:mt-0 lg: 2xl:ml-[-90px]"
                initial="hidden"
                animate={leftInView ? "visible" : "hidden"}
                variants={fadeInLeft}
--- a/src/components/solusi/SolusiCorporate/data.js
+++ b/src/components/solusi/SolusiCorporate/data.js
@ -87,7 +87,7 @@ export const data = {
          {
            title: "Pengurangan Risiko Fraud",
            description:
-              "Cegah potensi penipuan dengan verifikasi data yang komprehensif dan terintegrasi.",
+              "Cegah potensi penipuan dengan verifikasi data yang komprehensif dan terintegrasi.3",
            icon: maskcek
          }
        ]