115 lines
5.7 KiB
TypeScript
115 lines
5.7 KiB
TypeScript
'use client';
|
|
|
|
import styles from './CoreServices.module.css';
|
|
|
|
export default function CoreServices() {
|
|
return (
|
|
<section className={styles.section}>
|
|
<div className="container">
|
|
<div className={styles.header}>
|
|
<div className={styles.subTitle}>Our Services</div>
|
|
<h2 className={styles.title}>All-in-One <span className="gradient-text">Social Management</span></h2>
|
|
<p className={styles.subtitle}>
|
|
Everything you need to dominate social media, conveniently organized in one powerful platform.
|
|
</p>
|
|
</div>
|
|
|
|
<div className={styles.gridContainer}>
|
|
{/* Left Column */}
|
|
<div className={styles.columnLeft}>
|
|
<div className={styles.serviceItem}>
|
|
<div className={styles.iconWrapper}>
|
|
<span className={styles.icon}>📊</span>
|
|
</div>
|
|
<div className={styles.content}>
|
|
<h3>Unified Dashboard</h3>
|
|
<p>Manage Facebook, Instagram, X, and LinkedIn from one centralized, intuitive interface.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={styles.serviceItem}>
|
|
<div className={styles.iconWrapper}>
|
|
<span className={styles.icon}>⚡</span>
|
|
</div>
|
|
<div className={styles.content}>
|
|
<h3>Smart Scheduling</h3>
|
|
<p>AI-powered timing suggestions to automatically post when your audience is most active.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={styles.serviceItem}>
|
|
<div className={styles.iconWrapper}>
|
|
<span className={styles.icon}>📅</span>
|
|
</div>
|
|
<div className={styles.content}>
|
|
<h3>Visual Calendar</h3>
|
|
<p>Drag-and-drop content calendar to plan and visualize your strategy months in advance.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Center Column - Image */}
|
|
<div className={styles.columnCenter}>
|
|
<div className={styles.centralVisual}>
|
|
{/* CSS-based Abstract Dashboard/Manager Illustration */}
|
|
<div className={styles.circleBg}></div>
|
|
<div className={styles.glassCard}>
|
|
<div className={styles.cardHeader}>
|
|
<div className={styles.dots}>
|
|
<span></span><span></span><span></span>
|
|
</div>
|
|
</div>
|
|
<div className={styles.cardBody}>
|
|
<div className={styles.graphArea}>
|
|
<div className={styles.bar}></div>
|
|
<div className={styles.bar}></div>
|
|
<div className={styles.bar}></div>
|
|
<div className={styles.bar}></div>
|
|
</div>
|
|
<div className={styles.pieChart}></div>
|
|
</div>
|
|
<div className={styles.floatingBadge}>
|
|
<span>🚀</span> +128%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Column */}
|
|
<div className={styles.columnRight}>
|
|
<div className={styles.serviceItem}>
|
|
<div className={styles.iconWrapper}>
|
|
<span className={styles.icon}>📈</span>
|
|
</div>
|
|
<div className={styles.content}>
|
|
<h3>Analytics & Reports</h3>
|
|
<p>Deep dive into performance metrics with automated, white-labeled reports for clients.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={styles.serviceItem}>
|
|
<div className={styles.iconWrapper}>
|
|
<span className={styles.icon}>👥</span>
|
|
</div>
|
|
<div className={styles.content}>
|
|
<h3>Team Collaboration</h3>
|
|
<p>Built-in approval workflows and role-based access for seamless team coordination.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={styles.serviceItem}>
|
|
<div className={styles.iconWrapper}>
|
|
<span className={styles.icon}>💬</span>
|
|
</div>
|
|
<div className={styles.content}>
|
|
<h3>Social Inbox</h3>
|
|
<p>Never miss a comment or DM. innovative unified inbox to reply to all interactions.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|