```
✨ feat(revervation): create basetwig for réservation
```
This commit is contained in:
Serreau Jovann
@@ -1,4 +1,4 @@
|
|||||||
intranet.ludikevent.fr, signature.ludikevent.fr {
|
intranet.ludikevent.fr, signature.ludikevent.fr, reservation.ludikevent.fr {
|
||||||
tls {
|
tls {
|
||||||
dns cloudflare KL6pZ-Z_12_zbnM2TtFDIsKM8A-HLPhU5GJJbKTW
|
dns cloudflare KL6pZ-Z_12_zbnM2TtFDIsKM8A-HLPhU5GJJbKTW
|
||||||
}
|
}
|
||||||
|
|||||||
41
assets/reserve.js
Normal file
41
assets/reserve.js
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
import './reserve.scss';
|
||||||
|
import * as Sentry from "@sentry/browser";
|
||||||
|
|
||||||
|
// --- INITIALISATION SENTRY ---
|
||||||
|
Sentry.init({
|
||||||
|
dsn: "https://803814be6540031b1c37bf92ba9c0f79@sentry.esy-web.dev/24",
|
||||||
|
tunnel: "/sentry-tunnel",
|
||||||
|
sendDefaultPii: true,
|
||||||
|
integrations: [
|
||||||
|
Sentry.browserTracingIntegration(),
|
||||||
|
Sentry.replayIntegration()
|
||||||
|
],
|
||||||
|
tracesSampleRate: 1.0,
|
||||||
|
tracePropagationTargets: ["localhost", "esy-web.dev", "revervation.ludikevent.fr"],
|
||||||
|
replaysSessionSampleRate: 0.1,
|
||||||
|
replaysOnErrorSampleRate: 1.0
|
||||||
|
});
|
||||||
|
|
||||||
|
// --- LOGIQUE DU MENU MOBILE ---
|
||||||
|
const initMobileMenu = () => {
|
||||||
|
const btn = document.getElementById('menu-button');
|
||||||
|
const menu = document.getElementById('mobile-menu');
|
||||||
|
|
||||||
|
|
||||||
|
if (btn && menu) {
|
||||||
|
btn.onclick = () => {
|
||||||
|
const isExpanded = btn.getAttribute('aria-expanded') === 'true';
|
||||||
|
btn.setAttribute('aria-expanded', !isExpanded);
|
||||||
|
menu.classList.toggle('hidden');
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// --- INITIALISATION ---
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
initMobileMenu();
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('turbo:load', () => {
|
||||||
|
initMobileMenu();
|
||||||
|
});
|
||||||
1
assets/reserve.scss
Normal file
1
assets/reserve.scss
Normal file
@@ -0,0 +1 @@
|
|||||||
|
@import "tailwindcss";
|
||||||
68
src/Controller/ReserverController.php
Normal file
68
src/Controller/ReserverController.php
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace App\Controller;
|
||||||
|
|
||||||
|
use App\Entity\Account;
|
||||||
|
use App\Entity\AccountResetPasswordRequest;
|
||||||
|
use App\Form\RequestPasswordConfirmType;
|
||||||
|
use App\Form\RequestPasswordRequestType;
|
||||||
|
use App\Logger\AppLogger;
|
||||||
|
use App\Service\ResetPassword\Event\ResetPasswordConfirmEvent;
|
||||||
|
use App\Service\ResetPassword\Event\ResetPasswordEvent;
|
||||||
|
use Doctrine\ORM\EntityManagerInterface;
|
||||||
|
use KnpU\OAuth2ClientBundle\Client\ClientRegistry;
|
||||||
|
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
|
||||||
|
use Symfony\Component\EventDispatcher\EventDispatcherInterface;
|
||||||
|
use Symfony\Component\HttpFoundation\JsonResponse;
|
||||||
|
use Symfony\Component\HttpFoundation\Request;
|
||||||
|
use Symfony\Component\HttpFoundation\Response;
|
||||||
|
use Symfony\Component\PasswordHasher\Hasher\UserPasswordHasherInterface;
|
||||||
|
use Symfony\Component\Routing\Attribute\Route;
|
||||||
|
use Symfony\Component\Security\Http\Authentication\AuthenticationUtils;
|
||||||
|
use Symfony\Contracts\HttpClient\HttpClientInterface;
|
||||||
|
|
||||||
|
|
||||||
|
class ReserverController extends AbstractController
|
||||||
|
{
|
||||||
|
|
||||||
|
#[Route('/revervation', name: 'revervation')]
|
||||||
|
public function revervation()
|
||||||
|
{
|
||||||
|
return $this->render('revervation/home.twig');
|
||||||
|
}
|
||||||
|
#[Route('/revervation/contact', name: 'revervation_contact')]
|
||||||
|
public function revervationContact()
|
||||||
|
{
|
||||||
|
return $this->render('revervation/home.twig');
|
||||||
|
}
|
||||||
|
#[Route('/revervation/recherche', name: 'reservation_search')]
|
||||||
|
public function recherche()
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
#[Route('/revervation/mentions-legal', name: 'revervation_mentions-legal')]
|
||||||
|
public function revervationLegal()
|
||||||
|
{
|
||||||
|
return $this->render('revervation/legal.twig');
|
||||||
|
}
|
||||||
|
#[Route('/revervation/rgpd', name: 'revervation_rgpd')]
|
||||||
|
public function revervationRgpd()
|
||||||
|
{
|
||||||
|
return $this->render('revervation/rgpd.twig');
|
||||||
|
}
|
||||||
|
#[Route('/revervation/cookies', name: 'revervation_cookies')]
|
||||||
|
public function revervationCookies()
|
||||||
|
{
|
||||||
|
return $this->render('revervation/cookies.twig');
|
||||||
|
}
|
||||||
|
#[Route('/revervation/cgv', name: 'revervation_cgv')]
|
||||||
|
public function revervationCgv()
|
||||||
|
{
|
||||||
|
return $this->render('revervation/cgv.twig');
|
||||||
|
}
|
||||||
|
#[Route('/revervation/hosting', name: 'revervation_hosting')]
|
||||||
|
public function revervationHosting()
|
||||||
|
{
|
||||||
|
return $this->render('revervation/hosting.twig');
|
||||||
|
}
|
||||||
|
}
|
||||||
189
templates/revervation/base.twig
Normal file
189
templates/revervation/base.twig
Normal file
@@ -0,0 +1,189 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||||
|
|
||||||
|
{# --- SEO Fondamental --- #}
|
||||||
|
<title>{% block title %}Ludikevent | Location de structures gonflables à Danizy{% endblock %}</title>
|
||||||
|
<meta name="description" content="{% block description %}Ludikevent : location de châteaux gonflables et animations à Danizy (02800). Qualité pro pour vos événements.{% endblock %}">
|
||||||
|
|
||||||
|
{# URL Canonique dynamique #}
|
||||||
|
<link rel="canonical" href="{{ app.request.schemeAndHttpHost }}{{ app.request.pathinfo }}">
|
||||||
|
|
||||||
|
{# --- Open Graph (Facebook / WhatsApp) --- #}
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:url" content="{{ app.request.uri }}">
|
||||||
|
<meta property="og:title" content="{{ block('title') }}">
|
||||||
|
<meta property="og:description" content="{{ block('description') }}">
|
||||||
|
<meta property="og:image" content="{{ absolute_url(asset('provider/images/favicon.png')) }}">
|
||||||
|
<meta property="article:publisher" content="https://www.facebook.com/profile.php?id=61574652399326">
|
||||||
|
|
||||||
|
{# --- Twitter Card --- #}
|
||||||
|
<meta name="twitter:card" content="summary">
|
||||||
|
<meta name="twitter:title" content="{{ block('title') }}">
|
||||||
|
<meta name="twitter:image" content="{{ absolute_url(asset('provider/images/favicon.png')) }}">
|
||||||
|
|
||||||
|
{# --- Données Structurées (JSON-LD) --- #}
|
||||||
|
<script type="application/ld+json">
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "LocalBusiness",
|
||||||
|
"name": "Ludikevent",
|
||||||
|
"image": "{{ absolute_url(asset('provider/images/favicon.png')) }}",
|
||||||
|
"telephone": "+33614172447",
|
||||||
|
"email": "contact@ludikevent.fr",
|
||||||
|
"url": "{{ app.request.schemeAndHttpHost }}",
|
||||||
|
"address": {
|
||||||
|
"@type": "PostalAddress",
|
||||||
|
"streetAddress": "6 Rue du Château",
|
||||||
|
"addressLocality": "Danizy",
|
||||||
|
"postalCode": "02800",
|
||||||
|
"addressCountry": "FR"
|
||||||
|
},
|
||||||
|
"geo": {
|
||||||
|
"@type": "GeoCoordinates",
|
||||||
|
"latitude": 49.6644,
|
||||||
|
"longitude": 3.3852
|
||||||
|
},
|
||||||
|
"sameAs": [
|
||||||
|
"https://www.facebook.com/profile.php?id=61574652399326"
|
||||||
|
],
|
||||||
|
"priceRange": "€€"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "WebSite",
|
||||||
|
"url": "{{ app.request.schemeAndHttpHost }}",
|
||||||
|
"potentialAction": {
|
||||||
|
"@type": "SearchAction",
|
||||||
|
"target": "{{ url('reservation_search') }}?q={search_term_string}",
|
||||||
|
"query-input": "required name=search_term_string"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "BreadcrumbList",
|
||||||
|
"itemListElement": [
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 1,
|
||||||
|
"name": "Accueil",
|
||||||
|
"item": "{{ url('revervation') }}"
|
||||||
|
}
|
||||||
|
{% block breadcrumb_json %}{% endblock %}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{# --- PWA (Configuré via manifest.json) --- #}
|
||||||
|
{% if app.environment != 'dev' %}
|
||||||
|
{{ pwa(swAttributes={ 'nonce': csp_nonce('script') }) }}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{{ vite_asset('reserve.js',{}) }}
|
||||||
|
{% block stylesheets %}{% endblock %}
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-50 text-gray-900 font-sans antialiased min-h-screen flex flex-col">
|
||||||
|
|
||||||
|
{# --- NAVIGATION --- #}
|
||||||
|
<nav class="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-100">
|
||||||
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="flex justify-between h-20">
|
||||||
|
|
||||||
|
{# Logo #}
|
||||||
|
<div class="flex-shrink-0 flex items-center">
|
||||||
|
<a href="{{ path('revervation') }}" class="flex items-center gap-2 group">
|
||||||
|
<img class="h-12 w-auto transition-transform group-hover:scale-105"
|
||||||
|
src="{{ asset('provider/images/favicon.png') }}"
|
||||||
|
alt="Ludikevent Logo">
|
||||||
|
<span class="text-2xl font-black tracking-tighter text-blue-600 uppercase">
|
||||||
|
Ludik<span class="text-amber-500">event</span>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# Menu Desktop #}
|
||||||
|
<div class="hidden md:flex items-center space-x-8">
|
||||||
|
<a href="{{ path('revervation') }}" class="text-gray-700 hover:text-blue-600 font-medium transition-colors">Accueil</a>
|
||||||
|
<a href="{{ path('revervation_contact') }}" class="text-gray-700 hover:text-blue-600 font-medium transition-colors">Contact</a>
|
||||||
|
|
||||||
|
<a href="{{ path('reservation_search') }}" class="p-2 text-gray-500 hover:text-blue-600 transition-colors" aria-label="Rechercher">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="tel:0614172447" class="inline-flex items-center px-6 py-3 border border-transparent text-sm font-bold rounded-full text-white bg-blue-600 hover:bg-blue-700 shadow-lg shadow-blue-200 transition-all hover:-translate-y-0.5">
|
||||||
|
06 14 17 24 47
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# Bouton Menu Mobile #}
|
||||||
|
<div class="md:hidden flex items-center">
|
||||||
|
<button id="menu-button" type="button" class="text-gray-600 p-2 focus:outline-none" aria-expanded="false" aria-controls="mobile-menu">
|
||||||
|
<svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# Contenu Menu Mobile (Caché par défaut) #}
|
||||||
|
<div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-100 shadow-xl">
|
||||||
|
<div class="px-4 pt-2 pb-6 space-y-2">
|
||||||
|
<a href="{{ path('revervation') }}" class="block px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-50 rounded-xl transition-colors">Accueil</a>
|
||||||
|
<a href="{{ path('reservation_search') }}" class="block px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-50 rounded-xl transition-colors">Rechercher</a>
|
||||||
|
<div class="pt-4 border-t border-gray-50">
|
||||||
|
<a href="tel:0614172447" class="block px-3 py-3 text-center bg-blue-600 text-white rounded-xl font-bold">
|
||||||
|
Appeler le 06 14 17 24 47
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{# --- CONTENU --- #}
|
||||||
|
<main class="flex-grow">
|
||||||
|
{% block body %}{% endblock %}
|
||||||
|
</main>
|
||||||
|
|
||||||
|
{# --- PIED DE PAGE --- #}
|
||||||
|
<footer class="bg-white border-t border-gray-100 py-8 mt-auto">
|
||||||
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="flex flex-col md:flex-row justify-between items-center gap-8">
|
||||||
|
|
||||||
|
{# Marque #}
|
||||||
|
<div class="text-center md:text-left">
|
||||||
|
<p class="text-sm text-gray-500">
|
||||||
|
© {{ "now"|date("Y") }} <span class="font-bold text-blue-600">Ludikevent</span>.
|
||||||
|
Tous droits réservés.
|
||||||
|
</p>
|
||||||
|
<p class="text-xs text-gray-400 mt-1">Location de structures gonflables.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# Liens légaux #}
|
||||||
|
<div class="flex flex-wrap justify-center gap-x-6 gap-y-2 text-xs text-gray-500 font-medium">
|
||||||
|
<a href="{{ path('revervation_mentions-legal') }}" class="hover:text-blue-600 transition-colors">Mentions légales</a>
|
||||||
|
<a href="{{ path('revervation_cgv') }}" class="hover:text-blue-600 transition-colors">CGV</a>
|
||||||
|
<a href="{{ path('revervation_rgpd') }}" class="hover:text-blue-600 transition-colors">RGPD</a>
|
||||||
|
<a href="{{ path('revervation_cookies') }}" class="hover:text-blue-600 transition-colors">Cookies</a>
|
||||||
|
<a href="{{ path('revervation_hosting') }}" class="hover:text-blue-600 transition-colors">Hébergement</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# Réseaux Sociaux #}
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<a href="https://www.facebook.com/profile.php?id=61574652399326" target="_blank" rel="noopener" class="text-gray-400 hover:text-blue-600 transition-colors" aria-label="Facebook">
|
||||||
|
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"/></svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
{% block javascripts %}{% endblock %}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1246
templates/revervation/cgv.twig
Normal file
1246
templates/revervation/cgv.twig
Normal file
File diff suppressed because it is too large
Load Diff
150
templates/revervation/cookies.twig
Normal file
150
templates/revervation/cookies.twig
Normal file
@@ -0,0 +1,150 @@
|
|||||||
|
{% extends 'revervation/base.twig' %}
|
||||||
|
|
||||||
|
{% block title %}Cookies - Ludik Event{% endblock %}
|
||||||
|
{% block breadcrumb_json %}
|
||||||
|
,{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 1,
|
||||||
|
"name": "Politique de gestion des cookies",
|
||||||
|
"item": "{{ path('revervation_cookies') }}"
|
||||||
|
}
|
||||||
|
{% endblock %}
|
||||||
|
{% block body %}
|
||||||
|
<div class="min-h-screen bg-gray-50 font-sans antialiased pb-20">
|
||||||
|
|
||||||
|
{# --- HEADER --- #}
|
||||||
|
<div class="max-w-6xl mx-auto pt-16 pb-12 px-4">
|
||||||
|
<div class="flex flex-col md:flex-row items-end justify-between gap-6 border-b border-slate-200 pb-8">
|
||||||
|
<div>
|
||||||
|
<h1 class="text-4xl md:text-6xl font-black text-slate-900 uppercase tracking-tighter italic leading-none">
|
||||||
|
Politique de gestion des cookies
|
||||||
|
</h1>
|
||||||
|
<p class="mt-4 text-slate-500 font-medium italic italic">Transparence totale sur l'usage des traceurs.</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<p class="text-[10px] font-black text-slate-400 uppercase tracking-[0.3em] mb-1">Dernière révision</p>
|
||||||
|
<p class="text-sm font-bold text-slate-900 italic">23/04/2025</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# --- BENTO GRID --- #}
|
||||||
|
<div class="max-w-6xl mx-auto px-4">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-4">
|
||||||
|
|
||||||
|
{# 1. Qu'est-ce qu'un cookie ? (Large) #}
|
||||||
|
<div class="md:col-span-8 bg-white p-8 rounded-[2.5rem] border border-slate-100 shadow-sm flex flex-col justify-center">
|
||||||
|
<span class="text-[10px] font-black text-amber-500 uppercase tracking-widest mb-4">Définition</span>
|
||||||
|
<p class="text-base md:text-lg text-slate-700 leading-relaxed italic">
|
||||||
|
Un cookie est un petit fichier déposé sur votre terminal. Chez <strong class="text-slate-900 italic">Ludik Event</strong>, ils nous permettent de garantir la <span class="text-indigo-600 font-bold">sécurité</span> de votre session et d'optimiser le processus de réservation.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# 2. Bouton CNIL (Action) #}
|
||||||
|
<div class="md:col-span-4 bg-slate-900 p-8 rounded-[2.5rem] shadow-xl flex flex-col items-center justify-center text-center group border border-slate-800">
|
||||||
|
<div class="w-14 h-14 bg-white/10 rounded-full flex items-center justify-center mb-4">
|
||||||
|
<span class="text-2xl">🇫🇷</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-white font-black uppercase text-[10px] tracking-widest mb-3">Maîtriser ses données</h3>
|
||||||
|
<a href="https://www.cnil.fr/fr/cookies-les-outils-pour-les-maitriser" target="_blank" class="px-6 py-3 bg-amber-400 text-slate-900 text-[10px] font-black uppercase rounded-full hover:scale-105 transition-transform shadow-lg shadow-amber-400/20">
|
||||||
|
Conseils de la CNIL
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# 3. Catégories de Cookies (Colonnes) #}
|
||||||
|
<div class="md:col-span-4 bg-white p-8 rounded-[2.5rem] border border-slate-100 shadow-sm relative overflow-hidden">
|
||||||
|
<div class="absolute -top-4 -right-4 w-16 h-16 bg-emerald-50 rounded-full flex items-center justify-center text-emerald-500 font-bold">01</div>
|
||||||
|
<h3 class="text-xs font-black text-slate-900 uppercase tracking-widest mb-4 italic">Essentiels</h3>
|
||||||
|
<p class="text-[11px] text-slate-500 italic leading-relaxed">Indispensables à la navigation, au panier d'achat et à la sécurité. Ils ne peuvent être désactivés.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="md:col-span-4 bg-white p-8 rounded-[2.5rem] border border-slate-100 shadow-sm relative overflow-hidden">
|
||||||
|
<div class="absolute -top-4 -right-4 w-16 h-16 bg-indigo-50 rounded-full flex items-center justify-center text-indigo-500 font-bold">02</div>
|
||||||
|
<h3 class="text-xs font-black text-slate-900 uppercase tracking-widest mb-4 italic">Analyse</h3>
|
||||||
|
<p class="text-[11px] text-slate-500 italic leading-relaxed">Mesurent l'audience et détectent d'éventuels problèmes de navigation pour améliorer le site.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="md:col-span-4 bg-white p-8 rounded-[2.5rem] border border-slate-100 shadow-sm relative overflow-hidden">
|
||||||
|
<div class="absolute -top-4 -right-4 w-16 h-16 bg-amber-50 rounded-full flex items-center justify-center text-amber-500 font-bold">03</div>
|
||||||
|
<h3 class="text-xs font-black text-slate-900 uppercase tracking-widest mb-4 italic">Marketing</h3>
|
||||||
|
<p class="text-[11px] text-slate-500 italic leading-relaxed">Permettent de vous proposer des contenus adaptés à vos centres d'intérêt sur d'autres sites.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# 4. Liste Détaillée (Tableau Bento - Full Width) #}
|
||||||
|
<div class="md:col-span-12 bg-white rounded-[2.5rem] border border-slate-100 shadow-sm overflow-hidden">
|
||||||
|
<div class="p-8 border-b border-slate-50">
|
||||||
|
<h3 class="text-xs font-black text-slate-900 uppercase tracking-widest italic">Inventaire technique des cookies</h3>
|
||||||
|
</div>
|
||||||
|
<div class="overflow-x-auto">
|
||||||
|
<table class="w-full text-left border-collapse">
|
||||||
|
<thead>
|
||||||
|
<tr class="bg-slate-50">
|
||||||
|
<th class="px-8 py-4 text-[10px] font-black uppercase text-slate-400 tracking-widest">Nom</th>
|
||||||
|
<th class="px-8 py-4 text-[10px] font-black uppercase text-slate-400 tracking-widest">Objectif</th>
|
||||||
|
<th class="px-8 py-4 text-[10px] font-black uppercase text-slate-400 tracking-widest">Durée</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="divide-y divide-slate-50">
|
||||||
|
<tr class="hover:bg-slate-50/50 transition-colors">
|
||||||
|
<td class="px-8 py-5 text-[11px] font-bold text-indigo-600 font-mono">__Host-session</td>
|
||||||
|
<td class="px-8 py-5 text-[11px] text-slate-600 italic">Maintien de la session client & sécurité de commande.</td>
|
||||||
|
<td class="px-8 py-5 text-[10px] font-bold text-slate-400 uppercase tracking-tighter">Session</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="hover:bg-slate-50/50 transition-colors">
|
||||||
|
<td class="px-8 py-5 text-[11px] font-bold text-indigo-600 font-mono">PHPSESSID</td>
|
||||||
|
<td class="px-8 py-5 text-[11px] text-slate-600 italic">Stockage de l'état des interactions serveur.</td>
|
||||||
|
<td class="px-8 py-5 text-[10px] font-bold text-slate-400 uppercase tracking-tighter">Session</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="hover:bg-slate-50/50 transition-colors">
|
||||||
|
<td class="px-8 py-5 text-[11px] font-bold text-amber-600 font-mono">__cf_bm</td>
|
||||||
|
<td class="px-8 py-5 text-[11px] text-slate-600 italic">Gestion des bots (Cloudflare) & protection anti-spam.</td>
|
||||||
|
<td class="px-8 py-5 text-[10px] font-bold text-slate-400 uppercase tracking-tighter">30 min</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="hover:bg-slate-50/50 transition-colors">
|
||||||
|
<td class="px-8 py-5 text-[11px] font-bold text-amber-600 font-mono">__cf_clearance</td>
|
||||||
|
<td class="px-8 py-5 text-[11px] text-slate-600 italic">Identification du trafic de confiance (Cloudflare).</td>
|
||||||
|
<td class="px-8 py-5 text-[10px] font-bold text-slate-400 uppercase tracking-tighter">1 an</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# 5. Cloudflare Info (Medium) #}
|
||||||
|
<div class="md:col-span-6 bg-indigo-50 p-8 rounded-[2.5rem] border border-indigo-100 flex flex-col justify-between">
|
||||||
|
<div>
|
||||||
|
<h3 class="text-xs font-black text-indigo-900 uppercase tracking-widest mb-4 italic italic">Focus Cloudflare</h3>
|
||||||
|
<p class="text-[11px] text-indigo-800 italic leading-relaxed mb-6">
|
||||||
|
Certains cookies tiers sont déposés par notre partenaire sécurité Cloudflare pour protéger Ludik Event contre les cyberattaques.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<a href="https://www.cloudflare.com/cookie-policy/" target="_blank" class="text-[10px] font-black text-indigo-600 uppercase tracking-widest flex items-center gap-2 hover:gap-4 transition-all">
|
||||||
|
Politique Cloudflare <span>→</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# 6. Gestion du navigateur (Medium) #}
|
||||||
|
<div class="md:col-span-6 bg-white p-8 rounded-[2.5rem] border border-slate-100 shadow-sm flex flex-col justify-between">
|
||||||
|
<h3 class="text-xs font-black text-slate-900 uppercase tracking-widest mb-4 italic italic">Contrôle manuel</h3>
|
||||||
|
<p class="text-[11px] text-slate-500 italic leading-relaxed">
|
||||||
|
Vous pouvez désactiver les cookies via les réglages de votre navigateur (Chrome, Firefox, Safari). Attention : cela peut bloquer le processus de réservation.
|
||||||
|
</p>
|
||||||
|
<div class="flex gap-2 mt-4">
|
||||||
|
<span class="w-2 h-2 bg-slate-200 rounded-full"></span>
|
||||||
|
<span class="w-2 h-2 bg-slate-200 rounded-full"></span>
|
||||||
|
<span class="w-2 h-2 bg-slate-200 rounded-full"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# --- FOOTER --- #}
|
||||||
|
<div class="max-w-6xl mx-auto px-4 mt-16 flex justify-between items-center border-t border-slate-200 pt-8">
|
||||||
|
<p class="text-[9px] font-black text-slate-300 uppercase tracking-[0.5em]">Ludik Event © 2026</p>
|
||||||
|
<a href="{{ path('revervation') }}" class="text-[10px] font-black text-slate-900 hover:text-indigo-600 uppercase tracking-widest flex items-center gap-2">
|
||||||
|
RETOUR 🏠
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
135
templates/revervation/home.twig
Normal file
135
templates/revervation/home.twig
Normal file
@@ -0,0 +1,135 @@
|
|||||||
|
{% extends 'revervation/base.twig' %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
<div class="space-y-20 pb-20">
|
||||||
|
|
||||||
|
{# --- SECTION HERO : L'accroche visuelle --- #}
|
||||||
|
<section class="relative overflow-hidden pt-16 pb-8 lg:pt-24">
|
||||||
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="lg:grid lg:grid-cols-12 lg:gap-8 items-center">
|
||||||
|
<div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left">
|
||||||
|
<span class="inline-flex items-center px-4 py-1.5 rounded-full text-sm font-semibold bg-blue-100 text-blue-700 mb-6">
|
||||||
|
🎉 Nouveau : Châteaux Jungle disponibles
|
||||||
|
</span>
|
||||||
|
<h1 class="text-5xl md:text-7xl font-black tracking-tight text-gray-900 leading-[1.1]">
|
||||||
|
Louez le <span class="text-blue-600">Bonheur</span> <br>
|
||||||
|
<span class="text-amber-500 underline decoration-blue-600/20">en un clic.</span>
|
||||||
|
</h1>
|
||||||
|
<p class="mt-6 text-lg text-gray-600 leading-relaxed">
|
||||||
|
Ludikevent simplifie vos événements à Danizy. Des structures certifiées, une livraison rapide et des souvenirs inoubliables pour les petits et les grands.
|
||||||
|
</p>
|
||||||
|
<div class="mt-10 flex flex-col sm:flex-row gap-4 sm:justify-center lg:justify-start">
|
||||||
|
<a href="#catalogue" class="px-8 py-4 bg-blue-600 text-white rounded-2xl font-bold text-lg shadow-xl shadow-blue-200 hover:bg-blue-700 transition-all hover:-translate-y-1 text-center">
|
||||||
|
Voir le catalogue
|
||||||
|
</a>
|
||||||
|
<a href="tel:0614172447" class="px-8 py-4 bg-white text-gray-700 border border-gray-200 rounded-2xl font-bold text-lg hover:bg-gray-50 transition-all text-center">
|
||||||
|
Nous appeler
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# Image Hero avec effet de profondeur #}
|
||||||
|
<div class="mt-12 lg:mt-0 lg:col-span-6 relative">
|
||||||
|
<div class="relative mx-auto w-full rounded-3xl overflow-hidden shadow-2xl rotate-2 hover:rotate-0 transition-transform duration-500">
|
||||||
|
<img src="{{ asset('provider/images/hero-image.jpg') }}" alt="Château gonflable Ludikevent" class="w-full h-full object-cover aspect-[4/3]">
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
||||||
|
</div>
|
||||||
|
{# Badge flottant #}
|
||||||
|
<div class="absolute -bottom-6 -left-6 bg-white p-6 rounded-3xl shadow-xl hidden md:block">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div class="p-3 bg-amber-100 rounded-2xl text-amber-600 uppercase font-black text-xs">Top Qualité</div>
|
||||||
|
<p class="text-sm font-bold text-gray-800">Structures <br>certifiées NF</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{# --- SECTION BENTO GRID : Pourquoi nous ? --- #}
|
||||||
|
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<h2 class="text-3xl font-black text-gray-900 mb-12 text-center md:text-left">Pourquoi choisir <span class="text-blue-600">Ludikevent</span> ?</h2>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||||
|
{# Tuile Large #}
|
||||||
|
<div class="md:col-span-2 bg-gradient-to-br from-blue-600 to-blue-700 rounded-[2.5rem] p-8 text-white relative overflow-hidden group">
|
||||||
|
<div class="relative z-10">
|
||||||
|
<h3 class="text-2xl font-bold mb-4">Livraison & Montage</h3>
|
||||||
|
<p class="text-blue-100">On s'occupe de tout. On dépose, on gonfle, et on revient chercher la structure. Vous profitez seulement !</p>
|
||||||
|
</div>
|
||||||
|
<div class="absolute -bottom-10 -right-10 opacity-20 group-hover:scale-110 transition-transform">
|
||||||
|
<svg class="w-48 h-48" fill="currentColor" viewBox="0 0 24 24"><path d="M19 8h-2V5h-7v3H5a3 3 0 00-3 3v6h2a3 3 0 006 0h4a3 3 0 006 0h2v-5a3 3 0 00-3-3z"/></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# Tuile Moyenne #}
|
||||||
|
<div class="bg-white border border-gray-100 rounded-[2.5rem] p-8 shadow-sm hover:shadow-md transition-shadow">
|
||||||
|
<div class="w-12 h-12 bg-amber-100 text-amber-600 rounded-2xl flex items-center justify-center mb-6">
|
||||||
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold text-gray-900 mb-2">Sécurité</h3>
|
||||||
|
<p class="text-gray-500 text-sm">Châteaux inspectés et désinfectés avant chaque location.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# Tuile Moyenne #}
|
||||||
|
<div class="bg-white border border-gray-100 rounded-[2.5rem] p-8 shadow-sm hover:shadow-md transition-shadow">
|
||||||
|
<div class="w-12 h-12 bg-green-100 text-green-600 rounded-2xl flex items-center justify-center mb-6">
|
||||||
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold text-gray-900 mb-2">Dispo 7j/7</h3>
|
||||||
|
<p class="text-gray-500 text-sm">Une question ? Un événement de dernière minute ? On répond présent.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{# --- SECTION CATALOGUE : Les produits --- #}
|
||||||
|
<section id="catalogue" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="flex justify-between items-end mb-12">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-3xl font-black text-gray-900">Nos Best-Sellers</h2>
|
||||||
|
<p class="text-gray-500 mt-2">Les structures préférées de nos clients à Danizy.</p>
|
||||||
|
</div>
|
||||||
|
<a href="{{ path('reservation_search') }}" class="text-blue-600 font-bold hover:underline flex items-center gap-2">
|
||||||
|
Tout voir
|
||||||
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
|
{# Exemple de carte produit répétable #}
|
||||||
|
{% for i in 1..3 %}
|
||||||
|
<div class="group bg-white rounded-[2.5rem] p-4 border border-gray-100 shadow-sm hover:shadow-xl transition-all duration-500">
|
||||||
|
<div class="relative overflow-hidden rounded-[2rem] aspect-[4/5]">
|
||||||
|
<img src="https://images.unsplash.com/photo-1572953108543-d2023bc62f7d?auto=format&fit=crop&q=80" class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700">
|
||||||
|
<div class="absolute top-4 left-4 bg-white/90 backdrop-blur-md px-4 py-2 rounded-2xl shadow-sm">
|
||||||
|
<span class="text-blue-600 font-black text-sm uppercase">Dès 120€</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-6 px-2 pb-2">
|
||||||
|
<h3 class="text-xl font-bold text-gray-900">Le Royaume Magique</h3>
|
||||||
|
<div class="mt-3 flex items-center gap-4 text-gray-400 text-sm font-medium">
|
||||||
|
<span class="flex items-center gap-1.5">
|
||||||
|
<svg class="w-4 h-4 text-amber-500" fill="currentColor" viewBox="0 0 20 20"><path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM6 8a2 2 0 11-4 0 2 2 0 014 0zM11 18a4 4 0 00-8 0 4 4 0 008 0zM19 18a4 4 0 00-8 0 4 4 0 008 0z"/></svg>
|
||||||
|
10 Enfants
|
||||||
|
</span>
|
||||||
|
<span class="flex items-center gap-1.5">
|
||||||
|
<svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"/></svg>
|
||||||
|
25 m²
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="mt-8 flex gap-3">
|
||||||
|
<a href="#" class="flex-grow py-4 bg-gray-900 text-white text-center rounded-2xl font-bold hover:bg-blue-600 transition-colors">
|
||||||
|
Réserver
|
||||||
|
</a>
|
||||||
|
<button class="p-4 bg-gray-50 text-gray-400 rounded-2xl hover:text-blue-600 transition-colors">
|
||||||
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
195
templates/revervation/hosting.twig
Normal file
195
templates/revervation/hosting.twig
Normal file
@@ -0,0 +1,195 @@
|
|||||||
|
{% extends 'revervation/base.twig' %}
|
||||||
|
|
||||||
|
{% block title %}Hébergement et Infos Techniques - Ludik Event{% endblock %}
|
||||||
|
{% block breadcrumb_json %}
|
||||||
|
,{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 1,
|
||||||
|
"name": "Informations Légales et d'Hébergement",
|
||||||
|
"item": "{{ path('revervation_hosting') }}"
|
||||||
|
}
|
||||||
|
{% endblock %}
|
||||||
|
{% block body %}
|
||||||
|
<div class="min-h-screen bg-gray-50 font-sans antialiased pb-20">
|
||||||
|
|
||||||
|
{# --- HEADER TECHNIQUE --- #}
|
||||||
|
<div class="max-w-6xl mx-auto pt-16 pb-12 px-4">
|
||||||
|
<div class="flex flex-col md:flex-row items-end justify-between gap-6 border-b border-slate-200 pb-8">
|
||||||
|
<div>
|
||||||
|
<h1 class="text-4xl md:text-6xl font-black text-slate-900 uppercase tracking-tighter italic leading-none">
|
||||||
|
Informations Légales et d'Hébergement
|
||||||
|
</h1>
|
||||||
|
<p class="mt-4 text-slate-500 font-medium italic">Architecture, infrastructure et mentions légales.</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<div class="inline-flex items-center gap-2 px-3 py-1 bg-emerald-100 rounded-full mb-2">
|
||||||
|
<span class="w-2 h-2 bg-emerald-500 rounded-full animate-pulse"></span>
|
||||||
|
<span class="text-[9px] font-black text-emerald-700 uppercase tracking-widest">Systèmes Opérationnels</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-[10px] font-black text-slate-400 uppercase tracking-[0.3em]">Zone EU-WEST4</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# --- BENTO GRID --- #}
|
||||||
|
<div class="max-w-6xl mx-auto px-4">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-4">
|
||||||
|
|
||||||
|
{# 1. Éditeur du Site (Ludik Event) #}
|
||||||
|
<div class="md:col-span-6 bg-white p-8 rounded-[2.5rem] border border-slate-100 shadow-sm flex flex-col justify-between">
|
||||||
|
<div>
|
||||||
|
<span class="text-[10px] font-black text-indigo-500 uppercase tracking-widest mb-4 block italic">Éditeur du site</span>
|
||||||
|
<h2 class="text-2xl font-black text-slate-900 uppercase italic mb-4">Ludik Event</h2>
|
||||||
|
<address class="not-italic text-sm text-slate-500 space-y-1 italic">
|
||||||
|
<p>SIRET : 930 488 408 00012</p>
|
||||||
|
<p>6, rue du Château, 02800 Danizy</p>
|
||||||
|
</address>
|
||||||
|
</div>
|
||||||
|
<div class="mt-6">
|
||||||
|
<p class="text-[10px] font-black text-slate-400 uppercase mb-2 italic">Responsabilité Contenu</p>
|
||||||
|
<a href="mailto:lilian@ludikevent.fr" class="text-sm font-bold text-slate-900 hover:text-indigo-600">lilian@ludikevent.fr</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# 2. Opérateur Technique (SiteConseil) #}
|
||||||
|
<div class="md:col-span-6 bg-slate-900 p-8 rounded-[2.5rem] shadow-xl text-white relative overflow-hidden">
|
||||||
|
<div class="absolute -right-4 -bottom-4 text-7xl opacity-10">⚙️</div>
|
||||||
|
<span class="text-[10px] font-black text-amber-400 uppercase tracking-widest mb-4 block italic">Maintenance & Infrastructure</span>
|
||||||
|
<h2 class="text-2xl font-black uppercase italic mb-4">SARL SiteConseil</h2>
|
||||||
|
<div class="grid grid-cols-2 gap-4 text-[10px] text-slate-400 italic">
|
||||||
|
<p>SIRET : 418 664 058 00025</p>
|
||||||
|
<p>TVA : FR05418664058</p>
|
||||||
|
<p class="col-span-2">27 Rue Le Serurier, 02100 Saint-Quentin</p>
|
||||||
|
</div>
|
||||||
|
<div class="mt-8 pt-6 border-t border-white/10 flex justify-between items-center">
|
||||||
|
<p class="text-[10px] font-bold text-amber-400 uppercase italic">Signalement : signalement@siteconseil.fr</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# 3. Eco-Impact (Green Box) #}
|
||||||
|
<div class="md:col-span-4 bg-emerald-50 p-8 rounded-[2.5rem] border border-emerald-100 flex flex-col justify-between group">
|
||||||
|
<div>
|
||||||
|
<h3 class="text-xs font-black text-emerald-900 uppercase tracking-widest mb-4 italic">Innovation Durable</h3>
|
||||||
|
<p class="text-[11px] text-emerald-800 italic leading-relaxed">
|
||||||
|
Infrastructure propulsée par <strong class="text-emerald-900">Google Cloud</strong> avec une empreinte carbone estimée à <span class="text-emerald-600 font-bold">0,017 tCO₂e/mois</span>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="mt-6 flex items-center gap-2">
|
||||||
|
<span class="text-xl">🌱</span>
|
||||||
|
<p class="text-[9px] font-black text-emerald-700 uppercase">Haute efficience énergétique</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# 4. Localisation Cloud (Map Box) #}
|
||||||
|
<div class="md:col-span-8 bg-white p-8 rounded-[2.5rem] border border-slate-100 shadow-sm relative overflow-hidden">
|
||||||
|
<div class="absolute right-0 top-0 p-8 opacity-5 text-9xl">🌍</div>
|
||||||
|
<h3 class="text-xs font-black text-slate-900 uppercase tracking-widest mb-6 italic">Localisation & Disponibilité</h3>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||||
|
<div>
|
||||||
|
<p class="text-[10px] font-black text-indigo-500 uppercase mb-2 italic">Hébergement Principal</p>
|
||||||
|
<p class="text-sm font-bold text-slate-900 italic">Pays-Bas (EU-WEST4)</p>
|
||||||
|
<p class="text-[10px] text-slate-400 italic mt-1 leading-relaxed">Zones eu-west4-a/b/c pour une Haute Disponibilité.</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-[10px] font-black text-indigo-500 uppercase mb-2 italic">Sauvegardes (DRP)</p>
|
||||||
|
<p class="text-sm font-bold text-slate-900 italic">Multi-Zones (EU-WEST9)</p>
|
||||||
|
<p class="text-[10px] text-slate-400 italic mt-1 leading-relaxed">Réplication sécurisée pour une sécurité maximale.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# 5. Services Techniques & Sous-domaines (Tableau) #}
|
||||||
|
<div class="md:col-span-12 bg-white rounded-[2.5rem] border border-slate-100 shadow-sm overflow-hidden">
|
||||||
|
<div class="p-8 border-b border-slate-50 flex justify-between items-center bg-slate-50/50">
|
||||||
|
<h3 class="text-xs font-black text-slate-900 uppercase tracking-widest italic">Écosystème Technique Esy-Web</h3>
|
||||||
|
<span class="text-[9px] font-bold text-slate-400 px-3 py-1 bg-white rounded-full border border-slate-100 uppercase">Géré par SiteConseil</span>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 divide-y sm:divide-y-0 sm:divide-x divide-slate-100">
|
||||||
|
<div class="p-6">
|
||||||
|
<p class="text-[9px] font-black text-indigo-500 uppercase mb-2">Stockage</p>
|
||||||
|
<p class="text-[10px] font-bold text-slate-700 font-mono">s3.esy-web.dev</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6">
|
||||||
|
<p class="text-[9px] font-black text-indigo-500 uppercase mb-2">Monitoring</p>
|
||||||
|
<p class="text-[10px] font-bold text-slate-700 font-mono">sentry.esy-web.dev</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<p class="text-[9px] font-black text-indigo-500 uppercase mb-2">Sécurité</p>
|
||||||
|
<p class="text-[10px] font-bold text-slate-700 font-mono">tools-security.esy-web.dev</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<p class="text-[9px] font-black text-indigo-500 uppercase mb-2">Emails</p>
|
||||||
|
<p class="text-[10px] font-bold text-slate-700 font-mono">mail.esy-web.dev</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# 6. Stack Sécurité (Medium) #}
|
||||||
|
<div class="md:col-span-7 bg-white p-8 rounded-[2.5rem] border border-slate-100 shadow-sm">
|
||||||
|
<h3 class="text-xs font-black text-slate-900 uppercase tracking-widest mb-6 italic italic">Protection Multicouche</h3>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<div class="flex items-start gap-4">
|
||||||
|
<div class="w-10 h-10 bg-orange-50 rounded-xl flex items-center justify-center text-orange-600 font-bold shrink-0">CF</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-[11px] font-black text-slate-900 uppercase">Cloudflare (CDN & Proxy)</p>
|
||||||
|
<p class="text-[10px] text-slate-500 italic">Bouclier Anti-DDoS, Anti-Bot et accélération globale du contenu.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-4">
|
||||||
|
<div class="w-10 h-10 bg-indigo-50 rounded-xl flex items-center justify-center text-indigo-600 font-bold shrink-0">SY</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-[11px] font-black text-slate-900 uppercase">Sentry Monitoring</p>
|
||||||
|
<p class="text-[10px] text-slate-500 italic">Détection proactive des erreurs en temps réel pour une qualité de service optimale.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# 7. Email Delivery (Medium) #}
|
||||||
|
<div class="md:col-span-5 bg-white p-8 rounded-[2.5rem] border border-slate-100 shadow-sm flex flex-col justify-between">
|
||||||
|
<div>
|
||||||
|
<h3 class="text-xs font-black text-slate-900 uppercase tracking-widest mb-4 italic italic">Esy Mail Service</h3>
|
||||||
|
<p class="text-[10px] text-slate-500 italic leading-relaxed">
|
||||||
|
Notifications et confirmations via <strong class="text-slate-900">Amazon SES</strong> (Relais externe) pour garantir une délivrabilité maximale.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="mt-4 p-4 bg-amber-50 rounded-2xl border border-amber-100">
|
||||||
|
<p class="text-[9px] text-amber-800 italic leading-tight">
|
||||||
|
<strong>Note :</strong> Amazon SES traite le contenu technique des e-mails pour assurer l'envoi vers les destinataires.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# 8. Conformité Légale (Bottom Full) #}
|
||||||
|
<div class="md:col-span-12 bg-indigo-900 text-white p-8 rounded-[2.5rem] shadow-2xl relative overflow-hidden">
|
||||||
|
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-amber-400 via-indigo-400 to-emerald-400"></div>
|
||||||
|
<h3 class="text-xs font-black text-indigo-300 uppercase tracking-widest mb-6 italic">Conformité & Cadre Légal</h3>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
|
<p class="text-[11px] text-indigo-100 italic leading-relaxed">
|
||||||
|
<strong class="text-white block mb-1">RGPD EU</strong>
|
||||||
|
Hébergement 100% Union Européenne garantissant la protection souveraine de vos données personnelles.
|
||||||
|
</p>
|
||||||
|
<p class="text-[11px] text-indigo-100 italic leading-relaxed">
|
||||||
|
<strong class="text-white block mb-1">PROTECTION DES MINEURS</strong>
|
||||||
|
Architecture conforme à l'Art. 227-24 du Code Pénal pour le contrôle d'accès aux services.
|
||||||
|
</p>
|
||||||
|
<p class="text-[11px] text-indigo-100 italic leading-relaxed">
|
||||||
|
<strong class="text-white block mb-1">SÉCURITÉ INFRA</strong>
|
||||||
|
Défense multicouche (GCP + SiteConseil + Cloudflare) contre les menaces numériques.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# --- FOOTER --- #}
|
||||||
|
<div class="max-w-6xl mx-auto px-4 mt-16 flex justify-between items-center border-t border-slate-200 pt-8">
|
||||||
|
<p class="text-[9px] font-black text-slate-300 uppercase tracking-[0.5em]">Ludik Event © 2026</p>
|
||||||
|
<div class="flex gap-6">
|
||||||
|
<a href="{{ path('revervation') }}" class="text-[10px] font-black text-slate-900 hover:text-indigo-600 uppercase tracking-widest">Accueil</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
144
templates/revervation/legal.twig
Normal file
144
templates/revervation/legal.twig
Normal file
@@ -0,0 +1,144 @@
|
|||||||
|
{% extends 'revervation/base.twig' %}
|
||||||
|
|
||||||
|
{% block title %}Mentions Légales - Ludikevent{% endblock %}
|
||||||
|
|
||||||
|
{% block breadcrumb_json %}
|
||||||
|
,{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 1,
|
||||||
|
"name": "Mentions Légal",
|
||||||
|
"item": "{{ url('revervation_mentions-legal') }}"
|
||||||
|
}
|
||||||
|
{% endblock %}
|
||||||
|
{% block body %}
|
||||||
|
<div class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50/50">
|
||||||
|
<div class="max-w-6xl mx-auto space-y-10">
|
||||||
|
|
||||||
|
{# --- EN-TÊTE PRINCIPAL --- #}
|
||||||
|
<div class="bg-white border-2 border-gray-100 p-12 rounded-[2.5rem] text-center shadow-xl shadow-gray-200/50 relative overflow-hidden">
|
||||||
|
<div class="absolute -top-10 -right-10 w-40 h-40 bg-blue-50 rounded-full blur-3xl"></div>
|
||||||
|
<h1 class="text-4xl md:text-6xl font-black text-gray-900 uppercase tracking-tighter italic relative z-10">
|
||||||
|
Mentions <span class="text-blue-600">Légales</span>
|
||||||
|
</h1>
|
||||||
|
<p class="mt-4 text-gray-500 font-bold uppercase tracking-widest text-xs relative z-10">Informations obligatoires & Protection des données</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-8">
|
||||||
|
|
||||||
|
{# 1. Informations Légales #}
|
||||||
|
<div class="md:col-span-12 lg:col-span-7 bg-white border-2 border-gray-100 p-10 rounded-[2.5rem] shadow-xl shadow-gray-200/40 group hover:border-blue-200 transition-all duration-300">
|
||||||
|
<div class="flex items-center gap-4 mb-8">
|
||||||
|
<div class="w-14 h-14 rounded-2xl bg-blue-600 text-white flex items-center justify-center font-black text-xl shadow-lg shadow-blue-200 transition-transform group-hover:scale-110">ID</div>
|
||||||
|
<h2 class="text-2xl font-black uppercase tracking-tight text-gray-900">Informations Légales</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 text-sm font-medium text-gray-600">
|
||||||
|
<div class="space-y-4">
|
||||||
|
<p><span class="block text-[10px] text-blue-600 uppercase font-black mb-1 tracking-widest">Nom de la Société</span><strong class="text-gray-900 text-lg">SEGARD LILIAN - LUDIKEVENT</strong></p>
|
||||||
|
<p><span class="block text-[10px] text-blue-600 uppercase font-black mb-1 tracking-widest">Adresse</span>6, rue du Château 02800 DANIZY</p>
|
||||||
|
<p><span class="block text-[10px] text-blue-600 uppercase font-black mb-1 tracking-widest">Tél.</span><span class="text-gray-900 font-bold">06 14 17 24 47</span></p>
|
||||||
|
<p><span class="block text-[10px] text-blue-600 uppercase font-black mb-1 tracking-widest">Capital social</span>Entrepreneur individuel</p>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<p><span class="block text-[10px] text-blue-600 uppercase font-black mb-1 tracking-widest">SIRET</span>93048840800012</p>
|
||||||
|
<p><span class="block text-[10px] text-blue-600 uppercase font-black mb-1 tracking-widest">RCS</span>930488408</p>
|
||||||
|
<p><span class="block text-[10px] text-blue-600 uppercase font-black mb-1 tracking-widest">TVA Intracommunautaire</span>FR12930488408</p>
|
||||||
|
<p><span class="block text-[10px] text-blue-600 uppercase font-black mb-1 tracking-widest">Responsable publication</span>SEGARD Lilian</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-10 pt-8 border-t border-gray-100 flex flex-wrap gap-4">
|
||||||
|
<a href="mailto:lilian@ludikevent.fr" class="bg-blue-50 text-blue-600 px-6 py-3 rounded-2xl text-[11px] font-black uppercase tracking-widest hover:bg-blue-600 hover:text-white transition-all">lilian@ludikevent.fr</a>
|
||||||
|
<a href="mailto:guillaume@ludikevent.fr" class="bg-blue-50 text-blue-600 px-6 py-3 rounded-2xl text-[11px] font-black uppercase tracking-widest hover:bg-blue-600 hover:text-white transition-all">guillaume@ludikevent.fr</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# 2. Description des services #}
|
||||||
|
<div class="md:col-span-12 lg:col-span-5 bg-amber-500 p-10 rounded-[2.5rem] shadow-xl shadow-amber-200/50 text-white relative overflow-hidden group">
|
||||||
|
<div class="relative z-10 h-full flex flex-col">
|
||||||
|
<h2 class="text-2xl font-black uppercase tracking-tight mb-6">Description des services fournis</h2>
|
||||||
|
<div class="space-y-4 text-sm font-medium leading-relaxed">
|
||||||
|
<p>Le site {{ app.request.host }} a pour objet de proposer des prestations de location de structures gonflables, de jeux d’extérieurs, de Barnum et de tous matériels.</p>
|
||||||
|
<p>Le propriétaire du site s’efforce de fournir sur le site {{ app.request.host }} des informations aussi précises que possible. Toutefois, il 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 proposées sur le site {{ app.request.host }} sont données à titre indicatif, sont non exhaustives, et sont susceptibles d’évoluer. Elles sont données sous réserve de modifications ayant été apportées depuis leur mise en ligne.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="absolute -bottom-10 -right-10 w-40 h-40 bg-white/10 rounded-full blur-2xl group-hover:scale-150 transition-transform duration-700"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# 3. Propriété intellectuelle #}
|
||||||
|
<div class="md:col-span-12 bg-white border-2 border-gray-100 p-10 rounded-[2.5rem] shadow-xl shadow-gray-200/40">
|
||||||
|
<div class="flex flex-col md:flex-row gap-8">
|
||||||
|
<div class="flex-shrink-0 w-20 h-20 bg-gray-900 text-white rounded-[1.8rem] flex items-center justify-center font-black text-3xl">©</div>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<h2 class="text-2xl font-black uppercase tracking-tight text-gray-900">Propriété intellectuelle et contrefaçons</h2>
|
||||||
|
<div class="text-sm text-gray-500 font-medium leading-relaxed space-y-4">
|
||||||
|
<p>Le propriétaire du site est propriétaire des droits de propriété intellectuelle ou détient les droits d’usage sur tous les éléments accessibles sur le site, notamment les textes, images, graphismes, logo, icônes, sons, logiciels…</p>
|
||||||
|
<p>Toute reproduction, représentation, modification, publication, adaptation totale ou partielle des éléments du site, quel que soit le moyen ou le procédé utilisé, est interdite, sauf autorisation écrite préalable par le propriétaire du site et les ayants droits.</p>
|
||||||
|
<p>Toute exploitation non autorisée du site ou de l’un quelconque de ces éléments qu’il contient sera considérée comme constitutive d’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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# 4. Liens & Cookies #}
|
||||||
|
<div class="md:col-span-12 lg:col-span-6 bg-white border-2 border-gray-100 p-10 rounded-[2.5rem] shadow-xl shadow-gray-200/40">
|
||||||
|
<h2 class="text-2xl font-black uppercase tracking-tight text-gray-900 mb-6">Liens hypertextes et cookies</h2>
|
||||||
|
<div class="text-sm text-gray-500 font-medium space-y-4 leading-relaxed">
|
||||||
|
<p>Le site {{ app.request.host }} contient un certain nombre de liens hypertextes vers d’autres sites (partenaires, informations …) mis en place avec l’autorisation du propriétaire du site. Cependant, le propriétaire du site n’a pas la possibilité de vérifier le contenu des sites ainsi visités et déclinons donc toute responsabilité de ce fait quant aux risques éventuels de contenus illicites.</p>
|
||||||
|
<div class="p-6 bg-blue-50/50 rounded-3xl border-2 border-blue-100 space-y-4 mt-4 text-justify">
|
||||||
|
<p>L’utilisateur est informé que lors de ses visites sur le site {{ app.request.host }}, un ou des cookies sont susceptible de s’installer automatiquement sur son ordinateur. Les données ainsi obtenues visent à faciliter la navigation ultérieure sur le site, et ont également vocation à permettre diverses mesures de fréquentation.</p>
|
||||||
|
<p class="font-bold text-blue-800 italic text-xs">Le paramétrage du logiciel de navigation permet d’informer de la présence de cookie et éventuellement, de refuser. Le refus d’installation d’un cookie peut entraîner l’impossibilité d’accéder à certains services.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# 5. Protection des données personnelles #}
|
||||||
|
<div class="md:col-span-12 lg:col-span-6 bg-blue-600 p-10 rounded-[2.5rem] shadow-xl shadow-blue-200 text-white relative">
|
||||||
|
<h2 class="text-2xl font-black uppercase tracking-tight mb-6 italic text-blue-100">Données personnelles</h2>
|
||||||
|
<div class="text-sm font-medium leading-relaxed space-y-4">
|
||||||
|
<p>Le propriétaire du site ne collecte des informations personnelles relatives à l’utilisateur que pour le besoin de certains services proposés par le site {{ app.request.host }}. L’utilisateur fournit ces informations en toute connaissance de cause, notamment lorsqu’il procède par lui-même à leur saisie lors d’une prise de contact par formulaire ou demande de devis.</p>
|
||||||
|
<div class="bg-white/10 p-6 rounded-3xl space-y-3">
|
||||||
|
<p class="italic">Conformément aux textes en vigueur, tout utilisateur dispose d’un droit d’accès, de rectification, de suppression et d’opposition. Pour l’exercer, adressez votre demande par email : <span class="font-bold underline">lilian@ludikevent.fr</span>.</p>
|
||||||
|
</div>
|
||||||
|
<p>Aucune information personnelle de l’utilisateur du site {{ app.request.host }} n’est publiée à l’insu de l’utilisateur, échangée, transférée, cédée ou vendue sur un support quelconque à des tiers.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# 6. Textes de loi & Lexique #}
|
||||||
|
<div class="md:col-span-12 lg:col-span-8 bg-slate-100 border-2 border-slate-200 p-10 rounded-[2.5rem] text-slate-700">
|
||||||
|
<h2 class="text-xl font-black uppercase text-blue-600 mb-6 tracking-tight">Textes de loi applicables</h2>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||||
|
<ul class="text-[11px] font-bold space-y-3 uppercase tracking-wider">
|
||||||
|
<li>▪ Loi n° 78-17 du 6 janvier 1978</li>
|
||||||
|
<li>▪ Loi n° 2004-801 du 6 août 2004</li>
|
||||||
|
<li>▪ L’article L. 226-13 du Code pénal</li>
|
||||||
|
<li>▪ Loi n° 2004-575 du 21 juin 2004 (LCEN)</li>
|
||||||
|
<li>▪ Règlement Général sur la Protection des Données (RGPD)</li>
|
||||||
|
</ul>
|
||||||
|
<div class="bg-white/50 p-6 rounded-3xl">
|
||||||
|
<p class="text-[10px] uppercase font-black text-slate-400 mb-2 tracking-widest">Lexique</p>
|
||||||
|
<p class="text-xs"><strong>Utilisateur :</strong> Internaute utilisant le site.</p>
|
||||||
|
<p class="text-xs mt-1"><strong>Informations personnelles :</strong> Permettent l’identification des personnes physiques (Art. 4 Loi 78-17).</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# 7. Juridiction #}
|
||||||
|
<div class="md:col-span-12 lg:col-span-4 bg-white border-2 border-gray-100 p-10 rounded-[2.5rem] shadow-xl shadow-gray-200/40 flex flex-col justify-center text-center">
|
||||||
|
<h2 class="text-xs font-black uppercase tracking-widest text-gray-400 mb-4">Droit & Juridiction</h2>
|
||||||
|
<p class="text-sm font-black text-gray-900 leading-relaxed italic mb-4">
|
||||||
|
Tout litige en relation avec l’utilisation du site {{ app.request.host }} est soumis au droit français.
|
||||||
|
</p>
|
||||||
|
<p class="text-xs font-bold text-gray-500 uppercase tracking-tighter">Attribution exclusive de juridiction :<br>
|
||||||
|
<span class="text-2xl text-blue-600 font-black block mt-2">Saint-Quentin</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-center pt-8">
|
||||||
|
<p class="text-[10px] font-black uppercase tracking-[0.5em] text-gray-300">© {{ "now"|date("Y") }} {{ app.request.host|upper }} • LUDIKEVENT</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
188
templates/revervation/rgpd.twig
Normal file
188
templates/revervation/rgpd.twig
Normal file
@@ -0,0 +1,188 @@
|
|||||||
|
{% extends 'revervation/base.twig' %}
|
||||||
|
|
||||||
|
{% block title %}Protection des Données - Ludik Event{% endblock %}
|
||||||
|
{% block breadcrumb_json %}
|
||||||
|
,{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 1,
|
||||||
|
"name": "Règlement Général sur la Protection des Données (RGPD)",
|
||||||
|
"item": "{{ path('revervation_rgpd') }}"
|
||||||
|
}
|
||||||
|
{% endblock %}
|
||||||
|
{% block body %}
|
||||||
|
<div class="min-h-screen bg-gray-50 font-sans antialiased pb-20">
|
||||||
|
|
||||||
|
{# --- HEADER DYNAMIQUE --- #}
|
||||||
|
<div class="max-w-6xl mx-auto pt-16 pb-12 px-4">
|
||||||
|
<div class="flex flex-col md:flex-row items-end justify-between gap-6 border-b border-slate-200 pb-8">
|
||||||
|
<div>
|
||||||
|
<h1 class="text-4xl md:text-6xl font-black text-slate-900 uppercase tracking-tighter italic leading-none">
|
||||||
|
Règlement Général sur la Protection des Données (RGPD)
|
||||||
|
</h1>
|
||||||
|
<p class="mt-4 text-slate-500 font-medium italic">Engagement pour la sécurité et la confidentialité de vos données.</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<p class="text-[10px] font-black text-slate-400 uppercase tracking-[0.3em] mb-1">Mise à jour officielle</p>
|
||||||
|
<p class="text-sm font-bold text-slate-900 italic">23 Avril 2025</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# --- GRILLE BENTO PRINCIPALE --- #}
|
||||||
|
<div class="max-w-6xl mx-auto px-4">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-4">
|
||||||
|
|
||||||
|
{# 1. Introduction & Bases Légales (Large) #}
|
||||||
|
<div class="md:col-span-8 bg-white p-8 rounded-[2.5rem] border border-slate-100 shadow-sm flex flex-col justify-center">
|
||||||
|
<span class="text-[10px] font-black text-indigo-500 uppercase tracking-widest mb-4">01. Fondements Juridiques</span>
|
||||||
|
<p class="text-base md:text-lg text-slate-700 leading-relaxed italic">
|
||||||
|
Conformément au <strong class="text-slate-900 italic">RGPD (Art. 6)</strong>, vos données sont traitées sur la base de votre consentement, de l'exécution d'un contrat ou de nos intérêts légitimes. Nous garantissons une collecte transparente pour nos services en ligne et interactions directes.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# 2. Chiffrement Haute Sécurité (Focus Technique) #}
|
||||||
|
<div class="md:col-span-4 bg-slate-900 p-8 rounded-[2.5rem] shadow-xl flex flex-col items-center justify-center text-center group relative overflow-hidden">
|
||||||
|
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-amber-400 to-indigo-500"></div>
|
||||||
|
<div class="w-16 h-16 bg-white/10 rounded-2xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
|
||||||
|
<span class="text-3xl">🔑</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-white font-black uppercase text-xs tracking-widest mb-2">Chiffrement AES-256</h3>
|
||||||
|
<p class="text-[10px] text-slate-400 italic leading-relaxed">
|
||||||
|
Rotation automatique des clés toutes les 24h. Données inaccessibles pour l'hébergeur et le propriétaire.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# 3. Les 3 Catégories de Données (Full Width) #}
|
||||||
|
<div class="md:col-span-12 grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
<div class="bg-white p-6 rounded-[2rem] border border-slate-100 shadow-sm">
|
||||||
|
<p class="text-amber-600 text-xl mb-2">✍️</p>
|
||||||
|
<h4 class="text-xs font-black uppercase mb-2">Données communiquées</h4>
|
||||||
|
<p class="text-[11px] text-slate-500 italic">Nom, adresse, email, téléphone, date de naissance, données de paiement.</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white p-6 rounded-[2rem] border border-slate-100 shadow-sm">
|
||||||
|
<p class="text-indigo-600 text-xl mb-2">🤖</p>
|
||||||
|
<h4 class="text-xs font-black uppercase mb-2">Moyens automatisés</h4>
|
||||||
|
<p class="text-[11px] text-slate-500 italic">IP, UDID, Cookies, Géolocalisation (soumise à autorisation), historique de navigation.</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white p-6 rounded-[2rem] border border-slate-100 shadow-sm">
|
||||||
|
<p class="text-emerald-600 text-xl mb-2">🌐</p>
|
||||||
|
<h4 class="text-xs font-black uppercase mb-2">Autres sources</h4>
|
||||||
|
<p class="text-[11px] text-slate-500 italic">Réseaux sociaux, bases publiques et partenaires marketing.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# 4. Finalités du traitement (Medium - Indigo) #}
|
||||||
|
<div class="md:col-span-7 bg-indigo-50 p-8 rounded-[2.5rem] border border-indigo-100">
|
||||||
|
<h3 class="text-xs font-black text-indigo-900 uppercase tracking-widest mb-6 italic">Pourquoi collectons-nous ?</h3>
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-y-4 gap-x-8">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="w-1.5 h-1.5 bg-indigo-400 rounded-full"></span>
|
||||||
|
<p class="text-[11px] font-bold text-indigo-900 uppercase italic">Gestion des commandes</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="w-1.5 h-1.5 bg-indigo-400 rounded-full"></span>
|
||||||
|
<p class="text-[11px] font-bold text-indigo-900 uppercase italic">Support client</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="w-1.5 h-1.5 bg-indigo-400 rounded-full"></span>
|
||||||
|
<p class="text-[11px] font-bold text-indigo-900 uppercase italic">Sécurité des réseaux</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="w-1.5 h-1.5 bg-indigo-400 rounded-full"></span>
|
||||||
|
<p class="text-[11px] font-bold text-indigo-900 uppercase italic">Marketing personnalisé</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# 5. Vos Droits (Square - Amber) #}
|
||||||
|
<div class="md:col-span-5 bg-amber-50 p-8 rounded-[2.5rem] border border-amber-100 flex flex-col justify-between">
|
||||||
|
<div>
|
||||||
|
<h3 class="text-xs font-black text-amber-900 uppercase tracking-widest mb-4 italic">Vos Droits RGPD</h3>
|
||||||
|
<p class="text-[11px] text-amber-800 italic leading-relaxed">
|
||||||
|
Accès, rectification, effacement, opposition, portabilité et retrait de consentement.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="mt-4">
|
||||||
|
<p class="text-[9px] font-black text-amber-900/50 uppercase mb-2">Contact Délégué :</p>
|
||||||
|
<p class="text-sm font-black text-amber-900 italic">contact@ludikevent.fr</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# 6. Partage & Livraison (Medium) #}
|
||||||
|
<div class="md:col-span-6 bg-white p-8 rounded-[2.5rem] border border-slate-100 shadow-sm">
|
||||||
|
<h3 class="text-xs font-black text-slate-900 uppercase tracking-widest mb-4 italic">Partage & Livraison</h3>
|
||||||
|
<p class="text-[11px] text-slate-500 italic leading-relaxed mb-4">
|
||||||
|
Nous ne vendons aucune donnée. Vos informations sont partagées uniquement avec nos prestataires techniques et de livraison (prénom, nom, téléphone, adresse) pour honorer vos commandes.
|
||||||
|
</p>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<span class="px-3 py-1 bg-slate-100 rounded-full text-[9px] font-black uppercase text-slate-500">Logistique</span>
|
||||||
|
<span class="px-3 py-1 bg-slate-100 rounded-full text-[9px] font-black uppercase text-slate-500">Paiement</span>
|
||||||
|
<span class="px-3 py-1 bg-slate-100 rounded-full text-[9px] font-black uppercase text-slate-500">Cloud EU</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# 7. Additif Technique SITECONSEIL (Large) #}
|
||||||
|
<div class="md:col-span-6 bg-slate-50 p-8 rounded-[2.5rem] border border-slate-200 flex flex-col justify-between">
|
||||||
|
<div>
|
||||||
|
<h3 class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] mb-4 italic">Expertise Technique (SiteConseil)</h3>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<div class="flex justify-between items-center text-[11px]">
|
||||||
|
<span class="font-bold text-slate-700 italic">Infrastructure</span>
|
||||||
|
<span class="text-slate-500 italic">Google Cloud Platform (GCP)</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-center text-[11px]">
|
||||||
|
<span class="font-bold text-slate-700 italic">Certificats</span>
|
||||||
|
<span class="text-slate-500 italic">TLS/SSL (Cloudflare & Let's Encrypt)</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-center text-[11px]">
|
||||||
|
<span class="font-bold text-slate-700 italic">DPO</span>
|
||||||
|
<span class="text-slate-500 italic">Philippe LEGRAND (03 23 05 62 43)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-6 pt-4 border-t border-slate-200">
|
||||||
|
<p class="text-[9px] font-black text-indigo-500 uppercase italic">Contact Technique : rgpd@siteconseil.fr</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# 8. Cookies & Localisation (Small) #}
|
||||||
|
<div class="md:col-span-4 bg-white p-8 rounded-[2.5rem] border border-slate-100 shadow-sm flex flex-col justify-between">
|
||||||
|
<h3 class="text-xs font-black text-slate-900 uppercase tracking-widest italic mb-2">Cookies</h3>
|
||||||
|
<p class="text-[10px] text-slate-500 italic leading-relaxed">
|
||||||
|
Utilisés pour vous reconnaître, mesurer la performance et sécuriser le site. Désactivables via votre navigateur.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# 9. Conservation & Enfants (Small) #}
|
||||||
|
<div class="md:col-span-4 bg-white p-8 rounded-[2.5rem] border border-slate-100 shadow-sm flex flex-col justify-between">
|
||||||
|
<h3 class="text-xs font-black text-slate-900 uppercase tracking-widest italic mb-2">Conservation</h3>
|
||||||
|
<p class="text-[10px] text-slate-500 italic leading-relaxed">
|
||||||
|
Données conservées <strong class="text-slate-900 italic">3 ans</strong> après votre dernière activité. Pas de collecte < 15 ans sans accord parental.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# 10. Contact Ludik Event (Small - Highlight) #}
|
||||||
|
<div class="md:col-span-4 bg-indigo-600 p-8 rounded-[2.5rem] text-white flex flex-col justify-between">
|
||||||
|
<h3 class="text-xs font-black uppercase tracking-widest italic">Siège Social</h3>
|
||||||
|
<address class="not-italic">
|
||||||
|
<p class="text-[11px] font-bold">LUDIK EVENT</p>
|
||||||
|
<p class="text-[11px] italic text-indigo-100">6, rue du Château</p>
|
||||||
|
<p class="text-[11px] italic text-indigo-100">02800 DANIZY</p>
|
||||||
|
</address>
|
||||||
|
<p class="text-[11px] font-black uppercase mt-2 tracking-widest">lilian@ludikevent.fr</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# --- FOOTER LEGAL --- #}
|
||||||
|
<div class="max-w-6xl mx-auto px-4 mt-16 flex flex-col md:flex-row justify-between items-center gap-4">
|
||||||
|
<p class="text-[9px] font-black text-slate-400 uppercase tracking-[0.5em]">Ludik Event © 2026 - Conforme CNIL</p>
|
||||||
|
<div class="flex gap-6">
|
||||||
|
<a href="{{ path('revervation') }}" class="text-[10px] font-black text-slate-900 hover:text-indigo-600 uppercase tracking-widest transition-colors flex items-center gap-2">
|
||||||
|
🏠 Accueil
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
@@ -44,6 +44,7 @@ export default defineConfig({
|
|||||||
app: resolve(__dirname, 'assets/app.js'),
|
app: resolve(__dirname, 'assets/app.js'),
|
||||||
admin: resolve(__dirname, 'assets/admin.js'),
|
admin: resolve(__dirname, 'assets/admin.js'),
|
||||||
error: resolve(__dirname, 'assets/error.js'),
|
error: resolve(__dirname, 'assets/error.js'),
|
||||||
|
reserve: resolve(__dirname, 'assets/reserve.js'),
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user