what-is and tools sections

2025-07-30 13:43:34 +02:00
parent 5b176816f6
commit 240c4c6a95
26 changed files with 449 additions and 21 deletions
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -38,19 +38,20 @@
  /* Font sizes */
  --text-5.5: 1.375rem; /* 22px */
  --text-8: 2rem; /* 32px */
+  --text-32: 2rem; /* 32px */
+  --text-40: 2.5rem; /* 40px */

  /* Shadow */
  --shadow-button: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
+  --shadow-tool-card: 0 2px 5px 0 rgba(0, 0, 0, 0.25);

  /* Spacing */
  --spacing-32: 2rem; /* 32px */
+  --spacing-10.2: 10.25rem; /* 164px */
+  --spacing-21.8: 21.875rem; /* 350px */
  --spacing-25.6: 25.688rem; /* 411px */
  --spacing-44.8: 44.813rem; /* 717px */

-  /* Font sizes */
-  --text-32: 2rem; /* 32px */
-  --text-40: 2.5rem; /* 40px */
-
 }


@@ -174,11 +175,6 @@ body footer {
  top: 100dvh;
 }

-body {
-  margin: 0 var(--layout-padding-x, 2rem);
-}
-
-
 html {
  scroll-behavior: smooth;
 }
@@ -197,5 +193,30 @@ html {
 }

 .bg-gradient-conic-hero {
-  background: conic-gradient(from 185deg at 9.57% 56.1%, var(--Color-base--color-certifica-base, rgba(202, 240, 63, 0.10)) 53.653846979141235deg, var(--Color-base--color-consumo-base, rgba(242, 140, 140, 0.10)) 155.76923489570618deg, var(--Color-base--color-aula-base, rgba(92, 170, 204, 0.10)) 233.65383625030518deg, rgba(57, 182, 137, 0.10) 304.61538791656494deg), var(--Background--bg-light, #F9F4F2);
+  background: conic-gradient(
+  from 290deg at 10% 35%,
+  var(--Color-base--color-certifica-base, rgba(202, 240, 63, 0.10)) 0deg,
+  var(--Color-base--color-consumo-base, rgba(242, 140, 140, 0.10)) 90deg,
+  var(--Color-base--color-aula-base, rgba(92, 170, 204, 0.10)) 180deg,
+  var(--Color-base--color-ods-base, rgba(57, 182, 137, 0.10)) 270deg,
+  var(--Color-base--color-certifica-base, rgba(202, 240, 63, 0.10)) 360deg
+);
+background-color: var(--Background--bg-light, #f9f4f2);
+background-repeat: no-repeat;
+background-size: cover;
 }
+
+.bg-gradient-conic-2 {
+   min-height: 100%;
+      background: conic-gradient(
+        from 241deg at 50% -18.57%,
+        rgba(202, 240, 63, 0.10) 0deg,
+        rgba(242, 140, 140, 0.10) 90deg,
+        rgba(92, 170, 204, 0.10) 180deg,
+        rgba(57, 182, 137, 0.10) 270deg,
+        rgba(202, 240, 63, 0.10) 360deg
+      );
+      background-color: #f9f4f2;
+      background-repeat: no-repeat;
+      background-size: cover;
+}
--- a/components/CardTool.vue
+++ b/components/CardTool.vue
@@ -0,0 +1,65 @@
+<template>
+  <NuxtLink :to="`/${langcode}/${link}`">
+    <div
+      class="flex flex-col min-h-21.8 min-w-80 max-w-80 gap-4 p-8 rounded-3xl shadow-tool-card hover:border-4 border-white transition-all duration-300 ease-in-out"
+      :class="{
+        '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',
+        'bg-aula-base hover:bg-linear-to-t hover:from-aula-base hover:to-aula-extra-light': color === 'aula',
+        'bg-certifica-base hover:bg-linear-to-t hover:from-certifica-base hover:to-certifica-extra-light': color === 'certifica',
+        'bg-foro-base hover:bg-linear-to-t hover:from-foro-base hover:to-foro-extra-light': color === 'foro',
+        'bg-ods-base hover:bg-linear-to-t hover:from-ods-base hover:to-ods-extra-light': color === 'ods',
+      }"
+    >
+      <div class="col-span-4 h-10.2 w-full">
+        <img 
+          v-if="image"
+          :src="`/img/${image.src}`"
+          :alt="image.alt"
+          class="w-full h-full object-cover"
+        />
+        <!-- <img v-else src="" alt="imagen-error"> -->
+        <!-- TODO: Add a fallback image -->
+      </div>
+      <div class="flex flex-col gap-4 items-center">
+        <p class="text-5.5 font-semibold uppercase">{{ title }}</p>
+        <p class="text-center text-base">{{ description }}</p>
+      </div>
+    </div>
+  </NuxtLink>
+</template>
+
+<script>
+export default {
+  props: {
+    color: {
+      type: String,
+      default: "consumo",
+    },
+    title: {
+        type: String,
+        default: ''
+    },
+    description: {
+        type: String,
+        default: ''
+    },
+    image: {
+        type: Object,
+        default: () => ({
+          src: "",
+          alt: "",
+        }),
+    },
+    link: {
+        type: String,
+        default: null
+    },
+  },
+  computed: {
+    langcode() {
+      return this.$store.getters.langcode;
+    },
+  },
+}
+</script>
--- a/components/HeroHome.vue
+++ b/components/HeroHome.vue
@@ -1,7 +1,7 @@
 <template>
  <section
    :id="id"
-    class="relative flex flex-col p-4 md:p-12 items-center justify-center gap-4 md:gap-8 text-center h-dvh lg:h-[85dvh] bg-gradient-conic-hero rounded-3xl">
+    class="relative flex flex-col p-4 md:p-12 mb-8 items-center justify-center gap-4 md:gap-8 text-center h-dvh lg:h-[85dvh] bg-gradient-conic-hero rounded-3xl">

    <img 
      v-if="shapes.shape_1" 
--- a/components/SectionWithCards.vue
+++ b/components/SectionWithCards.vue
@@ -0,0 +1,47 @@
+<template>
+  <section 
+  :id="id"
+  class="flex flex-col gap-8 lg:gap-21 rounded-3xl mb-8 px-4 pt-12 pb-16 md:p-16 md:pb-24 bg-gradient-conic-2 ">
+    <div class="flex flex-col justify-center items-center w-full">
+      <h2 class="text-4xl font-bold mb-6">{{ title }}</h2>
+      <p class="mb-8 text-lg">{{ description }}</p>
+    </div>
+
+    <ul  class="grid grid-cols-12 gap-8 mx-auto">
+      <li v-for="(item, index) in cards" :key="`cards-${id}-${index}`" class="col-span-12 md:col-span-6 lg:col-span-4">
+        <CardTool
+          :color="item.color"
+          :title="item.title"
+          :description="item.description"
+          :image="item.image"
+          :link="item.link"
+          class=""
+        />
+      </li>
+    </ul>
+  </section>
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type: String,
+      default: "",
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    description: {
+      type: String,
+      default: "",
+    },
+     cards: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  
+};
+</script>
--- a/components/WhatIs.vue
+++ b/components/WhatIs.vue
@@ -0,0 +1,70 @@
+<template>
+  <section 
+  :id="id"
+  class="flex flex-col-reverse lg:flex-row gap-8 lg:gap-21 rounded-3xl mb-8 px-4 py-12 md:p-12 lg:p-16 bg-gradient-conic-2 ">
+    <div class="flex flex-col lg:w-3/5">
+      <div class="flex flex-col">
+        <h2 class="text-4xl font-bold mb-6">{{ title }}</h2>
+        <p class="mb-8 text-lg" v-html="description"></p>
+      </div>
+
+      <ul  class="flex flex-col gap-4 mb-8">
+        <li v-for="(item, index) in items" :key="`item-${index}`" class="flex items-center gap-4">
+          <img v-if="item.icon" :src="`/svg/${item.icon}`" :alt="`icon-${item.icon}`" class="w-8 h-8" />
+          <p v-html="item.content"></p>
+        </li>
+      </ul>
+      <NuxtLink v-if="button" :to="button.link" class=" w-fit">
+          <ButtonCTA :color="button.color" class="uppercase">
+            {{ button.label }}
+          </ButtonCTA>
+        </NuxtLink>
+    </div>
+    <div class="lg:w-2/5 h-full">
+      <img 
+        v-if="image"
+        :src="`/img/${image.src}`"
+        :alt="image.alt"
+        class="w-full h-full object-cover"
+      />
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type: String,
+      default: "",
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    description: {
+      type: String,
+      default: "",
+    },
+    image: {
+      type: Object,
+      default: () => ({
+        src: "",
+        alt: "",
+      }),
+    },
+    items: {
+      type: Array,
+      default: () => [],
+    },
+    button: {
+      type: Object,
+      default: () => ({
+        label: "",
+        link: "",
+      }),
+    },
+  },
+  
+};
+</script>
--- a/data/es/index.json
+++ b/data/es/index.json
@@ -15,5 +15,115 @@
        "shape_2": "formas-fondo-negativo-1.png"
      }
    }
