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

src/components/contact/BottomCTA.jsx

@@ -3,10 +3,10 @@ import { motion } from "framer-motion";
 
 const BottomCTA = () => {
   return (
-    <motion.section 
+    <motion.section
-      initial={{ opacity: 0, y: 50 }} 
+      initial={{ opacity: 0, y: 50 }}
-      whileInView={{ opacity: 1, y: 0 }} 
+      whileInView={{ opacity: 1, y: 0 }}
-      transition={{ duration: 1.2, ease: "easeOut" }} 
+      transition={{ duration: 1.2, ease: "easeOut" }}
       viewport={{ once: false, amount: 0.2 }}
       className="w-full bg-white text-center py-10 mb-[113px]"
     >
@@ -23,21 +23,23 @@ const BottomCTA = () => {
       </div>
 
       <p className="text-[20px] font-normal leading-[30px] tracking-[0.005em] text-center text-[#212121] mb-5 mx-auto">
-        Jika pertanyaan Anda belum terjawab di atas, jangan ragu untuk menghubungi kami melalui formulir<br />
+        Jika pertanyaan Anda belum terjawab di atas, jangan ragu untuk
+        menghubungi kami melalui formulir
+        <br />
         kontak atau email. Kami dengan senang hati akan membantu!
       </p>
 
       <div className="flex flex-col justify-center md:mt-12 sm:flex-row gap-6 sm:gap-12 sm:mt-1 px-4 sm:px-0">
-        <motion.button
+        <motion.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-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
-          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-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]"
+          <img
-        >
+            src={wagreen}
-          <img src={wagreen} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
+            alt="WhatsApp Icon"
+            className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]"
+          />
           Konsultasi Gratis
         </motion.button>
-        
+
-        <motion.button
+        <motion.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-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
-          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-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90"
-        >
           Coba Sekarang
         </motion.button>
       </div>

src/components/contact/CustomerService.jsx

@@ -1,6 +1,5 @@
 import { email, phone, customer } from "./asset";
 import { motion } from "framer-motion";
-import { useEffect } from "react";
 import { useInView } from "react-intersection-observer";
 
 const CustomerService = () => {
@@ -18,7 +17,7 @@ const CustomerService = () => {
     };
 
     return (
-        <section className="main-container mt-[180px] mb-16 md:mt-20 flex flex-col md:flex-row items-center px-5 py-10 max-w-7xl mx-auto md:mb-[100px] 2xl:px-20 2xl:gap-20">
+        <section className="main-container mt-[180px] mb-16 md:mt-20 flex flex-col md:flex-row items-center px-5 py-10 max-w-7xl mx-auto md:mb-[100px] md:gap-12 xl:gap-20 2xl:px-20">
             {/* LEFT SECTION - Informasi */}
             <motion.div
                 ref={leftRef}
@@ -28,14 +27,13 @@ const CustomerService = () => {
                 variants={fadeInLeft}
                 key="left-content"
             >
-
                 <div className="mb-5">
-                    <h2 className="text-[#212121] text-[28px] md:text-[32px] font-[550] leading-[36px] md:leading-[48px] 2xl:leading-[52px]">
+                    <h2 className="text-[#212121] text-[28px] md:text-[32px] font-[550] leading-[36px] md:leading-[48px]">
                         Kami Siap Membantu Bisnis Anda <br />
                         Lebih Maju!
                     </h2>
                 </div>
-                <p className="text-[#212121] leading-relaxed mb-6 text-[16px] md:text-[20px] md:max-w-[90%]">
+                <p className="text-[#212121] leading-relaxed mb-6 text-[16px] md:text-[18px]">
                     Butuh informasi lebih lanjut tentang produk atau solusi kami? Tim Rekan AI siap menjawab pertanyaan Anda dengan cepat dan profesional.
                 </p>
                 <div className="flex flex-col gap-6">
@@ -48,7 +46,7 @@ const CustomerService = () => {
                         <div className="text-left">
                             <p className="text-sm text-[#212121] md:text-[18px]">
                                 Kirim pertanyaan Anda ke{" "}
-                                <strong className="text-[#5B59E8] md:text-[18px]">
+                                <strong className="text-[#5B59E8]">
                                     support@rekanai.com
                                 </strong>{" "}
                                 dan tim kami akan segera merespons.
@@ -79,7 +77,7 @@ const CustomerService = () => {
             {/* RIGHT SECTION - Gambar */}
             <motion.div
                 ref={rightRef}
-                className="flex justify-center md:justify-end items-center md:mr-[-70px]"
+                className="w-full md:w-[45%] flex justify-center items-center"
                 initial="hidden"
                 animate={rightInView ? "visible" : "hidden"}
                 variants={fadeInRight}
@@ -88,7 +86,7 @@ const CustomerService = () => {
                 <img
                     src={customer}
                     alt="Customer Service"
-                    className="w-full h-auto md:w-auto md:h-auto"
+                    className="w-[80%] md:w-full max-w-[450px] h-auto"
                 />
             </motion.div>
         </section>

src/components/contact/asset/index.js

@@ -1,25 +1,43 @@
-import row from './arrow.png';
+import row from "./arrow.png";
-import component11 from './Component 11.png';
+import component11 from "./Component 11.png";
-import customer from './customer.png';
+import customer from "./customer.png";
-import email from './email.png';
+import email from "./email.png";
-import facebook from './facebook.png';
+import facebook from "./facebook.png";
-import frame from './Frame.png';
+import frame from "./Frame.png";
-import frame27 from './Frame27.png';
+import frame27 from "./Frame27.png";
-import img10 from './image 10.png';
+import img10 from "./image 10.png";
-import instagram from './instagram.png';
+import instagram from "./instagram.png";
-import kmn from './Dukcapil PNG Pic.png';
+import kmn from "./Dukcapil PNG Pic.png";
-import kominfo from './Kominfo PNG Pic.png';
+import kominfo from "./Kominfo PNG Pic.png";
-import Logo1 from './logo.png';
+import Logo1 from "./logo.png";
-import nvidia from './NVIDIA PNG Pic.png';
+import nvidia from "./NVIDIA PNG Pic.png";
-import ojk from './OJK-Rilis-Roadmap-Pasar-Modal-Indonesia-2023-2027.webp';
+import ojk from "./OJK-Rilis-Roadmap-Pasar-Modal-Indonesia-2023-2027.webp";
-import phone from './phone.png';
+import phone from "./phone.png";
-import search from './search.png';
+import search from "./search.png";
-import telephone from './telephone.png';
+import telephone from "./telephone.png";
-import wagreen from './whatsapp-color_svgrepo.com.png';
+import wagreen from "./whatsapp-color_svgrepo.com.png";
-import wabutton from './Whatsapp22.png';
+import wabutton from "./Whatsapp22.png";
-import x from './x.png';
+import x from "./x.png";
 
-
+export {
-export{
+  row,
-    row,component11,customer,email,facebook,frame,frame27,img10,instagram,kmn,kominfo,Logo1,nvidia,ojk,phone,search,telephone,wagreen,wabutton,x
+  component11,
-}
+  customer,
+  email,
+  facebook,
+  frame,
+  frame27,
+  img10,
+  instagram,
+  kmn,
+  kominfo,
+  Logo1,
+  nvidia,
+  ojk,
+  phone,
+  search,
+  telephone,
+  wagreen,
+  wabutton,
+  x,
+};