430 lines
17 KiB
TypeScript
430 lines
17 KiB
TypeScript
'use client';
|
|
|
|
import { useRef } from 'react';
|
|
import { motion, useInView } from 'framer-motion';
|
|
import {
|
|
Shield,
|
|
UserCheck,
|
|
Database,
|
|
FileText,
|
|
Globe,
|
|
Clock,
|
|
CheckCircle,
|
|
Download,
|
|
Trash2,
|
|
Edit,
|
|
Eye,
|
|
Mail,
|
|
} from 'lucide-react';
|
|
import Link from 'next/link';
|
|
import { LandingHeader, LandingFooter } from '@/components/layout';
|
|
|
|
export default function CompliancePage() {
|
|
const heroRef = useRef(null);
|
|
const contentRef = useRef(null);
|
|
|
|
const isHeroInView = useInView(heroRef, { once: true });
|
|
const isContentInView = useInView(contentRef, { once: true });
|
|
|
|
const rights = [
|
|
{
|
|
icon: Eye,
|
|
title: 'Droit d\'accès',
|
|
description: 'Obtenez une copie de toutes les données personnelles que nous détenons sur vous.',
|
|
},
|
|
{
|
|
icon: Edit,
|
|
title: 'Droit de rectification',
|
|
description: 'Faites corriger vos données personnelles si elles sont inexactes ou incomplètes.',
|
|
},
|
|
{
|
|
icon: Trash2,
|
|
title: 'Droit à l\'effacement',
|
|
description: 'Demandez la suppression de vos données personnelles ("droit à l\'oubli").',
|
|
},
|
|
{
|
|
icon: Download,
|
|
title: 'Droit à la portabilité',
|
|
description: 'Recevez vos données dans un format structuré, lisible par machine.',
|
|
},
|
|
];
|
|
|
|
const principles = [
|
|
{
|
|
icon: Database,
|
|
title: 'Minimisation des données',
|
|
description: 'Nous ne collectons que les données strictement nécessaires à nos services.',
|
|
},
|
|
{
|
|
icon: Clock,
|
|
title: 'Limitation de conservation',
|
|
description: 'Vos données sont conservées uniquement le temps nécessaire.',
|
|
},
|
|
{
|
|
icon: Shield,
|
|
title: 'Intégrité et confidentialité',
|
|
description: 'Vos données sont protégées contre tout accès non autorisé.',
|
|
},
|
|
{
|
|
icon: FileText,
|
|
title: 'Transparence',
|
|
description: 'Nous vous informons clairement sur l\'utilisation de vos données.',
|
|
},
|
|
];
|
|
|
|
const measures = [
|
|
{
|
|
category: 'Mesures techniques',
|
|
items: [
|
|
'Chiffrement des données au repos et en transit',
|
|
'Authentification multi-facteurs',
|
|
'Journalisation des accès aux données',
|
|
'Sauvegardes chiffrées régulières',
|
|
'Pseudonymisation des données sensibles',
|
|
],
|
|
},
|
|
{
|
|
category: 'Mesures organisationnelles',
|
|
items: [
|
|
'Délégué à la Protection des Données (DPO) désigné',
|
|
'Formation régulière des employés',
|
|
'Politiques de sécurité documentées',
|
|
'Processus de gestion des incidents',
|
|
'Audits de conformité réguliers',
|
|
],
|
|
},
|
|
];
|
|
|
|
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"
|
|
>
|
|
<Globe className="w-5 h-5 text-brand-turquoise" />
|
|
<span className="text-white/90 text-sm font-medium">Conformité européenne</span>
|
|
</motion.div>
|
|
|
|
<h1 className="text-4xl lg:text-6xl font-bold text-white mb-6 leading-tight">
|
|
Conformité
|
|
<br />
|
|
<span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
|
|
RGPD
|
|
</span>
|
|
</h1>
|
|
|
|
<p className="text-xl text-white/80 mb-6 max-w-3xl mx-auto leading-relaxed">
|
|
Xpeditis s'engage à respecter le Règlement Général sur la Protection des Données (RGPD)
|
|
et à garantir vos droits en matière de protection des données personnelles.
|
|
</p>
|
|
|
|
<div className="flex items-center justify-center space-x-4">
|
|
<div className="flex items-center space-x-2 bg-white/10 px-4 py-2 rounded-lg">
|
|
<CheckCircle className="w-5 h-5 text-brand-green" />
|
|
<span className="text-white text-sm">Conforme RGPD</span>
|
|
</div>
|
|
<div className="flex items-center space-x-2 bg-white/10 px-4 py-2 rounded-lg">
|
|
<UserCheck className="w-5 h-5 text-brand-green" />
|
|
<span className="text-white text-sm">DPO désigné</span>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
|
|
{/* Your Rights */}
|
|
<section ref={contentRef} className="py-20">
|
|
<div className="max-w-7xl 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-16"
|
|
>
|
|
<h2 className="text-3xl lg:text-4xl font-bold text-brand-navy mb-4">
|
|
Vos droits RGPD
|
|
</h2>
|
|
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
|
Le RGPD vous confère des droits renforcés sur vos données personnelles
|
|
</p>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
animate={isContentInView ? 'visible' : 'hidden'}
|
|
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"
|
|
>
|
|
{rights.map((right, index) => {
|
|
const IconComponent = right.icon;
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
variants={itemVariants}
|
|
whileHover={{ y: -5 }}
|
|
className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100 hover:shadow-xl transition-all text-center"
|
|
>
|
|
<div className="w-16 h-16 bg-brand-turquoise/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<IconComponent className="w-8 h-8 text-brand-turquoise" />
|
|
</div>
|
|
<h3 className="text-xl font-bold text-brand-navy mb-3">{right.title}</h3>
|
|
<p className="text-gray-600">{right.description}</p>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
|
|
{/* Exercise Rights CTA */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
|
className="mt-12 text-center"
|
|
>
|
|
<p className="text-gray-600 mb-4">
|
|
Pour exercer vos droits, connectez-vous à votre compte ou contactez notre DPO
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-4">
|
|
<Link
|
|
href="/login"
|
|
className="px-6 py-3 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-colors font-medium"
|
|
>
|
|
Accéder à mon compte
|
|
</Link>
|
|
<a
|
|
href="mailto:dpo@xpeditis.com"
|
|
className="px-6 py-3 bg-brand-navy text-white rounded-lg hover:bg-brand-navy/90 transition-colors font-medium"
|
|
>
|
|
Contacter le DPO
|
|
</a>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Principles */}
|
|
<section className="py-20 bg-gray-50">
|
|
<div className="max-w-7xl 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="text-center mb-16"
|
|
>
|
|
<h2 className="text-3xl lg:text-4xl font-bold text-brand-navy mb-4">
|
|
Nos principes de protection des données
|
|
</h2>
|
|
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
|
Des principes fondamentaux qui guident notre traitement des données
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{principles.map((principle, index) => {
|
|
const IconComponent = principle.icon;
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
|
className="bg-white p-6 rounded-2xl shadow-lg border border-gray-100"
|
|
>
|
|
<div className="w-12 h-12 bg-brand-green/10 rounded-xl flex items-center justify-center mb-4">
|
|
<IconComponent className="w-6 h-6 text-brand-green" />
|
|
</div>
|
|
<h3 className="text-lg font-bold text-brand-navy mb-2">{principle.title}</h3>
|
|
<p className="text-gray-600 text-sm">{principle.description}</p>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Technical & Organizational Measures */}
|
|
<section className="py-20">
|
|
<div className="max-w-7xl 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="text-center mb-16"
|
|
>
|
|
<h2 className="text-3xl lg:text-4xl font-bold text-brand-navy mb-4">
|
|
Mesures de protection
|
|
</h2>
|
|
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
|
Des mesures techniques et organisationnelles pour assurer la sécurité de vos données
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
{measures.map((measure, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, x: index === 0 ? -30 : 30 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
className="bg-gradient-to-br from-brand-navy to-brand-navy/95 p-8 rounded-2xl"
|
|
>
|
|
<h3 className="text-xl font-bold text-white mb-6">{measure.category}</h3>
|
|
<ul className="space-y-4">
|
|
{measure.items.map((item, i) => (
|
|
<li key={i} className="flex items-center space-x-3 text-white/80">
|
|
<CheckCircle className="w-5 h-5 text-brand-turquoise flex-shrink-0" />
|
|
<span>{item}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Data Processing Register */}
|
|
<section className="py-20 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"
|
|
>
|
|
<div className="flex items-start space-x-4">
|
|
<div className="w-12 h-12 bg-brand-turquoise/10 rounded-xl flex items-center justify-center flex-shrink-0">
|
|
<FileText className="w-6 h-6 text-brand-turquoise" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-2xl font-bold text-brand-navy mb-4">
|
|
Registre des traitements
|
|
</h3>
|
|
<p className="text-gray-600 mb-6">
|
|
Conformément à l'article 30 du RGPD, nous tenons un registre des activités de traitement
|
|
des données personnelles. Ce registre documente :
|
|
</p>
|
|
<ul className="space-y-3 text-gray-600">
|
|
<li className="flex items-center space-x-3">
|
|
<CheckCircle className="w-5 h-5 text-brand-green flex-shrink-0" />
|
|
<span>Les finalités de chaque traitement</span>
|
|
</li>
|
|
<li className="flex items-center space-x-3">
|
|
<CheckCircle className="w-5 h-5 text-brand-green flex-shrink-0" />
|
|
<span>Les catégories de données traitées</span>
|
|
</li>
|
|
<li className="flex items-center space-x-3">
|
|
<CheckCircle className="w-5 h-5 text-brand-green flex-shrink-0" />
|
|
<span>Les destinataires des données</span>
|
|
</li>
|
|
<li className="flex items-center space-x-3">
|
|
<CheckCircle className="w-5 h-5 text-brand-green flex-shrink-0" />
|
|
<span>Les durées de conservation</span>
|
|
</li>
|
|
<li className="flex items-center space-x-3">
|
|
<CheckCircle className="w-5 h-5 text-brand-green flex-shrink-0" />
|
|
<span>Les mesures de sécurité appliquées</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Contact DPO */}
|
|
<section className="py-20">
|
|
<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-gradient-to-br from-brand-navy to-brand-navy/95 p-10 rounded-3xl text-center"
|
|
>
|
|
<UserCheck className="w-12 h-12 text-brand-turquoise mx-auto mb-4" />
|
|
<h3 className="text-2xl font-bold text-white mb-4">
|
|
Contacter notre DPO
|
|
</h3>
|
|
<p className="text-white/80 mb-6 max-w-2xl mx-auto">
|
|
Notre Délégué à la Protection des Données est à votre disposition pour toute question
|
|
relative au traitement de vos données personnelles ou à l'exercice de vos droits.
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-4">
|
|
<a
|
|
href="mailto:dpo@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>dpo@xpeditis.com</span>
|
|
</a>
|
|
<Link
|
|
href="/privacy"
|
|
className="px-6 py-3 bg-white text-brand-navy rounded-lg hover:bg-gray-100 transition-colors font-medium"
|
|
>
|
|
Politique de confidentialité
|
|
</Link>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
<LandingFooter />
|
|
</div>
|
|
);
|
|
}
|