129 lines
5.2 KiB
TypeScript
129 lines
5.2 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: 'Basic Buddy',
|
|
description: 'Perfect for individual creators.',
|
|
price: { monthly: 10, annual: 100 },
|
|
features: [
|
|
'1 Social Profiles',
|
|
'Basic Analytics',
|
|
'Content Scheduling',
|
|
'Standard Support',
|
|
],
|
|
cta: 'Get Started',
|
|
popular: false,
|
|
},
|
|
{
|
|
name: 'Standard Buddy',
|
|
description: 'For growing businesses and influencers.',
|
|
price: { monthly: 50, annual: 500 },
|
|
features: [
|
|
'10 Social Profiles',
|
|
'Advanced Analytics',
|
|
'AI Content Generation',
|
|
'Priority Support',
|
|
'Team Collaboration (up to 3)',
|
|
],
|
|
cta: 'Get Started',
|
|
popular: true,
|
|
},
|
|
{
|
|
name: 'Premium Buddy',
|
|
description: 'Ultimate solution for agencies.',
|
|
price: { monthly: 150, annual: 1500 },
|
|
features: [
|
|
'25 Social Profiles',
|
|
'White Label Reports',
|
|
'Dedicated Account Manager',
|
|
'API Access',
|
|
'Unlimited Team Members',
|
|
],
|
|
cta: 'Get Started',
|
|
popular: false,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="section" id="pricing">
|
|
<div className="container">
|
|
<div className={styles.header}>
|
|
<div className={styles.subTitle}>Pricing</div>
|
|
<h2 className={styles.title}>
|
|
Clear Plans with <span className="gradient-text"><br />No Hidden Costs</span>
|
|
</h2>
|
|
<p className={styles.subtitle}>
|
|
Select a package that fits your goals. Every option comes with a risk-free 7-day trial so you can explore confidently.
|
|
</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 : ''}>
|
|
Yearly
|
|
<span className={styles.saveBadge}>Save 20%</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={styles.pricingGrid}>
|
|
{plans.map((plan, index) => (
|
|
<div
|
|
key={index}
|
|
className={`${styles.pricingCard} ${styles[`cardVariant${index + 1}`]}`}
|
|
style={{ animationDelay: `${index * 0.1}s` }}
|
|
>
|
|
<div className={styles.planHeader}>
|
|
<h3 className={styles.planName}>{plan.name}</h3>
|
|
<p className={styles.planDescription}>{plan.description}</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>
|
|
|
|
<div className={styles.cardFooter}>
|
|
<div className={styles.priceInfo}>
|
|
<div className={styles.priceAmount}>
|
|
<span className={styles.currency}>$</span>
|
|
{isAnnual ? Math.floor(plan.price.annual) : plan.price.monthly}
|
|
</div>
|
|
<div className={styles.period}>per {isAnnual ? 'year' : 'month'}</div>
|
|
</div>
|
|
|
|
<a href="https://app.socialbuddy.co/signup" className={styles.signupBtn}>
|
|
Get Started <span className={styles.btnArrow}>▶</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className={styles.guarantee}>
|
|
<p>
|
|
<strong>Start confidently and stop anytime.</strong>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|