Skip to content

Commit ebd5877

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Refactor: Break down PricingPage into components
Refactors `src/pages/PricingPage.tsx` into smaller, reusable components for better organization and maintainability. Each major section (comparison table, calculator, transparency, FAQ) is extracted into its own component. Unused imports are removed.
1 parent 92ab901 commit ebd5877

File tree

8 files changed

+519
-454
lines changed

8 files changed

+519
-454
lines changed

‎src/components/pricing/ComparisonTable.tsx‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
2+
import { Button } from "@/components/ui/button";
3+
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
4+
import { Check, X } from "lucide-react";
5+
6+
interface ComparisonTableProps {
7+
onGetStarted: () => void;
8+
}
9+
10+
export const ComparisonTable = ({ onGetStarted }: ComparisonTableProps) => {
11+
return (
12+
<section className="py-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-white to-slate-50">
13+
<div className="max-w-7xl mx-auto">
14+
<div className="text-center mb-16">
15+
<h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-6">
16+
Comparez les approches
17+
</h2>
18+
<p className="text-xl text-slate-600 max-w-3xl mx-auto leading-relaxed">
19+
Découvrez les différences entre les modèles du marché
20+
</p>
21+
</div>
22+
23+
<div className="grid md:grid-cols-3 gap-8">
24+
{/* Traditional Model */}
25+
<Card className="border-2 border-slate-200 relative shadow-lg hover:shadow-xl transition-all">
26+
<div className="absolute -top-3 left-4 bg-slate-500 text-white px-4 py-1 rounded-full text-sm font-medium">
27+
Modèle traditionnel
28+
</div>
29+
<CardHeader className="text-center pt-8">
30+
<CardTitle className="text-2xl text-slate-900">Plateformes SaaS</CardTitle>
31+
<div className="text-4xl font-bold text-slate-600 mt-4">
32+
199-599€<span className="text-lg text-slate-500">/mois</span>
33+
</div>
34+
<p className="text-slate-500">+ commission variable</p>
35+
</CardHeader>
36+
<CardContent>
37+
<ul className="space-y-3">
38+
<li className="flex items-center gap-3">
39+
<X className="w-5 h-5 text-slate-500" />
40+
<span>Frais mensuels fixes</span>
41+
</li>
42+
<li className="flex items-center gap-3">
43+
<X className="w-5 h-5 text-slate-500" />
44+
<span>Commission additionnelle</span>
45+
</li>
46+
<li className="flex items-center gap-3">
47+
<X className="w-5 h-5 text-slate-500" />
48+
<span>Engagement contractuel</span>
49+
</li>
50+
<li className="flex items-center gap-3">
51+
<X className="w-5 h-5 text-slate-500" />
52+
<span>Coûts même sans revenus</span>
53+
</li>
54+
</ul>
55+
</CardContent>
56+
</Card>
57+
58+
{/* RefSpring */}
59+
<Card className="border-4 border-green-500 relative transform scale-105 shadow-2xl bg-white">
60+
<div className="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-6 py-2 rounded-full text-sm font-medium">
61+
RefSpring
62+
</div>
63+
<CardHeader className="text-center pt-8">
64+
<CardTitle className="text-2xl text-slate-900">Modèle au succès</CardTitle>
65+
<div className="text-4xl font-bold text-green-600 mt-4">
66+
0€<span className="text-lg text-slate-500">/mois</span>
67+
</div>
68+
<p className="text-slate-500">2,5% sur vos gains uniquement</p>
69+
</CardHeader>
70+
<CardContent>
71+
<ul className="space-y-3">
72+
<li className="flex items-center gap-3">
73+
<Check className="w-5 h-5 text-green-500" />
74+
<span className="font-semibold">Aucun frais fixe</span>
75+
</li>
76+
<li className="flex items-center gap-3">
77+
<Check className="w-5 h-5 text-green-500" />
78+
<span className="font-semibold">Commission minimale</span>
79+
</li>
80+
<li className="flex items-center gap-3">
81+
<Check className="w-5 h-5 text-green-500" />
82+
<span className="font-semibold">Aucun engagement</span>
83+
</li>
84+
<li className="flex items-center gap-3">
85+
<Check className="w-5 h-5 text-green-500" />
86+
<span className="font-semibold">Payez seulement si vous gagnez</span>
87+
</li>
88+
</ul>
89+
<Button className="w-full mt-6 bg-green-600 hover:bg-green-700 hover:scale-105 transition-all" onClick={onGetStarted}>
90+
Commencer maintenant
91+
</Button>
92+
</CardContent>
93+
</Card>
94+
95+
{/* Freemium */}
96+
<Card className="border-2 border-blue-200 relative shadow-lg hover:shadow-xl transition-all">
97+
<div className="absolute -top-3 left-4 bg-blue-500 text-white px-4 py-1 rounded-full text-sm font-medium">
98+
Modèle freemium
99+
</div>
100+
<CardHeader className="text-center pt-8">
101+
<CardTitle className="text-2xl text-slate-900">Solutions gratuites</CardTitle>
102+
<div className="text-4xl font-bold text-blue-600 mt-4">
103+
0€<span className="text-lg text-slate-500">/mois</span>
104+
</div>
105+
<p className="text-slate-500">Limites importantes</p>
106+
</CardHeader>
107+
<CardContent>
108+
<ul className="space-y-3">
109+
<li className="flex items-center gap-3">
110+
<X className="w-5 h-5 text-blue-500" />
111+
<span>Fonctionnalités limitées</span>
112+
</li>
113+
<li className="flex items-center gap-3">
114+
<X className="w-5 h-5 text-blue-500" />
115+
<span>Support restreint</span>
116+
</li>
117+
<li className="flex items-center gap-3">
118+
<X className="w-5 h-5 text-blue-500" />
119+
<span>Branding de la plateforme</span>
120+
</li>
121+
<li className="flex items-center gap-3">
122+
<X className="w-5 h-5 text-blue-500" />
123+
<span>Limites de volume</span>
124+
</li>
125+
</ul>
126+
</CardContent>
127+
</Card>
128+
</div>
129+
</div>
130+
</section>
131+
);
132+
};

