initial commit

components/ItemsRow.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="row">
+  <div class="row container">
     <ClientOnly placerholder="Loading...">
       <!-- <div class="arrow-left-wrapper col-2 col-sm-1">
         <img
@@ -9,23 +9,24 @@
           @click="slideCarousel('prev')"
         />
       </div> -->
-
       <Carousel
         ref="productDetails"
-        class="col-8 col-sm-10"
-        :items-to-show="3"
-        :gap="5"
+        class="carousel"
+        :items-to-show="4"
+        :gap="1"
         :pagination-enabled="false"
         :wrap-around="false"
         :mouse-wheel="true"
         :breakpoints-enabled="true"
       >
-        <Slide v-for="item in items" :key="item.id">
+        <Slide v-for="item in items" :key="item.id" class="slide-container">
           <NuxtLink :to="formattedItem(item).url" class="slide">
             <div class="image-container">
               <img class="image" :src="formattedItem(item).image" alt="" />
             </div>
-            <span>{{ formattedItem(item).name }}</span>
+            <div class="details-container">
+              <p>{{ formattedItem(item).name }}</p>
+            </div>
           </NuxtLink>
         </Slide>
         <template #addons>
@@ -121,29 +122,53 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.row {
+  padding: 0 4rem;
+  display: flex;
+  align-items: center;
+  justify-content: center
+}
+
+.slide-container {
+  padding: 0.5rem;
+}
+
+a {
+  text-decoration: none;
+  color: $color-primary;
+}
+
 .slide {
+  width: 237px;
+  height: 316px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: stretch;
-  padding: 0.3rem;
-  span {
+  padding: 0.5rem;
+  background-color: #FDFCFB;
+  border: 5px solid white;
+  border-radius: 24px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
+  text-decoration: none;
+  p {
     text-align: center;
     display: -webkit-box;
     --webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
-    width: 25vw;
-    max-width: 110px;
-    font-weight: $regular;
-    font-size: $s;
+    width: 100%;
+    font-weight: $medium;
+    font-size: $m;
   }
 }
 
 .image-container {
   width: 100%;
-  height: 5rem;
-  margin-bottom: 0.7rem;
+  height: 11rem;
+  flex-shrink: 0;
+  align-self: stretch;
+  border-radius: 24px 24px 0 0;
   @include mobile {
     max-height: 10rem;
     max-width: 10rem;
@@ -151,7 +176,17 @@ export default {
   .image {
     width: 100%;
     height: 100%;
-    object-fit: contain;
+    object-fit: cover;
+    border-radius: 24px 24px 0 0;
   }
 }
+
+.details-container {
+  width: 100%;
+  height: 100%;
+  padding: 0.5rem;
+  text-align: center;
+  border-radius: 0 0 24px 24px;
+  
+}
 </style>