VIBN Frontend for Coolify deployment
This commit is contained in:
195
app/(marketing)/pricing/page.tsx
Normal file
195
app/(marketing)/pricing/page.tsx
Normal file
@@ -0,0 +1,195 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user