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>
41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import { Rocket, Bot, Ticket, Calendar, LucideIcon, Plus } from 'lucide-react'
|
|
import { Card, CardContent } from '@/components/ui/card'
|
|
import { Badge } from '@/components/ui/badge'
|
|
|
|
interface StatsCardProps {
|
|
value: string | number
|
|
label: string
|
|
icon: LucideIcon
|
|
iconColor?: string
|
|
trend?: string
|
|
trendColor?: string
|
|
}
|
|
|
|
export function StatsCard({
|
|
value,
|
|
label,
|
|
icon: Icon,
|
|
iconColor = 'bg-primary/10 text-primary',
|
|
trend,
|
|
trendColor = 'bg-emerald-500/10 text-emerald-400 border-emerald-500/10',
|
|
}: StatsCardProps) {
|
|
return (
|
|
<Card className="bg-card border-border shadow-sm hover:shadow-md transition-shadow rounded-2xl">
|
|
<CardContent className="p-5">
|
|
<div className="flex items-start justify-between mb-4">
|
|
<div className={`p-2.5 ${iconColor} rounded-xl`}>
|
|
<Icon className="w-6 h-6" />
|
|
</div>
|
|
{trend && (
|
|
<Badge className={`text-xs font-bold px-2.5 py-1 rounded-full border ${trendColor}`}>
|
|
{trend}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
<p className="text-muted-foreground text-sm font-medium">{label}</p>
|
|
<p className="text-2xl font-bold text-foreground mt-1">{value}</p>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|