95 lines
4.5 KiB
JavaScript
95 lines
4.5 KiB
JavaScript
import { motion } from "framer-motion";
|
|
import { useEffect, useState } from "react";
|
|
import { useInView } from "react-intersection-observer";
|
|
import { Link } from "react-router-dom";
|
|
import { chek2, wagreen, start44 } from "../asset";
|
|
|
|
function Kenapa() {
|
|
const { ref, inView } = useInView({ triggerOnce: false, threshold: 0.2 });
|
|
|
|
return (
|
|
<div ref={ref} className="container mx-auto flex justify-center items-center bg-customWhite mt-5 min-h-screen">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 50 }}
|
|
animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
|
|
transition={{ duration: 0.8 }}
|
|
className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52"
|
|
>
|
|
{/* Image Section */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
animate={inView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
|
|
transition={{ duration: 1 }}
|
|
className="relative w-full md:w-2/5 p-5 flex justify-center md:ml-14 md:justify-start"
|
|
>
|
|
<img
|
|
src={start44 || "/placeholder.svg"}
|
|
alt="Woman with Tablet"
|
|
className="w-full md:w-[654.5px] max-h-[609.67px] h-auto object-contain"
|
|
/>
|
|
</motion.div>
|
|
|
|
{/* Text Section */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 50 }}
|
|
animate={inView ? { opacity: 1, x: 0 } : { opacity: 0, x: 50 }}
|
|
transition={{ duration: 1, delay: 0.3 }}
|
|
className="w-full md:w-3/5 p-6 md:p-10 flex flex-col items-center md:items-start md:mr-28 text-center md:text-left text-[#212121] "
|
|
>
|
|
<h2 className="text-[30px] font-semibold">Kenapa Memilih Rekan AI untuk Startup Anda?</h2>
|
|
<p className="mt-4 text-sm md:leading-8 md:text-xl">
|
|
Startup adalah tulang punggung perekonomian, dan Rekan AI hadir untuk memberdayakan pelaku usaha agar dapat bersaing di era digital. Dengan solusi berbasis AI, kami membantu usaha kecil dan menengah mencapai efisiensi yang lebih baik, memperluas jangkauan pasar, dan meningkatkan kepuasan pelanggan.
|
|
</p>
|
|
<ul className="mt-8 space-y-4 md:space-y-6 text-[16px] md:max-w-[70%] font-medium">
|
|
{["Teknologi kami dirancang agar dapat diakses oleh siapa saja, tanpa memerlukan latar belakang teknis.",
|
|
"Rekan AI menawarkan solusi dengan harga yang sesuai untuk Startup.",
|
|
"Kami membantu Anda menciptakan peluang baru dengan teknologi yang mendukung setiap tahap perkembangan bisnis."].map((text, index) => (
|
|
<motion.li
|
|
key={index}
|
|
initial={{ opacity: 0, x: -30 }}
|
|
animate={inView ? { opacity: 1, x: 0 } : { opacity: 0, x: -30 }}
|
|
transition={{ duration: 0.8, delay: index * 0.2 }}
|
|
className="flex items-center"
|
|
>
|
|
<img src={chek2 || "/placeholder.svg"} alt="Check" className="w-6 h-6 md:w-9 md:h-9 mr-3" />
|
|
{text}
|
|
</motion.li>
|
|
))}
|
|
</ul>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
|
|
transition={{ duration: 0.8, delay: 0.5 }}
|
|
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 mb-[112px]"
|
|
>
|
|
<motion.button
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-[#CA2B68] text-[#CA2B68] md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition"
|
|
>
|
|
<img
|
|
src={wagreen || "/placeholder.svg"}
|
|
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
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
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"
|
|
>
|
|
Coba Sekarang
|
|
</motion.button>
|
|
</Link>
|
|
</motion.div>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Kenapa;
|