LumeWeb
/
lumeweb.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: responsive is now all over the page :)

This commit is contained in:
Juan Di Toro 2023-08-12 21:53:18 +02:00
parent 486bc6ae72
commit 7c48975f79
8 changed files with 59 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/Home/CTO/CTO.astro
View File

@ -3,15 +3,17 @@ import avatar from "/src/assets/cto-avatar.png";
import abstractBg from "/src/assets/single-brand-bg-1.png";
---
<section id="cto" class="w-full my-24 mx-20 xl:mx-40 flex flex-row">
<div class="flex flex-col max-w-xl space-y-10">
<h2 class="font-display text-primary font-bold text-2xl uppercase">
<section id="cto" class="w-full my-24 flex flex-row">
<div class="flex flex-col mx-10 sm:mx-20 xl:mx-40 lg:max-w-xl gap-y-10">
<h2
class="font-display text-primary font-bold text-xl md:text-2xl uppercase"
>
Community-Powered
</h2>
<h3 class="font-display text-6xl font-bold">
<h3 class="font-display text-4xl md:text-6xl font-bold">
Building a new world for your data
</h3>
<p class="font-body text-2xl text-body">
<p class="font-body text-xl md:text-3xl text-body">
Right now, Lume has only one full-time developer and limited helper staff!
We need help from developers, fundraisers, funders, and contributors to
bring the new internet to the masses.

20
src/components/Home/Meme/Meme.astro
View File

@ -1,29 +1,29 @@
---
import meme1 from "/src/assets/meme-1.png";
import meme2 from "/src/assets/meme-2.png";
import meme3 from "/src/assets/meme-3.png";
import meme4 from "/src/assets/meme-4.png";
import mulletMeme from "/src/assets/centralized-mullet-meme.png";
---
<section id="meme" class="tilted-bg">
<div class="flex flex-row gap-10 md:mx-20 xl:mx-40">
<div class="flex flex-col-reverse lg:flex-row gap-10 mx-10 sm:mx-20 xl:mx-40">
<div class="space-y-10">
<h2 class="font-display text-primary font-bold text-2xl uppercase">
<h2
class="font-display text-primary font-bold text-xl md:text-2xl uppercase"
>
BUSTING THE DECENTERALIZED WEB3 MYTH
</h2>
<h3 class="font-display text-6xl font-bold">The Centralized Mullet</h3>
<p class="font-body text-2xl text-body">
<h3 class="font-display text-4xl md:text-6xl font-bold">
The Centralized Mullet
</h3>
<p class="font-body text-xl md:text-3xl text-body">
Right now, despite many claims, a majority, if not all, the services
that build the legos of Web3 are actually centralized, both with what
you can see and what you can't.
</p>
<p class="font-body text-2xl text-body">
<p class="font-body text-xl md:text-3xl text-body">
While some blockchains may be more decentralized than others, access to
nearly every blockchain is also entralized.
</p>
<p class="font-body text-2xl text-body">
<p class="font-body text-xl md:text-3xl text-body">
So consider this a call to action for our community to go back to ethos
and make Web3 real.
</p>

15
src/components/Home/Typewriter/Typewriter.astro
View File

@ -1,14 +1,21 @@
---
import "./Typewriter.scss";
import TypewriterContent from "./TypewriterContent.jsx";
---
<section id="typewriter" class="w-full overflow-hidden">
<div class="absolute -z-10 -right-[250px] top-[250px] w-[1250px]">
<img
class="absolute -z-10 -right-[250px] -bottom-[250px] w-[1250px] object-contain"
class="object-contain w-[1250px]"
src="/src/assets/video-placeholder.webp"
/>
<h1>
</div>
<section
id="typewriter"
class="w-full overflow-hidden flex flex-row items-center justify-center"
>
<h1
class="text-7xl md:text-9xl mt-10 mb-10 min-h-[375px] max-w-full px-10 text-center"
>
<TypewriterContent client:load />
</h1>
</section>

24
src/components/Home/Typewriter/Typewriter.scss
View File

@ -1,24 +0,0 @@
@import "/src/styles/mixins.scss";
@import "/src/styles/vars.scss";
#typewriter {
display: flex;
align-items: center;
justify-content: center;
padding: 0 7.5%;
h1 {
@apply text-9xl;
display: flex;
align-items: center;
min-height: 2.2em;
margin: max(1.1em, 5rem) 0 max(0.9em, 7rem);
line-height: 110%;
letter-spacing: -0.06em;
text-align: center;
}
.highlight {
color: $color-aquamarine;
}
}

