102 lines
4.1 KiB
TypeScript
102 lines
4.1 KiB
TypeScript
'use client';
|
|
|
|
import Image from 'next/image';
|
|
import { useEffect, useRef } from 'react';
|
|
import styles from './HowItWorks.module.css';
|
|
|
|
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: 'Discovery Session',
|
|
description: 'We begin by understanding your brand goals, audience behavior, and existing social presence to identify opportunities.',
|
|
icon: '/images/home/discovery.webp',
|
|
},
|
|
{
|
|
number: '02',
|
|
title: 'Planning & Direction',
|
|
description: 'Insights gathered are translated into a focused roadmap covering content themes, platforms, timelines, and success metrics.',
|
|
icon: '/images/home/plan.webp',
|
|
},
|
|
{
|
|
number: '03',
|
|
title: 'Execution Phase',
|
|
description: 'Content is created, scheduled, and managed with precision, ensuring consistency across channels and alignment with strategy.',
|
|
icon: '/images/home/execution.webp',
|
|
},
|
|
{
|
|
number: '04',
|
|
title: 'Outcome & Optimization',
|
|
description: 'Performance is evaluated using clear metrics, allowing continuous refinement and improvement for stronger long-term results.',
|
|
icon: '/images/home/outcome.webp',
|
|
},
|
|
];
|
|
|
|
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}>
|
|
A Clear, Structured <br /> Path to <span className="gradient-text">Social Growth</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}>
|
|
<Image
|
|
src={step.icon}
|
|
alt={step.title}
|
|
width={31}
|
|
height={31}
|
|
className={styles.iconImage}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Manual connecting line logic for visual flow if needed
|
|
(CSS pseudo-element ::before handles main vertical line)
|
|
*/}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|