95 lines
4.8 KiB
TypeScript
95 lines
4.8 KiB
TypeScript
'use client';
|
|
|
|
import styles from './WhyChooseUs.module.css';
|
|
|
|
export default function WhyChooseUs() {
|
|
return (
|
|
<section className={styles.section}>
|
|
<div className="container">
|
|
<div className={styles.header}>
|
|
<div className={styles.subTitle}>Why Choose Us</div>
|
|
<h2 className={styles.title}>Why <span className="gradient-text">SocialBuddy?</span></h2>
|
|
<p className={styles.subtitle}>
|
|
Don't just manage your social media—master it. Join thousands of creators and businesses who use SocialBuddy to grow faster.
|
|
</p>
|
|
</div>
|
|
|
|
<div className={styles.bentoGrid}>
|
|
{/* Item 1: AI Assistant (Large) */}
|
|
<div className={`${styles.bentoItem} ${styles.itemLarge} ${styles.aiCard}`}>
|
|
<div className={styles.itemContent}>
|
|
<div className={styles.iconWrapper}>
|
|
<span className={styles.icon}>✨</span>
|
|
</div>
|
|
<h3>The Ultimate AI Assistant</h3>
|
|
<p>Generate captions, hashtags, and creative ideas in seconds with our context-aware AI.</p>
|
|
</div>
|
|
<div className={styles.visualAi}>
|
|
<div className={styles.typingBox}>
|
|
<span className={styles.typingDot}></span>
|
|
<span className={styles.typingDot}></span>
|
|
<span className={styles.typingDot}></span>
|
|
</div>
|
|
<div className={styles.aiMessage}>Content generated! 🚀</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Item 2: Community (Small) */}
|
|
<div className={styles.bentoItem}>
|
|
<div className={styles.itemContent}>
|
|
<div className={styles.iconWrapper}>
|
|
<span className={styles.icon}>👥</span>
|
|
</div>
|
|
<h3>Trusted by 50K+</h3>
|
|
<p>Join a community of serious creators.</p>
|
|
</div>
|
|
<div className={styles.visualCommunity}>
|
|
<div className={styles.avatarStack}>
|
|
<div className={styles.avatar}></div>
|
|
<div className={styles.avatar}></div>
|
|
<div className={styles.avatar}></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Item 3: Integrations (Small) */}
|
|
<div className={styles.bentoItem}>
|
|
<div className={styles.itemContent}>
|
|
<div className={styles.iconWrapper}>
|
|
<span className={styles.icon}>🔌</span>
|
|
</div>
|
|
<h3>Seamless Sync</h3>
|
|
<p>Works with your favorite tools.</p>
|
|
</div>
|
|
<div className={styles.visualIntegrations}>
|
|
<div className={styles.logoGrid}>
|
|
<div className={styles.miniLogo}></div>
|
|
<div className={styles.miniLogo}></div>
|
|
<div className={styles.miniLogo}></div>
|
|
<div className={styles.miniLogo}></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Item 4: Analytics (Large) */}
|
|
<div className={`${styles.bentoItem} ${styles.itemLarge} ${styles.analyticsCard}`}>
|
|
<div className={styles.itemContent}>
|
|
<div className={styles.iconWrapper}>
|
|
<span className={styles.icon}>📈</span>
|
|
</div>
|
|
<h3>Data-Driven Insights</h3>
|
|
<p>Make decisions based on real-time performance data, not guesswork. Track growth instantly.</p>
|
|
</div>
|
|
<div className={styles.visualAnalytics}>
|
|
<div className={styles.graphBar}></div>
|
|
<div className={styles.graphBar}></div>
|
|
<div className={styles.graphBar}></div>
|
|
<div className={styles.graphLine}></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|