112 lines
4.6 KiB
TypeScript
112 lines
4.6 KiB
TypeScript
'use client';
|
|
|
|
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.step}`);
|
|
steps?.forEach((step) => observer.observe(step));
|
|
|
|
return () => observer.disconnect();
|
|
}, []);
|
|
|
|
const steps = [
|
|
{
|
|
number: '01',
|
|
title: 'Connect Your Accounts',
|
|
description: 'Link all your social media accounts in seconds with our secure OAuth integration.',
|
|
icon: '🔗',
|
|
color: '#667eea',
|
|
},
|
|
{
|
|
number: '02',
|
|
title: 'Create & Schedule Content',
|
|
description: 'Design beautiful posts with our editor and schedule them at optimal times using AI suggestions.',
|
|
icon: '✍️',
|
|
color: '#ec4899',
|
|
},
|
|
{
|
|
number: '03',
|
|
title: 'Engage Your Audience',
|
|
description: 'Respond to comments, messages, and mentions from a unified inbox across all platforms.',
|
|
icon: '💬',
|
|
color: '#14b8a6',
|
|
},
|
|
{
|
|
number: '04',
|
|
title: 'Analyze & Optimize',
|
|
description: 'Track performance metrics and get actionable insights to improve your social media strategy.',
|
|
icon: '📈',
|
|
color: '#f59e0b',
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="section" id="how-it-works" ref={sectionRef}>
|
|
<div className="container">
|
|
<div className={styles.header}>
|
|
<div className={styles.badge}>
|
|
<span>🚀</span>
|
|
<span>How It Works</span>
|
|
</div>
|
|
<h2 className={styles.title}>
|
|
Get Started in <span className="gradient-text">4 Simple Steps</span>
|
|
</h2>
|
|
<p className={styles.subtitle}>
|
|
From setup to success, we've made it incredibly easy to manage your social media presence.
|
|
</p>
|
|
</div>
|
|
|
|
<div className={styles.stepsContainer}>
|
|
{steps.map((step, index) => (
|
|
<div key={index} className={styles.step}>
|
|
<div className={styles.stepNumber} style={{ background: `${step.color}20`, color: step.color }}>
|
|
{step.number}
|
|
</div>
|
|
<div className={styles.stepContent}>
|
|
<div className={styles.stepIcon} style={{ background: `${step.color}15` }}>
|
|
<span style={{ filter: `drop-shadow(0 0 10px ${step.color})` }}>{step.icon}</span>
|
|
</div>
|
|
<h3 className={styles.stepTitle}>{step.title}</h3>
|
|
<p className={styles.stepDescription}>{step.description}</p>
|
|
</div>
|
|
{index < steps.length - 1 && (
|
|
<div className={styles.connector}>
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className={styles.ctaBox}>
|
|
<div className={styles.ctaContent}>
|
|
<h3 className={styles.ctaTitle}>Ready to streamline your social media?</h3>
|
|
<p className={styles.ctaText}>Start your 14-day free trial today. No credit card required.</p>
|
|
</div>
|
|
<a href="https://app.socialbuddy.co/signup" className="btn btn-primary btn-large">
|
|
Get Started Free
|
|
<span className={styles.arrow}>→</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|