# hero
This component is a hero for a landing page that can be adjusted to multiple preset themes.
# Example
<hero
:displayVersion="1"
video="https://player.vimeo.com/external/269681229.sd.mp4?s=ccde78fc1159a26dce8c37210bac058715c6219d&profile_id=165"
youtubeId="sVGn26bo9y4"
:banner="require('./assets/banner.png')"
:backgroundImg="require('./assets/bg.png')"
:playButton="require('./assets/play.svg')"
title="The Title"
subtitle="The Subtitle"
text="This is the text"
description="This is the description"
buttonText="Example Button"
buttonLink="https://www.google.com/"
primaryColor= "#FFee00"
secondaryColor="#FFF"
fontFamily="Helvetica"
fontSize1= "36px"
fontSize2= "26px"
>
</hero>
# slots
content (required) content to be scrollable
# props
displayVersion (required) Select Hero Version
image Pass in an image to display (Swaps with video)
backgroundImg Image to use for the background on the second version of the Hero (Not Required)
playButton Play button icon (Required for hero 1 and 2)
video Pass in a video to display (Swaps with image)
youtubeId ID of the YOUTUBE video to play when play button is clicked (Only applies to Hero 2 and 3)
title Title text (Not required but recommended)
subtitle SubTitle text (Not required)
text Standard text that goes within a P tag (Not Required)
description Standard text similar to description (Not Required and added for Hero number 2)
buttonText Text to display on the button (Not Required)
buttonLink Link for the button to go to (Not Required)
primaryColor Color of Title text (Defaults to black)
secondaryColor Color of SubTitle text (Defaults to black)
tertiaryColor Color of standard text (Defaults to black)
fontFamily The font to use for all text (Defaults to Arial) Not required. Will not override global styles for h1, h2, etc.
fontSize1 The font-size of the Title (Defaults to 40px)
fontSize2 The font-size of the SubTitle (defaults to 28px)
# Source Code
<template>
<div class="all-hero">
<!-- START HERO 1 -->
<div class="hero-1" v-if="displayVersion === 1">
<div v-bind:class="selectFormat()">
<div class="hero-img-container">
<img class="hero-img" v-bind:src="image" />
</div>
<div class="hero-section">
<img class="hero-img-mobile" v-bind:src="image" />
<video v-if="videoCheck()" autoplay muted loop playsinline class="hero-video-mobile">
<source v-bind:src="video" type="video/mp4" />
</video>
<div class="hero-text-container">
<div class="hero-text">
<div class="non-buttons" :style="'font-family: ' + fontFamily">
<h1 :style="'color: ' + primaryColor + '; font-size: ' + fontSize1">{{ title }}</h1>
<h2 v-if="subtitleCheck()"
:style="'color: ' + secondaryColor + '; font-size: ' + fontSize2" class="subtitle">
{{ subtitle }}</h2>
<p v-if="textCheck()" :style="'color: ' + tertiaryColor + '; font-size: ' + fontSize2"
class="regText">{{ text }}</p>
</div>
<div class="hero-btn-container">
<a :href="buttonLink">
<div class="hero-btn" v-if="buttonCheck()">
<button class="primary-button button ripple hvr-grow-shadow" v-bind="$attrs"
v-on="$listeners" :href="buttonLink">
<p>{{ buttonText }}</p>
</button>
</div>
</a>
</div>
</div>
</div>
<div class="hero-image-container">
<img class="hero-image-inner" v-bind:src="image" />
<video v-if="videoCheck()" autoplay muted loop playsinline class="hero-video">
<source v-bind:src="video" type="video/mp4" />
</video>
</div>
</div>
</div>
</div>
<!-- END HERO 1 -->
<!-- START HERO 2 -->
<div class="hero-2" v-else-if="displayVersion === 2">
<div class="hero-container" :style="'background-image: url(' + backgroundImg +')'">
<div class="left-content">
<div class="video-wrapper" v-if="video">
<video class="full-media" autoplay playsinline muted loop>
<source :src="video" type="video/mp4" />
</video>
<FullScreenYoutubeVideo
v-if="fullScreenYoutubeVideo.active"
@close="fullScreenYoutubeVideo.active = false"
:video-id="youtubeId"
/>
<div class="icon-container">
<div class="icon">
<a @click="fullScreenYoutubeVideo.active = true">
<img data-gtm="email" v-bind:src="playButton" />
</a>
</div>
<div class="text">
<p :style="'color: ' + primaryColor">{{text}}</p>
</div>
</div>
</div>
<div class="image-wrapper" v-if="image">
<img class="hero-img" v-bind:src="image" />
</div>
</div>
<div class="right-content">
<div class="text-content">
<div v-if="title" class="title" :style="'font-family: ' + fontFamily">
<h1 :style="'color: ' + primaryColor + '; font-size: ' + fontSize1">{{title}}</h1>
<div class="underline" :style="'border-top: 5px solid ' + secondaryColor"></div>
</div>
<div v-if="subtitle" class="subtitle" :style="'font-family: ' + fontFamily">
<h2
:style="'border-left: 5px solid ' + secondaryColor + ';' + 'color: ' + primaryColor + '; font-size: ' + fontSize2">
{{subtitle}}</h2>
</div>
<div v-if="text" class="description">
<p :style="'color: ' + primaryColor + '; font-size: ' + fontSize2">{{description}}</p>
</div>
</div>
</div>
</div>
</div>
<!-- END HERO 2 -->
<!-- START HERO 3 -->
<div class="hero-3" v-else-if="displayVersion === 3">
<div class="background">
<div v-if="image" class="image-container" >
<img class="img" v-bind:src="image" />
</div>
<div v-if="video" class="video-container">
<video v-if="videoCheck()" autoplay muted loop playsinline class="hero-video">
<source v-bind:src="video" type="video/mp4" />
</video>
</div>
</div>
<div class="text" :style="'font-family: ' + fontFamily">
<div class="middle">
<div class="icon-container">
<a @click="fullScreenYoutubeVideo.active=true">
<img class="icon" data-gtm="email" v-bind:src="playButton" />
</a>
</div>
<FullScreenYoutubeVideo
v-if="fullScreenYoutubeVideo.active"
@close="fullScreenYoutubeVideo.active = false"
:video-id="youtubeId"
/>
<img class="banner" v-bind:src="banner" />
<img class="mobile-banner" v-bind:src="mobileBanner" />
</div>
</div>
</div>
<!-- END HERO 3 -->
</div>
</template>
<script>
import FullScreenYoutubeVideo from '../FullScreenYoutubeVideo'
export default {
components: {
FullScreenYoutubeVideo
},
data() {
return {
fullScreenYoutubeVideo: {
active: false,
videoId: ""
}
}
},
props: {
displayVersion: Number, // Which hero to display
title: String, // Text to feature in the title
subtitle: String, // Text to feature in the subtitle
text: String, // Normal text
description: String, // Second batch of normal text (For Hero 2)
image: String, // Image to feature in hero
video: String, // Video to feature in hero (Replaces image)
playButton: String, // Play button icon
banner: String, // Banner image for 3rd display
mobileBanner: String, // Mobile Banner image for 3rd display
buttonText: String, // Text for the button to display
buttonLink: String, // Link for the button to go to
primaryColor: {
// Color of title text
type: String,
default: "black"
},
secondaryColor: {
// color of subtitle text
type: String,
default: "black"
},
tertiaryColor: {
// color of normal text
type: String,
default: "black"
},
fontFamily: {
// Font to use
type: String,
default: "Arial"
},
fontSize1: {
// Font Size for Title
type: String,
default: "40px"
},
fontSize2: {
// Font Size for SubTitle and text
type: String,
default: "28px"
},
backgroundImg: String, //Background for second hero
youtubeId: String
},
methods: {
buttonCheck() {
if (this.buttonText != undefined) {
return true;
} else {
return false;
}
},
textCheck() {
if (this.text != undefined) {
return true;
} else {
return false;
}
},
subtitleCheck() {
if (this.subtitle != undefined) {
return true;
} else {
return false;
}
},
videoCheck() {
if (this.video != undefined) {
return true;
} else {
return false;
}
},
selectFormat() {
if (this.buttonText != undefined) {
return "home-mobile";
} else {
return null;
}
}
}
};
</script>
<style lang="scss" scoped>
/*** START HERO 1 ***/
.hero-1 {
.hero-section {
position: relative;
display: flex;
align-items: center;
text-align: left;
margin: 5%;
height: fit-content;
max-width: 1280px;
width: 100%;
margin: 2% auto;
.hero-text-container {
position: absolute;
display: flex;
align-items: center;
height: inherit;
z-index: 1;
width: 100%;
padding-top: 1%;
.hero-text {
width: 50%;
display: inline-block;
h1 {
width: 90%;
font-weight: 900;
margin: 20px 0 25px 0;
-webkit-font-smoothing: subpixel-antialiased;
text-transform: uppercase;
}
h2 {
margin: 0;
text-transform: uppercase;
border: none;
}
}
}
.hero-image-container {
z-index: 0;
text-align: right;
width: 100%;
.hero-image-inner {
width: 75%;
}
.hero-video {
right: 0;
bottom: 0;
width: 75%;
height: 100%;
}
}
}
.hero-img {
display: none;
}
.hero-img-mobile {
display: none;
}
.hero-video-mobile {
display: none;
}
.hero-btn-container {
margin-top: 37px;
.hero-btn {
margin-bottom: 0;
p {
color: black;
font-size: 16px;
font-weight: 700;
margin: 0;
}
.primary-button {
max-width: 302px;
width: 100%;
background: #ffee00;
border-radius: 5px;
cursor: pointer;
font-size: 18px;
color: black;
text-transform: uppercase;
font-family: proxima-nova, sans-serif, sans-serif;
font-weight: 900;
font-style: normal;
padding: 14px;
margin-bottom: 10px;
border: none;
outline: none;
}
.cancel {
background-color: red;
color: white;
border: 1px solid transparent;
}
.ripple {
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
}
.ripple:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
background-image: radial-gradient(circle,
#00a1ed 10%,
transparent 10.01%);
background-repeat: no-repeat;
background-position: 50%;
transform: scale(10, 10);
opacity: 0;
transition: transform 0.5s, opacity 1s;
}
.ripple:active:after {
transform: scale(0, 0);
opacity: 0.3;
transition: 0s;
}
.hvr-grow-shadow {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: box-shadow, transform;
transition-property: box-shadow, transform;
}
.hvr-grow-shadow:hover,
.hvr-grow-shadow:focus,
.hvr-grow-shadow:active {
box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
-webkit-transform: scale(1.03);
transform: scale(1.03);
}
}
}
@media (max-width: 768px) {
.hero-section {
text-align: left;
margin: 0 5% 0 5%;
padding-right: 5%;
background-image: none !important;
width: 100%;
display: block;
.hero-text-container {
position: relative;
width: 100%;
display: block;
.hero-text {
width: 100%;
display: inline-block;
padding-bottom: 30px;
h1 {
font-size: 32px;
width: 100%;
font-weight: 900;
}
}
}
.hero-image-container {
display: none;
}
}
.hero-img {
display: block;
width: 100%;
}
.home-mobile {
.hero-img {
display: none;
}
.non-buttons {
margin-top: 200px;
margin-bottom: 150px;
}
.hero-section {
.hero-img-mobile {
display: block;
position: absolute;
object-fit: cover;
width: 100%;
height: 100%;
left: -5%;
}
.hero-video-mobile {
display: block;
position: absolute;
object-fit: cover;
width: 100%;
height: 100%;
left: -5%;
}
}
.hero-btn-container {
margin: auto;
text-align: center;
width: 100%;
position: absolute;
padding-right: 5%;
.hero-btn {
width: 100%;
}
}
}
}
}
/*** END HERO 1 ***/
/*** START HERO 2 ***/
.hero-2 {
height: 100vh;
.hero-container {
display: flex;
flex-direction: row;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
.left-content {
width: 42%;
overflow: hidden;
height: 100%;
.video-wrapper {
height: 100%;
position: relative;
.icon-container {
display: flex;
flex-direction: row;
position: absolute;
width: 200px;
height: fit-content;
align-items: center;
bottom: 0;
left: 50%;
transform: translate(-60%, 0);
.icon {
width: 20%;
a {
height: 100%;
}
a:hover {
cursor: pointer;
}
}
.text {
width: 80%;
padding: 0 0 0 10%;
p {
font-size: 20px;
line-height: 1.3em;
text-align: left;
}
}
}
.full-media {
transform: translateX(-35%);
height: 100%;
max-height: none;
max-width: none;
-o-object-fit: cover;
object-fit: cover;
overflow: hidden;
}
}
.image-wrapper {
height: 100%;
.hero-img {
transform: translateX(-25%);
height: 100%;
max-height: none;
max-width: none;
-o-object-fit: cover;
object-fit: cover;
overflow: hidden;
}
}
}
.right-content {
display: flex;
align-items: center;
width: 58%;
.text-content {
margin: auto 15%;
.title {
h1 {
margin-bottom: 20px;
}
.underline {
width: 15%;
height: 1px;
}
}
.subtitle {
text-decoration: none;
h2 {
border-bottom: none;
font-weight: 400;
padding-left: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
}
}
}
}
@media (max-width: 767px) {
.hero-container {
flex-direction: column;
.left-content {
width: 100%;
.video-wrapper {
.icon-container {
margin-left: 20px;
margin-bottom: 20px;
bottom: 0;
left: 0;
transform: translate(0, 0);
width: 100%;
.icon {
width: 15%;
}
.text {
width: 85%;
padding: 0 0 0 5%;
}
}
.full-media {
margin: auto;
height: 100%;
object-fit: cover;
text-align: center;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
}
}
.right-content {
width: 100%;
.underline {
border: none !important;
}
.text-content {
width: 100%;
margin: auto;
padding: 10%;
.subtitle {
h2 {
border: none !important;
padding-left: 0;
}
}
}
}
}
}
}
/*** END HERO 2 ***/
/*** START HERO 3 ***/
.hero-3 {
position: relative;
display: flex;
height: 100vh;
width: 100%;
.background {
width: 100%;
height: 100%;
.video-container {
overflow: hidden;
height: 100%;
position: relative;
.hero-video {
margin: auto;
width: 100%;
height: 100%;
object-fit: cover;
text-align: center;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
}
}
.text {
display: flex;
flex-direction: column;
align-content: center;
position: absolute;
text-align: center;
align-items: center;
margin: auto;
width: 100%;
height: 100%;
.middle {
margin: auto;
width: 80%;
.icon-container {
width: 15%;
margin: 100px auto 40px auto;
.icon {
width: 100%;
opacity: 0.5;
transition: 1s;
}
.icon:hover {
transition: 1s;
opacity: 1;
}
a:hover {
cursor: pointer;
}
}
.banner {
width: 100%;
max-width: 1400px;
}
.mobile-banner {
width: 100%;
display: none;
}
@media (max-width: 640px) {
.banner {
display: none;
}
.mobile-banner {
display: flex;
}
}
}
}
}
/*** END HERO 3 ***/
</style>