Skip to content

Commit c51d394

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Implement landing page improvements
Integrate pricing page elements into the landing page narrative, including the comparison table, calculator, transparency section, and key FAQs. Optimize the landing page flow.
1 parent 0a9a8ff commit c51d394

File tree

6 files changed

+349
-9
lines changed

6 files changed

+349
-9
lines changed

‎src/components/landing/ComparisonSection.tsx‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
2+
import { Check, X } from "lucide-react";
3+
import { Button } from "@/components/ui/button";
4+
5+
interface ComparisonSectionProps {
6+
onGetStarted: () => void;
7+
}
8+
9+
export const ComparisonSection = ({ onGetStarted }: ComparisonSectionProps) => {
10+
return (
11+
<section className="py-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-white to-slate-50">
12+
<div className="max-w-6xl mx-auto">
13+
<div className="text-center mb-16">
14+
<h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-6">
15+
Pourquoi payer avant de gagner ?
16+
</h2>
17+
<p className="text-xl text-slate-600 max-w-3xl mx-auto leading-relaxed">
18+
Comparez les modèles : nous sommes les seuls à ne facturer que sur vos réussites
19+
</p>
20+
</div>
21+
22+
<div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
23+
{/* Traditional Model */}
24+
<div className="bg-white border-2 border-slate-200 p-8 rounded-2xl shadow-lg">
25+
<div className="text-center mb-6">
26+
<div className="bg-slate-100 text-slate-600 px-4 py-2 rounded-full text-sm font-medium mb-4">
27+
Modèle traditionnel
28+
</div>
29+
<div className="text-4xl font-bold text-slate-600 mb-2">
30+
99-299€<span className="text-lg text-slate-500">/mois</span>
31+
</div>
32+
<p className="text-slate-500">+ commission variable</p>
33+
</div>
34+
<ul className="space-y-3 mb-6">
35+
<li className="flex items-center gap-3">
36+
<X className="w-5 h-5 text-red-500" />
37+
<span>Frais mensuels fixes</span>
38+
</li>
39+
<li className="flex items-center gap-3">
40+
<X className="w-5 h-5 text-red-500" />
41+
<span>Engagement contractuel</span>
42+
</li>
43+
<li className="flex items-center gap-3">
44+
<X className="w-5 h-5 text-red-500" />
45+
<span>Coûts même sans revenus</span>
46+
</li>
47+
<li className="flex items-center gap-3">
48+
<X className="w-5 h-5 text-red-500" />
49+
<span>Risque financier élevé</span>
50+
</li>
51+
</ul>
52+
</div>
53+
54+
{/* RefSpring */}
55+
<div className="bg-gradient-to-br from-green-50 to-blue-50 border-4 border-green-500 p-8 rounded-2xl shadow-2xl transform scale-105">
56+
<div className="text-center mb-6">
57+
<div className="bg-green-500 text-white px-4 py-2 rounded-full text-sm font-medium mb-4">
58+
RefSpring
59+
</div>
60+
<div className="text-4xl font-bold text-green-600 mb-2">
61+
0€<span className="text-lg text-slate-500">/mois</span>
62+
</div>
63+
<p className="text-slate-600">2,5% sur vos gains uniquement</p>
64+
</div>
65+
<ul className="space-y-3 mb-6">
66+
<li className="flex items-center gap-3">
67+
<Check className="w-5 h-5 text-green-500" />
68+
<span className="font-semibold">Aucun frais fixe</span>
69+
</li>
70+
<li className="flex items-center gap-3">
71+
<Check className="w-5 h-5 text-green-500" />
72+
<span className="font-semibold">Aucun engagement</span>
73+
</li>
74+
<li className="flex items-center gap-3">
75+
<Check className="w-5 h-5 text-green-500" />
76+
<span className="font-semibold">Payez seulement si vous gagnez</span>
77+
</li>
78+
<li className="flex items-center gap-3">
79+
<Check className="w-5 h-5 text-green-500" />
80+
<span className="font-semibold">Risque zéro</span>
81+
</li>
82+
</ul>
83+
<Button
84+
className="w-full bg-green-600 hover:bg-green-700 hover:scale-105 transition-all text-lg py-3"
85+
onClick={onGetStarted}
86+
>
87+
Commencer sans risque
88+
</Button>
89+
</div>
90+
</div>
91+
</div>
92+
</section>
93+
);
94+
};

