web/satellite: Add new intro section to register page
- With the removal of the sign up page in Webflow, we need to add section with some product intro Change-Id: Ifa84c670a6cd93ed79e1791e07d40647c43017cd
This commit is contained in:
Malcolm Bouzi
parent
60717e356d
commit
ecf3de3c3b
@ -17,6 +17,8 @@ import BottomArrowIcon from '@/../static/images/common/lightBottomArrow.svg';
|
||||
import SelectedCheckIcon from '@/../static/images/common/selectedCheck.svg';
|
||||
import LogoIcon from '@/../static/images/dcs-logo.svg';
|
||||
import InfoIcon from '@/../static/images/info.svg';
|
||||
import RegisterGlobe from '@/../static/images/register/RegisterGlobe.svg';
|
||||
import RegisterGlobeSmall from '@/../static/images/register/RegisterGlobeSmall.svg';
|
||||
|
||||
import { AuthHttpApi } from '@/api/auth';
|
||||
import { RouteConfig } from '@/router';
|
||||
@ -38,6 +40,8 @@ import { Validator } from '@/utils/validation';
|
||||
PasswordStrength,
|
||||
AddCouponCodeInput,
|
||||
SelectInput,
|
||||
RegisterGlobe,
|
||||
RegisterGlobeSmall,
|
||||
},
|
||||
})
|
||||
export default class RegisterArea extends Vue {
|
||||
|
||||
@ -5,79 +5,70 @@
|
||||
<div class="register-area__logo-wrapper">
|
||||
<LogoIcon class="logo" @click="onLogoClick"/>
|
||||
</div>
|
||||
<div class="register-area__content-area">
|
||||
<div
|
||||
class="register-area__content-area__container"
|
||||
:class="{ 'professional-container': isProfessional }"
|
||||
v-if="!isRegistrationSuccessful"
|
||||
>
|
||||
<div class="register-area__content-area__container__title-area">
|
||||
<div class="register-area__content-area__container__title-container">
|
||||
<h1 class="register-area__content-area__container__title-area__title">Start for Free</h1>
|
||||
<p class="register-area__content-area__container__title-area__sub-title">What are you using Storj DCS for?</p>
|
||||
</div>
|
||||
<div class="register-area__content-area__expand" @click.stop="toggleDropdown">
|
||||
<span class="register-area__content-area__expand__value">{{ satelliteName }}</span>
|
||||
<BottomArrowIcon />
|
||||
<div class="register-area__content-area__expand__dropdown" v-if="isDropdownShown" v-click-outside="closeDropdown">
|
||||
<div class="register-area__content-area__expand__dropdown__item" @click.stop="closeDropdown">
|
||||
<SelectedCheckIcon />
|
||||
<span class="register-area__content-area__expand__dropdown__item__name">{{ satelliteName }}</span>
|
||||
<div
|
||||
class="register-area__container"
|
||||
:class="{'professional-container': isProfessional}"
|
||||
>
|
||||
<div class="register-area__intro-area">
|
||||
<div class="register-area__intro-area__wrapper">
|
||||
<h1 class="register-area__intro-area__title">Welcome to the decentralized cloud.</h1>
|
||||
<p class="register-area__intro-area__sub-title">Join thousands of developers building on the safer, decentralized cloud, and start uploading data in just a few minutes.</p>
|
||||
</div>
|
||||
<RegisterGlobe
|
||||
class="register-area__intro-area__globe-image"
|
||||
:class="{'professional-globe': isProfessional}"
|
||||
/>
|
||||
<RegisterGlobeSmall class="register-area__intro-area__globe-image-sm" />
|
||||
</div>
|
||||
<div class="register-area__input-area">
|
||||
<div
|
||||
class="register-area__input-area__container"
|
||||
:class="{ 'professional-container': isProfessional }"
|
||||
v-if="!isRegistrationSuccessful"
|
||||
>
|
||||
<div class="register-area__input-area__container__title-area">
|
||||
<div class="register-area__input-area__container__title-container">
|
||||
<h1 class="register-area__input-area__container__title-area__title">Get 150 GB Free</h1>
|
||||
</div>
|
||||
<div class="register-area__input-area__expand" @click.stop="toggleDropdown">
|
||||
<span class="register-area__input-area__expand__value">{{ satelliteName }}</span>
|
||||
<BottomArrowIcon />
|
||||
<div class="register-area__input-area__expand__dropdown" v-if="isDropdownShown" v-click-outside="closeDropdown">
|
||||
<div class="register-area__input-area__expand__dropdown__item" @click.stop="closeDropdown">
|
||||
<SelectedCheckIcon />
|
||||
<span class="register-area__input-area__expand__dropdown__item__name">{{ satelliteName }}</span>
|
||||
</div>
|
||||
<a v-for="sat in partneredSatellites" class="register-area__input-area__expand__dropdown__item" :href="sat.address + '/signup'">
|
||||
{{ sat.name }}
|
||||
</a>
|
||||
</div>
|
||||
<a v-for="sat in partneredSatellites" class="register-area__content-area__expand__dropdown__item" :href="sat.address + '/signup'">
|
||||
{{ sat.name }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="register-area__content-area__toggle__conatainer">
|
||||
<ul class="register-area__content-area__toggle__wrapper">
|
||||
<li
|
||||
class="register-area__content-area__toggle__personal"
|
||||
:class="{ 'active': !isProfessional }"
|
||||
@click.prevent="toggleAccountType(false)"
|
||||
>
|
||||
Personal
|
||||
</li>
|
||||
<li
|
||||
class="register-area__content-area__toggle__professional"
|
||||
:class="{ 'active': isProfessional }"
|
||||
@click.prevent="toggleAccountType(true)"
|
||||
>
|
||||
Business
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="register-area__input-wrapper first-input">
|
||||
<HeaderlessInput
|
||||
class="full-input"
|
||||
label="Full Name"
|
||||
placeholder="Enter Full Name"
|
||||
:error="fullNameError"
|
||||
@setData="setFullName"
|
||||
width="calc(100% - 2px)"
|
||||
height="46px"
|
||||
/>
|
||||
</div>
|
||||
<div class="register-area__input-wrapper">
|
||||
<HeaderlessInput
|
||||
class="full-input"
|
||||
label="Email Address"
|
||||
placeholder="example@email.com"
|
||||
:error="emailError"
|
||||
@setData="setEmail"
|
||||
width="calc(100% - 2px)"
|
||||
height="46px"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="isProfessional">
|
||||
<div class="register-area__input-wrapper">
|
||||
<div class="register-area__input-area__toggle__conatainer">
|
||||
<ul class="register-area__input-area__toggle__wrapper">
|
||||
<li
|
||||
class="register-area__input-area__toggle__personal"
|
||||
:class="{ 'active': !isProfessional }"
|
||||
@click.prevent="toggleAccountType(false)"
|
||||
>
|
||||
Personal
|
||||
</li>
|
||||
<li
|
||||
class="register-area__input-area__toggle__professional"
|
||||
:class="{ 'active': isProfessional }"
|
||||
@click.prevent="toggleAccountType(true)"
|
||||
>
|
||||
Business
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="register-area__input-wrapper first-input">
|
||||
<HeaderlessInput
|
||||
class="full-input"
|
||||
label="Company Name"
|
||||
placeholder="Acme Corp."
|
||||
:error="companyNameError"
|
||||
@setData="setCompanyName"
|
||||
label="Full Name"
|
||||
placeholder="Enter Full Name"
|
||||
:error="fullNameError"
|
||||
@setData="setFullName"
|
||||
width="calc(100% - 2px)"
|
||||
height="46px"
|
||||
/>
|
||||
@ -85,92 +76,113 @@
|
||||
<div class="register-area__input-wrapper">
|
||||
<HeaderlessInput
|
||||
class="full-input"
|
||||
label="Position"
|
||||
placeholder="Position Title"
|
||||
:error="positionError"
|
||||
@setData="setPosition"
|
||||
label="Email Address"
|
||||
placeholder="example@email.com"
|
||||
:error="emailError"
|
||||
@setData="setEmail"
|
||||
width="calc(100% - 2px)"
|
||||
height="46px"
|
||||
/>
|
||||
</div>
|
||||
<div class="register-area__input-wrapper">
|
||||
<SelectInput
|
||||
class="full-input"
|
||||
label="Employees"
|
||||
@setData="setEmployeeCount"
|
||||
width="calc(100% - 2px)"
|
||||
height="46px"
|
||||
:optionsList="employeeCountOptions"
|
||||
/>
|
||||
<div v-if="isProfessional">
|
||||
<div class="register-area__input-wrapper">
|
||||
<HeaderlessInput
|
||||
class="full-input"
|
||||
label="Company Name"
|
||||
placeholder="Acme Corp."
|
||||
:error="companyNameError"
|
||||
@setData="setCompanyName"
|
||||
width="calc(100% - 2px)"
|
||||
height="46px"
|
||||
/>
|
||||
</div>
|
||||
<div class="register-area__input-wrapper">
|
||||
<HeaderlessInput
|
||||
class="full-input"
|
||||
label="Position"
|
||||
placeholder="Position Title"
|
||||
:error="positionError"
|
||||
@setData="setPosition"
|
||||
width="calc(100% - 2px)"
|
||||
height="46px"
|
||||
/>
|
||||
</div>
|
||||
<div class="register-area__input-wrapper">
|
||||
<SelectInput
|
||||
class="full-input"
|
||||
label="Employees"
|
||||
@setData="setEmployeeCount"
|
||||
width="calc(100% - 2px)"
|
||||
height="46px"
|
||||
:optionsList="employeeCountOptions"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="register-input">
|
||||
<div class="register-area__input-wrapper">
|
||||
<HeaderlessInput
|
||||
class="full-input"
|
||||
label="Password"
|
||||
placeholder="Enter Password"
|
||||
:error="passwordError"
|
||||
@setData="setPassword"
|
||||
width="calc(100% - 2px)"
|
||||
height="46px"
|
||||
is-password="true"
|
||||
@showPasswordStrength="showPasswordStrength"
|
||||
@hidePasswordStrength="hidePasswordStrength"
|
||||
/>
|
||||
<PasswordStrength
|
||||
:password-string="password"
|
||||
:is-shown="isPasswordStrengthShown"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="register-input">
|
||||
<div class="register-area__input-wrapper">
|
||||
<HeaderlessInput
|
||||
class="full-input"
|
||||
label="Password"
|
||||
placeholder="Enter Password"
|
||||
:error="passwordError"
|
||||
@setData="setPassword"
|
||||
label="Retype Password"
|
||||
placeholder="Retype Password"
|
||||
:error="repeatedPasswordError"
|
||||
@setData="setRepeatedPassword"
|
||||
width="calc(100% - 2px)"
|
||||
height="46px"
|
||||
is-password="true"
|
||||
@showPasswordStrength="showPasswordStrength"
|
||||
@hidePasswordStrength="hidePasswordStrength"
|
||||
/>
|
||||
<PasswordStrength
|
||||
:password-string="password"
|
||||
:is-shown="isPasswordStrengthShown"
|
||||
/>
|
||||
</div>
|
||||
<AddCouponCodeInput v-if="couponCodeUIEnabled" />
|
||||
<div v-if="isProfessional" class="register-area__input-area__container__checkbox-area">
|
||||
<label class="container">
|
||||
<input id="sales" type="checkbox" v-model="haveSalesContact">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
<label class="register-area__input-area__container__checkbox-area__msg-box" for="sales">
|
||||
<p class="register-area__input-area__container__checkbox-area__msg-box__msg">
|
||||
Please have the Sales Team contact me
|
||||
</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="register-area__input-area__container__checkbox-area">
|
||||
<label class="container">
|
||||
<input id="terms" type="checkbox" v-model="isTermsAccepted">
|
||||
<span class="checkmark" :class="{'error': isTermsAcceptedError}"></span>
|
||||
</label>
|
||||
<label class="register-area__input-area__container__checkbox-area__msg-box" for="terms">
|
||||
<p class="register-area__input-area__container__checkbox-area__msg-box__msg">
|
||||
I agree to the
|
||||
<a class="register-area__input-area__container__checkbox-area__msg-box__msg__link" href="https://storj.io/terms-of-service/" target="_blank" rel="noopener">Terms of Service</a>
|
||||
and
|
||||
<a class="register-area__input-area__container__checkbox-area__msg-box__msg__link" href="https://storj.io/privacy-policy/" target="_blank" rel="noopener">Privacy Policy</a>
|
||||
</p>
|
||||
</label>
|
||||
</div>
|
||||
<p class="register-area__input-area__container__button" @click.prevent="onCreateClick">Sign Up</p>
|
||||
</div>
|
||||
<div class="register-area__input-wrapper">
|
||||
<HeaderlessInput
|
||||
class="full-input"
|
||||
label="Retype Password"
|
||||
placeholder="Retype Password"
|
||||
:error="repeatedPasswordError"
|
||||
@setData="setRepeatedPassword"
|
||||
width="calc(100% - 2px)"
|
||||
height="46px"
|
||||
is-password="true"
|
||||
/>
|
||||
</div>
|
||||
<AddCouponCodeInput v-if="couponCodeUIEnabled" />
|
||||
<div v-if="isProfessional" class="register-area__content-area__container__checkbox-area">
|
||||
<label class="container">
|
||||
<input type="checkbox" v-model="haveSalesContact">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
<label class="register-area__content-area__container__checkbox-area__msg-box" for="terms">
|
||||
<p class="register-area__content-area__container__checkbox-area__msg-box__msg">
|
||||
Please have the Sales Team contact me
|
||||
</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="register-area__content-area__container__checkbox-area">
|
||||
<label class="container">
|
||||
<input id="terms" type="checkbox" v-model="isTermsAccepted">
|
||||
<span class="checkmark" :class="{'error': isTermsAcceptedError}"></span>
|
||||
</label>
|
||||
<label class="register-area__content-area__container__checkbox-area__msg-box" for="terms">
|
||||
<p class="register-area__content-area__container__checkbox-area__msg-box__msg">
|
||||
I agree to the
|
||||
<a class="register-area__content-area__container__checkbox-area__msg-box__msg__link" href="https://storj.io/terms-of-service/" target="_blank" rel="noopener">Terms of Service</a>
|
||||
and
|
||||
<a class="register-area__content-area__container__checkbox-area__msg-box__msg__link" href="https://storj.io/privacy-policy/" target="_blank" rel="noopener">Privacy Policy</a>
|
||||
</p>
|
||||
</label>
|
||||
</div>
|
||||
<p class="register-area__content-area__container__button" @click.prevent="onCreateClick">Sign Up</p>
|
||||
</div>
|
||||
|
||||
<RegistrationSuccess v-if="isRegistrationSuccessful"/>
|
||||
|
||||
<div class="register-area__content-area__login-container">
|
||||
<router-link :to="loginPath" class="register-area__content-area__login-container__link">
|
||||
Already have an account? Login.
|
||||
</router-link>
|
||||
<RegistrationSuccess v-if="isRegistrationSuccessful"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="register-area__input-area__login-container">
|
||||
Already have an account? <router-link :to="loginPath" class="register-area__input-area__login-container__link">Login.</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -38,19 +38,74 @@ h1 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
&__content-area {
|
||||
background-color: #f5f6fa;
|
||||
padding: 55px 20px 0 20px;
|
||||
&__container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
min-height: 655px;
|
||||
width: 75%;
|
||||
margin-top: 50px;
|
||||
padding: 70px 90px 40px 90px;
|
||||
overflow: hidden;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
&__container.professional-container {
|
||||
min-height: 980px;
|
||||
}
|
||||
|
||||
&__intro-area {
|
||||
|
||||
&__wrapper {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 48px;
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
line-height: 59px;
|
||||
letter-spacing: 0;
|
||||
text-align: left;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
&__sub-title {
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 30px;
|
||||
letter-spacing: -0.1007407009601593px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&__globe-image {
|
||||
position: relative;
|
||||
top: 140px;
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
&__globe-image.professional-globe {
|
||||
top: 110px;
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
&__globe-image-sm {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__input-area {
|
||||
padding: 0 0 0 20px;
|
||||
margin: 0 auto;
|
||||
width: 70%;
|
||||
|
||||
&__expand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
bottom: 10px;
|
||||
|
||||
&__value {
|
||||
font-family: 'font_normal', sans-serif;
|
||||
@ -64,7 +119,7 @@ h1 {
|
||||
&__dropdown {
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
z-index: 1000;
|
||||
border: 1px solid #c5cbdb;
|
||||
@ -142,12 +197,6 @@ h1 {
|
||||
}
|
||||
|
||||
&__container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 60px 80px;
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
min-height: 655px;
|
||||
|
||||
&__title-area {
|
||||
display: flex;
|
||||
@ -184,15 +233,13 @@ h1 {
|
||||
|
||||
&__msg {
|
||||
position: relative;
|
||||
top: 4px;
|
||||
top: 2px;
|
||||
|
||||
&__link {
|
||||
margin: 0 4px;
|
||||
font-family: 'font_bold', sans-serif;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
color: #000;
|
||||
text-decoration: underline !important;
|
||||
|
||||
&:visited {
|
||||
color: inherit;
|
||||
@ -255,15 +302,16 @@ h1 {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 50px;
|
||||
padding-bottom: 20px;
|
||||
padding-bottom: 50px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
|
||||
&__link {
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-family: 'font_bold', sans-serif;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
color: #376fff;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -350,17 +398,174 @@ h1 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1429px) {
|
||||
|
||||
.register-area {
|
||||
|
||||
&__intro-area {
|
||||
|
||||
&__width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__globe-image {
|
||||
top: 110px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
|
||||
.register-area {
|
||||
|
||||
&__container.professional-container {
|
||||
min-height: 985px;
|
||||
}
|
||||
|
||||
&__intro-area {
|
||||
|
||||
&__width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__globe-image {
|
||||
top: 110px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&__globe-image.professional-globe {
|
||||
left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1060px) {
|
||||
|
||||
.register-area {
|
||||
|
||||
&__container {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
&__intro-area {
|
||||
|
||||
&__globe-image {
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 110px;
|
||||
}
|
||||
|
||||
&__globe-image.professional-globe {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
|
||||
.register-area {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
|
||||
&__container {
|
||||
display: inline;
|
||||
text-align: center;
|
||||
min-height: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
&__container.professional-container {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
&__intro-area {
|
||||
margin: 0 auto 130px auto;
|
||||
|
||||
&__wrapper {
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&__globe-image {
|
||||
top: 50px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&__globe-image.professional-globe {
|
||||
left: 0;
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
&__title,
|
||||
&__sub-title {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__input-area {
|
||||
display: block;
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
|
||||
.register-area {
|
||||
|
||||
&__content-area {
|
||||
&__container {
|
||||
width: 70%;
|
||||
padding: 80px 40px 40px;
|
||||
}
|
||||
|
||||
&__intro-area {
|
||||
margin: 0 auto;
|
||||
|
||||
&__title {
|
||||
font-size: 36px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
&__sub-title {
|
||||
font-size: 16px;
|
||||
line-height: 23px;
|
||||
}
|
||||
|
||||
&__globe-image {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__globe-image-sm {
|
||||
display: block;
|
||||
position: relative;
|
||||
top: 40px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__input-area {
|
||||
width: 100%;
|
||||
padding: 55px 0 0 0;
|
||||
|
||||
&__container {
|
||||
padding: 40px;
|
||||
width: calc(100% - 80px);
|
||||
|
||||
&__checkbox-area {
|
||||
|
||||
&__msg-box {
|
||||
|
||||
&__msg {
|
||||
position: relative;
|
||||
top: 7px;
|
||||
text-align: left;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__toggle {
|
||||
@ -385,31 +590,73 @@ h1 {
|
||||
|
||||
.register-area {
|
||||
|
||||
&__logo-wrapper {
|
||||
margin-top: 30px;
|
||||
&__container {
|
||||
width: 90%;
|
||||
padding: 60px 10px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 414px) {
|
||||
&__intro-area {
|
||||
margin: 0 auto 30px auto;
|
||||
|
||||
.register-area {
|
||||
&__title {
|
||||
font-size: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
&__logo-wrapper {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
&__content-area {
|
||||
&__input-area {
|
||||
padding: 30px 0 0 0;
|
||||
|
||||
&__container {
|
||||
padding: 40px 20px;
|
||||
width: calc(100% - 40px);
|
||||
|
||||
&__title-area {
|
||||
|
||||
&__title {
|
||||
font-size: 20px;
|
||||
line-height: 34px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__login-container {
|
||||
margin-top: 25px;
|
||||
margin-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 320px) {
|
||||
|
||||
.register-area {
|
||||
|
||||
&__container {
|
||||
|
||||
&__checkbox-area {
|
||||
|
||||
&__msg-box {
|
||||
|
||||
&__msg {
|
||||
top: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__intro-area {
|
||||
|
||||
&__title {
|
||||
font-size: 29px;
|
||||
}
|
||||
}
|
||||
|
||||
&__login-container {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
37
web/satellite/static/images/register/RegisterGlobe.svg
Normal file
37
web/satellite/static/images/register/RegisterGlobe.svg
Normal file
@ -0,0 +1,37 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="380px" height="380px" viewBox="0 0 1293 1226" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 64 (93537) - https://sketch.com -->
|
||||
<title>storj-illustration-distribution-cta</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<path d="M1007.91294,172.930521 C777.338913,-57.6435071 403.50455,-57.6435071 172.930521,172.930521 C-57.6435071,403.50455 -57.6435071,777.338913 172.930521,1007.91294 C403.50455,1238.48697 777.338913,1238.48697 1007.91294,1007.91294 C1238.48697,777.338913 1238.48697,403.50455 1007.91294,172.930521 Z" id="path-1"></path>
|
||||
</defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="storj-illustration-distribution-cta">
|
||||
<g id="Group-13" transform="translate(31.609576, 45.156538)">
|
||||
<mask id="mask-2" fill="white">
|
||||
<use xlink:href="#path-1"></use>
|
||||
</mask>
|
||||
<use id="Oval" fill="#0149FF" xlink:href="#path-1"></use>
|
||||
<path d="M406.40874,774.43442 L254.162171,926.681437 C214.371668,924.143979 182.883978,891.067302 182.883978,850.63628 C182.883978,808.551267 217.000622,774.434622 259.085635,774.434622 L406.40874,774.43442 Z M483.988029,203.20442 C533.417515,203.20442 573.488029,243.274935 573.488029,292.70442 L573.488029,315.779926 C573.488029,365.209411 533.417515,405.279926 483.988029,405.279926 L421.08374,405.27942 L421.084715,517.855433 C421.084715,567.284918 381.0142,607.355433 331.584715,607.355433 L245.290055,607.355433 C195.86057,607.355433 155.790055,567.284918 155.790055,517.855433 L155.78974,405.27942 L92.8867403,405.279926 C71.5595899,405.279926 51.974734,397.820277 36.5990177,385.367823 C60.7125271,320.115732 96.7404171,258.270279 144.683176,203.196221 L483.988029,203.20442 Z" id="Combined-Shape" fill="#00E567" mask="url(#mask-2)"></path>
|
||||
<path d="M1007.91294,172.930521 L1014.76099,179.890434 C1238.46391,410.966911 1236.18123,779.644653 1007.91294,1007.91294 C777.338913,1238.48697 403.50455,1238.48697 172.930521,1007.91294 L172.930521,1007.91294 L1007.91294,172.930521 Z" id="Combined-Shape" fill="#00127F" mask="url(#mask-2)"></path>
|
||||
<path d="M1007.91294,1007.91294 C986.479736,1029.34615 963.808648,1048.78701 940.129815,1066.23553 L940.121737,1066.22159 C913.291078,1050.76713 895.228361,1021.79912 895.228361,988.612339 L895.227978,876.036326 L832.325046,876.036832 C782.895561,876.036832 742.825046,835.966318 742.825046,786.536832 L742.825046,763.461326 C742.825046,714.031841 782.895561,673.961326 832.325046,673.961326 L1174.93823,673.963016 C1157.57096,796.145673 1101.89586,913.930022 1007.91294,1007.91294 Z M514.220074,774.434622 C556.305087,774.434622 590.421731,808.551267 590.421731,850.63628 C590.421731,892.721293 556.305087,926.837937 514.220074,926.837937 L259.085635,926.837937 C257.431691,926.837937 255.790054,926.785244 254.162311,926.681445 L406.409241,774.434326 L514.220074,774.434622 Z" id="Combined-Shape" fill="#0149FF" mask="url(#mask-2)"></path>
|
||||
<g id="Group-14" mask="url(#mask-2)">
|
||||
<g transform="translate(181.930521, 673.930521)"></g>
|
||||
</g>
|
||||
</g>
|
||||
<rect id="Rectangle" fill="#FFC600" x="774.434622" y="0" width="197.559853" height="197.559853"></rect>
|
||||
<rect id="Rectangle-Copy-32" fill="#FFC600" x="165.950276" y="1025.05341" width="159.176796" height="159.176796"></rect>
|
||||
<rect id="Rectangle-Copy-30" fill="#FFC600" x="565.585635" y="381.572744" width="114.020258" height="114.020258"></rect>
|
||||
<rect id="Rectangle-Copy-31" fill="#00127F" x="130.953959" y="579.132597" width="114.020258" height="114.020258"></rect>
|
||||
<rect id="Rectangle-Copy-29" fill="#FF458B" x="31.6095764" y="143.372007" width="197.559853" height="197.559853"></rect>
|
||||
<rect id="Rectangle-Copy-35" fill="#FF458B" x="531.718232" y="914.41989" width="114.020258" height="114.020258"></rect>
|
||||
<rect id="Rectangle-Copy-33" fill="#00E567" x="873.779006" y="579.132597" width="197.559853" height="197.559853"></rect>
|
||||
<rect id="Rectangle-Copy-24" fill="#C8D3DE" x="543.007366" y="0" width="114.020258" height="114.020258"></rect>
|
||||
<rect id="Rectangle-Copy-37" fill="#C8D3DE" x="0" y="752.985267" width="114.020258" height="114.020258"></rect>
|
||||
<rect id="Rectangle-Copy-38" fill="#0149FF" x="873.779006" y="382.701657" width="114.020258" height="114.020258"></rect>
|
||||
<rect id="Rectangle-Copy-34" fill="#C8D3DE" x="794.755064" y="1066.8232" width="159.176796" height="159.176796"></rect>
|
||||
<rect id="Rectangle-Copy-36" fill="#C8D3DE" x="1133.4291" y="439.14733" width="159.176796" height="159.176796"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.8 KiB |
37
web/satellite/static/images/register/RegisterGlobeSmall.svg
Normal file
37
web/satellite/static/images/register/RegisterGlobeSmall.svg
Normal file
@ -0,0 +1,37 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="200px" height="200px" viewBox="0 0 1293 1226" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 64 (93537) - https://sketch.com -->
|
||||
<title>storj-illustration-distribution-cta</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<path d="M1007.91294,172.930521 C777.338913,-57.6435071 403.50455,-57.6435071 172.930521,172.930521 C-57.6435071,403.50455 -57.6435071,777.338913 172.930521,1007.91294 C403.50455,1238.48697 777.338913,1238.48697 1007.91294,1007.91294 C1238.48697,777.338913 1238.48697,403.50455 1007.91294,172.930521 Z" id="path-1"></path>
|
||||
</defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="storj-illustration-distribution-cta">
|
||||
<g id="Group-13" transform="translate(31.609576, 45.156538)">
|
||||
<mask id="mask-2" fill="white">
|
||||
<use xlink:href="#path-1"></use>
|
||||
</mask>
|
||||
<use id="Oval" fill="#0149FF" xlink:href="#path-1"></use>
|
||||
<path d="M406.40874,774.43442 L254.162171,926.681437 C214.371668,924.143979 182.883978,891.067302 182.883978,850.63628 C182.883978,808.551267 217.000622,774.434622 259.085635,774.434622 L406.40874,774.43442 Z M483.988029,203.20442 C533.417515,203.20442 573.488029,243.274935 573.488029,292.70442 L573.488029,315.779926 C573.488029,365.209411 533.417515,405.279926 483.988029,405.279926 L421.08374,405.27942 L421.084715,517.855433 C421.084715,567.284918 381.0142,607.355433 331.584715,607.355433 L245.290055,607.355433 C195.86057,607.355433 155.790055,567.284918 155.790055,517.855433 L155.78974,405.27942 L92.8867403,405.279926 C71.5595899,405.279926 51.974734,397.820277 36.5990177,385.367823 C60.7125271,320.115732 96.7404171,258.270279 144.683176,203.196221 L483.988029,203.20442 Z" id="Combined-Shape" fill="#00E567" mask="url(#mask-2)"></path>
|
||||
<path d="M1007.91294,172.930521 L1014.76099,179.890434 C1238.46391,410.966911 1236.18123,779.644653 1007.91294,1007.91294 C777.338913,1238.48697 403.50455,1238.48697 172.930521,1007.91294 L172.930521,1007.91294 L1007.91294,172.930521 Z" id="Combined-Shape" fill="#00127F" mask="url(#mask-2)"></path>
|
||||
<path d="M1007.91294,1007.91294 C986.479736,1029.34615 963.808648,1048.78701 940.129815,1066.23553 L940.121737,1066.22159 C913.291078,1050.76713 895.228361,1021.79912 895.228361,988.612339 L895.227978,876.036326 L832.325046,876.036832 C782.895561,876.036832 742.825046,835.966318 742.825046,786.536832 L742.825046,763.461326 C742.825046,714.031841 782.895561,673.961326 832.325046,673.961326 L1174.93823,673.963016 C1157.57096,796.145673 1101.89586,913.930022 1007.91294,1007.91294 Z M514.220074,774.434622 C556.305087,774.434622 590.421731,808.551267 590.421731,850.63628 C590.421731,892.721293 556.305087,926.837937 514.220074,926.837937 L259.085635,926.837937 C257.431691,926.837937 255.790054,926.785244 254.162311,926.681445 L406.409241,774.434326 L514.220074,774.434622 Z" id="Combined-Shape" fill="#0149FF" mask="url(#mask-2)"></path>
|
||||
<g id="Group-14" mask="url(#mask-2)">
|
||||
<g transform="translate(181.930521, 673.930521)"></g>
|
||||
</g>
|
||||
</g>
|
||||
<rect id="Rectangle" fill="#FFC600" x="774.434622" y="0" width="197.559853" height="197.559853"></rect>
|
||||
<rect id="Rectangle-Copy-32" fill="#FFC600" x="165.950276" y="1025.05341" width="159.176796" height="159.176796"></rect>
|
||||
<rect id="Rectangle-Copy-30" fill="#FFC600" x="565.585635" y="381.572744" width="114.020258" height="114.020258"></rect>
|
||||
<rect id="Rectangle-Copy-31" fill="#00127F" x="130.953959" y="579.132597" width="114.020258" height="114.020258"></rect>
|
||||
<rect id="Rectangle-Copy-29" fill="#FF458B" x="31.6095764" y="143.372007" width="197.559853" height="197.559853"></rect>
|
||||
<rect id="Rectangle-Copy-35" fill="#FF458B" x="531.718232" y="914.41989" width="114.020258" height="114.020258"></rect>
|
||||
<rect id="Rectangle-Copy-33" fill="#00E567" x="873.779006" y="579.132597" width="197.559853" height="197.559853"></rect>
|
||||
<rect id="Rectangle-Copy-24" fill="#C8D3DE" x="543.007366" y="0" width="114.020258" height="114.020258"></rect>
|
||||
<rect id="Rectangle-Copy-37" fill="#C8D3DE" x="0" y="752.985267" width="114.020258" height="114.020258"></rect>
|
||||
<rect id="Rectangle-Copy-38" fill="#0149FF" x="873.779006" y="382.701657" width="114.020258" height="114.020258"></rect>
|
||||
<rect id="Rectangle-Copy-34" fill="#C8D3DE" x="794.755064" y="1066.8232" width="159.176796" height="159.176796"></rect>
|
||||
<rect id="Rectangle-Copy-36" fill="#C8D3DE" x="1133.4291" y="439.14733" width="159.176796" height="159.176796"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.8 KiB |
Loading…
Reference in New Issue
Block a user