kit-eco.social/landing
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

footer component

Browse Source
This commit is contained in:
María
2025-07-29 14:09:56 +02:00
committed by María
parent 329a7ef7c0
commit 8a92b3d1f9
14 changed files with 146 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
components/Footer.vue Normal file
View File

@@ -0,0 +1,85 @@
<template>
<footer class="bg-background-dark text-white py-12 px-4 md:px-8 flex flex-col gap-8 rounded-t-3xl">
<div class="flex flex-col lg:flex-row gap-16 md:gap-12 lg:gap-16">
<div class="flex flex-col justify-between items-center md:items-start w-full md:w-1/3 lg:w-1/6">
<div class="mb-4">
<img src="/assets/svg/logo.svg" alt="Kit-ECO.SOCIAL Logo" class="h-15 w-auto">
</div>
<p class="mb-4 text-center md:text-start">Síguenos y entérate de los próximos eventos, novedades y recursos.</p>
<ul class="flex space-x-4">
<li class="h-12 lg:h-8 w-12 lg:w-8 rounded-full border border-white">
<a href="#" target="_blank" rel="noopener noreferrer" class="flex items-center justify-center h-full w-full">
<img src="/assets/svg/instagram.svg" alt="Instagram" class="w-4 h-4">
</a>
</li>
<li class="h-12 lg:h-8 w-12 lg:w-8 rounded-full border border-white">
<a href="#" target="_blank" rel="noopener noreferrer" class="flex items-center justify-center h-full w-full">
<img src="/assets/svg/facebook.svg" alt="Facebook" class="w-4 h-4">
</a>
</li>
<li class="h-12 lg:h-8 w-12 lg:w-8 rounded-full border border-white">
<a href="#" target="_blank" rel="noopener noreferrer" class="flex items-center justify-center h-full w-full">
<img src="/assets/svg/linkedin.svg" alt="LinkedIn" class="w-4 h-4">
</a>
</li>
<li class="h-12 lg:h-8 w-12 lg:w-8 rounded-full border border-white">
<a href="#" target="_blank" rel="noopener noreferrer" class="flex items-center justify-center h-full w-full">
<img src="/assets/svg/x.svg" alt="X-Twitter" class="w-4 h-4">
</a>
</li>
</ul>
</div>
<div class="flex flex-col md:flex-row justify-between gap-16 md:gap-0 lg:gap-16 w-full lg:w-5/6">
<div class="flex md:w-2/3 lg:w-1/2">
<div class="flex flex-col w-1/2">
<h3 class="font-semibold text-lg mb-4">Herramientas</h3>
<ul class="space-y-3 text-left">
<li><a href="#" class="hover:underline">Consumo Cuidado</a></li>
<li><a href="#" class="hover:underline">Aula Virtual</a></li>
<li><a href="#" class="hover:underline">Iguales</a></li>
<li><a href="#" class="hover:underline">ODS</a></li>
<li><a href="#" class="hover:underline">Certifica-T</a></li>
<li><a href="#" class="hover:underline">Foro</a></li>
</ul>
</div>
<div class="flex flex-col w-1/2">
<h3 class="font-semibold text-lg mb-4">Enlaces rápidos</h3>
<ul class="space-y-3 text-left">
<li><a href="#" class="hover:underline">Nosotras</a></li>
<li><a href="#" class="hover:underline">Contactanos</a></li>
<li><a href="#" class="hover:underline">Terminos y condiciones</a></li>
<li><a href="#" class="hover:underline">Politica de privacidad</a></li>
<li><a href="#" class="hover:underline">Aviso legal</a></li>
</ul>
</div>
</div>
<div class="flex flex-col items-center md:items-end md:w-1/3 lg:w-1/2">
<h3 class="font-semibold text-lg mb-4">Proyecto financiado por:</h3>
<div class="grid grid-cols-12 gap-y-3 w-full">
<img src="/assets/img/uelogo 1.png" alt="Financiado por la Unión Europea - NextGenerationEU" class="h-12 lg:h-14 col-span-6 md:col-span-12 mx-auto md:mx-0 md:ml-auto">
<img src="/assets/img/Logotipo_del_Ministerio_de_Trabajo_y_Economía_Social.svg 1.png" alt="Gobierno de España" class="h-12 lg:h-14 col-span-6 md:col-span-12 mx-auto md:mx-0 md:ml-auto">
<img src="/assets/img/Logotipo_del_Plan_de_Recuperación,_Transformación_y_Resiliencia.png" alt="Plan de Recuperación, Transformación y Resiliencia" class="h-12 lg:h-14 col-span-12 md:col-span-12 mx-auto md:mx-0 md:ml-auto">
</div>
</div>
</div>
</div>
<div class="border-t border-extra-light mt-8 pt-4 text-center text-xs">
<p><span>{{ year }}</span> © kit-ECO.SOCIAL | Diseñado y desarrollado por Enreda Coop</p>
</div>
</footer>
</template>
<script>
import { getCurrentYear } from "@/utils/dates.js";
export default {
computed: {
year() {
return getCurrentYear();
},
},
};
</script>