feat: privacy policy, cookie policy and cookie consent banner

This commit is contained in:
Manuel
2026-05-08 01:27:24 +02:00
parent 58eb6dc952
commit 34386daca6
5 changed files with 370 additions and 1 deletions
+89
View File
@@ -0,0 +1,89 @@
<div class="cookie-banner" id="cookieBanner" aria-live="polite">
<div class="cookie-banner-inner">
<p class="cookie-text">
Usamos cookies técnicas necesarias para el funcionamiento del sitio.
Consulte nuestra <a href="/cookies">Política de Cookies</a> y <a href="/privacidad">Privacidad</a>.
</p>
<div class="cookie-actions">
<a href="/cookies" class="btn-underline cookie-more" style="font-size:0.65rem;">Más info</a>
<button id="cookieAccept" class="btn btn-primary cookie-accept">Aceptar</button>
</div>
</div>
</div>
<script>
const banner = document.getElementById('cookieBanner')!;
const accept = document.getElementById('cookieAccept')!;
if (localStorage.getItem('mnq_cookie_consent') === 'accepted') {
banner.style.display = 'none';
}
accept.addEventListener('click', () => {
localStorage.setItem('mnq_cookie_consent', 'accepted');
banner.classList.add('cookie-hide');
setTimeout(() => banner.style.display = 'none', 400);
});
</script>
<style>
.cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 80;
background: var(--color-inverse-surface);
color: var(--color-inverse-on-surface);
padding: var(--space-4) var(--space-page);
transition: transform 400ms ease, opacity 400ms ease;
}
.cookie-banner.cookie-hide {
transform: translateY(100%);
opacity: 0;
}
.cookie-banner-inner {
max-width: var(--max-w-content);
margin-inline: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
flex-wrap: wrap;
}
.cookie-text {
font-size: var(--text-sm);
color: rgb(248 240 226 / 85%);
line-height: 1.5;
flex: 1;
min-width: 16rem;
}
.cookie-text a {
color: var(--color-primary-container);
text-decoration: underline;
text-underline-offset: 3px;
}
.cookie-actions {
display: flex;
align-items: center;
gap: var(--space-6);
flex-shrink: 0;
}
.cookie-more {
color: rgb(248 240 226 / 70%);
border-color: rgb(248 240 226 / 40%);
font-size: 0.65rem;
}
.cookie-accept {
font-size: 0.7rem;
padding: 0.5rem 1.25rem;
min-height: 36px;
}
</style>
+2 -1
View File
@@ -30,7 +30,8 @@
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
>WhatsApp</a> >WhatsApp</a>
<a href="#" class="footer-link">Aviso Legal</a> <a href="/privacidad" class="footer-link">Privacidad</a>
<a href="/cookies" class="footer-link">Cookies</a>
</div> </div>
</div> </div>
+2
View File
@@ -2,6 +2,7 @@
import SiteHeader from '../components/SiteHeader.astro'; import SiteHeader from '../components/SiteHeader.astro';
import SiteFooter from '../components/SiteFooter.astro'; import SiteFooter from '../components/SiteFooter.astro';
import WhatsAppButton from '../components/WhatsAppButton.astro'; import WhatsAppButton from '../components/WhatsAppButton.astro';
import CookieBanner from '../components/CookieBanner.astro';
import '../styles/tokens.css'; import '../styles/tokens.css';
import '../styles/base.css'; import '../styles/base.css';
import '../styles/layout.css'; import '../styles/layout.css';
@@ -47,5 +48,6 @@ const {
</main> </main>
<SiteFooter /> <SiteFooter />
<WhatsAppButton /> <WhatsAppButton />
<CookieBanner />
</body> </body>
</html> </html>
+150
View File
@@ -0,0 +1,150 @@
---
import MainLayout from '../layouts/MainLayout.astro';
---
<MainLayout
title="Política de Cookies | MNQ Catering y Evento"
description="Información sobre el uso de cookies en el sitio web de MNQ Catering y Evento."
>
<section style="padding-top: calc(var(--nav-h) + var(--space-section)); padding-bottom: var(--space-section);">
<div class="page-wrap" style="max-width: 52rem;">
<span class="section-eyebrow">Legal</span>
<h1 class="text-display" style="margin-bottom: var(--space-8);">Política de Cookies</h1>
<p class="text-muted" style="margin-bottom: var(--space-12);">Última actualización: mayo de 2025</p>
<div class="privacy-content">
<h2>¿Qué son las cookies?</h2>
<p>Las cookies son pequeños archivos de texto que los sitios web almacenan en su dispositivo cuando los visita. Permiten que el sitio recuerde sus preferencias y mejore su experiencia de navegación.</p>
<h2>Cookies que utilizamos</h2>
<p>Este sitio web utiliza exclusivamente cookies técnicas estrictamente necesarias:</p>
<div class="cookie-table">
<div class="cookie-row cookie-header">
<span>Cookie</span>
<span>Finalidad</span>
<span>Duración</span>
</div>
<div class="cookie-row">
<span><code>mnq_cookie_consent</code></span>
<span>Recuerda si ha aceptado esta política de cookies</span>
<span>1 año</span>
</div>
</div>
<p>No utilizamos cookies de analítica, publicidad, seguimiento ni de redes sociales de terceros.</p>
<h2>Cookies de terceros</h2>
<p>Si hace clic en el enlace de WhatsApp, será redirigido a la plataforma de WhatsApp (Meta), que tiene su propia política de privacidad y cookies. No tenemos control sobre las cookies que WhatsApp pueda establecer en su dispositivo.</p>
<h2>Cómo gestionar las cookies</h2>
<p>Puede configurar su navegador para rechazar todas las cookies o para que le avise cuando se envíe una cookie. Sin embargo, si desactiva las cookies técnicas, algunas partes del sitio podrían no funcionar correctamente.</p>
<p>Instrucciones para los navegadores más comunes:</p>
<ul>
<li><strong>Chrome:</strong> Configuración → Privacidad y seguridad → Cookies</li>
<li><strong>Firefox:</strong> Preferencias → Privacidad y seguridad</li>
<li><strong>Safari:</strong> Preferencias → Privacidad</li>
<li><strong>Edge:</strong> Configuración → Privacidad, búsqueda y servicios</li>
</ul>
<h2>Retirar el consentimiento</h2>
<p>Puede retirar su consentimiento en cualquier momento eliminando las cookies de su navegador o haciendo clic en el botón a continuación:</p>
<button id="resetCookies" class="btn btn-outline" style="width: fit-content; margin-top: var(--space-2);">
Restablecer preferencias de cookies
</button>
<h2>Más información</h2>
<p>Para cualquier consulta sobre nuestra política de cookies, puede contactarnos en <strong>eventos@mnqcatering.com</strong>. Consulte también nuestra <a href="/privacidad">Política de Privacidad</a>.</p>
</div>
<div style="margin-top: var(--space-16); padding-top: var(--space-8); border-top: 1px solid rgb(208 197 175 / 30%);">
<a href="/" class="btn-underline">← Volver al inicio</a>
</div>
</div>
</section>
</MainLayout>
<script>
document.getElementById('resetCookies')?.addEventListener('click', () => {
localStorage.removeItem('mnq_cookie_consent');
alert('Preferencias restablecidas. La próxima vez que visites el sitio verás el aviso de cookies.');
});
</script>
<style>
.privacy-content {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.privacy-content h2 {
font-family: var(--font-serif);
font-size: var(--text-headline-md);
color: var(--color-on-surface);
margin-top: var(--space-6);
margin-bottom: 0;
}
.privacy-content p,
.privacy-content li {
color: var(--color-on-surface-variant);
line-height: 1.75;
}
.privacy-content ul {
list-style: disc;
padding-left: var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.privacy-content a {
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 3px;
}
.privacy-content strong { color: var(--color-on-surface); font-weight: 600; }
code {
font-family: monospace;
font-size: 0.85em;
background: var(--color-surface-container);
padding: 0.1em 0.4em;
border-radius: 4px;
}
.cookie-table {
border: 1px solid rgb(208 197 175 / 30%);
border-radius: var(--radius-md);
overflow: hidden;
font-size: var(--text-sm);
}
.cookie-row {
display: grid;
grid-template-columns: 2fr 3fr 1fr;
gap: var(--space-4);
padding: var(--space-4) var(--space-6);
border-bottom: 1px solid rgb(208 197 175 / 20%);
}
.cookie-row:last-child { border-bottom: none; }
.cookie-header {
background: var(--color-surface-container);
font-weight: 600;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-primary);
}
</style>
+127
View File
@@ -0,0 +1,127 @@
---
import MainLayout from '../layouts/MainLayout.astro';
---
<MainLayout
title="Política de Privacidad | MNQ Catering y Evento"
description="Política de privacidad y protección de datos de MNQ Catering y Evento."
>
<section style="padding-top: calc(var(--nav-h) + var(--space-section)); padding-bottom: var(--space-section);">
<div class="page-wrap" style="max-width: 52rem;">
<span class="section-eyebrow">Legal</span>
<h1 class="text-display" style="margin-bottom: var(--space-8);">Política de Privacidad</h1>
<p class="text-muted" style="margin-bottom: var(--space-12);">Última actualización: mayo de 2025</p>
<div class="privacy-content">
<h2>1. Responsable del Tratamiento</h2>
<p>
<strong>MNQ Catering y Evento</strong><br />
Teléfono: +34 678 17 15 13<br />
Email: eventos@mnqcatering.com
</p>
<h2>2. Datos que Recopilamos</h2>
<p>Recopilamos los siguientes datos personales cuando usted completa nuestro formulario de contacto o se comunica con nosotros:</p>
<ul>
<li>Nombre y apellidos</li>
<li>Correo electrónico</li>
<li>Número de teléfono (si nos contacta por WhatsApp)</li>
<li>Información sobre el evento (tipo, fecha estimada, requerimientos)</li>
</ul>
<h2>3. Finalidad del Tratamiento</h2>
<p>Sus datos se utilizan exclusivamente para:</p>
<ul>
<li>Responder a su solicitud de información o presupuesto</li>
<li>Gestionar la contratación de nuestros servicios de catering</li>
<li>Enviarle comunicaciones relacionadas con su evento</li>
</ul>
<p>No utilizamos sus datos para envío de publicidad no solicitada.</p>
<h2>4. Base Legal</h2>
<p>El tratamiento de sus datos se basa en su consentimiento explícito al enviarnos el formulario de contacto, y en la ejecución de un contrato de servicios cuando decide contratar con nosotros.</p>
<h2>5. Conservación de los Datos</h2>
<p>Conservamos sus datos durante el tiempo necesario para gestionar su solicitud y, en caso de contratación, durante el plazo legal exigido por la normativa fiscal y mercantil (hasta 6 años).</p>
<h2>6. Destinatarios</h2>
<p>Sus datos no se ceden ni venden a terceros. Únicamente podrán ser comunicados a proveedores de servicios imprescindibles para la prestación del servicio contratado (plataformas de mensajería como WhatsApp Business, gestión de correo electrónico), siempre bajo acuerdos de confidencialidad.</p>
<h2>7. Sus Derechos</h2>
<p>Conforme al Reglamento General de Protección de Datos (RGPD) y la Ley Orgánica 3/2018, usted tiene derecho a:</p>
<ul>
<li><strong>Acceso:</strong> conocer qué datos tratamos sobre usted</li>
<li><strong>Rectificación:</strong> corregir datos inexactos</li>
<li><strong>Supresión:</strong> solicitar la eliminación de sus datos</li>
<li><strong>Oposición:</strong> oponerse al tratamiento</li>
<li><strong>Portabilidad:</strong> recibir sus datos en formato estructurado</li>
</ul>
<p>
Para ejercer estos derechos, contacte con nosotros en <strong>eventos@mnqcatering.com</strong> o por WhatsApp al <strong>+34 678 17 15 13</strong>.
También puede presentar una reclamación ante la <a href="https://www.aepd.es" target="_blank" rel="noreferrer">Agencia Española de Protección de Datos (AEPD)</a>.
</p>
<h2>8. Cookies</h2>
<p>Este sitio web utiliza únicamente cookies técnicas necesarias para su funcionamiento. Consulte nuestra <a href="/cookies">Política de Cookies</a> para más información.</p>
<h2>9. Seguridad</h2>
<p>Adoptamos medidas técnicas y organizativas adecuadas para proteger sus datos personales frente a accesos no autorizados, pérdida o destrucción.</p>
<h2>10. Cambios en esta Política</h2>
<p>Podemos actualizar esta política ocasionalmente. Le notificaremos cualquier cambio significativo publicando la nueva versión en esta página con la fecha de actualización.</p>
</div>
<div style="margin-top: var(--space-16); padding-top: var(--space-8); border-top: 1px solid rgb(208 197 175 / 30%);">
<a href="/" class="btn-underline">← Volver al inicio</a>
</div>
</div>
</section>
</MainLayout>
<style>
.privacy-content {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.privacy-content h2 {
font-family: var(--font-serif);
font-size: var(--text-headline-md);
color: var(--color-on-surface);
margin-top: var(--space-6);
margin-bottom: 0;
}
.privacy-content p,
.privacy-content li {
color: var(--color-on-surface-variant);
line-height: 1.75;
font-size: var(--text-base);
}
.privacy-content ul {
list-style: disc;
padding-left: var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.privacy-content a {
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 3px;
}
.privacy-content strong {
color: var(--color-on-surface);
font-weight: 600;
}
</style>