112 lines
5.2 KiB
TypeScript
112 lines
5.2 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import type { Metadata } from 'next';
|
|
import Pricing from '@/components/Pricing';
|
|
import styles from './pricing.module.css';
|
|
|
|
export default function PricingPage() {
|
|
const [openFaqIndex, setOpenFaqIndex] = useState<number | null>(0);
|
|
|
|
const faqs = [
|
|
{
|
|
question: 'Can I change plans later?',
|
|
answer: "Yes! You can upgrade or downgrade your plan at any time. Changes take effect immediately, and we'll prorate any charges."
|
|
},
|
|
{
|
|
question: 'What payment methods do you accept?',
|
|
answer: 'We accept all major credit cards (Visa, MasterCard, American Express), PayPal, and bank transfers for annual plans.'
|
|
},
|
|
{
|
|
question: 'Is there a free trial?',
|
|
answer: 'Yes! All paid plans come with a 14-day free trial. No credit card required to start.'
|
|
},
|
|
{
|
|
question: 'Can I cancel anytime?',
|
|
answer: 'Absolutely. You can cancel your subscription at any time with no cancellation fees. Your access continues until the end of your billing period.'
|
|
},
|
|
{
|
|
question: 'Do you offer discounts for nonprofits?',
|
|
answer: 'Yes! We offer special pricing for nonprofits and educational institutions. Contact our sales team for details.'
|
|
},
|
|
{
|
|
question: 'What happens to my data if I cancel?',
|
|
answer: 'Your data is safely stored for 30 days after cancellation. You can export all your data at any time before deletion.'
|
|
}
|
|
];
|
|
|
|
const toggleFaq = (index: number) => {
|
|
setOpenFaqIndex(openFaqIndex === index ? null : index);
|
|
};
|
|
|
|
return (
|
|
<div className={styles.pricingPage}>
|
|
{/* Hero Section */}
|
|
<section className={styles.hero}>
|
|
<div className="container">
|
|
<div className={styles.heroContent}>
|
|
<h1 className={styles.heroTitle}>Pricing</h1>
|
|
<div className={styles.breadcrumb}>
|
|
<a href="/">Home</a> / <span>Pricing</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<Pricing />
|
|
|
|
{/* FAQ Section */}
|
|
<section className="section">
|
|
<div className="container">
|
|
<div className={styles.faqContainer}>
|
|
<div className={styles.faqDecorativeSection}>
|
|
<div className={styles.imageFrameWrapper}>
|
|
{/* Diagonal Background Lines */}
|
|
<div className={styles.diagonalLines}>
|
|
<div className={styles.diagonalLinePink}></div>
|
|
<div className={styles.diagonalLineBlue}></div>
|
|
</div>
|
|
|
|
{/* Image with Decorative Borders */}
|
|
<div className={styles.imageFrame}>
|
|
<div className={styles.frameBorderTopLeft}></div>
|
|
<div className={styles.frameBorderBottomRight}></div>
|
|
<img
|
|
src="/faq-workspace.jpg"
|
|
alt="Social media management workspace"
|
|
className={styles.frameImage}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={styles.faqContent}>
|
|
<div className={styles.faqHeader}>
|
|
<h2 className={styles.faqTitle}>Frequently Asked Questions</h2>
|
|
</div>
|
|
<div className={styles.faqList}>
|
|
{faqs.map((faq, index) => (
|
|
<div key={index} className={styles.faqItem}>
|
|
<button
|
|
className={styles.faqQuestion}
|
|
onClick={() => toggleFaq(index)}
|
|
aria-expanded={openFaqIndex === index}
|
|
>
|
|
<span>{faq.question}</span>
|
|
<span className={`${styles.faqIcon} ${openFaqIndex === index ? styles.faqIconOpen : ''}`}>
|
|
+
|
|
</span>
|
|
</button>
|
|
<div className={`${styles.faqAnswer} ${openFaqIndex === index ? styles.faqAnswerOpen : ''}`}>
|
|
<p>{faq.answer}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|