74 lines
3.0 KiB
JavaScript
74 lines
3.0 KiB
JavaScript
import React from "react";
|
|
import { motion } from "framer-motion";
|
|
import { waIcon } from "../../assets";
|
|
import { Link } from "react-router-dom";
|
|
|
|
function MasaDepan() {
|
|
return (
|
|
<>
|
|
{/* Tagline Section */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 50 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 1.2, ease: "easeOut" }}
|
|
className="flex flex-col items-center justify-center text-center w-full h-[65vh] -mt-3"
|
|
>
|
|
<div className="mb-5">
|
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-2 p-4">
|
|
<motion.span
|
|
initial={{ scale: 0.8, opacity: 0 }}
|
|
animate={{ scale: 1, opacity: 1 }}
|
|
transition={{ duration: 1.2, ease: "easeOut" }}
|
|
className="flex items-center justify-center bg-[#CA2B68] text-white font-semibold text-2xl rounded-2xl w-48 h-12"
|
|
>
|
|
#Rekan AI
|
|
</motion.span>
|
|
<motion.h1
|
|
initial={{ opacity: 0, x: -50 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 1.2, ease: "easeOut" }}
|
|
className="text-2xl sm:text-[32px] font-semibold text-[#212121]"
|
|
>
|
|
Masa Depan Bisnis, Dimulai Hari Ini
|
|
</motion.h1>
|
|
</div>
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 1.2, ease: "easeOut", delay: 0.3 }}
|
|
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.
|
|
</motion.p>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Button Section */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 50 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 1.2, ease: "easeOut" }}
|
|
viewport={{ once: false, amount: 0.2 }}
|
|
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"
|
|
>
|
|
<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-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
|
|
</motion.button>
|
|
<Link to={"/Contact#form"}>
|
|
<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-medium text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90"
|
|
>
|
|
Coba Sekarang
|
|
</motion.button>
|
|
</Link>
|
|
</motion.div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default MasaDepan;
|