Skip to content

Commit

Permalink
docs: Add Vue School Sumer Sale banner (#1407)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nicodevs
nicodevs authored Jun 29, 2022
1 parent 6125f6c commit 8626aac
Show file tree
Hide file tree
Showing 7 changed files with 140 additions and 555 deletions.
255 changes: 114 additions & 141 deletions packages/docs/.vitepress/components/Banner.vue
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,32 @@
<template>
<a
id="vs"
v-if="isVisible"
href="https://vueschool.io/sales/price-increase-22?friend=vuerouter"
id="vs"
href="https://vueschool.io/sales/summer-vue/?friend=vuerouter"
target="_blank"
rel="noreferrer"
>
rel="noreferrer">
<div class="vs-iso">
<img src="/images/vueschool/vs-iso.svg" alt="Vue School Logo">
</div>
<div class="vs-logo">
<img src="/images/vueschool/vs-iso.svg" class="logo-small">
<img src="/images/vueschool/vs-logo.svg" class="logo-big">
<img src="/images/vueschool/vs-logo.svg" alt="Vue School Logo">
</div>
<div class="vs-core">
<div class="vs-backpack">
<img src="/images/vueschool/vs-backpack.png" alt="Backpack">
</div>
<div class="vs-slogan">
<div class="vs-slogan-title">
Extended for <strong>48 hours!</strong>
</div>
<div class="vs-slogan-subtitle">
Get up to 40% off your Vue School Subscription
</div>
<span class="vs-slogan-light">Summer Sale:</span> Get the 3 months plan for only <span style="text-decoration: line-through">$75</span> $50
</div>
<div class="vs-button">
<div class="vs-button-inside">
GET OFFER
</div>
Get 33% OFF
</div>
</div>
<div id="vs-close" class="vs-close" @click.stop.prevent="close">
<img src="/images/vueschool/vs-close.svg" alt="Close">
<div
id="vs-close"
class="vs-close"
@click.stop.prevent="close">
<img src="/images/vueschool/close.svg" alt="Close">
</div>
</a>
</template>
Expand All @@ -40,30 +40,27 @@ export default {
},
mounted () {
const now = new Date()
const end = new Date('2022-05-04T00:00:00+02:00')
this.isVisible = !localStorage.getItem('VS_FW_22') && (now < end)
const end = new Date('2022-07-23T00:00:00+02:00')
this.isVisible = !localStorage.getItem('VS_SUMMER_22') && (now < end)
if (this.isVisible) document.body.classList.add('has-top-banner')
},
methods: {
close () {
this.isVisible = false
document.body.classList.remove('has-top-banner')
localStorage.setItem('VS_FW_22', 1)
localStorage.setItem('VS_SUMMER_22', 1)
}
}
}
</script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
#vs {
align-items: center;
background-color: #000c19;
background-color: #202A5A;
box-sizing: border-box;
color: #fff;
display: flex;
font-family: 'Roboto', Oxygen, Fira Sans, Helvetica Neue, sans-serif;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
justify-content: center;
position: fixed;
padding: 0 10px;
Expand All @@ -72,152 +69,128 @@ export default {
top: 0;
z-index: 100;
height: 5rem;
line-height: 1;
background-image: url(/images/vueschool/vs-fw-bg-small.svg);
background-size: cover;
background-repeat: no-repeat;
display: flex;
}
#vs:hover {
text-decoration: none;
}
#vs .vs-logo {
@media (min-width: 680px) {
#vs {
height: 5rem;
}
}
#vs:hover .vs-core .vs-button {
background: #f22606;
}
#vs .vs-iso {
position: absolute;
left: 20px;
top: 20px;
}
#vs .vs-logo .logo-big {
height: 26px;
display: none;
}
#vs:hover .vs-core .vs-button-inside {
background: linear-gradient(257deg, #e19b09 99%, #ffca24 6%);
#vs .vs-iso img {
height: 26px;
}
#vs .vs-core .vs-slogan {
color: #fff;
margin-left: 8px;
text-align: center;
@media (min-width: 680px) {
#vs .vs-iso {
left: 40px;
height: 40px;
display: inline-block;
}
#vs .vs-iso img {
height: 40px;
}
}
#vs .vs-core {
width: 190px;
align-items: center;
display: flex;
justify-content: center;
@media (min-width: 900px) {
#vs .vs-iso {
display: none;
}
}
#vs .vs-core .vs-slogan .vs-slogan-subtitle {
font-size: 14px;
color: #cdc5dc;
margin-top: 8px;
#vs .vs-logo {
position: absolute;
display: none;
left: 40px;
}
#vs .vs-core .vs-slogan .vs-slogan-title {
font-size: 16px;
font-weight: 800;
@media (min-width: 900px) {
#vs .vs-logo {
display: block;
}
}
#vs .vs-core .vs-slogan .vs-slogan-title strong {
color: #fdc722;
#vs .vs-core {
display: flex;
align-items: center;
}
#vs .vs-core .vs-button {
background: linear-gradient(0deg, #ffdf4c, #e29d0a);
padding: 2px;
margin-right: 18px;
margin-left: 16px;
border-radius: 30px;
display: none;
#vs .vs-core .vs-backpack {
margin-right: 14px;
}
#vs .vs-core .vs-button-inside {
color: #000;
padding: 7px 10px;
font-weight: 800;
font-size: 22px;
white-space: nowrap;
border-radius: 30px;
background: linear-gradient(90deg, #FFC828, #E19C0E);
text-transform: uppercase;
#vs .vs-core .vs-backpack img {
height: 38px;
}
#vs .vs-close {
right: 6px;
position: absolute;
@media (min-width: 900px) {
#vs .vs-core .vs-backpack img {
height: 50px;
}
}
#vs .vs-close:hover {
color: #56d8ff;
@media (min-width: 900px) {
#vs .vs-core .vs-backpack img {
height: 74px;
}
}
#vs .vs-core .vs-slogan {
color: #FFF;
font-weight: bold;
font-size: 14px;
margin-right: 26px;
}
@media (min-width: 680px) {
#vs {
background-image: url(/images/vueschool/vs-fw-bg.svg);
background-position: top right -110px;
}
#vs .vs-core .vs-slogan {
margin-left: 24px;
width: auto;
}
#vs .vs-core .vs-slogan .vs-slogan-subtitle {
margin-right: 0;
font-size: 16px;
}
#vs .vs-core .vs-slogan .vs-slogan-title {
font-size: 18px;
}
@media (min-width: 900px) {
#vs .vs-core .vs-slogan {
font-size: 20px;
}
}
#vs .vs-core .vs-slogan > .vs-slogan-light {
color: #ff5338;
display: block;
text-align: left;
}
@media (min-width: 900px) {
#vs .vs-core .vs-slogan > .vs-slogan-light {
text-align: center;
display: inline;
}
}
#vs .vs-core .vs-button {
margin-left: 43px;
color: #fff;
padding: 13px 24px;
border-radius: 40px;
display: none;
background: #ff5338;
font-weight: bold;
text-transform: uppercase;
}
@media (min-width: 680px) {
#vs .vs-core .vs-button {
display: inline-block;
margin-right: 0;
margin-left: 22px;
}
#vs .vs-core .vs-button-inside {
padding: 8px 24px;
}
}
#vs .vs-close {
right: 10px;
position: absolute;
padding: 10px;
}
@media (min-width: 680px) {
#vs .vs-close {
padding: 10px;
right: 20px;
}
}
@media (min-width: 768px) {
#vs .vs-logo .logo-small {
display: none;
}
#vs .vs-logo .logo-big {
display: inline-block;
}
#vs .vs-core {
width: 430px;
}
}
@media (min-width: 1024px) {
#vs {
background-position: top right;
}
#vs .vs-core .vs-slogan .vs-slogan-title {
font-size: 24px;
}
#vs .vs-core .vs-button {
margin-left: 69px;
}
#vs .vs-core {
width: auto;
}
#vs .vs-close:hover {
color: #56d8ff;
}
/********************************************/
Expand Down
2 changes: 1 addition & 1 deletion ...docs/public/images/vueschool/vs-close.svg → ...es/docs/public/images/vueschool/close.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/docs/public/images/vueschool/vs-backpack.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 8626aac

Please sign in to comment.