Lou/test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ajout des page RGPD

Browse Source
This commit is contained in:
SarTron-NorthBlue
2025-11-14 17:33:19 +04:00
parent bed824059a
commit eeae058233
5 changed files with 675 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
app/mentions-legales/page.tsx Normal file
View File

@@ -0,0 +1,155 @@
'use client'
import { motion } from 'framer-motion'
import { Shield, FileText } from 'lucide-react'
import BackgroundAnimations from '@/components/BackgroundAnimations'
export default function MentionsLegales() {
return (
<section className="section-padding bg-security-dark relative overflow-hidden min-h-screen pt-32">
<BackgroundAnimations variant="default" />
<div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
className="max-w-4xl mx-auto"
>
{/* Header */}
<div className="text-center mb-12">
<motion.div
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ delay: 0.2 }}
className="inline-flex items-center justify-center w-20 h-20 bg-security-accent/10 border border-security-accent/30 rounded-2xl mb-6"
>
<FileText className="w-10 h-10 text-security-accent" />
</motion.div>
<h1 className="text-5xl md:text-6xl font-black mb-6 text-white">
Mentions <span className="gradient-text">Légales</span>
</h1>
<p className="text-xl text-gray-400">
Informations légales concernant le site runlock.re
</p>
</div>
{/* Content */}
<div className="card-dark p-8 md:p-10 rounded-3xl space-y-8">
<section>
<h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
<Shield className="w-6 h-6 text-security-accent" />
<span>1. Éditeur du site</span>
</h2>
<div className="text-gray-300 leading-relaxed space-y-2">
<p><strong className="text-white">Raison sociale :</strong> NorthBlue</p>
<p><strong className="text-white">Site web :</strong> runlock.re</p>
<p><strong className="text-white">Email :</strong> contact@runlock.re</p>
<p><strong className="text-white">Téléphone :</strong> 0693 51 15 58</p>
<p><strong className="text-white">Localisation :</strong> La Réunion (974)</p>
</div>
</section>
<section>
<h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
<Shield className="w-6 h-6 text-security-accent" />
<span>2. Directeur de la publication</span>
</h2>
<div className="text-gray-300 leading-relaxed">
<p>Le directeur de la publication est le représentant légal de NorthBlue.</p>
</div>
</section>
<section>
<h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
<Shield className="w-6 h-6 text-security-accent" />
<span>3. Hébergement</span>
</h2>
<div className="text-gray-300 leading-relaxed">
<p>Le site runlock.re est hébergé par :</p>
<ul className="list-disc list-inside mt-2 space-y-1 ml-4">
<li>OVH</li>
<li>2 rue Kellermann - 59100 Roubaix - France</li>
<li>Site web : <a href="https://www.ovh.com" target="_blank" rel="noopener noreferrer" className="text-security-accent hover:underline">www.ovh.com</a></li>
</ul>
</div>
</section>
<section>
<h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
<Shield className="w-6 h-6 text-security-accent" />
<span>4. Propriété intellectuelle</span>
</h2>
<div className="text-gray-300 leading-relaxed space-y-2">
<p>
L'ensemble des contenus présents sur le site runlock.re (textes, images, logos, graphismes, icônes, etc.)
est la propriété exclusive de NorthBlue ou de ses partenaires, sauf mention contraire.
</p>
<p>
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 autorisation écrite préalable de NorthBlue.
</p>
<p>
Toute exploitation non autorisée du site ou de son contenu engage la responsabilité civile et/ou pénale
de l'utilisateur et peut entraîner des poursuites judiciaires.
</p>
</div>
</section>
<section>
<h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
<Shield className="w-6 h-6 text-security-accent" />
<span>5. Limitations de responsabilité</span>
</h2>
<div className="text-gray-300 leading-relaxed space-y-2">
<p>
NorthBlue s'efforce de fournir des informations aussi précises que possible sur le site runlock.re.
Toutefois, elle ne pourra être tenue responsable des omissions, des inexactitudes et des carences
dans la mise à jour, qu'elles soient de son fait ou du fait des tiers partenaires qui lui fournissent ces informations.
</p>
<p>
Toutes les informations indiquées sur le site runlock.re sont données à titre indicatif et sont susceptibles d'évoluer.
Par ailleurs, les renseignements figurant sur le site runlock.re ne sont pas exhaustifs.
</p>
</div>
</section>
<section>
<h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
<Shield className="w-6 h-6 text-security-accent" />
<span>6. Droit applicable</span>
</h2>
<div className="text-gray-300 leading-relaxed">
<p>
Les présentes mentions légales sont régies par le droit français.
En cas de litige et à défaut d'accord amiable, le litige sera porté devant les tribunaux français
conformément aux règles de compétence en vigueur.
</p>
</div>
</section>
<section>
<h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
<Shield className="w-6 h-6 text-security-accent" />
<span>7. Contact</span>
</h2>
<div className="text-gray-300 leading-relaxed">
<p>
Pour toute question concernant les présentes mentions légales, vous pouvez nous contacter :
</p>
<ul className="list-disc list-inside mt-2 space-y-1 ml-4">
<li>Par email : <a href="mailto:contact@runlock.re" className="text-security-accent hover:underline">contact@runlock.re</a></li>
<li>Par téléphone : <a href="tel:0693511558" className="text-security-accent hover:underline">0693 51 15 58</a></li>
</ul>
</div>
</section>
<div className="pt-6 border-t border-security-border text-sm text-gray-400">
<p>Dernière mise à jour : {new Date().toLocaleDateString('fr-FR', { year: 'numeric', month: 'long', day: 'numeric' })}</p>
</div>
</div>
</motion.div>
</div>
</section>
)
}

