busqueda page

components/ProductFilter.vue

@@ -248,9 +248,9 @@ export default {
   gap: 3rem;
   color: $color-primary;
 
-  @include mobile {
+  // @include mobile {
-    margin-top: 7rem;
+  //   margin-top: 7rem;
-  }
+  // }
 }
 
 .filter-button {

pages/busqueda.vue

@@ -1,9 +1,36 @@
 <template>
   <div class="">
-    <HeroWithSearch 
+    <!-- <HeroWithSearch 
-        title="Encuentra tu entidad aliada"
+        title="Productos y servicios"
-        subtitle="Colabora, compra o aprende con la economía social"
+        subtitle="Catálogo colectivo de consumo transformador"
+      /> -->
+    <section class="hero-section">
+      <div class="gradient">
+        <div class="content">
+          <h1>Productos y servicios</h1>
+          <p>Catálogo colectivo de consumo transformador</p>
+          <div class="container wrapper">
+            <form class="search-container" @submit.prevent="search">
+              <input
+                v-model="searchText"
+                class="search-text"
+                type="text"
+                autocomplete="off"
+                placeholder="Encuentra productos o servicios"
               />
+              <div class="search-link">
+                <img
+                  class="search-icon"
+                  src="@/assets/img/latienda-search.svg"
+                  alt="consumo-cuidado-search"
+                  @click="search"
+                />
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </section>
     <div class="c-container row">
       <div class="col-md-3">
         <ProductFilter
@@ -32,7 +59,7 @@
         </div>
       </div> -->
       <div v-if="!loadingProducts" class="col-md-9 container-fluid">
-        <div class="carousel">
+        <div v-if="count > 0" class="carousel">
           <div class="title-container">
             <h5 class="items-title">Últimos productos y servicios</h5>
             <div class="title-lines"></div>
@@ -95,7 +122,7 @@
           </div>
           <div v-else class="no-results">
             <p class="query-text">
-              No encontramos "{{ queryText }}" en Consumo Cuidado.
+              No encontramos <span v-if="queryText">"{{ queryText }}"</span> en Consumo Cuidado.
             </p>
             <p>
               Prueba un término más general, revisa la ortografía o 
@@ -173,12 +200,13 @@ export default {
 
   watch: {
     '$route.query'(newValue) {
-      console.log('New Value:', newValue.q)
+      console.log('New Value:', newValue)
       //console.log('Route changed:', this.$route.fullPath)
       //console.log('Current params:', this.$route.query)
-      this.queryText = newValue.q || ''
+      this.queryText = newValue.q
+      console.log('Updated queryText:', this.queryText)
       this.updateData(newValue)
-      Object.assign(this.$data, this.$options.data())
+      //Object.assign(this.$data, this.$options.data())
     }
   },
 
@@ -247,6 +275,7 @@ export default {
     }
 
     this.appliedFilters = params.q
+    console.log('Initial appliedFilters:', this.appliedFilters)
     this.filters = data.filters
     this.prices = prices
     this.coordinates = coordinates
@@ -347,12 +376,12 @@ export default {
     },
 
 
-    search() {
+    async search() {
+      this.currentFilters = { ...this.appliedFilters }
+      console.log('Searching for:', this.searchText)
       if (this.searchText) {
-        return this.$router.push({
+        this.appliedFilters = this.searchText
-          name: 'busqueda',
+        this.products = await this.updateData({ q: this.searchText })
-          query: { q: this.searchText },
-        })
       }
     },
 
@@ -376,6 +405,131 @@ export default {
   min-height: 100dvh;
   margin-bottom: 2rem;
 }
+
+.hero-section {
+  width: 100%;
+  @include mobile {
+    margin-top: 12dvh;
+  }
+}
+.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;
+  }
+}
+
+.wrapper {
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.search-container {
+  background-color: $color-light;
+  height: 60px;
+  max-width: 100%;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 48px;
+  -webkit-box-shadow: 0px 0px 20px 0px #d1d1d1; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
+  box-shadow: 0px 0px 20px 0px #d1d1d1;
+  @include mobile {
+    height: 40px;
+    margin: 1rem auto;
+  }
+  @include tablet {
+    width: 100%;
+  }
+}
+
+.search-link {
+  @include mobile {
+    width: 40px;
+    height: 40px;
+    padding: 0.6rem;
+    float: right;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-decoration: none;
+    transition: 0.4s;
+  }
+  @include tablet {
+    width: 4rem;
+    margin-right: 1.5rem;
+  }
+}
+.search-text {
+  outline: none;
+  width: 100%;
+  padding: 0 1.5rem;
+}
+.search-icon {
+  cursor: pointer;
+  width: 1.8rem;
+  @include mobile {
+    margin-left: 0;
+    width: 100%;
+  }
+  @include tablet {
+    float: right;
+    height: 70%;
+  }
+}
+
 .ad {
   margin: 40px auto;
   width: 100%;