ee507e0816
This commit updates the naming convention of icons from Lucide-React, moving some package dependencies to "peerDependencies" in 'team-accounts', 'admin' and 'auth'. Additionally, it includes tweaks to the development server command in apps/web package.json and adds a logger reference to the shared package. Furthermore, cleanup work has been performed within the features and UI packages, and new scripts to interact with Stripe have been added to the root package.json.
124 lines
3.1 KiB
TypeScript
124 lines
3.1 KiB
TypeScript
import { ChevronDown } from 'lucide-react';
|
|
|
|
import { SitePageHeader } from '~/(marketing)/_components/site-page-header';
|
|
import { withI18n } from '~/lib/i18n/with-i18n';
|
|
|
|
export const metadata = {
|
|
title: 'FAQ',
|
|
};
|
|
|
|
const faqItems = [
|
|
{
|
|
question: `Do you offer a free trial?`,
|
|
answer: `Yes, we offer a 14-day free trial. You can cancel at any time during the trial period and you won't be charged.`,
|
|
},
|
|
{
|
|
question: `Can I cancel my subscription?`,
|
|
answer: `You can cancel your subscription at any time. You can do this from your account settings.`,
|
|
},
|
|
{
|
|
question: `Where can I find my invoices?`,
|
|
answer: `You can find your invoices in your account settings.`,
|
|
},
|
|
{
|
|
question: `What payment methods do you accept?`,
|
|
answer: `We accept all major credit cards and PayPal.`,
|
|
},
|
|
{
|
|
question: `Can I upgrade or downgrade my plan?`,
|
|
answer: `Yes, you can upgrade or downgrade your plan at any time. You can do this from your account settings.`,
|
|
},
|
|
{
|
|
question: `Do you offer discounts for non-profits?`,
|
|
answer: `Yes, we offer a 50% discount for non-profits. Please contact us to learn more.`,
|
|
},
|
|
];
|
|
|
|
const FAQPage = () => {
|
|
const structuredData = {
|
|
'@context': 'https://schema.org',
|
|
'@type': 'FAQPage',
|
|
mainEntity: faqItems.map((item) => {
|
|
return {
|
|
'@type': 'Question',
|
|
name: item.question,
|
|
acceptedAnswer: {
|
|
'@type': 'Answer',
|
|
text: item.answer,
|
|
},
|
|
};
|
|
}),
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<script
|
|
key={'ld:json'}
|
|
type="application/ld+json"
|
|
dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
|
|
/>
|
|
|
|
<div className={'container mx-auto'}>
|
|
<div className={'my-8 flex flex-col space-y-16'}>
|
|
<SitePageHeader
|
|
title={'FAQ'}
|
|
subtitle={'Frequently Asked Questions'}
|
|
/>
|
|
|
|
<div
|
|
className={
|
|
'm-auto flex w-full max-w-xl items-center justify-center'
|
|
}
|
|
>
|
|
<div className="flex w-full flex-col">
|
|
{faqItems.map((item, index) => {
|
|
return <FaqItem key={index} item={item} />;
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default withI18n(FAQPage);
|
|
|
|
function FaqItem({
|
|
item,
|
|
}: React.PropsWithChildren<{
|
|
item: {
|
|
question: string;
|
|
answer: string;
|
|
};
|
|
}>) {
|
|
return (
|
|
<details className={'group border-b px-2 py-4'}>
|
|
<summary
|
|
className={
|
|
'flex items-center justify-between hover:cursor-pointer hover:underline'
|
|
}
|
|
>
|
|
<h2
|
|
className={
|
|
'hover:underline-none cursor-pointer font-sans text-lg font-medium'
|
|
}
|
|
>
|
|
{item.question}
|
|
</h2>
|
|
|
|
<div>
|
|
<ChevronDown
|
|
className={'h-5 transition duration-300 group-open:-rotate-180'}
|
|
/>
|
|
</div>
|
|
</summary>
|
|
|
|
<div
|
|
className={'flex flex-col space-y-2 py-1 text-muted-foreground'}
|
|
dangerouslySetInnerHTML={{ __html: item.answer }}
|
|
/>
|
|
</details>
|
|
);
|
|
}
|