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

52
src/components/beranda/Mendukung.jsx
View File

@@ -1,7 +1,11 @@
import React from 'react';
import { motion } from 'framer-motion';
import { useInView } from 'react-intersection-observer';
import { imgLeft1, imgLeft2, imgLeft3, imgRight } from '../../assets';
function Mendukung() {
const { ref, inView } = useInView({ triggerOnce: false, threshold: 0.2 });
const items = [
{ id: 1, image: imgLeft1, title: 'Personal' },
{ id: 2, image: imgLeft2, title: 'UMKM' },
@@ -9,9 +13,22 @@ function Mendukung() {
];
return (
<div className="container mx-auto flex flex-col md:flex-row items-center justify-between gap-4 h-auto md:h-screen px-6 md:px-32 py-8 md:py-0" id="solusi2">
<motion.div
ref={ref}
initial={{ opacity: 0 }}
animate={inView ? { opacity: 1 } : { opacity: 0 }}
transition={{ duration: 1 }}
className="container mx-auto flex flex-col md:flex-row items-center justify-between gap-4 h-auto md:h-screen px-6 md:px-32 py-8 md:py-0"
id="solusi2"
>
{/* Left Content */}
<div className="flex flex-col justify-center w-full md:w-[45%] space-y-8 order-2 md:order-1">
<motion.div
ref={ref}
initial={{ x: -50, opacity: 0 }}
animate={inView ? { x: 0, opacity: 1 } : { x: -50, opacity: 0 }}
transition={{ duration: 1 }}
className="flex flex-col justify-center w-full md:w-[45%] space-y-8 order-2 md:order-1"
>
<p className="text-[24px] md:text-[32px] font-semibold text-customBlack text-left md:text-left">
Solusi Mendukung Bisnis di Setiap
<br />
@@ -22,8 +39,15 @@ function Mendukung() {
</p>
<div className="flex flex-col md:flex-row justify-center md:justify-between gap-6">
{items.map((item) => (
<div key={item.id} className="flex flex-col items-center w-full md:w-auto md:mt-5">
{items.map((item, index) => (
<motion.div
key={item.id}
ref={ref}
initial={{ y: 50, opacity: 0 }}
animate={inView ? { y: 0, opacity: 1 } : { y: 50, opacity: 0 }}
transition={{ duration: 0.8, delay: index * 0.2 }}
className="flex flex-col items-center w-full md:w-auto md:mt-5"
>
{/* Image */}
<img
src={item.image}
@@ -34,19 +58,23 @@ function Mendukung() {
<p className="bg-[#5B59E8] text-white text-center rounded-lg shadow-md w-[190px] sm:w-[150px] md:w-[190px] h-10 flex items-center justify-center text-sm font-bold mt-4">
{item.title}
</p>
</div>
</motion.div>
))}
</div>
</div>
</motion.div>
{/* Right Content */}
<div className="w-full md:w-2/5 mt-8 md:mt-0 order-1 md:order-2">
<motion.div
ref={ref}
initial={{ x: 50, opacity: 0 }}
animate={inView ? { x: 0, opacity: 1 } : { x: 50, opacity: 0 }}
transition={{ duration: 1 }}
className="w-full md:w-2/5 mt-8 md:mt-0 order-1 md:order-2"
>
<img src={imgRight} alt="Image Right" className="w-auto h-auto" />
</div>
</div>
</motion.div>
</motion.div>
);
}
export default Mendukung;
export default Mendukung;