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>
47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
|
|
type ServiceType = 'web-design' | 'ai-automation'
|
|
|
|
interface ServiceTypeToggleProps {
|
|
defaultValue: ServiceType
|
|
onChange: (value: ServiceType) => void
|
|
}
|
|
|
|
export function ServiceTypeToggle({ defaultValue, onChange }: ServiceTypeToggleProps) {
|
|
const [value, setValue] = useState<ServiceType>(defaultValue)
|
|
|
|
const handleChange = (newValue: ServiceType) => {
|
|
setValue(newValue)
|
|
onChange(newValue)
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center justify-center mb-12">
|
|
<div className="inline-flex bg-card border border-border rounded-lg p-1">
|
|
<button
|
|
onClick={() => handleChange('web-design')}
|
|
className={`px-6 py-3 rounded-md text-sm font-bold transition-all ${
|
|
value === 'web-design'
|
|
? 'bg-primary text-white shadow-lg'
|
|
: 'text-muted-foreground hover:text-foreground'
|
|
}`}
|
|
>
|
|
Web Design
|
|
</button>
|
|
<button
|
|
onClick={() => handleChange('ai-automation')}
|
|
className={`px-6 py-3 rounded-md text-sm font-bold transition-all ${
|
|
value === 'ai-automation'
|
|
? 'bg-primary text-white shadow-lg'
|
|
: 'text-muted-foreground hover:text-foreground'
|
|
}`}
|
|
>
|
|
AI Automation
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|