hero-home component

assets/css/main.css

@@ -41,6 +41,16 @@
 
   /* Shadow */
   --shadow-button: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
+
+  /* Spacing */
+  --spacing-32: 2rem; /* 32px */
+  --spacing-25.6: 25.688rem; /* 411px */
+  --spacing-44.8: 44.813rem; /* 717px */
+
+  /* Font sizes */
+  --text-32: 2rem; /* 32px */
+  --text-40: 2.5rem; /* 40px */
+
 }
 
 
@@ -164,22 +174,15 @@ body footer {
   top: 100dvh;
 }
 
-header, main {
-  margin: 0 var(--layout-padding-x, 32px);
+body {
+  margin: 0 var(--layout-padding-x, 2rem);
 }
 
+
 html {
   scroll-behavior: smooth;
 }
 
-.min-h-screen-header {
-  min-height: calc(100dvh - 15rem);
-}
-
-.max-h-sidebar {
-  max-height: calc(100dvh - 8rem);
-}
-
 .body-overflow-hidden {
   overflow: hidden;
 }
@@ -191,4 +194,8 @@ html {
     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);
-}
+}
+
+.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);
+}

components/ButtonCTA.vue

@@ -18,7 +18,7 @@ export default {
     },
     size: {
       type: String,
-      default: "md",
+      default: "lg",
     }
   },
   computed: {

components/HeroHome.vue

@@ -1,21 +1,62 @@
 <template>
-  <div>
-    <h1>{{ title }}</h1>
-    <h2>{{ subtitle }}</h2>
-  </div>
+  <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">
+
+    <img 
+      v-if="shapes.shape_1" 
+      :src="`/img/${shapes.shape_1}`" 
+      alt="hero background shape left" 
+      class="absolute left-0 bottom-0 h-60 md:h-25.6" >
+    <img 
+      v-if="shapes.shape_2" 
+      :src="`/img/${shapes.shape_2}`" 
+      alt="hero background shape right" 
+      class="absolute right-0 top-0 h-60 md:h-25.6" >
+
+    <div class=" flex flex-col items-center z-10 gap-6">
+      <h1 class="text-32 md:text-40 lg:text-5xl font-bold max-w-4xl">{{ title }}</h1>
+      <p class="text-lg md:text-xl lg:text-2xl max-w-3xl">{{ subtitle }}</p>
+      <NuxtLink v-if="button" :to="button.link">
+        <ButtonCTA :color="button.color" class="uppercase mt-6">
+          {{ button.label }}
+        </ButtonCTA>
+      </NuxtLink>
+    </div>
+  </section>
 </template>
 
 <script>
-  export default {
-    props: {
-      title: {
-        type: String,
-        default: '',
-      },
-      subtitle: {
-        type: String,
-        default: '',
-      },
+
+export default {
+  props: {
+    id: {
+      type: String,
+      default: "",
     },
-  }
+    title: {
+      type: String,
+      default: "",
+    },
+    subtitle: {
+      type: String,
+      default: "",
+    },
+    button: {
+      type: Object,
+      default: () => ({
+        label: "",
+        link: "",
+      }),
+    },
+    shapes: {
+      type: Object,
+      default: () => ({
+        shape_1: "",
+        shape_2: "",
+      }),
+    },
+  },
+  
+};
 </script>

data/es/index.json

@@ -2,8 +2,18 @@
   {
     "component": "HeroHome",
     "props": {
-      "title": "Bienvenido al Kit",
-      "subtitle": "Todo para la economía social"
+      "id": "hero-home",
+      "title": "Kit de herramientas para el desarrollo sostenible de las entidades de economía social.",
+      "subtitle": "Encuentra recursos prácticos, autoevaluaciones, formación y espacios de cooperación para transformar tu entidad.",
+      "button": {
+        "label": "explora las herramientas",
+        "link": "#herramientas",
+        "color": "button"
+      },
+      "shapes": {
+        "shape_1": "formas-fondo-negativo-2.png",
+        "shape_2": "formas-fondo-negativo-1.png"
+      }
     }
   }
 ]