Skip to content

Commit 393091a

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Add comparison section to PricingHeader
Added the comparison section to the PricingHeader, including a title.
1 parent 75b79fa commit 393091a

File tree

2 files changed

+103
-11
lines changed

2 files changed

+103
-11
lines changed

‎src/components/pricing/PricingHeader.tsx‎

Lines changed: 102 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,111 @@
11

2-
import { Shield, Star } from "lucide-react";
2+
import { Shield, Star, Check, X } from "lucide-react";
3+
import { Button } from "@/components/ui/button";
34

4-
export const PricingHeader = () => {
5+
interface PricingHeaderProps {
6+
onGetStarted: () => void;
7+
}
8+
9+
export const PricingHeader = ({ onGetStarted }: PricingHeaderProps) => {
510
return (
611
<section className="h-screen flex items-center justify-center bg-gradient-to-br from-blue-50/50 via-white to-purple-50/50 relative">
7-
{/* Grid Pattern Background - same as hero section */}
12+
{/* Grid Pattern Background */}
813
<div className="absolute inset-0 bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:14px_24px] animate-pulse"></div>
914

10-
<div className="max-w-4xl mx-auto text-center relative z-10">
11-
<div className="inline-flex items-center gap-2 bg-gradient-to-r from-green-100 to-blue-100 text-green-800 px-6 py-3 rounded-full text-sm font-medium mb-8 border border-green-200/50 backdrop-blur-sm animate-scale-in">
12-
<Shield className="w-4 h-4" />
13-
Tarifs transparents
14-
<Star className="w-4 h-4 text-yellow-500" />
15+
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
16+
{/* Header with badge */}
17+
<div className="text-center mb-16">
18+
<div className="inline-flex items-center gap-2 bg-gradient-to-r from-green-100 to-blue-100 text-green-800 px-6 py-3 rounded-full text-sm font-medium mb-8 border border-green-200/50 backdrop-blur-sm animate-scale-in">
19+
<Shield className="w-4 h-4" />
20+
Tarifs transparents
21+
<Star className="w-4 h-4 text-yellow-500" />
22+
</div>
23+
24+
<h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-6">
25+
RefSpring vs les autres plateformes
26+
</h1>
27+
<p className="text-xl text-slate-600 max-w-3xl mx-auto leading-relaxed">
28+
Il y a RefSpring et il y a les autres, c'est tout
29+
</p>
30+
</div>
31+
32+
{/* Pricing Comparison */}
33+
<div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
34+
{/* Traditional Model - All Others */}
35+
<div className="bg-white border-2 border-slate-200 p-8 rounded-2xl shadow-lg">
36+
<div className="text-center mb-6">
37+
<div className="bg-slate-100 text-slate-600 px-4 py-2 rounded-full text-sm font-medium mb-4">
38+
Toutes les autres plateformes
39+
</div>
40+
<div className="text-4xl font-bold text-slate-600 mb-2">
41+
99-299€<span className="text-lg text-slate-500">/mois</span>
42+
</div>
43+
<p className="text-slate-500">+ commission variable</p>
44+
</div>
45+
<ul className="space-y-3 mb-6">
46+
<li className="flex items-center gap-3">
47+
<X className="w-5 h-5 text-red-500" />
48+
<span>Frais mensuels fixes</span>
49+
</li>
50+
<li className="flex items-center gap-3">
51+
<X className="w-5 h-5 text-red-500" />
52+
<span>Engagement contractuel</span>
53+
</li>
54+
<li className="flex items-center gap-3">
55+
<X className="w-5 h-5 text-red-500" />
56+
<span>Coûts même sans revenus</span>
57+
</li>
58+
<li className="flex items-center gap-3">
59+
<X className="w-5 h-5 text-red-500" />
60+
<span>Risque financier élevé</span>
61+
</li>
62+
<li className="flex items-center gap-3">
63+
<X className="w-5 h-5 text-red-500" />
64+
<span>Fonctionnalités bridées en freemium</span>
65+
</li>
66+
</ul>
67+
</div>
68+
69+
{/* RefSpring */}
70+
<div className="bg-gradient-to-br from-blue-50 to-purple-50 border-4 border-blue-500 p-8 rounded-2xl shadow-2xl transform scale-105">
71+
<div className="text-center mb-6">
72+
<div className="bg-blue-500 text-white px-4 py-2 rounded-full text-sm font-medium mb-4">
73+
RefSpring
74+
</div>
75+
<div className="text-4xl font-bold text-blue-600 mb-2">
76+
0€<span className="text-lg text-slate-500">/mois</span>
77+
</div>
78+
<p className="text-slate-600">2,5% sur vos gains uniquement</p>
79+
</div>
80+
<ul className="space-y-3 mb-6">
81+
<li className="flex items-center gap-3">
82+
<Check className="w-5 h-5 text-blue-500" />
83+
<span className="font-semibold">Aucun frais fixe</span>
84+
</li>
85+
<li className="flex items-center gap-3">
86+
<Check className="w-5 h-5 text-blue-500" />
87+
<span className="font-semibold">Aucun engagement</span>
88+
</li>
89+
<li className="flex items-center gap-3">
90+
<Check className="w-5 h-5 text-blue-500" />
91+
<span className="font-semibold">Payez seulement si vous gagnez</span>
92+
</li>
93+
<li className="flex items-center gap-3">
94+
<Check className="w-5 h-5 text-blue-500" />
95+
<span className="font-semibold">Risque zéro</span>
96+
</li>
97+
<li className="flex items-center gap-3">
98+
<Check className="w-5 h-5 text-blue-500" />
99+
<span className="font-semibold">Toutes les fonctionnalités incluses</span>
100+
</li>
101+
</ul>
102+
<Button
103+
className="w-full bg-blue-600 hover:bg-blue-700 hover:scale-105 transition-all text-lg py-3"
104+
onClick={onGetStarted}
105+
>
106+
Commencer maintenant
107+
</Button>
108+
</div>
15109
</div>
16110
</div>
17111
</section>

‎src/pages/PricingPage.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { useState, useEffect } from "react";
44
import { Helmet } from "react-helmet-async";
55
import { UnifiedHeader } from "@/components/shared/UnifiedHeader";
66
import { PricingHeader } from "@/components/pricing/PricingHeader";
7-
import { ComparisonSection } from "@/components/shared/ComparisonSection";
87
import { Calculator } from "@/components/shared/Calculator";
98
import { TransparencySection } from "@/components/shared/TransparencySection";
109
import { FAQ } from "@/components/shared/FAQ";
@@ -53,8 +52,7 @@ const PricingPage = () => {
5352

5453
{/* Main Content starts right after header */}
5554
<div className="pt-16">
56-
<PricingHeader />
57-
<ComparisonSection onGetStarted={redirectToDashboard} variant="pricing" />
55+
<PricingHeader onGetStarted={redirectToDashboard} />
5856
<Calculator variant="pricing" />
5957
<TransparencySection variant="pricing" />
6058
<FAQ variant="pricing" />

0 commit comments

Comments
 (0)