Skip to content

Commit 0668a3e

Browse files
SabreCatSabreCat
committed
WIP(privacy): landing page and banner revisions
1 parent 5994700 commit 0668a3e

File tree

2 files changed

+108
-104
lines changed

2 files changed

+108
-104
lines changed

‎website/client/src/components/header/banners/privacy.vue

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -50,20 +50,17 @@
5050
line-height: 1.714;
5151
}
5252
53-
@media only screen and (max-width: 992px) {
53+
@media only screen and (max-width: 1300px) {
5454
.banner {
5555
flex-direction: column !important;
5656
57-
.navigation {
58-
margin-left: 0px !important;
59-
}
60-
6157
button {
62-
width: calc(100vw - 48px);
58+
width: 100%;
6359
}
6460
65-
.static button {
66-
width: calc(100vw - 96px);
61+
.navigation {
62+
width: 100%;
63+
margin-left: 0px !important;
6764
}
6865
6966
p {

‎website/client/src/components/static/home.vue

Lines changed: 103 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -9,112 +9,110 @@
99
<a href="https://www.enable-javascript.com/" target="_blank">{{ $t('jsDisabledLink') }}</a>
1010
</noscript>
1111
<privacy-banner
12-
class="privacy-banner mx-4"
12+
class="privacy-banner"
1313
/>
1414
<div
1515
id="intro-signup"
1616
class="purple-1"
1717
>
18-
<div class="container">
19-
<div class="row">
20-
<div class="col-12 col-md-6 col-lg-6">
21-
<img
22-
src="~@/assets/images/home/[email protected]"
23-
width="357px"
18+
<div class="d-flex justify-content-center">
19+
<div class="w-33 mr-5 mt-5">
20+
<img
21+
src="~@/assets/images/home/[email protected]"
22+
width="357px"
23+
>
24+
<h1>{{ $t('motivateYourself') }}</h1>
25+
<p class="section-main">
26+
{{ $t('timeToGetThingsDone', {userCountInMillions}) }}
27+
</p>
28+
</div>
29+
<div class="w-33 ml-5">
30+
<h3 class="text-center">
31+
{{ $t('singUpForFree') }}
32+
</h3>
33+
<form
34+
class="form pb-0"
35+
@submit.prevent.stop="register()"
36+
>
37+
<input
38+
v-model="email"
39+
class="form-control"
40+
type="email"
41+
:placeholder="$t('email')"
42+
:class="{'input-invalid': emailInvalid, 'input-valid': emailValid}"
2443
>
25-
<h1>{{ $t('motivateYourself') }}</h1>
26-
<p class="section-main">
27-
{{ $t('timeToGetThingsDone', {userCountInMillions}) }}
28-
</p>
29-
</div>
30-
<div class="col-12 col-md-6 col-lg-6">
31-
<h3 class="text-center">
32-
{{ $t('singUpForFree') }}
33-
</h3>
34-
<form
35-
class="form pb-0"
36-
@submit.prevent.stop="register()"
44+
<input
45+
v-model="password"
46+
class="form-control input-with-error"
47+
type="password"
48+
:placeholder="$t('password')"
49+
:class="{
50+
'input-valid': passwordValid,
51+
'input-invalid': passwordInvalid,
52+
}"
3753
>
38-
<input
39-
v-model="email"
40-
class="form-control"
41-
type="email"
42-
:placeholder="$t('email')"
43-
:class="{'input-invalid': emailInvalid, 'input-valid': emailValid}"
44-
>
45-
<input
46-
v-model="password"
47-
class="form-control input-with-error"
48-
type="password"
49-
:placeholder="$t('password')"
50-
:class="{
51-
'input-valid': passwordValid,
52-
'input-invalid': passwordInvalid,
53-
}"
54-
>
55-
<div
56-
v-if="passwordInvalid"
57-
class="input-error"
58-
>
59-
{{ $t('minPasswordLength') }}
60-
</div>
61-
<input
62-
v-model="passwordConfirm"
63-
class="form-control input-with-error"
64-
type="password"
65-
:placeholder="$t('confirmPassword')"
66-
:class="{
67-
'input-invalid': passwordConfirmInvalid,
68-
'input-valid': passwordConfirmValid}"
69-
>
70-
<div
71-
v-if="passwordConfirmInvalid"
72-
class="input-error"
73-
>
74-
{{ $t('passwordConfirmationMatch') }}
75-
</div>
76-
<button
77-
class="btn btn-block btn-info sign-up"
78-
:disabled="signupFormInvalid"
79-
type="submit"
80-
>
81-
{{ $t('continue') }}
82-
</button>
83-
</form>
84-
<div class="strike">
85-
<span>{{ $t('or') }}</span>
54+
<div
55+
v-if="passwordInvalid"
56+
class="input-error"
57+
>
58+
{{ $t('minPasswordLength') }}
8659
</div>
87-
<div class="text-center">
88-
<button
89-
class="social-button"
90-
@click="socialAuth('google')"
91-
>
92-
<div
93-
class="svg-icon social-icon"
94-
v-html="icons.googleIcon"
95-
></div>
96-
<span>{{ $t('signUpWithSocial', {social: 'Google'}) }}</span>
97-
</button>
98-
<button
99-
class="social-button"
100-
@click="socialAuth('apple')"
101-
>
102-
<div
103-
class="svg svg-icon social-icon apple-icon color"
104-
v-html="icons.appleIcon"
105-
></div>
106-
<span>{{ $t('signUpWithSocial', {social: 'Apple'}) }}</span>
107-
</button>
60+
<input
61+
v-model="passwordConfirm"
62+
class="form-control input-with-error"
63+
type="password"
64+
:placeholder="$t('confirmPassword')"
65+
:class="{
66+
'input-invalid': passwordConfirmInvalid,
67+
'input-valid': passwordConfirmValid}"
68+
>
69+
<div
70+
v-if="passwordConfirmInvalid"
71+
class="input-error"
72+
>
73+
{{ $t('passwordConfirmationMatch') }}
10874
</div>
75+
<button
76+
class="btn btn-block btn-info sign-up"
77+
:disabled="signupFormInvalid"
78+
type="submit"
79+
>
80+
{{ $t('continue') }}
81+
</button>
82+
</form>
83+
<div class="strike">
84+
<span>{{ $t('or') }}</span>
10985
</div>
110-
<div class="col-12">
111-
<div
112-
class="spacer svg-icon"
113-
v-html="icons.spacer"
114-
></div>
86+
<div class="text-center">
87+
<button
88+
class="social-button"
89+
@click="socialAuth('google')"
90+
>
91+
<div
92+
class="svg-icon social-icon"
93+
v-html="icons.googleIcon"
94+
></div>
95+
<span>{{ $t('signUpWithSocial', {social: 'Google'}) }}</span>
96+
</button>
97+
<button
98+
class="social-button"
99+
@click="socialAuth('apple')"
100+
>
101+
<div
102+
class="svg svg-icon social-icon apple-icon color"
103+
v-html="icons.appleIcon"
104+
></div>
105+
<span>{{ $t('signUpWithSocial', {social: 'Apple'}) }}</span>
106+
</button>
115107
</div>
116108
</div>
117109
</div>
110+
<div class="col-12">
111+
<div
112+
class="spacer svg-icon"
113+
v-html="icons.spacer"
114+
></div>
115+
</div>
118116
</div>
119117
<div
120118
id="gamify-life"
@@ -348,6 +346,10 @@
348346
349347
@import url('https://fonts.googleapis.com/css?family=Varela+Round');
350348
349+
.w-33 {
350+
width: 33%;
351+
}
352+
351353
#front {
352354
.container-fluid {
353355
margin: 0;
@@ -419,9 +421,13 @@
419421
background-color: $white;
420422
z-index: 1;
421423
box-shadow: 0px 3px 6px 0px rgba(26, 24, 29, 0.16), 0px 3px 6px 0px rgba(26, 24, 29, 0.24);
424+
width: calc(66vw + 96px);
422425
423426
@media only screen and (max-width: 992px) {
424-
width: calc(100vw - 48px);
427+
margin: auto 12.5%;
428+
}
429+
@media only screen and (min-width: 992px) {
430+
margin: auto 14.5%;
425431
}
426432
}
427433
}
@@ -430,8 +436,9 @@
430436
background-image: url('~@/assets/svg/for-css/confetti.svg');
431437
432438
img {
433-
margin: 0 auto;
434-
display: block;
439+
@media only screen and (min-width: 992px) {
440+
margin-left: 15%;
441+
}
435442
}
436443
437444
h1 {

0 commit comments

Comments
 (0)