adding middleware for auth
This commit is contained in:
David
parent
7f31aa59a9
commit
1c6edb9d41
@ -350,21 +350,30 @@ export default function AboutPage() {
|
||||
</motion.div>
|
||||
|
||||
<div className="relative">
|
||||
{/* Timeline line */}
|
||||
<div className="hidden lg:block absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-brand-turquoise/20" />
|
||||
{/* Timeline vertical rail + animated fill */}
|
||||
<div className="hidden lg:block absolute left-1/2 transform -translate-x-1/2 w-0.5 h-full bg-brand-turquoise/15 overflow-hidden">
|
||||
<motion.div
|
||||
initial={{ scaleY: 0 }}
|
||||
animate={isTimelineInView ? { scaleY: 1 } : {}}
|
||||
transition={{ duration: 2.2, delay: 0.2, ease: 'easeInOut' }}
|
||||
style={{ transformOrigin: 'top' }}
|
||||
className="absolute inset-0 bg-brand-turquoise/60"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-12">
|
||||
{timeline.map((item, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, x: index % 2 === 0 ? -50 : 50 }}
|
||||
animate={isTimelineInView ? { opacity: 1, x: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||
initial={{ opacity: 0, x: index % 2 === 0 ? -64 : 64 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true, amount: 0.4 }}
|
||||
transition={{ duration: 0.7, ease: 'easeOut' }}
|
||||
className={`flex items-center ${index % 2 === 0 ? 'lg:flex-row' : 'lg:flex-row-reverse'}`}
|
||||
>
|
||||
<div className={`flex-1 ${index % 2 === 0 ? 'lg:pr-12 lg:text-right' : 'lg:pl-12'}`}>
|
||||
<div className="bg-white p-6 rounded-2xl shadow-lg border border-gray-100 inline-block">
|
||||
<div className="flex items-center space-x-3 mb-3">
|
||||
<div className="bg-white p-6 rounded-2xl shadow-lg border border-gray-100 inline-block hover:shadow-xl transition-shadow">
|
||||
<div className={`flex items-center space-x-3 mb-3 ${index % 2 === 0 ? 'lg:justify-end' : ''}`}>
|
||||
<Calendar className="w-5 h-5 text-brand-turquoise" />
|
||||
<span className="text-2xl font-bold text-brand-turquoise">{item.year}</span>
|
||||
</div>
|
||||
@ -372,9 +381,18 @@ export default function AboutPage() {
|
||||
<p className="text-gray-600">{item.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden lg:flex items-center justify-center">
|
||||
<div className="w-6 h-6 bg-brand-turquoise rounded-full border-4 border-white shadow-lg" />
|
||||
|
||||
{/* Animated center dot */}
|
||||
<div className="hidden lg:flex items-center justify-center mx-4 flex-shrink-0">
|
||||
<motion.div
|
||||
initial={{ scale: 0 }}
|
||||
whileInView={{ scale: 1 }}
|
||||
viewport={{ once: true, amount: 0.6 }}
|
||||
transition={{ duration: 0.4, delay: 0.15, type: 'spring', stiffness: 320, damping: 18 }}
|
||||
className="w-5 h-5 bg-brand-turquoise rounded-full border-4 border-white shadow-lg ring-2 ring-brand-turquoise/30"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="hidden lg:block flex-1" />
|
||||
</motion.div>
|
||||
))}
|
||||
|
||||
@ -8,8 +8,8 @@
|
||||
|
||||
import { useAuth } from '@/lib/context/auth-context';
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import { usePathname, useRouter } from 'next/navigation';
|
||||
import { useState, useEffect } from 'react';
|
||||
import NotificationDropdown from '@/components/NotificationDropdown';
|
||||
import AdminPanelDropdown from '@/components/admin/AdminPanelDropdown';
|
||||
import Image from 'next/image';
|
||||
@ -25,10 +25,29 @@ import {
|
||||
} from 'lucide-react';
|
||||
|
||||
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
|
||||
const { user, logout } = useAuth();
|
||||
const { user, logout, loading, isAuthenticated } = useAuth();
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!loading && !isAuthenticated) {
|
||||
router.replace(`/login?redirect=${encodeURIComponent(pathname)}`);
|
||||
}
|
||||
}, [loading, isAuthenticated, router, pathname]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
||||
<div className="w-8 h-8 border-4 border-brand-turquoise border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isAuthenticated) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const navigation = [
|
||||
{ name: 'Tableau de bord', href: '/dashboard', icon: BarChart3 },
|
||||
{ name: 'Réservations', href: '/dashboard/bookings', icon: Package },
|
||||
|
||||
@ -8,9 +8,10 @@
|
||||
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useState, Suspense } from 'react';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import { useAuth } from '@/lib/context/auth-context';
|
||||
|
||||
interface FieldErrors {
|
||||
@ -73,8 +74,10 @@ function getErrorMessage(error: any): { message: string; field?: 'email' | 'pass
|
||||
};
|
||||
}
|
||||
|
||||
export default function LoginPage() {
|
||||
function LoginPageContent() {
|
||||
const { login } = useAuth();
|
||||
const searchParams = useSearchParams();
|
||||
const redirectTo = searchParams.get('redirect') || '/dashboard';
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [rememberMe, setRememberMe] = useState(false);
|
||||
@ -126,7 +129,7 @@ export default function LoginPage() {
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
await login(email, password);
|
||||
await login(email, password, redirectTo);
|
||||
// Navigation is handled by the login function in auth context
|
||||
} catch (err: any) {
|
||||
const { message, field } = getErrorMessage(err);
|
||||
@ -462,3 +465,11 @@ export default function LoginPage() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function LoginPage() {
|
||||
return (
|
||||
<Suspense>
|
||||
<LoginPageContent />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { useRef } from 'react';
|
||||
import { useRef, useState, useEffect } from 'react';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { motion, useInView, useScroll, useTransform } from 'framer-motion';
|
||||
@ -27,6 +27,43 @@ import {
|
||||
import { useAuth } from '@/lib/context/auth-context';
|
||||
import { LandingHeader, LandingFooter } from '@/components/layout';
|
||||
|
||||
function AnimatedCounter({
|
||||
end,
|
||||
suffix = '',
|
||||
prefix = '',
|
||||
decimals = 0,
|
||||
isActive,
|
||||
duration = 2,
|
||||
}: {
|
||||
end: number;
|
||||
suffix?: string;
|
||||
prefix?: string;
|
||||
decimals?: number;
|
||||
isActive: boolean;
|
||||
duration?: number;
|
||||
}) {
|
||||
const [count, setCount] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isActive) return;
|
||||
let startTime: number | undefined;
|
||||
|
||||
const animate = (timestamp: number) => {
|
||||
if (!startTime) startTime = timestamp;
|
||||
const progress = Math.min((timestamp - startTime) / (duration * 1000), 1);
|
||||
const eased = 1 - Math.pow(1 - progress, 3);
|
||||
setCount(eased * end);
|
||||
if (progress < 1) requestAnimationFrame(animate);
|
||||
else setCount(end);
|
||||
};
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
}, [end, duration, isActive]);
|
||||
|
||||
const display = decimals > 0 ? count.toFixed(decimals) : Math.floor(count).toString();
|
||||
return <>{prefix}{display}{suffix}</>;
|
||||
}
|
||||
|
||||
export default function LandingPage() {
|
||||
const { user, isAuthenticated } = useAuth();
|
||||
|
||||
@ -37,14 +74,16 @@ export default function LandingPage() {
|
||||
const pricingRef = useRef(null);
|
||||
const testimonialsRef = useRef(null);
|
||||
const ctaRef = useRef(null);
|
||||
const howRef = useRef(null);
|
||||
|
||||
const isHeroInView = useInView(heroRef, { once: true });
|
||||
const isFeaturesInView = useInView(featuresRef, { once: true });
|
||||
const isStatsInView = useInView(statsRef, { once: true });
|
||||
const isStatsInView = useInView(statsRef, { once: true, amount: 0.3 });
|
||||
const isToolsInView = useInView(toolsRef, { once: true });
|
||||
const isPricingInView = useInView(pricingRef, { once: true });
|
||||
const isTestimonialsInView = useInView(testimonialsRef, { once: true });
|
||||
const isCtaInView = useInView(ctaRef, { once: true });
|
||||
const isHowInView = useInView(howRef, { once: true, amount: 0.2 });
|
||||
|
||||
const { scrollYProgress } = useScroll();
|
||||
const backgroundY = useTransform(scrollYProgress, [0, 1], ['0%', '50%']);
|
||||
@ -138,10 +177,10 @@ export default function LandingPage() {
|
||||
];
|
||||
|
||||
const stats = [
|
||||
{ value: '50+', label: 'Compagnies Maritimes', icon: Ship },
|
||||
{ value: '10K+', label: 'Ports Mondiaux', icon: Anchor },
|
||||
{ value: '<2s', label: 'Temps de Réponse', icon: Zap },
|
||||
{ value: '99.5%', label: 'Disponibilité', icon: CheckCircle2 },
|
||||
{ end: 50, prefix: '', suffix: '+', decimals: 0, label: 'Compagnies Maritimes', icon: Ship },
|
||||
{ end: 10, prefix: '', suffix: 'K+', decimals: 0, label: 'Ports Mondiaux', icon: Anchor },
|
||||
{ end: 2, prefix: '<', suffix: 's', decimals: 0, label: 'Temps de Réponse', icon: Zap },
|
||||
{ end: 99.5, prefix: '', suffix: '%', decimals: 1, label: 'Disponibilité', icon: CheckCircle2 },
|
||||
];
|
||||
|
||||
const pricingPlans = [
|
||||
@ -252,20 +291,31 @@ export default function LandingPage() {
|
||||
|
||||
{/* Hero Section */}
|
||||
<section ref={heroRef} className="relative min-h-screen flex items-center overflow-hidden">
|
||||
{/* Background Image */}
|
||||
{/* Background Video */}
|
||||
<motion.div style={{ y: backgroundY }} className="absolute inset-0 z-0">
|
||||
{/* Container background image */}
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
backgroundImage: 'url(/assets/images/background-section-1-landingpage.png)',
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
}}
|
||||
/>
|
||||
<video
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
playsInline
|
||||
className="absolute inset-0 w-full h-full object-cover"
|
||||
>
|
||||
<source
|
||||
src="https://assets.mixkit.co/videos/36264/36264-720.mp4"
|
||||
type="video/mp4"
|
||||
/>
|
||||
{/* Fallback image if video fails to load */}
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
backgroundImage: 'url(/assets/images/background-section-1-landingpage.png)',
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}}
|
||||
/>
|
||||
</video>
|
||||
{/* Dark overlay for text readability */}
|
||||
<div className="absolute inset-0 bg-brand-navy/60" />
|
||||
<div className="absolute inset-0 bg-brand-navy/65" />
|
||||
{/* Gradient overlay */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-brand-navy/70 via-brand-navy/50 to-brand-turquoise/20" />
|
||||
</motion.div>
|
||||
@ -321,6 +371,8 @@ export default function LandingPage() {
|
||||
{isAuthenticated && user ? (
|
||||
<Link
|
||||
href="/dashboard"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
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>Accéder au tableau de bord</span>
|
||||
@ -330,6 +382,8 @@ export default function LandingPage() {
|
||||
<>
|
||||
<Link
|
||||
href="/register"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
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>
|
||||
@ -337,6 +391,8 @@ export default function LandingPage() {
|
||||
</Link>
|
||||
<Link
|
||||
href="/login"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
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
|
||||
@ -395,9 +451,16 @@ export default function LandingPage() {
|
||||
initial={{ scale: 0 }}
|
||||
animate={isStatsInView ? { scale: 1 } : {}}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
className="text-5xl lg:text-6xl font-bold text-brand-navy mb-2"
|
||||
className="text-5xl lg:text-6xl font-bold text-brand-navy mb-2 tabular-nums"
|
||||
>
|
||||
{stat.value}
|
||||
<AnimatedCounter
|
||||
end={stat.end}
|
||||
prefix={stat.prefix}
|
||||
suffix={stat.suffix}
|
||||
decimals={stat.decimals}
|
||||
isActive={isStatsInView}
|
||||
duration={2.2}
|
||||
/>
|
||||
</motion.div>
|
||||
<div className="text-gray-600 font-medium">{stat.label}</div>
|
||||
</motion.div>
|
||||
@ -436,22 +499,34 @@ export default function LandingPage() {
|
||||
<motion.div
|
||||
key={index}
|
||||
variants={itemVariants}
|
||||
whileHover={{ scale: 1.05, y: -10 }}
|
||||
whileHover={{ y: -8 }}
|
||||
className="h-full"
|
||||
>
|
||||
<Link
|
||||
href={feature.link}
|
||||
className="group block bg-white p-8 rounded-2xl shadow-lg hover:shadow-2xl transition-all border border-gray-100"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="group flex flex-col h-full bg-white p-8 rounded-2xl shadow-lg hover:shadow-2xl transition-all border border-gray-100 hover:border-brand-turquoise/30 relative overflow-hidden"
|
||||
>
|
||||
{/* Gradient accent bar on top — always visible, intensifies on hover */}
|
||||
<div
|
||||
className={`w-14 h-14 rounded-xl bg-gradient-to-br ${feature.color} flex items-center justify-center mb-4 group-hover:scale-110 transition-transform`}
|
||||
className={`absolute top-0 left-0 right-0 h-1 bg-gradient-to-r ${feature.color} opacity-40 group-hover:opacity-100 transition-opacity duration-300`}
|
||||
/>
|
||||
<div
|
||||
className={`w-14 h-14 rounded-xl bg-gradient-to-br ${feature.color} flex items-center justify-center mb-5 group-hover:scale-110 transition-transform flex-shrink-0`}
|
||||
>
|
||||
<IconComponent className="w-7 h-7 text-white" />
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold text-brand-navy mb-3 group-hover:text-brand-turquoise transition-colors">{feature.title}</h3>
|
||||
<p className="text-gray-600 leading-relaxed">{feature.description}</p>
|
||||
<div className="mt-4 flex items-center text-brand-turquoise font-medium opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<span>Découvrir</span>
|
||||
<ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
|
||||
<h3 className="text-xl font-bold text-brand-navy mb-3 group-hover:text-brand-turquoise transition-colors">
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className="text-gray-600 leading-relaxed flex-1">{feature.description}</p>
|
||||
{/* CTA always visible */}
|
||||
<div className="mt-5 pt-4 border-t border-gray-100 flex items-center justify-between">
|
||||
<span className="text-brand-turquoise font-semibold text-sm">Découvrir</span>
|
||||
<div className="w-8 h-8 rounded-full bg-brand-turquoise/10 group-hover:bg-brand-turquoise/20 flex items-center justify-center transition-colors">
|
||||
<ArrowRight className="w-4 h-4 text-brand-turquoise group-hover:translate-x-0.5 transition-transform" />
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</motion.div>
|
||||
@ -499,6 +574,8 @@ export default function LandingPage() {
|
||||
>
|
||||
<Link
|
||||
href={tool.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block bg-white p-6 rounded-xl border-2 border-gray-200 hover:border-brand-turquoise transition-all hover:shadow-lg"
|
||||
>
|
||||
<div className="flex items-start space-x-4">
|
||||
@ -642,6 +719,8 @@ export default function LandingPage() {
|
||||
</ul>
|
||||
<Link
|
||||
href={plan.name === 'Enterprise' ? '/contact' : '/register'}
|
||||
target={plan.name === 'Enterprise' ? '_self' : '_blank'}
|
||||
rel={plan.name === 'Enterprise' ? undefined : 'noopener noreferrer'}
|
||||
className={`block w-full text-center py-3 px-6 rounded-lg font-semibold transition-all ${
|
||||
plan.highlighted
|
||||
? 'bg-brand-turquoise text-white hover:bg-brand-turquoise/90 shadow-lg hover:shadow-xl'
|
||||
@ -672,8 +751,11 @@ export default function LandingPage() {
|
||||
</section>
|
||||
|
||||
{/* How It Works Section */}
|
||||
<section className="py-20 lg:py-32 bg-gradient-to-br from-brand-navy to-brand-navy/95 relative overflow-hidden">
|
||||
<div className="absolute inset-0 opacity-10">
|
||||
<section
|
||||
ref={howRef}
|
||||
className="py-20 lg:py-32 bg-gradient-to-br from-brand-navy to-brand-navy/95 relative overflow-hidden"
|
||||
>
|
||||
<div className="absolute inset-0 opacity-10 pointer-events-none">
|
||||
<div className="absolute top-10 left-10 w-72 h-72 bg-brand-turquoise rounded-full blur-3xl" />
|
||||
<div className="absolute bottom-10 right-10 w-72 h-72 bg-brand-green rounded-full blur-3xl" />
|
||||
</div>
|
||||
@ -681,8 +763,7 @@ export default function LandingPage() {
|
||||
<div className="max-w-7xl mx-auto px-6 lg:px-8 relative z-10">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
animate={isHowInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
@ -692,60 +773,95 @@ export default function LandingPage() {
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{[
|
||||
{
|
||||
step: '01',
|
||||
title: 'Recherchez',
|
||||
description: "Entrez vos ports de départ et d'arrivée",
|
||||
icon: Search,
|
||||
},
|
||||
{
|
||||
step: '02',
|
||||
title: 'Comparez',
|
||||
description: 'Analysez les tarifs de 50+ compagnies',
|
||||
icon: BarChart3,
|
||||
},
|
||||
{
|
||||
step: '03',
|
||||
title: 'Réservez',
|
||||
description: 'Confirmez votre réservation en un clic',
|
||||
icon: CheckCircle2,
|
||||
},
|
||||
{
|
||||
step: '04',
|
||||
title: 'Suivez',
|
||||
description: 'Suivez votre envoi en temps réel',
|
||||
icon: Container,
|
||||
},
|
||||
].map((step, index) => {
|
||||
const IconComponent = step.icon;
|
||||
return (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||
className="text-center"
|
||||
>
|
||||
<div className="relative mb-6">
|
||||
<div className="w-20 h-20 bg-brand-turquoise rounded-full flex items-center justify-center text-3xl font-bold text-white mx-auto shadow-xl">
|
||||
{step.step}
|
||||
{/* Steps grid with animated connecting line */}
|
||||
<div className="relative">
|
||||
{/* Animated progress line — desktop only */}
|
||||
<div className="hidden lg:block absolute top-10 left-[12.5%] right-[12.5%] h-px bg-white/15">
|
||||
<motion.div
|
||||
initial={{ scaleX: 0 }}
|
||||
animate={isHowInView ? { scaleX: 1 } : {}}
|
||||
transition={{ duration: 1.6, delay: 0.5, ease: 'easeInOut' }}
|
||||
style={{ transformOrigin: 'left' }}
|
||||
className="absolute inset-0 bg-brand-turquoise"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{[
|
||||
{
|
||||
step: '01',
|
||||
title: 'Recherchez',
|
||||
description: "Entrez vos ports de départ et d'arrivée",
|
||||
icon: Search,
|
||||
},
|
||||
{
|
||||
step: '02',
|
||||
title: 'Comparez',
|
||||
description: 'Analysez les tarifs de 50+ compagnies',
|
||||
icon: BarChart3,
|
||||
},
|
||||
{
|
||||
step: '03',
|
||||
title: 'Réservez',
|
||||
description: 'Confirmez votre réservation en un clic',
|
||||
icon: CheckCircle2,
|
||||
},
|
||||
{
|
||||
step: '04',
|
||||
title: 'Suivez',
|
||||
description: 'Suivez votre envoi en temps réel',
|
||||
icon: Container,
|
||||
},
|
||||
].map((step, index) => {
|
||||
const IconComponent = step.icon;
|
||||
return (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={isHowInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.3 + index * 0.15 }}
|
||||
className="text-center relative z-10"
|
||||
>
|
||||
{/* Clean number circle — no icon overlay */}
|
||||
<div className="mb-5">
|
||||
<div className="w-20 h-20 bg-brand-turquoise rounded-full flex items-center justify-center text-3xl font-bold text-white mx-auto shadow-xl ring-4 ring-brand-turquoise/20">
|
||||
{step.step}
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<IconComponent className="w-8 h-8 text-white/30" />
|
||||
{/* Icon badge — separate from the number */}
|
||||
<div className="flex justify-center mb-3">
|
||||
<div className="p-2 bg-white/10 rounded-lg">
|
||||
<IconComponent className="w-5 h-5 text-brand-turquoise" />
|
||||
</div>
|
||||
</div>
|
||||
{index < 3 && (
|
||||
<div className="hidden lg:block absolute top-10 left-[60%] w-full h-0.5 bg-brand-turquoise/30" />
|
||||
)}
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold text-white mb-2">{step.title}</h3>
|
||||
<p className="text-white/70">{step.description}</p>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
<h3 className="text-xl font-bold text-white mb-2">{step.title}</h3>
|
||||
<p className="text-white/70 text-sm leading-relaxed">{step.description}</p>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA after last step */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isHowInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 1.4 }}
|
||||
className="mt-16 text-center"
|
||||
>
|
||||
<Link
|
||||
href="/register"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center space-x-2 px-8 py-4 bg-brand-turquoise text-white rounded-xl font-semibold text-lg hover:bg-brand-turquoise/90 transition-all hover:shadow-2xl hover:scale-105 group"
|
||||
>
|
||||
<span>Essayer maintenant</span>
|
||||
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
||||
</Link>
|
||||
<p className="mt-3 text-white/50 text-sm">
|
||||
Inscription gratuite · Aucune carte bancaire requise
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -831,6 +947,8 @@ export default function LandingPage() {
|
||||
{isAuthenticated && user ? (
|
||||
<Link
|
||||
href="/dashboard"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
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>Accéder au tableau de bord</span>
|
||||
@ -840,6 +958,8 @@ export default function LandingPage() {
|
||||
<>
|
||||
<Link
|
||||
href="/register"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
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>
|
||||
@ -847,6 +967,8 @@ export default function LandingPage() {
|
||||
</Link>
|
||||
<Link
|
||||
href="/login"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
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
|
||||
|
||||
@ -7,37 +7,46 @@
|
||||
import { NextResponse } from 'next/server';
|
||||
import type { NextRequest } from 'next/server';
|
||||
|
||||
const publicPaths = [
|
||||
'/',
|
||||
// Exact-match public paths (no sub-path matching)
|
||||
const exactPublicPaths = ['/'];
|
||||
|
||||
// Prefix-match public paths (plus their sub-paths)
|
||||
const prefixPublicPaths = [
|
||||
'/login',
|
||||
'/register',
|
||||
'/forgot-password',
|
||||
'/reset-password',
|
||||
'/verify-email',
|
||||
'/about',
|
||||
'/careers',
|
||||
'/blog',
|
||||
'/press',
|
||||
'/contact',
|
||||
'/carrier',
|
||||
];
|
||||
|
||||
export function middleware(request: NextRequest) {
|
||||
const { pathname } = request.nextUrl;
|
||||
|
||||
// Check if path is public
|
||||
const isPublicPath = publicPaths.some(path => pathname.startsWith(path));
|
||||
const isPublicPath =
|
||||
exactPublicPaths.includes(pathname) ||
|
||||
prefixPublicPaths.some(path => pathname === path || pathname.startsWith(path + '/'));
|
||||
|
||||
// Get token from cookies or headers
|
||||
// Get token from cookie (synced by client.ts setAuthTokens)
|
||||
const token = request.cookies.get('accessToken')?.value;
|
||||
|
||||
// Redirect to login if accessing protected route without token
|
||||
if (!isPublicPath && !token) {
|
||||
return NextResponse.redirect(new URL('/login', request.url));
|
||||
}
|
||||
|
||||
// Redirect to dashboard if accessing public auth pages while logged in
|
||||
if (isPublicPath && token && pathname !== '/') {
|
||||
return NextResponse.redirect(new URL('/dashboard', request.url));
|
||||
const loginUrl = new URL('/login', request.url);
|
||||
loginUrl.searchParams.set('redirect', pathname);
|
||||
return NextResponse.redirect(loginUrl);
|
||||
}
|
||||
|
||||
return NextResponse.next();
|
||||
}
|
||||
|
||||
export const config = {
|
||||
matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
|
||||
// Exclude Next.js internals, API routes, and all public static assets
|
||||
matcher: ['/((?!_next/static|_next/image|api|assets|favicon\\.ico|manifest\\.json|.*\\.(?:png|jpg|jpeg|gif|webp|svg|ico|mp4|mp3|pdf|txt|xml|csv|json)$).*)'],
|
||||
};
|
||||
|
||||
@ -8,7 +8,6 @@ import {
|
||||
ChevronDown,
|
||||
Briefcase,
|
||||
Newspaper,
|
||||
Mail,
|
||||
Info,
|
||||
BookOpen,
|
||||
LayoutDashboard,
|
||||
@ -27,12 +26,15 @@ export function LandingHeader({ transparentOnTop = false, activePage }: LandingH
|
||||
|
||||
const companyMenuItems = [
|
||||
{ href: '/about', label: 'À propos', icon: Info, description: 'Notre histoire et mission' },
|
||||
{ href: '/contact', label: 'Contact', icon: Mail, description: 'Nous contacter' },
|
||||
{ href: '/careers', label: 'Carrières', icon: Briefcase, description: 'Rejoignez-nous' },
|
||||
{ href: '/blog', label: 'Blog', icon: BookOpen, description: 'Actualités et insights' },
|
||||
{ href: '/press', label: 'Presse', icon: Newspaper, description: 'Espace presse' },
|
||||
];
|
||||
|
||||
// "Entreprise" dropdown is active only for its own sub-pages (not contact)
|
||||
const isCompanyMenuActive =
|
||||
activePage !== undefined && ['about', 'careers', 'blog', 'press'].includes(activePage);
|
||||
|
||||
const getUserInitials = () => {
|
||||
if (!user) return '';
|
||||
const firstInitial = user.firstName?.charAt(0)?.toUpperCase() || '';
|
||||
@ -106,6 +108,18 @@ export function LandingHeader({ transparentOnTop = false, activePage }: LandingH
|
||||
Tarifs
|
||||
</Link>
|
||||
|
||||
{/* Contact — lien direct dans la nav principale */}
|
||||
<Link
|
||||
href="/contact"
|
||||
className={`transition-colors font-medium ${
|
||||
activePage === 'contact'
|
||||
? 'text-brand-turquoise'
|
||||
: 'text-white hover:text-brand-turquoise'
|
||||
}`}
|
||||
>
|
||||
Contact
|
||||
</Link>
|
||||
|
||||
{/* Menu Entreprise */}
|
||||
<div
|
||||
className="relative"
|
||||
@ -114,7 +128,7 @@ export function LandingHeader({ transparentOnTop = false, activePage }: LandingH
|
||||
>
|
||||
<button
|
||||
className={`flex items-center space-x-1 transition-colors font-medium ${
|
||||
activePage ? 'text-brand-turquoise' : 'text-white hover:text-brand-turquoise'
|
||||
isCompanyMenuActive ? 'text-brand-turquoise' : 'text-white hover:text-brand-turquoise'
|
||||
}`}
|
||||
>
|
||||
<span>Entreprise</span>
|
||||
|
||||
@ -33,6 +33,8 @@ export function setAuthTokens(accessToken: string, refreshToken: string): void {
|
||||
if (typeof window === 'undefined') return;
|
||||
localStorage.setItem('access_token', accessToken);
|
||||
localStorage.setItem('refresh_token', refreshToken);
|
||||
// Sync to cookie so Next.js middleware can read it for route protection
|
||||
document.cookie = `accessToken=${accessToken}; path=/; SameSite=Lax`;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -43,6 +45,8 @@ export function clearAuthTokens(): void {
|
||||
localStorage.removeItem('access_token');
|
||||
localStorage.removeItem('refresh_token');
|
||||
localStorage.removeItem('user');
|
||||
// Expire the middleware cookie
|
||||
document.cookie = 'accessToken=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT; SameSite=Lax';
|
||||
}
|
||||
|
||||
/**
|
||||
@ -91,9 +95,10 @@ async function refreshAccessToken(): Promise<string> {
|
||||
const data = await response.json();
|
||||
const newAccessToken = data.accessToken;
|
||||
|
||||
// Update access token in localStorage (keep same refresh token)
|
||||
// Update access token in localStorage and cookie (keep same refresh token)
|
||||
if (typeof window !== 'undefined') {
|
||||
localStorage.setItem('access_token', newAccessToken);
|
||||
document.cookie = `accessToken=${newAccessToken}; path=/; SameSite=Lax`;
|
||||
}
|
||||
|
||||
return newAccessToken;
|
||||
|
||||
@ -20,7 +20,7 @@ import type { UserPayload } from '@/types/api';
|
||||
interface AuthContextType {
|
||||
user: UserPayload | null;
|
||||
loading: boolean;
|
||||
login: (email: string, password: string) => Promise<void>;
|
||||
login: (email: string, password: string, redirectTo?: string) => Promise<void>;
|
||||
register: (data: {
|
||||
email: string;
|
||||
password: string;
|
||||
@ -106,9 +106,9 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
|
||||
return () => clearInterval(tokenCheckInterval);
|
||||
}, []);
|
||||
|
||||
const login = async (email: string, password: string) => {
|
||||
const login = async (email: string, password: string, redirectTo = '/dashboard') => {
|
||||
try {
|
||||
const response = await apiLogin({ email, password });
|
||||
await apiLogin({ email, password });
|
||||
// Fetch complete user profile after login
|
||||
const currentUser = await getCurrentUser();
|
||||
setUser(currentUser);
|
||||
@ -116,7 +116,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
|
||||
if (typeof window !== 'undefined') {
|
||||
localStorage.setItem('user', JSON.stringify(currentUser));
|
||||
}
|
||||
router.push('/dashboard');
|
||||
router.push(redirectTo);
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user