‎src/components/pricing/InteractiveCalculator.tsx‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
2+
import { Card, CardContent } from "@/components/ui/card";
3+
import { Calculator } from "lucide-react";
4+
import { useState } from "react";
5+
6+
export const InteractiveCalculator = () => {
7+
const [monthlyRevenue, setMonthlyRevenue] = useState(10000);
8+
9+
const competitorsCost = 299 + (monthlyRevenue * 0.10); // 299€/mois + 10% commission
10+
const refspringCost = monthlyRevenue >= 20 ? monthlyRevenue * 0.025 : 0; // 2.5% seulement si > 20€
11+
const savings = competitorsCost - refspringCost;
12+
13+
return (
14+
<section className="py-24 px-4 sm:px-6 lg:px-8 bg-slate-50">
15+
<div className="max-w-4xl mx-auto">
16+
<div className="text-center mb-16">
17+
<Calculator className="w-16 h-16 text-blue-600 mx-auto mb-4" />
18+
<h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-6">
19+
Calculez vos coûts
20+
</h2>
21+
<p className="text-xl text-slate-600 max-w-3xl mx-auto leading-relaxed">
22+
Comparez les différents modèles selon vos revenus
23+
</p>
24+
</div>
25+
26+
<Card className="bg-white shadow-xl">
27+
<CardContent className="p-8">
28+
<div className="mb-8">
29+
<label className="block text-lg font-semibold text-slate-900 mb-4">
30+
Revenus mensuels de vos affiliés
31+
</label>
32+
<div className="relative">
33+
<input
34+
type="range"
35+
min="0"
36+
max="50000"
37+
step="1000"
38+
value={monthlyRevenue}
39+
onChange={(e) => setMonthlyRevenue(Number(e.target.value))}
40+
className="w-full h-3 bg-slate-200 rounded-lg appearance-none cursor-pointer slider"
41+
/>
42+
<div className="text-center mt-4">
43+
<span className="text-3xl font-bold text-blue-600">
44+
{monthlyRevenue.toLocaleString('fr-FR')}€
45+
</span>
46+
<span className="text-slate-500 ml-2">par mois</span>
47+
</div>
48+
</div>
49+
</div>
50+
51+
<div className="grid md:grid-cols-3 gap-6 mb-8">
52+
<div className="text-center p-6 bg-slate-50 rounded-xl">
53+
<h3 className="font-semibold text-slate-900 mb-2">Plateformes SaaS</h3>
54+
<div className="text-2xl font-bold text-slate-600 mb-1">
55+
{competitorsCost.toLocaleString('fr-FR')}€
56+
</div>
57+
<p className="text-sm text-slate-500">299€/mois + 10% commission</p>
58+
</div>
59+
60+
<div className="text-center p-6 bg-green-50 rounded-xl border-2 border-green-200">
61+
<h3 className="font-semibold text-slate-900 mb-2">RefSpring</h3>
62+
<div className="text-2xl font-bold text-green-600 mb-1">
63+
{refspringCost.toLocaleString('fr-FR')}€
64+
</div>
65+
<p className="text-sm text-slate-500">0€/mois + 2,5% commission</p>
66+
</div>
67+
68+
<div className="text-center p-6 bg-blue-50 rounded-xl">
69+
<h3 className="font-semibold text-slate-900 mb-2">Économies</h3>
70+
<div className="text-2xl font-bold text-blue-600 mb-1">
71+
{savings.toLocaleString('fr-FR')}€
72+
</div>
73+
<p className="text-sm text-slate-500">Par mois</p>
74+
</div>
75+
</div>
76+
77+
<div className="text-center p-6 bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl text-white">
78+
<h3 className="text-xl font-semibold mb-2">Économies annuelles</h3>
79+
<div className="text-4xl font-bold mb-2">
80+
{(savings * 12).toLocaleString('fr-FR')}€
81+
</div>
82+
<p className="text-blue-100">
83+
Différence avec RefSpring
84+
</p>
85+
</div>
86+
</CardContent>
87+
</Card>
88+
</div>
89+
</section>
90+
);
91+
};

