Product video tab

components/atoms/a-about-us.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="about-us">
+      <SfCallToAction
+        :title="title"
+        :image="image"
+        :background="background"
+        class="class_call_to_action" >
+
+            <template #title >
+              <div class="container">
+                <div class="content d-flex">
+                    <img
+                      :src="'/assets/images/apropos_Capitools.png'"
+                      class="image_apropos_capitools" />
+                    <div class="content_right text-center">
+                      <h4 class="text_1">
+                        A few words to get to know more about us ...
+                      </h4>
+                      <p>Since 2014, Capitools has made it possible to simplify all your DIY and gardening desires.</p>
+                      <p>
+                          Professionals, amateurs or just a DIY and DIY fan, we offer a wide choice of tools, machines and
+                          accessories.
+                          A specific project? Find everything you need from A to Z!
+                        </p>
+                        <p><b>Our strength ?</b></p>
+                        <p>
+                          A team of experts at your service
+                          Professional quality products specially selected for you
+                          More than 3,000 references in stock
+                          A price accessible to all wallets!
+                          Fast delivery in less than 72 hours!
+                        </p>
+                        <p>
+                         From <a href="/generators">generators</a> to <a href="/gardening/lawn-mowers">mowers</a>, including <a href="/power-tools">power tools</a> or even <a href="/gardening/garden-sheds">storage</a> and <a href="/gardening/gardening-accessories">accessories</a>, make your life
+                          easier with Capitools!
+                        </p>
+                        <p>
+                          <b>Psst…. And because we take care of our planet, all of our products are in favor of ecology and
+                          sustainable development.</b>
+                        </p>
+                        <p>
+                          An advice? A question? Do not hesitate to <a href="/pages/contact-capitools">call us</a>!
+                        </p>
+                      </div>
+                </div>
+              </div>
+            </template>
+
+      </SfCallToAction>
+  </div>
+</template>
+<script>
+import { SfCallToAction } from '@storefront-ui/vue';
+export default {
+  components: {
+    SfCallToAction
+  },
+  data () {
+    return {
+      title: '',
+      image: 'assets/images/Bitmap.png',
+      background: '#e1e3e2'
+    };
+  }
+};
+</script>

components/atoms/a-account-icon.vue

@@ -6,11 +6,12 @@
     <SfIcon
       icon="account"
       size="xs"
-      class="sf-header__icon"
+      class="sf-header__icon icon-size"
       :class="{
         'sf-header__icon--is-active': isLoggedIn
       }"
     />
+    <small>Account</small>
   </SfButton>
 </template>
 
@@ -38,3 +39,9 @@ export default {
   }
 };
 </script>
+<style  lang="scss" scoped>
+.icon-size
+{
+ --icon-size: 2rem;
+}
+</style>

components/atoms/a-assurance-contact.vue

@@ -0,0 +1,17 @@
+<template>
+    <div class="d-flex align-center">
+        <SfImage
+        src="/assets/icons/headphone-icon.png"
+        class="image_headphone"
+        />
+        <div class="text-center">
+            <h6>09 70 72 60 00</h6>
+            <p>Service clients</p>
+        </div>
+    </div>
+</template>
+
+<script>
+import { SfImage } from '@storefront-ui/vue';
+export default { components: { SfImage } };
+</script>

components/atoms/a-assurance-delivery.vue

@@ -0,0 +1,17 @@
+<template>
+    <div class="d-flex align-center">
+        <SfImage
+        src="/assets/icons/delivery-icon.png"
+        class="image_delivery"
+        />
+        <div class="text-center">
+            <h6>Free delivery</h6>
+            <p>From 99 euros of purchase</p>
+        </div>
+    </div>
+</template>
+
+<script>
+import { SfImage } from '@storefront-ui/vue';
+export default { components: { SfImage } };
+</script>

components/atoms/a-assurance-payment.vue

@@ -0,0 +1,16 @@
+<template>
+    <div class="d-flex align-center">
+        <SfImage
+        src="/assets/icons/payment-icon.png"
+        class="image_payment"
+        />
+        <div class="text-center">
+            <h6>100% secure payment</h6>
+        </div>
+    </div>
+</template>
+
+<script>
+import { SfImage } from '@storefront-ui/vue';
+export default { components: { SfImage } };
+</script>

components/atoms/a-assurance-swap.vue

@@ -0,0 +1,17 @@
+<template>
+    <div class="d-flex align-center">
+     <SfImage
+      src="/assets/icons/swap-icon.png"
+      class="image_swap"
+    />
+    <div class="text-center">
+        <h6>Guarantee provider</h6>
+        <p>1st European guarantee network</p>
+    </div>
+    </div>
+</template>
+
+<script>
+import { SfImage } from '@storefront-ui/vue';
+export default { components: { SfImage } };
+</script>

