Skip to content

Commit

Permalink
feat: homepage - changed slider to hero section
Browse files Browse the repository at this point in the history
  • Loading branch information
Alexander Devitsky committed Apr 26, 2022
1 parent 1666c06 commit b3fe2f3
Show file tree
Hide file tree
Showing 2 changed files with 170 additions and 120 deletions.
156 changes: 156 additions & 0 deletions packages/theme/components/Hero.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
134 changes: 14 additions & 120 deletions packages/theme/pages/Home.vue
View file
Original file line number Diff line number Diff line change
@@ -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"
Expand Down Expand Up @@ -91,7 +63,6 @@
<script type="module">
import {
SfButton,
SfHero,
SfBanner,
SfBannerGrid,
} from '@storefront-ui/vue';
Expand All @@ -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'),
Expand All @@ -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',
Expand Down Expand Up @@ -240,7 +169,7 @@ export default defineComponent({
// @ts-ignore
return {
banners,
heroes,
year,
};
},
});
Expand Down Expand Up @@ -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);
Expand All @@ -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 {
Expand Down

0 comments on commit b3fe2f3

Please sign in to comment.