search company amend

pages/productoras/index.vue

@@ -1,10 +1,33 @@
 <template>
   <div class="">
     <div class="content">
-      <HeroWithSearch 
-        title="Encuentra tu entidad aliada"
-        subtitle="Colabora, compra o aprende con la economía social"
-      />
+      <section class="hero-section">
+        <div class="gradient">
+          <div class="content">
+            <h1>Encuentra tu entidad aliada</h1>
+            <p>Colabora, compra o aprende con la economía social</p>
+            <div class="container wrapper">
+              <form class="search-container" @submit.prevent="search">
+                <input
+                  v-model="searchText"
+                  class="search-text"
+                  type="text"
+                  autocomplete="off"
+                  placeholder="Buscar entidad"
+                />
+                <div class="search-link">
+                  <img
+                    class="search-icon"
+                    src="@/assets/img/latienda-search.svg"
+                    alt="latienda.coop-search"
+                    @click="search"
+                  />
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </section>
       <div v-if="companyList && companyList.length" class="cards-section">
         <section  class="cards-grid">
           <article v-for="(coop, index) in companyList" :key="index">
@@ -137,61 +160,124 @@ export default {
   }
 }
 
-// .help {
-//   color: $color-navy;
-//   margin-bottom: 0px;
-//   font-size: $s;
-// }
+.hero-section {
+  width: 100%;
+}
+.gradient {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 24px;
+  min-height: 45dvh;
+  overflow: hidden;
 
-// .search-container {
-//   border: none;
-//   border-radius: 5px;
-//   background: $color-consumo-base-light;
-//   width: 50%;
-//   height: 32px;
-//   overflow: hidden;
-//   display: flex;
-//   flex-direction: row;
-//   justify-content: space-between;
-//   align-items: center;
-//   margin-top: 50px;
-//   margin-bottom: 50px;
+  // Imagen de fondo
+  background-image: url('@/assets/img/voluntarios.jpg');
+  background-size: cover;
+  background-position: center;
 
-//   @include mobile {
-//     width: 100%;
-//   }
-// }
+  // 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;
+  }
 
-// .search-container img,
-// input,
-// select {
-//   padding: 6px 10px;
-//   margin-right: 16px;
-//   background: transparent;
-//   font-size: $xl;
-//   border: none;
-// }
+  .content {
+    position: relative;
+    z-index: 2;
+    text-align: center;
+    padding: 2rem;
 
-// .search-icon {
-//   float: right;
-//   height: 90%;
-// }
+    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;
+    }
+  }
 
-// .search-text {
-//   outline: none;
-//   width: 100%;
-//   text-align: center;
-//   color: $color-navy;
-//   font-size: $s;
-//   font-weight: $regular;
-// }
+  @include mobile {
+    margin-top: 8dvh;
+  }
+}
 
-// ::placeholder {
-//   color: $color-navy;
-//   font-size: $s;
-// }
+.wrapper {
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
 
-// select {
-//   --webkit-appearance: auto;
-// }
+.search-container {
+  background-color: $color-light;
+  height: 60px;
+  max-width: 490px;
+  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: 70%;
+  }
+}
+
+.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%;
+  }
+}
 </style>