productoras page

components/HeroWithSearch.vue

@@ -0,0 +1,84 @@
+<template>
+  <section class="hero-section">
+    <div class="gradient">
+      <div class="content">
+        <h1>{{ title }}</h1>
+        <p>{{ subtitle }}</p>
+        <SearchHeader />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    subtitle: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.hero-section {
+  width: 100%;
+}
+.gradient {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 24px;
+  min-height: 45dvh;
+  overflow: hidden;
+
+  // Imagen de fondo
+  background-image: url('../assets/img/voluntarios.jpg');
+  background-size: cover;
+  background-position: center;
+
+  // Overlay de gradiente
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: 24px;
+    background: linear-gradient(
+      180deg,
+      $color-consumo-base 0%,
+      $color-consumo-base-light 100%
+    );
+    z-index: 1;
+    opacity: 0.8;
+  }
+
+  .content {
+    position: relative;
+    z-index: 2;
+    text-align: center;
+    padding: 2rem;
+
+    h1 { 
+      text-align: center;
+      font-size: $hero;
+      font-weight: $bold;
+      @include mobile { max-width: 100%;
+        margin: 1.5rem 1rem 0.5rem 1rem;
+      } 
+    } 
+    p { 
+      font-size: $xl;
+    }
+  }
+
+  @include mobile {
+    margin-top: 8dvh;
+  }
+}
+</style>