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>
55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
import Link from 'next/link'
|
|
|
|
interface CheckoutStepsProps {
|
|
currentStep: 'account' | 'billing' | 'payment'
|
|
}
|
|
|
|
const steps = [
|
|
{ id: 'account', label: 'Account' },
|
|
{ id: 'billing', label: 'Billing' },
|
|
{ id: 'payment', label: 'Payment' },
|
|
]
|
|
|
|
export function CheckoutSteps({ currentStep }: CheckoutStepsProps) {
|
|
const currentIndex = steps.findIndex((s) => s.id === currentStep)
|
|
|
|
return (
|
|
<div className="flex items-center justify-center mb-12">
|
|
<div className="flex items-center gap-4">
|
|
{steps.map((step, index) => (
|
|
<div key={step.id} className="flex items-center">
|
|
{index > 0 && (
|
|
<div
|
|
className={`w-12 h-0.5 ${
|
|
index <= currentIndex ? 'bg-primary' : 'bg-border'
|
|
}`}
|
|
/>
|
|
)}
|
|
<Link
|
|
href={index <= currentIndex ? `/checkout?step=${step.id}` : '#'}
|
|
className={`flex items-center justify-center w-10 h-10 rounded-full text-sm font-bold transition-colors ${
|
|
index === currentIndex
|
|
? 'bg-primary text-white'
|
|
: index < currentIndex
|
|
? 'bg-primary/20 text-primary'
|
|
: 'bg-card border border-border text-muted-foreground'
|
|
}`}
|
|
>
|
|
{index < currentIndex ? '✓' : index + 1}
|
|
</Link>
|
|
<span
|
|
className={`ml-2 text-sm font-medium ${
|
|
index === currentIndex
|
|
? 'text-foreground'
|
|
: 'text-muted-foreground'
|
|
}`}
|
|
>
|
|
{step.label}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|