refactor: update homepage content

This commit is contained in:
Derrick Hammer 2023-06-17 20:09:09 -04:00
parent 752a41ea17
commit dffc26a73c
9 changed files with 173 additions and 149 deletions

BIN
src/assets/mullet-meme.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

View File

@ -6,9 +6,9 @@ import avatar from '/src/assets/cto-avatar.webp';
<section id="cto">
<div class="feature-group">
<h2>Community-Powered</h2>
<h3>Building a new world for your data</h3>
<h3>Building the open, user-owned web you deserve</h3>
<p>
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.
Right now, Lume has only one full-time developer, a few freelancers, and limited helper staff! We need help from developers, fundraisers, funders, and contributors to bring the new internet to the masses.
</p>
<div class="bio">
<img src={avatar.src} />

View File

@ -4,71 +4,87 @@ 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/mullet-meme.jpg';
---
<section id="meme" class="tilted-bg">
<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 class="feature-group">
<h2>
Busting the Decentralized Web3 Myth
</h2>
<h3>
The Decentralized Mullet
</h3>
<img src={mulletMeme.src} alt="Web 1" style="padding-bottom: 3em"/>
<p>
Right now, despite many claims, a majority, <b>if not all</b>, the services that build the legos of Web3 are
actually centralized, both with what you can <b>see</b> and what you <b>can't.</b></p>
<p>While some <b>blockchains</b> may be more <b>decentralized</b> than others, access to nearly every blockchain is also
<b>centralized</b>
</p>
<p>
So consider this a call to action for our community to go back to ethos and make Web3 <i>real</i>
</p>
</div>
</div>
<div class="meme-items">
<div class="meme-item">
<div>
<img src={meme1.src} alt="Web 1" />
<h2>Web1</h2>
</div>
<p>
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.
</p>
<div class="meme-items">
<div class="meme-item">
<div>
<img src={meme1.src} alt="Web 1"/>
<h2>Web1</h2>
</div>
<p>
Web1 is probably best remembered by geeks as chat rooms and IRC (which still exist to this day, but only to power users).
To normal users it was the age of AOL dial-up and similar networks where you got web, email, shopping, and chat all in one place.
</p>
</div>
<div class="meme-item">
<div>
<img src={meme2.src}/>
<h2>Web2</h2>
</div>
<p>
Web2 since evolved with the web browser and we got better gaming, online apps, video streaming and calling and much, much more. However, it also got quickly captured by Silicon Valley and what some refer to as the "tech bros".
<br /><br />
So <i>despite</i> the innovation that occurred, it has turned into a top-down system where only a few geeks/CEO's and their investors control your entire web.
<br /><br />
This also excludes the wider internet infrastructure of domains and ISP's (internet providers and hosting), who also play a part in controlling your web, be it for your "safety", or other reasons.
</p>
</div>
<div class="meme-item">
<div>
<img src={meme3.src}/>
<h2>Crypto &amp; Defi</h2>
</div>
<p>
We get the birth of Bitcoin and all of the innovation that followed. While BTC and a handful of other chains have remained decentralized both in operation, and access, the innovation over time has caused things to re-centralize.
<br /><br />
This is due to several factors including big money coming in, pushing greed, hype, and "FOMO". The invention of several new logos's causing this to only get worse, creating a classic "boom" and "bust". Human nature tends to be greedy, so over time, money overrode principles.
<br /><br />
Many development teams prioritized inventing new ideas and "shipping" them to users, while selling them "tokens" to exit at their expense, all while knowing none of what they created was <i>truly decentralized</i>.
<br /><br />
It became one large crypto casino.
</p>
</div>
<div class="meme-item">
<div>
<img src={meme4.src}/>
<h2>Web3</h2>
</div>
<p>
What to say about Web3? Honestly... upfront it appeared to get used as a new buzz word to replace "DeFi". Terms like "Web3" and "Metaverse" have many different meanings to many people. It is intended to include more than just money and trading, and yet every blockchain-based system that can be labeled "web3" still builds onto of the same centralized crypto/defi infrastructure.
<br /><br />
The end result is an ecosystem that promotes and <b><i>wants</i></b> to be decentralized, but where money overrules ideology, ethos, and principles. This is in part due to who's bankrolling it all, and thus the incentives to build make it more about the money then about freedom.
<br /><br />
There needs to be a balance here between free markets/money and public goods/infra, and so far things are way out of wack and need to be fixed.
</p>
</div>
</div>
<div class="meme-item">
<div>
<img src={meme2.src} />
<h2>Web2</h2>
</div>
<p>
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.
</p>
</div>
<div class="meme-item">
<div>
<img src={meme3.src} />
<h2>Crypto &amp; Defi</h2>
</div>
<p>
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.
</p>
</div>
<div class="meme-item">
<div>
<img src={meme4.src} />
<h2>Web3</h2>
</div>
<p>
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.
</p>
</div>
</div>
</section>

View File