192
app/politique-confidentialite/page.tsx Normal file
View File

@@ -0,0 +1,192 @@
'use client'
import { motion } from 'framer-motion'
import { Shield, Lock, Eye, Database } from 'lucide-react'
import BackgroundAnimations from '@/components/BackgroundAnimations'
export default function PolitiqueConfidentialite() {
return (
<section className="section-padding bg-security-dark relative overflow-hidden min-h-screen pt-32">
<BackgroundAnimations variant="particles" />
<div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
className="max-w-4xl mx-auto"
>
{/* Header */}
<div className="text-center mb-12">
<motion.div
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ delay: 0.2 }}
className="inline-flex items-center justify-center w-20 h-20 bg-security-accent/10 border border-security-accent/30 rounded-2xl mb-6"
>
<Lock className="w-10 h-10 text-security-accent" />
</motion.div>
<h1 className="text-5xl md:text-6xl font-black mb-6 text-white">
Politique de <span className="gradient-text">Confidentialité</span>
</h1>
<p className="text-xl text-gray-400">
Protection et utilisation de vos données personnelles
</p>
</div>
{/* Content */}
<div className="card-dark p-8 md:p-10 rounded-3xl space-y-8">
<section>
<p className="text-gray-300 leading-relaxed mb-6">
La présente politique de confidentialité décrit la manière dont NorthBlue, exploitant le site runlock.re,
collecte, utilise et protège les informations personnelles que vous nous fournissez lors de l'utilisation de notre site web.
</p>
</section>
<section>
<h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
<Eye className="w-6 h-6 text-security-accent" />
<span>1. Collecte des données personnelles</span>
</h2>
<div className="text-gray-300 leading-relaxed space-y-2">
<p>
Nous collectons les informations suivantes lorsque vous utilisez notre formulaire de contact :
</p>
<ul className="list-disc list-inside ml-4 space-y-1">
<li>Nom et prénom</li>
<li>Adresse email</li>
<li>Nom de l'entreprise (optionnel)</li>
<li>Service souhaité</li>
<li>Message</li>
<li>Numéro de téléphone (si fourni)</li>
</ul>
</div>
</section>
<section>
<h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
<Database className="w-6 h-6 text-security-accent" />
<span>2. Utilisation des données</span>
</h2>
<div className="text-gray-300 leading-relaxed space-y-2">
<p>Les données collectées sont utilisées pour :</p>
<ul className="list-disc list-inside ml-4 space-y-1">
<li>Répondre à vos demandes et questions</li>
<li>Vous contacter concernant nos services</li>
<li>Améliorer nos services et votre expérience utilisateur</li>
<li>Respecter nos obligations légales et réglementaires</li>
</ul>
</div>
</section>
<section>
<h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
<Shield className="w-6 h-6 text-security-accent" />
<span>3. Protection des données</span>
</h2>
<div className="text-gray-300 leading-relaxed space-y-2">
<p>
NorthBlue s'engage à protéger vos données personnelles. Nous mettons en œuvre des mesures techniques
et organisationnelles appropriées pour garantir la sécurité de vos informations.
</p>
<p>
Vos données sont stockées de manière sécurisée et ne sont accessibles qu'aux personnes autorisées
ayant besoin d'y accéder pour répondre à vos demandes.
</p>
<p>
Nous ne vendons, ne louons ni ne partageons vos données personnelles avec des tiers à des fins commerciales.
</p>
</div>
</section>
<section>
<h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
<Lock className="w-6 h-6 text-security-accent" />
<span>4. Conservation des données</span>
</h2>
<div className="text-gray-300 leading-relaxed">
<p>
Vos données personnelles sont conservées pendant la durée nécessaire aux finalités pour lesquelles
elles ont été collectées, conformément à la réglementation en vigueur.
</p>
<p className="mt-2">
Vous pouvez à tout moment demander la suppression de vos données en nous contactant à l'adresse
<a href="mailto:contact@runlock.re" className="text-security-accent hover:underline ml-1">contact@runlock.re</a>.
</p>
</div>
</section>
<section>
<h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
<Shield className="w-6 h-6 text-security-accent" />
<span>5. Vos droits</span>
</h2>
<div className="text-gray-300 leading-relaxed space-y-2">
<p>Conformément au Règlement Général sur la Protection des Données (RGPD), vous disposez des droits suivants :</p>
<ul className="list-disc list-inside ml-4 space-y-1">
<li><strong className="text-white">Droit d'accès :</strong> Vous pouvez demander l'accès à vos données personnelles</li>
<li><strong className="text-white">Droit de rectification :</strong> Vous pouvez demander la correction de vos données</li>
<li><strong className="text-white">Droit à l'effacement :</strong> Vous pouvez demander la suppression de vos données</li>
<li><strong className="text-white">Droit d'opposition :</strong> Vous pouvez vous opposer au traitement de vos données</li>
<li><strong className="text-white">Droit à la portabilité :</strong> Vous pouvez demander la récupération de vos données</li>
<li><strong className="text-white">Droit de limitation :</strong> Vous pouvez demander la limitation du traitement</li>
</ul>
<p className="mt-2">
Pour exercer ces droits, contactez-nous à :
<a href="mailto:contact@runlock.re" className="text-security-accent hover:underline ml-1">contact@runlock.re</a>
</p>
</div>
</section>
<section>
<h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
<Lock className="w-6 h-6 text-security-accent" />
<span>6. Cookies</span>
</h2>
<div className="text-gray-300 leading-relaxed">
<p>
Le site runlock.re utilise des cookies techniques nécessaires au bon fonctionnement du site.
Ces cookies ne nécessitent pas de consentement préalable.
</p>
</div>
</section>
<section>
<h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
<Shield className="w-6 h-6 text-security-accent" />
<span>7. Modifications</span>
</h2>
<div className="text-gray-300 leading-relaxed">
<p>
NorthBlue se réserve le droit de modifier la présente politique de confidentialité à tout moment.
Les modifications entrent en vigueur dès leur publication sur le site.
</p>
</div>
</section>
<section>
<h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
<Shield className="w-6 h-6 text-security-accent" />
<span>8. Contact</span>
</h2>
<div className="text-gray-300 leading-relaxed">
<p>
Pour toute question concernant cette politique de confidentialité ou pour exercer vos droits,
vous pouvez nous contacter :
</p>
<ul className="list-disc list-inside mt-2 space-y-1 ml-4">
<li>Par email : <a href="mailto:contact@runlock.re" className="text-security-accent hover:underline">contact@runlock.re</a></li>
<li>Par téléphone : <a href="tel:0693511558" className="text-security-accent hover:underline">0693 51 15 58</a></li>
</ul>
</div>
</section>
<div className="pt-6 border-t border-security-border text-sm text-gray-400">
<p>Dernière mise à jour : {new Date().toLocaleDateString('fr-FR', { year: 'numeric', month: 'long', day: 'numeric' })}</p>
</div>
</div>
</motion.div>
</div>
</section>
)
}

