Merge pull request #12 from DivanteLtd/homepage/banner

homepage banner

package.json

@@ -2,7 +2,7 @@
   "name": "root",
   "private": true,
   "engines": {
-    "node": "10.x"
+    "node": ">=10.x"
   },
   "scripts": {
     "build:docs": "cd packages/core/docs && yarn build",

packages/commercetools/theme/components/storyblok/Banner.vue

@@ -0,0 +1,103 @@
+<template>
+    <SfBanner
+      :title="title"
+      :button-text="buttonText"
+      :description="description"
+      class="banner"
+    >
+      <template #description="{description}">
+        <p class="banner__description sf-banner__description">
+          {{ description }}
+        </p>
+      </template>
+      <template #call-to-action="{buttonText}">
+        <SfButton class="banner__button sf-banner__call-to-action">
+          {{ buttonText }}
+        </SfButton>
+      </template>
+    </SfBanner>
+</template>
+
+<script>
+import { SfBanner, SfButton } from '@storefront-ui/vue';
+
+export default {
+  data () {
+    return {
+      title: 'Create account and get discounts!',
+      description: 'Create account and get access to discounts, bundles and other features of our store to make your shopping faster and cheaper!',
+      buttonText: 'Create an account'
+    };
+  },
+  props: ['content'],
+  components: {
+    SfBanner,
+    SfButton
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "~@storefront-ui/vue/styles";
+
+.banner {
+  --banner-padding: 24px;
+  --banner-margin: 16px;
+  --banner-width: calc(100% - calc(var(--banner-margin) * 2));
+  --banner-height: calc(427px - calc(var(--banner-padding) * 2));
+  --banner-container-width: 80%;
+  --banner-title-color: #1D1F22;
+  --banner-title-margin: 0;
+  --banner-title-text-transform: none;
+  --banner-title-font-weight: 800;
+  --banner-title-font-size: 24px;
+  --banner-title-font-line-height: 120%;
+  --banner-description-color: #43464E;
+  --banner-description-margin: 12px 0 16px;
+  --banner-description-font-weight: normal;
+  --banner-description-font-size: 18px;
+  --banner-description-font-line-height: 120%;
+  --banner-background-image: url('/homepage/banner-action.png');
+  --banner-background-color: var(--bg-secondary);
+  --banner-background-position: bottom right;
+  --banner-background-size: 60%;
+  margin: var(--banner-margin);
+  position: relative;
+
+  @include for-desktop {
+    --banner-padding: 86px;
+    --banner-margin: 0;
+    --banner-height: 500px;
+    --banner-container-width: 600px;
+    --banner-title-margin: 26px 0 0;
+    --banner-background-position: top right;
+    --banner-background-size: contain;
+    --banner-title-font-size: 42px;
+    --banner-title-font-line-height: 50px;
+    --banner-description-font-line-height: 33px;
+    --banner-description-margin: 17px 0 43px;
+    letter-spacing: 0.4px;
+  }
+  &__description {
+    --banner-display-description: block;
+  }
+  &__button {
+    --button-background: var(--c-primary);
+    --button-border-radius: 24px;
+    --button-font-size: 16px;
+    --button-font-line-height: 20px;
+    --banner-display-call-to-action: block;
+    letter-spacing: 0.05em;
+    position: absolute;
+    bottom: 25px;
+    left: 37px;
+    &:not(:hover) {
+      --button-box-shadow: 4px 12px 24px rgba(119, 121, 122, 0.25);
+    }
+
+    @include for-desktop {
+      position: static;
+    }
+  }
+}
+</style>

packages/commercetools/theme/layouts/default.vue

@@ -48,7 +48,7 @@ export default {
   letter-spacing: 0.1px;
 }
 :root {
- --c-primary: #eb5256 !important;
+ --c-primary: #EE2E24 !important;
  --font-family-primary: Montserrat, sans-serif !important;
  --font-family-secondary: Montserrat, sans-serif !important;
  --bg-secondary: #F1F2F3;

packages/commercetools/theme/pages/Home.vue

@@ -2,6 +2,7 @@
   <div id="home">
     <StoreLocator />
     <component :is="c.component" v-for="c in story.content.body" :content="c" :key="c._uid"/>
+    <Banner />
     <SfBanner
       image="/homepage/bannerD.png"
       subtitle="Fashion to Take Away"
@@ -44,6 +45,7 @@ import InstagramFeed from '~/components/InstagramFeed.vue';
 
 // Storyblok
 import CallToAction from '~/components/storyblok/CallToAction.vue';
+import Banner from '~/components/storyblok/Banner.vue';
 import ProductCarousel from '~/components/storyblok/ProductCarousel.vue';
 import Photos from '~/components/storyblok/Photos.vue';
 import BannerGrid from '~/components/storyblok/BannerGrid.vue';
@@ -56,6 +58,7 @@ export default {
     StoreLocator,
     BannerGrid,
     CallToAction,
+    Banner,
     ProductCarousel,
     InstagramFeed,
     SfHero,