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>
39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
import { Award, CircleCheck } from 'lucide-react'
|
|
import { Card, CardContent } from '@/components/ui/card'
|
|
import { Button } from '@/components/ui/button'
|
|
|
|
export function UpgradeCard() {
|
|
return (
|
|
<Card className="bg-gradient-to-br from-primary to-violet-600 border-0 text-white">
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<Award className="w-8 h-8" />
|
|
<div>
|
|
<h3 className="font-bold text-xl">Upgrade to Premium</h3>
|
|
<p className="text-white/80 text-sm">Unlock all features</p>
|
|
</div>
|
|
</div>
|
|
|
|
<ul className="space-y-2 mb-6">
|
|
<li className="flex items-center gap-2 text-sm">
|
|
<CircleCheck className="w-4 h-4" />
|
|
<span>Priority Support</span>
|
|
</li>
|
|
<li className="flex items-center gap-2 text-sm">
|
|
<CircleCheck className="w-4 h-4" />
|
|
<span>Unlimited Revisions</span>
|
|
</li>
|
|
<li className="flex items-center gap-2 text-sm">
|
|
<CircleCheck className="w-4 h-4" />
|
|
<span>Dedicated Account Manager</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<Button className="w-full bg-white text-primary hover:bg-white/90 font-bold">
|
|
Upgrade Now
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|