favicon, meta data & fix cards width mobile

components/CardCompany.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-col gap-4 rounded-3xl border-4 border-white min-h-64">
+    class="flex flex-col gap-4 rounded-3xl border-4 border-white min-h-64 h-full max-w-80 sm:max-w-full">
     <div class="flex flex-col gap-4 p-8 items-center w-full">
       <div v-if="image" class=" h-15 w-fit grayscale">
         <img 

components/CardCourse.vue

@@ -1,6 +1,6 @@
 <template>
   <div 
-  class="flex flex-col rounded-3xl border-4 border-white min-h-64 w-full"
+  class="flex flex-col rounded-3xl border-4 border-white min-h-68 max-h-full max-w-80 sm:max-w-full"
   :class="{
     'bg-consumo-extra-light': color === 'consumo',
       'bg-iguales-extra-light': color === 'iguales',
@@ -9,7 +9,7 @@
       'bg-foro-extra-light': color === 'foro',
       'bg-ods-extra-light': color === 'ods',
     }">
-    <div class="flex flex-col gap-2 bg-white px-6 py-8 rounded-b-2xl mt-auto min-h-44">
+    <div class="flex flex-col gap-2 bg-white px-6 py-8 rounded-b-xl mt-14 min-h-56">
       <h4 class="text-5.5 font-semibold uppercase">{{ title }}</h4>
       <p class="text-base" v-html="description"></p>
     </div>

components/CardTool.vue

@@ -2,8 +2,8 @@
   <div
     class="flex flex-col gap-4 rounded-3xl"
     :class="{
-      'border-4 border-white min-h-64': color === 'number',
-      'border-4 border-white min-h-20.9': color === 'transparent',
+      'border-4 border-white min-h-64 md:min-h-full max-w-80 sm:max-w-full': color === 'number',
+      'border-4 border-white min-h-20.9 md:min-h-full max-h-full max-w-80 sm:max-w-full': color === 'transparent',
       'shadow-tool-card hover:border-4 border-white transition-all duration-300 ease-in-out min-h-21.8 min-w-80 max-w-80': color !== 'transparent' && color !== 'number',
       'bg-consumo-base hover:bg-linear-to-t hover:from-consumo-base hover:to-consumo-extra-light': color === 'consumo',
       'bg-iguales-base hover:bg-linear-to-t hover:from-iguales-base hover:to-iguales-extra-light': color === 'iguales',
@@ -29,7 +29,7 @@
         <p class="text-center text-base" v-html="description"></p>
       </div>
     </NuxtLink>
-    <div v-if="!link" class="flex flex-col gap-4 p-8 items-center w-full">
+    <div v-if="!link" class="flex flex-col gap-4 p-8 items-center">
       <div v-if="image" class="h-25 w-25">
         <img 
           :src="`/img/${image.src}`"

components/SectionWithCards.vue

@@ -13,16 +13,16 @@
     'bg-linear-to-t from-ods-extra-light to-background-light': bgColor === 'ods',
   }">
     <div 
-    class="mx-auto max-w-2xl"
+    class="mx-auto max-w-2xl text-center"
     :class="{
       'flex flex-col justify-center items-center w-full': titlePosition === 'center',
       'flex flex-col items-start w-full': titlePosition === 'left',
     }">
       <h2 class="font-bold mb-6">{{ title }}</h2>
-      <p v-if="description" class="text-lg text-center" v-html="description"></p>
+      <p v-if="description" class="text-lg " v-html="description"></p>
     </div>
 
-    <ul  class="grid grid-cols-12 gap-8 mx-auto">
+    <ul  class="grid grid-cols-12 gap-8 mx-auto w-full">
       <li 
         v-for="(item, index) in cards" :key="`cards-${id}-${index}`"
         :class="{
@@ -56,7 +56,7 @@
       </li>
     </ul>
     <div v-if="hasButton && buttonSection" class="flex flex-col justify-center items-center mt-8">
-      <h4 v-if="buttonSection.title" class="font-semibold uppercase">{{ buttonSection.title }}</h4>
+      <h4 v-if="buttonSection.title" class="font-semibold uppercase text-center">{{ buttonSection.title }}</h4>
       <NuxtLink v-if="buttonSection?.button" :to="buttonSection?.button?.link">
         <ButtonCTA :color="buttonSection?.button?.color" class="uppercase mt-6">
           {{ buttonSection?.button?.label }}

nuxt.config.ts

