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

animasi 90%

Browse Source
This commit is contained in:
Carls2320
2025-02-19 10:40:00 +07:00
parent b5b04505b9
commit 9d420f3b05
22 changed files with 1063 additions and 460 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/solusi/TransformasiPersonal/TransformasiPersonal.jsx
View File

@@ -1,9 +1,17 @@
import { wagreen } from "../asset";
import { Link } from "react-router-dom";
import { motion } from "framer-motion";
function Transformasi() {
return (
<>
<div className="flex flex-col items-center justify-center text-center w-full h-[65vh] mb-20 -mt-3">
<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 items-center justify-center text-center w-full h-[65vh] mb-20 -mt-3"
>
{/* Tagline Section */}
<div className="mb-5">
<div className="flex flex-col sm:flex-row items-center justify-center gap-2 p-4">
@@ -24,22 +32,31 @@ function Transformasi() {
</span>
</p>
</div>
</motion.div>
</div>
<div className="flex flex-col justify-center md:-mt-52 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-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
<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-52 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-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
</button>
</motion.button>
<Link to={"/Contact#form"}>
<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">
Coba Sekarang
</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"
>
Coba Sekarang
</motion.button>
</Link>
</div>
</motion.div>
</>
);
}
export default Transformasi;
export default Transformasi;