‎src/components/landing/LandingFAQ.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
2+
import { Card, CardContent } from "@/components/ui/card";
3+
4+
export const LandingFAQ = () => {
5+
const faqs = [
6+
{
7+
q: "Pourquoi ne demandez-vous pas de carte bancaire à l'inscription ?",
8+
a: "Nous croyons en la confiance mutuelle. Testez RefSpring entièrement, créez des campagnes et voyez les résultats avant de nous donner votre CB. Elle 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. Vous ne payez rien ce mois-là, c'est aussi simple que ça."
13+
},
14+
{
15+
q: "Y a-t-il des frais cachés ou des limites ?",
16+
a: "Zéro. Les 2,5% incluent tout : hébergement, support, mises à jour, analytics, API. Aucun frais de setup, d'export, ou premium. Aucune limite de volume."
17+
},
18+
{
19+
q: "Combien de temps pour configurer ma première campagne ?",
20+
a: "15 minutes maximum. Créez votre compte, configurez votre campagne, générez vos liens de tracking, et c'est parti. Pas de validation manuelle ni d'attente."
21+
}
22+
];
23+
24+
return (
25+
<section className="py-24 px-4 sm:px-6 lg:px-8 bg-slate-50">
26+
<div className="max-w-4xl mx-auto">
27+
<div className="text-center mb-16">
28+
<h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-6">
29+
Questions fréquentes
30+
</h2>
31+
<p className="text-xl text-slate-600">
32+
Les réponses aux questions que se posent nos utilisateurs
33+
</p>
34+
</div>
35+
36+
<div className="space-y-6">
37+
{faqs.map((faq, index) => (
38+
<Card key={index} className="bg-white shadow-lg hover:shadow-xl transition-all border border-slate-200">
39+
<CardContent className="p-6">
40+
<h3 className="font-semibold text-slate-900 mb-3 text-lg">{faq.q}</h3>
41+
<p className="text-slate-600 leading-relaxed">{faq.a}</p>
42+
</CardContent>
43+
</Card>
44+
))}
45+
</div>
46+
</div>
47+
</section>
48+
);
49+
};

‎src/components/landing/SimpleCalculator.tsx‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
2+
import { Card, CardContent } from "@/components/ui/card";
3+
import { Calculator, TrendingUp } from "lucide-react";
4+
import { useState } from "react";
5+
6+
export const SimpleCalculator = () => {
7+
const [monthlyRevenue, setMonthlyRevenue] = useState(5000);
8+
9+
const competitorsCost = 199 + (monthlyRevenue * 0.08); // 199€/mois + 8% commission moyenne
10+
const refspringCost = monthlyRevenue >= 20 ? monthlyRevenue * 0.025 : 0;
11+
const savings = competitorsCost - refspringCost;
12+
13+
return (
14+
<section className="py-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-slate-50 to-white">
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 économies
20+
</h2>
21+
<p className="text-xl text-slate-600 max-w-3xl mx-auto leading-relaxed">
22+
Voyez immédiatement combien vous économisez avec notre modèle
23+
</p>
24+
</div>
25+
26+
<Card className="bg-white shadow-2xl border-2 border-slate-100">
27+
<CardContent className="p-8">
28+
<div className="mb-8">
29+
<label className="block text-lg font-semibold text-slate-900 mb-4">
30+
Vos revenus mensuels d'affiliation estimés
31+
</label>
32+
<div className="relative">
33+
<input
34+
type="range"
35+
min="0"
36+
max="25000"
37+
step="500"
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"
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-red-50 rounded-xl border border-red-100">
53+
<h3 className="font-semibold text-slate-900 mb-2">Autres plateformes</h3>
54+
<div className="text-2xl font-bold text-red-600 mb-1">
55+
{competitorsCost.toLocaleString('fr-FR')}€
56+
</div>
57+
<p className="text-sm text-slate-500">199€/mois + 8% 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% uniquement</p>
66+
</div>
67+
68+
<div className="text-center p-6 bg-blue-50 rounded-xl border border-blue-200">
69+
<TrendingUp className="w-8 h-8 text-blue-600 mx-auto mb-2" />
70+
<h3 className="font-semibold text-slate-900 mb-2">Vous économisez</h3>
71+
<div className="text-2xl font-bold text-blue-600 mb-1">
72+
{savings.toLocaleString('fr-FR')}€
73+
</div>
74+
<p className="text-sm text-slate-500">Par mois</p>
75+
</div>
76+
</div>
77+
78+
<div className="text-center p-6 bg-gradient-to-r from-green-600 to-blue-600 rounded-xl text-white">
79+
<h3 className="text-xl font-semibold mb-2">Sur 12 mois, vous économisez</h3>
80+
<div className="text-4xl font-bold mb-2">
81+
{(savings * 12).toLocaleString('fr-FR')}€
82+
</div>
83+
<p className="text-green-100">
84+
C'est ça la différence RefSpring
85+
</p>
86+
</div>
87+
</CardContent>
88+
</Card>
89+
</div>
90+
</section>
91+
);
92+
};

