83 lines
3.3 KiB
TypeScript
83 lines
3.3 KiB
TypeScript
import styles from './Features.module.css';
|
|
|
|
export default function Features() {
|
|
const features = [
|
|
{
|
|
icon: '📅',
|
|
title: 'Smart Scheduling',
|
|
description: 'Schedule posts across all platforms with AI-powered optimal timing suggestions.',
|
|
color: '#667eea',
|
|
},
|
|
{
|
|
icon: '📊',
|
|
title: 'Advanced Analytics',
|
|
description: 'Track performance metrics, engagement rates, and audience insights in real-time.',
|
|
color: '#ec4899',
|
|
},
|
|
{
|
|
icon: '🤖',
|
|
title: 'AI Content Assistant',
|
|
description: 'Generate engaging captions and hashtags with our AI-powered content tools.',
|
|
color: '#14b8a6',
|
|
},
|
|
{
|
|
icon: '👥',
|
|
title: 'Team Collaboration',
|
|
description: 'Work seamlessly with your team with role-based access and approval workflows.',
|
|
color: '#f59e0b',
|
|
},
|
|
{
|
|
icon: '📱',
|
|
title: 'Multi-Platform Support',
|
|
description: 'Manage Facebook, Instagram, Twitter, LinkedIn, and more from one dashboard.',
|
|
color: '#8b5cf6',
|
|
},
|
|
{
|
|
icon: '🔔',
|
|
title: 'Real-Time Notifications',
|
|
description: 'Stay updated with instant alerts for mentions, comments, and engagement.',
|
|
color: '#ef4444',
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="section" id="features">
|
|
<div className="container">
|
|
<div className={styles.header}>
|
|
<div className={styles.badge}>
|
|
<span>✨</span>
|
|
<span>Features</span>
|
|
</div>
|
|
<h2 className={styles.title}>
|
|
Everything You Need to <span className="gradient-text">Succeed</span>
|
|
</h2>
|
|
<p className={styles.subtitle}>
|
|
Powerful tools designed to streamline your social media management and boost your online presence.
|
|
</p>
|
|
</div>
|
|
|
|
<div className={styles.featuresGrid}>
|
|
{features.map((feature, index) => (
|
|
<div
|
|
key={index}
|
|
className={styles.featureCard}
|
|
style={{ animationDelay: `${index * 0.1}s` }}
|
|
>
|
|
<div className={styles.iconWrapper} style={{ background: `${feature.color}20` }}>
|
|
<span className={styles.icon} style={{ filter: `drop-shadow(0 0 10px ${feature.color})` }}>
|
|
{feature.icon}
|
|
</span>
|
|
</div>
|
|
<h3 className={styles.featureTitle}>{feature.title}</h3>
|
|
<p className={styles.featureDescription}>{feature.description}</p>
|
|
<div className={styles.learnMore}>
|
|
Learn more <span className={styles.arrow}>→</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|