+  },
+  {
+    "component": "WhatIs",
+    "props": {
+      "id": "home-what-is",
+      "title": "¿Qué es kit-ECO.social?",
+      "description": "<strong>kit-ECO.social</strong> es una plataforma con herramientas para impulsar la <strong>sostenibilidad</strong>, la <strong>igualdad</strong> y la <strong>mejora continua</strong> en entidades de economía social, desde la cooperación y el compromiso colectivo.",
+      "image": {
+        "src": "research.png",
+        "alt": "Formas de fondo negativo"
+      },
+      "items": [
+        {
+          "content": "Herramientas prácticas para transformar tu entidad desde lo cotidiano.",
+          "icon": "wrench.svg"
+        },
+        {
+          "content": "<strong>Autodiagnósticos</strong> y mejora continua en igualdad y sostenibilidad.",
+          "icon": "chart-column.svg"
+        },
+        {
+          "content": "<strong>Certifica-T</strong> te acompaña en el camino hacia la <strong>certificación en sostenibilidad</strong>.",
+          "icon": "award.svg"
+        },
+        {
+          "content": "Consumo responsable a través del marketplace <strong>Consumo Cuidado</strong>",
+          "icon": "shopping-cart.svg"
+        },
+        {
+          "content": "<strong>Formación online</strong> y cooperación entre entidades para crecer en red.",
+          "icon": "graduation-cap.svg"
+        }
+      ],
+      "button": {
+        "label": "descubre quienes impulsan el proyecto",
+        "link": "/nosotras",
+        "color": "button"
+      }
+    }
+  },
+  {
+    "component": "SectionWithCards",
+    "props": {
+      "id": "herramientas",
+      "title": "Explora las herramientas del kit-ECO.SOCIAL",
+      "description": "Elige la herramienta que mejor se adapte a tu entidad. Todas son gratuitas, prácticas y pensadas para organizaciones de economía social.",
+      "display": "col-3",
+      "cards": [
+        {
+          "color": "consumo",
+          "title": "Consumo cuidado",
+          "description": "Marketplace de productos y servicios responsables.",
+          "image": {
+            "src": "consumo.png",
+            "alt": "Consumo Cuidado"
+          },
+          "link": "consumo-cuidado"
+        },
+        {
+          "color": "aula",
+          "title": "aula virtual",
+          "description": "Formaciones online gratuitas y accesibles.",
+          "image": {
+            "src": "aula.png",
+            "alt": "Aula Virtual"
+          },
+          "link": "aula-virtual"
+        },
+        {
+          "color": "iguales",
+          "title": "Iguales",
+          "description": "Herramienta para el diagnóstico en igualdad.",
+          "image": {
+            "src": "iguales.png",
+            "alt": "Iguales"
+          },
+          "link": "iguales"
+        },
+        {
+          "color": "ods",
+          "title": "ODS",
+          "description": "Evalúa tu contribución a los ODS con OpenODS.",
+          "image": {
+            "src": "ods.png",
+            "alt": "ODS"
+          },
+          "link": "ods"
+        },
+        {
+          "color": "certifica",
+          "title": "Certifica-T",
+          "description": "Evalúa tu entidad y avanza hacia la certificación en sostenibilidad.",
+          "image": {
+            "src": "certifica-t.png",
+            "alt": "Certifica-T"
+          },
+          "link": "certifica-t"
+        },
+        {
+          "color": "foro",
+          "title": "Foro",
+          "description": "Espacio de participación e intercambio entre entidades.",
+          "image": {
+            "src": "foro.png",
+            "alt": "Foro"
+          },
+          "link": "foro"
+        }
+      ]
+    }
  }
 ]
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,6 +1,6 @@
 <template>
  <div>
