forked from amnannn/rekan_ai
92 lines
3.7 KiB
JavaScript
92 lines
3.7 KiB
JavaScript
import { homeLogo, waIcon, homeImg } from '../../assets';
|
|
import { useNavigate, Link } from "react-router-dom";
|
|
import { motion } from "framer-motion";
|
|
import { useEffect, useState } from "react";
|
|
|
|
function Hero() {
|
|
const [inView, setInView] = useState(false);
|
|
const navigate = useNavigate();
|
|
|
|
useEffect(() => {
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
setInView(true);
|
|
} else {
|
|
setInView(false);
|
|
}
|
|
});
|
|
},
|
|
{ threshold: 0.2 }
|
|
);
|
|
|
|
const target = document.querySelector("#hero-section");
|
|
if (target) {
|
|
observer.observe(target);
|
|
}
|
|
|
|
return () => {
|
|
if (target) {
|
|
observer.unobserve(target);
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div className="translate-y-24 md:translate-y-0 w-full overflow-hidden" id="Home">
|
|
<div className="container mx-auto px-4 lg:px-12">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center py-12 lg:py-16" id="hero-section">
|
|
{/* Left Section */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -50 }}
|
|
animate={{ opacity: inView ? 1 : 0, x: inView ? 0 : -50 }}
|
|
transition={{ duration: 0.8 }}
|
|
className="space-y-6 md:-mt-40 -mt-28 text-center lg:text-left order-1 md:-ml-4 2xl:-ml-4 lg:order-none"
|
|
>
|
|
<img src={homeLogo} alt="Rekan AI Logo" className="h-12 w-auto lg:mx-0" />
|
|
<h1 className="text-[24px] lg:text-[30px] font-semibold text-customBlack leading-tight">
|
|
Ciptakan Pengalaman Pelanggan yang Tak Terlupakan dengan Solusi AI dari Rekan AI.
|
|
</h1>
|
|
<p className="text-[16px] lg:text-[18px] lg:max-w-[90%] text-customBlack">
|
|
Rekan AI menghadirkan teknologi kecerdasan buatan untuk membantu bisnis Anda beradaptasi dan tumbuh di era
|
|
digital. Dari automasi hingga analisis data, kami membawa solusi cerdas yang mudah diimplementasikan.
|
|
</p>
|
|
</motion.div>
|
|
|
|
{/* Right Section */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
animate={{ opacity: inView ? 1 : 0, scale: inView ? 1 : 0.8 }}
|
|
transition={{ duration: 0.8, delay: 0.3 }}
|
|
className="relative w-full aspect-square lg:aspect-auto md:w-[650px] md:h-[680px] lg:h-[600px] order-2 lg:order-none"
|
|
>
|
|
<img src={homeImg} alt="Rekan AI Illustration" className="object-contain" />
|
|
</motion.div>
|
|
|
|
{/* Buttons */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 50 }}
|
|
animate={{ opacity: inView ? 1 : 0, y: inView ? 0 : 50 }}
|
|
transition={{ duration: 0.8, delay: 0.6 }}
|
|
className="flex flex-col sm:flex-row gap-4 md:-mt-96 order-3 lg:order-none"
|
|
id="button-section"
|
|
>
|
|
<button className="flex items-center justify-center px-6 py-3 border-2 md:w-[245px] md:h-[62px] border-customRed rounded-[14px] text-customRed font-medium text-base lg:text-lg hover:bg-pink-50 transition-colors">
|
|
<img src={waIcon} alt="WhatsApp Icon" className="mr-2 h-7 w-7" />
|
|
Konsultasi Gratis
|
|
</button>
|
|
<Link to={"/Contact#form"}>
|
|
<button className="flex items-center justify-center px-6 py-3 rounded-[14px] w-[358px] h-[55px] md:w-[245px] md:h-[62px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-base lg:text-lg hover:opacity-90 transition-opacity">
|
|
Coba Sekarang
|
|
</button>
|
|
</Link>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Hero;
|