‎src/components/landing/TestimonialsSection.tsx‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,22 @@ export const TestimonialsSection = () => {
66
{
77
name: "Marie Laurent",
88
company: "TechFlow SaaS",
9-
revenue: "€45K",
10-
quote: "We went from €0 to €45K in affiliate revenue in 6 months. The fact that RefSpring only earns when we earn made the decision so easy.",
9+
revenue: "€12K",
10+
quote: "En 4 mois, je suis passée de 0€ à 12K€ de revenus d'affiliation. Le fait que RefSpring ne gagne que quand je gagne m'a convaincue immédiatement.",
1111
avatar: "ML"
1212
},
1313
{
1414
name: "Thomas Dubois",
1515
company: "EcoCommerce",
16-
revenue: "€78K",
17-
quote: "No monthly fees means we could test and scale without fear. Our affiliate program now generates more revenue than our direct sales.",
16+
revenue: "€28K",
17+
quote: "Fini les 299€/mois à payer sans savoir si ça va marcher. Mon programme d'affiliation génère maintenant plus que mes ventes directes.",
1818
avatar: "TD"
1919
},
2020
{
2121
name: "Sophie Chen",
2222
company: "FinanceApp",
23-
revenue: "€120K",
24-
quote: "RefSpring's transparent model aligned perfectly with our startup mindset. We only pay for actual results, not promises.",
23+
revenue: "€45K",
24+
quote: "Le modèle transparent de RefSpring correspond parfaitement à ma mentalité d'entrepreneur. Je paie seulement pour les résultats, pas pour des promesses.",
2525
avatar: "SC"
2626
}
2727
];
@@ -31,10 +31,10 @@ export const TestimonialsSection = () => {
3131
<div className="max-w-7xl mx-auto">
3232
<div className="text-center mb-16">
3333
<h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-6">
34-
Success stories that inspire
34+
Des entrepreneurs qui réussissent
3535
</h2>
3636
<p className="text-xl text-slate-600 max-w-3xl mx-auto">
37-
Real companies, real results, real revenue growth.
37+
Découvrez comment d'autres solo-preneurs et petites équipes développent leurs revenus avec RefSpring
3838
</p>
3939
</div>
4040

@@ -60,6 +60,12 @@ export const TestimonialsSection = () => {
6060
</div>
6161
))}
6262
</div>
63+
64+
<div className="text-center mt-12 p-6 bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl border border-blue-100">
65+
<p className="text-slate-600 text-lg">
66+
<strong>Rejoignez plus de 2 400+ entrepreneurs</strong> qui ont choisi un modèle équitable pour développer leurs revenus d'affiliation.
67+
</p>
68+
</div>
6369
</div>
6470
</section>
6571
);

