From b3fe2f3184b7c203f521d238ab1c8c39282cc740 Mon Sep 17 00:00:00 2001
From: Alexander Devitsky <alexander.devitsky@gmail.com>
Date: Tue, 26 Apr 2022 16:21:57 +0300
Subject: [PATCH] feat: homepage - changed slider to hero section

---
 packages/theme/components/Hero.vue | 156 +++++++++++++++++++++++++++++
 packages/theme/pages/Home.vue      | 134 +++----------------------
 2 files changed, 170 insertions(+), 120 deletions(-)
 create mode 100644 packages/theme/components/Hero.vue

diff --git a/packages/theme/components/Hero.vue b/packages/theme/components/Hero.vue
new file mode 100644
index 000000000..2d2c405da
--- /dev/null
+++ b/packages/theme/components/Hero.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="hero" :style="styles">
+    <div class="hero__wrapper">
+      <slot name="subtitle" v-bind="{ subtitle }">
+        <span v-show="subtitle" class="hero__subtitle">
+          {{ subtitle }}
+        </span>
+      </slot>
+      <slot name="title" v-bind="{ title }">
+        <span v-show="title" class="hero__title">
+          {{ title }}
+        </span>
+      </slot>
+      <slot name="call-to-action" v-bind="{ buttonText, link }">
+        <SfButton
+          v-if="buttonText && link"
+          :link="localePath(link)"
+          class="hero__button"
+        >
+          {{ buttonText }}
+        </SfButton>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from '@nuxtjs/composition-api';
+import { SfButton } from '@storefront-ui/vue';
+
+export default defineComponent({
+  name: 'Hero',
+  components: { SfButton },
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    subtitle: {
+      type: String,
+      default: '',
+    },
+    buttonText: {
+      type: String,
+      default: '',
+    },
+    background: {
+      type: String,
+      default: '',
+    },
+    desktopImage: {
+      type: String,
+      default: '',
+    },
+    link: {
+      type: String,
+      default: null,
+    },
+    mobileImage: {
+      type: String,
+      default: '',
+    },
+  },
+  setup(props) {
+    const styles = ref({
+      '--hero-background-image': `url('${props.desktopImage}')`,
+      '--hero-background-image-mobile': `url('${props.mobileImage}')`,
+      'background-color': props.background,
+    });
+
+    return { styles };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.hero {
+  display: flex;
+  justify-content: flex-start;
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 14rem;
+  color: var(--c-text);
+  background-image: var(--hero-background-image, var(--hero-background-image-mobile));
+  background-repeat: no-repeat;
+  background-size: cover;
+
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    width: 100%;
+    padding: var(--spacer-sm);
+    text-decoration: none;
+  }
+
+  &__title {
+    margin: var(--spacer-xs) 0 0 0;
+    color: var(--c-text);
+    width: 60%;
+    @include font(
+        --hero-title-font,
+        var(--font-weight--semibold),
+        var(--h2-font-size),
+        1.2,
+        var(--font-family--secondary)
+    );
+    letter-spacing: 0.1px;
+    text-transform: none;
+  }
+
+  &__subtitle {
+    margin: 0;
+    color: var(--c-gray);
+    width: 60%;
+    @include font(
+        --hero-subtitle-font,
+        var(--font-weight--normal),
+        var(--h6-font-size),
+        1.4,
+        var(--font-family--secondary)
+    );
+    text-transform: uppercase;
+  }
+
+  &__button {
+    display: none;
+  }
+
+  @include for-desktop {
+    background-image: var(--hero-background-image);
+    min-height: 36.625rem;
+
+    &__wrapper {
+      width: 50%;
+      padding: var(--spacer-2xl);
+    }
+
+    &__title {
+      --hero-font-size: var(--h1-font-size);
+      width: 100%;
+      margin: var(--spacer-base) 0 var(--spacer-lg) 0;
+    }
+
+    &__subtitle {
+      width: 100%;
+    }
+
+    &__button {
+      display: block;
+    }
+  }
+}
+</style>
diff --git a/packages/theme/pages/Home.vue b/packages/theme/pages/Home.vue
index b344f2f6e..f5ce0fe12 100644
--- a/packages/theme/pages/Home.vue
+++ b/packages/theme/pages/Home.vue
@@ -1,43 +1,15 @@
 <template>
   <div id="home">
-    <SfHero class="hero">
-      <SfHeroItem
-        v-for="(hero, i) in heroes"
-        :key="i"
-        :title="hero.title"
-        :subtitle="hero.subtitle"
-        :button-text="hero.buttonText"
-        :background="hero.background"
-        :image="hero.image"
-        :class="hero.className"
-      />
-      <template #prev="prevArrow">
-        <SfButton
-          aria-label="previous"
-          class="hero__arrow"
-          @click="prevArrow.go('prev')"
-        >
-          <SvgImage
-            icon="arrow_left"
-            width="24"
-            height="24"
-          />
-        </SfButton>
-      </template>
-      <template #next="nextArrow">
-        <SfButton
-          aria-label="next"
-          class="hero__arrow"
-          @click="nextArrow.go('next')"
-        >
-          <SvgImage
-            icon="arrow_right"
-            width="24"
-            height="24"
-          />
-        </SfButton>
-      </template>
-    </SfHero>
+    <Hero
+      class="hero-section"
+      :title="$t('Colorful summer dresses are already in store')"
+      :subtitle="$t('SUMMER COLLECTION {year}', { year })"
+      :button-text="$t('Learn more')"
+      link="/c/women.html"
+      background="#eceff1"
+      desktop-image="https://cdn.shopify.com/s/files/1/0407/1902/4288/files/bannerB_1240x400.jpg"
+      mobile-image="https://cdn.shopify.com/s/files/1/0407/1902/4288/files/bannerB_328x224.jpg"
+    />
     <LazyHydrate when-visible>
       <SfBannerGrid
         :banner-grid="1"
@@ -91,7 +63,6 @@
 <script type="module">
 import {
   SfButton,
-  SfHero,
   SfBanner,
   SfBannerGrid,
 } from '@storefront-ui/vue';
@@ -104,19 +75,20 @@ import {
 } from '@nuxtjs/composition-api';
 import LazyHydrate from 'vue-lazy-hydration';
 import { useCache, CacheTagPrefix } from '@vue-storefront/cache';
+import Hero from '~/components/Hero.vue';
 import LoadWhenVisible from '~/components/utils/LoadWhenVisible';
 import SvgImage from '~/components/General/SvgImage.vue';
 
 export default defineComponent({
   name: 'HomePage',
   components: {
+    Hero,
     LazyHydrate,
     LoadWhenVisible,
     SvgImage,
     SfButton,
     SfBanner,
     SfBannerGrid,
-    SfHero,
     InstagramFeed: () => import(/* webpackPrefetch: true */ '~/components/InstagramFeed.vue'),
     MobileStoreBanner: () => import(/* webpackPrefetch: true */ '~/components/MobileStoreBanner.vue'),
     NewProducts: () => import(/* webpackPrefetch: true */ '~/components/NewProducts.vue'),
@@ -127,49 +99,6 @@ export default defineComponent({
     const { addTags } = useCache();
     const { app } = useContext();
     const year = new Date().getFullYear();
-    const heroes = ref([
-      {
-        title: app.i18n.t('Colorful summer dresses are already in store'),
-        subtitle: app.i18n.t('SUMMER COLLECTION {year}', { year }),
-        buttonText: app.i18n.t('Learn more'),
-        background: '#eceff1',
-        image: {
-          mobile:
-            'https://cdn.shopify.com/s/files/1/0407/1902/4288/files/bannerB_328x224.jpg',
-          desktop:
-            'https://cdn.shopify.com/s/files/1/0407/1902/4288/files/bannerB_1240x400.jpg',
-        },
-        link: '/c/women/women-clothing-shirts',
-      },
-      {
-        title: app.i18n.t('Colorful summer dresses are already in store'),
-        subtitle: app.i18n.t('SUMMER COLLECTION {year}', { year }),
-        buttonText: app.i18n.t('Learn more'),
-        background: '#fce4ec',
-        image: {
-          mobile:
-            'https://cdn.shopify.com/s/files/1/0407/1902/4288/files/bannerH_328x224.jpg',
-          desktop:
-            'https://cdn.shopify.com/s/files/1/0407/1902/4288/files/bannerH_1240x400.jpg',
-        },
-        link: '/c/women/women-clothing-dresses',
-      },
-      {
-        title: app.i18n.t('Colorful summer dresses are already in store'),
-        subtitle: app.i18n.t('SUMMER COLLECTION {year}', { year }),
-        buttonText: app.i18n.t('Learn more'),
-        background: '#efebe9',
-        image: {
-          mobile:
-            'https://cdn.shopify.com/s/files/1/0407/1902/4288/files/bannerA_328x224.jpg',
-          desktop:
-            'https://cdn.shopify.com/s/files/1/0407/1902/4288/files/bannerA_1240x400.jpg',
-        },
-        link: '/c/women/women-shoes-sandals',
-        className:
-          'sf-hero-item--position-bg-top-left sf-hero-item--align-right',
-      },
-    ]);
     const banners = ref([
       {
         slot: 'banner-A',
@@ -240,7 +169,7 @@ export default defineComponent({
     // @ts-ignore
     return {
       banners,
-      heroes,
+      year,
     };
   },
 });
@@ -278,9 +207,8 @@ export default defineComponent({
   }
 }
 
-.hero {
+.hero-section {
   margin: var(--spacer-xl) auto var(--spacer-lg);
-  --hero-item-background-position: center;
 
   ::v-deep .sf-link:hover {
     color: var(--c-white);
@@ -289,40 +217,6 @@ export default defineComponent({
   @include for-desktop {
     margin: var(--spacer-xl) auto var(--spacer-2xl);
   }
-
-  &__arrow {
-    --button-height: 2.75rem;
-    --button-width: 2.75rem;
-    --button-padding: 0 var(--spacer-xs);
-    --button-background: transparent;
-    --button-color: var(--c-dark);
-    display: flex;
-    align-content: center;
-    justify-content: center;
-
-    &:hover {
-      --button-background: transparent;
-      --button-box-shadow-opacity: 0;
-    }
-  }
-
-  .sf-hero-item {
-    &:nth-child(even) {
-      --hero-item-background-position: left;
-      @include for-mobile {
-        --hero-item-background-position: 30%;
-        --hero-item-wrapper-text-align: right;
-        --hero-item-subtitle-width: 100%;
-        --hero-item-title-width: 100%;
-        --hero-item-wrapper-padding: var(--spacer-sm) var(--spacer-sm)
-          var(--spacer-sm) var(--spacer-2xl);
-      }
-    }
-  }
-}
-
-::v-deep .sf-hero__controls {
-  --hero-controls-display: none;
 }
 
 .banner-grid {