This commit is contained in:
LathanDevers
@@ -1,25 +1,31 @@
|
||||
import { Shield, ArrowLeft, Mail, Server, FileCheck, Moon, Sun } from 'lucide-react';
|
||||
import React from 'react';
|
||||
import { Shield, ArrowLeft, Mail, Server, FileCheck, Moon, Sun, Lock } from 'lucide-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useTheme } from '../hooks/useTheme';
|
||||
|
||||
export default function MentionsLegales() {
|
||||
const { isDark, toggleTheme } = useTheme();
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50 dark:bg-slate-950 font-sans text-slate-700 dark:text-slate-300 selection:bg-gise-accent selection:text-white transition-colors duration-300">
|
||||
|
||||
{/* HEADER DE NAVIGATION */}
|
||||
<header className="bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 sticky top-0 z-30 transition-colors">
|
||||
<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between">
|
||||
<Link to="/" className="inline-flex items-center gap-2 text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors text-sm font-medium">
|
||||
return (
|
||||
<div className="min-h-screen font-sans bg-[#f8f9fa] dark:bg-[#0f172a] text-[#1f1f1f] dark:text-[#e3e2e6] selection:bg-blue-600 selection:text-white transition-colors duration-300">
|
||||
|
||||
{/* HEADER DE NAVIGATION (Style Google Pill Bar) */}
|
||||
<header className="sticky top-0 z-40 p-3 sm:p-4">
|
||||
<div className="max-w-5xl mx-auto bg-white/90 dark:bg-slate-900/90 backdrop-blur-xl border border-slate-200/80 dark:border-slate-800 rounded-full px-5 py-2.5 shadow-sm flex items-center justify-between transition-all">
|
||||
|
||||
<Link
|
||||
to="/"
|
||||
className="inline-flex items-center gap-2 text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors text-xs font-semibold px-3.5 py-1.5 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
Retour à l'accueil
|
||||
<span>Retour à l'accueil</span>
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="flex items-center gap-3">
|
||||
{/* BOUTON THEME */}
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className="p-2 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 hover:text-gise-accent dark:hover:text-white transition-colors"
|
||||
className="p-2.5 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors"
|
||||
aria-label="Basculer le thème"
|
||||
>
|
||||
{isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
|
||||
@@ -27,105 +33,103 @@ export default function MentionsLegales() {
|
||||
|
||||
{/* LOGO */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Shield className="h-6 w-6 text-gise-accent" />
|
||||
<span className="text-xl font-bold tracking-wider text-slate-900 dark:text-white">GISE</span>
|
||||
<div className="h-8 w-8 rounded-full bg-blue-600 flex items-center justify-center text-white shadow-sm">
|
||||
<Shield className="h-4 w-4" />
|
||||
</div>
|
||||
<span className="text-lg font-bold tracking-tight text-slate-900 dark:text-white">
|
||||
GISE
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* CONTENU PRINCIPAL */}
|
||||
<main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||||
<main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-10 sm:py-14">
|
||||
|
||||
{/* Titre */}
|
||||
<div className="border-b border-slate-200 dark:border-slate-800 pb-8 mb-12">
|
||||
<h1 className="text-4xl font-extrabold text-slate-900 dark:text-white tracking-tight mb-4">Mentions Légales</h1>
|
||||
<p className="text-slate-600 dark:text-slate-400">
|
||||
{/* Header Titre */}
|
||||
<div className="mb-10 space-y-3">
|
||||
<div className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full bg-blue-50 dark:bg-blue-950/80 border border-blue-200/50 dark:border-blue-800/50 text-xs font-semibold text-blue-600 dark:text-blue-400">
|
||||
<FileCheck className="w-3.5 h-3.5" />
|
||||
<span>Informations Réglementaires</span>
|
||||
</div>
|
||||
<h1 className="text-3xl sm:text-5xl font-bold text-slate-900 dark:text-white tracking-tight">
|
||||
Mentions Légales
|
||||
</h1>
|
||||
<p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed max-w-2xl">
|
||||
Informations légales obligatoires relatives à l'éditeur et à l'hébergeur du site web GISE, conformément au Code de droit économique belge.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-12 leading-relaxed">
|
||||
<div className="space-y-6">
|
||||
|
||||
{/* SECTION 1 */}
|
||||
{/*<section className="bg-white dark:bg-slate-900 p-8 rounded-xl border border-slate-200 dark:border-slate-800 transition-colors">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-6 flex items-center gap-3">
|
||||
<Building className="w-6 h-6 text-gise-accent" />
|
||||
1. Éditeur du site
|
||||
</h2>
|
||||
<div className="grid sm:grid-cols-2 gap-6 text-sm">
|
||||
<div>
|
||||
<p className="text-slate-500 dark:text-slate-400 text-xs uppercase tracking-wider mb-1">Dénomination sociale</p>
|
||||
<p className="font-semibold text-slate-900 dark:text-white">GISE SRL</p>
|
||||
{/* SECTION 1 - COORDONNÉES DE CONTACT */}
|
||||
<section className="bg-white dark:bg-slate-900 p-6 sm:p-8 rounded-[28px] border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-10 w-10 rounded-2xl bg-blue-100 dark:bg-blue-950 text-blue-600 dark:text-blue-400 flex items-center justify-center shrink-0">
|
||||
<Mail className="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-slate-500 dark:text-slate-400 text-xs uppercase tracking-wider mb-1">Forme juridique</p>
|
||||
<p className="font-semibold text-slate-900 dark:text-white">Société à Responsabilité Limitée</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-slate-500 dark:text-slate-400 text-xs uppercase tracking-wider mb-1">Siège social</p>
|
||||
<p className="font-semibold text-slate-900 dark:text-white">Rue Exemple 123, 1000 Bruxelles, Belgique</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-slate-500 dark:text-slate-400 text-xs uppercase tracking-wider mb-1">Numéro d'entreprise (BCE)</p>
|
||||
<p className="font-semibold text-slate-900 dark:text-white">0123.456.789</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-slate-500 dark:text-slate-400 text-xs uppercase tracking-wider mb-1">Numéro de TVA</p>
|
||||
<p className="font-semibold text-slate-900 dark:text-white">BE 0123.456.789</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-slate-500 dark:text-slate-400 text-xs uppercase tracking-wider mb-1">Éditeur responsable</p>
|
||||
<p className="font-semibold text-slate-900 dark:text-white">Direction GISE</p>
|
||||
<h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
|
||||
1. Coordonnées de contact
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||
Pour toute question concernant nos services ou le fonctionnement de ce site web, vous pouvez contacter l'équipe GISE :
|
||||
</p>
|
||||
|
||||
<div className="p-4 rounded-2xl bg-[#f0f4f9] dark:bg-slate-950 border border-transparent dark:border-slate-800/80 inline-block w-full sm:w-auto">
|
||||
<div className="flex items-center gap-2.5 text-xs sm:text-sm text-slate-800 dark:text-slate-200">
|
||||
<Mail className="w-4 h-4 text-blue-600 dark:text-blue-400 shrink-0" />
|
||||
<span><strong className="font-semibold text-slate-900 dark:text-white">E-mail :</strong> contact@gise.be</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>*/}
|
||||
|
||||
{/* SECTION 2 */}
|
||||
<section className="bg-white dark:bg-slate-900 p-8 rounded-xl border border-slate-200 dark:border-slate-800 transition-colors">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-6 flex items-center gap-3">
|
||||
<Mail className="w-6 h-6 text-gise-accent" />
|
||||
Coordonnées de contact
|
||||
</h2>
|
||||
<p className="mb-4 text-sm text-slate-600 dark:text-slate-400">
|
||||
Pour toute question concernant nos services ou le fonctionnement de ce site web, vous pouvez nous contacter :
|
||||
</p>
|
||||
<ul className="space-y-3 text-sm">
|
||||
<li className="flex items-center gap-3">
|
||||
<Mail className="w-4 h-4 text-slate-400 dark:text-slate-500" />
|
||||
<span><strong className="text-slate-900 dark:text-white">E-mail :</strong> contact@gise.be</span>
|
||||
</li>
|
||||
{/*<li className="flex items-center gap-3">
|
||||
<Phone className="w-4 h-4 text-slate-400 dark:text-slate-500" />
|
||||
<span><strong className="text-slate-900 dark:text-white">Téléphone :</strong> +32 (0)2 123 45 67</span>
|
||||
</li>*/}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
{/* SECTION 3 */}
|
||||
<section className="bg-white dark:bg-slate-900 p-8 rounded-xl border border-slate-200 dark:border-slate-800 transition-colors">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-6 flex items-center gap-3">
|
||||
<Server className="w-6 h-6 text-gise-accent" />
|
||||
Hébergement du site
|
||||
</h2>
|
||||
<p className="text-sm mb-4">
|
||||
{/* SECTION 2 - HÉBERGEMENT DU SITE */}
|
||||
<section className="bg-white dark:bg-slate-900 p-6 sm:p-8 rounded-[28px] border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-10 w-10 rounded-2xl bg-emerald-100 dark:bg-emerald-950 text-emerald-600 dark:text-emerald-400 flex items-center justify-center shrink-0">
|
||||
<Server className="w-5 h-5" />
|
||||
</div>
|
||||
<h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
|
||||
2. Hébergement du site
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||
Conformément à nos engagements de souveraineté numérique et de protection des données B2B :
|
||||
</p>
|
||||
<div className="bg-slate-100 dark:bg-slate-950 p-4 rounded-lg border border-slate-200 dark:border-slate-800 text-sm space-y-2 transition-colors">
|
||||
<p><strong className="text-slate-900 dark:text-white">Hébergeur :</strong> Infrastructure privée GISE</p>
|
||||
<p><strong className="text-slate-900 dark:text-white">Localisation des serveurs :</strong> Centre de données situé en Belgique (Union Européenne)</p>
|
||||
<p><strong className="text-slate-900 dark:text-white">Protection réseau :</strong> Cloudflare & Pare-feu OPNsense</p>
|
||||
|
||||
<div className="bg-[#f0f4f9] dark:bg-slate-950 p-5 rounded-2xl border border-transparent dark:border-slate-800/80 text-xs sm:text-sm space-y-2.5 text-slate-700 dark:text-slate-300">
|
||||
<p className="flex items-center gap-2">
|
||||
<span className="w-2 h-2 rounded-full bg-emerald-500" />
|
||||
<span><strong className="font-semibold text-slate-900 dark:text-white">Hébergeur :</strong> Infrastructure privée GISE</span>
|
||||
</p>
|
||||
<p className="flex items-center gap-2">
|
||||
<span className="w-2 h-2 rounded-full bg-emerald-500" />
|
||||
<span><strong className="font-semibold text-slate-900 dark:text-white">Localisation des serveurs :</strong> Centre de données situé en Belgique (Union Européenne)</span>
|
||||
</p>
|
||||
<p className="flex items-center gap-2">
|
||||
<span className="w-2 h-2 rounded-full bg-emerald-500" />
|
||||
<span><strong className="font-semibold text-slate-900 dark:text-white">Protection réseau :</strong> Cloudflare & Pare-feu OPNsense</span>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 4 */}
|
||||
<section className="space-y-4">
|
||||
<h2 className="text-xl font-bold text-slate-900 dark:text-white flex items-center gap-2">
|
||||
<FileCheck className="w-5 h-5 text-gise-accent" />
|
||||
4. Propriété intellectuelle
|
||||
</h2>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||
L'ensemble du contenu présent sur le site web GISE (textes, graphismes, logos, icônes, éléments visuels, structure du site) est la propriété exclusive de GISE, sauf mention contraire.
|
||||
{/* SECTION 3 - PROPRIÉTÉ INTELLECTUELLE */}
|
||||
<section className="bg-white dark:bg-slate-900 p-6 sm:p-8 rounded-[28px] border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-10 w-10 rounded-2xl bg-indigo-100 dark:bg-indigo-950 text-indigo-600 dark:text-indigo-400 flex items-center justify-center shrink-0">
|
||||
<Lock className="w-5 h-5" />
|
||||
</div>
|
||||
<h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
|
||||
3. Propriété intellectuelle
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||
L'ensemble du contenu présent sur le site web GISE (textes, graphismes, logos, icônes, éléments visuels, structure du site) est la propriété exclusive de GISE SRL, sauf mention contraire. Toute reproduction ou représentation totale ou partielle est interdite sans autorisation préalable.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
@@ -133,8 +137,8 @@ export default function MentionsLegales() {
|
||||
</main>
|
||||
|
||||
{/* FOOTER */}
|
||||
<footer className="bg-slate-100 dark:bg-slate-950 border-t border-slate-200 dark:border-slate-900 py-8 mt-16 text-center text-xs text-slate-500 dark:text-slate-600 transition-colors">
|
||||
<p>© {new Date().getFullYear()} GISE. Tous droits réservés.</p>
|
||||
<footer className="bg-[#f0f4f9] dark:bg-slate-950 border-t border-slate-200/80 dark:border-slate-900 py-8 mt-16 text-center text-xs text-slate-500 dark:text-slate-400 transition-colors">
|
||||
<p>© {new Date().getFullYear()} GISE SRL. Tous droits réservés.</p>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user