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>
52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
import { Star } from 'lucide-react'
|
|
import { Card, CardContent } from '@/components/ui/card'
|
|
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
|
|
|
|
interface TestimonialCardProps {
|
|
name: string
|
|
role: string
|
|
company: string
|
|
avatar: string
|
|
rating: number
|
|
quote: string
|
|
}
|
|
|
|
export function TestimonialCard({ name, role, company, avatar, rating, quote }: TestimonialCardProps) {
|
|
return (
|
|
<Card className="bg-card border-border rounded-xl">
|
|
<CardContent className="p-6">
|
|
<div className="flex flex-col gap-4">
|
|
{/* Rating stars */}
|
|
<div className="flex gap-1">
|
|
{Array.from({ length: 5 }).map((_, i) => (
|
|
<Star
|
|
key={i}
|
|
className={`w-4 h-4 ${
|
|
i < rating ? 'fill-primary text-primary' : 'fill-muted text-muted-foreground'
|
|
}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{/* Quote */}
|
|
<p className="text-muted-foreground text-sm leading-relaxed">“{quote}”</p>
|
|
|
|
{/* Author */}
|
|
<div className="flex items-center gap-3 pt-2">
|
|
<Avatar className="w-10 h-10">
|
|
<AvatarImage src={avatar} alt={name} />
|
|
<AvatarFallback>{name.charAt(0)}</AvatarFallback>
|
|
</Avatar>
|
|
<div className="flex flex-col">
|
|
<p className="text-foreground font-semibold text-sm">{name}</p>
|
|
<p className="text-muted-foreground text-xs">
|
|
{role}, {company}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|