Merge pull request #5307 from justyna-13/designs-part2-home

Designs part2 - homepage

packages/core/nuxt-theme-module/theme/components/AppFooter.vue

@@ -86,13 +86,12 @@ export default {
 
 <style lang="scss">
 .sf-footer {
-  --footer-margin: var(--spacer-sm) 0 var(--spacer-xl);
-  --footer-display: block;
-  --footer-padding: 0 0 var(--spacer-sm) 0;
-  @include for-desktop {
-    --footer-display: flex;
-    --footer-margin: var(--spacer-3xl) auto var(--spacer-xl);
-    --footer-padding: 0;
+  &__container {
+    --footer-margin: var(--spacer-sm);
+    @include for-desktop {
+      --footer-margin: var(--spacer-2xl) auto var(--spacer-xl);
+      --footer-padding: 0;
+    }
   }
 }
 .footer {

packages/core/nuxt-theme-module/theme/components/InstagramFeed.vue

@@ -1,26 +1,31 @@
 <template>
-  <SfSection title-heading="Share Your Look" subtitle-heading="#YOURLOOK" class="section">
+  <SfSection title-heading="Share Your Look" subtitle-heading="#YOURLOOK" class="title">
     <div class="grid grid-images">
       <div class="grid__row">
         <div class="grid__col">
-          <SfImage src="/homepage/imageA.webp" :width="486" :height="486">katherina_trn</SfImage>
+          <SfImage v-if="isMobile" src="/homepage/imageAm.webp" :width="160" :height="160">katherina_trn</SfImage>
+          <SfImage v-else src="/homepage/imageAd.webp" :width="470" :height="470">katherina_trn</SfImage>
         </div>
-        <div class="grid__col">
-          <SfImage src="/homepage/imageB.webp" :width="486" :height="486">katherina_trn</SfImage>
+        <div class="grid__col small">
+          <SfImage v-if="isMobile" src="/homepage/imageBm.webp" :width="160" :height="160">katherina_trn</SfImage>
+          <SfImage v-else src="/homepage/imageCd.webp" :width="470" :height="160">katherina_trn</SfImage>
         </div>
       </div>
       <div class="grid__row">
-        <div class="grid__col">
-          <SfImage src="/homepage/imageC.webp" :width="486" :height="486">katherina_trn</SfImage>
+        <div class="grid__col small">
+          <SfImage v-if="isMobile" src="/homepage/imageCm.webp" :width="160" :height="160">katherina_trn</SfImage>
+           <SfImage v-else src="/homepage/imageBd.webp" :width="470" :height="160">katherina_trn</SfImage>
         </div>
         <div class="grid__col">
-          <SfImage src="/homepage/imageD.webp" :width="486" :height="486">katherina_trn</SfImage>
+          <SfImage v-if="isMobile" src="/homepage/imageDm.webp" :width="160" :height="160">katherina_trn</SfImage>
+          <SfImage v-else src="/homepage/imageDd.webp" :width="470" :height="470">katherina_trn</SfImage>
         </div>
       </div>
     </div>
   </SfSection>
 </template>
 <script>
+import { ref, onMounted, onBeforeUnmount} from '@vue/composition-api';
 import {
   SfSection,
   SfImage
@@ -30,31 +35,82 @@ export default {
   components: {
     SfSection,
     SfImage
+  },
+  setup() {
+    const isMobile = ref(false);
+
+    const mobileHandler = (event) => {
+      isMobile.value = event.matches;
+    };
+
+    onMounted(() => {
+      isMobile.value =
+      Math.max(document.documentElement.clientWidth, window.innerWidth) <=
+      1023;
+      window.matchMedia('(max-width: 1023px)').addListener(mobileHandler);
+    });
+
+    onBeforeUnmount(() => {
+      window
+        .matchMedia('(max-width: 1023px)')
+        .removeListener(mobileHandler);
+    });
+
+    return {
+      isMobile
+    };
   }
 };
 </script>
 <style lang="scss" scoped>
+.title {
+  --heading-title-font-weight: var(--font-weight--semibold);
+  --section-margin: var(--spacer-xl) 0;
+  --section-content-margin: var(--spacer-xl) 0;
+  --heading-title-font-size: var(--h2-font-size);
+  @include for-desktop {
+    --section-margin: var(--spacer-2xl) 0;
+    --section-content-margin: var(--spacer-2xl) 0;
+  }
+}
 .grid {
-  max-width: 960px;
-  margin: auto;
+  display: flex;
+  max-height: 20.625rem;
+  width: 100%;
+  justify-content: center;
+  margin: 0;
+  @include for-desktop {
+    max-height: 40.625rem;
+    max-width: 60rem;
+    margin: 0 auto;
+  }
   &__row {
     display: flex;
+    flex-direction: column;
     & + & {
-      margin-top: calc(var(--spacer-xl) / 2);
+      margin-left: var(--spacer-xs);
       @include for-desktop {
-        margin-top: var(--spacer-sm);
+        margin-left: var(--spacer-sm);
       }
     }
   }
   &__col {
-    margin: 0;
-    flex: 1;
+    width: 10rem;
+    height: 10rem;
+    @include for-desktop {
+      &.small {
+        height: 10rem;
+      }
+     width: 29.375rem;
+     height: 29.375rem;
+    }
     & + & {
-      margin-left: calc(var(--spacer-xl) / 2);
+      margin-top: var(--spacer-xs);
       @include for-desktop {
-        margin-left: var(--spacer-sm);
+        margin-top: var(--spacer-sm);
       }
     }
   }
 }
+
 </style>

packages/core/nuxt-theme-module/theme/components/MobileStoreBanner.vue

@@ -0,0 +1,79 @@
+<template>
+  <SfBanner
+    image="/homepage/bannerD.png"
+    subtitle="Fashon to take away"
+    title="Download our application to your mobile"
+    class="sf-banner--left desktop-only banner-app"
+  >
+    <template #call-to-action>
+      <div class="banner-app__call-to-action">
+        <SfButton
+          class="banner-app__button sf-button--pure"
+          aria-label="Go to Apple Product"
+          @click="() => {}"
+        >
+          <SfImage
+            src="/homepage/apple.png"
+          />
+        </SfButton>
+        <SfButton
+          class="banner-app__button sf-button--pure"
+          aria-label="Go to Google Product"
+          @click="() => {}"
+        >
+          <SfImage
+            src="/homepage/google.png"
+          />
+        </SfButton>
+      </div>
+    </template>
+  </SfBanner>
+</template>
+<script>
+import {
+  SfBanner,
+  SfImage,
+  SfButton
+} from '@storefront-ui/vue';
+export default {
+  name: 'AppStoreBanner',
+  components: {
+    SfBanner,
+    SfImage,
+    SfButton
+  }
+};
+</script>
+<style lang="scss" scoped>
+
+.banner-app {
+  --banner-title-margin: var(--spacer-base) 0 var(--spacer-xl) 0;
+  --banner-padding: 0 0 var(--spacer-2xl);
+  --banner-title-font-size: var(--h1-font-size);
+  --banner-subtitle-font-size: var(--font-size--xl);
+  --banner-title-font-weight: var(--font-weight--semibold);
+  --banner-subtitle-font-weight: var(--font-weight--medium);
+  --banner-title-text-transform: capitalize;
+  --banner-title-text-transform: none;
+  --banner-background-size: contain;
+  --banner-background-position: right;
+  display: block;
+  min-height: 26.25rem;
+  max-width: 77.5rem;
+  margin: 0 auto;
+  padding: 5.625rem 31.25rem 0 5.625rem;
+  &__call-to-action {
+    display: flex;
+    flex-wrap: nowrap;
+  }
+  &__button {
+    --image-width: 10.875rem;
+    --image-height: 3.5625rem;
+    pointer-events: visible;
+    & + & {
+      margin: 0 0 0 var(--spacer-base);
+    }
+  }
+}
+
+</style>