-    <header>
+    <header class="mx-8">
      <NavBar />
    </header>

--- a/pages/[langcode]/aula-virtual.vue
+++ b/pages/[langcode]/aula-virtual.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <h1>Aula Virtual</h1>
+    <p>Formaciones online gratuitas y accesibles.</p>
+  </div>
+</template>
+
+<script>
+  export default {
+    
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
--- a/pages/[langcode]/certifica-t.vue
+++ b/pages/[langcode]/certifica-t.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <h1>Certifica T</h1>
+    <p>Herramienta para el diagnóstico en sostenibilidad.</p>
+  </div>
+</template>
+
+<script>
+  export default {
+    
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
--- a/pages/[langcode]/consumo-cuidado.vue
+++ b/pages/[langcode]/consumo-cuidado.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <h1>Consumo Cuidado</h1>
+    <p>Marketplace de productos y servicios responsables.</p>
+  </div>
+</template>
+
+<script>
+  export default {
+    
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
--- a/pages/[langcode]/foro.vue
+++ b/pages/[langcode]/foro.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <h1>Foro</h1>
+    <p>Espacio de participación e intercambio entre entidades.</p>
+  </div>
+</template>
+
+<script>
+  export default {
+    
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
--- a/pages/[langcode]/iguales.vue
+++ b/pages/[langcode]/iguales.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <h1>Iguales</h1>
+    <p>Herramienta para el diagnóstico en igualdad.</p>
+  </div>
+</template>
+
+<script>
+  export default {
+    
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
--- a/pages/[langcode]/index.vue
+++ b/pages/[langcode]/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <main v-if="landingComponents" class="min-h-screen relative">
+  <main v-if="landingComponents" class="min-h-screen relative mx-8">
    <template v-for="(component, index) in landingComponents" :key="`component-${component.component}-${index}`">
      <component 
        :is="component.component" 
@@ -17,9 +17,13 @@
 <script>
 import { mapGetters, mapActions } from 'vuex';
 import HeroHome from '~/components/HeroHome.vue';
+import WhatIs from '../../components/WhatIs.vue';
+import SectionWithCards from '../../components/SectionWithCards.vue';
 export default {
  components: {
    HeroHome,
+    WhatIs,
+    SectionWithCards
  },
  data() {
    return {
@@ -46,13 +50,13 @@ export default {
      ];
    }
  },
-  methods: {
-    ...mapActions(['setLangcode']),
-    // changeLang() {
-    //   const newLang = this.langcode === 'es' ? 'cat' : 'es';
-    //   this.setLangcode(newLang);
-    //   this.$router.push({ path: `/${newLang}` });
-    // }
-  }
+  // methods: {
+  //   ...mapActions(['setLangcode']),
+  //   changeLang() {
+  //     const newLang = this.langcode === 'es' ? 'cat' : 'es';
+  //     this.setLangcode(newLang);
+  //     this.$router.push({ path: `/${newLang}` });
+  //   }
+  // }
 }
 </script>
--- a/pages/[langcode]/ods.vue
+++ b/pages/[langcode]/ods.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <h1>ODS</h1>
+    <p>Evalúa tu contribución a los ODS con OpenODS.</p>
+  </div>
+</template>
+
+<script>
+  export default {
+    
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
--- a/public/img/aula.png
+++ b/public/img/aula.png
--- a/public/img/certifica-t.png
+++ b/public/img/certifica-t.png
--- a/public/img/consumo.png
+++ b/public/img/consumo.png
--- a/public/img/foro.png
+++ b/public/img/foro.png
--- a/public/img/iguales.png
+++ b/public/img/iguales.png
--- a/public/img/ods.png
+++ b/public/img/ods.png
--- a/public/img/research.png
+++ b/public/img/research.png
--- a/public/svg/award.svg
+++ b/public/svg/award.svg
@@ -0,0 +1,3 @@
+<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.136 18.0654L23.156 29.4334C23.1786 29.5673 23.1598 29.7048 23.1022 29.8277C23.0445 29.9506 22.9507 30.053 22.8332 30.1211C22.7158 30.1893 22.5804 30.2199 22.4451 30.209C22.3098 30.1981 22.181 30.1461 22.076 30.0601L17.3027 26.4774C17.0722 26.3053 16.7923 26.2122 16.5047 26.2122C16.217 26.2122 15.9371 26.3053 15.7067 26.4774L10.9253 30.0587C10.8204 30.1447 10.6918 30.1965 10.5567 30.2075C10.4215 30.2184 10.2862 30.1878 10.1689 30.1199C10.0515 30.052 9.9577 29.9498 9.89989 29.8272C9.84208 29.7045 9.82305 29.5672 9.84533 29.4334L11.864 18.0654M24.5 11.5454C24.5 15.9637 20.9183 19.5454 16.5 19.5454C12.0817 19.5454 8.5 15.9637 8.5 11.5454C8.5 7.12713 12.0817 3.54541 16.5 3.54541C20.9183 3.54541 24.5 7.12713 24.5 11.5454Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/public/svg/chart-column.svg
+++ b/public/svg/chart-column.svg
@@ -0,0 +1,3 @@
+<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.5 4.87891V26.2122C4.5 26.9195 4.78095 27.5978 5.28105 28.0979C5.78115 28.598 6.45942 28.8789 7.16667 28.8789H28.5M24.5 23.5456V12.8789M17.8333 23.5456V7.54557M11.1667 23.5456V19.5456" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/public/svg/graduation-cap.svg
+++ b/public/svg/graduation-cap.svg
@@ -0,0 +1,3 @@
+<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29.8333 14.2121V22.2121M8.49998 17.5454V22.2121C8.49998 23.2729 9.34283 24.2903 10.8431 25.0405C12.3434 25.7906 14.3782 26.2121 16.5 26.2121C18.6217 26.2121 20.6565 25.7906 22.1568 25.0405C23.6571 24.2903 24.5 23.2729 24.5 22.2121V17.5454M29.06 15.4414C29.2987 15.3361 29.5012 15.1631 29.6426 14.9438C29.7839 14.7245 29.8578 14.4686 29.8551 14.2077C29.8524 13.9468 29.7732 13.6925 29.6274 13.4762C29.4815 13.2599 29.2755 13.0911 29.0346 12.9907L17.6066 7.7854C17.2592 7.62693 16.8818 7.54492 16.5 7.54492C16.1181 7.54492 15.7407 7.62693 15.3933 7.7854L3.96664 12.9854C3.72927 13.0894 3.52733 13.2602 3.38553 13.4772C3.24373 13.6941 3.16821 13.9476 3.16821 14.2067C3.16821 14.4659 3.24373 14.7194 3.38553 14.9363C3.52733 15.1532 3.72927 15.3241 3.96664 15.4281L15.3933 20.6387C15.7407 20.7972 16.1181 20.8792 16.5 20.8792C16.8818 20.8792 17.2592 20.7972 17.6066 20.6387L29.06 15.4414Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/public/svg/shopping-cart.svg
+++ b/public/svg/shopping-cart.svg
@@ -0,0 +1,3 @@
+<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.2334 3.6123H5.90007L9.44673 20.1723C9.57684 20.7788 9.91429 21.3209 10.401 21.7054C10.8877 22.09 11.4933 22.2928 12.1134 22.279H25.1534C25.7603 22.278 26.3487 22.07 26.8214 21.6894C27.2942 21.3088 27.6229 20.7783 27.7534 20.1856L29.9534 10.279H7.32673M12.5001 28.879C12.5001 29.6154 11.9031 30.2123 11.1667 30.2123C10.4304 30.2123 9.8334 29.6154 9.8334 28.879C9.8334 28.1426 10.4304 27.5456 11.1667 27.5456C11.9031 27.5456 12.5001 28.1426 12.5001 28.879ZM27.1667 28.879C27.1667 29.6154 26.5698 30.2123 25.8334 30.2123C25.097 30.2123 24.5001 29.6154 24.5001 28.879C24.5001 28.1426 25.097 27.5456 25.8334 27.5456C26.5698 27.5456 27.1667 28.1426 27.1667 28.879Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/public/svg/wrench.svg
+++ b/public/svg/wrench.svg
@@ -0,0 +1,3 @@
+<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.1001 9.27872C19.8557 9.52796 19.7189 9.86305 19.7189 10.2121C19.7189 10.5611 19.8557 10.8961 20.1001 11.1454L22.2334 13.2787C22.4826 13.523 22.8177 13.6599 23.1667 13.6599C23.5157 13.6599 23.8508 13.523 24.1001 13.2787L29.1267 8.25205C29.7972 9.73364 30.0002 11.3844 29.7087 12.9842C29.4172 14.5841 28.645 16.0572 27.4951 17.2071C26.3452 18.357 24.8721 19.1292 23.2722 19.4207C21.6724 19.7122 20.0216 19.5092 18.5401 18.8387L9.32672 28.052C8.79629 28.5825 8.07686 28.8805 7.32672 28.8805C6.57657 28.8805 5.85715 28.5825 5.32672 28.052C4.79629 27.5216 4.49829 26.8022 4.49829 26.052C4.49829 25.3019 4.79629 24.5825 5.32672 24.052L14.5401 14.8387C13.8696 13.3571 13.6666 11.7064 13.9581 10.1065C14.2496 8.50664 15.0218 7.03359 16.1717 5.88368C17.3216 4.73377 18.7946 3.96161 20.3945 3.67011C21.9944 3.3786 23.6451 3.5816 25.1267 4.25205L20.1001 9.27872Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>