add solusi

2025-02-07 17:06:16 +07:00
parent 33f86a49f2
commit 4c4bd690f4
61 changed files with 974 additions and 87 deletions
--- a/src/components/beranda/Header.jsx
+++ b/src/components/beranda/Header.jsx
@@ -49,27 +49,30 @@ const Header = () => {

          {/* Solusi Dropdown */}
          <li className="relative group">
-            <button onClick={() => setIsSolusiOpen(!isSolusiOpen)} className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center">
+            <button
+              onClick={() => setIsSolusiOpen(!isSolusiOpen)}
+              className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center"
+            >
              Solusi
              <img src={row} alt="arrow" className="ml-1" />
            </button>
            {isSolusiOpen && (
              <ul
-                className="absolute md:left-[-550px] top-12 w-screen h-[173px] bg-customRed text-black list-none py-4 shadow-lg z-50 gap-10 px-10 flex flex-row justify-center items-center"
+                className="absolute left-[-20px] md:left-[-550px] top-12 w-screen bg-customRed text-black list-none py-4 shadow-lg z-50 gap-10 px-10 flex md:flex-row flex-col justify-center items-center"
              >
-                <div className="flex flex-row justify-center items-center gap-10 mr-96">
+                <div className="flex md:flex-row flex-col justify-center items-center gap-3 md:gap-10 md:mr-96">
                  {/* Personal */}
-                  <li className=" px-5 py-4 bg-white rounded-xl w-[282px] h-[94px] flex items-start gap-4 hover:bg-gray-100">
-                    <img src={IconPersonal} alt="" className="w-69 h-69" />
+                  <li onClick={() => navigate("/SolusiPersonal")} className="px-5 py-4 bg-white rounded-xl w-[282px] h-[94px] flex items-start gap-4 hover:bg-gray-100">
+                    <img src={IconPersonal} alt="" className="w-16 h-16" />
                    <div>
-                      <h3 className="font-medium text-base">Personal</h3>
+                      <h3  className="font-medium text-base">Personal</h3>
                      <p className="text-xs text-customBlack">Solusi efisien <br /> kebutuhan personal</p>
                    </div>
                  </li>

                  {/* Startup */}
-                  <li className="px-5 py-4 bg-white rounded-xl w-[282px] h-[94px] flex items-start gap-4 hover:bg-gray-100">
-                    <img src={IconStartup} alt="" className="w-69 h-69" />
+                  <li onClick={() => navigate("/SolusiStartup")} className="px-5 py-4 bg-white rounded-xl w-[282px] h-[94px] flex items-start gap-4 hover:bg-gray-100">
+                    <img src={IconStartup} alt="" className="w-16 h-16" />
                    <div>
                      <h3 className="font-medium text-base">Startup</h3>
                      <p className="text-xs text-customBlack">Dukungan penuh <br /> untuk bisnis Startup</p>
@@ -77,19 +80,20 @@ const Header = () => {
                  </li>

                  {/* Corporate Business */}
-                  <li className="px-5 py-4 bg-white rounded-xl w-[282px] h-[94px] flex items-start gap-4 hover:bg-gray-100">
-                    <img src={IconCorporate} alt="" className="w-69 h-69" />
+                  <li onClick={() => navigate("/SolusiPersonal")} className="px-5 py-4 bg-white rounded-xl w-[282px] h-[94px] flex items-start gap-4 hover:bg-gray-100">
+                    <img src={IconCorporate} alt="" className="w-16 h-16" />
                    <div>
                      <h3 className="font-medium text-base">Corporate Business</h3>
                      <p className="text-xs text-customBlack">Solusi strategis untuk bisnis skala besar</p>
                    </div>
                  </li>
                </div>
-
              </ul>
            )}
          </li>

+
+
          <li>
            <button onClick={() => navigate("/Contact")} className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]">
              Hubungi Kami
--- a/src/components/beranda/Hero.jsx
+++ b/src/components/beranda/Hero.jsx
@@ -29,11 +29,11 @@ function Hero() {

            {/* 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] font-bold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
+                <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-medium 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-[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 font-bold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
+                <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 font-medium text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
                    Coba Sekarang
                </button>
            </div>
--- a/src/components/beranda/MasaDepan.jsx
+++ b/src/components/beranda/MasaDepan.jsx
@@ -2,38 +2,39 @@ import React from "react";
 import { waIcon } from "../../assets";
 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">
-            Masa Depan Bisnis, Dimulai Hari Ini
-          </h1>
+    <>
+      <div className="flex flex-col items-center justify-center text-center w-full h-[65vh] -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">
+              Masa Depan Bisnis, Dimulai Hari Ini
+            </h1>
+          </div>
+          <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>
        </div>
-        <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>
-      </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={waIcon}
-            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>
+      {/* Button Section */}
+      <div className="flex flex-col justify-center md:-mt-32 md:mb-56 sm:flex-row gap-6 sm:gap-12 -mt-10 mb-20 px-4 sm: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-medium text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
+        <img src={waIcon} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[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 font-medium text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
+        Coba Sekarang
+    </button>
+</div>
+
+    </>
+
  );
 }

--- a/src/components/beranda/Mendukung.jsx
+++ b/src/components/beranda/Mendukung.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { imgLeft1,imgLeft2,imgLeft3,imgRight } from '../../assets';
+import { imgLeft1, imgLeft2, imgLeft3, imgRight } from '../../assets';

 function Mendukung() {
  const items = [
@@ -10,44 +10,43 @@ 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-[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
-      <br />
-       Skala Usaha
-    </p>
-    <p className="text-[16px] md:text-[20px] font-normal text-customBlack text-left md:text-left">
-      Kami menawarkan berbagai teknologi AI yang dapat mengotomatisasi proses, menganalisis data dengan akurat, dan memberikan pengalaman pelanggan yang lebih personal. Dengan implementasi yang mudah dan hasil yang cepat, Rekan AI menjadi mitra terbaik untuk mendukung pertumbuhan bisnis Anda.
-    </p>
+      {/* Left Content */}
+      <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
+          <br />
+          Skala Usaha
+        </p>
+        <p className="text-[16px] md:text-[20px] font-normal text-customBlack text-left md:text-left">
+          Kami menawarkan berbagai teknologi AI yang dapat mengotomatisasi proses, menganalisis data dengan akurat, dan memberikan pengalaman pelanggan yang lebih personal. Dengan implementasi yang mudah dan hasil yang cepat, Rekan AI menjadi mitra terbaik untuk mendukung pertumbuhan bisnis Anda.
+        </p>

-    <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 md:mt-5">
-      {/* Image */}
-      <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" 
-      />
-      {/* 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">
-        {item.title}
-      </p>
+        <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 md:mt-5">
+              {/* Image */}
+              <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"
+              />
+              {/* 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">
+                {item.title}
+              </p>
+            </div>
+          ))}
+        </div>
+
+      </div>
+
+      {/* Right Content */}
+      <div className="w-full md:w-2/5 mt-8 md:mt-0 order-1 md:order-2">
+        <img src={imgRight} alt="Image Right" className="w-auto h-auto" />
+      </div>
    </div>
-  ))}
-</div>
-
-  </div>
-
-  {/* Right Content */}
-  <div className="w-full md:w-2/5 mt-8 md:mt-0 order-1 md:order-2">
-    <img src={imgRight} alt="Image Right" className="w-full h-auto" />
-  </div>
-</div>

  );
 }

 export default Mendukung;
-