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>
35 lines
1.3 KiB
TypeScript
35 lines
1.3 KiB
TypeScript
import { SubscriptionCard } from '@/components/billing/subscription-card'
|
|
import { PaymentMethodList } from '@/components/billing/payment-method-list'
|
|
import { InvoiceTable } from '@/components/billing/invoice-table'
|
|
import { mockSubscription, mockPaymentMethods, mockInvoices } from '@/lib/mock-data'
|
|
|
|
export default function BillingPage() {
|
|
return (
|
|
<div className="flex-1 w-full max-w-7xl mx-auto p-4 lg:p-8 flex flex-col gap-8">
|
|
{/* Header */}
|
|
<div className="flex flex-col gap-1">
|
|
<h1 className="text-3xl lg:text-4xl font-black tracking-tight text-foreground">
|
|
Billing & Invoices
|
|
</h1>
|
|
<p className="text-muted-foreground text-base font-medium">
|
|
Manage your subscription and payment methods
|
|
</p>
|
|
</div>
|
|
|
|
{/* Billing Content */}
|
|
<div className="grid grid-cols-1 xl:grid-cols-3 gap-8">
|
|
{/* Left Column - Subscription & Payment Methods */}
|
|
<div className="xl:col-span-1 flex flex-col gap-6">
|
|
<SubscriptionCard subscription={mockSubscription} />
|
|
<PaymentMethodList paymentMethods={mockPaymentMethods} />
|
|
</div>
|
|
|
|
{/* Right Column - Invoice History */}
|
|
<div className="xl:col-span-2">
|
|
<InvoiceTable invoices={mockInvoices} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|