@@ -11,5 +11,52 @@ export default defineNuxtConfig({
   css: ['~/assets/css/main.css'],
   vite: {
     plugins: [tailwindcss()]
-  }
-})
+  },
+  app: {
+    head: {
+      title: "KIT ECO.SOCIAL",
+      htmlAttrs: {
+        lang: "es",
+      },
+      meta: [
+        { charset: "utf-8" },
+        { name: "viewport", content: "width=device-width, initial-scale=1" },
+        {
+          hid: "description",
+          name: "description",
+          content:
+            "Kit de herramientas para el desarrollo sostenible de las entidades de economía social",
+        },
+        { hid: "og-type", property: "og:type", content: "website" },
+        {
+          hid: "og-title",
+          property: "og:title",
+          content: "KIT ECONOMIA SOCIAL",
+        },
+        {
+          hid: "og-desc",
+          property: "og:description",
+          content:
+            "KIT ECONOMIA SOCIAL - Kit de herramientas para el desarrollo sostenible de las entidades de economía social",
+        },
+        {
+          hid: "og-image",
+          property: "og:image",
+          content: "https://www.kit-eco.social/es/thumbnail.png",
+        },
+        {
+          hid: "og-url",
+          property: "og:url",
+          content: "https://www.kit-eco.social/es/",
+        },
+        { hid: "t-type", name: "twitter:card", content: "summary_large_image" },
+        { hid: "whatsapp-image", name: "whatsapp:image", content: "https://www.kit-eco.social/es/thumbnail.png" },
+        { name: "format-detection", content: "telephone=no" },
+      ],
+      link: [
+        { rel: 'canonical', href: 'https://www.kit-eco.social/es/'},
+        { rel: "icon", type: "image/x-icon", href: "/favicon.ico" }
+      ]
+    },
+  },
+});

pages/[langcode]/aula-virtual.vue

@@ -1,5 +1,5 @@
 <template>
-  <main v-if="consumoComponents" class="min-h-screen relative mx-8">
+  <main v-if="consumoComponents" class="min-h-screen relative mx-4 md:mx-8">
     <template v-for="(component, index) in consumoComponents" :key="`consumo-component-${component.component}-${index}`">
       <component 
         :is="component.component" 

pages/[langcode]/certifica-t.vue

@@ -1,5 +1,5 @@
 <template>
-  <main v-if="consumoComponents" class="min-h-screen relative mx-8">
+  <main v-if="consumoComponents" class="min-h-screen relative mx-4 md:mx-8">
     <template v-for="(component, index) in consumoComponents" :key="`consumo-component-${component.component}-${index}`">
       <component 
         :is="component.component" 

pages/[langcode]/consumo-cuidado.vue

@@ -1,5 +1,5 @@
 <template>
-  <main v-if="consumoComponents" class="min-h-screen relative mx-8">
+  <main v-if="consumoComponents" class="min-h-screen relative mx-4 md:mx-8">
     <template v-for="(component, index) in consumoComponents" :key="`consumo-component-${component.component}-${index}`">
       <component 
         :is="component.component" 

pages/[langcode]/foro.vue

@@ -1,5 +1,5 @@
 <template>
-  <main v-if="consumoComponents" class="min-h-screen relative mx-8">
+  <main v-if="consumoComponents" class="min-h-screen relative mx-4 md:mx-8">
     <template v-for="(component, index) in consumoComponents" :key="`consumo-component-${component.component}-${index}`">
       <component 
         :is="component.component" 

pages/[langcode]/iguales.vue

@@ -1,5 +1,5 @@
 <template>
-  <main v-if="consumoComponents" class="min-h-screen relative mx-8">
+  <main v-if="consumoComponents" class="min-h-screen relative mx-4 md:mx-8">
     <template v-for="(component, index) in consumoComponents" :key="`consumo-component-${component.component}-${index}`">
       <component 
         :is="component.component" 

pages/[langcode]/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <main v-if="landingComponents" class="min-h-screen relative mx-8">
+  <main v-if="landingComponents" class="min-h-screen relative mx-4 md:mx-8">
     <template v-for="(component, index) in landingComponents" :key="`component-${component.component}-${index}`">
       <component 
         :is="component.component" 

pages/[langcode]/nosotras.vue

@@ -1,5 +1,5 @@
 <template>
-  <main v-if="consumoComponents" class="min-h-screen relative mx-8">
+  <main v-if="consumoComponents" class="min-h-screen relative  mx-4 md:mx-8">
     <template v-for="(component, index) in consumoComponents" :key="`consumo-component-${component.component}-${index}`">
       <component 
         :is="component.component" 

pages/[langcode]/ods.vue

@@ -1,5 +1,5 @@
 <template>
-  <main v-if="consumoComponents" class="min-h-screen relative mx-8">
+  <main v-if="consumoComponents" class="min-h-screen relative  mx-4 md:mx-8">
     <template v-for="(component, index) in consumoComponents" :key="`consumo-component-${component.component}-${index}`">
       <component 
         :is="component.component"