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>
80 lines
2.7 KiB
TypeScript
80 lines
2.7 KiB
TypeScript
import { Rocket, Lock, ShieldCheck } from 'lucide-react'
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Separator } from '@/components/ui/separator'
|
|
import { Button } from '@/components/ui/button'
|
|
|
|
interface CheckoutSummaryProps {
|
|
serviceName: string
|
|
tier: string
|
|
price: number
|
|
currency: string
|
|
}
|
|
|
|
export function CheckoutSummary({ serviceName, tier, price, currency }: CheckoutSummaryProps) {
|
|
const vat = Math.round(price * 0.2)
|
|
const total = price + vat
|
|
|
|
return (
|
|
<Card className="bg-card border-border">
|
|
<CardHeader>
|
|
<CardTitle>Order Summary</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="flex flex-col gap-6">
|
|
{/* Selected Service */}
|
|
<div className="flex items-start gap-4 pb-4 border-b border-border">
|
|
<div className="p-3 bg-primary/10 text-primary rounded-lg">
|
|
<Rocket className="w-6 h-6" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h4 className="font-semibold text-foreground">{serviceName}</h4>
|
|
<p className="text-sm text-muted-foreground capitalize">{tier} Tier</p>
|
|
</div>
|
|
<p className="font-bold text-foreground">
|
|
{price} {currency}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Price Breakdown */}
|
|
<div className="flex flex-col gap-3">
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-muted-foreground">Subtotal</span>
|
|
<span className="text-foreground">
|
|
{price} {currency}
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-muted-foreground">VAT (20%)</span>
|
|
<span className="text-foreground">
|
|
{vat} {currency}
|
|
</span>
|
|
</div>
|
|
<Separator />
|
|
<div className="flex justify-between">
|
|
<span className="font-bold text-foreground">Total</span>
|
|
<span className="font-bold text-xl text-foreground">
|
|
{total} {currency}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Complete Purchase Button */}
|
|
<Button className="glow-button bg-primary hover:bg-primary-glow text-white w-full text-lg font-bold h-12">
|
|
Complete Purchase
|
|
</Button>
|
|
|
|
{/* Trust Badges */}
|
|
<div className="flex items-center justify-center gap-4 text-xs text-muted-foreground">
|
|
<div className="flex items-center gap-1">
|
|
<Lock className="w-4 h-4" />
|
|
<span>Secure Payment</span>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<ShieldCheck className="w-4 h-4" />
|
|
<span>SSL Encrypted</span>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|