amnannn
/
rekan_ai
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix costomer

This commit is contained in:
Carls2320 2025-02-21 02:56:38 +07:00
parent b6687cf500
commit bcd1c05bec
2 changed files with 22 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/contact/BottomCTA.jsx
View File

@ -3,10 +3,10 @@ import { motion } from "framer-motion";
const BottomCTA = () => { const BottomCTA = () => {
return ( 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 }} viewport={{ once: false, amount: 0.2 }}
className="w-full bg-white text-center py-10 mb-[113px]" className="w-full bg-white text-center py-10 mb-[113px]"
> >
@ -23,21 +23,23 @@ const BottomCTA = () => {
</div> </div>
<p className="text-[20px] font-normal leading-[30px] tracking-[0.005em] text-center text-[#212121] mb-5 mx-auto"> <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! kontak atau email. Kami dengan senang hati akan membantu!
</p> </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"> <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 Konsultasi Gratis
</motion.button> </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 Coba Sekarang
</motion.button> </motion.button>
</div> </div>

16
src/components/contact/CustomerService.jsx
View File

@ -1,6 +1,5 @@
import { email, phone, customer } from "./asset"; import { email, phone, customer } from "./asset";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import { useEffect } from "react";
import { useInView } from "react-intersection-observer"; import { useInView } from "react-intersection-observer";
const CustomerService = () => { const CustomerService = () => {
@ -18,24 +17,23 @@ const CustomerService = () => {
}; };
return ( 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 */} {/* LEFT SECTION - Informasi */}
<motion.div <motion.div
ref={leftRef} ref={leftRef}
className="w-full md:w-[650px] 2xl:w-[750px] h-auto gap-[29px] text-left md:mt-0 md:ml-[-110px]" className="w-full md:w-[55%] h-auto text-left"
initial="hidden" initial="hidden"
animate={leftInView ? "visible" : "hidden"} animate={leftInView ? "visible" : "hidden"}
variants={fadeInLeft} variants={fadeInLeft}
key="left-content" key="left-content"
> >
<div className="mb-5"> <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 /> Kami Siap Membantu Bisnis Anda <br />
Lebih Maju! Lebih Maju!
</h2> </h2>
</div> </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. Butuh informasi lebih lanjut tentang produk atau solusi kami? Tim Rekan AI siap menjawab pertanyaan Anda dengan cepat dan profesional.
</p> </p>
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-6">
@ -48,7 +46,7 @@ const CustomerService = () => {
<div className="text-left"> <div className="text-left">
<p className="text-sm text-[#212121] md:text-[18px]"> <p className="text-sm text-[#212121] md:text-[18px]">
Kirim pertanyaan Anda ke{" "} Kirim pertanyaan Anda ke{" "}
<strong className="text-[#5B59E8] md:text-[18px]"> <strong className="text-[#5B59E8]">
support@rekanai.com support@rekanai.com
</strong>{" "} </strong>{" "}
dan tim kami akan segera merespons. dan tim kami akan segera merespons.
@ -79,7 +77,7 @@ const CustomerService = () => {
{/* RIGHT SECTION - Gambar */} {/* RIGHT SECTION - Gambar */}
<motion.div <motion.div
ref={rightRef} 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" initial="hidden"
animate={rightInView ? "visible" : "hidden"} animate={rightInView ? "visible" : "hidden"}
variants={fadeInRight} variants={fadeInRight}
@ -88,7 +86,7 @@ const CustomerService = () => {
<img <img
src={customer} src={customer}
alt="Customer Service" 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> </motion.div>
</section> </section>