88dc3714a1
React/Vite/shadcn-ui site for Gigafibre ISP. Address qualification via PostgreSQL (5.2M AQ addresses, pg_trgm fuzzy search). No Supabase dependency for address search. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
84 lines
3.7 KiB
TypeScript
84 lines
3.7 KiB
TypeScript
import { CheckCircle, ArrowRight } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
|
|
|
interface PricingTier {
|
|
name: string;
|
|
price: string;
|
|
description: string;
|
|
features: string[];
|
|
popular?: boolean;
|
|
promo?: string;
|
|
}
|
|
|
|
interface PricingProps {
|
|
title?: string;
|
|
subtitle?: string;
|
|
tiers: PricingTier[];
|
|
}
|
|
|
|
const Pricing = ({ title = "Nos forfaits", subtitle = "Simple et transparent", tiers }: PricingProps) => {
|
|
return (
|
|
<section className="py-16 md:py-24 bg-muted/30">
|
|
<div className="container mx-auto px-4">
|
|
{(title || subtitle) && (
|
|
<div className="text-center max-w-2xl mx-auto mb-12">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4 font-display">{title}</h2>
|
|
<p className="text-muted-foreground">{subtitle}</p>
|
|
</div>
|
|
)}
|
|
|
|
<div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
|
{tiers.map((tier, index) => (
|
|
<Card
|
|
key={index}
|
|
className={`relative ${tier.popular ? "border-primary border-2 shadow-xl" : ""}`}
|
|
>
|
|
{tier.popular && (
|
|
<span className="absolute -top-3 left-1/2 -translate-x-1/2 bg-primary text-primary-foreground px-4 py-1 rounded-full text-sm font-medium">
|
|
Recommandé
|
|
</span>
|
|
)}
|
|
|
|
<CardHeader className="text-center pt-8">
|
|
<CardTitle className="text-2xl">{tier.name}</CardTitle>
|
|
<CardDescription>{tier.description}</CardDescription>
|
|
<div className="mt-4">
|
|
<span className="text-4xl font-bold text-primary">{tier.price}</span>
|
|
<span className="text-muted-foreground text-sm">/mois</span>
|
|
</div>
|
|
</CardHeader>
|
|
|
|
<CardContent>
|
|
<ul className="space-y-3 mb-6">
|
|
{tier.features.map((feature, i) => (
|
|
<li key={i} className="flex items-start gap-3 text-sm text-muted-foreground">
|
|
<CheckCircle className="w-5 h-5 text-primary flex-shrink-0" />
|
|
<span>{feature}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<Button
|
|
className="w-full"
|
|
variant={tier.popular ? "default" : "outline"}
|
|
asChild
|
|
>
|
|
<a href="/#contact">Choisir ce forfait <ArrowRight className="w-4 h-4 ml-2" /></a>
|
|
</Button>
|
|
{tier.promo && (
|
|
<p className="text-xs text-primary text-center font-medium mt-4">
|
|
{tier.promo}
|
|
</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Pricing;
|