75 lines
2.8 KiB
TypeScript
75 lines
2.8 KiB
TypeScript
import { Container } from "@/components/container";
|
|
import { Heading } from "@/components/heading";
|
|
import { Subheading } from "@/components/subheading";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
|
|
import { Check } from "lucide-react";
|
|
|
|
const tiers = [
|
|
{
|
|
name: "Starter",
|
|
price: "29€",
|
|
description: "Parfait pour les indépendants et petites entreprises.",
|
|
features: ["1 Utilisateur", "Projets illimités", "Support par email", "Analyses de base"],
|
|
cta: "Commencer",
|
|
featured: false,
|
|
},
|
|
{
|
|
name: "Pro",
|
|
price: "99€",
|
|
description: "La solution complète pour les équipes en croissance.",
|
|
features: ["5 Utilisateurs", "Projets illimités", "Support prioritaire", "Analyses avancées", "Intégrations API"],
|
|
cta: "Essai gratuit",
|
|
featured: true,
|
|
},
|
|
{
|
|
name: "Entreprise",
|
|
price: "Sur devis",
|
|
description: "Sécurité et support sur mesure pour les grands groupes.",
|
|
features: ["Utilisateurs illimités", "SSO & Sécurité avancée", "Account Manager dédié", "SLA 99.9%"],
|
|
cta: "Nous contacter",
|
|
featured: false,
|
|
},
|
|
];
|
|
|
|
export default function PricingPage() {
|
|
return (
|
|
<div className="py-24">
|
|
<Container>
|
|
<div className="text-center mb-16">
|
|
<Heading>Des tarifs simples et transparents</Heading>
|
|
<Subheading className="mt-4">Choisissez le plan qui correspond à vos besoins.</Subheading>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{tiers.map((tier) => (
|
|
<Card key={tier.name} className={tier.featured ? "border-black border-2 shadow-xl scale-105" : "border-neutral-200"}>
|
|
<CardHeader>
|
|
<CardTitle className="text-2xl">{tier.name}</CardTitle>
|
|
<div className="mt-4">
|
|
<span className="text-4xl font-bold">{tier.price}</span>
|
|
{tier.price !== "Sur devis" && <span className="text-neutral-500">/mois</span>}
|
|
</div>
|
|
<CardDescription className="mt-2">{tier.description}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ul className="space-y-4 mb-8">
|
|
{tier.features.map((feature) => (
|
|
<li key={feature} className="flex items-center gap-2 text-sm">
|
|
<Check className="w-4 h-4 text-green-500" />
|
|
{feature}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<Button className="w-full" variant={tier.featured ? "default" : "outline"}>
|
|
{tier.cta}
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</div>
|
|
);
|
|
}
|