diff --git a/assets/css/main.css b/assets/css/main.css index ebcdac9..61ca729 100644 --- 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; +} \ No newline at end of file diff --git a/components/CardTool.vue b/components/CardTool.vue new file mode 100644 index 0000000..7343057 --- /dev/null +++ b/components/CardTool.vue @@ -0,0 +1,65 @@ + + + \ No newline at end of file diff --git a/components/HeroHome.vue b/components/HeroHome.vue index d4178fa..e866549 100644 --- a/components/HeroHome.vue +++ b/components/HeroHome.vue @@ -1,7 +1,7 @@ + + diff --git a/components/WhatIs.vue b/components/WhatIs.vue new file mode 100644 index 0000000..6f17a1d --- /dev/null +++ b/components/WhatIs.vue @@ -0,0 +1,70 @@ + + + diff --git a/data/es/index.json b/data/es/index.json index adc234c..9f2ed81 100644 --- 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": "kit-ECO.social es una plataforma con herramientas para impulsar la sostenibilidad, la igualdad y la mejora continua 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": "Autodiagnósticos y mejora continua en igualdad y sostenibilidad.", + "icon": "chart-column.svg" + }, + { + "content": "Certifica-T te acompaña en el camino hacia la certificación en sostenibilidad.", + "icon": "award.svg" + }, + { + "content": "Consumo responsable a través del marketplace Consumo Cuidado", + "icon": "shopping-cart.svg" + }, + { + "content": "Formación online 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" + } + ] + } } ] diff --git a/layouts/default.vue b/layouts/default.vue index 7890c73..d775eee 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -1,6 +1,6 @@