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>
33 lines
1.0 KiB
TypeScript
33 lines
1.0 KiB
TypeScript
interface ProgressStepperProps {
|
|
currentStep: number
|
|
totalSteps: number
|
|
stepLabel: string
|
|
}
|
|
|
|
export function ProgressStepper({ currentStep, totalSteps, stepLabel }: ProgressStepperProps) {
|
|
const progress = (currentStep / totalSteps) * 100
|
|
|
|
return (
|
|
<div className="flex flex-col items-center gap-4 mb-12">
|
|
<div className="text-sm font-medium text-muted-foreground">
|
|
Step {currentStep} of {totalSteps}
|
|
</div>
|
|
|
|
<div className="w-full max-w-md">
|
|
<div className="flex justify-between text-xs text-muted-foreground mb-2">
|
|
<span>Select Service</span>
|
|
<span>Complete</span>
|
|
</div>
|
|
<div className="h-2 bg-card border border-border rounded-full overflow-hidden">
|
|
<div
|
|
className="h-full bg-gradient-to-r from-primary to-primary-glow transition-all duration-500"
|
|
style={{ width: `${progress}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="text-lg font-semibold text-foreground">{stepLabel}</div>
|
|
</div>
|
|
)
|
|
}
|