category row added

components/CategoryRow.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="row container">
+    <ClientOnly placeholder="Loading...">
+      <Carousel
+        ref="categoryDetails"
+        class="carousel"
+        :items-to-show="itemsToShow"
+        :breakpoints="config.breakpoints"
+        :gap="1"
+        :pagination-enabled="false"
+        :wrap-around="false"
+        :mouse-wheel="false"
+        :breakpoints-enabled="true"
+      >
+        <Slide v-for="item in items" :key="`category-${item.image}`" class="slide-container">
+          <div class="slide" @click="searchByCategory(item.name)">
+            <div class="image-container">
+              <img class="image" :src="item.image ? item.image : defaultImage" :alt="`${item.name} category image`" />
+            </div>
+            <p class="category-name">{{ item.name }}</p>
+          </div>
+        </Slide>
+        <template #addons>
+          <Navigation />
+        </template>
+      </Carousel>
+    </ClientOnly>
+  </div>
+</template>
+
+<script>
+import { Carousel, Slide, Navigation } from 'vue3-carousel'
+import 'vue3-carousel/dist/carousel.css'
+import defaultImage from '@/assets/img/producto-default.png'
+
+export default {
+  components: {
+    Carousel,
+    Slide,
+    Navigation
+  },
+  props: {
+    type: {
+      type: String,
+      required: true,
+    },
+    items: {
+      type: Array,
+      default: () => [],
+    },
+    itemsToShow: {
+      type: Number,
+      default: 1,
+    },
+  },
+  data() {
+    return {
+      defaultImage,
+      config: {
+        height: 200,
+        breakpointMode: 'carousel', // o 'viewport'
+        breakpoints: {
+          768: {
+            itemsToShow: 3,
+            snapAlign: 'center',
+          },
+          1024: {
+            itemsToShow: 4,
+            snapAlign: 'start',
+          },
+          1440: {
+            itemsToShow: 5,
+            snapAlign: 'start',
+          },
+        },
+      }
+    }
+  },
+  methods: {
+    searchByCategory(categoryName) {
+      const formattedCategory = categoryName
+        .toLowerCase()
+        .replace(/á/g, 'a')
+        .replace(/é/g, 'e')
+        .replace(/í/g, 'i')
+        .replace(/ó/g, 'o')
+        .replace(/ú/g, 'u')
+        .replace(/ñ/g, 'n')
+        .replace(/\s+/g, '-')
+      console.log('Searching by category:', formattedCategory)
+      this.$router.push(`/busqueda?category=${formattedCategory}`)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.row {
+  padding: 0 4rem;
+  display: flex;
+  align-items: center;
+  justify-content: center
+}
+
+.image-container {
+  width: 100%;
+  height: 50%;
+  display: flex;
+  @include mobile {
+    max-height: 10rem;
+    max-width: 10rem;
+  }
+  .image {
+    width: fit-content;
+    height: fit-content;
+    margin: auto;
+  }
+}
+
+.slide-container {
+  padding: 0.5rem;
+}
+
+.slide {
+  width: 179px;
+  height: 213px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: stretch;
+  background-color: transparent;
+  border: 5px solid white;
+  border-radius: 24px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
+  text-decoration: none;
+  position: relative; // necesario para controlar hijos absolutos
+  overflow: hidden;
+  padding: 16px;
+
+  &:hover {
+    cursor: pointer;
+    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.25);
+    transform: translateY(-4px);
+    transition: all 0.3s ease-in-out;
+  }
+
+  p {
+    text-align: center;
+    display: -webkit-box;
+    --webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    width: 100%;
+    font-weight: $medium;
+    font-size: $m;
+  }
+
+
+  .category-name {
+    color: black;
+    font-weight: bold;
+    text-transform: uppercase;
+  }
+
+}
+
+
+</style>

pages/index.vue

@@ -34,6 +34,16 @@
         </div>
       </div> -->
     </div>
+    <div class="items">
+      <div class="title-container">
+        <div class="title-lines"></div>
+        <h5 class="items-title">Explora por temática</h5>
+        <div class="title-lines"></div>
+      </div>
+      <div class="items-container">
+        <CategoryRow :type="`caterories`" :items="categories" />
+      </div>
+    </div>
     <div class="items">
       <div class="title-container">
         <div class="title-lines"></div>
@@ -80,7 +90,23 @@ export default {
       cards: null,
       carouselProducts: null,
       carouselCompanies: null,
-      carouselCategories: null
+      carouselCategories: null,
+      categories: [
+        {name: 'Alimentación', image: '/categories/alimentacion.png'},
+        {name: 'Agricultura', image: '/categories/agricultura.png'},
+        {name: 'Energía', image: '/categories/energia.png'},
+        {name: 'Hogar y Jardín', image: '/categories/hogar-jardin.png'},
+        {name: 'Moda y Textil', image: '/categories/moda-textil.png'},
+        {name: 'Salud y Cuidados', image: '/categories/salud-cuidados.png'},
+        {name: 'Movilidad y Mensajería', image: '/categories/movilidad-mensajeria.png'},
+        {name: 'Ocio y Deporte', image: '/categories/ocio-deporte.png'},
+        {name: 'Turismo y Gastronomía', image: '/categories/turismo-gastronomia.png'},
+        {name: 'Cultura, Educación y Medios', image: '/categories/cultura-educacion-medios.png'},
+        {name: 'Tecnología y Servicios Digitales', image: '/categories/tecnologia-servicios-digitales.png'},
+        {name: 'Economía Circular y Reparación', image: '/categories/economia-circular-reparacion.png'},
+        {name: 'Finanzas Éticas y Seguros', image: '/categories/finanzas-eticas-seguros.png'},
+        {name: 'Servicios Profesionales', image: '/categories/servicios-profesionales.png'},
+      ],
     }
   },
   async mounted() {