130 lines
4.3 KiB
TypeScript
130 lines
4.3 KiB
TypeScript
import Link from "next/link"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { CheckCircle, Database, Zap, Users, LucideIcon } from "lucide-react"
|
|
|
|
interface TokenBreakdown {
|
|
icon: LucideIcon
|
|
title: string
|
|
value: string
|
|
description: string
|
|
color: 'blue' | 'green' | 'purple'
|
|
}
|
|
|
|
interface PricingFeature {
|
|
text: string
|
|
}
|
|
|
|
interface PricingCardProps {
|
|
title: string
|
|
price: string
|
|
tokensIncluded: string
|
|
tokenBreakdown: TokenBreakdown[]
|
|
features: PricingFeature[]
|
|
ctaText: string
|
|
ctaHref: string
|
|
variant?: 'default' | 'featured'
|
|
}
|
|
|
|
export default function PricingCard({
|
|
title,
|
|
price,
|
|
tokensIncluded,
|
|
tokenBreakdown,
|
|
features,
|
|
ctaText,
|
|
ctaHref,
|
|
variant = 'default'
|
|
}: PricingCardProps) {
|
|
const getColorClasses = (color: 'blue' | 'green' | 'purple') => {
|
|
switch (color) {
|
|
case 'blue':
|
|
return {
|
|
bg: "bg-blue-50 dark:bg-blue-800",
|
|
icon: "text-blue-600 dark:text-blue-300",
|
|
title: "text-blue-800 dark:text-blue-200",
|
|
value: "text-blue-600 dark:text-blue-300",
|
|
description: "text-blue-700 dark:text-blue-200"
|
|
}
|
|
case 'green':
|
|
return {
|
|
bg: "bg-green-50 dark:bg-green-800",
|
|
icon: "text-green-600 dark:text-green-300",
|
|
title: "text-green-800 dark:text-green-200",
|
|
value: "text-green-600 dark:text-green-300",
|
|
description: "text-green-700 dark:text-green-200"
|
|
}
|
|
case 'purple':
|
|
return {
|
|
bg: "bg-purple-50 dark:bg-purple-800",
|
|
icon: "text-purple-600 dark:text-purple-300",
|
|
title: "text-purple-800 dark:text-purple-200",
|
|
value: "text-purple-600 dark:text-purple-300",
|
|
description: "text-purple-700 dark:text-purple-200"
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Card className="border-2 border-blue-200 bg-blue-50 dark:bg-blue-900 dark:border-blue-700 transition-colors">
|
|
<CardHeader className="text-center">
|
|
<CardTitle className="text-3xl font-bold text-blue-700 dark:text-blue-400">
|
|
{title}
|
|
</CardTitle>
|
|
<CardDescription className="text-2xl font-semibold text-blue-600 dark:text-blue-300">
|
|
{price}
|
|
</CardDescription>
|
|
<Badge className="bg-green-600 text-white text-lg px-4 py-2 mt-2 dark:bg-green-500">
|
|
{tokensIncluded}
|
|
</Badge>
|
|
</CardHeader>
|
|
|
|
<CardContent>
|
|
{/* Token Breakdown */}
|
|
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg mb-6 transition-colors">
|
|
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-4 text-center">
|
|
🎯 Que comprennent {tokensIncluded} ?
|
|
</h3>
|
|
<div className="grid md:grid-cols-3 gap-6">
|
|
{tokenBreakdown.map((item, index) => {
|
|
const colorClasses = getColorClasses(item.color)
|
|
const Icon = item.icon
|
|
return (
|
|
<div key={index} className={`text-center p-4 ${colorClasses.bg} rounded-lg transition-colors`}>
|
|
<Icon className={`h-8 w-8 mx-auto ${colorClasses.icon} mb-2`} />
|
|
<h4 className={`font-semibold ${colorClasses.title}`}>{item.title}</h4>
|
|
<p className={`text-2xl font-bold ${colorClasses.value}`}>{item.value}</p>
|
|
<p className={`text-sm ${colorClasses.description}`}>{item.description}</p>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Features */}
|
|
<div className="space-y-3 mb-6 text-gray-900 dark:text-gray-200">
|
|
{features.map((feature, index) => (
|
|
<div key={index} className="flex items-center">
|
|
<CheckCircle className="h-5 w-5 text-green-600 dark:text-green-300 mr-3" />
|
|
<span>{feature.text}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* CTA */}
|
|
<div className="text-center">
|
|
<p className="text-lg font-semibold text-blue-700 dark:text-blue-400 mb-4">
|
|
Tarification à la consommation + setup personnalisé
|
|
</p>
|
|
<Link href={ctaHref}>
|
|
<Button size="lg" className="w-full">
|
|
{ctaText}
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|