docs: add redesign references and agent guidance
This commit is contained in:
@@ -0,0 +1,292 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="es"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400&family=Inter:wght@400;600;700&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"surface-variant": "#eae1d4",
|
||||
"error-container": "#ffdad6",
|
||||
"surface-dim": "#e1d9cc",
|
||||
"on-surface-variant": "#4d4635",
|
||||
"surface-container-high": "#efe7da",
|
||||
"primary-fixed": "#ffe088",
|
||||
"inverse-primary": "#e9c349",
|
||||
"primary-fixed-dim": "#e9c349",
|
||||
"on-primary": "#ffffff",
|
||||
"secondary-fixed": "#ffdea4",
|
||||
"secondary-fixed-dim": "#f1bf5a",
|
||||
"primary-container": "#d4af37",
|
||||
"error": "#ba1a1a",
|
||||
"tertiary-fixed-dim": "#b4c5ff",
|
||||
"surface": "#fff8f0",
|
||||
"inverse-surface": "#343027",
|
||||
"tertiary": "#415ba4",
|
||||
"on-error-container": "#93000a",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-secondary": "#ffffff",
|
||||
"secondary": "#7b5900",
|
||||
"on-tertiary-fixed-variant": "#27438a",
|
||||
"on-surface": "#1f1b13",
|
||||
"on-tertiary-container": "#254188",
|
||||
"tertiary-fixed": "#dbe1ff",
|
||||
"primary": "#735c00",
|
||||
"outline-variant": "#d0c5af",
|
||||
"surface-tint": "#735c00",
|
||||
"surface-bright": "#fff8f0",
|
||||
"on-primary-fixed-variant": "#574500",
|
||||
"on-error": "#ffffff",
|
||||
"on-background": "#1f1b13",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-primary-container": "#554300",
|
||||
"outline": "#7f7663",
|
||||
"on-secondary-container": "#755400",
|
||||
"on-primary-fixed": "#241a00",
|
||||
"on-tertiary-fixed": "#00174b",
|
||||
"inverse-on-surface": "#f8f0e2",
|
||||
"tertiary-container": "#97b0ff",
|
||||
"surface-container-low": "#fbf3e5",
|
||||
"secondary-container": "#fdca64",
|
||||
"on-secondary-fixed-variant": "#5d4200",
|
||||
"on-secondary-fixed": "#261900",
|
||||
"surface-container": "#f5eddf",
|
||||
"background": "#fff8f0",
|
||||
"surface-container-highest": "#eae1d4"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"margin-page": "64px",
|
||||
"section-gap": "120px",
|
||||
"container-max": "1280px",
|
||||
"gutter": "32px",
|
||||
"unit": "4px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-md": ["Noto Serif"],
|
||||
"label-caps": ["Inter"],
|
||||
"body-sm": ["Inter"],
|
||||
"body-lg": ["Inter"],
|
||||
"headline-lg": ["Noto Serif"],
|
||||
"display-lg": ["Noto Serif"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-md": ["32px", {"lineHeight": "1.3", "letterSpacing": "0.03em", "fontWeight": "400"}],
|
||||
"label-caps": ["12px", {"lineHeight": "1", "letterSpacing": "0.15em", "fontWeight": "600"}],
|
||||
"body-sm": ["14px", {"lineHeight": "1.5", "letterSpacing": "0.01em", "fontWeight": "400"}],
|
||||
"body-lg": ["16px", {"lineHeight": "1.6", "letterSpacing": "0em", "fontWeight": "400"}],
|
||||
"headline-lg": ["40px", {"lineHeight": "1.2", "letterSpacing": "0.02em", "fontWeight": "400"}],
|
||||
"display-lg": ["64px", {"lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "400"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body { background-color: #fff8f0; }
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.editorial-shadow { box-shadow: 0 10px 30px -15px rgba(115, 92, 0, 0.1); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="text-on-surface font-body-lg selection:bg-primary-fixed selection:text-on-primary-fixed">
|
||||
<!-- TopNavBar -->
|
||||
<nav class="fixed top-0 w-full z-50 h-20 bg-surface/80 backdrop-blur-md border-b border-outline/10">
|
||||
<div class="flex justify-between items-center px-margin-page max-w-container-max mx-auto h-full">
|
||||
<div class="font-headline-md text-headline-md text-primary tracking-tighter">MNQ Catering</div>
|
||||
<div class="hidden md:flex items-center gap-8">
|
||||
<a class="font-label-caps text-label-caps tracking-[0.15em] uppercase text-on-surface hover:text-primary transition-colors duration-300" href="#">Bodas</a>
|
||||
<a class="font-label-caps text-label-caps tracking-[0.15em] uppercase text-on-surface hover:text-primary transition-colors duration-300" href="#">Corporativo</a>
|
||||
<a class="font-label-caps text-label-caps tracking-[0.15em] uppercase text-on-surface hover:text-primary transition-colors duration-300" href="#">Social</a>
|
||||
<a class="font-label-caps text-label-caps tracking-[0.15em] uppercase text-primary border-b-2 border-primary pb-1" href="#">Nosotros</a>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="material-symbols-outlined text-primary hover:opacity-80 transition-all duration-300 scale-95 active:scale-90" data-icon="chat">chat</button>
|
||||
<button class="hidden md:block font-label-caps text-label-caps uppercase border border-primary px-6 py-2 rounded-[12px] text-primary hover:bg-primary hover:text-on-primary transition-all duration-300">WhatsApp</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<main class="pt-20">
|
||||
<!-- Hero Section: Editorial Intro -->
|
||||
<section class="px-margin-page py-section-gap max-w-container-max mx-auto">
|
||||
<div class="grid grid-cols-12 gap-gutter items-center">
|
||||
<div class="col-span-12 md:col-span-5 mb-12 md:mb-0">
|
||||
<span class="font-label-caps text-label-caps uppercase text-primary tracking-widest mb-6 block">Nuestra Esencia</span>
|
||||
<h1 class="font-display-lg text-display-lg text-on-surface mb-8">El arte de la hospitalidad elevada.</h1>
|
||||
<p class="text-body-lg text-on-surface-variant max-w-md leading-relaxed">
|
||||
Desde nuestra fundación, MNQ Catering ha redefinido el concepto de exclusividad culinaria. No solo servimos comida; curamos momentos que perduran en la memoria de los paladares más exigentes.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-7 relative">
|
||||
<div class="aspect-[4/5] overflow-hidden rounded-lg">
|
||||
<img class="w-full h-full object-cover grayscale-[20%] hover:scale-105 transition-transform duration-700" data-alt="A high-end, luxury table setting in a sun-drenched, minimalist ivory room. The scene features delicate gold cutlery, fine bone china, and a single sculptural floral arrangement. The lighting is soft and directional, creating long shadows that emphasize the editorial and exclusive atmosphere of a high-society event. The color palette is strictly warm ivory, deep graphite, and metallic gold accents, reflecting a contemporary luxury aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDEsy10c7TIuiKBlcDuPGrkutEtMuZbSwBvphj556kuPvK7igCXI-VWqHL6_MjslUd4lQNBGrkqtiqk9vpAhm3bK8RVgUhZ-OURzHtQ5reFcQ0rekIS3LEL26_KFk2GWzzSX_JROpWCAGaJfLZWdFIblN_YO-4rTPGeTtKXCFAcglZyaIe-wYb-av56YJfufKAOu1gdtyvppiopoBEeG8G40w22gLhoEKKK9xW45IoxpG6Bp7ywr4ExCya4wiMoEyTtPvr5kgimm75c"/>
|
||||
</div>
|
||||
<div class="absolute -bottom-10 -left-10 bg-surface-container p-10 hidden lg:block border border-outline-variant/30">
|
||||
<p class="font-headline-md text-headline-md text-secondary italic">"La perfección no es un acto, es un hábito."</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Philosophy Section -->
|
||||
<section class="bg-surface-container-low py-section-gap border-y border-outline-variant/10">
|
||||
<div class="px-margin-page max-w-container-max mx-auto">
|
||||
<div class="grid grid-cols-12 gap-gutter">
|
||||
<div class="col-span-12 md:col-start-2 md:col-span-4">
|
||||
<h2 class="font-headline-lg text-headline-lg mb-8">Filosofía de Exclusividad</h2>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-6 space-y-8">
|
||||
<p class="font-body-lg text-on-surface-variant">
|
||||
Creemos que cada evento tiene su propia alma. Nuestra filosofía se basa en la escucha activa y la personalización radical. En un mundo de producciones en serie, MNQ apuesta por lo artesanal, lo local y lo extraordinario.
|
||||
</p>
|
||||
<p class="font-body-lg text-on-surface-variant">
|
||||
Cada ingrediente es seleccionado por su trazabilidad y calidad superior, trabajando codo a codo con productores que comparten nuestra pasión por la excelencia.
|
||||
</p>
|
||||
<div class="pt-4">
|
||||
<a class="inline-block font-label-caps text-label-caps uppercase border-b-2 border-primary-container pb-1 text-on-surface hover:text-primary transition-all" href="#">Explorar Menú de Autor</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Values Grid -->
|
||||
<section class="px-margin-page py-section-gap max-w-container-max mx-auto">
|
||||
<div class="text-center mb-24">
|
||||
<span class="font-label-caps text-label-caps uppercase text-primary tracking-widest block mb-4">Pilares de Marca</span>
|
||||
<h2 class="font-headline-lg text-headline-lg">Valores que nos definen</h2>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-12">
|
||||
<!-- Value 1 -->
|
||||
<div class="p-10 border border-outline-variant/30 hover:bg-surface-container transition-colors duration-500 text-center flex flex-col items-center">
|
||||
<span class="material-symbols-outlined text-4xl text-primary mb-6" data-icon="verified">verified</span>
|
||||
<h3 class="font-headline-md text-headline-md mb-4">Calidad</h3>
|
||||
<p class="font-body-sm text-on-surface-variant leading-relaxed">
|
||||
Innegociable. Desde la frescura del producto hasta el último detalle del servicio de sala.
|
||||
</p>
|
||||
</div>
|
||||
<!-- Value 2 -->
|
||||
<div class="p-10 border border-outline-variant/30 hover:bg-surface-container transition-colors duration-500 text-center flex flex-col items-center">
|
||||
<span class="material-symbols-outlined text-4xl text-primary mb-6" data-icon="history_edu">history_edu</span>
|
||||
<h3 class="font-headline-md text-headline-md mb-4">Tradición</h3>
|
||||
<p class="font-body-sm text-on-surface-variant leading-relaxed">
|
||||
Honramos las técnicas clásicas que han forjado la gran cocina, aplicándolas con respeto.
|
||||
</p>
|
||||
</div>
|
||||
<!-- Value 3 -->
|
||||
<div class="p-10 border border-outline-variant/30 hover:bg-surface-container transition-colors duration-500 text-center flex flex-col items-center">
|
||||
<span class="material-symbols-outlined text-4xl text-primary mb-6" data-icon="architecture">architecture</span>
|
||||
<h3 class="font-headline-md text-headline-md mb-4">Vanguardia</h3>
|
||||
<p class="font-body-sm text-on-surface-variant leading-relaxed">
|
||||
Innovamos en presentaciones y texturas para sorprender a los paladares contemporáneos.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Team Portraits -->
|
||||
<section class="bg-on-background py-section-gap overflow-hidden">
|
||||
<div class="px-margin-page max-w-container-max mx-auto">
|
||||
<div class="flex flex-col md:flex-row justify-between items-end mb-20">
|
||||
<div>
|
||||
<span class="font-label-caps text-label-caps uppercase text-primary-fixed-dim tracking-widest block mb-4">El Capital Humano</span>
|
||||
<h2 class="font-headline-lg text-headline-lg text-surface-bright">Mentes tras el menú</h2>
|
||||
</div>
|
||||
<p class="text-surface-variant max-w-xs mt-6 md:mt-0 font-body-sm opacity-80">
|
||||
Un equipo multidisciplinar de chefs, sommeliers y diseñadores de eventos unidos por un propósito común.
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<!-- Member 1 -->
|
||||
<div class="group">
|
||||
<div class="aspect-[3/4] overflow-hidden mb-6 bg-surface-dim">
|
||||
<img class="w-full h-full object-cover grayscale filter group-hover:grayscale-0 transition-all duration-700" data-alt="A minimalist, high-contrast black and white portrait of a professional chef wearing a crisp white designer uniform. The lighting is dramatic and moody, reminiscent of a luxury fashion magazine editorial. The chef is looking thoughtfully off-camera, against a deep graphite background that creates a sense of focused expertise and quiet confidence. The image quality is extremely high-resolution, highlighting the texture of the fabric and the subtle details of the setting." src="https://lh3.googleusercontent.com/aida-public/AB6AXuB2HWdfbtlZzhTpPlhOvsGhIgTSKkngesYpZac0mVHtIX1oO6_FAouwwzj1X7r9NhWolfewWefTpJj5rlSHD9uL-3VeGVrfSZ0bM6DhgbyRyw8yOtw_vaPrBb3aB56JJ9jRDcj9OaQvVAYkHh1QJK5Zva6c01SOOVQyJKg-Lv1lPf8L9cDF0vOU9CEQvXoTwGN-Oebd4qjvrG_BAwSh2TeoldN-T0gVbGT1pjl4RurS188fIVVz_jyZXkYlH69C_4LRBuXFjGYb-mw5"/>
|
||||
</div>
|
||||
<h4 class="font-headline-md text-[20px] text-surface-bright mb-1">Mateo Navarro</h4>
|
||||
<p class="font-label-caps text-[10px] uppercase text-primary-fixed-dim tracking-widest">Director Ejecutivo</p>
|
||||
</div>
|
||||
<!-- Member 2 -->
|
||||
<div class="group">
|
||||
<div class="aspect-[3/4] overflow-hidden mb-6 bg-surface-dim">
|
||||
<img class="w-full h-full object-cover grayscale filter group-hover:grayscale-0 transition-all duration-700" data-alt="An editorial portrait of a female head chef in a minimalist studio environment. She is dressed in a contemporary dark culinary apron over a white shirt. The lighting is soft and warm, casting gentle shadows across a clean, ivory-toned background. Her expression is welcoming yet professional, embodying the high-end hospitality and creative leadership of MNQ Catering. The aesthetic is clean, spacious, and sophisticated, reflecting a luxury lifestyle brand." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBDTUo_hPm6uH3Iu69DoMjRDhuht6tOT9ysefoIfKxGdfnL6i8u8-iic_XWSA22icg8tcqXJd5uvcKFXSCXR25t3_XYAKx4NPD01z1RWgo0gJZGIZq2DYfRBirKItWguimzzVpOcMNMRzHS3C__BtXj5OhdSHcWULYZWP9pY41Eo-nGy-GrAcrkG6_Gg5eRaoC3JxZ2jpSo1i5PPF2VOcV50uw61MJQzMs5wXN300Ia6n1lq0RqMVloKtUwHQVDIoSBy1ota565rRIp"/>
|
||||
</div>
|
||||
<h4 class="font-headline-md text-[20px] text-surface-bright mb-1">Lucía Quintana</h4>
|
||||
<p class="font-label-caps text-[10px] uppercase text-primary-fixed-dim tracking-widest">Chef Creativa</p>
|
||||
</div>
|
||||
<!-- Member 3 -->
|
||||
<div class="group">
|
||||
<div class="aspect-[3/4] overflow-hidden mb-6 bg-surface-dim">
|
||||
<img class="w-full h-full object-cover grayscale filter group-hover:grayscale-0 transition-all duration-700" data-alt="A professional sommelier in a formal, well-tailored suit, captured in an editorial style. The scene is set in a dimly lit, high-end cellar environment with subtle glints of light reflecting off glass. The palette is dominated by deep warm tones and soft gold light, creating a mood of refined knowledge and luxury. The portrait is framed asymmetrically, leaving significant negative space that aligns with a minimalist editorial design system." src="https://lh3.googleusercontent.com/aida-public/AB6AXuC8tUrNTv6tThqFUgf0ma33h44TXZzaunQbmybY5EdTEV08KIHpBTObR11s7JH4iMnfXQsO3tBAPPv2QSN7wwB32RlpSIq7d4_oiZjUCqc1E4xXaDM5-iN1S2RDQ84sh5MpANGu8N2vq3Yy8wlGiBM7sEpdSBBX0vrGUBq96VW3a0ZFrvcjrEQ9EUZ0K99Rp_wYRN1WKkcgmjqbqneB5TI6-O103h3p1l2yE6ph9cQJVpus9094IYcFvUdD-fPDrqkx4pRNHvlolfFq"/>
|
||||
</div>
|
||||
<h4 class="font-headline-md text-[20px] text-surface-bright mb-1">Julián Marín</h4>
|
||||
<p class="font-label-caps text-[10px] uppercase text-primary-fixed-dim tracking-widest">Head Sommelier</p>
|
||||
</div>
|
||||
<!-- Member 4 -->
|
||||
<div class="group">
|
||||
<div class="aspect-[3/4] overflow-hidden mb-6 bg-surface-dim">
|
||||
<img class="w-full h-full object-cover grayscale filter group-hover:grayscale-0 transition-all duration-700" data-alt="A high-fashion editorial portrait of an event designer in a modern, light-filled office space. She is surrounded by architectural sketches and textile samples in neutral tones. The composition uses a shallow depth of field, focusing on her confident expression while the background softly blurs into ivory and gold textures. The overall lighting is bright and airy, signifying creativity and a meticulous eye for luxury event planning details." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAQcsf26GhYpW_rbFJnYD8MaVWfcnSfqLC4kcVWwEMx7baaVu_tui4XfKOKXjlNXXCYRyIUWHz30hIB_S1V7wcMz45SKfp54sKNN8QXh3450n_-ExR8VfcWlyUTCJ4evEo8fsgbhjVdMkROeyteKxC3Zr1EI034zmAQsHtV4RAl5aEvUK_Q2FvmuJPE-BujE9ep_pvUhpPOBd0u_KfacYnFZCHKXFhaBnrCGr5HPpJdg-ECpN-VWkl8cEAxc-AtxI_hx0RDqCRjsm7I"/>
|
||||
</div>
|
||||
<h4 class="font-headline-md text-[20px] text-surface-bright mb-1">Elena Soler</h4>
|
||||
<p class="font-label-caps text-[10px] uppercase text-primary-fixed-dim tracking-widest">Diseño de Experiencias</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- CTA Section -->
|
||||
<section class="px-margin-page py-section-gap max-w-container-max mx-auto text-center">
|
||||
<div class="max-w-2xl mx-auto">
|
||||
<h2 class="font-display-lg text-display-lg mb-8">¿Planeamos algo extraordinario?</h2>
|
||||
<p class="font-body-lg text-on-surface-variant mb-12">Estamos listos para transformar su visión en una realidad gastronómica sin precedentes.</p>
|
||||
<button class="bg-primary text-on-primary px-12 py-5 rounded-[12px] font-label-caps text-label-caps uppercase tracking-widest hover:bg-primary-container transition-all shadow-lg shadow-primary/10">Solicitar Dosier Exclusivo</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Footer -->
|
||||
<footer class="bg-surface-container border-t border-outline-variant/20 w-full py-section-gap">
|
||||
<div class="flex flex-col md:flex-row justify-between items-start px-margin-page max-w-container-max mx-auto gap-gutter">
|
||||
<div class="mb-12 md:mb-0">
|
||||
<div class="font-headline-lg text-headline-lg text-on-surface mb-4">MNQ</div>
|
||||
<p class="font-body-sm text-on-surface-variant max-w-xs">
|
||||
Excelencia culinaria y diseño de eventos para los momentos más significativos de la vida.
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-16">
|
||||
<div>
|
||||
<span class="font-label-caps text-[10px] uppercase text-primary mb-6 block">Navegación</span>
|
||||
<ul class="space-y-4">
|
||||
<li><a class="font-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Eventos</a></li>
|
||||
<li><a class="font-body-sm text-primary underline" href="#">Nosotros</a></li>
|
||||
<li><a class="font-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Gastronomía</a></li>
|
||||
<li><a class="font-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Espacios</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-label-caps text-[10px] uppercase text-primary mb-6 block">Legal & Social</span>
|
||||
<ul class="space-y-4">
|
||||
<li><a class="font-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Contacto</a></li>
|
||||
<li><a class="font-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Aviso Legal</a></li>
|
||||
<li><a class="font-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Instagram</a></li>
|
||||
<li><a class="font-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Facebook</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-margin-page max-w-container-max mx-auto mt-24 pt-8 border-t border-outline-variant/10 flex flex-col md:flex-row justify-between items-center gap-4">
|
||||
<p class="font-body-sm text-on-surface-variant opacity-60">© 2024 MNQ Catering y Eventos. Excelencia culinaria.</p>
|
||||
<div class="flex gap-6">
|
||||
<span class="material-symbols-outlined text-on-surface-variant hover:text-primary cursor-pointer transition-colors" data-icon="share">share</span>
|
||||
<span class="material-symbols-outlined text-on-surface-variant hover:text-primary cursor-pointer transition-colors" data-icon="mail">mail</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 277 KiB |
Reference in New Issue
Block a user