98552163a8
Complete frontend implementation with: - Next.js 16 with App Router and TypeScript - Tailwind CSS v4 with custom violet theme - shadcn/ui components with Lucide React icons - Landing page with hero, services, pricing, testimonials, FAQ - Service selection page with toggle - Login/Register pages with social auth UI - Multi-step checkout flow - Client dashboard with stats, projects, support tickets - Billing page with subscription, payment methods, invoices - All mock data and TypeScript types 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
70 lines
2.3 KiB
TypeScript
70 lines
2.3 KiB
TypeScript
'use client'
|
|
|
|
import { Check } from 'lucide-react'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Card, CardContent } from '@/components/ui/card'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import Link from 'next/link'
|
|
|
|
interface PricingCardProps {
|
|
tier: string
|
|
price: number
|
|
currency: string
|
|
features: string[]
|
|
popular?: boolean
|
|
planId: string
|
|
}
|
|
|
|
export function PricingCard({ tier, price, currency, features, popular, planId }: PricingCardProps) {
|
|
return (
|
|
<Card
|
|
className={`relative bg-card border-border rounded-xl transition-all duration-300 ${
|
|
popular ? 'border-primary shadow-lg shadow-primary/20 scale-105' : 'hover:border-primary/50'
|
|
}`}
|
|
>
|
|
{popular && (
|
|
<Badge className="absolute -top-3 left-1/2 -translate-x-1/2 bg-primary text-white">
|
|
Most Popular
|
|
</Badge>
|
|
)}
|
|
<CardContent className="p-6">
|
|
<div className="flex flex-col gap-6">
|
|
<div className="flex flex-col gap-2">
|
|
<h3 className="text-foreground font-bold text-2xl capitalize">{tier}</h3>
|
|
<div className="flex items-baseline gap-1">
|
|
<span className="text-4xl font-black text-foreground">
|
|
{price}
|
|
</span>
|
|
<span className="text-muted-foreground">{currency}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<ul className="flex flex-col gap-3">
|
|
{features.map((feature, index) => (
|
|
<li key={index} className="flex items-start gap-3">
|
|
<div className="flex-shrink-0 w-5 h-5 rounded-full bg-primary/20 flex items-center justify-center mt-0.5">
|
|
<Check className="w-3 h-3 text-primary" />
|
|
</div>
|
|
<span className="text-sm text-muted-foreground">{feature}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<Button
|
|
asChild
|
|
className={`w-full ${
|
|
popular
|
|
? 'glow-button bg-primary hover:bg-primary-glow text-white'
|
|
: 'bg-card border border-border hover:border-primary text-foreground'
|
|
} font-bold rounded-lg`}
|
|
>
|
|
<Link href={`/checkout?plan=${planId}`}>
|
|
Select {tier}
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|