authentification nocodebackend ok

2026-02-08 16:12:25 +01:00
commit be5bd2b2bf
37 changed files with 9585 additions and 0 deletions
--- a/components/Pricing.tsx
+++ b/components/Pricing.tsx
@@ -0,0 +1,59 @@
+
+import React from 'react';
+import { Check, ArrowLeft } from 'lucide-react';
+import { PlanType } from '../types';
+
+interface PricingProps {
+  currentPlan: PlanType;
+  onBack: () => void;
+  onSelectPlan: (plan: PlanType) => void;
+}
+
+const Pricing: React.FC<PricingProps> = ({ currentPlan, onBack, onSelectPlan }) => {
+  const plans = [
+    { id: 'free', name: 'Gratuit', price: '0€', desc: 'Idéal pour découvrir PlumeIA.', features: ['10 actions IA / mois', '1 projet actif', 'Bible du monde simple'] },
+    { id: 'pro', name: 'Auteur Pro', price: '12€', desc: 'Pour les écrivains sérieux.', features: ['500 actions IA / mois', 'Projets illimités', 'Export Word & EPUB', 'Support prioritaire'], popular: true },
+    { id: 'master', name: 'Maître Plume', price: '29€', desc: 'Le summum de l\'écriture IA.', features: ['Actions IA illimitées', 'Accès Gemini 3 Pro', 'Bible du monde avancée', 'Outils de révision avancés'] },
+  ];
+
+  return (
+    <div className="min-h-screen bg-[#eef2ff] py-20 px-8">
+      <div className="max-w-6xl mx-auto">
+        <button onClick={onBack} className="flex items-center gap-2 text-slate-500 hover:text-blue-600 mb-12 font-bold transition-colors">
+            <ArrowLeft size={20} /> Retour
+        </button>
+        <div className="text-center mb-16">
+            <h2 className="text-4xl font-black text-slate-900 mb-4">Choisissez votre destin d'écrivain.</h2>
+            <p className="text-slate-500">Passez au plan supérieur pour libérer toute la puissance de l'IA.</p>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            {plans.map((p) => (
+                <div key={p.id} className={`bg-white rounded-3xl p-8 border transition-all ${p.popular ? 'border-blue-500 shadow-2xl scale-105 z-10' : 'border-indigo-100 shadow-xl'}`}>
+                    <div className="mb-8">
+                        <h4 className="text-xl font-bold text-slate-900 mb-2">{p.name}</h4>
+                        <div className="text-4xl font-black text-slate-900 mb-2">{p.price}<span className="text-sm font-normal text-slate-400">/mois</span></div>
+                        <p className="text-sm text-slate-500">{p.desc}</p>
+                    </div>
+                    <ul className="space-y-4 mb-10">
+                        {p.features.map((f, i) => (
+                            <li key={i} className="flex items-center gap-3 text-sm text-slate-700">
+                                <div className="text-blue-500 bg-blue-50 p-0.5 rounded-full"><Check size={14} /></div>
+                                {f}
+                            </li>
+                        ))}
+                    </ul>
+                    <button 
+                        onClick={() => onSelectPlan(p.id as PlanType)}
+                        className={`w-full py-4 rounded-2xl font-black transition-all ${p.id === currentPlan ? 'bg-slate-100 text-slate-400 cursor-default' : p.popular ? 'bg-blue-600 text-white hover:bg-blue-700' : 'bg-slate-900 text-white hover:bg-slate-800'}`}
+                    >
+                        {p.id === currentPlan ? 'Plan Actuel' : 'Sélectionner'}
+                    </button>
+                </div>
+            ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Pricing;