Skip to content

Commit aeb2d8b

Browse files
Refactor: Use shared footer and header components
Replaced `PricingFooter` with `LandingFooter` and `UnifiedHeader` with `LandingHeader` on the pricing page. Improved the cookie system and created "About" and "Contact" pages.
1 parent b6ebead commit aeb2d8b

File tree

9 files changed

+623
-60
lines changed

9 files changed

+623
-60
lines changed

src/App.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ import SecurityPage from '@/pages/SecurityPage';
1515
import StatusPage from '@/pages/StatusPage';
1616
import LandingPage from '@/pages/LandingPage';
1717
import PricingPage from '@/pages/PricingPage';
18+
import AboutPage from '@/pages/AboutPage';
19+
import ContactPage from '@/pages/ContactPage';
1820
import { Dashboard } from '@/components/Dashboard';
1921

2022
const Index = lazy(() => import('@/pages/Index'));
@@ -49,6 +51,8 @@ function App() {
4951
<Routes>
5052
<Route path="/" element={<LandingPage />} />
5153
<Route path="/pricing" element={<PricingPage />} />
54+
<Route path="/about" element={<AboutPage />} />
55+
<Route path="/contact" element={<ContactPage />} />
5256
<Route path="/app" element={<Index />} />
5357
<Route path="/dashboard" element={<Dashboard />} />
5458
<Route path="/campaign/:campaignId" element={<AdvancedStatsPage />} />

src/components/CookiePreferencesDialog.tsx

Lines changed: 58 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@ import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, D
55
import { Switch } from '@/components/ui/switch';
66
import { Label } from '@/components/ui/label';
77
import { useCookieConsent, CookiePreferences } from '@/hooks/useCookieConsent';
8-
import { Cookie, Shield, BarChart, Target } from 'lucide-react';
8+
import { Cookie, Shield, BarChart, Target, User, Calendar, Info } from 'lucide-react';
99

1010
interface CookiePreferencesDialogProps {
1111
open: boolean;
1212
onOpenChange: (open: boolean) => void;
1313
}
1414

1515
export const CookiePreferencesDialog = ({ open, onOpenChange }: CookiePreferencesDialogProps) => {
16-
const { preferences, updatePreferences, acceptAll, acceptNecessaryOnly } = useCookieConsent();
16+
const { preferences, updatePreferences, acceptAll, acceptNecessaryOnly, getConsentTimestamp } = useCookieConsent();
1717
const [localPreferences, setLocalPreferences] = useState<CookiePreferences>(preferences);
1818

1919
useEffect(() => {
@@ -35,16 +35,24 @@ export const CookiePreferencesDialog = ({ open, onOpenChange }: CookiePreference
3535
onOpenChange(false);
3636
};
3737

38+
const consentDate = getConsentTimestamp();
39+
3840
return (
3941
<Dialog open={open} onOpenChange={onOpenChange}>
40-
<DialogContent className="sm:max-w-[500px] max-h-[80vh] overflow-y-auto">
42+
<DialogContent className="sm:max-w-[600px] max-h-[90vh] overflow-y-auto">
4143
<DialogHeader>
4244
<DialogTitle className="flex items-center gap-2">
4345
<Cookie className="h-5 w-5" />
4446
Préférences des cookies
4547
</DialogTitle>
4648
<DialogDescription>
4749
Gérez vos préférences de cookies. Vous pouvez modifier ces paramètres à tout moment.
50+
{consentDate && (
51+
<div className="flex items-center gap-1 mt-2 text-xs text-slate-500">
52+
<Calendar className="h-3 w-3" />
53+
Dernière mise à jour : {consentDate.toLocaleDateString('fr-FR')}
54+
</div>
55+
)}
4856
</DialogDescription>
4957
</DialogHeader>
5058

@@ -59,8 +67,11 @@ export const CookiePreferencesDialog = ({ open, onOpenChange }: CookiePreference
5967
<Switch checked={true} disabled />
6068
</div>
6169
<p className="text-sm text-slate-600 ml-6">
62-
Ces cookies sont essentiels au fonctionnement du site. Ils permettent des fonctionnalités de base comme la navigation et l'accès aux zones sécurisées.
70+
Ces cookies sont essentiels au fonctionnement du site. Ils permettent des fonctionnalités de base comme la navigation, l'accès aux zones sécurisées et la mémorisation de vos préférences.
6371
</p>
72+
<div className="ml-6 text-xs text-slate-500">
73+
Exemples : authentification, panier, préférences de langue
74+
</div>
6475
</div>
6576

6677
{/* Cookies d'analyse */}
@@ -79,8 +90,11 @@ export const CookiePreferencesDialog = ({ open, onOpenChange }: CookiePreference
7990
/>
8091
</div>
8192
<p className="text-sm text-slate-600 ml-6">
82-
Ces cookies nous aident à comprendre comment vous utilisez notre site en collectant des informations anonymes sur votre navigation.
93+
Ces cookies nous aident à comprendre comment vous utilisez notre site en collectant des informations anonymes sur votre navigation et vos interactions.
8394
</p>
95+
<div className="ml-6 text-xs text-slate-500">
96+
Services : Google Analytics, Hotjar, statistiques de performance
97+
</div>
8498
</div>
8599

86100
{/* Cookies marketing */}
@@ -99,7 +113,45 @@ export const CookiePreferencesDialog = ({ open, onOpenChange }: CookiePreference
99113
/>
100114
</div>
101115
<p className="text-sm text-slate-600 ml-6">
102-
Ces cookies sont utilisés pour vous proposer des publicités pertinentes et mesurer l'efficacité de nos campagnes marketing.
116+
Ces cookies sont utilisés pour vous proposer des publicités pertinentes et mesurer l'efficacité de nos campagnes marketing sur différentes plateformes.
117+
</p>
118+
<div className="ml-6 text-xs text-slate-500">
119+
Services : Facebook Pixel, Google Ads, LinkedIn Insight Tag
120+
</div>
121+
</div>
122+
123+
{/* Cookies de personnalisation */}
124+
<div className="space-y-3">
125+
<div className="flex items-center justify-between">
126+
<div className="flex items-center gap-2">
127+
<User className="h-4 w-4 text-orange-600" />
128+
<Label htmlFor="personalization" className="font-medium">Cookies de personnalisation</Label>
129+
</div>
130+
<Switch
131+
id="personalization"
132+
checked={localPreferences.personalization}
133+
onCheckedChange={(checked) =>
134+
setLocalPreferences(prev => ({ ...prev, personalization: checked }))
135+
}
136+
/>
137+
</div>
138+
<p className="text-sm text-slate-600 ml-6">
139+
Ces cookies permettent de personnaliser votre expérience en mémorisant vos préférences et en adaptant le contenu à vos intérêts.
140+
</p>
141+
<div className="ml-6 text-xs text-slate-500">
142+
Fonctionnalités : recommandations, interface personnalisée, historique de navigation
143+
</div>
144+
</div>
145+
146+
{/* Informations légales */}
147+
<div className="bg-slate-50 p-4 rounded-lg">
148+
<div className="flex items-center gap-2 mb-2">
149+
<Info className="h-4 w-4 text-slate-600" />
150+
<span className="text-sm font-medium text-slate-900">Vos droits</span>
151+
</div>
152+
<p className="text-xs text-slate-600">
153+
Conformément au RGPD, vous avez le droit de retirer votre consentement à tout moment.
154+
Vos préférences sont sauvegardées pour 1 an, après quoi nous vous demanderons à nouveau votre consentement.
103155
</p>
104156
</div>
105157
</div>

src/components/landing/LandingFooter.tsx

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
12
import { Globe, TrendingUp, Github } from "lucide-react";
23
import { Link } from "react-router-dom";
34

@@ -32,22 +33,24 @@ export const LandingFooter = () => {
3233
<div>
3334
<h3 className="font-semibold text-white mb-4">Product</h3>
3435
<ul className="space-y-3 text-slate-400">
35-
<li><a href="#features" className="hover:text-white transition-colors">Fonctionnalités</a></li>
36-
<li><a href="#dashboard" className="hover:text-white transition-colors">Dashboard</a></li>
36+
<li><Link to="/#features" className="hover:text-white transition-colors">Fonctionnalités</Link></li>
37+
<li><Link to="/pricing" className="hover:text-white transition-colors">Tarifs</Link></li>
38+
<li><Link to="/#dashboard" className="hover:text-white transition-colors">Dashboard</Link></li>
3739
</ul>
3840
</div>
3941
<div>
4042
<h3 className="font-semibold text-white mb-4">Company</h3>
4143
<ul className="space-y-3 text-slate-400">
42-
<li><a href="#" className="hover:text-white transition-colors">About</a></li>
44+
<li><Link to="/about" className="hover:text-white transition-colors">À propos</Link></li>
45+
<li><Link to="/contact" className="hover:text-white transition-colors">Contact</Link></li>
4346
<li><a href="#" className="hover:text-white transition-colors">Careers</a></li>
4447
</ul>
4548
</div>
4649
<div>
4750
<h3 className="font-semibold text-white mb-4">Support</h3>
4851
<ul className="space-y-3 text-slate-400">
49-
<li><a href="#" className="hover:text-white transition-colors">Help Center</a></li>
50-
<li><a href="#" className="hover:text-white transition-colors">Contact</a></li>
52+
<li><Link to="/contact" className="hover:text-white transition-colors">Help Center</Link></li>
53+
<li><Link to="/contact" className="hover:text-white transition-colors">Contact</Link></li>
5154
<li><Link to="/status" className="hover:text-white transition-colors">Status</Link></li>
5255
</ul>
5356
</div>

src/components/landing/LandingHeader.tsx

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { Button } from "@/components/ui/button";
33
import { ArrowRight } from "lucide-react";
44
import { RefSpringLogo } from "@/components/RefSpringLogo";
5+
import { Link } from "react-router-dom";
56

67
interface LandingHeaderProps {
78
onRedirectToDashboard: () => void;
@@ -12,23 +13,23 @@ export const LandingHeader = ({ onRedirectToDashboard }: LandingHeaderProps) =>
1213
<header className="fixed top-0 w-full border-b border-slate-200/80 bg-white/90 backdrop-blur-xl z-50 transition-all">
1314
<div className="w-full px-4 sm:px-6 lg:px-8">
1415
<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+
<Link to="/" className="flex items-center gap-2 animate-fade-in hover:opacity-80 transition-opacity">
1617
<RefSpringLogo width="32" height="32" />
1718
<div className="font-bold text-2xl text-slate-900">RefSpring</div>
18-
</a>
19+
</Link>
1920
<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+
<Link to="/#features" className="text-slate-600 hover:text-slate-900 font-medium transition-all hover:scale-105">
2122
Fonctionnalités
22-
</a>
23-
<a href="/pricing" className="text-slate-600 hover:text-slate-900 font-medium transition-all hover:scale-105">
23+
</Link>
24+
<Link to="/pricing" className="text-slate-600 hover:text-slate-900 font-medium transition-all hover:scale-105">
2425
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>
26+
</Link>
27+
<Link to="/about" className="text-slate-600 hover:text-slate-900 font-medium transition-all hover:scale-105">
28+
À propos
29+
</Link>
30+
<Link to="/contact" className="text-slate-600 hover:text-slate-900 font-medium transition-all hover:scale-105">
31+
Contact
32+
</Link>
3233
</nav>
3334
<div className="flex items-center gap-3">
3435
<Button variant="outline" className="hidden md:flex hover:scale-105 transition-transform" onClick={onRedirectToDashboard}>

0 commit comments

Comments
 (0)