196 lines
8.1 KiB
TypeScript
196 lines
8.1 KiB
TypeScript
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import Link from "next/link";
|
|
import { Check } from "lucide-react";
|
|
|
|
export default function PricingPage() {
|
|
return (
|
|
<div className="container py-8 md:py-12 lg:py-24">
|
|
<div className="mx-auto flex max-w-[980px] flex-col items-center gap-4">
|
|
<h1 className="text-4xl font-extrabold leading-tight tracking-tighter md:text-6xl lg:leading-[1.1]">
|
|
Simple, Transparent Pricing
|
|
</h1>
|
|
<p className="max-w-[750px] text-center text-lg text-muted-foreground">
|
|
Start free, upgrade when you need more. No hidden fees, no surprises.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mx-auto grid max-w-5xl grid-cols-1 gap-6 pt-12 md:grid-cols-3">
|
|
{/* Free Tier */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-2xl">Free</CardTitle>
|
|
<CardDescription>Perfect for trying out Vibn</CardDescription>
|
|
<div className="mt-4">
|
|
<span className="text-4xl font-bold">$0</span>
|
|
<span className="text-muted-foreground">/month</span>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<ul className="space-y-3">
|
|
<li className="flex items-center gap-2">
|
|
<Check className="h-5 w-5 text-green-600" />
|
|
<span>Up to 100 sessions/month</span>
|
|
</li>
|
|
<li className="flex items-center gap-2">
|
|
<Check className="h-5 w-5 text-green-600" />
|
|
<span>1 project</span>
|
|
</li>
|
|
<li className="flex items-center gap-2">
|
|
<Check className="h-5 w-5 text-green-600" />
|
|
<span>Basic analytics</span>
|
|
</li>
|
|
<li className="flex items-center gap-2">
|
|
<Check className="h-5 w-5 text-green-600" />
|
|
<span>7-day data retention</span>
|
|
</li>
|
|
<li className="flex items-center gap-2">
|
|
<Check className="h-5 w-5 text-green-600" />
|
|
<span>Cursor integration</span>
|
|
</li>
|
|
</ul>
|
|
<Link href="/auth" className="block">
|
|
<Button variant="outline" className="w-full">
|
|
Get Started
|
|
</Button>
|
|
</Link>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Pro Tier */}
|
|
<Card className="border-primary shadow-lg">
|
|
<div className="absolute right-4 top-4 rounded-full bg-primary px-3 py-1 text-xs text-primary-foreground">
|
|
Popular
|
|
</div>
|
|
<CardHeader>
|
|
<CardTitle className="text-2xl">Pro</CardTitle>
|
|
<CardDescription>For serious developers</CardDescription>
|
|
<div className="mt-4">
|
|
<span className="text-4xl font-bold">$19</span>
|
|
<span className="text-muted-foreground">/month</span>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<ul className="space-y-3">
|
|
<li className="flex items-center gap-2">
|
|
<Check className="h-5 w-5 text-green-600" />
|
|
<span className="font-medium">Unlimited sessions</span>
|
|
</li>
|
|
<li className="flex items-center gap-2">
|
|
<Check className="h-5 w-5 text-green-600" />
|
|
<span className="font-medium">Unlimited projects</span>
|
|
</li>
|
|
<li className="flex items-center gap-2">
|
|
<Check className="h-5 w-5 text-green-600" />
|
|
<span>Advanced analytics</span>
|
|
</li>
|
|
<li className="flex items-center gap-2">
|
|
<Check className="h-5 w-5 text-green-600" />
|
|
<span>90-day data retention</span>
|
|
</li>
|
|
<li className="flex items-center gap-2">
|
|
<Check className="h-5 w-5 text-green-600" />
|
|
<span>ChatGPT integration</span>
|
|
</li>
|
|
<li className="flex items-center gap-2">
|
|
<Check className="h-5 w-5 text-green-600" />
|
|
<span>GitHub integration</span>
|
|
</li>
|
|
<li className="flex items-center gap-2">
|
|
<Check className="h-5 w-5 text-green-600" />
|
|
<span>Priority support</span>
|
|
</li>
|
|
</ul>
|
|
<Link href="/auth" className="block">
|
|
<Button className="w-full">
|
|
Start Pro Trial
|
|
</Button>
|
|
</Link>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Team Tier */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-2xl">Team</CardTitle>
|
|
<CardDescription>For teams and organizations</CardDescription>
|
|
<div className="mt-4">
|
|
<span className="text-4xl font-bold">$49</span>
|
|
<span className="text-muted-foreground">/month</span>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<ul className="space-y-3">
|
|
<li className="flex items-center gap-2">
|
|
<Check className="h-5 w-5 text-green-600" />
|
|
<span className="font-medium">Everything in Pro</span>
|
|
</li>
|
|
<li className="flex items-center gap-2">
|
|
<Check className="h-5 w-5 text-green-600" />
|
|
<span>Up to 10 team members</span>
|
|
</li>
|
|
<li className="flex items-center gap-2">
|
|
<Check className="h-5 w-5 text-green-600" />
|
|
<span>Team analytics</span>
|
|
</li>
|
|
<li className="flex items-center gap-2">
|
|
<Check className="h-5 w-5 text-green-600" />
|
|
<span>Unlimited data retention</span>
|
|
</li>
|
|
<li className="flex items-center gap-2">
|
|
<Check className="h-5 w-5 text-green-600" />
|
|
<span>Custom integrations</span>
|
|
</li>
|
|
<li className="flex items-center gap-2">
|
|
<Check className="h-5 w-5 text-green-600" />
|
|
<span>SSO support</span>
|
|
</li>
|
|
<li className="flex items-center gap-2">
|
|
<Check className="h-5 w-5 text-green-600" />
|
|
<span>Dedicated support</span>
|
|
</li>
|
|
</ul>
|
|
<Link href="/auth" className="block">
|
|
<Button variant="outline" className="w-full">
|
|
Contact Sales
|
|
</Button>
|
|
</Link>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* FAQ Section */}
|
|
<div className="mx-auto mt-16 max-w-3xl">
|
|
<h2 className="mb-8 text-center text-3xl font-bold">Frequently Asked Questions</h2>
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h3 className="mb-2 text-lg font-semibold">Can I try Pro for free?</h3>
|
|
<p className="text-muted-foreground">
|
|
Yes! All new accounts get a 14-day free trial of Pro features. No credit card required.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h3 className="mb-2 text-lg font-semibold">What happens when I exceed the free tier limits?</h3>
|
|
<p className="text-muted-foreground">
|
|
We'll notify you when you're approaching your limits. You can upgrade anytime to continue tracking without interruption.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h3 className="mb-2 text-lg font-semibold">Can I cancel anytime?</h3>
|
|
<p className="text-muted-foreground">
|
|
Yes, you can cancel your subscription at any time. You'll retain access until the end of your billing period.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h3 className="mb-2 text-lg font-semibold">Do you offer discounts for students or non-profits?</h3>
|
|
<p className="text-muted-foreground">
|
|
Yes! Contact us at support@vibnai.com for special pricing for students, educators, and non-profit organizations.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|