initial commit

pages/index.vue

@@ -2,13 +2,10 @@
   <div class="base">
     <div class="gradient">
       <div class="ilustration wrapper"></div>
+      <h1>Descubre productos, servicios y saberes con valores.</h1>
+      <p>Apoya la economía social transformadora</p>
       <SearchHeader />
-      <img
-        class="search-dots"
-        src="@/assets/img/latienda-lineapuntos-1.svg"
-        alt=""
-      />
-      <div class="container">
+      <!-- <div class="container">
         <div class="row">
           <div class="col-sm-4">
             <HighlightsCard
@@ -35,18 +32,25 @@
             />
           </div>
         </div>
+      </div> -->
+    </div>
+    <div class="items">
+      <div class="title-container">
+        <div class="title-lines"></div>
+        <h5 class="items-title">Últimos productos</h5>
+        <div class="title-lines"></div>
+      </div>
+      <div class="items-container">
+        <ItemsRow :type="`product`" :items="carouselProducts" />
+        <NuxtLink to="/busqueda" class="link">
+          <ButtonCTA class="button">Ver todos los servicios</ButtonCTA>
+        </NuxtLink>
       </div>
     </div>
-    <div class="items container">
-      <h5 class="items-title">Últimos productos</h5>
-      <img
-        class="items-dots"
-        src="@/assets/img/latienda-lineapuntos-2.svg"
-        alt=""
-      />
-      <ItemsRow :type="`product`" :items="carouselProducts" />
-    </div>
-    <div class="items container">
+    <!-- <div class="items container">
+      <div>
+
+      </div>
       <h5 class="items-title">Últimas cooperativas</h5>
       <img
         class="items-dots"
@@ -63,7 +67,7 @@
         alt=""
       />
       <ItemsRow :type="`category`" :items="carouselCategories" />
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -115,10 +119,10 @@ export default {
 }
 
 .ilustration {
-  height: 300px;
-  width: 500px;
+  height: 100px;
+  width: 100px;
   align-self: center;
-  background-image: url('../assets/img/latienda-ilustracion.svg');
+  background-image: url('../assets/img/hand-heart.svg');
   background-size: contain;
 
   @include mobile {
@@ -131,11 +135,30 @@ export default {
   margin-bottom: 80px;
 }
 .gradient {
-  background: linear-gradient(180deg, #8cead8, #ffffff);
-  position: relative;
-  left: 0;
-  right: 0;
-  margin-bottom: 50px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-radius: 24px;
+  min-height: 85dvh;
+  background: linear-gradient(180deg, $color-consumo-base-extra-light, $color-consumo-base);
+  @include mobile {
+    margin-top: 8dvh;
+  }
+
+  h1 {
+    text-align: center;
+    font-size: $hero;
+    font-weight: $bold;
+    max-width: 50%;
+    @include mobile {
+      max-width: 100%;
+      margin: 1.5rem 1rem 0.5rem 1rem;
+    }
+  }
+  p {
+    font-size: $xl;
+  }
 }
 .search-dots {
   display: block;
@@ -148,22 +171,46 @@ export default {
     margin: 0 auto 0;
   }
 }
+
 .items {
-  width: 100%;
   display: flex;
-  height: auto;
   flex-direction: column;
   justify-content: center;
+  gap: 2rem;
+  padding: 8rem 8rem 8rem 8rem;
+  border-radius: 24px;
+  background: linear-gradient(180deg, $color-light, $color-consumo-base-extra-light);
+  padding: 2rem 0;
   &-title {
     text-align: center;
   }
-  &-dots {
-    width: 35px;
-    margin: 15px auto 30px auto;
+}
+
+.title-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  .title-lines {
+    width: 34px;
+    height: 2px;
+    background: $color-consumo-base;
+    margin: 0 8px;
+  }
+  .items-title {
+    font-size: $h5;
+    text-transform: uppercase;
+    padding-top: 10px;
   }
 }
-.items-title {
-  color: $color-navy;
-  margin-top: 3rem;
+
+.items-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  gap: 2rem;
 }
+
 </style>