Dev #1

Merged
jessy-david-dev merged 7 commits from dev into main 2026-01-27 17:08:37 +00:00
2 changed files with 747 additions and 0 deletions
Showing only changes of commit dc3822da1e - Show all commits
+277
View File
@@ -0,0 +1,277 @@
"use client";
import { motion } from "framer-motion";
import { ArrowLeft, FileText, Scale, User } from "lucide-react";
import Link from "next/link";
export default function MentionsLegales() {
return (
<section className="min-h-screen py-20 bg-slate-900 relative overflow-hidden">
{/* Grid Background */}
<div
className="absolute inset-0 opacity-20"
style={{
backgroundImage:
"linear-gradient(to right, #1e293b 1px, transparent 1px), linear-gradient(to bottom, #1e293b 1px, transparent 1px)",
backgroundSize: "60px 60px",
}}
></div>
{/* Decorative blobs */}
<div className="absolute top-20 left-10 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl"></div>
<div className="absolute bottom-20 right-10 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl"></div>
<div className="container mx-auto px-4 max-w-4xl relative z-10">
{/* Back button */}
<motion.div
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.5 }}
className="mb-8"
>
<Link
href="/"
className="inline-flex items-center gap-2 text-slate-400 hover:text-white transition-colors group"
>
<ArrowLeft className="w-5 h-5 group-hover:-translate-x-1 transition-transform" />
Retour à l&apos;accueil
</Link>
</motion.div>
{/* Header */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
className="text-center mb-12"
>
<div className="inline-flex items-center gap-2 bg-linear-to-r from-blue-500/10 to-purple-500/10 rounded-full px-4 py-2 mb-4">
<Scale className="w-4 h-4 text-blue-400" />
<span className="text-sm font-semibold text-slate-300">
Informations légales
</span>
</div>
<h1 className="text-4xl md:text-5xl font-bold text-white mb-4">
Mentions Légales
</h1>
<p className="text-xl text-slate-400">
Conformément à la loi n° 2004-575 du 21 juin 2004 pour la confiance
dans l&apos;économie numérique
</p>
</motion.div>
{/* Content */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.2 }}
className="space-y-8"
>
{/* Éditeur du site */}
<div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-2xl p-6">
<div className="flex items-center gap-3 mb-4">
<div className="p-2 bg-blue-500/20 rounded-lg">
<User className="w-5 h-5 text-blue-400" />
</div>
<h2 className="text-xl font-bold text-white">
1. Éditeur du site
</h2>
</div>
<div className="text-slate-300 space-y-2">
<p>
<strong>Nom :</strong> Jessy DAVID
</p>
<p>
<strong>Adresse :</strong> Angers, France
</p>
<p>
<strong>Email :</strong>{" "}
<a
href="mailto:contact@jessy-david.dev"
className="text-blue-400 hover:text-blue-300 transition-colors"
>
contact@jessy-david.dev
</a>
</p>
<p>
<strong>Site web :</strong>{" "}
<a
href="https://jessy-david.dev"
className="text-blue-400 hover:text-blue-300 transition-colors"
>
https://jessy-david.dev
</a>
</p>
</div>
</div>
{/* Hébergeur */}
<div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-2xl p-6">
<div className="flex items-center gap-3 mb-4">
<div className="p-2 bg-purple-500/20 rounded-lg">
<FileText className="w-5 h-5 text-purple-400" />
</div>
<h2 className="text-xl font-bold text-white">2. Hébergeur</h2>
</div>
<div className="text-slate-300 space-y-2">
<p>
<strong>Nom :</strong> QuantumCraft Studios
</p>
<p>
<strong>Adresse :</strong> 58 RUE DE MONCEAU 75008 PARIS, FRANCE
</p>
<p>
<strong>Site web :</strong>{" "}
<a
href="https://quantumcraft-studios.com"
className="text-blue-400 hover:text-blue-300 transition-colors"
>
https://quantumcraft-studios.com
</a>
</p>
</div>
</div>
{/* Propriété intellectuelle */}
<div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-2xl p-6">
<h2 className="text-xl font-bold text-white mb-4">
3. Propriété intellectuelle
</h2>
<div className="text-slate-300 space-y-4">
<p>
L&apos;ensemble du contenu de ce site (textes, images, vidéos,
logos, graphismes, etc.) est la propriété exclusive de Jessy
DAVID, sauf mention contraire. Toute reproduction,
représentation, modification, publication, adaptation de tout ou
partie des éléments du site, quel que soit le moyen ou le
procédé utilisé, est interdite sans l&apos;autorisation écrite
préalable de Jessy DAVID.
</p>
<p>
Toute exploitation non autorisée du site ou de l&apos;un
quelconque des éléments qu&apos;il contient sera considérée
comme constitutive d&apos;une contrefaçon et poursuivie
conformément aux dispositions des articles L.335-2 et suivants
du Code de Propriété Intellectuelle.
</p>
</div>
</div>
{/* Limitation de responsabilité */}
<div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-2xl p-6">
<h2 className="text-xl font-bold text-white mb-4">
4. Limitation de responsabilité
</h2>
<div className="text-slate-300 space-y-4">
<p>
Jessy DAVID s&apos;efforce d&apos;assurer au mieux de ses
possibilités l&apos;exactitude et la mise à jour des
informations diffusées sur ce site, dont il se réserve le droit
de corriger, à tout moment et sans préavis, le contenu.
Toutefois, Jessy DAVID ne peut garantir l&apos;exactitude, la
précision ou l&apos;exhaustivité des informations mises à
disposition sur ce site.
</p>
<p>
En conséquence, Jessy DAVID décline toute responsabilité pour
toute imprécision, inexactitude ou omission portant sur des
informations disponibles sur ce site.
</p>
</div>
</div>
{/* Liens hypertextes */}
<div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-2xl p-6">
<h2 className="text-xl font-bold text-white mb-4">
5. Liens hypertextes
</h2>
<div className="text-slate-300 space-y-4">
<p>
Le site jessy-david.dev peut contenir des liens hypertextes vers
d&apos;autres sites. Jessy DAVID n&apos;exerce aucun contrôle
sur ces sites et décline toute responsabilité quant à leur
contenu. La décision d&apos;activer les liens appartient
exclusivement aux visiteurs du site.
</p>
</div>
</div>
{/* Protection des données */}
<div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-2xl p-6">
<h2 className="text-xl font-bold text-white mb-4">
6. Protection des données personnelles
</h2>
<div className="text-slate-300 space-y-4">
<p>
Conformément au Règlement Général sur la Protection des Données
(RGPD) et à la loi n° 78-17 du 6 janvier 1978 modifiée (loi
Informatique et Libertés), vous disposez d&apos;un droit
d&apos;accès, de rectification, de suppression et
d&apos;opposition aux données personnelles vous concernant.
</p>
<p>
Pour plus d&apos;informations sur la collecte et le traitement
de vos données, veuillez consulter la{" "}
<Link
href="/politique-de-confidentialite"
className="text-blue-400 hover:text-blue-300 transition-colors"
>
Politique de Confidentialité
</Link>
.
</p>
<p>
Pour exercer vos droits, vous pouvez me contacter à
l&apos;adresse suivante :{" "}
<a
href="mailto:contact@jessy-david.dev"
className="text-blue-400 hover:text-blue-300 transition-colors"
>
contact@jessy-david.dev
</a>
</p>
</div>
</div>
{/* Cookies */}
<div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-2xl p-6">
<h2 className="text-xl font-bold text-white mb-4">7. Cookies</h2>
<div className="text-slate-300 space-y-4">
<p>
Ce site utilise des cookies pour améliorer l&apos;expérience
utilisateur. Pour plus d&apos;informations sur
l&apos;utilisation des cookies, veuillez consulter la{" "}
<Link
href="/politique-de-confidentialite"
className="text-blue-400 hover:text-blue-300 transition-colors"
>
Politique de Confidentialité
</Link>
.
</p>
</div>
</div>
{/* Loi applicable */}
<div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-2xl p-6">
<h2 className="text-xl font-bold text-white mb-4">
8. Droit applicable et juridiction
</h2>
<div className="text-slate-300 space-y-4">
<p>
Les présentes mentions légales sont régies par le droit
français. En cas de litige, les tribunaux français seront seuls
compétents.
</p>
</div>
</div>
{/* Date de mise à jour */}
<div className="text-center text-slate-500 text-sm pt-8">
Dernière mise à jour : Janvier 2026
</div>
</motion.div>
</div>
</section>
);
}
+470
View File
@@ -0,0 +1,470 @@
"use client";
import { motion } from "framer-motion";
import {
ArrowLeft,
Cookie,
Database,
Eye,
Lock,
Mail,
Shield,
UserCheck,
} from "lucide-react";
import Link from "next/link";
export default function PolitiqueDeConfidentialite() {
return (
<section className="min-h-screen py-20 bg-slate-900 relative overflow-hidden">
{/* Grid Background */}
<div
className="absolute inset-0 opacity-20"
style={{
backgroundImage:
"linear-gradient(to right, #1e293b 1px, transparent 1px), linear-gradient(to bottom, #1e293b 1px, transparent 1px)",
backgroundSize: "60px 60px",
}}
></div>
{/* Decorative blobs */}
<div className="absolute top-20 left-10 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl"></div>
<div className="absolute bottom-20 right-10 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl"></div>
<div className="container mx-auto px-4 max-w-4xl relative z-10">
{/* Back button */}
<motion.div
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.5 }}
className="mb-8"
>
<Link
href="/"
className="inline-flex items-center gap-2 text-slate-400 hover:text-white transition-colors group"
>
<ArrowLeft className="w-5 h-5 group-hover:-translate-x-1 transition-transform" />
Retour à l&apos;accueil
</Link>
</motion.div>
{/* Header */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
className="text-center mb-12"
>
<div className="inline-flex items-center gap-2 bg-linear-to-r from-blue-500/10 to-purple-500/10 rounded-full px-4 py-2 mb-4">
<Shield className="w-4 h-4 text-blue-400" />
<span className="text-sm font-semibold text-slate-300">
Protection de vos données
</span>
</div>
<h1 className="text-4xl md:text-5xl font-bold text-white mb-4">
Politique de Confidentialité
</h1>
<p className="text-xl text-slate-400">
Conformément au RGPD et à la loi n° 78-17 du 6 janvier 1978 modifiée
</p>
</motion.div>
{/* Content */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.2 }}
className="space-y-8"
>
{/* Introduction */}
<div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-2xl p-6">
<div className="flex items-center gap-3 mb-4">
<div className="p-2 bg-blue-500/20 rounded-lg">
<Lock className="w-5 h-5 text-blue-400" />
</div>
<h2 className="text-xl font-bold text-white">1. Introduction</h2>
</div>
<div className="text-slate-300 space-y-4">
<p>
La présente politique de confidentialité a pour but
d&apos;informer les utilisateurs du site jessy-david.dev de la
manière dont leurs données personnelles sont collectées,
traitées et protégées, conformément au Règlement Général sur la
Protection des Données (RGPD - Règlement UE 2016/679) et à la
loi n° 78-17 du 6 janvier 1978 relative à l&apos;informatique,
aux fichiers et aux libertés, modifiée par la loi n° 2004-801 du
6 août 2004.
</p>
<p>
<strong>Responsable du traitement :</strong> Jessy DAVID
<br />
<strong>Email :</strong>{" "}
<a
href="mailto:contact@jessy-david.dev"
className="text-blue-400 hover:text-blue-300 transition-colors"
>
contact@jessy-david.dev
</a>
</p>
</div>
</div>
{/* Données collectées */}
<div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-2xl p-6">
<div className="flex items-center gap-3 mb-4">
<div className="p-2 bg-purple-500/20 rounded-lg">
<Database className="w-5 h-5 text-purple-400" />
</div>
<h2 className="text-xl font-bold text-white">
2. Données personnelles collectées
</h2>
</div>
<div className="text-slate-300 space-y-4">
<p>
Je collecte les données personnelles suivantes dans le cadre de
l&apos;utilisation de ce site :
</p>
<div className="bg-slate-900/50 rounded-xl p-4">
<h3 className="font-semibold text-white mb-3">
Via le formulaire de contact :
</h3>
<ul className="list-disc list-inside space-y-2 text-slate-400">
<li>
<strong>Nom et prénom</strong> - pour vous identifier
</li>
<li>
<strong>Adresse email</strong> - pour vous répondre
</li>
<li>
<strong>Message</strong> - pour comprendre votre demande
</li>
</ul>
</div>
<div className="bg-slate-900/50 rounded-xl p-4">
<h3 className="font-semibold text-white mb-3">
Données techniques automatiquement collectées :
</h3>
<ul className="list-disc list-inside space-y-2 text-slate-400">
<li>Adresse IP (anonymisée)</li>
<li>Type de navigateur et système d&apos;exploitation</li>
<li>Pages visitées et durée de visite</li>
<li>
Source de trafic (moteur de recherche, lien direct, etc.)
</li>
</ul>
</div>
</div>
</div>
{/* Finalités */}
<div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-2xl p-6">
<div className="flex items-center gap-3 mb-4">
<div className="p-2 bg-green-500/20 rounded-lg">
<Eye className="w-5 h-5 text-green-400" />
</div>
<h2 className="text-xl font-bold text-white">
3. Finalités du traitement
</h2>
</div>
<div className="text-slate-300 space-y-4">
<p>
Les données personnelles sont collectées pour les finalités
suivantes :
</p>
<ul className="list-disc list-inside space-y-2 text-slate-400">
<li>
<strong>Répondre à vos demandes de contact</strong> - Base
légale : consentement
</li>
<li>
<strong>Améliorer l&apos;expérience utilisateur</strong> -
Base légale : intérêt légitime
</li>
<li>
<strong>Analyser les statistiques de fréquentation</strong> -
Base légale : consentement (cookies)
</li>
<li>
<strong>Assurer la sécurité du site</strong> (protection
anti-spam via Cloudflare Turnstile) - Base légale : intérêt
légitime
</li>
</ul>
</div>
</div>
{/* Durée de conservation */}
<div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-2xl p-6">
<h2 className="text-xl font-bold text-white mb-4">
4. Durée de conservation des données
</h2>
<div className="text-slate-300 space-y-4">
<p>
Vos données personnelles sont conservées pour une durée limitée
:
</p>
<ul className="list-disc list-inside space-y-2 text-slate-400">
<li>
<strong>Données du formulaire de contact :</strong> 3 ans à
compter du dernier contact
</li>
<li>
<strong>Cookies analytiques :</strong> 13 mois maximum
</li>
<li>
<strong>Logs de sécurité :</strong> 12 mois
</li>
</ul>
<p>
À l&apos;expiration de ces délais, vos données sont supprimées
ou anonymisées.
</p>
</div>
</div>
{/* Destinataires */}
<div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-2xl p-6">
<h2 className="text-xl font-bold text-white mb-4">
5. Destinataires des données
</h2>
<div className="text-slate-300 space-y-4">
<p>
Vos données personnelles sont strictement confidentielles et ne
sont communiquées qu&apos;aux destinataires suivants :
</p>
<ul className="list-disc list-inside space-y-2 text-slate-400">
<li>
<strong>Jessy DAVID</strong> - Responsable du traitement
</li>
<li>
<strong>Hébergeur (QuantumCraft Studios)</strong> - pour le
stockage technique
</li>
<li>
<strong>Cloudflare</strong> - pour la protection anti-spam
(Turnstile)
</li>
<li>
<strong>Fournisseur d&apos;emails</strong> - pour l&apos;envoi
des messages de contact
</li>
</ul>
<p>
Je ne vends, ne loue, ni ne partage vos données personnelles
avec des tiers à des fins commerciales.
</p>
</div>
</div>
{/* Transferts hors UE */}
<div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-2xl p-6">
<h2 className="text-xl font-bold text-white mb-4">
6. Transferts de données hors UE
</h2>
<div className="text-slate-300 space-y-4">
<p>
Certains de mes prestataires (hébergeur, Cloudflare) peuvent
être situés en dehors de l&apos;Union Européenne. Dans ce cas,
je m&apos;assure que ces transferts sont encadrés par des
garanties appropriées conformément au RGPD (Clauses
Contractuelles Types, Data Privacy Framework, etc.).
</p>
</div>
</div>
{/* Cookies */}
<div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-2xl p-6">
<div className="flex items-center gap-3 mb-4">
<div className="p-2 bg-orange-500/20 rounded-lg">
<Cookie className="w-5 h-5 text-orange-400" />
</div>
<h2 className="text-xl font-bold text-white">
7. Cookies et traceurs
</h2>
</div>
<div className="text-slate-300 space-y-4">
<p>
Ce site utilise des cookies pour assurer son bon fonctionnement
et améliorer votre expérience de navigation.
</p>
<div className="bg-slate-900/50 rounded-xl p-4">
<h3 className="font-semibold text-white mb-3">
Cookies strictement nécessaires (exemptés de consentement) :
</h3>
<ul className="list-disc list-inside space-y-2 text-slate-400">
<li>
<strong>Session</strong> - Maintien de la session de
navigation
</li>
<li>
<strong>Sécurité (Cloudflare Turnstile)</strong> -
Protection anti-spam
</li>
<li>
<strong>Préférences cookies</strong> - Mémorisation de vos
choix
</li>
</ul>
</div>
<div className="bg-slate-900/50 rounded-xl p-4">
<h3 className="font-semibold text-white mb-3">
Cookies analytiques (soumis à consentement) :
</h3>
<ul className="list-disc list-inside space-y-2 text-slate-400">
<li>
<strong>Google Analytics</strong> - Analyse du trafic et
comportement des visiteurs
</li>
</ul>
</div>
<p>
Vous pouvez à tout moment modifier vos préférences en matière de
cookies via la bannière de gestion des cookies accessible depuis
le bas de page.
</p>
</div>
</div>
{/* Droits des utilisateurs */}
<div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-2xl p-6">
<div className="flex items-center gap-3 mb-4">
<div className="p-2 bg-cyan-500/20 rounded-lg">
<UserCheck className="w-5 h-5 text-cyan-400" />
</div>
<h2 className="text-xl font-bold text-white">8. Vos droits</h2>
</div>
<div className="text-slate-300 space-y-4">
<p>
Conformément au RGPD et à la loi Informatique et Libertés, vous
disposez des droits suivants sur vos données personnelles :
</p>
<ul className="list-disc list-inside space-y-2 text-slate-400">
<li>
<strong>Droit d&apos;accès</strong> - Obtenir une copie de vos
données
</li>
<li>
<strong>Droit de rectification</strong> - Corriger des données
inexactes
</li>
<li>
<strong>Droit à l&apos;effacement</strong> - Demander la
suppression de vos données
</li>
<li>
<strong>Droit à la limitation</strong> - Limiter le traitement
de vos données
</li>
<li>
<strong>Droit d&apos;opposition</strong> - Vous opposer au
traitement
</li>
<li>
<strong>Droit à la portabilité</strong> - Recevoir vos données
dans un format structuré
</li>
<li>
<strong>Droit de retirer votre consentement</strong> - À tout
moment
</li>
</ul>
<div className="bg-blue-500/10 border border-blue-500/20 rounded-xl p-4 mt-4">
<p className="flex items-start gap-2">
<Mail className="w-5 h-5 text-blue-400 mt-0.5 shrink-0" />
<span>
Pour exercer vos droits, contactez-moi à :{" "}
<a
href="mailto:contact@jessy-david.dev"
className="text-blue-400 hover:text-blue-300 transition-colors"
>
contact@jessy-david.dev
</a>
<br />
Je répondrai à votre demande dans un délai maximum de 30
jours.
</span>
</p>
</div>
</div>
</div>
{/* Réclamation CNIL */}
<div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-2xl p-6">
<h2 className="text-xl font-bold text-white mb-4">
9. Réclamation auprès de la CNIL
</h2>
<div className="text-slate-300 space-y-4">
<p>
Si vous estimez que le traitement de vos données personnelles
constitue une violation de vos droits, vous pouvez introduire
une réclamation auprès de la Commission Nationale de
l&apos;Informatique et des Libertés (CNIL) :
</p>
<div className="bg-slate-900/50 rounded-xl p-4">
<p>
<strong>CNIL</strong>
</p>
<p>3 Place de Fontenoy - TSA 80715</p>
<p>75334 PARIS CEDEX 07</p>
<p>
Site web :{" "}
<a
href="https://www.cnil.fr"
target="_blank"
rel="noopener noreferrer"
className="text-blue-400 hover:text-blue-300 transition-colors"
>
www.cnil.fr
</a>
</p>
</div>
</div>
</div>
{/* Sécurité */}
<div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-2xl p-6">
<h2 className="text-xl font-bold text-white mb-4">
10. Sécurité des données
</h2>
<div className="text-slate-300 space-y-4">
<p>
Je mets en œuvre toutes les mesures techniques et
organisationnelles appropriées pour garantir un niveau de
sécurité adapté au risque :
</p>
<ul className="list-disc list-inside space-y-2 text-slate-400">
<li>Chiffrement SSL/TLS des communications</li>
<li>Protection contre les attaques (Cloudflare)</li>
<li>Accès restreint aux données personnelles</li>
<li>Mises à jour régulières de sécurité</li>
</ul>
</div>
</div>
{/* Modifications */}
<div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-2xl p-6">
<h2 className="text-xl font-bold text-white mb-4">
11. Modifications de la politique
</h2>
<div className="text-slate-300 space-y-4">
<p>
Je me réserve le droit de modifier cette politique de
confidentialité à tout moment. En cas de modification
substantielle, je vous en informerai par une notification
visible sur ce site. La date de dernière mise à jour sera
toujours indiquée en bas de cette page.
</p>
</div>
</div>
{/* Date de mise à jour */}
<div className="text-center text-slate-500 text-sm pt-8">
Dernière mise à jour : Janvier 2026
</div>
</motion.div>
</div>
</section>
);
}