278
app/rgpd/page.tsx Normal file
View File

@@ -0,0 +1,278 @@
'use client'
import { motion } from 'framer-motion'
import { Shield, CheckCircle, FileCheck, AlertCircle } from 'lucide-react'
import BackgroundAnimations from '@/components/BackgroundAnimations'
export default function RGPD() {
return (
<section className="section-padding bg-security-dark relative overflow-hidden min-h-screen pt-32">
<BackgroundAnimations variant="gradient" />
<div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
className="max-w-4xl mx-auto"
>
{/* Header */}
<div className="text-center mb-12">
<motion.div
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ delay: 0.2 }}
className="inline-flex items-center justify-center w-20 h-20 bg-security-accent/10 border border-security-accent/30 rounded-2xl mb-6"
>
<FileCheck className="w-10 h-10 text-security-accent" />
</motion.div>
<h1 className="text-5xl md:text-6xl font-black mb-6 text-white">
Conformité <span className="gradient-text">RGPD</span>
</h1>
<p className="text-xl text-gray-400">
Notre engagement en matière de protection des données personnelles
</p>
</div>
{/* Content */}
<div className="card-dark p-8 md:p-10 rounded-3xl space-y-8">
<section>
<p className="text-gray-300 leading-relaxed mb-6">
NorthBlue, exploitant le site runlock.re, s'engage à respecter le Règlement Général sur la Protection des Données (RGPD)
entré en vigueur le 25 mai 2018. Cette page détaille nos pratiques et notre conformité à cette réglementation.
</p>
</section>
<section>
<h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
<CheckCircle className="w-6 h-6 text-security-accent" />
<span>1. Responsable du traitement</span>
</h2>
<div className="text-gray-300 leading-relaxed space-y-2">
<p><strong className="text-white">Responsable :</strong> NorthBlue</p>
<p><strong className="text-white">Email :</strong> <a href="mailto:contact@runlock.re" className="text-security-accent hover:underline">contact@runlock.re</a></p>
<p><strong className="text-white">Téléphone :</strong> <a href="tel:0693511558" className="text-security-accent hover:underline">0693 51 15 58</a></p>
<p><strong className="text-white">Localisation :</strong> La Réunion (974)</p>
</div>
</section>
<section>
<h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
<Shield className="w-6 h-6 text-security-accent" />
<span>2. Données collectées et finalités</span>
</h2>
<div className="text-gray-300 leading-relaxed space-y-3">
<p>Nous collectons et traitons les données suivantes :</p>
<div className="bg-security-card p-4 rounded-xl border border-security-border">
<h3 className="text-white font-semibold mb-2">Données de contact</h3>
<ul className="list-disc list-inside ml-4 space-y-1 text-sm">
<li>Nom et prénom</li>
<li>Adresse email</li>
<li>Numéro de téléphone (optionnel)</li>
<li>Nom de l'entreprise (optionnel)</li>
</ul>
<p className="text-sm mt-2 text-gray-400">
<strong>Finalité :</strong> Répondre à vos demandes et vous contacter concernant nos services
</p>
<p className="text-sm text-gray-400">
<strong>Base légale :</strong> Consentement et intérêt légitime
</p>
</div>
<div className="bg-security-card p-4 rounded-xl border border-security-border">
<h3 className="text-white font-semibold mb-2">Données de navigation</h3>
<ul className="list-disc list-inside ml-4 space-y-1 text-sm">
<li>Adresse IP (anonymisée)</li>
<li>Cookies techniques</li>
<li>Données de connexion</li>
</ul>
<p className="text-sm mt-2 text-gray-400">
<strong>Finalité :</strong> Assurer le bon fonctionnement du site et améliorer l'expérience utilisateur
</p>
<p className="text-sm text-gray-400">
<strong>Base légale :</strong> Intérêt légitime
</p>
</div>
</div>
</section>
<section>
<h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
<Shield className="w-6 h-6 text-security-accent" />
<span>3. Durée de conservation</span>
</h2>
<div className="text-gray-300 leading-relaxed space-y-2">
<p>Les données personnelles sont conservées pour les durées suivantes :</p>
<ul className="list-disc list-inside ml-4 space-y-1">
<li><strong className="text-white">Données de contact :</strong> 3 ans à compter du dernier contact</li>
<li><strong className="text-white">Données de navigation :</strong> 13 mois maximum</li>
<li><strong className="text-white">Données liées aux cookies :</strong> 13 mois maximum</li>
</ul>
<p className="mt-2">
Au-delà de ces durées, les données sont supprimées ou anonymisées.
</p>
</div>
</section>
<section>
<h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
<CheckCircle className="w-6 h-6 text-security-accent" />
<span>4. Vos droits RGPD</span>
</h2>
<div className="text-gray-300 leading-relaxed space-y-3">
<p>Conformément au RGPD, vous disposez des droits suivants :</p>
<div className="grid md:grid-cols-2 gap-4">
<div className="bg-security-card p-4 rounded-xl border border-security-border">
<h3 className="text-white font-semibold mb-2 flex items-center space-x-2">
<CheckCircle className="w-5 h-5 text-security-accent" />
<span>Droit d'accès</span>
</h3>
<p className="text-sm text-gray-400">
Vous pouvez obtenir une copie de vos données personnelles que nous détenons.
</p>
</div>
<div className="bg-security-card p-4 rounded-xl border border-security-border">
<h3 className="text-white font-semibold mb-2 flex items-center space-x-2">
<CheckCircle className="w-5 h-5 text-security-accent" />
<span>Droit de rectification</span>
</h3>
<p className="text-sm text-gray-400">
Vous pouvez corriger vos données inexactes ou incomplètes.
</p>
</div>
<div className="bg-security-card p-4 rounded-xl border border-security-border">
<h3 className="text-white font-semibold mb-2 flex items-center space-x-2">
<CheckCircle className="w-5 h-5 text-security-accent" />
<span>Droit à l'effacement</span>
</h3>
<p className="text-sm text-gray-400">
Vous pouvez demander la suppression de vos données personnelles.
</p>
</div>
<div className="bg-security-card p-4 rounded-xl border border-security-border">
<h3 className="text-white font-semibold mb-2 flex items-center space-x-2">
<CheckCircle className="w-5 h-5 text-security-accent" />
<span>Droit d'opposition</span>
</h3>
<p className="text-sm text-gray-400">
Vous pouvez vous opposer au traitement de vos données.
</p>
</div>
<div className="bg-security-card p-4 rounded-xl border border-security-border">
<h3 className="text-white font-semibold mb-2 flex items-center space-x-2">
<CheckCircle className="w-5 h-5 text-security-accent" />
<span>Droit à la portabilité</span>
</h3>
<p className="text-sm text-gray-400">
Vous pouvez récupérer vos données dans un format structuré.
</p>
</div>
<div className="bg-security-card p-4 rounded-xl border border-security-border">
<h3 className="text-white font-semibold mb-2 flex items-center space-x-2">
<CheckCircle className="w-5 h-5 text-security-accent" />
<span>Droit de limitation</span>
</h3>
<p className="text-sm text-gray-400">
Vous pouvez demander la limitation du traitement de vos données.
</p>
</div>
</div>
<div className="bg-security-accent/10 border border-security-accent/30 p-4 rounded-xl mt-4">
<p className="text-sm text-gray-300">
<strong className="text-white">Pour exercer vos droits :</strong> Envoyez une demande à
<a href="mailto:contact@runlock.re" className="text-security-accent hover:underline ml-1">contact@runlock.re</a>.
Nous vous répondrons dans un délai d'un mois maximum.
</p>
</div>
</div>
</section>
<section>
<h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
<Shield className="w-6 h-6 text-security-accent" />
<span>5. Transfert de données</span>
</h2>
<div className="text-gray-300 leading-relaxed">
<p>
Vos données personnelles sont stockées et traitées au sein de l'Union Européenne.
Nous ne transférons pas vos données vers des pays tiers en dehors de l'UE sans garanties appropriées.
</p>
</div>
</section>
<section>
<h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
<AlertCircle className="w-6 h-6 text-security-accent" />
<span>6. Réclamation</span>
</h2>
<div className="text-gray-300 leading-relaxed">
<p>
Si vous estimez que le traitement de vos données personnelles constitue une violation du RGPD,
vous avez le droit d'introduire une réclamation auprès de la Commission Nationale de l'Informatique
et des Libertés (CNIL) :
</p>
<ul className="list-disc list-inside mt-2 space-y-1 ml-4">
<li>CNIL - 3 Place de Fontenoy - TSA 80715 - 75334 Paris Cedex 07</li>
<li>Téléphone : 01 53 73 22 22</li>
<li>Site web : <a href="https://www.cnil.fr" target="_blank" rel="noopener noreferrer" className="text-security-accent hover:underline">www.cnil.fr</a></li>
</ul>
</div>
</section>
<section>
<h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
<Shield className="w-6 h-6 text-security-accent" />
<span>7. Sécurité des données</span>
</h2>
<div className="text-gray-300 leading-relaxed space-y-2">
<p>
NorthBlue met en œuvre des mesures techniques et organisationnelles appropriées pour protéger
vos données personnelles contre la perte, l'utilisation abusive, l'accès non autorisé,
la divulgation, l'altération ou la destruction.
</p>
<p>
Ces mesures incluent notamment :
</p>
<ul className="list-disc list-inside ml-4 space-y-1">
<li>Chiffrement des données sensibles</li>
<li>Accès restreint aux données personnelles</li>
<li>Sauvegardes régulières</li>
<li>Formation du personnel aux bonnes pratiques de sécurité</li>
</ul>
</div>
</section>
<section>
<h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
<Shield className="w-6 h-6 text-security-accent" />
<span>8. Contact</span>
</h2>
<div className="text-gray-300 leading-relaxed">
<p>
Pour toute question concernant le traitement de vos données personnelles ou pour exercer vos droits RGPD,
contactez-nous :
</p>
<ul className="list-disc list-inside mt-2 space-y-1 ml-4">
<li>Par email : <a href="mailto:contact@runlock.re" className="text-security-accent hover:underline">contact@runlock.re</a></li>
<li>Par téléphone : <a href="tel:0693511558" className="text-security-accent hover:underline">0693 51 15 58</a></li>
</ul>
</div>
</section>
<div className="pt-6 border-t border-security-border text-sm text-gray-400">
<p>Dernière mise à jour : {new Date().toLocaleDateString('fr-FR', { year: 'numeric', month: 'long', day: 'numeric' })}</p>
</div>
</div>
</motion.div>
</div>
</section>
)
}

