lumeweb.com/src/components/P1/Vision/Vision.astro

42 lines
1.7 KiB
Plaintext

---
import "./VisionStyles.css";
---
<div
class="mt-[10%] items-start flex pb-[5vh]"
style="padding-bottom: 5vh; vertical-align: center; padding-inline: 15%;"
>
<div
class="bg-[url(../../../src/assets/video-placeholder.webp)] bg-[100%_50%] bg-no-repeat bg-contain transition-[0.5s]"
>
<span id="vision"></span>
<h2
class="text-[calc(15px_+_(25_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--aquamarine)] uppercase font-bold"
>
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 <wbr /> 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>
<div
class="items-center bg-[color:var(--aquamarine)] flex h-[49px] ml-[-1.5px] max-w-[195px] transition-[0.3s] text-black mt-[22px] px-[3px] py-0 rounded-[5px] scale-100 hover:transition-[0.3s] hover:scale-[1.01]"
>
<a
class="tracking-[0] min-h-[26px] text-center w-[234px] block"
href="#"
>
Download Extension</a
>
</div>
</div>
</div>