74 lines
2.6 KiB
JavaScript
74 lines
2.6 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { motion, useAnimation } from 'framer-motion';
|
|
|
|
const Step = ({ step, index, isActive }) => {
|
|
const controls = useAnimation();
|
|
|
|
useEffect(() => {
|
|
if (isActive) {
|
|
controls.start({ opacity: 1, x: 0 });
|
|
} else {
|
|
controls.start({ opacity: 0.5, x: -20 });
|
|
}
|
|
}, [isActive, controls]);
|
|
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
className="flex gap-8 items-start h-40"
|
|
initial={{ opacity: 0.5, x: -20 }}
|
|
animate={controls}
|
|
transition={{ duration: 0.5 }}
|
|
>
|
|
<div className="flex-shrink-0 w-12 h-12 rounded-full bg-blue-600 bg-opacity-50 flex items-center justify-center text-xl font-bold">
|
|
{index + 1}
|
|
</div>
|
|
<div>
|
|
<h3 className="text-2xl font-bold mb-2">{step.title}</h3>
|
|
<p className="text-gray-300">{step.description}</p>
|
|
{/* Optional Call-to-action or additional details */}
|
|
{/*
|
|
<button className="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded mt-auto">
|
|
Learn More
|
|
</button>
|
|
*/}
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
const HowItWorks = ({ steps }) => {
|
|
const [activeStep, setActiveStep] = useState(0);
|
|
const containerRef = React.createRef();
|
|
|
|
// Optional Progress Bar for Steps
|
|
// You can implement this as a separate component or inline here.
|
|
|
|
return (
|
|
<section ref={containerRef} className="container max-w-6xl mx-auto px-[15px] py-[60px] md:p-[30px] lg:p-[60px] xl:p-[80px]">
|
|
|
|
{/* Title Section */}
|
|
<h2 className="text-center text-[32px] md:text-[40px] lg:text-[48px] mb-[40px]" id='how-it-work'>How It Works</h2>
|
|
|
|
{/* Steps Container */}
|
|
<div className="space-y-[60px]" id='steps'>
|
|
{steps.map((step, index) => (
|
|
<motion.div
|
|
key={index}
|
|
data-index={index}
|
|
className={`relative step ${activeStep === index ? 'active' : ''}`}
|
|
onMouseEnter={() => setActiveStep(index)} // Change active step on hover
|
|
onMouseLeave={() => setActiveStep(0)} // Reset to first step when not hovering
|
|
>
|
|
{/* Render the Step Component here */}
|
|
<Step step={step} index={index} isActive={activeStep === index} />
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default HowItWorks;
|