132 lines
5.9 KiB
TypeScript
132 lines
5.9 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import Image from 'next/image';
|
|
import styles from './Features.module.css';
|
|
|
|
export default function Features() {
|
|
const [activeIndex, setActiveIndex] = useState(0);
|
|
|
|
const features = [
|
|
{
|
|
icon: '📅',
|
|
title: 'Smart Scheduling',
|
|
description: 'Schedule posts across all platforms with AI-powered optimal timing suggestions to maximize your reach and engagement.',
|
|
color: '#667eea',
|
|
image: '/features/scheduling.png'
|
|
},
|
|
{
|
|
icon: '📊',
|
|
title: 'Advanced Analytics',
|
|
description: 'Track performance metrics, engagement rates, and audience insights in real-time with comprehensive interactive dashboards.',
|
|
color: '#ec4899',
|
|
image: '/features/analytics.png'
|
|
},
|
|
{
|
|
icon: '🤖',
|
|
title: 'AI Content Assistant',
|
|
description: 'Generate engaging captions, hashtags, and creative content ideas instantly with our advanced AI-powered writing tools.',
|
|
color: '#14b8a6',
|
|
image: '/features/ai.png'
|
|
},
|
|
{
|
|
icon: '👥',
|
|
title: 'Team Collaboration',
|
|
description: 'Work seamlessly with your team using role-based access, approval workflows, and shared content calendars.',
|
|
color: '#f59e0b',
|
|
image: '/features/platforms.png'
|
|
},
|
|
{
|
|
icon: '📱',
|
|
title: 'Multi-Platform Support',
|
|
description: 'Manage Facebook, Instagram, Twitter, LinkedIn, and more from a single, unified dashboard without switching tabs.',
|
|
color: '#8b5cf6',
|
|
image: '/features/platforms.png'
|
|
},
|
|
{
|
|
icon: '🔔',
|
|
title: 'Real-Time Notifications',
|
|
description: 'Stay on top of your community with instant alerts for new mentions, comments, and engagement opportunities.',
|
|
color: '#ef4444',
|
|
image: '/features/ai.png'
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="section" id="features">
|
|
<div className="container">
|
|
<div className={styles.header}>
|
|
<div className={styles.subTitle}>Features</div>
|
|
<h2 className={styles.title}>
|
|
Everything You Need to Succeed
|
|
</h2>
|
|
<p className={styles.subtitle}>
|
|
Powerful tools designed to streamline your social media management and boost your online presence.
|
|
</p>
|
|
</div>
|
|
|
|
<div className={styles.contentWrapper}>
|
|
{/* Left Column: Image Preview */}
|
|
<div className={styles.desktopImageWrapper}>
|
|
{features.map((feature, index) => (
|
|
<Image
|
|
key={index}
|
|
src={feature.image}
|
|
alt={feature.title}
|
|
fill
|
|
className={styles.featureImage}
|
|
style={{
|
|
opacity: index === activeIndex ? 1 : 0,
|
|
zIndex: index === activeIndex ? 10 : 0,
|
|
transform: index === activeIndex ? 'scale(1)' : 'scale(1.05)',
|
|
}}
|
|
priority={index === 0}
|
|
/>
|
|
))}
|
|
<div className={styles.imageOverlay} />
|
|
</div>
|
|
|
|
{/* Right Column: Accordion */}
|
|
<div className={styles.accordion}>
|
|
{features.map((feature, index) => (
|
|
<div
|
|
key={index}
|
|
className={`${styles.accordionItem} ${index === activeIndex ? styles.active : ''}`}
|
|
onClick={() => setActiveIndex(index)}
|
|
>
|
|
<div className={styles.itemHeader}>
|
|
<div className={styles.iconWrapper} style={{
|
|
color: index === activeIndex ? 'white' : feature.color,
|
|
backgroundColor: index === activeIndex ? feature.color : `${feature.color}15`
|
|
}}>
|
|
{feature.icon}
|
|
</div>
|
|
<h3 className={styles.itemTitle} style={{
|
|
color: index === activeIndex ? feature.color : undefined
|
|
}}>
|
|
{feature.title}
|
|
</h3>
|
|
</div>
|
|
<div className={styles.itemContent}>
|
|
<div className={styles.contentInner}>
|
|
<div className={styles.mobileImageWrapper}>
|
|
<Image
|
|
src={feature.image}
|
|
alt={feature.title}
|
|
width={600}
|
|
height={400}
|
|
className={styles.mobileImage}
|
|
/>
|
|
</div>
|
|
{feature.description}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|