feat: rework several sections on home page, some refactoring
This commit is contained in:
parent
97012911aa
commit
4935177908
|
|
@ -15,7 +15,7 @@ import logo from "../../../src/assets/lume-logo.png";
|
|||
<span></span> contact@lumeweb.com
|
||||
</a>
|
||||
</div>
|
||||
<div class="footer-phrase">Freedom, privacy, ownership.</div>
|
||||
<div class="footer-phrase">Freedom. Privacy. Ownership.</div>
|
||||
</div>
|
||||
<div>
|
||||
<h5>General</h5>
|
||||
|
|
|
|||
|
|
@ -65,8 +65,7 @@ footer {
|
|||
background-image: url('../../assets/email-icon.webp');
|
||||
background-size: cover;
|
||||
margin-right: 0.375em;
|
||||
@include fluid-width(1.0625rem);
|
||||
@include fluid-height(0.875rem);
|
||||
@include fluid-width-height(1.0625rem, 0.875rem);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,90 +1,30 @@
|
|||
---
|
||||
import "./GridStyles.css";
|
||||
import "./Grid.scss";
|
||||
---
|
||||
|
||||
<div class="cards">
|
||||
<div
|
||||
class="text-[white] h-[314.89px] p-8 bg-[color:var(--blue-charcoal)] transition-[0.3s] m-[0.5em] rounded-[5px] border-2 border-solid border-transparent hover:border-[color:var(--aquamarine)] hover:transition-[0.1s] hover:rounded-[5px] hover:border-2 hover:border-solid flex justify-center flex-col"
|
||||
>
|
||||
<h5
|
||||
class="text-[calc(15px_+_(29_-_15)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--white)] font-normal not-italic max-w-[300] leading-8;"
|
||||
>
|
||||
Web3 Universal Storage
|
||||
</h5><br /><h6
|
||||
class="text-[calc(15px_+_(19_-_15)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--cloud)] font-thin not-italic max-w-[300];"
|
||||
>
|
||||
Get access to a universal network drive, powered by the Web3/dWeb
|
||||
cloud. Enjoy portability to any device or platform you wish.
|
||||
</h6>
|
||||
</div>
|
||||
<div
|
||||
class="text-[white] h-[314.89px] p-8 bg-[color:var(--blue-charcoal)] transition-[0.3s] m-[0.5em] rounded-[5px] border-2 border-solid border-transparent hover:border-[color:var(--aquamarine)] hover:transition-[0.1s] hover:rounded-[5px] hover:border-2 hover:border-solid flex justify-center flex-col"
|
||||
>
|
||||
<h5
|
||||
class="text-[calc(15px_+_(29_-_15)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--white)] font-normal not-italic max-w-[300] leading-8;"
|
||||
>
|
||||
Web3 Gateway
|
||||
</h5><br /><h6
|
||||
class="text-[calc(15px_+_(19_-_15)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--cloud)] font-thin not-italic max-w-[300];"
|
||||
>
|
||||
Install the Lume Web3 Extension and have a 1-click gateway into the
|
||||
Web3 internet on Opera, Vivaldi, Edge, and Firefox.
|
||||
</h6>
|
||||
</div>
|
||||
<div
|
||||
class="text-[white] h-[314.89px] p-8 bg-[color:var(--blue-charcoal)] transition-[0.3s] m-[0.5em] rounded-[5px] border-2 border-solid border-transparent hover:border-[color:var(--aquamarine)] hover:transition-[0.1s] hover:rounded-[5px] hover:border-2 hover:border-solid flex justify-center flex-col"
|
||||
>
|
||||
<h5
|
||||
class="text-[calc(15px_+_(29_-_15)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--white)] font-normal not-italic max-w-[300] leading-8;"
|
||||
>
|
||||
Build Your Site,<br />Censorship Free
|
||||
</h5><br /><h6
|
||||
class="text-[calc(15px_+_(19_-_15)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--cloud)] font-thin not-italic max-w-[300];"
|
||||
>
|
||||
Combining Lume and Skynet technologies, you can build a website just
|
||||
like you are on the Web2 internet.
|
||||
</h6>
|
||||
</div>
|
||||
<div
|
||||
class="text-[white] h-[314.89px] p-8 bg-[color:var(--blue-charcoal)] transition-[0.3s] m-[0.5em] rounded-[5px] border-2 border-solid border-transparent hover:border-[color:var(--aquamarine)] hover:transition-[0.1s] hover:rounded-[5px] hover:border-2 hover:border-solid flex justify-center flex-col"
|
||||
>
|
||||
<h5
|
||||
class="text-[calc(15px_+_(29_-_15)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--white)] font-normal not-italic max-w-[300] leading-8;"
|
||||
>
|
||||
Web3 Universal Storage
|
||||
</h5><br /><h6
|
||||
class="text-[calc(15px_+_(19_-_15)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--cloud)] font-thin not-italic max-w-[300];"
|
||||
>
|
||||
Get access to a universal network drive, powered by the Web3/dWeb
|
||||
cloud. Enjoy portability to any device or platform you wish.
|
||||
</h6>
|
||||
</div>
|
||||
<div
|
||||
class="text-[white] h-[314.89px] p-8 bg-[color:var(--blue-charcoal)] transition-[0.3s] m-[0.5em] rounded-[5px] border-2 border-solid border-transparent hover:border-[color:var(--aquamarine)] hover:transition-[0.1s] hover:rounded-[5px] hover:border-2 hover:border-solid flex justify-center flex-col"
|
||||
>
|
||||
<h5
|
||||
class="text-[calc(15px_+_(29_-_15)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--white)] font-normal not-italic max-w-[300] leading-8;"
|
||||
>
|
||||
Web3 Gateway
|
||||
</h5><br /><h6
|
||||
class="text-[calc(15px_+_(19_-_15)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--cloud)] font-thin not-italic max-w-[300];"
|
||||
>
|
||||
Install the Lume Web3 Extension and have a 1-click gateway into the
|
||||
Web3 internet on Opera, Vivaldi, Edge, and Firefox.
|
||||
</h6>
|
||||
</div>
|
||||
<div
|
||||
class="text-[white] h-[314.89px] p-8 bg-[color:var(--blue-charcoal)] transition-[0.3s] m-[0.5em] rounded-[5px] border-2 border-solid border-transparent hover:border-[color:var(--aquamarine)] hover:transition-[0.1s] hover:rounded-[5px] hover:border-2 hover:border-solid flex justify-center flex-col"
|
||||
>
|
||||
<h5
|
||||
class="text-[calc(15px_+_(29_-_15)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--white)] font-normal not-italic max-w-[300] leading-8;"
|
||||
>
|
||||
Build Your Site,<br />Censorship Free
|
||||
</h5><br /><h6
|
||||
class="text-[calc(15px_+_(19_-_15)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--cloud)] font-thin not-italic max-w-[300];"
|
||||
>
|
||||
Combining Lume and Skynet technologies, you can build a website just
|
||||
like you are on the Web2 internet.
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
<section id="home-grid" class="feature-grid">
|
||||
<div>
|
||||
<h3>Web3 Universal Storage</h3>
|
||||
<p>Get access to a universal network drive, powered by the Web3/dWeb cloud. Enjoy portability to any device or platform you wish.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Web3 Gateway</h3>
|
||||
<p>Install the Lume Web3 Extension and have a 1-click gateway into the Web3 internet on Opera, Vivaldi, Edge and Firefox.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Build Your Site, Censorship Free</h3>
|
||||
<p>Combining Lume and Skynet technologies, you can build a website just like you are on the Web2 internet.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Web3 Universal Storage</h3>
|
||||
<p>Get access to a universal network drive, powered by the Web3/dWeb cloud. Enjoy portability to any device or platform you wish.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Web3 Gateway</h3>
|
||||
<p>Install the Lume Web3 Extension and have a 1-click gateway into the Web3 internet on Opera, Vivaldi, Edge and Firefox.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Build Your Site, Censorship Free</h3>
|
||||
<p>Combining Lume and Skynet technologies, you can build a website just like you are on the Web2 internet.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
#home-grid {
|
||||
padding-top: 5.5em;
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
.cards {
|
||||
max-width: 77.5%;
|
||||
margin: 126px auto;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
@media (width >=600px) {
|
||||
.cards {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >=900px) {
|
||||
.cards {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
h1 {
|
||||
height: 1.1em;
|
||||
margin-top: 1.1em;
|
||||
margin: 1.1em 0 0.5em;
|
||||
@include fluid-font-size-s(6.25rem);
|
||||
line-height: 110%;
|
||||
letter-spacing: -0.06em;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import meme4 from '../../../assets/meme-4.png';
|
|||
---
|
||||
|
||||
<div id="home-meme">
|
||||
<div class="meme-text">
|
||||
<div class="meme-text feature-group">
|
||||
<h2>TITLE</h2>
|
||||
<h3>Building a new world for your data</h3>
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,11 @@
|
|||
@import "../../../styles/mixins.scss";
|
||||
|
||||
#home-meme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 8% 12%;
|
||||
@include fluid-font-size(1.3125rem);
|
||||
background-image: url("../../../assets/tilted-rectangle.webp");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
|
@ -11,15 +14,6 @@
|
|||
width: 60%;
|
||||
margin-right: 5%;
|
||||
flex-shrink: 0;
|
||||
|
||||
p {
|
||||
margin-top: 1rem;
|
||||
font-size: calc(15px + (21 - 15) * ((100vw - 300px) / (1600 - 300)));
|
||||
color: var(--cloud);
|
||||
font-family: var(--font-family-jaldi);
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.meme-grid {
|
||||
|
|
|
|||
|
|
@ -1,20 +0,0 @@
|
|||
---
|
||||
import "./PoweredStyles.css";
|
||||
---
|
||||
|
||||
<div class="p-l-container my-[125px]">
|
||||
<div class="p-l-wrapper">
|
||||
<h2
|
||||
class="centered mt-[10px] text-[calc(15px_+_(25_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))]"
|
||||
>
|
||||
POWERED BY
|
||||
</h2>
|
||||
<div
|
||||
class="flex-row place-items-center overflow-hidden flex h-auto w-full mb-[1.5vh]"
|
||||
>
|
||||
<div class="sia-logo"></div>
|
||||
<div class="hns-logo"></div>
|
||||
<div class="osi-logo"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
.p-l-wrapper {
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-left: 50%;
|
||||
margin-right: 50%;
|
||||
}
|
||||
|
||||
.p-l-container {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: visible;
|
||||
white-space: normal;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media screen and (width <=625px) {
|
||||
.p-l-container {
|
||||
width: 100%;
|
||||
margin-top: 5%;
|
||||
transition: 0.5s;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: visible;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.p-l-wrapper {
|
||||
margin-left: 0%
|
||||
}
|
||||
}
|
||||
|
||||
.sia-logo {
|
||||
background-image: url("../../../assets/sia-logo.webp");
|
||||
background-position: 50% 50%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
height: 51.8px;
|
||||
margin-bottom: 8px;
|
||||
object-fit: cover;
|
||||
width: 89.6px;
|
||||
}
|
||||
|
||||
.hns-logo {
|
||||
background-image: url("../../../assets/hsn-logo.webp");
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
height: 46.2px;
|
||||
margin-left: 5px;
|
||||
object-fit: cover;
|
||||
width: 43.4px;
|
||||
}
|
||||
|
||||
.osi-logo {
|
||||
background-image: url("../../../assets/osi-logo.webp");
|
||||
background-position: 50% 50%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
height: 70px;
|
||||
margin-left: 18px;
|
||||
width: 58.1px;
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
---
|
||||
import "./PoweredBy.scss";
|
||||
import siaLogo from "../../../assets/sia-logo.webp";
|
||||
import hnsLogo from "../../../assets/hsn-logo.webp";
|
||||
import osiLogo from "../../../assets/osi-logo.webp";
|
||||
---
|
||||
|
||||
<section id="home-powered-by">
|
||||
<h2>Powered By</h2>
|
||||
<div>
|
||||
<img src={siaLogo.src} class="sia-logo" />
|
||||
<img src={hnsLogo.src} class="hns-logo" />
|
||||
<img src={osiLogo.src} class="osi-logo" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
@import "../../../styles/mixins.scss";
|
||||
|
||||
#home-powered-by {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1.5em;
|
||||
margin: 5em 0;
|
||||
@include fluid-font-size(1.25rem);
|
||||
|
||||
@media screen and (width < 48rem) {
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include fluid-font-size(1.5625rem);
|
||||
font-weight: 700;
|
||||
line-height: 100%;
|
||||
text-transform: uppercase;
|
||||
color: var(--aquamarine);
|
||||
|
||||
@media screen and (width >= 48rem) {
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
.sia-logo {
|
||||
@include fluid-width-height(8rem, 4.625rem);
|
||||
}
|
||||
|
||||
.hns-logo {
|
||||
@include fluid-width-height(3.875rem, 4.125rem);
|
||||
}
|
||||
|
||||
.osi-logo {
|
||||
@include fluid-width-height(5.1875rem, 6.25rem);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,27 +1,16 @@
|
|||
---
|
||||
import "./VisionStyles.css";
|
||||
import "./Vision.scss";
|
||||
---
|
||||
|
||||
<div
|
||||
class="mt-[166px] items-start flex pb-[5vh] bg-[url(../../../src/assets/video-placeholder.webp)] pb-[10%] bg-[80%_65%] bg-no-repeat bg-contain transition-[0.5s]"
|
||||
style="padding-bottom: 5vh; vertical-align: center; padding-inline: 11.9%;"
|
||||
>
|
||||
<section id="home-vision" class="feature-group">
|
||||
<div>
|
||||
<h2>Our Vision</h2>
|
||||
<h3
|
||||
class="text-[calc(30px_+_(45_-_30)_*_((100vw_-_300px)_/_(1600_-_300)))] min-w-[75vw] z-[999] mt-[0.5em]"
|
||||
>
|
||||
Make Web3 easy for <br /> everyone
|
||||
</h3>
|
||||
<h4
|
||||
class="left vt transition-[0.5s] rounded-[15px] text-[calc(15px_+_(21_-_15)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--cloud)] text-[length:var(--font-size-m)] font-normal not-italic max-w-[550px] leading-[35px] mt-[0.5em]"
|
||||
>
|
||||
Web3 offers freedom of speech, data sovereignty, and privacy. We
|
||||
simplify Web3 by bridging the gap between the two webs, enabling
|
||||
easy usage without censorship or backdoors.
|
||||
</h4>
|
||||
<h3>Make Web3 easy for everyone</h3>
|
||||
<p>
|
||||
Web3 offers freedom of speech, data sovereignty, and privacy. We simplify Web3 by bridging the gap between the two webs, enabling easy usage without censorship or backdoors.
|
||||
</p>
|
||||
<div>
|
||||
<a class="btn-main mt-8" href="#">Download Extension</a>
|
||||
<a href="#" class="btn-main">Download Extension</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
@import "../../../styles/colors.scss";
|
||||
@import "../../../styles/mixins.scss";
|
||||
|
||||
#home-vision {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 27.05em;
|
||||
margin-top: 5.32em;
|
||||
@include fluid-margin-lr;
|
||||
@include fluid-font-size(1.3125rem);
|
||||
background-image: url("../../../src/assets/video-placeholder.webp");
|
||||
background-position: 98%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
|
||||
> div {
|
||||
max-width: 29em;
|
||||
}
|
||||
|
||||
@media screen and (width < 80rem) {
|
||||
p {
|
||||
background: rgba($body-bg, 0.65);
|
||||
border-radius: 0 0.5em 0.5em 0;
|
||||
padding: 0.5em 0.5em;
|
||||
margin: -0.5em -0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
.vt {
|
||||
background-color: rgba(0 0 0 0%);
|
||||
}
|
||||
|
||||
@media screen and (width <=1200px) {
|
||||
.vt {
|
||||
background-color: #031418a7;
|
||||
border-radius: 15px;
|
||||
transition: 0.5s;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
---
|
||||
import "./WhatIsWeb3.scss";
|
||||
---
|
||||
|
||||
<section id="home-whatisweb3">
|
||||
<div class="background"></div>
|
||||
<div class="feature-group">
|
||||
<h2>
|
||||
What is the Web?
|
||||
</h2>
|
||||
<h3>
|
||||
Why Web3 matters
|
||||
</h3>
|
||||
<p>
|
||||
Web3 gives people control over their data, privacy, and ownership. Lume's affordable Web3 tech aims to speed up the transition from Web2 to Web3, which matters for privacy and security.
|
||||
</p>
|
||||
<div>
|
||||
<a href="#" class="btn-main">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
@import "../../../styles/colors.scss";
|
||||
@import "../../../styles/mixins.scss";
|
||||
|
||||
@mixin fluid-margin {
|
||||
$min-vw: 48rem;
|
||||
$max-vw: 96rem;
|
||||
|
||||
$min-margin: 3.75%;
|
||||
$max-margin: 7.5%;
|
||||
|
||||
& {
|
||||
margin-left: min(27.8em, max($min-margin, calc(100vw - 28em - $min-margin)));
|
||||
margin-right: $min-margin;
|
||||
|
||||
@media screen and (width >= $min-vw) {
|
||||
$margin: calc(#{$min-margin} + #{strip-unit($max-margin - $min-margin)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
|
||||
margin-left: min(calc(27.8em + $margin), max($margin, calc(100vw - 28em - $margin)));
|
||||
margin-right: $margin;
|
||||
}
|
||||
|
||||
@media screen and (width >= $max-vw) {
|
||||
margin-left: min(calc(27.8em + $max-margin), max($max-margin, calc(100vw - 28em - $max-margin)));
|
||||
margin-right: $max-margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#home-whatisweb3 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
height: 32.42em;
|
||||
margin-top: 2.48em;
|
||||
@include fluid-font-size(1.3125rem);
|
||||
background-image: url("../../../assets/tilted-rectangle.webp");
|
||||
background-size: 100% 100%;
|
||||
|
||||
.background {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
height: 38.9em;
|
||||
max-width: 30.34em;
|
||||
margin: -19em 0 0;
|
||||
background-image: url("../../../src/assets/img-left.webp");
|
||||
background-position: left;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.feature-group {
|
||||
@include fluid-margin;
|
||||
max-width: 28em;
|
||||
z-index: 1;
|
||||
|
||||
h1 {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
@media screen and (width < 80rem) {
|
||||
p {
|
||||
background: rgba(2, 13, 17, 0.65);
|
||||
border-radius: 0 0.5em 0.5em 0;
|
||||
padding: 0.5em 0.5em;
|
||||
margin: -0.5em -0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
---
|
||||
import "./Whatisweb3Styles.css";
|
||||
---
|
||||
|
||||
<div class="centered mt-[100px]">
|
||||
<div
|
||||
class="self-start relative w-full justify-center;"
|
||||
style="padding-block: 5vh;"
|
||||
>
|
||||
<div class="whatisweb3-wrapper">
|
||||
<div
|
||||
class="bg-[url(../../../src/assets/img-left.webp)] bg-[50%_50%] bg-contain bg-no-repeat h-[817px] absolute flex w-[637px] z-[998] left-[0%]"
|
||||
>
|
||||
</div>
|
||||
<div class="w3-container">
|
||||
<span id="whatisweb3"></span>
|
||||
<h2
|
||||
class="text-[calc(15px_+_(25_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--aquamarine)] uppercase font-bold"
|
||||
>
|
||||
what is the web?
|
||||
</h2>
|
||||
<h3
|
||||
class="text-[calc(30px_+_(45_-_30)_*_((100vw_-_300px)_/_(1600_-_300)))] min-w-[75vw] z-[999] mt-[0.5em]"
|
||||
>
|
||||
Why Web3 matters
|
||||
</h3>
|
||||
<h4
|
||||
class="w3-transluscent text-[calc(15px_+_(21_-_15)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--cloud)] text-[length:var(--font-size-m)] font-normal not-italic max-w-[550px] leading-[35px] mt-[0.5em]"
|
||||
>
|
||||
Web3 gives people control over their data, privacy, and
|
||||
ownership. Lume's affordable Web3 tech aims to speed up the
|
||||
transition from Web2 to Web3, which matters for privacy and
|
||||
security.
|
||||
</h4>
|
||||
<div
|
||||
class="items-center bg-[color:var(--aquamarine)] flex h-[49px] ml-[-1.5px] max-w-[116px] transition-[0.3s] text-black mt-[22px] px-[3px] py-0 rounded-[5px] border-solid border-transparent scale-100 hover:transition-[0.5s] hover:bg-transparent transition-[0.5s] hover:border hover:border-[color:var(--aquamarine)] hover:text-[white] hover:border-solid"
|
||||
>
|
||||
<a
|
||||
class="tracking-[0] min-h-[26px] text-center w-[234px] block"
|
||||
href="#">Learn More</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
.w3-container {
|
||||
z-index: 999 !important;
|
||||
width: 100%;
|
||||
padding-left: 47.5vw;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.whatisweb3-wrapper {
|
||||
background-image: url("../../../assets/tilted-rectangle.webp");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
left: 0%;
|
||||
width: 100%;
|
||||
padding-block: 11em;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
padding-left: calc(8px + 1.5625vw);
|
||||
}
|
||||
|
||||
.w3-transluscent {
|
||||
background-color: #020e1076;
|
||||
border-radius: 15px;
|
||||
transition: 0.5s;
|
||||
max-width: 71.5%;
|
||||
}
|
||||
|
||||
@media screen and (width <=1050px) {
|
||||
.w3-container {
|
||||
width: 100%;
|
||||
padding-inline: 9%;
|
||||
z-index: 999 !important;
|
||||
}
|
||||
|
||||
.whatisweb3-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.img-left {
|
||||
left: 15%;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.w3-transluscent {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (width >=2200px) {
|
||||
.w3-container {
|
||||
padding-inline: 96vw;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.img-left {
|
||||
left: 5.5%;
|
||||
}
|
||||
|
||||
.w3-transluscent {
|
||||
max-width: 30%;
|
||||
}
|
||||
}
|
||||
|
|
@ -12,8 +12,7 @@ nav {
|
|||
flex-shrink: 0;
|
||||
|
||||
img {
|
||||
@include fluid-width(13.125rem);
|
||||
@include fluid-height(4.375rem);
|
||||
@include fluid-width-height(13.125rem, 4.375rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
import "./Grid.scss";
|
||||
---
|
||||
|
||||
<section id="vision-grid">
|
||||
<section id="vision-grid" class="feature-grid">
|
||||
<div>
|
||||
<h2>Freedom, Privacy, Ownership.</h2>
|
||||
<h2>Freedom. Privacy. Ownership.</h2>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Web3 Universal Storage</h3>
|
||||
|
|
|
|||
|
|
@ -1,55 +1,17 @@
|
|||
@import "../../../styles/mixins.scss";
|
||||
|
||||
#vision-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
grid-auto-rows: 1fr;
|
||||
gap: 1.125rem;
|
||||
padding-top: 2.5625rem;
|
||||
@include fluid-padding-lr;
|
||||
padding-top: 2.05em;
|
||||
padding-bottom: 4.5em;
|
||||
|
||||
@media screen and (width >= 48rem) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
div:first-child {
|
||||
background: inherit;
|
||||
border: none
|
||||
}
|
||||
|
||||
@media screen and (width >= 64rem) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 39px;
|
||||
color: var(--white);
|
||||
border: 1px solid transparent;
|
||||
font-family: var(--font-family-jaldi);
|
||||
|
||||
&:not(:first-child) {
|
||||
background: var(--blue-charcoal);
|
||||
transition: border-color 200ms;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid var(--aquamarine);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include fluid-font-size(2.75rem);
|
||||
font-weight: bold;
|
||||
line-height: 129.55%;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include fluid-font-size(1.875rem);
|
||||
line-height: 103.33%;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0.67em;
|
||||
@include fluid-font-size(1.3125rem);
|
||||
line-height: 123.81%;
|
||||
color: #c7c7c7;
|
||||
}
|
||||
h2 {
|
||||
@include fluid-font-size(2.75rem);
|
||||
font-weight: bold;
|
||||
line-height: 129.55%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,17 +5,17 @@ import Grids from "../components/Home/Grid/Grid.astro";
|
|||
import Header from "../components/Home/Header/Header.astro";
|
||||
import Meme from "../components/Home/Meme/Meme.astro";
|
||||
import Message from "../components/Home/Message/Message.astro";
|
||||
import Powered from "../components/Home/Powered/Powered.astro";
|
||||
import PoweredBy from "../components/Home/PoweredBy/PoweredBy.astro";
|
||||
import Socials from "../components/Home/Socials/Socials.astro";
|
||||
import Vision from "../components/Home/Vision/Vision.astro";
|
||||
import Whatisweb3 from "../components/Home/Whatisweb3/Whatisweb3.astro";
|
||||
import WhatIsWeb3 from "../components/Home/WhatIsWeb3/WhatIsWeb3.astro";
|
||||
---
|
||||
|
||||
<Layout view="home" title="Lume Web - Web3 for the masses">
|
||||
<Header />
|
||||
<Vision />
|
||||
<Whatisweb3 />
|
||||
<Powered />
|
||||
<WhatIsWeb3 />
|
||||
<PoweredBy />
|
||||
<Meme />
|
||||
<Grids />
|
||||
<Socials />
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
$body-bg: #031418;
|
||||
|
||||
$primary-dark: #000;
|
||||
$primary-light: #fff;
|
||||
$black: rgba(0 0 0);
|
||||
$blue-charcoal: #010e10;
|
||||
$blue-charcoal-2: rgba(3 21 24);
|
||||
$aquamarine: rgba(122 252 187);
|
||||
$cloud: rgba(199 199 199);
|
||||
$alto: rgba(217 217 217);
|
||||
$white: rgba(255 255 255);
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
@import "colors.scss";
|
||||
@import "mixins.scss";
|
||||
|
||||
@import url("https://fonts.googleapis.com/css?family=Jaldi:400|JetBrains+Mono:400,700|IBM+Plex+Sans+Devanagari:400");
|
||||
|
|
@ -7,10 +8,10 @@
|
|||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--primary-dark: rgba(0 0 0 100%);
|
||||
--primary-light: rgba(255 255 255 100%);
|
||||
--primary-dark: #000;
|
||||
--primary-light: #fff;
|
||||
--black: rgba(0 0 0);
|
||||
--blue-charcoal: rgba(1 14 16);
|
||||
--blue-charcoal: #010e10;
|
||||
--blue-charcoal-2: rgba(3 21 24);
|
||||
--aquamarine: rgba(122 252 187);
|
||||
--cloud: rgba(199 199 199);
|
||||
|
|
@ -41,8 +42,8 @@ body {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: "JetBrains Mono", sans-serif;
|
||||
background-color: rgb(3 20 24);
|
||||
color: white;
|
||||
background: $body-bg;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
main {
|
||||
|
|
@ -124,7 +125,7 @@ h6 {
|
|||
display: inline-block;
|
||||
color: var(--black);
|
||||
background: var(--aquamarine);
|
||||
border: 1px solid var(--aquamarine);
|
||||
border: 0.05em solid var(--aquamarine);
|
||||
padding: 0.5em 0.8em;
|
||||
border-radius: 0.25em;
|
||||
transition: color 200ms, background 200ms;
|
||||
|
|
@ -181,3 +182,77 @@ main.vision {
|
|||
background-size: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-group {
|
||||
h2 {
|
||||
margin-bottom: 1em;
|
||||
@include fluid-font-size(1.5625rem);
|
||||
font-weight: 700;
|
||||
line-height: 100%;
|
||||
text-transform: uppercase;
|
||||
color: var(--aquamarine);
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 0.65em;
|
||||
@include fluid-font-size(2.8125rem);
|
||||
font-weight: 700;
|
||||
line-height: 109%;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: var(--font-family-jaldi);
|
||||
line-height: 167%;
|
||||
color: var(--cloud);
|
||||
transition: background 200ms;
|
||||
}
|
||||
|
||||
.btn-main {
|
||||
margin-top: 1.57em;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
grid-auto-rows: 1fr;
|
||||
gap: 0.9em;
|
||||
@include fluid-padding-lr;
|
||||
@include fluid-font-size(1.25rem);
|
||||
|
||||
@media screen and (width >= 48rem) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
@media screen and (width >= 64rem) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 2.95em 1.95em;
|
||||
color: var(--white);
|
||||
background: #020e10;
|
||||
border: 0.05em solid transparent;
|
||||
border-radius: 0.5em;
|
||||
font-family: var(--font-family-jaldi);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--aquamarine);
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include fluid-font-size(1.875rem);
|
||||
line-height: 103.33%;
|
||||
}
|
||||
|
||||
p {
|
||||
@include fluid-font-size(1.3125rem);
|
||||
margin-top: 0.67em;
|
||||
line-height: 123.81%;
|
||||
color: var(--cloud);
|
||||
}
|
||||
}
|
||||
|
|
@ -3,6 +3,12 @@
|
|||
$min-vw: 80rem;
|
||||
$max-vw: 384rem;
|
||||
|
||||
$screen-min: 24rem; // 384px
|
||||
$screen-sm: 48rem; // 768px
|
||||
$screen-md: 64rem; // 1024px
|
||||
$screen-lg: 80rem; // 1280px
|
||||
$screen-default: 96rem; // 1536px
|
||||
|
||||
@function strip-unit($value) {
|
||||
@return math.div($value, ($value * 0 + 1));
|
||||
}
|
||||
|
|
@ -79,6 +85,36 @@ $max-vw: 384rem;
|
|||
}
|
||||
}
|
||||
|
||||
@mixin fluid-width-height($width, $height) {
|
||||
$min-width: calc($width / 1.2);
|
||||
$max-width: calc($width * 2);
|
||||
|
||||
$min-height: calc($height / 1.2);
|
||||
$max-height: calc($height * 2);
|
||||
|
||||
$u1: unit($min-vw);
|
||||
$u2: unit($max-vw);
|
||||
$u3: unit($width);
|
||||
$u4: unit($height);
|
||||
|
||||
@if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
|
||||
& {
|
||||
width: $min-width;
|
||||
height: $min-height;
|
||||
|
||||
@media screen and (width >= $min-vw) {
|
||||
width: calc(#{$min-width} + #{strip-unit($max-width - $min-width)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
|
||||
height: calc(#{$min-height} + #{strip-unit($max-height - $min-height)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
|
||||
}
|
||||
|
||||
@media screen and (width >= $max-vw) {
|
||||
width: $max-width;
|
||||
height: $max-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fluid-width($width) {
|
||||
$min-width: calc($width / 1.2);
|
||||
$max-width: calc($width * 2);
|
||||
|
|
@ -147,3 +183,26 @@ $max-vw: 384rem;
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fluid-margin-lr {
|
||||
$min-vw: 48rem;
|
||||
$max-vw: 96rem;
|
||||
|
||||
$min-margin: 3.75%;
|
||||
$max-margin: 7.5%;
|
||||
|
||||
& {
|
||||
margin-left: $min-margin;
|
||||
margin-right: $min-margin;
|
||||
|
||||
@media screen and (width >= $min-vw) {
|
||||
margin-left: calc(#{$min-margin} + #{strip-unit($max-margin - $min-margin)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
|
||||
margin-right: calc(#{$min-margin} + #{strip-unit($max-margin - $min-margin)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
|
||||
}
|
||||
|
||||
@media screen and (width >= $max-vw) {
|
||||
margin-left: $max-margin;
|
||||
margin-right: $max-margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue