Skip to content

Commit cf6fc45

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Refactor: Split LandingPage into components
Refactors `src/pages/LandingPage.tsx` into smaller, reusable components: Header, Hero, Story, Dashboard Preview, Testimonials, Features, Stats, CTA, and Footer.
1 parent 0e0af55 commit cf6fc45

File tree

10 files changed

+560
-478
lines changed

10 files changed

+560
-478
lines changed

‎src/components/landing/CTASection.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
2+
import { Button } from "@/components/ui/button";
3+
import { ArrowRight, Clock } from "lucide-react";
4+
5+
interface CTASectionProps {
6+
onRedirectToDashboard: () => void;
7+
}
8+
9+
export const CTASection = ({ onRedirectToDashboard }: CTASectionProps) => {
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+
Your competition is already here
19+
</h2>
20+
<p className="text-xl text-blue-100 mb-8 max-w-2xl mx-auto leading-relaxed">
21+
While others pay monthly fees for uncertain results, smart companies are already earning with RefSpring's
22+
performance-based model. Don't let them get ahead.
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={onRedirectToDashboard}
30+
>
31+
Start earning now
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+
onClick={onRedirectToDashboard}
39+
>
40+
See live demo
41+
</Button>
42+
</div>
43+
</div>
44+
</section>
45+
);
46+
};

‎src/components/landing/DashboardPreview.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
2+
import { TrendingUp, Users, BarChart3 } from "lucide-react";
3+
4+
export const DashboardPreview = () => {
5+
return (
6+
<section id="dashboard" className="py-24 px-4 sm:px-6 lg:px-8 bg-slate-900">
7+
<div className="max-w-7xl mx-auto">
8+
<div className="text-center mb-16">
9+
<h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
10+
Votre command center attend
11+
</h2>
12+
<p className="text-xl text-slate-300 max-w-3xl mx-auto">
13+
Un dashboard aussi intuitif que vous ne l'avez jamais eu.
14+
</p>
15+
</div>
16+
17+
{/* Mock Dashboard Preview */}
18+
<div className="relative max-w-5xl mx-auto">
19+
<div className="bg-gradient-to-br from-slate-800 to-slate-900 p-8 rounded-3xl shadow-2xl border border-slate-700">
20+
<div className="bg-white rounded-2xl p-6 shadow-xl">
21+
<div className="flex items-center gap-3 mb-6">
22+
<div className="w-3 h-3 bg-red-500 rounded-full"></div>
23+
<div className="w-3 h-3 bg-yellow-500 rounded-full"></div>
24+
<div className="w-3 h-3 bg-green-500 rounded-full"></div>
25+
<div className="ml-auto text-sm text-slate-500">dashboard.refspring.com</div>
26+
</div>
27+
28+
<div className="grid md:grid-cols-3 gap-6 mb-8">
29+
<div className="bg-gradient-to-br from-blue-50 to-blue-100 p-6 rounded-xl">
30+
<div className="flex items-center gap-3 mb-2">
31+
<TrendingUp className="w-8 h-8 text-blue-600" />
32+
<div className="text-2xl font-bold text-slate-900">€12,847</div>
33+
</div>
34+
<div className="text-sm text-slate-600">This month's revenue</div>
35+
</div>
36+
<div className="bg-gradient-to-br from-green-50 to-green-100 p-6 rounded-xl">
37+
<div className="flex items-center gap-3 mb-2">
38+
<Users className="w-8 h-8 text-green-600" />
39+
<div className="text-2xl font-bold text-slate-900">847</div>
40+
</div>
41+
<div className="text-sm text-slate-600">Active affiliates</div>
42+
</div>
43+
<div className="bg-gradient-to-br from-purple-50 to-purple-100 p-6 rounded-xl">
44+
<div className="flex items-center gap-3 mb-2">
45+
<BarChart3 className="w-8 h-8 text-purple-600" />
46+
<div className="text-2xl font-bold text-slate-900">+23%</div>
47+
</div>
48+
<div className="text-sm text-slate-600">Growth this week</div>
49+
</div>
50+
</div>
51+
52+
<div className="h-32 bg-gradient-to-r from-blue-100 via-purple-100 to-pink-100 rounded-xl flex items-center justify-center">
53+
<div className="text-slate-600 font-medium">Interactive Analytics Dashboard</div>
54+
</div>
55+
</div>
56+
</div>
57+
</div>
58+
</div>
59+
</section>
60+
);
61+
};

‎src/components/landing/FeaturesSection.tsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
2+
import { Zap, Users, BarChart3, Shield } from "lucide-react";
3+
4+
export const FeaturesSection = () => {
5+
const features = [
6+
{
7+
icon: <Zap className="h-10 w-10 text-blue-600" />,
8+
title: "Lightning Fast",
9+
description: "Set up your affiliate program in minutes, not weeks. One-click deployment.",
10+
metric: "3 min setup"
11+
},
12+
{
13+
icon: <Users className="h-10 w-10 text-green-600" />,
14+
title: "Smart Recruitment",
15+
description: "AI-powered affiliate matching. Find and onboard top performers automatically.",
16+
metric: "847 affiliates"
17+
},
18+
{
19+
icon: <BarChart3 className="h-10 w-10 text-purple-600" />,
20+
title: "Real-time Analytics",
21+
description: "Track performance with crystal-clear insights. Know what's working instantly.",
22+
metric: "Live tracking"
23+
},
24+
{
25+
icon: <Shield className="h-10 w-10 text-orange-600" />,
26+
title: "Fraud Protection",
27+
description: "Advanced AI security to protect against fraudulent activities and fake traffic.",
28+
metric: "99.9% accuracy"
29+
}
30+
];
31+
32+
return (
33+
<section id="features" className="py-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-slate-50 to-blue-50">
34+
<div className="max-w-7xl mx-auto">
35+
<div className="text-center mb-16">
36+
<h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-6">
37+
Everything you need to dominate
38+
</h2>
39+
<p className="text-xl text-slate-600 max-w-2xl mx-auto">
40+
Powerful tools designed to help you build and manage successful affiliate programs at scale.
41+
</p>
42+
</div>
43+
44+
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
45+
{features.map((feature, index) => (
46+
<div key={index} className="group p-8 rounded-2xl bg-white hover:bg-gradient-to-br hover:from-white hover:to-slate-50 transition-all hover:scale-105 shadow-lg hover:shadow-xl border border-slate-100">
47+
<div className="mb-6 transform group-hover:scale-110 transition-transform">{feature.icon}</div>
48+
<h3 className="text-xl font-bold text-slate-900 mb-3">{feature.title}</h3>
49+
<p className="text-slate-600 mb-4 leading-relaxed">{feature.description}</p>
50+
<div className="text-sm font-bold text-blue-600">{feature.metric}</div>
51+
</div>
52+
))}
53+
</div>
54+
</div>
55+
</section>
56+
);
57+
};

‎src/components/landing/HeroSection.tsx‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
2+
import { Button } from "@/components/ui/button";
3+
import { ArrowRight, CheckCircle, Star, DollarSign, TrendingUp, Zap, Globe } from "lucide-react";
4+
5+
interface HeroSectionProps {
6+
scrollY: number;
7+
onRedirectToDashboard: () => void;
8+
}
9+
10+
export const HeroSection = ({ scrollY, onRedirectToDashboard }: HeroSectionProps) => {
11+
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">
13+
{/* Animated Grid Background */}
14+
<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>
15+
16+
{/* Floating Icons */}
17+
<div className="absolute inset-0 pointer-events-none">
18+
<DollarSign
19+
className="absolute top-1/4 left-1/4 w-8 h-8 text-green-500/20 animate-bounce"
20+
style={{ animationDelay: '0s', animationDuration: '3s' }}
21+
/>
22+
<TrendingUp
23+
className="absolute top-1/3 right-1/3 w-6 h-6 text-blue-500/20 animate-bounce"
24+
style={{ animationDelay: '1s', animationDuration: '4s' }}
25+
/>
26+
<Zap
27+
className="absolute bottom-1/3 left-1/5 w-7 h-7 text-purple-500/20 animate-bounce"
28+
style={{ animationDelay: '2s', animationDuration: '3.5s' }}
29+
/>
30+
<Globe
31+
className="absolute top-1/5 right-1/5 w-9 h-9 text-indigo-500/20 animate-bounce"
32+
style={{ animationDelay: '0.5s', animationDuration: '4.5s' }}
33+
/>
34+
</div>
35+
36+
<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">
38+
{/* 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">
40+
<CheckCircle className="w-4 h-4" />
41+
0€ de frais mensuels • Rémunération sur performance uniquement
42+
<Star className="w-4 h-4 text-yellow-500" />
43+
</div>
44+
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
47+
<br />
48+
<span className="bg-gradient-to-r from-blue-600 via-purple-600 to-blue-800 bg-clip-text text-transparent animate-pulse">
49+
qui paie pour elle-même
50+
</span>
51+
</h1>
52+
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' }}>
54+
<strong>Modèle basé sur les revenus :</strong>
55+
<br />
56+
<span className="text-slate-900 font-semibold">Accès gratuit, nous gagnons seulement quand vous gagnez.</span>
57+
</p>
58+
59+
{/* Value props with animations */}
60+
<div className="flex flex-wrap justify-center gap-6 mb-12">
61+
{[
62+
{ icon: CheckCircle, text: "0€ de frais d'installation", delay: "0.3s" },
63+
{ icon: CheckCircle, text: "0€ d'abonnement mensuel", delay: "0.4s" },
64+
{ icon: CheckCircle, text: "Accès complet à la plateforme", delay: "0.5s" }
65+
].map((item, index) => (
66+
<div
67+
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"
69+
style={{ animationDelay: item.delay }}
70+
>
71+
<item.icon className="w-5 h-5 text-green-600" />
72+
<span className="text-slate-700 font-medium">{item.text}</span>
73+
</div>
74+
))}
75+
</div>
76+
77+
<div className="flex flex-col sm:flex-row gap-6 justify-center animate-fade-in" style={{ animationDelay: '0.6s' }}>
78+
<Button
79+
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"
81+
onClick={onRedirectToDashboard}
82+
>
83+
Commencer à gagner dès aujourd'hui
84+
<ArrowRight className="ml-2 h-5 w-5" />
85+
</Button>
86+
<Button
87+
size="lg"
88+
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"
90+
onClick={onRedirectToDashboard}
91+
>
92+
Voir comment ça marche
93+
</Button>
94+
</div>
95+
96+
{/* Social proof with animation */}
97+
<div className="mt-16 pt-8 border-t border-slate-200/50 animate-fade-in" style={{ animationDelay: '0.8s' }}>
98+
<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>
107+
</div>
108+
</div>
109+
</div>
110+
</div>
111+
</section>
112+
);
113+
};