‎src/components/landing/TransparencySection.tsx‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
2+
import { Check } from "lucide-react";
3+
4+
export const TransparencySection = () => {
5+
return (
6+
<section className="py-24 px-4 sm:px-6 lg:px-8 bg-white">
7+
<div className="max-w-6xl mx-auto">
8+
<div className="text-center mb-16">
9+
<h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-6">
10+
Comment fonctionnent nos 2,5% ?
11+
</h2>
12+
<p className="text-xl text-slate-600 max-w-3xl mx-auto leading-relaxed">
13+
Transparence totale : vous ne payez que si vous gagnez plus de 20€
14+
</p>
15+
</div>
16+
17+
<div className="grid md:grid-cols-2 gap-12 items-center">
18+
<div>
19+
<div className="space-y-6">
20+
<div className="flex items-start gap-4">
21+
<div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
22+
<span className="text-blue-600 font-bold text-sm">1</span>
23+
</div>
24+
<div>
25+
<h3 className="font-semibold text-slate-900 mb-2">Vos affiliés génèrent des ventes</h3>
26+
<p className="text-slate-600">Ils font des ventes, vous gagnez de l'argent grâce à vos commissions.</p>
27+
</div>
28+
</div>
29+
30+
<div className="flex items-start gap-4">
31+
<div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
32+
<span className="text-blue-600 font-bold text-sm">2</span>
33+
</div>
34+
<div>
35+
<h3 className="font-semibold text-slate-900 mb-2">Seuil de 20€ atteint ?</h3>
36+
<p className="text-slate-600">Si vous gagnez moins de 20€ dans le mois, nous ne facturons rien.</p>
37+
</div>
38+
</div>
39+
40+
<div className="flex items-start gap-4">
41+
<div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
42+
<span className="text-blue-600 font-bold text-sm">3</span>
43+
</div>
44+
<div>
45+
<h3 className="font-semibold text-slate-900 mb-2">Facturation automatique</h3>
46+
<p className="text-slate-600">Le 5 du mois suivant, facture de 2,5% sur vos gains du mois précédent.</p>
47+
</div>
48+
</div>
49+
50+
<div className="flex items-start gap-4">
51+
<div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
52+
<Check className="w-4 h-4 text-green-600" />
53+
</div>
54+
<div>
55+
<h3 className="font-semibold text-slate-900 mb-2">Vous gardez 97,5%</h3>
56+
<p className="text-slate-600">Le reste est entièrement pour vous. Aucun frais caché, jamais.</p>
57+
</div>
58+
</div>
59+
</div>
60+
</div>
61+
62+
<div className="bg-gradient-to-br from-slate-50 to-blue-50 p-8 rounded-2xl border border-slate-200">
63+
<h3 className="text-xl font-semibold text-slate-900 mb-6">Exemple concret</h3>
64+
<div className="space-y-4">
65+
<div className="flex justify-between items-center py-2">
66+
<span className="text-slate-600">Commissions générées en janvier</span>
67+
<span className="font-semibold text-slate-900">1 000€</span>
68+
</div>
69+
<div className="border-t border-slate-200 pt-2 flex justify-between items-center">
70+
<span className="text-slate-600">Notre fee (2,5%)</span>
71+
<span className="font-semibold text-red-500">- 25€</span>
72+
</div>
73+
<div className="border-t border-slate-200 pt-2 flex justify-between items-center">
74+
<span className="text-slate-900 font-semibold">Vous gardez</span>
75+
<span className="font-bold text-green-600 text-lg">975€</span>
76+
</div>
77+
<div className="bg-white p-4 rounded-lg border">
78+
<p className="text-sm text-slate-500">
79+
💳 Facturation le 5 février via Stripe
80+
<br />
81+
📊 Tableau de bord en temps réel
82+
<br />
83+
🔒 Sécurisé et transparent
84+
</p>
85+
</div>
86+
</div>
87+
</div>
88+
</div>
89+
</div>
90+
</section>
91+
);
92+
};

0 commit comments

Comments
 (0)