135 lines
6.6 KiB
TypeScript
135 lines
6.6 KiB
TypeScript
import {useNavigate} from 'react-router-dom';
|
|
import {LandingLayout} from '@/components/landing/landing-layout';
|
|
import {Check} from 'lucide-react';
|
|
|
|
import {useHead} from '@/hooks/useHead';
|
|
const TIERS = [
|
|
{
|
|
name: 'Free',
|
|
price: '$0',
|
|
period: 'forever',
|
|
desc: 'Command as Service for individuals — versioned commands, agent memory, and skill registry included.',
|
|
features: ['3 active agents', '5 GB agent memory', 'Community skill registry', 'Public rooms', '7-day history'],
|
|
cta: 'Start Free',
|
|
highlight: false,
|
|
},
|
|
{
|
|
name: 'Pro',
|
|
price: '$29',
|
|
period: 'per month',
|
|
desc: 'Command as Service for teams — unlimited agents, full command stream audit, and priority compute.',
|
|
features: [
|
|
'Unlimited agents',
|
|
'50 GB agent memory',
|
|
'Private skill registry',
|
|
'Collaborative rooms',
|
|
'90-day history',
|
|
'Priority compute',
|
|
'Email support',
|
|
],
|
|
cta: 'Get Pro',
|
|
highlight: true,
|
|
},
|
|
{
|
|
name: 'Enterprise',
|
|
price: 'Custom',
|
|
period: '',
|
|
desc: 'Command as Service at scale — custom deployment, granular command-stream governance, and dedicated SLA for your agent fleet.',
|
|
features: [
|
|
'Everything in Pro',
|
|
'Unlimited memory',
|
|
'SSO / SAML',
|
|
'Custom model routing',
|
|
'Dedicated compute',
|
|
'SLA guarantee',
|
|
'Dedicated support',
|
|
],
|
|
cta: 'Contact Sales',
|
|
highlight: false,
|
|
},
|
|
];
|
|
|
|
export default function PricingPage() {
|
|
|
|
useHead({ title: 'Pricing — GitDataAI', description: 'Simple, transparent pricing. Start free. Scale as your agent fleet grows. Command as Service for every team.' });
|
|
const navigate = useNavigate();
|
|
return (
|
|
<LandingLayout>
|
|
<section className="pt-24 pb-32">
|
|
<div className="mx-auto max-w-5xl px-6">
|
|
{/* Header */}
|
|
<div className="text-center mb-20">
|
|
<h1 className="text-4xl md:text-6xl font-semibold tracking-tight mb-4">
|
|
Simple, transparent pricing.
|
|
</h1>
|
|
<p className="text-lg text-zinc-500 dark:text-zinc-500">
|
|
Start free. Scale as your agent fleet grows.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Tiers */}
|
|
<div className="grid md:grid-cols-3 gap-6">
|
|
{TIERS.map(tier => (
|
|
<div key={tier.name}
|
|
className={`rounded-3xl p-8 flex flex-col ${
|
|
tier.highlight
|
|
? 'border-2 border-zinc-900 dark:border-zinc-100 bg-zinc-50 dark:bg-zinc-900/50'
|
|
: 'border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950'
|
|
}`}>
|
|
<div className="mb-6">
|
|
<h2 className="text-lg font-semibold mb-1">{tier.name}</h2>
|
|
<div className="flex items-baseline gap-1 mb-2">
|
|
<span
|
|
className="text-3xl font-semibold tracking-tight">{tier.price}</span>
|
|
{tier.period && (
|
|
<span className="text-sm text-zinc-500">{tier.period}</span>
|
|
)}
|
|
</div>
|
|
<p className="text-sm text-zinc-500 dark:text-zinc-400">{tier.desc}</p>
|
|
</div>
|
|
|
|
<ul className="space-y-3 flex-1 mb-8">
|
|
{tier.features.map(f => (
|
|
<li key={f} className="flex items-start gap-2 text-sm text-zinc-700 dark:text-zinc-300">
|
|
<Check className="h-4 w-4 mt-0.5 shrink-0 text-zinc-500"/>
|
|
{f}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<button
|
|
onClick={() => tier.name === 'Enterprise' ? navigate('/pricing/enterprise') : navigate('/auth/register')}
|
|
className={`w-full h-10 rounded-full text-sm font-medium transition-colors ${
|
|
tier.highlight
|
|
? 'bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 hover:bg-zinc-800 dark:hover:bg-zinc-100'
|
|
: 'border border-zinc-200 dark:border-zinc-800 hover:bg-zinc-50 dark:hover:bg-zinc-900/50'
|
|
}`}>
|
|
{tier.cta}
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* FAQ */}
|
|
<div className="mt-24 text-center">
|
|
<h2 className="text-2xl font-semibold mb-2">Frequently Asked</h2>
|
|
<p className="text-zinc-500 mb-8">Billing questions answered.</p>
|
|
<div className="grid md:grid-cols-2 gap-6 text-left max-w-2xl mx-auto">
|
|
{[
|
|
['Can I switch plans at any time?', 'Yes. Upgrade or downgrade at any time. Changes take effect at the next billing cycle.'],
|
|
['What counts as agent memory?', 'Agent memory is the total persistent context stored across all your agents, including conversation history and long-term memory.'],
|
|
['Is there a free trial for Pro?', 'Yes — the Free tier lets you explore all Pro features for 14 days when you upgrade.'],
|
|
].map(([q, a]) => (
|
|
<div key={q} className="p-5 rounded-2xl border border-zinc-200 dark:border-zinc-800">
|
|
<h3 className="text-sm font-semibold mb-2">{q}</h3>
|
|
<p className="text-xs text-zinc-500 dark:text-zinc-400 leading-relaxed">{a}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</LandingLayout>
|
|
);
|
|
}
|