117 lines
5.3 KiB
JavaScript
117 lines
5.3 KiB
JavaScript
import { imgLeft, chek2, waIcon, circle1, circle2 } from '../../assets';
|
|
import { Link } from "react-router-dom";
|
|
import { motion } from "framer-motion";
|
|
import { useInView } from "react-intersection-observer";
|
|
|
|
function Kenapa() {
|
|
const options = { triggerOnce: false, threshold: 0.2 };
|
|
const { ref: sectionRef, inView: sectionInView } = useInView(options);
|
|
const { ref: textRef, inView: textInView } = useInView(options);
|
|
const { ref: listRef, inView: listInView } = useInView(options);
|
|
const { ref: buttonRef, inView: buttonInView } = useInView(options);
|
|
|
|
return (
|
|
<div ref={sectionRef} className="container mx-auto flex justify-center items-center bg-customWhite mt-5 min-h-screen">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 50 }}
|
|
animate={sectionInView ? { opacity: 1, y: 0 } : {}}
|
|
transition={{ duration: 0.8 }}
|
|
className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52"
|
|
>
|
|
{/* Decorative Circles */}
|
|
<div className="absolute hidden md:flex top-1 right-24 flex-col items-end space-y-4">
|
|
<motion.img
|
|
src={circle1} alt="Circle 1"
|
|
className="w-auto h-auto"
|
|
initial={{ opacity: 0, scale: 0.5 }}
|
|
animate={sectionInView ? { opacity: 1, scale: 1 } : {}}
|
|
transition={{ duration: 0.6, delay: 0.3 }}
|
|
/>
|
|
<motion.img
|
|
src={circle2} alt="Circle 2"
|
|
className="w-auto h-auto"
|
|
initial={{ opacity: 0, scale: 0.5 }}
|
|
animate={sectionInView ? { opacity: 1, scale: 1 } : {}}
|
|
transition={{ duration: 0.6, delay: 0.5 }}
|
|
/>
|
|
</div>
|
|
|
|
{/* Image Section */}
|
|
<motion.div
|
|
ref={textRef}
|
|
className="relative w-full md:w-1/2 p-5 flex justify-center md:ml-14 md:justify-start"
|
|
initial={{ opacity: 0, x: -50 }}
|
|
animate={textInView ? { opacity: 1, x: 0 } : {}}
|
|
transition={{ duration: 0.8 }}
|
|
>
|
|
<img
|
|
src={imgLeft}
|
|
alt="Woman with Tablet"
|
|
className="w-[300px] h-auto md:w-[654.5px] md:h-[609.67px]"
|
|
/>
|
|
</motion.div>
|
|
|
|
{/* Text Section */}
|
|
<motion.div
|
|
ref={listRef}
|
|
className="w-full md:w-1/2 p-6 md:p-10 flex flex-col items-center md:items-start md:mr-28 text-center md:text-left"
|
|
initial={{ opacity: 0, x: 50 }}
|
|
animate={listInView ? { opacity: 1, x: 0 } : {}}
|
|
transition={{ duration: 0.8, delay: 0.3 }}
|
|
>
|
|
<h2 className="text-2xl md:text-[28px] font-semibold text-customBlack">Kenapa Harus Rekan AI?</h2>
|
|
<p className="text-customBlack mt-4 text-sm md:leading-7 md:text-[18px]">
|
|
Rekan AI adalah mitra inovasi bisnis Anda dalam menghadapi era
|
|
digital. Kami menghadirkan teknologi kecerdasan buatan yang dirancang
|
|
untuk meningkatkan efisiensi operasional, mempercepat proses, dan
|
|
memberikan wawasan berbasis data yang akurat.
|
|
</p>
|
|
<ul className="mt-8 space-y-4 md:space-y-6 text-sm md:max-w-[90%] md:text-base text-customBlack font-medium">
|
|
{[
|
|
"Automasi proses untuk mengurangi biaya dan meningkatkan produktivitas.",
|
|
"Analisis data real-time untuk pengambilan keputusan yang lebih tepat.",
|
|
"Menciptakan interaksi pelanggan yang lebih relevan dan berkesan.",
|
|
"Verifikasi dan autentikasi berbasis AI yang memperkuat keamanan data."
|
|
].map((text, index) => (
|
|
<motion.li
|
|
key={index}
|
|
className="flex items-center"
|
|
initial={{ opacity: 0, x: -20 }}
|
|
animate={listInView ? { opacity: 1, x: 0 } : {}}
|
|
transition={{ duration: 0.6, delay: index * 0.2 }}
|
|
>
|
|
<img src={chek2} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
|
|
{text}
|
|
</motion.li>
|
|
))}
|
|
</ul>
|
|
|
|
<div ref={buttonRef} className="flex flex-col md:flex-row mt-8 md:mt-20 space-y-4 md:space-y-0 md:space-x-10 w-full">
|
|
<motion.button
|
|
className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-customRed text-customRed md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition"
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
|
|
transition={{ duration: 0.5, delay: 0.8 }}
|
|
>
|
|
<img src={waIcon} alt="WhatsApp Icon" className="mr-2 w-4 h-4 md:w-[30px] md:h-[30px]" />
|
|
Konsultasi Gratis
|
|
</motion.button>
|
|
<Link to={"/Contact#form"}>
|
|
<motion.button
|
|
className="w-full md:w-[276px] h-[50px] md:h-[70px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white md:text-xl font-medium rounded-[14px] hover:opacity-90 transition"
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
|
|
transition={{ duration: 0.5, delay: 1 }}
|
|
>
|
|
Coba Sekarang
|
|
</motion.button>
|
|
</Link>
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Kenapa;
|