Skip to content

Commit d18434d

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Refactor hero section spacing
Adjust spacing in the hero section for better visual breathing room.
1 parent cf6fc45 commit d18434d

File tree

1 file changed

+22
-22
lines changed

1 file changed

+22
-22
lines changed

‎src/components/landing/HeroSection.tsx‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ interface HeroSectionProps {
99

1010
export const HeroSection = ({ scrollY, onRedirectToDashboard }: HeroSectionProps) => {
1111
return (
12-
<section className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50/50 via-white to-purple-50/50 relative">
12+
<section className="pt-20 pb-16 flex items-center justify-center bg-gradient-to-br from-blue-50/50 via-white to-purple-50/50 relative">
1313
{/* Animated Grid Background */}
1414
<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>
1515

@@ -34,50 +34,50 @@ export const HeroSection = ({ scrollY, onRedirectToDashboard }: HeroSectionProps
3434
</div>
3535

3636
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
37-
<div className="animate-fade-in">
37+
<div className="animate-fade-in space-y-8">
3838
{/* Badge */}
39-
<div className="inline-flex items-center gap-2 bg-gradient-to-r from-blue-100 to-purple-100 text-blue-800 px-6 py-3 rounded-full text-sm font-medium mb-8 border border-blue-200/50 backdrop-blur-sm animate-scale-in">
39+
<div className="inline-flex items-center gap-2 bg-gradient-to-r from-blue-100 to-purple-100 text-blue-800 px-6 py-3 rounded-full text-sm font-medium border border-blue-200/50 backdrop-blur-sm animate-scale-in">
4040
<CheckCircle className="w-4 h-4" />
4141
0€ de frais mensuels • Rémunération sur performance uniquement
4242
<Star className="w-4 h-4 text-yellow-500" />
4343
</div>
4444

45-
<h1 className="text-6xl md:text-8xl font-bold text-slate-900 leading-tight mb-8 animate-fade-in">
46-
La plateforme d'affiliation
45+
<h1 className="text-5xl md:text-7xl lg:text-8xl font-bold text-slate-900 leading-tight">
46+
Enfin une plateforme
4747
<br />
4848
<span className="bg-gradient-to-r from-blue-600 via-purple-600 to-blue-800 bg-clip-text text-transparent animate-pulse">
4949
qui paie pour elle-même
5050
</span>
5151
</h1>
5252

53-
<p className="text-xl md:text-2xl text-slate-600 mb-12 max-w-4xl mx-auto leading-relaxed animate-fade-in" style={{ animationDelay: '0.2s' }}>
53+
<p className="text-lg md:text-xl lg:text-2xl text-slate-600 max-w-4xl mx-auto leading-relaxed" style={{ animationDelay: '0.2s' }}>
5454
<strong>Modèle basé sur les revenus :</strong>
5555
<br />
5656
<span className="text-slate-900 font-semibold">Accès gratuit, nous gagnons seulement quand vous gagnez.</span>
5757
</p>
5858

5959
{/* Value props with animations */}
60-
<div className="flex flex-wrap justify-center gap-6 mb-12">
60+
<div className="flex flex-wrap justify-center gap-4 lg:gap-6">
6161
{[
6262
{ icon: CheckCircle, text: "0€ de frais d'installation", delay: "0.3s" },
6363
{ icon: CheckCircle, text: "0€ d'abonnement mensuel", delay: "0.4s" },
6464
{ icon: CheckCircle, text: "Accès complet à la plateforme", delay: "0.5s" }
6565
].map((item, index) => (
6666
<div
6767
key={index}
68-
className="flex items-center gap-2 bg-white/80 backdrop-blur-sm px-6 py-3 rounded-full border border-slate-200 hover:scale-105 transition-all animate-fade-in shadow-lg"
68+
className="flex items-center gap-2 bg-white/80 backdrop-blur-sm px-4 py-2 lg:px-6 lg:py-3 rounded-full border border-slate-200 hover:scale-105 transition-all animate-fade-in shadow-lg"
6969
style={{ animationDelay: item.delay }}
7070
>
71-
<item.icon className="w-5 h-5 text-green-600" />
72-
<span className="text-slate-700 font-medium">{item.text}</span>
71+
<item.icon className="w-4 h-4 lg:w-5 lg:h-5 text-green-600" />
72+
<span className="text-sm lg:text-base text-slate-700 font-medium">{item.text}</span>
7373
</div>
7474
))}
7575
</div>
7676

77-
<div className="flex flex-col sm:flex-row gap-6 justify-center animate-fade-in" style={{ animationDelay: '0.6s' }}>
77+
<div className="flex flex-col sm:flex-row gap-4 lg:gap-6 justify-center" style={{ animationDelay: '0.6s' }}>
7878
<Button
7979
size="lg"
80-
className="text-lg px-12 py-6 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 shadow-2xl hover:shadow-3xl transition-all hover:scale-105 border-0 text-white"
80+
className="text-lg px-8 py-4 lg:px-12 lg:py-6 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 shadow-2xl hover:shadow-3xl transition-all hover:scale-105 border-0 text-white"
8181
onClick={onRedirectToDashboard}
8282
>
8383
Commencer à gagner dès aujourd'hui
@@ -86,24 +86,24 @@ export const HeroSection = ({ scrollY, onRedirectToDashboard }: HeroSectionProps
8686
<Button
8787
size="lg"
8888
variant="outline"
89-
className="text-lg px-12 py-6 border-2 hover:bg-slate-50 shadow-lg hover:scale-105 transition-all backdrop-blur-sm"
89+
className="text-lg px-8 py-4 lg:px-12 lg:py-6 border-2 hover:bg-slate-50 shadow-lg hover:scale-105 transition-all backdrop-blur-sm"
9090
onClick={onRedirectToDashboard}
9191
>
9292
Voir comment ça marche
9393
</Button>
9494
</div>
9595

9696
{/* Social proof with animation */}
97-
<div className="mt-16 pt-8 border-t border-slate-200/50 animate-fade-in" style={{ animationDelay: '0.8s' }}>
97+
<div className="pt-12 border-t border-slate-200/50" style={{ animationDelay: '0.8s' }}>
9898
<p className="text-slate-500 text-sm mb-6">Adopté par les entreprises qui veulent des résultats, pas des factures récurrentes</p>
99-
<div className="flex justify-center items-center gap-8 opacity-70">
100-
<div className="text-3xl font-bold text-slate-600 hover:text-blue-600 transition-colors">50M€+</div>
101-
<div className="w-px h-8 bg-slate-300"></div>
102-
<div className="text-lg font-medium text-slate-500">Générés</div>
103-
<div className="w-px h-8 bg-slate-300"></div>
104-
<div className="text-3xl font-bold text-green-600">0€</div>
105-
<div className="w-px h-8 bg-slate-300"></div>
106-
<div className="text-lg font-medium text-slate-500">D'avance</div>
99+
<div className="flex justify-center items-center gap-6 lg:gap-8 opacity-70">
100+
<div className="text-2xl lg:text-3xl font-bold text-slate-600 hover:text-blue-600 transition-colors">50M€+</div>
101+
<div className="w-px h-6 lg:h-8 bg-slate-300"></div>
102+
<div className="text-base lg:text-lg font-medium text-slate-500">Générés</div>
103+
<div className="w-px h-6 lg:h-8 bg-slate-300"></div>
104+
<div className="text-2xl lg:text-3xl font-bold text-green-600">0€</div>
105+
<div className="w-px h-6 lg:h-8 bg-slate-300"></div>
106+
<div className="text-base lg:text-lg font-medium text-slate-500">D'avance</div>
107107
</div>
108108
</div>
109109
</div>

0 commit comments

Comments
 (0)