230 lines
9.2 KiB
TypeScript
230 lines
9.2 KiB
TypeScript
'use client';
|
|
|
|
import { useRef } from 'react';
|
|
import { motion, useInView } from 'framer-motion';
|
|
import { Shield, Eye, Lock, UserCheck, Database, Globe, Mail, Calendar } from 'lucide-react';
|
|
import { LandingHeader, LandingFooter } from '@/components/layout';
|
|
|
|
export default function PrivacyPage() {
|
|
const heroRef = useRef(null);
|
|
const contentRef = useRef(null);
|
|
|
|
const isHeroInView = useInView(heroRef, { once: true });
|
|
const isContentInView = useInView(contentRef, { once: true });
|
|
|
|
const sections = [
|
|
{
|
|
icon: Database,
|
|
title: '1. Données collectées',
|
|
content: `Nous collectons les données suivantes :
|
|
|
|
• **Données d'identification** : nom, prénom, adresse email professionnelle, numéro de téléphone
|
|
• **Données professionnelles** : nom de l'entreprise, fonction, numéro SIRET
|
|
• **Données de connexion** : adresse IP, logs de connexion, données de navigation
|
|
• **Données de transaction** : historique des réservations, devis, factures
|
|
• **Données de communication** : échanges avec notre service client`,
|
|
},
|
|
{
|
|
icon: Eye,
|
|
title: '2. Utilisation des données',
|
|
content: `Vos données sont utilisées pour :
|
|
|
|
• Fournir et améliorer nos services de réservation de fret maritime
|
|
• Gérer votre compte et vos préférences
|
|
• Traiter vos demandes de devis et réservations
|
|
• Vous envoyer des communications commerciales (avec votre consentement)
|
|
• Assurer la sécurité de notre plateforme
|
|
• Respecter nos obligations légales et réglementaires`,
|
|
},
|
|
{
|
|
icon: Lock,
|
|
title: '3. Protection des données',
|
|
content: `Nous mettons en œuvre des mesures de sécurité robustes :
|
|
|
|
• Chiffrement SSL/TLS pour toutes les communications
|
|
• Chiffrement des données sensibles au repos (AES-256)
|
|
• Authentification à deux facteurs disponible
|
|
• Audits de sécurité réguliers
|
|
• Formation continue de nos équipes
|
|
• Hébergement sur des serveurs certifiés ISO 27001`,
|
|
},
|
|
{
|
|
icon: UserCheck,
|
|
title: '4. Vos droits',
|
|
content: `Conformément au RGPD, vous disposez des droits suivants :
|
|
|
|
• **Droit d'accès** : obtenir une copie de vos données personnelles
|
|
• **Droit de rectification** : corriger vos données inexactes
|
|
• **Droit à l'effacement** : demander la suppression de vos données
|
|
• **Droit à la portabilité** : recevoir vos données dans un format structuré
|
|
• **Droit d'opposition** : vous opposer au traitement de vos données
|
|
• **Droit de limitation** : limiter le traitement de vos données
|
|
|
|
Pour exercer ces droits, contactez-nous à : privacy@xpeditis.com`,
|
|
},
|
|
{
|
|
icon: Globe,
|
|
title: '5. Transferts internationaux',
|
|
content: `Vos données peuvent être transférées vers des pays hors UE dans le cadre de nos services de fret maritime international. Ces transferts sont encadrés par :
|
|
|
|
• Des clauses contractuelles types approuvées par la Commission européenne
|
|
• Des certifications adéquates (ex: Privacy Shield pour certains prestataires)
|
|
• Le consentement explicite pour certains transferts spécifiques`,
|
|
},
|
|
{
|
|
icon: Calendar,
|
|
title: '6. Conservation des données',
|
|
content: `Nous conservons vos données selon les durées suivantes :
|
|
|
|
• **Données de compte** : durée de la relation commerciale + 3 ans
|
|
• **Données de transaction** : 10 ans (obligations comptables)
|
|
• **Données de connexion** : 1 an
|
|
• **Données marketing** : 3 ans après le dernier contact
|
|
|
|
À l'expiration de ces délais, vos données sont supprimées ou anonymisées.`,
|
|
},
|
|
];
|
|
|
|
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"
|
|
>
|
|
<Shield className="w-5 h-5 text-brand-turquoise" />
|
|
<span className="text-white/90 text-sm font-medium">Protection des données</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">
|
|
Confidentialité
|
|
</span>
|
|
</h1>
|
|
|
|
<p className="text-xl text-white/80 mb-6 max-w-3xl mx-auto leading-relaxed">
|
|
Chez Xpeditis, la protection de vos données personnelles est une priorité absolue.
|
|
Cette politique explique comment nous collectons, utilisons et protégeons vos informations.
|
|
</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>
|
|
|
|
{/* Content Section */}
|
|
<section ref={contentRef} className="py-20">
|
|
<div className="max-w-4xl mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
animate={isContentInView ? 'visible' : 'hidden'}
|
|
className="space-y-12"
|
|
>
|
|
{sections.map((section, index) => {
|
|
const IconComponent = section.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 space-x-4">
|
|
<div className="w-12 h-12 bg-brand-turquoise/10 rounded-xl flex items-center justify-center flex-shrink-0">
|
|
<IconComponent className="w-6 h-6 text-brand-turquoise" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-2xl font-bold text-brand-navy mb-4">{section.title}</h2>
|
|
<div className="text-gray-600 leading-relaxed whitespace-pre-line prose prose-sm max-w-none">
|
|
{section.content.split('**').map((part, i) =>
|
|
i % 2 === 1 ? <strong key={i}>{part}</strong> : part
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.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 ?</h3>
|
|
<p className="text-white/80 mb-6">
|
|
Pour toute question concernant notre politique de confidentialité ou vos données personnelles,
|
|
contactez notre Délégué à la Protection des Données.
|
|
</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>
|
|
);
|
|
}
|