cambios

src/views/about/About.vue

@@ -15,8 +15,8 @@
     <p>{{ $t('about.paragraph3') }}</p>
     <h4>{{ $t('about.subtitle3') }}</h4>
     <div class="employees">
-      <Employee class="employee" image="foto_alejo.png" name="Alejandro Valderrama" :role="$t('common.rol_managing_partner')" />
-      <Employee class="employee" image="foto_jose.png" name="Jose Lacouture" :role="$t('common.rol_managing_partner')" />
+      <Employee class="employee" image="new-alejandro.jpg" name="Alejandro Valderrama" :role="$t('common.rol_managing_partner')" />
+      <Employee class="employee" image="new-jose.jpg" name="Jose Lacouture" :role="$t('common.rol_managing_partner')" />
     </div>
   </section>
 </template>

src/views/products/Products.vue

@@ -31,11 +31,18 @@
   <big-carousel :images="slides"></big-carousel>
   <section class="product-section content">
     <h2>{{ $t('products_page.title') }}</h2>
+    <h2>{{ $t('products_page.title1') }}</h2>
     <p>{{ $t('products_page.subtitle1') }}</p>
     <p hidden class="centered"><img src="@images/v-elemento.png" /></p>
     <ProductCarouselVue :products="products" />
+    <h3 hidden>{{ $t('products_page.title2') }}</h3>
+    <div hidden class="card">
+			<img src="@images/kettles.png" alt="">
+      <div class="card-content">
+        <h3>Wasserkocher mit Filter</h3>
+		</div>
+		</div>
     <Certifications />
-
     <h6 class="text-centered">{{ $t('products_page.download')}}</h6>
     <div class="buttons text-centered">
       <button class="mt-2" @click.prevent.stop="download">{{ $t('common.download') }}</button>
@@ -52,18 +59,65 @@
       text-align: left;
       line-height: 60px;
   }
+
+  h2{  background: linear-gradient(to bottom, #cfc09f 22%,#634f2c 24%, #cfc09f 26%, #cfc09f 27%,#ffecb3 40%,#3a2c0f 78%); -webkit-background-clip: text;-webkit-text-fill-color: transparent;
+       color: #fff;
+	     font-size: 36px;
+	     margin:0 auto;
+	     font-weight: 700;
+       line-height: 8px;
+       padding: 24px;
+       text-align: center;
+       letter-spacing: 3px;
+       line-height: 4px;
+}
+  h3 {
+      margin-top: 64px;
+      font-weight: 200;
+      font-size: 24px;
+      text-align: left;
+      line-height: 60px;
+  }
+
   button {
     width: 154px;
     height: 40px;
     border-radius: 12px;
   }
-  .cards {
-    display: grid;
-    grid-template-columns: 50% 50%;
+  
+
+.card {
+  width: 200px;
+  height: 210px;
+  border-radius: 8px;
+  overflow: hidden;
+  position: relative;
+  box-shadow: 0 10px 30px 5px rgba(0, 0, 0, 0.2);
+ 
+ 
+ 
+  img {
+    position: absolute;
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    opacity: 0.9;
+   
   }
 
-  .card {
-    margin: 8px;
-  }
+  h3 {
+    position: absolute;
+    inset: auto auto 30px 30px;
+    margin-top: 0px;
+    font-weight: 500;
+    color: #603809;
+    font-size: 16px;
+    text-align: center;
+  } 
+} 
+
 }
+
 </style>

src/views/social/Social.vue

@@ -1,19 +1,50 @@
 <template>
-  <big-carousel :images="slides.social"></big-carousel>
+  <big-carousel :images="slides"></big-carousel>
   <section class="social-section content">
     <h2>{{ $t('social.title') }}</h2>
     <p>{{ $t('social.paragraph1') }}</p>
     <p>{{ $t('social.paragraph2') }}</p>
-  </section>
-  <section class="social-bottom content">
-    <img src="@images/proyect-soc-new.jpg">
     <p>{{ $t('social.paragraph3') }}<br><br>{{ $t('social.paragraph4') }}</p>
+    <h2>{{ $t('social.title2') }}</h2>
+    <p>{{ $t('social.paragraph5') }}</p>
+    
+    <Carousel :autoplay="5000" class="big-carousel" :items-to-show="2" :wrapAround="true" > 
+      <Slide index="0">
+        <img class="slider-image" :src="$helper.getImage('imag-4.jpg')" alt="slide 1"/>
+      </Slide>
+      <Slide index="1">
+        <img class="slider-image" :src="$helper.getImage('imag-5.jpg')" alt="slide 2"/>
+      </Slide>
+      <Slide index="2">
+        <img class="slider-image" :src="$helper.getImage('imag-6.jpg')" alt="slide 3"/>
+      </Slide>
+      <template #addons>
+        <Navigation />
+        <Pagination />
+      </template>
+    </Carousel>   
   </section>
 </template>
 
-<script setup>
+<script>
 import BigCarousel from '../../components/BigCarousel.vue';
+import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
 import { slides } from '../../data';
+
+export default {
+  data() {
+    return {
+      slides: slides.social,
+    }
+  },
+  components: {
+    Carousel,
+    Slide,
+    Pagination,
+    Navigation,
+    BigCarousel
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -22,15 +53,13 @@ import { slides } from '../../data';
     background-position: top left;
     overflow: hidden;
    
-
-    img {
-      float: left;
-      width: 300px;
-      padding: 16px
-    }
     p {
       padding-top: 70px;
     }
+
+    .slider-image {
+      width: 300px;
+    }
   }
 
   @media only screen and (max-width: 767px) {
@@ -41,6 +70,11 @@ import { slides } from '../../data';
         float: none;
         width: 100%;
         padding: 0;
+
+        .slider-image {
+          width: 300px;
+          height: 300px;
+        }
       }
     }
   }