4
src/components/Home/Typewriter/TypewriterContent.jsx
View File

@ -12,13 +12,13 @@ const HeaderContent = () => {
words = randomString.split(' ');
return (
<Typewriter options={{ cursor: '<span class="highlight">_</span>' }} onInit={(typewriter) => {
<Typewriter options={{ cursor: '<span class="text-primary">_</span>' }} onInit={(typewriter) => {
typewriter
.changeDelay(50)
.typeString(randomString.substring(0, randomString.lastIndexOf(' ')) + ' ')
.start();
typewriter
.typeString('<span class="highlight">' + words[words.length - 1] + '</span>')
.typeString('<span class="text-primary">' + words[words.length - 1] + '</span>')
}} />
);
};

17
src/components/Home/Vision/Vision.astro
View File

@ -1,17 +1,22 @@
<section id="vision" class="space-y-10 mx-20 xl:mx-40">
<h2 class="font-display text-primary font-bold text-2xl uppercase">
<section
id="vision"
class="bg-black/40 p-5 lg:bg-transparent lg:p-0 space-y-10 mx-10 sm:mx-20 xl:mx-40"
>
<h2 class="font-display text-primary font-bold text-xl md:text-2xl uppercase">
Our Vision
</h2>
<h3 class="font-display text-6xl font-bold">Make Web3 easy for everyone</h3>
<p class="font-body text-3xl text-body">
<h3 class="font-display text-4xl md:text-6xl font-bold">
Make Web3 easy for everyone
</h3>
<p class="font-body text-xl md:text-3xl text-body">
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.over your personal web.
</p>
<div class="pt-10">
<div class="pt-10 w-full">
<a
href="#"
class="text-2xl rounded-md bg-primary py-3 px-10 text-[black] font-body"
class="text-2xl w-full block text-center sm:w-auto rounded-md bg-primary py-3 px-10 text-[black] font-body"
>Download Extension</a
>
</div>

27
src/components/Home/Web3/Web3.astro
View File

@ -1,21 +1,28 @@
<section id="web3" class="flex flex-row mx-40">
<div class="flex-1 -ml-40">
<img src="/src/assets/home-gfx-left.png" />
<section
id="web3"
class="flex flex-col lg:flex-row lg:bg-transparent lg:p-0 gap-10 mx-10 sm:mx-20 xl:mx-40"
>
<div class="flex-1 -ml-10 -mr-20 lg:-ml-40 lg:mr-0">
<img src="/src/assets/home-gfx-left.png" class="w-full" />
</div>
<div class="flex-1 space-y-10 flex flex-col justify-center">
<h2 class="font-display text-primary font-bold text-2xl uppercase">
<div class="flex-1 -mt-40 space-y-10 flex flex-col justify-center">
<h2
class="font-display text-primary font-bold text-xl md:text-2xl uppercase"
>
What is the Web?
</h2>
<h3 class="font-display text-6xl font-bold">Why Web3 matters</h3>
<p class="font-body text-3xl text-body">
<h3 class="font-display text-4xl md:text-6xl font-bold">
Why Web3 matters
</h3>
<p class="font-body text-xl md:text-3xl text-body">
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 class="pt-10">
<div class="pt-10 w-full">
<a
href="/what-is-web3"
class="text-2xl rounded-md bg-primary py-3 px-10 text-[black] font-body"
href="#"
class="text-2xl w-full block text-center sm:w-auto rounded-md bg-primary py-3 px-10 text-[black] font-body"
>Learn More</a
>
</div>

2
src/components/Layout/Navbar/Navbar.astro
View File

@ -14,7 +14,7 @@ function getActiveClass(linkView) {
</a>
</div>
<menu
class="hidden flex-col items-center gap-14 z-20 max-sm:bg-black max-sm:absolute max-sm:right-0 max-sm:top-0 max-sm:bottom-0 max-sm:z-20 max-sm:py-20 max-sm:px-10 max-sm:bg-black lg:flex-row lg:flex"
class="hidden flex-col items-center gap-14 z-20 max-sm:absolute max-sm:right-0 max-sm:top-0 max-sm:bottom-0 max-sm:z-20 max-sm:py-20 max-sm:px-10 max-sm:bg-black lg:flex-row lg:flex"
>
<li>
<a href="/" class={getActiveClass("home")}>Home</a>