This commit is contained in:
David 2026-01-16 15:44:16 +01:00
parent d9868dd49f
commit 0d814e9a94

View File

@ -21,10 +21,31 @@ import {
Anchor, Anchor,
Container, Container,
FileText, FileText,
LayoutDashboard,
} from 'lucide-react'; } from 'lucide-react';
import { useAuth } from '@/lib/context/auth-context';
export default function LandingPage() { export default function LandingPage() {
const [isScrolled, setIsScrolled] = useState(false); const [isScrolled, setIsScrolled] = useState(false);
const { user, isAuthenticated, loading } = useAuth();
// Helper function to get user initials
const getUserInitials = () => {
if (!user) return '';
const firstInitial = user.firstName?.charAt(0)?.toUpperCase() || '';
const lastInitial = user.lastName?.charAt(0)?.toUpperCase() || '';
return firstInitial + lastInitial || user.email?.charAt(0)?.toUpperCase() || '?';
};
// Helper function to get full name
const getFullName = () => {
if (!user) return '';
if (user.firstName && user.lastName) {
return `${user.firstName} ${user.lastName}`;
}
return user.email || '';
};
const heroRef = useRef(null); const heroRef = useRef(null);
const featuresRef = useRef(null); const featuresRef = useRef(null);
const statsRef = useRef(null); const statsRef = useRef(null);
@ -225,18 +246,42 @@ export default function LandingPage() {
> >
Tarifs Tarifs
</Link> </Link>
<Link
href="/login" {/* Affichage conditionnel: connecté vs non connecté */}
className="text-white hover:text-brand-turquoise transition-colors font-medium" {loading ? (
> <div className="w-8 h-8 rounded-full bg-white/20 animate-pulse" />
Connexion ) : isAuthenticated && user ? (
</Link> <Link
<Link href="/dashboard"
href="/register" className="flex items-center space-x-3 group"
className="px-6 py-2.5 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all hover:shadow-lg font-medium" >
> {/* Avatar avec initiales */}
Commencer Gratuitement <div className="w-10 h-10 rounded-full bg-brand-turquoise flex items-center justify-center text-white font-semibold text-sm border-2 border-white/30 group-hover:border-white transition-colors">
</Link> {getUserInitials()}
</div>
{/* Nom de l'utilisateur */}
<span className="text-white font-medium group-hover:text-brand-turquoise transition-colors max-w-[150px] truncate">
{getFullName()}
</span>
{/* Icône dashboard */}
<LayoutDashboard className="w-5 h-5 text-white/70 group-hover:text-brand-turquoise transition-colors" />
</Link>
) : (
<>
<Link
href="/login"
className="text-white hover:text-brand-turquoise transition-colors font-medium"
>
Connexion
</Link>
<Link
href="/register"
className="px-6 py-2.5 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all hover:shadow-lg font-medium"
>
Commencer Gratuitement
</Link>
</>
)}
</div> </div>
</div> </div>
</div> </div>
@ -310,19 +355,31 @@ export default function LandingPage() {
transition={{ duration: 0.8, delay: 0.5 }} transition={{ duration: 0.8, delay: 0.5 }}
className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-6 mb-12" className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-6 mb-12"
> >
<Link {isAuthenticated && user ? (
href="/register" <Link
className="group px-8 py-4 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all hover:shadow-2xl hover:scale-105 font-semibold text-lg w-full sm:w-auto flex items-center justify-center space-x-2" href="/dashboard"
> className="group px-8 py-4 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all hover:shadow-2xl hover:scale-105 font-semibold text-lg w-full sm:w-auto flex items-center justify-center space-x-2"
<span>Créer un compte gratuit</span> >
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" /> <span>Accéder au Dashboard</span>
</Link> <LayoutDashboard className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
<Link </Link>
href="/login" ) : (
className="px-8 py-4 bg-white text-brand-navy rounded-lg hover:bg-gray-50 transition-all hover:shadow-xl font-semibold text-lg w-full sm:w-auto" <>
> <Link
Voir la démo href="/register"
</Link> className="group px-8 py-4 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all hover:shadow-2xl hover:scale-105 font-semibold text-lg w-full sm:w-auto flex items-center justify-center space-x-2"
>
<span>Créer un compte gratuit</span>
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
</Link>
<Link
href="/login"
className="px-8 py-4 bg-white text-brand-navy rounded-lg hover:bg-gray-50 transition-all hover:shadow-xl font-semibold text-lg w-full sm:w-auto"
>
Voir la démo
</Link>
</>
)}
</motion.div> </motion.div>
</motion.div> </motion.div>
</div> </div>
@ -703,19 +760,31 @@ export default function LandingPage() {
variants={itemVariants} variants={itemVariants}
className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-6" className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-6"
> >
<Link {isAuthenticated && user ? (
href="/register" <Link
className="group px-8 py-4 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all hover:shadow-2xl hover:scale-105 font-semibold text-lg w-full sm:w-auto flex items-center justify-center space-x-2" href="/dashboard"
> className="group px-8 py-4 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all hover:shadow-2xl hover:scale-105 font-semibold text-lg w-full sm:w-auto flex items-center justify-center space-x-2"
<span>Créer un compte gratuit</span> >
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" /> <span>Accéder au Dashboard</span>
</Link> <LayoutDashboard className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
<Link </Link>
href="/login" ) : (
className="px-8 py-4 bg-brand-navy text-white rounded-lg hover:bg-brand-navy/90 transition-all hover:shadow-xl font-semibold text-lg w-full sm:w-auto" <>
> <Link
Se connecter href="/register"
</Link> className="group px-8 py-4 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all hover:shadow-2xl hover:scale-105 font-semibold text-lg w-full sm:w-auto flex items-center justify-center space-x-2"
>
<span>Créer un compte gratuit</span>
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
</Link>
<Link
href="/login"
className="px-8 py-4 bg-brand-navy text-white rounded-lg hover:bg-brand-navy/90 transition-all hover:shadow-xl font-semibold text-lg w-full sm:w-auto"
>
Se connecter
</Link>
</>
)}
</motion.div> </motion.div>
<motion.div <motion.div
@ -779,7 +848,7 @@ export default function LandingPage() {
{/* Products */} {/* Products */}
<div> <div>
<h4 className="font-bold text-lg mb-4">Produits</h4> <h4 className="font-bold text-lg mb-4 text-white">Produits</h4>
<ul className="space-y-3 text-white/70 text-sm"> <ul className="space-y-3 text-white/70 text-sm">
<li> <li>
<Link href="#features" className="hover:text-brand-turquoise transition-colors"> <Link href="#features" className="hover:text-brand-turquoise transition-colors">
@ -814,7 +883,7 @@ export default function LandingPage() {
{/* Company */} {/* Company */}
<div> <div>
<h4 className="font-bold text-lg mb-4">Entreprise</h4> <h4 className="font-bold text-lg mb-4 text-white">Entreprise</h4>
<ul className="space-y-3 text-white/70 text-sm"> <ul className="space-y-3 text-white/70 text-sm">
<li> <li>
<Link href="/about" className="hover:text-brand-turquoise transition-colors"> <Link href="/about" className="hover:text-brand-turquoise transition-colors">
@ -846,7 +915,7 @@ export default function LandingPage() {
{/* Legal */} {/* Legal */}
<div> <div>
<h4 className="font-bold text-lg mb-4">Légal</h4> <h4 className="font-bold text-lg mb-4 text-white">Légal</h4>
<ul className="space-y-3 text-white/70 text-sm"> <ul className="space-y-3 text-white/70 text-sm">
<li> <li>
<Link href="/privacy" className="hover:text-brand-turquoise transition-colors"> <Link href="/privacy" className="hover:text-brand-turquoise transition-colors">