115 lines
6.2 KiB
TypeScript
115 lines
6.2 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 SOLUTIONS</div>
|
|
<h2 className={styles.title}>One Platform to Run <br />Every <span className="gradient-text">Social Activity</span></h2>
|
|
<p className={styles.subtitle}>
|
|
Social Buddy brings planning, publishing, monitoring, and performance tracking together in a single workspace. Instead of juggling multiple tools, teams can manage daily social operations efficiently while staying focused on growth and engagement.
|
|
</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>Central Control Panel</h3>
|
|
<p>Oversee multiple social profiles from one streamlined interface, making it easier to publish updates, monitor activity, and stay organized across platforms.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={styles.serviceItem}>
|
|
<div className={styles.iconWrapper}>
|
|
<span className={styles.icon}>⚡</span>
|
|
</div>
|
|
<div className={styles.content}>
|
|
<h3>Intelligent Posting Automation</h3>
|
|
<p>Schedule content using engagement-driven timing recommendations that help posts reach audiences when attention levels are highest.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={styles.serviceItem}>
|
|
<div className={styles.iconWrapper}>
|
|
<span className={styles.icon}>📅</span>
|
|
</div>
|
|
<div className={styles.content}>
|
|
<h3>Interactive Planning View</h3>
|
|
<p>Map out campaigns visually with a flexible content planner that helps teams align messaging weeks or months ahead.</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>Performance Insights & Exports</h3>
|
|
<p>Access clear performance summaries with customizable reports that help evaluate results and communicate value to stakeholders.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={styles.serviceItem}>
|
|
<div className={styles.iconWrapper}>
|
|
<span className={styles.icon}>👥</span>
|
|
</div>
|
|
<div className={styles.content}>
|
|
<h3>Team-Based Workflows</h3>
|
|
<p>Coordinate seamlessly with internal teams or clients using structured review processes and permission-based access.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={styles.serviceItem}>
|
|
<div className={styles.iconWrapper}>
|
|
<span className={styles.icon}>💬</span>
|
|
</div>
|
|
<div className={styles.content}>
|
|
<h3>Unified Message Center</h3>
|
|
<p>Handle comments, mentions, and private messages from different platforms in one response hub - so no interaction goes unnoticed.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|