96 lines
3.5 KiB
TypeScript
96 lines
3.5 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useRef } from 'react';
|
|
import styles from './HowItWorks.module.css';
|
|
import { TrendingUp, BarChart3, Users, Heart } from 'lucide-react';
|
|
|
|
export default function HowItWorks() {
|
|
const sectionRef = useRef<HTMLElement>(null);
|
|
|
|
useEffect(() => {
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add(styles.visible);
|
|
}
|
|
});
|
|
},
|
|
{ threshold: 0.1 }
|
|
);
|
|
|
|
const steps = sectionRef.current?.querySelectorAll(`.${styles.stepItem}`);
|
|
steps?.forEach((step) => observer.observe(step));
|
|
|
|
return () => observer.disconnect();
|
|
}, []);
|
|
|
|
const steps = [
|
|
{
|
|
number: '01',
|
|
title: 'Trends and Technologies',
|
|
description: 'Leverage emerging tools to foster innovation and collaboration.',
|
|
icon: <TrendingUp />,
|
|
},
|
|
{
|
|
number: '02',
|
|
title: 'Data Analysis and Analytics',
|
|
description: 'Deploy insights to improve decision making and drive traffic.',
|
|
icon: <BarChart3 />,
|
|
},
|
|
{
|
|
number: '03',
|
|
title: 'Your Target Audience',
|
|
description: 'Understand Your Target Audience and their shopping behavior.',
|
|
icon: <Users />,
|
|
},
|
|
{
|
|
number: '04',
|
|
title: 'Social Media Engagement',
|
|
description: 'Create valuable, shareable content for increased engagement.',
|
|
icon: <Heart />,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className={styles.section} id="how-it-works" ref={sectionRef}>
|
|
<div className={styles.container}>
|
|
<div className={styles.header}>
|
|
<span className={styles.subTitle}>Our Work Process</span>
|
|
<h2 className={styles.title}>
|
|
How We <span className="gradient-text">Drive Results</span>
|
|
</h2>
|
|
</div>
|
|
|
|
<div className={styles.timeline}>
|
|
{steps.map((step, index) => (
|
|
<div key={index} className={styles.stepItem}>
|
|
{/* Number Circle Left */}
|
|
<div className={styles.numberWrapper}>
|
|
<div className={styles.numberCircle}>
|
|
{step.number}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content Capsule */}
|
|
<div className={styles.cardCapsule}>
|
|
<div className={styles.textContent}>
|
|
<h3 className={styles.stepTitle}>{step.title}</h3>
|
|
<p className={styles.stepDescription}>{step.description}</p>
|
|
</div>
|
|
<div className={styles.iconCircle}>
|
|
{step.icon}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Manual connecting line logic for visual flow if needed
|
|
(CSS pseudo-element ::before handles main vertical line)
|
|
*/}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|