45 lines
2.3 KiB
JavaScript
45 lines
2.3 KiB
JavaScript
import { wagreen } from "./asset"; // Import gambar WhatsApp untuk ikon
|
|
|
|
const BottomCTA = () => {
|
|
return (
|
|
<section className="w-full bg-white text-center py-10 mb-[113px]">
|
|
{/* Bagian ini untuk menampilkan teks yang memberi tahu pengguna bahwa mereka bisa menghubungi jika masih ada pertanyaan */}
|
|
<div 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">
|
|
{/* Menampilkan tag #Rekan AI dengan background warna dan teks putih */}
|
|
<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>
|
|
</div>
|
|
|
|
{/* Pesan yang memberi tahu pengguna untuk menghubungi jika pertanyaan belum terjawab */}
|
|
<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 />kontak atau email. Kami dengan senang hati akan membantu!
|
|
</p>
|
|
|
|
{/* Bagian tombol CTA */}
|
|
<div className="flex justify-center flex-col lg:flex-row mt-8 lg:mt-16 gap-6">
|
|
{/* Tombol Konsultasi Gratis dengan ikon WhatsApp */}
|
|
<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] text-[20px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
|
|
{/* Gambar WhatsApp di kiri tombol */}
|
|
<img src={wagreen} alt="WhatsApp Icon" className="mr-2 h-[1.2rem] w-auto" />
|
|
Konsultasi Gratis
|
|
</button>
|
|
|
|
{/* Tombol Coba Sekarang dengan efek gradient */}
|
|
<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 text-[20px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
|
|
Coba Sekarang
|
|
</button>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default BottomCTA;
|