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>
168 lines
3.1 KiB
TypeScript
168 lines
3.1 KiB
TypeScript
// User & Auth
|
|
export interface User {
|
|
id: string
|
|
email: string
|
|
name: string
|
|
avatar?: string
|
|
role: 'client' | 'admin'
|
|
}
|
|
|
|
// Services & Pricing
|
|
export type ServiceType = 'web-design' | 'ai-automation'
|
|
|
|
export type PricingTier = 'starter' | 'growth' | 'pro'
|
|
|
|
export interface PricingPlan {
|
|
id: string
|
|
tier: PricingTier
|
|
serviceType: ServiceType
|
|
price: number
|
|
currency: string
|
|
features: string[]
|
|
popular?: boolean
|
|
deliveryDays: number
|
|
revisions: number
|
|
}
|
|
|
|
export interface Service {
|
|
id: string
|
|
type: ServiceType
|
|
title: string
|
|
description: string
|
|
icon: string
|
|
image?: string
|
|
}
|
|
|
|
// Projects & Dashboard
|
|
export type ProjectStatus = 'discovery' | 'design' | 'development' | 'content' | 'testing' | 'completed'
|
|
|
|
export interface ProjectStage {
|
|
name: string
|
|
completed: boolean
|
|
}
|
|
|
|
export interface Project {
|
|
id: string
|
|
userId: string
|
|
title: string
|
|
description: string
|
|
type: ServiceType
|
|
tier: PricingTier
|
|
status: ProjectStatus
|
|
progress: number
|
|
thumbnail: string
|
|
stages: ProjectStage[]
|
|
createdAt: Date
|
|
updatedAt: Date
|
|
estimatedDelivery?: Date
|
|
}
|
|
|
|
// Support Tickets
|
|
export type TicketStatus = 'open' | 'in-progress' | 'resolved' | 'closed'
|
|
|
|
export interface SupportTicket {
|
|
id: string
|
|
userId: string
|
|
projectId?: string
|
|
subject: string
|
|
description: string
|
|
status: TicketStatus
|
|
priority: 'low' | 'medium' | 'high'
|
|
createdAt: Date
|
|
updatedAt: Date
|
|
}
|
|
|
|
// Billing & Invoices
|
|
export type InvoiceStatus = 'paid' | 'pending' | 'refunded' | 'cancelled'
|
|
|
|
export interface Invoice {
|
|
id: string
|
|
userId: string
|
|
projectId?: string
|
|
description: string
|
|
amount: number
|
|
currency: string
|
|
vat: number
|
|
total: number
|
|
status: InvoiceStatus
|
|
date: Date
|
|
dueDate: Date
|
|
downloadUrl?: string
|
|
}
|
|
|
|
export type PaymentMethodType = 'card' | 'paypal' | 'stripe-link'
|
|
|
|
export interface PaymentMethod {
|
|
id: string
|
|
userId: string
|
|
type: PaymentMethodType
|
|
isDefault: boolean
|
|
last4?: string
|
|
brand?: string
|
|
email?: string
|
|
}
|
|
|
|
export interface Subscription {
|
|
id: string
|
|
userId: string
|
|
planId: string
|
|
status: 'active' | 'cancelled' | 'past_due'
|
|
currentPeriodStart: Date
|
|
currentPeriodEnd: Date
|
|
cancelAtPeriodEnd: boolean
|
|
}
|
|
|
|
// Testimonials & Marketing
|
|
export interface Testimonial {
|
|
id: string
|
|
name: string
|
|
role: string
|
|
company: string
|
|
avatar: string
|
|
rating: number
|
|
quote: string
|
|
}
|
|
|
|
// Checkout
|
|
export type CheckoutStep = 'account' | 'billing' | 'payment'
|
|
|
|
export interface CheckoutSession {
|
|
id: string
|
|
userId?: string
|
|
serviceType: ServiceType
|
|
tier: PricingTier
|
|
email: string
|
|
billingAddress?: Address
|
|
paymentMethodId?: string
|
|
amount: number
|
|
vat: number
|
|
total: number
|
|
status: 'pending' | 'processing' | 'completed' | 'failed'
|
|
currentStep: CheckoutStep
|
|
createdAt: Date
|
|
}
|
|
|
|
export interface Address {
|
|
fullName: string
|
|
street: string
|
|
city: string
|
|
postalCode: string
|
|
country: string
|
|
}
|
|
|
|
// FAQ
|
|
export interface FAQ {
|
|
id: string
|
|
question: string
|
|
answer: string
|
|
category?: string
|
|
}
|
|
|
|
// Stats for dashboard
|
|
export interface DashboardStats {
|
|
totalProjects: number
|
|
activeProjects: number
|
|
pendingTickets: number
|
|
totalSpent: number
|
|
}
|