Update app/pricing/page.tsx

app/pricing/page.tsx

@@ -0,0 +1,74 @@
+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>
+  );
+}