48
components/Footer.tsx
View File

@@ -3,9 +3,19 @@
import { motion } from 'framer-motion' import { motion } from 'framer-motion'
import { Shield, Mail, Phone, MapPin } from 'lucide-react' import { Shield, Mail, Phone, MapPin } from 'lucide-react'
import Link from 'next/link' import Link from 'next/link'
import { usePathname } from 'next/navigation'
export default function Footer() { export default function Footer() {
const currentYear = new Date().getFullYear() const currentYear = new Date().getFullYear()
const pathname = usePathname()
const isHomePage = pathname === '/'
const getNavHref = (href: string) => {
if (isHomePage) {
return href
}
return `/${href}`
}
return ( return (
<footer className="bg-security-dark border-t border-security-border"> <footer className="bg-security-dark border-t border-security-border">
@@ -39,13 +49,19 @@ export default function Footer() {
> >
<h3 className="text-white font-semibold mb-4">Navigation</h3> <h3 className="text-white font-semibold mb-4">Navigation</h3>
<ul className="space-y-2"> <ul className="space-y-2">
{['Accueil', 'Services', 'Tarifs', 'FAQ', 'Contact'].map((item) => ( {[
<li key={item}> { label: 'Accueil', href: '#accueil' },
{ label: 'Services', href: '#services' },
{ label: 'Tarifs', href: '#tarifs' },
{ label: 'FAQ', href: '#faq' },
{ label: 'Contact', href: '#contact' },
].map((item) => (
<li key={item.href}>
<a <a
href={`#${item.toLowerCase()}`} href={getNavHref(item.href)}
className="text-gray-400 hover:text-security-accent transition-colors text-sm" className="text-gray-400 hover:text-security-accent transition-colors text-sm"
> >
{item} {item.label}
</a> </a>
</li> </li>
))} ))}
@@ -64,7 +80,7 @@ export default function Footer() {
{['Hébergement Cloud', 'Installation NAS', 'Installation Mini PC', 'Support technique'].map((service) => ( {['Hébergement Cloud', 'Installation NAS', 'Installation Mini PC', 'Support technique'].map((service) => (
<li key={service}> <li key={service}>
<a <a
href="#services" href={getNavHref('#services')}
className="text-gray-400 hover:text-security-accent transition-colors text-sm" className="text-gray-400 hover:text-security-accent transition-colors text-sm"
> >
{service} {service}
@@ -109,19 +125,27 @@ export default function Footer() {
© {currentYear} Runlock.re - Tous droits réservés © {currentYear} Runlock.re - Tous droits réservés
</p> </p>
<div className="flex items-center space-x-6 text-sm"> <div className="flex items-center space-x-6 text-sm">
<a href="#" className="text-gray-400 hover:text-security-accent transition-colors"> <Link href="/mentions-legales" className="text-gray-400 hover:text-security-accent transition-colors">
Mentions légales Mentions légales
</a> </Link>
<a href="#" className="text-gray-400 hover:text-security-accent transition-colors"> <Link href="/politique-confidentialite" className="text-gray-400 hover:text-security-accent transition-colors">
Politique de confidentialité Politique de confidentialité
</a> </Link>
<a href="#" className="text-gray-400 hover:text-security-accent transition-colors"> <Link href="/rgpd" className="text-gray-400 hover:text-security-accent transition-colors">
RGPD RGPD
</a> </Link>
</div> </div>
</div> </div>
<p className="text-gray-500 text-xs mt-4 text-center"> <p className="text-gray-500 text-xs mt-4 text-center">
Service édité par: httpdesign.fr Réalisé par{' '}
<a
href="https://httpdesign.fr"
target="_blank"
rel="noopener noreferrer"
className="text-security-accent hover:underline transition-colors"
>
Httpdesign.fr
</a>
</p> </p>
</div> </div>
</div> </div>

18
components/Header.tsx
View File

@@ -4,10 +4,13 @@ import { useState, useEffect } from 'react'
import { motion, AnimatePresence } from 'framer-motion' import { motion, AnimatePresence } from 'framer-motion'
import { Menu, X, Lock, Shield } from 'lucide-react' import { Menu, X, Lock, Shield } from 'lucide-react'
import Link from 'next/link' import Link from 'next/link'
import { usePathname } from 'next/navigation'
export default function Header() { export default function Header() {
const [isScrolled, setIsScrolled] = useState(false) const [isScrolled, setIsScrolled] = useState(false)
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false) const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
const pathname = usePathname()
const isHomePage = pathname === '/'
useEffect(() => { useEffect(() => {
const handleScroll = () => { const handleScroll = () => {
@@ -25,6 +28,13 @@ export default function Header() {
{ href: '#contact', label: 'Contact' }, { href: '#contact', label: 'Contact' },
] ]
const getNavHref = (href: string) => {
if (isHomePage) {
return href
}
return `/${href}`
}
return ( return (
<motion.header <motion.header
initial={{ y: -100 }} initial={{ y: -100 }}
@@ -54,7 +64,7 @@ export default function Header() {
{navItems.map((item, index) => ( {navItems.map((item, index) => (
<motion.a <motion.a
key={item.href} key={item.href}
href={item.href} href={getNavHref(item.href)}
initial={{ opacity: 0, y: -20 }} initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ delay: index * 0.1 }} transition={{ delay: index * 0.1 }}
@@ -65,7 +75,7 @@ export default function Header() {
</motion.a> </motion.a>
))} ))}
<motion.a <motion.a
href="#contact" href={getNavHref('#contact')}
initial={{ opacity: 0, scale: 0.8 }} initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }} animate={{ opacity: 1, scale: 1 }}
transition={{ delay: 0.5 }} transition={{ delay: 0.5 }}
@@ -100,7 +110,7 @@ export default function Header() {
{navItems.map((item) => ( {navItems.map((item) => (
<a <a
key={item.href} key={item.href}
href={item.href} href={getNavHref(item.href)}
onClick={() => setIsMobileMenuOpen(false)} onClick={() => setIsMobileMenuOpen(false)}
className="block text-gray-300 hover:text-security-accent font-medium transition-colors py-2" className="block text-gray-300 hover:text-security-accent font-medium transition-colors py-2"
> >
@@ -108,7 +118,7 @@ export default function Header() {
</a> </a>
))} ))}
<a <a
href="#contact" href={getNavHref('#contact')}
onClick={() => setIsMobileMenuOpen(false)} onClick={() => setIsMobileMenuOpen(false)}
className="block w-full text-center px-6 py-3 bg-gradient-to-r from-security-accent to-green-500 text-black rounded-xl font-semibold mt-4" className="block w-full text-center px-6 py-3 bg-gradient-to-r from-security-accent to-green-500 text-black rounded-xl font-semibold mt-4"
> >