149 lines
6.0 KiB
TypeScript
149 lines
6.0 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import Link from 'next/link';
|
|
import styles from './Pricing.module.css';
|
|
|
|
export default function Pricing() {
|
|
const [isAnnual, setIsAnnual] = useState(false);
|
|
|
|
const plans = [
|
|
{
|
|
name: 'Free',
|
|
description: 'Perfect for individuals getting started',
|
|
price: { monthly: 0, annual: 0 },
|
|
features: [
|
|
'1 social media account',
|
|
'10 scheduled posts per month',
|
|
'Basic analytics',
|
|
'Email support',
|
|
'Mobile app access',
|
|
],
|
|
cta: 'Get Started',
|
|
popular: false,
|
|
},
|
|
{
|
|
name: 'Pro',
|
|
description: 'Ideal for growing businesses',
|
|
price: { monthly: 29, annual: 290 },
|
|
features: [
|
|
'5 social media accounts',
|
|
'Unlimited scheduled posts',
|
|
'Advanced analytics & reports',
|
|
'Priority email support',
|
|
'Team collaboration (3 members)',
|
|
'AI content assistant',
|
|
'Custom branding',
|
|
],
|
|
cta: 'Start Free Trial',
|
|
popular: true,
|
|
},
|
|
{
|
|
name: 'Premium',
|
|
description: 'For agencies and enterprises',
|
|
price: { monthly: 99, annual: 990 },
|
|
features: [
|
|
'Unlimited social media accounts',
|
|
'Unlimited scheduled posts',
|
|
'Enterprise analytics & insights',
|
|
'24/7 priority support',
|
|
'Unlimited team members',
|
|
'Advanced AI features',
|
|
'White-label solutions',
|
|
'API access',
|
|
'Dedicated account manager',
|
|
],
|
|
cta: 'Contact Sales',
|
|
popular: false,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="section" id="pricing">
|
|
<div className="container">
|
|
<div className={styles.header}>
|
|
<div className={styles.badge}>
|
|
<span>💎</span>
|
|
<span>Pricing</span>
|
|
</div>
|
|
<h2 className={styles.title}>
|
|
Simple, <span className="gradient-text">Transparent</span> Pricing
|
|
</h2>
|
|
<p className={styles.subtitle}>
|
|
Choose the perfect plan for your needs. All plans include a 14-day free trial.
|
|
</p>
|
|
|
|
<div className={styles.toggle}>
|
|
<span className={isAnnual ? '' : styles.active}>Monthly</span>
|
|
<button
|
|
className={styles.toggleButton}
|
|
onClick={() => setIsAnnual(!isAnnual)}
|
|
aria-label="Toggle pricing"
|
|
>
|
|
<span className={`${styles.toggleSlider} ${isAnnual ? styles.annual : ''}`}></span>
|
|
</button>
|
|
<span className={isAnnual ? styles.active : ''}>
|
|
Annual
|
|
<span className={styles.saveBadge}>Save 17%</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={styles.pricingGrid}>
|
|
{plans.map((plan, index) => (
|
|
<div
|
|
key={index}
|
|
className={`${styles.pricingCard} ${plan.popular ? styles.popular : ''}`}
|
|
style={{ animationDelay: `${index * 0.1}s` }}
|
|
>
|
|
{plan.popular && <div className={styles.popularBadge}>Most Popular</div>}
|
|
|
|
<div className={styles.planHeader}>
|
|
<h3 className={styles.planName}>{plan.name}</h3>
|
|
<p className={styles.planDescription}>{plan.description}</p>
|
|
</div>
|
|
|
|
<div className={styles.priceSection}>
|
|
<div className={styles.price}>
|
|
<span className={styles.currency}>$</span>
|
|
<span className={styles.amount}>
|
|
{isAnnual ? Math.floor(plan.price.annual / 12) : plan.price.monthly}
|
|
</span>
|
|
<span className={styles.period}>/mo</span>
|
|
</div>
|
|
{isAnnual && plan.price.annual > 0 && (
|
|
<p className={styles.billedAnnually}>
|
|
Billed ${plan.price.annual} annually
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className={styles.features}>
|
|
{plan.features.map((feature, idx) => (
|
|
<div key={idx} className={styles.feature}>
|
|
<span className={styles.checkIcon}>✓</span>
|
|
<span>{feature}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<a
|
|
href="https://app.socialbuddy.co/signup"
|
|
className={`btn ${plan.popular ? 'btn-primary' : 'btn-secondary'} ${styles.ctaButton}`}
|
|
>
|
|
{plan.cta}
|
|
</a>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className={styles.guarantee}>
|
|
<p>
|
|
<strong>💯 30-Day Money-Back Guarantee</strong> - Try risk-free. Cancel anytime.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|