74 lines
3.3 KiB
JavaScript
74 lines
3.3 KiB
JavaScript
import { wagreen } from "./asset"; // Import gambar WhatsApp untuk ikon
|
|
import { motion } from "framer-motion";
|
|
import { useEffect, useState } from "react";
|
|
|
|
const BottomCTA = () => {
|
|
const [isVisible, setIsVisible] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
const scrollY = window.scrollY;
|
|
const triggerHeight = window.innerHeight / 1.5;
|
|
setIsVisible(scrollY > triggerHeight);
|
|
};
|
|
|
|
window.addEventListener("scroll", handleScroll);
|
|
return () => window.removeEventListener("scroll", handleScroll);
|
|
}, []);
|
|
|
|
return (
|
|
<section className="w-full bg-white text-center py-10 mb-[113px]">
|
|
{/* Animasi teks turun dari atas saat di-scroll */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -50 }}
|
|
animate={isVisible ? { opacity: 1, y: 0 } : { opacity: 0, y: -50 }}
|
|
transition={{ duration: 2.5, ease: "easeOut" }}
|
|
className="flex flex-wrap justify-center gap-2"
|
|
>
|
|
<h3 className="text-[#212121] text-center text-[32px] font-[550] leading-[48px] tracking-[0.005em]">
|
|
Masih punya pertanyaan seputar
|
|
</h3>
|
|
<h3 className="text-[24px] sm:text-xl md:text-2xl text-[#212121] mb-3">
|
|
<span className="bg-[#dc0168] bg-[length:100%] rounded-[18px] text-[#ffffff] px-9 py-2 inline-block mr-[5px]">
|
|
#Rekan AI
|
|
</span>
|
|
<span className="font-semibold ml-1">?</span>
|
|
</h3>
|
|
</motion.div>
|
|
|
|
<motion.p
|
|
initial={{ opacity: 0, y: -30 }}
|
|
animate={isVisible ? { opacity: 1, y: 0 } : { opacity: 0, y: -30 }}
|
|
transition={{ duration: 2, ease: "easeOut" }}
|
|
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 />
|
|
kontak atau email. Kami dengan senang hati akan membantu!
|
|
</motion.p>
|
|
|
|
{/* Animasi tombol keluar dari kanan dan kiri saat di-scroll */}
|
|
<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
|
|
initial={{ opacity: 0, x: -50 }}
|
|
animate={isVisible ? { opacity: 1, x: 0 } : { opacity: 0, x: -50 }}
|
|
transition={{ duration: 2.5, ease: "easeOut" }}
|
|
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} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
|
|
Konsultasi Gratis
|
|
</motion.button>
|
|
<motion.button
|
|
initial={{ opacity: 0, x: 50 }}
|
|
animate={isVisible ? { opacity: 1, x: 0 } : { opacity: 0, x: 50 }}
|
|
transition={{ duration: 2.5, ease: "easeOut" }}
|
|
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>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default BottomCTA;
|