Skip to content

Commit a7af382

Browse files
nicodevsnicodevs
authored
Update Vue School offer banner (vuejs#1680)
* Update Vue School offer banner * Update banner link * Remove green 'Vue 3 is official version' banner * Fix banner copy * Update Vue School localStorage key
1 parent b1adf6d commit a7af382

File tree

5 files changed

+253
-61
lines changed

5 files changed

+253
-61
lines changed

‎.vitepress/theme/components/VueSchoolBanner.vue‎

Lines changed: 58 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<a
33
v-if="isVisible"
44
id="vs"
5-
href="https://vueschool.io/free-weekend?friend=vuejs"
5+
href="https://vueschool.io/sales/price-increase-22?friend=vuejs"
66
target="_blank"
77
rel="noreferrer"
88
>
@@ -12,15 +12,17 @@
1212
</div>
1313
<div class="vs-core">
1414
<div class="vs-slogan">
15-
<div class="vs-slogan-subtitle">
16-
VUE 3 MASTERCLASS - FREE WEEKEND
17-
</div>
1815
<div class="vs-slogan-title">
19-
Register at <strong>vueschool.io/free-weekend</strong>
16+
Get up to <strong>40% off</strong> your Vue School Subscription
17+
</div>
18+
<div class="vs-slogan-subtitle">
19+
Time Limited Offer
2020
</div>
2121
</div>
2222
<div class="vs-button">
23-
Free Access
23+
<div class="vs-button-inside">
24+
GET OFFER
25+
</div>
2426
</div>
2527
</div>
2628
<div id="vs-close" class="vs-close" @click.stop.prevent="close">
@@ -35,27 +37,27 @@ import { ref, onMounted } from 'vue'
3537
const isVisible = ref(false)
3638
3739
onMounted(() => {
38-
isVisible.value = !localStorage.getItem('VS_FW_22')
40+
isVisible.value = !localStorage.getItem('VS_FW_22_OFFER')
3941
if (isVisible.value) document.body.classList.add('has-top-banner')
4042
})
4143
4244
function close () {
4345
isVisible.value = false
4446
document.body.classList.remove('has-top-banner')
45-
localStorage.setItem('VS_FW_22', 1)
47+
localStorage.setItem('VS_FW_22_OFFER', 1)
4648
}
4749
</script>
4850

4951
<style>
50-
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600&display=swap');
52+
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
5153
5254
#vs {
5355
align-items: center;
5456
background-color: #000c19;
5557
box-sizing: border-box;
5658
color: #fff;
5759
display: flex;
58-
font-family: 'Archivo', Roboto, Oxygen, Fira Sans, Helvetica Neue, sans-serif;
60+
font-family: 'Roboto', Oxygen, Fira Sans, Helvetica Neue, sans-serif;
5961
justify-content: center;
6062
position: fixed;
6163
padding: 0 10px;
@@ -65,7 +67,7 @@ function close () {
6567
z-index: 100;
6668
height: 5rem;
6769
line-height: 1;
68-
background-image: url(/images/vueschool/vs-fw-bg.svg);
70+
background-image: url(/images/vueschool/vs-fw-bg-small.svg);
6971
background-size: cover;
7072
background-repeat: no-repeat;
7173
}
@@ -80,17 +82,12 @@ function close () {
8082
top: 20px;
8183
}
8284
83-
#vs .vs-logo .logo-small {
84-
display: none;
85-
}
86-
8785
#vs .vs-logo .logo-big {
8886
display: none;
8987
}
9088
91-
#vs:hover .vs-core .vs-button {
92-
background: linear-gradient(261deg, #e61463 100%, #db5248 3%);
93-
border-color: #e61463;
89+
#vs:hover .vs-core .vs-button-inside {
90+
background: linear-gradient(257deg, #e19b09 99%, #ffca24 6%);
9491
}
9592
9693
#vs .vs-core .vs-slogan {
@@ -107,37 +104,39 @@ function close () {
107104
108105
#vs .vs-core .vs-slogan .vs-slogan-subtitle {
109106
font-size: 14px;
110-
color: #47b785;
111-
font-weight: bold;
107+
color: #cdc5dc;
108+
margin-top: 8px;
112109
}
113110
114111
#vs .vs-core .vs-slogan .vs-slogan-title {
115-
margin-top: 6px;
116112
font-size: 16px;
113+
font-weight: 800;
117114
}
118115
119116
#vs .vs-core .vs-slogan .vs-slogan-title strong {
120-
color: #48a0ff;
121-
font-weight: 400;
117+
color: #fdc722;
122118
}
123119
124120
#vs .vs-core .vs-button {
125-
color: #fff;
126-
padding: 7px 10px;
127-
font-weight: 600;
128-
white-space: nowrap;
121+
background: linear-gradient(0deg, #ffdf4c, #e29d0a);
122+
padding: 2px;
129123
margin-right: 18px;
130124
margin-left: 16px;
131-
object-fit: contain;
132125
border-radius: 30px;
133-
border-style: solid;
134-
border-width: 2px;
135-
background-image: linear-gradient(255deg, #d457d0 98%, #ed81eb 2%), linear-gradient(to bottom, #b349b0, #db61d9);
136-
text-transform: uppercase;
137-
border-color: #B349B0;
138126
display: none;
139127
}
140128
129+
#vs .vs-core .vs-button-inside {
130+
color: #000;
131+
padding: 7px 10px;
132+
font-weight: 800;
133+
font-size: 22px;
134+
white-space: nowrap;
135+
border-radius: 30px;
136+
background: linear-gradient(90deg, #FFC828, #E19C0E);
137+
text-transform: uppercase;
138+
}
139+
141140
#vs .vs-close {
142141
right: 6px;
143142
position: absolute;
@@ -158,12 +157,17 @@ function close () {
158157
}
159158
160159
@media (min-width: 680px) {
160+
#vs {
161+
background-image: url(/images/vueschool/vs-fw-bg.svg);
162+
background-position: top right -110px;
163+
}
164+
161165
#vs .vs-core .vs-slogan {
162166
margin-left: 24px;
163167
}
164168
165169
#vs .vs-core .vs-slogan .vs-slogan-subtitle {
166-
font-size: 18px;
170+
font-size: 16px;
167171
}
168172
169173
#vs .vs-core .vs-slogan .vs-slogan-title {
@@ -173,10 +177,13 @@ function close () {
173177
#vs .vs-core .vs-button {
174178
display: inline-block;
175179
margin-right: 0;
176-
padding: 8px 24px;
177180
margin-left: 22px;
178181
}
179182
183+
#vs .vs-core .vs-button-inside {
184+
padding: 8px 24px;
185+
}
186+
180187
#vs .vs-close {
181188
padding: 10px;
182189
right: 20px;
@@ -185,21 +192,33 @@ function close () {
185192
186193
@media (min-width: 768px) {
187194
#vs .vs-logo .logo-small {
195+
display: none;
196+
}
197+
198+
#vs .vs-logo .logo-big {
188199
display: inline-block;
189200
}
201+
202+
#vs .vs-core {
203+
width: 430px;
204+
}
190205
}
191206
192207
@media (min-width: 1024px) {
193-
#vs .vs-logo .logo-small {
194-
display: none;
208+
#vs {
209+
background-position: top right;
195210
}
196211
197-
#vs .vs-logo .logo-big {
198-
display: inline-block;
212+
#vs .vs-core .vs-slogan .vs-slogan-title {
213+
font-size: 24px;
199214
}
200215
201216
#vs .vs-core .vs-button {
202217
margin-left: 69px;
203218
}
219+
220+
#vs .vs-core {
221+
width: auto;
222+
}
204223
}
205224
</style>

‎.vitepress/theme/index.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import './styles/index.css'
22
import { h, App } from 'vue'
33
import { VPTheme } from '@vue/theme'
4-
import Banner from './components/Banner.vue'
54
import PreferenceSwitch from './components/PreferenceSwitch.vue'
65
import VueSchoolLink from './components/VueSchoolLink.vue'
76
import VueSchoolBanner from './components/VueSchoolBanner.vue'
@@ -18,8 +17,7 @@ export default Object.assign({}, VPTheme, {
1817
// @ts-ignore
1918
return h(VPTheme.Layout, null, {
2019
banner: () => h('div', {}, [
21-
h(VueSchoolBanner),
22-
h(Banner)
20+
h(VueSchoolBanner)
2321
]),
2422
'sidebar-top': () => h(PreferenceSwitch),
2523
'aside-mid': () => h(SponsorsAside),

0 commit comments

Comments
 (0)