‎src/components/landing/LandingFooter.tsx‎

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

‎src/components/landing/LandingHeader.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
2+
import { Button } from "@/components/ui/button";
3+
import { ArrowRight } from "lucide-react";
4+
import { RefSpringLogo } from "@/components/RefSpringLogo";
5+
6+
interface LandingHeaderProps {
7+
onRedirectToDashboard: () => void;
8+
}
9+
10+
export const LandingHeader = ({ onRedirectToDashboard }: LandingHeaderProps) => {
11+
return (
12+
<header className="fixed top-0 w-full border-b border-slate-200/80 bg-white/90 backdrop-blur-xl z-50 transition-all">
13+
<div className="w-full px-4 sm:px-6 lg:px-8">
14+
<div className="flex justify-between items-center h-16">
15+
<a href="/" className="flex items-center gap-2 animate-fade-in hover:opacity-80 transition-opacity">
16+
<RefSpringLogo width="32" height="32" />
17+
<div className="font-bold text-2xl text-slate-900">RefSpring</div>
18+
</a>
19+
<nav className="hidden md:flex space-x-8" role="navigation" aria-label="Navigation principale">
20+
<a href="#features" className="text-slate-600 hover:text-slate-900 font-medium transition-all hover:scale-105">
21+
Fonctionnalités
22+
</a>
23+
<a href="/pricing" className="text-slate-600 hover:text-slate-900 font-medium transition-all hover:scale-105">
24+
Tarifs
25+
</a>
26+
<a href="#dashboard" className="text-slate-600 hover:text-slate-900 font-medium transition-all hover:scale-105">
27+
Dashboard
28+
</a>
29+
<a href="#testimonials" className="text-slate-600 hover:text-slate-900 font-medium transition-all hover:scale-105">
30+
Témoignages
31+
</a>
32+
</nav>
33+
<div className="flex items-center gap-3">
34+
<Button variant="outline" className="hidden md:flex hover:scale-105 transition-transform" onClick={onRedirectToDashboard}>
35+
Se connecter
36+
</Button>
37+
<Button
38+
className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-semibold px-6 py-2 shadow-lg hover:shadow-xl hover:scale-105 transition-all animate-pulse"
39+
onClick={onRedirectToDashboard}
40+
>
41+
Commencer gratuitement
42+
<ArrowRight className="ml-2 h-4 w-4" />
43+
</Button>
44+
</div>
45+
</div>
46+
</div>
47+
</header>
48+
);
49+
};

0 commit comments

Comments
 (0)