@ -7,6 +7,6 @@ import './Message.scss';
A message from Derrick
</h2>
<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.
Some of the world's largest online threats right now are censorship of speech <i>and</i> money. Web3 represents unifying many legos to create a truly user-owned web. Decentralization is a means to an end, not the end itself. The true goal is that you are in control of your personal web, and no one else.
</p>
</section>

View File

@ -3,28 +3,29 @@ import './Socials.scss';
---
<section id="socials">
<h2>Get in touch</h2>
<div>
<a href="#" title="GitHub" class="github-logo">
<svg viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg">
<path fill="currentcolor" fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"/>
</svg>
</a>
<a href="#" title="Discord" class="discord-logo">
<svg viewBox="0 0 127.14 96.36" xmlns="http://www.w3.org/2000/svg">
<path fill="currentcolor" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/>
</svg>
</a>
<a href="#" title="Twitter" class="twitter-logo">
<svg version="1.1" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
<path fill="currentcolor" d="M400,200c0,110.5-89.5,200-200,200S0,310.5,0,200S89.5,0,200,0S400,89.5,400,200z M163.4,305.5 c88.7,0,137.2-73.5,137.2-137.2c0-2.1,0-4.2-0.1-6.2c9.4-6.8,17.6-15.3,24.1-25c-8.6,3.8-17.9,6.4-27.7,7.6 c10-6,17.6-15.4,21.2-26.7c-9.3,5.5-19.6,9.5-30.6,11.7c-8.8-9.4-21.3-15.2-35.2-15.2c-26.6,0-48.2,21.6-48.2,48.2 c0,3.8,0.4,7.5,1.3,11c-40.1-2-75.6-21.2-99.4-50.4c-4.1,7.1-6.5,15.4-6.5,24.2c0,16.7,8.5,31.5,21.5,40.1c-7.9-0.2-15.3-2.4-21.8-6 c0,0.2,0,0.4,0,0.6c0,23.4,16.6,42.8,38.7,47.3c-4,1.1-8.3,1.7-12.7,1.7c-3.1,0-6.1-0.3-9.1-0.9c6.1,19.2,23.9,33.1,45,33.5 c-16.5,12.9-37.3,20.6-59.9,20.6c-3.9,0-7.7-0.2-11.5-0.7C110.8,297.5,136.2,305.5,163.4,305.5"/>
</svg>
</a>
<a href="#" title="Facebook" class="facebook-logo">
<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<path fill="currentcolor" d="M16.7 39.8C7.2 38.1 0 29.9 0 20 0 9 9 0 20 0s20 9 20 20c0 9.9-7.2 18.1-16.7 19.8l-1.1-.9h-4.4l-1.1.9z"/>
<path fill="#031418" d="m27.8 25.6.9-5.6h-5.3v-3.9c0-1.6.6-2.8 3-2.8H29V8.2c-1.4-.2-3-.4-4.4-.4-4.6 0-7.8 2.8-7.8 7.8V20h-5v5.6h5v14.1c1.1.2 2.2.3 3.3.3 1.1 0 2.2-.1 3.3-.3V25.6h4.4z"/>
</svg>
</a>
</div>
<h2>Get in touch</h2>
<div>
<a href="https://git.lumeweb.com" title="Git" class="git-logo">
<svg xmlns="http://www.w3.org/2000/svg" width="92pt" height="92pt" viewBox="0 0 92 92"><defs><clipPath id="a"><path d="M0 .113h91.887V92H0Zm0 0"/></clipPath></defs><g clip-path="url(#a)"><path style="stroke:none;fill-rule:nonzero;fill:#fff;fill-opacity:1" d="M90.156 41.965 50.036 1.848a5.918 5.918 0 0 0-8.372 0l-8.328 8.332 10.566 10.566a7.03 7.03 0 0 1 7.23 1.684 7.034 7.034 0 0 1 1.669 7.277l10.187 10.184a7.028 7.028 0 0 1 7.278 1.672 7.04 7.04 0 0 1 0 9.957 7.05 7.05 0 0 1-9.965 0 7.044 7.044 0 0 1-1.528-7.66l-9.5-9.497V59.36a7.04 7.04 0 0 1 1.86 11.29 7.04 7.04 0 0 1-9.957 0 7.04 7.04 0 0 1 0-9.958 7.06 7.06 0 0 1 2.304-1.539V33.926a7.049 7.049 0 0 1-3.82-9.234L29.242 14.272 1.73 41.777a5.925 5.925 0 0 0 0 8.371L41.852 90.27a5.925 5.925 0 0 0 8.37 0l39.934-39.934a5.925 5.925 0 0 0 0-8.371"/></g></svg>
</a>
<a href="https://github.com/LumeWeb" title="GitHub" class="github-logo">
<svg viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg">
<path fill="currentcolor" fill-rule="evenodd" clip-rule="evenodd"
d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"/>
</svg>
</a>
<a href="https://discord.gg/qpC8ADp3rS" title="Discord" class="discord-logo">
<svg viewBox="0 0 127.14 96.36" xmlns="http://www.w3.org/2000/svg">
<path fill="currentcolor"
d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/>
</svg>
</a>
<a href="https://twitter.com/lumeweb3" title="Twitter" class="twitter-logo">
<svg version="1.1" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
<path fill="currentcolor"
d="M400,200c0,110.5-89.5,200-200,200S0,310.5,0,200S89.5,0,200,0S400,89.5,400,200z M163.4,305.5 c88.7,0,137.2-73.5,137.2-137.2c0-2.1,0-4.2-0.1-6.2c9.4-6.8,17.6-15.3,24.1-25c-8.6,3.8-17.9,6.4-27.7,7.6 c10-6,17.6-15.4,21.2-26.7c-9.3,5.5-19.6,9.5-30.6,11.7c-8.8-9.4-21.3-15.2-35.2-15.2c-26.6,0-48.2,21.6-48.2,48.2 c0,3.8,0.4,7.5,1.3,11c-40.1-2-75.6-21.2-99.4-50.4c-4.1,7.1-6.5,15.4-6.5,24.2c0,16.7,8.5,31.5,21.5,40.1c-7.9-0.2-15.3-2.4-21.8-6 c0,0.2,0,0.4,0,0.6c0,23.4,16.6,42.8,38.7,47.3c-4,1.1-8.3,1.7-12.7,1.7c-3.1,0-6.1-0.3-9.1-0.9c6.1,19.2,23.9,33.1,45,33.5 c-16.5,12.9-37.3,20.6-59.9,20.6c-3.9,0-7.7-0.2-11.5-0.7C110.8,297.5,136.2,305.5,163.4,305.5"/>
</svg>
</a>
</div>
</section>