‎src/components/pricing/PricingCTA.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
2+
import { Button } from "@/components/ui/button";
3+
import { ArrowRight, Clock } from "lucide-react";
4+
5+
interface PricingCTAProps {
6+
onGetStarted: () => void;
7+
}
8+
9+
export const PricingCTA = ({ onGetStarted }: PricingCTAProps) => {
10+
return (
11+
<section className="py-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-blue-600 via-purple-600 to-blue-800 relative overflow-hidden">
12+
<div className="absolute inset-0 bg-black/10"></div>
13+
<div className="max-w-4xl mx-auto text-center relative z-10">
14+
<div className="mb-8">
15+
<Clock className="w-16 h-16 text-blue-200 mx-auto mb-4 animate-pulse" />
16+
</div>
17+
<h2 className="text-4xl md:text-6xl font-bold text-white mb-6">
18+
Prêt à commencer ?
19+
</h2>
20+
<p className="text-xl text-blue-100 mb-8 max-w-2xl mx-auto leading-relaxed">
21+
Rejoignez les entreprises qui ont choisi un modèle équitable.
22+
Aucun risque, aucun engagement.
23+
</p>
24+
<div className="flex flex-col sm:flex-row gap-6 justify-center">
25+
<Button
26+
size="lg"
27+
variant="secondary"
28+
className="text-lg px-12 py-6 bg-white text-slate-900 hover:bg-slate-100 hover:scale-105 transition-all shadow-xl"
29+
onClick={onGetStarted}
30+
>
31+
Créer mon compte gratuitement
32+
<ArrowRight className="ml-2 h-5 w-5" />
33+
</Button>
34+
<Button
35+
size="lg"
36+
variant="outline"
37+
className="text-lg px-12 py-6 border-2 border-white text-white hover:bg-white hover:text-slate-900 hover:scale-105 transition-all"
38+
>
39+
Voir une démo live
40+
</Button>
41+
</div>
42+
<p className="text-blue-200 text-sm mt-6">
43+
✓ Aucune carte bancaire requise ✓ Accès complet immédiat ✓ Support inclus
44+
</p>
45+
</div>
46+
</section>
47+
);
48+
};

‎src/components/pricing/PricingFAQ.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
2+
import { Card, CardContent } from "@/components/ui/card";
3+
4+
export const PricingFAQ = () => {
5+
const faqs = [
6+
{
7+
q: "Pourquoi ne pas demander de carte bancaire à l'inscription ?",
8+
a: "Nous croyons en la confiance mutuelle. Vous pouvez tester RefSpring entièrement, créer des campagnes et voir les résultats avant de nous donner votre CB. La carte n'est demandée qu'à la création de votre première campagne."
9+
},
10+
{
11+
q: "Que se passe-t-il si je gagne moins de 20€ dans un mois ?",
12+
a: "Aucune facturation ! Le seuil de 20€ évite les micro-facturations et les frais Stripe disproportionnés. Vous ne payez rien ce mois-là."
13+
},
14+
{
15+
q: "Puis-je utiliser une carte différente pour chaque campagne ?",
16+
a: "Absolument ! Parfait si vous gérez plusieurs clients ou avez des comptes séparés. Chaque campagne peut avoir sa propre méthode de paiement."
17+
},
18+
{
19+
q: "Comment êtes-vous sûrs que 2,5% est rentable pour vous ?",
20+
a: "Nous avons optimisé nos coûts d'infrastructure et automatisé nos processus. Notre modèle fonctionne sur le volume : plus vous réussissez, plus nous réussissons ensemble."
21+
},
22+
{
23+
q: "Y a-t-il des frais cachés ?",
24+
a: "Zéro. Les 2,5% incluent tout : hébergement, support, mises à jour, analytics, API. Aucun frais de setup, d'export, ou premium."
25+
}
26+
];
27+
28+
return (
29+
<section className="py-24 px-4 sm:px-6 lg:px-8 bg-slate-50">
30+
<div className="max-w-4xl mx-auto">
31+
<div className="text-center mb-16">
32+
<h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-6">
33+
Questions fréquentes
34+
</h2>
35+
</div>
36+
37+
<div className="space-y-6">
38+
{faqs.map((faq, index) => (
39+
<Card key={index} className="bg-white shadow-lg hover:shadow-xl transition-all">
40+
<CardContent className="p-6">
41+
<h3 className="font-semibold text-slate-900 mb-3">{faq.q}</h3>
42+
<p className="text-slate-600 leading-relaxed">{faq.a}</p>
43+
</CardContent>
44+
</Card>
45+
))}
46+
</div>
47+
</div>
48+
</section>
49+
);
50+
};

