74 lines
4.5 KiB
TypeScript
74 lines
4.5 KiB
TypeScript
import {LandingLayout} from '@/components/landing/landing-layout';
|
|
import {useNavigate} from 'react-router-dom';
|
|
import {ChevronDown} from 'lucide-react';
|
|
import {useState} from 'react';
|
|
|
|
import {useHead} from '@/hooks/useHead';
|
|
const FAQS = [
|
|
['How does billing work?', 'You are billed monthly based on your active tier. Upgrades take effect immediately; downgrades apply at the next billing cycle.'],
|
|
['What counts as a token?', 'Tokens are the sum of all input and output tokens consumed by your agents executing commands across all models. Memory storage is billed separately.'],
|
|
['Can I get a refund?', 'Monthly plans are non-refundable. Annual plans can be refunded pro-rata within the first 30 days.'],
|
|
['What happens if I exceed my limit?', 'Your agents will be throttled until you upgrade or the cycle resets. You can also set hard caps to prevent overages.'],
|
|
['Do you offer annual discounts?', 'Yes — annual plans are discounted 20% compared to monthly billing.'],
|
|
['What models are supported?', 'All major models via OpenRouter: OpenAI GPT-4o, Anthropic Claude, Google Gemini, Mistral, and more. Enterprise users can add custom endpoints.'],
|
|
['Can I export my data?', 'Yes. All your agents, skills, rooms, and audit logs can be exported at any time. Enterprise users get automated S3 backup.'],
|
|
['Is there a free trial for Pro?', 'The Free tier is always free. Pro features can be evaluated during a 14-day trial when you upgrade from Free.'],
|
|
];
|
|
|
|
export default function PricingFaqPage() {
|
|
|
|
useHead({ title: 'Billing FAQ — GitDataAI', description: 'Answers to common questions about pricing, billing, and command stream usage on GitDataAI.' });
|
|
const navigate = useNavigate();
|
|
const [open, setOpen] = useState<number | null>(0);
|
|
|
|
return (
|
|
<LandingLayout>
|
|
<section className="pt-24 pb-32">
|
|
<div className="mx-auto max-w-3xl px-6">
|
|
<div className="text-xs text-zinc-400 mb-6">
|
|
<button onClick={() => navigate('/pricing')} className="hover:text-zinc-600">Pricing</button>
|
|
<span className="mx-2">/</span> Billing FAQ
|
|
</div>
|
|
|
|
<div className="mb-12">
|
|
<h1 className="text-4xl md:text-5xl font-semibold tracking-tight mb-4">
|
|
Billing FAQ
|
|
</h1>
|
|
<p className="text-lg text-zinc-500 dark:text-zinc-500">
|
|
Answers to common questions about pricing, billing, and usage.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
{FAQS.map(([q, a], i) => (
|
|
<div key={i}
|
|
className="rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 overflow-hidden">
|
|
<button
|
|
onClick={() => setOpen(open === i ? null : i)}
|
|
className="w-full flex items-center justify-between px-5 py-4 text-left">
|
|
<span className="text-sm font-medium">{q}</span>
|
|
<ChevronDown
|
|
className={`h-4 w-4 text-zinc-400 shrink-0 transition-transform ${open === i ? 'rotate-180' : ''}`}/>
|
|
</button>
|
|
{open === i && (
|
|
<div className="px-5 pb-4 text-xs text-zinc-500 dark:text-zinc-400 leading-relaxed border-t border-zinc-100 dark:border-zinc-800 pt-3">
|
|
{a}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-12 text-center p-6 rounded-2xl border border-zinc-200 dark:border-zinc-800">
|
|
<p className="text-sm text-zinc-500 dark:text-zinc-400 mb-3">Still have questions?</p>
|
|
<button
|
|
className="h-10 px-6 bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 rounded-full text-sm font-medium hover:bg-zinc-800 dark:hover:bg-zinc-100 transition-colors">
|
|
Contact Support
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</LandingLayout>
|
|
);
|
|
}
|