rekan_ai/src/components/beranda/MasaDepan.jsx
2025-02-07 17:06:16 +07:00

42 lines
1.9 KiB
JavaScript

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] -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>
</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>
</>
);
}
export default MasaDepan;