‎src/components/pricing/PricingFooter.tsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
2+
import { Link } from "react-router-dom";
3+
import { Globe, TrendingUp } from "lucide-react";
4+
5+
export const PricingFooter = () => {
6+
return (
7+
<footer className="py-16 px-4 sm:px-6 lg:px-8 bg-slate-900 border-t border-slate-800">
8+
<div className="max-w-7xl mx-auto">
9+
<div className="grid md:grid-cols-5 gap-8">
10+
<div className="md:col-span-2">
11+
<div className="font-bold text-3xl text-white mb-4">RefSpring</div>
12+
<p className="text-slate-400 mb-6 leading-relaxed">
13+
La plateforme d'affiliation qui paie pour elle-même.
14+
Join the future of affiliate marketing.
15+
</p>
16+
<div className="flex gap-4">
17+
<div className="w-10 h-10 bg-slate-800 rounded-full flex items-center justify-center hover:bg-slate-700 transition-colors cursor-pointer">
18+
<Globe className="w-5 h-5 text-slate-400" />
19+
</div>
20+
<div className="w-10 h-10 bg-slate-800 rounded-full flex items-center justify-center hover:bg-slate-700 transition-colors cursor-pointer">
21+
<TrendingUp className="w-5 h-5 text-slate-400" />
22+
</div>
23+
</div>
24+
</div>
25+
<div>
26+
<h3 className="font-semibold text-white mb-4">Product</h3>
27+
<ul className="space-y-3 text-slate-400">
28+
<li><Link to="/#features" className="hover:text-white transition-colors">Fonctionnalités</Link></li>
29+
<li><Link to="/#dashboard" className="hover:text-white transition-colors">Dashboard</Link></li>
30+
<li><a href="#" className="hover:text-white transition-colors">API</a></li>
31+
<li><a href="#" className="hover:text-white transition-colors">Integrations</a></li>
32+
</ul>
33+
</div>
34+
<div>
35+
<h3 className="font-semibold text-white mb-4">Company</h3>
36+
<ul className="space-y-3 text-slate-400">
37+
<li><a href="#" className="hover:text-white transition-colors">About</a></li>
38+
<li><a href="#" className="hover:text-white transition-colors">Blog</a></li>
39+
<li><a href="#" className="hover:text-white transition-colors">Careers</a></li>
40+
<li><a href="#" className="hover:text-white transition-colors">Press</a></li>
41+
</ul>
42+
</div>
43+
<div>
44+
<h3 className="font-semibold text-white mb-4">Support</h3>
45+
<ul className="space-y-3 text-slate-400">
46+
<li><a href="#" className="hover:text-white transition-colors">Help Center</a></li>
47+
<li><a href="#" className="hover:text-white transition-colors">Contact</a></li>
48+
<li><a href="#" className="hover:text-white transition-colors">Status</a></li>
49+
<li><a href="#" className="hover:text-white transition-colors">Community</a></li>
50+
</ul>
51+
</div>
52+
</div>
53+
<div className="border-t border-slate-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
54+
<p className="text-slate-400">&copy; 2024 RefSpring. All rights reserved.</p>
55+
<div className="flex gap-6 mt-4 md:mt-0">
56+
<a href="#" className="text-slate-400 hover:text-white transition-colors">Privacy</a>
57+
<a href="#" className="text-slate-400 hover:text-white transition-colors">Terms</a>
58+
<a href="#" className="text-slate-400 hover:text-white transition-colors">Security</a>
59+
</div>
60+
</div>
61+
</div>
62+
</footer>
63+
);
64+
};

0 commit comments

Comments
 (0)