View File

@ -2,49 +2,53 @@
@import "/src/styles/vars.scss";
#socials {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3em;
margin: 12em 7.5% 8em;
div {
display: flex;
flex-direction: column;
align-items: center;
gap: 2.5em;
}
justify-content: center;
gap: 3em;
margin: 12em 7.5% 8em;
h2 {
@include fluid-font-size(1.5625rem);
font-weight: 700;
line-height: 100%;
text-transform: uppercase;
color: $color-aquamarine;
}
a {
padding: 0.5em;
color: $color-alto;
&:hover {
color: $color-white;
div {
display: flex;
align-items: center;
gap: 2.5em;
}
}
.github-logo svg {
@include fluid-width(3.5rem);
}
h2 {
@include fluid-font-size(1.5625rem);
font-weight: 700;
line-height: 100%;
text-transform: uppercase;
color: $color-aquamarine;
}
.discord-logo svg {
@include fluid-width(3.5rem);
}
a {
padding: 0.5em;
color: $color-alto;
.twitter-logo svg {
@include fluid-width(3.5rem);
}
&:hover {
color: $color-white;
}
}
.facebook-logo svg {
@include fluid-width(3.5rem);
}
.github-logo svg {
@include fluid-width(3.5rem);
}
.git-logo svg {
@include fluid-width(3.5rem);
}
.discord-logo svg {
@include fluid-width(3.5rem);
}
.twitter-logo svg {
@include fluid-width(3.5rem);
}
.facebook-logo svg {
@include fluid-width(3.5rem);
}
}

View File

@ -3,14 +3,13 @@ import './Vision.scss';
---
<section id="vision">
<div class="feature-group">
<h2>Our Vision</h2>
<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 href="#" class="btn-main">Download Extension</a>
<div class="feature-group">
<h2>Our Vision</h2>
<h3>Enable an open, censorship-resistant web</h3>
<p>Web3 is the next evolution of the internet that combines many legos from past decades.</p>
<p>Benefits include internet <b>freedom</b>, <b>privacy</b>, and <b>ownership</b> over your personal web.</p>
<div>
<a href="#" class="btn-main">Download Extension</a>
</div>
</div>
</div>
</section>

View File

@ -3,18 +3,23 @@ import './Web3.scss';
---
<section id="web3" class="tilted-bg">
<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="/what-is-web3" class="btn-main">Learn More</a>
<div class="feature-group">
<h2>
What is the Web?
</h2>
<h3>
Why Web3 matters
</h3>
<p>
Web3 often gets mixed up with other terms/buzz words such as "crypto" or "defi". However, the current web
you use now is often referred to insiders as "web2".
</p>
<p>
While Web3 can include many decentralized services, it symbolizes the multiverse, or the entirety of all
decentralized & P2P networks. Some may refer to this as the "metaverse", or even "dweb", but we can agree to disagree 😉.
</p>
<div>
<a href="/what-is-web3" class="btn-main">Learn More</a>
</div>
</div>
</div>
</section>

View File

@ -17,7 +17,6 @@ import Message from '../components/Home/Message/Message.astro';
<Web3 />
<PoweredBy />
<Meme />
<Grid />
<Socials />
<CTO />
<Message />