Skip to content

Commit 75b79fa

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Fix: Use consistent header across pages
Use the same header component on the pricing page as the landing page.
1 parent 5bbfcce commit 75b79fa

4 files changed

Lines changed: 62 additions & 34 deletions

File tree

‎src/components/pricing/PricingHeader.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Shield, Star } from "lucide-react";
33

44
export const PricingHeader = () => {
55
return (
6-
<section className="py-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50/50 via-white to-purple-50/50 relative">
6+
<section className="h-screen flex items-center justify-center bg-gradient-to-br from-blue-50/50 via-white to-purple-50/50 relative">
77
{/* Grid Pattern Background - same as hero section */}
88
<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>
99

‎src/components/shared/UnifiedHeader.tsx‎

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

‎src/pages/LandingPage.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useEffect, useState } from "react";
22
import { Helmet } from "react-helmet-async";
3-
import { LandingHeader } from "@/components/landing/LandingHeader";
3+
import { UnifiedHeader } from "@/components/shared/UnifiedHeader";
44
import { HeroSection } from "@/components/landing/HeroSection";
55
import { StorySection } from "@/components/landing/StorySection";
66
import { DashboardPreview } from "@/components/landing/DashboardPreview";
@@ -12,7 +12,7 @@ import { LandingFooter } from "@/components/landing/LandingFooter";
1212

1313
const LandingPage = () => {
1414
const [scrollY, setScrollY] = useState(0);
15-
15+
1616
useEffect(() => {
1717
const handleScroll = () => setScrollY(window.scrollY);
1818
window.addEventListener('scroll', handleScroll);
@@ -111,7 +111,7 @@ const LandingPage = () => {
111111
></div>
112112
</div>
113113

114-
<LandingHeader onRedirectToDashboard={redirectToDashboard} />
114+
<UnifiedHeader onRedirectToDashboard={redirectToDashboard} currentPage="landing" />
115115
<HeroSection scrollY={scrollY} onRedirectToDashboard={redirectToDashboard} />
116116
<StorySection />
117117
<DashboardPreview />

‎src/pages/PricingPage.tsx‎

Lines changed: 2 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22
import { Button } from "@/components/ui/button";
33
import { useState, useEffect } from "react";
44
import { Helmet } from "react-helmet-async";
5-
import { RefSpringLogo } from "@/components/RefSpringLogo";
6-
import { Link } from "react-router-dom";
5+
import { UnifiedHeader } from "@/components/shared/UnifiedHeader";
76
import { PricingHeader } from "@/components/pricing/PricingHeader";
87
import { ComparisonSection } from "@/components/shared/ComparisonSection";
98
import { Calculator } from "@/components/shared/Calculator";
@@ -50,34 +49,7 @@ const PricingPage = () => {
5049
></div>
5150
</div>
5251

53-
{/* Header */}
54-
<header className="fixed top-0 w-full border-b border-slate-200/80 bg-white/90 backdrop-blur-xl z-50 transition-all">
55-
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
56-
<div className="flex justify-between items-center h-16">
57-
<Link to="/" className="flex items-center gap-2 animate-fade-in hover:opacity-80 transition-opacity">
58-
<RefSpringLogo width="32" height="32" />
59-
<div className="font-bold text-2xl text-slate-900">RefSpring</div>
60-
</Link>
61-
<nav className="hidden md:flex space-x-8" role="navigation" aria-label="Navigation principale">
62-
<Link to="/#features" className="text-slate-600 hover:text-slate-900 font-medium transition-all hover:scale-105">
63-
Fonctionnalités
64-
</Link>
65-
<Link to="/pricing" className="text-slate-900 font-semibold transition-all hover:scale-105">
66-
Tarifs
67-
</Link>
68-
<Link to="/#dashboard" className="text-slate-600 hover:text-slate-900 font-medium transition-all hover:scale-105">
69-
Dashboard
70-
</Link>
71-
<Link to="/#testimonials" className="text-slate-600 hover:text-slate-900 font-medium transition-all hover:scale-105">
72-
Témoignages
73-
</Link>
74-
</nav>
75-
<Button variant="outline" className="hidden md:flex hover:scale-105 transition-transform" onClick={redirectToDashboard}>
76-
Se connecter
77-
</Button>
78-
</div>
79-
</div>
80-
</header>
52+
<UnifiedHeader onRedirectToDashboard={redirectToDashboard} currentPage="pricing" />
8153

8254
{/* Main Content starts right after header */}
8355
<div className="pt-16">

0 commit comments

Comments
 (0)