components/atoms/a-footer-payment-section.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="payment overflow-y">
+    <div class="payment_text">
+      <p>
+         <b>Secured payment methods</b>
+      </p>
+      <div class="payment-types d-flex wrap">
+        <a href="">
+          <img :src="'/assets/images/visaDark.png'" class="payment_image_size"/>
+        </a>
+        <a>
+          <img :src="'/assets/images/visa.png'" class="payment_image_size"/>
+        </a>
+        <a>
+          <img :src="'/assets/images/masterCardDark.png'" class="payment_image_size"/>
+        </a>
+        <a>
+          <img :src="'/assets/images/maestroDark.png'" class="payment_image_size"/>
+        </a>
+        <a>
+          <img :src="'/assets/images/paypal.png'" class="payment_image_size"/>
+        </a>
+        <a>
+          <img :src="'/assets/images/americanExpressDark.png'" class="payment_image_size"/>
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+

components/atoms/a-garantie.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="garantie-product d-flex">
+            <SfImage
+            src="/assets/images/garantie-icon.png"
+            :alt="garantie-icon"
+            class="sf-heade"
+             />
+        <div class="description">
+            <p class="text-primary">
+              <b>Product warranty</b>
+            </p>
+            <p>This product is under warranty for two years from the date of purchase.</p>
+            <SfLink target="_blank" :link="link">
+                Learn more
+            </SfLink>
+        </div>
+  </div>
+</template>
+
+<script>
+import { SfLink, SfImage } from "@storefront-ui/vue";
+export default {
+  components: {
+    SfLink,
+    SfImage,
+  },
+  data() {
+    return {
+      link: "#",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "~@storefront-ui/shared/styles/helpers/breakpoints";
+    .garantie-product{
+        padding: 15px;
+        border: 1px solid var(--_c-gray-accent);
+        border-radius: 5px;
+        width: fit-content;
+        @include for-mobile{
+          display: inline-flex;
+          width: 43vw;
+          margin: 15px 0;
+          align-items: center;
+          vertical-align: text-bottom;
+        }
+        @media screen and (max-width: 767px){
+             width: auto;
+            display: flex;
+        }
+        .sf-image{
+            min-width: auto;
+            width: 160px;
+
+            @include for-desktop{
+               min-width: 120px;
+            }
+        }
+        p{
+            margin: 0;
+            font-size: 12px;
+            &.text-primary{
+                color: var(--_c-green-primary-lighten)!important;
+                margin-bottom: 7px;
+            }
+        }
+        .description{
+            margin: 0 15px;
+            a{
+               font-family: 'Poppins-Light';
+               font-style: italic;
+               font-size: 12px; 
+               color: var(--_c-green-primary-lighten)!important;
+               text-decoration: none;
+                font-weight: 600;
+            }
+        }
+    }
+</style>

components/atoms/a-header-avis-icon.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="group-3">
+    <div class="rectangle_text">
+      <div class="rectangle_text_number">
+        8.1 / 10
+      </div>
+    </div>
+    <SfImage
+      src="/assets/images/avis.png"
+      class="image_avis"
+    />
+  </div>
+</template>
+
+<script>
+import { SfImage } from '@storefront-ui/vue';
+export default { components: { SfImage } };
+</script>
+
+<style lang="scss" scoped>
+  .group-3
+  {
+    height: 31px;
+    width: 206px;
+    display: flex;
+  }
+  .rectangle_text
+  {
+    height: 31px;
+    width: 69px;
+    border-radius: 2px;
+    background-color: #FE6610;
+  }
+  .rectangle_text_number
+  {
+    height: 25px;
+    width: 55px;
+    color: #FFFFFF;
+    font-family: Poppins;
+    font-size: 18px;
+    font-weight: bold;
+    letter-spacing: 0;
+    line-height: 27px;
+    margin-top: 3px;
+    margin-left: 7px;
+    margin-right: 7px;
+    margin-bottom: 3px;
+  }
+
+  .image_avis
+  {
+    margin-left: 10px;
+    margin-top: 3px;
+    margin-bottom: 1px;
+  }
+
+</style>

components/atoms/a-header-contact.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="rectangle_contact">
+    <a href="tel:+08082808029" class="text_upper">
+      0808 280 8029
+    </a>
+    <div class="text_lower">
+      Call Weekdays Until 5 PM
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.rectangle_contact{
+  margin: 0 15px;
+}
+.text_upper {
+  height: 25px;
+  display: block;
+  width: 132px;
+  color: #484848;
+  font-family: 'Poppins-Bold';
+  font-size: 18px;
+  letter-spacing: 0;
+  line-height: 27px;
+  text-align: center;
+}
+
+.text_lower {
+  height: 15px;
+  width: 123px;
+  color: #3B78DD;
+  font-family: 'Poppins-Regular';
+  font-size: 10px;
+  letter-spacing: 0;
+  line-height: 16px;
+  text-align: center;
+}
+</style>