chore: delete svelte code
This commit is contained in:
parent
e55137e0cb
commit
3df3d88c2f
GPG Key ID:
C997C339BE476FF2
File diff suppressed because it is too large
Load Diff
|
|
@ -1,270 +0,0 @@
|
|||
<script>
|
||||
import "../../styles/global.scss";
|
||||
import lumeLogo from "../../assets/lume-logo.png";
|
||||
|
||||
let started = false;
|
||||
let step = 1;
|
||||
|
||||
const start = () => {
|
||||
started = true;
|
||||
step = 2;
|
||||
};
|
||||
|
||||
const prev = () => {
|
||||
step--;
|
||||
};
|
||||
|
||||
const next = () => {
|
||||
step++;
|
||||
};
|
||||
|
||||
const redirect = () => {
|
||||
window.location.href = "/account.html";
|
||||
};
|
||||
</script>
|
||||
|
||||
<header>
|
||||
<img src={lumeLogo} alt="Lume" />
|
||||
</header>
|
||||
<main
|
||||
class:started
|
||||
class:step-2={step === 2}
|
||||
class:step-3={step === 3}
|
||||
class:step-4={step === 4}>
|
||||
<div class="art art-1" />
|
||||
<div class="art art-2" />
|
||||
<div class="art art-3" />
|
||||
<div class="art art-4" />
|
||||
<div class="content">
|
||||
<div>
|
||||
<div class="page content-1">
|
||||
<h1>Thank you for supporting an open web.</h1>
|
||||
<p>
|
||||
We are an independent, pure organization. We have decided not to take
|
||||
money from venture capitalists. Nor do we have a large treasury
|
||||
funding our work.
|
||||
</p>
|
||||
<div class="btn-wrapper">
|
||||
<button class="btn-main" on:click={() => start()}>Begin</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page content-2">
|
||||
<h1>Gateway for easy access to the open web.</h1>
|
||||
<p>
|
||||
Easy Access to Web3. With native Handshake (HNS) and Ethereum (ENS)
|
||||
support, you can forget eth.link and hns.is. This is your gateway.
|
||||
</p>
|
||||
<div class="btn-wrapper">
|
||||
<button class="btn-main btn-black" on:click={() => redirect()}
|
||||
>Skip</button>
|
||||
<button class="btn-main" on:click={() => next()}>Next</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page content-3">
|
||||
<h1>Universal storage drive slide.</h1>
|
||||
<p>
|
||||
Stop worrying about being vendor-locked. Remain flexible and reduce
|
||||
your storage costs by 50% or more. Lume is affordable storage
|
||||
on-demand.
|
||||
</p>
|
||||
<div class="btn-wrapper">
|
||||
<button class="btn-main btn-black" on:click={() => prev()}
|
||||
>Back</button>
|
||||
<button class="btn-main" on:click={() => next()}>Next</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page content-4">
|
||||
<h1>Create decentralized websites.</h1>
|
||||
<p>
|
||||
Stop worrying about being vendor-locked. Remain flexible and reduce
|
||||
your storage costs by 50% or more. Lume is affordable storage
|
||||
on-demand. Stop worrying about being vendor-locked.
|
||||
</p>
|
||||
<div class="btn-wrapper">
|
||||
<button class="btn-main btn-black" on:click={() => prev()}
|
||||
>Back</button>
|
||||
<button class="btn-main btn-green" on:click={() => redirect()}
|
||||
>Get started</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grant-info">
|
||||
Lume is a 503c Grant recepient, <a href="https://lumeweb.com"
|
||||
>learn more</a> about the work we’re doing to provide accessible access to
|
||||
the open web for everyone.
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../styles/mixins";
|
||||
@import "../../styles/vars";
|
||||
|
||||
main {
|
||||
position: relative;
|
||||
background: #080808;
|
||||
}
|
||||
|
||||
.art,
|
||||
.content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.art-1 {
|
||||
left: 0;
|
||||
background-image: url("../../assets/onboarding-1.jpg");
|
||||
background-position: 50%;
|
||||
background-size: cover;
|
||||
border-right: 1px solid #363636;
|
||||
}
|
||||
|
||||
.art-2 {
|
||||
left: 50%;
|
||||
background-image: url("../../assets/onboarding-2.jpg");
|
||||
background-position: 50%;
|
||||
background-size: cover;
|
||||
border-left: 1px solid #363636;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.art-3 {
|
||||
left: 50%;
|
||||
background-image: url("../../assets/onboarding-3.jpg");
|
||||
background-position: 50%;
|
||||
background-size: cover;
|
||||
border-left: 1px solid #363636;
|
||||
opacity: 0;
|
||||
transition: opacity 250ms;
|
||||
}
|
||||
|
||||
.art-4 {
|
||||
left: 50%;
|
||||
background-image: url("../../assets/onboarding-4.jpg");
|
||||
background-position: 50%;
|
||||
background-size: cover;
|
||||
border-left: 1px solid #363636;
|
||||
opacity: 0;
|
||||
transition: opacity 250ms;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
left: 50%;
|
||||
padding: 5.5em 3.75%;
|
||||
color: #fff;
|
||||
background: #080808;
|
||||
transition: left 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
overflow: auto;
|
||||
|
||||
> div:first-child {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-width: 43.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
min-height: 42em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: $font-family-jetbrains-mono;
|
||||
@include fluid-font-size(3.125rem);
|
||||
line-height: 110%;
|
||||
}
|
||||
|
||||
p {
|
||||
@include fluid-font-size(1.25rem);
|
||||
margin-top: 1.4em;
|
||||
line-height: 122%;
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
.btn-wrapper {
|
||||
margin-top: 5.5em;
|
||||
}
|
||||
|
||||
.grant-info {
|
||||
@include fluid-font-size(1rem);
|
||||
margin-top: 5em;
|
||||
max-width: 27em;
|
||||
line-height: 125%;
|
||||
color: #808080;
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.content-2,
|
||||
.content-3,
|
||||
.content-4 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.started {
|
||||
.art-1 {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.content-1 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.step-2 {
|
||||
.art-2 {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.content-2 {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.step-3 {
|
||||
.art-3 {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.content-3 {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.step-4 {
|
||||
.art-4 {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.content-4 {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 48rem) {
|
||||
.art {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.content {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue