292 lines
12 KiB
TypeScript
292 lines
12 KiB
TypeScript
'use client';
|
|
|
|
import { useRef } from 'react';
|
|
import { motion, useInView } from 'framer-motion';
|
|
import { Cookie, Settings, BarChart3, Target, Shield, ToggleLeft, Mail } from 'lucide-react';
|
|
import { LandingHeader, LandingFooter } from '@/components/layout';
|
|
|
|
export default function CookiesPage() {
|
|
const heroRef = useRef(null);
|
|
const contentRef = useRef(null);
|
|
|
|
const isHeroInView = useInView(heroRef, { once: true });
|
|
const isContentInView = useInView(contentRef, { once: true });
|
|
|
|
const cookieTypes = [
|
|
{
|
|
icon: Shield,
|
|
title: 'Cookies essentiels',
|
|
description: 'Nécessaires au fonctionnement du site',
|
|
required: true,
|
|
cookies: [
|
|
{ name: 'session_id', purpose: 'Maintien de votre session de connexion', duration: 'Session' },
|
|
{ name: 'csrf_token', purpose: 'Protection contre les attaques CSRF', duration: 'Session' },
|
|
{ name: 'cookie_consent', purpose: 'Mémorisation de vos préférences cookies', duration: '1 an' },
|
|
],
|
|
},
|
|
{
|
|
icon: BarChart3,
|
|
title: 'Cookies analytiques',
|
|
description: 'Nous aident à améliorer notre plateforme',
|
|
required: false,
|
|
cookies: [
|
|
{ name: '_ga', purpose: 'Google Analytics - Identification des visiteurs', duration: '2 ans' },
|
|
{ name: '_gid', purpose: 'Google Analytics - Identification des sessions', duration: '24 heures' },
|
|
{ name: '_gat', purpose: 'Google Analytics - Limitation du taux de requêtes', duration: '1 minute' },
|
|
],
|
|
},
|
|
{
|
|
icon: Target,
|
|
title: 'Cookies marketing',
|
|
description: 'Permettent de personnaliser les publicités',
|
|
required: false,
|
|
cookies: [
|
|
{ name: '_fbp', purpose: 'Facebook Pixel - Suivi des conversions', duration: '3 mois' },
|
|
{ name: 'li_fat_id', purpose: 'LinkedIn Insight - Attribution marketing', duration: '30 jours' },
|
|
{ name: 'hubspotutk', purpose: 'HubSpot - Identification des visiteurs', duration: '13 mois' },
|
|
],
|
|
},
|
|
{
|
|
icon: Settings,
|
|
title: 'Cookies fonctionnels',
|
|
description: 'Améliorent votre expérience utilisateur',
|
|
required: false,
|
|
cookies: [
|
|
{ name: 'language', purpose: 'Mémorisation de votre langue préférée', duration: '1 an' },
|
|
{ name: 'theme', purpose: 'Mémorisation du thème (clair/sombre)', duration: '1 an' },
|
|
{ name: 'recent_searches', purpose: 'Historique de vos recherches récentes', duration: '30 jours' },
|
|
],
|
|
},
|
|
];
|
|
|
|
const containerVariants = {
|
|
hidden: { opacity: 0, y: 50 },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: {
|
|
duration: 0.6,
|
|
staggerChildren: 0.1,
|
|
},
|
|
},
|
|
};
|
|
|
|
const itemVariants = {
|
|
hidden: { opacity: 0, y: 20 },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: { duration: 0.5 },
|
|
},
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-white">
|
|
<LandingHeader />
|
|
|
|
{/* Hero Section */}
|
|
<section ref={heroRef} className="relative pt-32 pb-20 bg-gradient-to-br from-brand-navy to-brand-navy/95 overflow-hidden">
|
|
<div className="absolute inset-0 opacity-10">
|
|
<div className="absolute top-20 left-20 w-96 h-96 bg-brand-turquoise rounded-full blur-3xl" />
|
|
<div className="absolute bottom-20 right-20 w-96 h-96 bg-brand-green rounded-full blur-3xl" />
|
|
</div>
|
|
|
|
<div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
|
|
transition={{ duration: 0.8 }}
|
|
className="text-center"
|
|
>
|
|
<motion.div
|
|
initial={{ scale: 0.8, opacity: 0 }}
|
|
animate={isHeroInView ? { scale: 1, opacity: 1 } : {}}
|
|
transition={{ duration: 0.6, delay: 0.2 }}
|
|
className="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full mb-8 border border-white/20"
|
|
>
|
|
<Cookie className="w-5 h-5 text-brand-turquoise" />
|
|
<span className="text-white/90 text-sm font-medium">Transparence</span>
|
|
</motion.div>
|
|
|
|
<h1 className="text-4xl lg:text-6xl font-bold text-white mb-6 leading-tight">
|
|
Politique de
|
|
<br />
|
|
<span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
|
|
Cookies
|
|
</span>
|
|
</h1>
|
|
|
|
<p className="text-xl text-white/80 mb-6 max-w-3xl mx-auto leading-relaxed">
|
|
Découvrez comment nous utilisons les cookies pour améliorer votre expérience
|
|
sur Xpeditis et comment vous pouvez gérer vos préférences.
|
|
</p>
|
|
|
|
<p className="text-white/60 text-sm">
|
|
Dernière mise à jour : Janvier 2025
|
|
</p>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* Wave */}
|
|
<div className="absolute bottom-0 left-0 right-0">
|
|
<svg className="w-full h-16" viewBox="0 0 1440 60" preserveAspectRatio="none">
|
|
<path
|
|
d="M0,30 C240,50 480,10 720,30 C960,50 1200,10 1440,30 L1440,60 L0,60 Z"
|
|
fill="white"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Introduction */}
|
|
<section className="py-16 bg-gray-50">
|
|
<div className="max-w-4xl mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8 }}
|
|
className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100"
|
|
>
|
|
<h2 className="text-2xl font-bold text-brand-navy mb-4">Qu'est-ce qu'un cookie ?</h2>
|
|
<p className="text-gray-600 leading-relaxed mb-4">
|
|
Un cookie est un petit fichier texte stocké sur votre appareil (ordinateur, tablette, smartphone)
|
|
lorsque vous visitez un site web. Les cookies permettent au site de mémoriser vos actions et
|
|
préférences sur une période donnée.
|
|
</p>
|
|
<p className="text-gray-600 leading-relaxed">
|
|
Les cookies ne contiennent pas d'informations personnellement identifiables et ne peuvent pas
|
|
accéder aux données stockées sur votre appareil.
|
|
</p>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Cookie Types Section */}
|
|
<section ref={contentRef} className="py-20">
|
|
<div className="max-w-4xl mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
|
transition={{ duration: 0.8 }}
|
|
className="text-center mb-12"
|
|
>
|
|
<h2 className="text-3xl font-bold text-brand-navy mb-4">Types de cookies utilisés</h2>
|
|
<p className="text-gray-600">
|
|
Nous utilisons différents types de cookies sur notre plateforme
|
|
</p>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
animate={isContentInView ? 'visible' : 'hidden'}
|
|
className="space-y-8"
|
|
>
|
|
{cookieTypes.map((type, index) => {
|
|
const IconComponent = type.icon;
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
variants={itemVariants}
|
|
className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100"
|
|
>
|
|
<div className="flex items-start justify-between mb-6">
|
|
<div className="flex items-center space-x-4">
|
|
<div className="w-12 h-12 bg-brand-turquoise/10 rounded-xl flex items-center justify-center">
|
|
<IconComponent className="w-6 h-6 text-brand-turquoise" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-xl font-bold text-brand-navy">{type.title}</h3>
|
|
<p className="text-gray-500 text-sm">{type.description}</p>
|
|
</div>
|
|
</div>
|
|
{type.required ? (
|
|
<span className="px-3 py-1 bg-brand-navy/10 text-brand-navy text-xs font-medium rounded-full">
|
|
Requis
|
|
</span>
|
|
) : (
|
|
<div className="flex items-center space-x-2">
|
|
<ToggleLeft className="w-8 h-8 text-gray-400" />
|
|
<span className="text-sm text-gray-500">Optionnel</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b border-gray-200">
|
|
<th className="text-left py-3 px-4 font-semibold text-brand-navy">Nom</th>
|
|
<th className="text-left py-3 px-4 font-semibold text-brand-navy">Finalité</th>
|
|
<th className="text-left py-3 px-4 font-semibold text-brand-navy">Durée</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{type.cookies.map((cookie, i) => (
|
|
<tr key={i} className="border-b border-gray-100 last:border-0">
|
|
<td className="py-3 px-4 font-mono text-brand-turquoise">{cookie.name}</td>
|
|
<td className="py-3 px-4 text-gray-600">{cookie.purpose}</td>
|
|
<td className="py-3 px-4 text-gray-500">{cookie.duration}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
|
|
{/* How to manage cookies */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
|
className="mt-12 bg-gradient-to-br from-gray-50 to-white p-8 rounded-2xl border border-gray-200"
|
|
>
|
|
<h3 className="text-2xl font-bold text-brand-navy mb-4">Comment gérer vos cookies ?</h3>
|
|
<div className="space-y-4 text-gray-600">
|
|
<p>
|
|
Vous pouvez à tout moment modifier vos préférences en matière de cookies :
|
|
</p>
|
|
<ul className="list-disc pl-6 space-y-2">
|
|
<li>Via notre bandeau de consentement accessible en bas de chaque page</li>
|
|
<li>Dans les paramètres de votre navigateur (Chrome, Firefox, Safari, Edge)</li>
|
|
<li>En utilisant des outils tiers de gestion des cookies</li>
|
|
</ul>
|
|
<p className="text-sm text-gray-500 mt-4">
|
|
Note : La désactivation de certains cookies peut affecter votre expérience sur notre plateforme.
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Contact Section */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
|
transition={{ duration: 0.8, delay: 0.6 }}
|
|
className="mt-16 bg-gradient-to-br from-brand-navy to-brand-navy/95 p-10 rounded-3xl text-center"
|
|
>
|
|
<Mail className="w-12 h-12 text-brand-turquoise mx-auto mb-4" />
|
|
<h3 className="text-2xl font-bold text-white mb-4">Des questions sur les cookies ?</h3>
|
|
<p className="text-white/80 mb-6">
|
|
Notre équipe est disponible pour répondre à toutes vos questions
|
|
concernant l'utilisation des cookies sur notre plateforme.
|
|
</p>
|
|
<a
|
|
href="mailto:privacy@xpeditis.com"
|
|
className="inline-flex items-center space-x-2 px-6 py-3 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-colors font-medium"
|
|
>
|
|
<Mail className="w-5 h-5" />
|
|
<span>privacy@xpeditis.com</span>
|
|
</a>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
<LandingFooter />
|
|
</div>
|
|
);
|
|
}
|