Compare commits
20 Commits
v0.2.4
...
v0.2.5-dev
| Author | SHA1 | Date |
|---|---|---|
semantic-release-bot
|
9c79e70ca3 | |
 Derrick Hammer
|
3f1377ba3f
|
|
|
Derrick Hammer
|
45a4a8d712
|
|
|
semantic-release-bot
|
5861327cb7 | |
Juan Di Toro
|
874b290afa | |
|
Juan Di Toro
|
115090fc56 | |
|
Juan Di Toro
|
f3498ec536 | |
|
Juan Di Toro
|
3a5d778645 | |
|
Juan Di Toro
|
a1b998e4b9 | |
|
Derrick Hammer
|
9152c08f80
|
|
|
semantic-release-bot
|
14cb588bd0 | |
|
Juan Di Toro
|
f7b3468055 | |
|
Juan Di Toro
|
6b3626b6ac | |
|
semantic-release-bot
|
2760e1b5b7 | |
|
Juan Di Toro
|
1356b66a99 | |
|
semantic-release-bot
|
b55aa890ba | |
|
Derrick Hammer
|
95444fa6a4
|
|
|
semantic-release-bot
|
1ab2ae421f | |
|
Juan Di Toro
|
ccc873d547 | |
|
Juan Di Toro
|
994278f77d |
12
CHANGELOG.md
12
CHANGELOG.md
|
|
@ -1,3 +1,15 @@
|
|||
## [0.2.5-develop.1](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.2.4...v0.2.5-develop.1) (2023-08-15)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* add opengraph seo ([45a4a8d](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/45a4a8d7125e8c1ff7f5b18f0215305d181ef85e))
|
||||
* bring back ibm font ([ccc873d](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/ccc873d547de3e9cd8ba1067d95d5ab5cfd8a9f4))
|
||||
* grid cell style closer to design by centering the text ([f3498ec](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/f3498ec536862017b6e3acf33d136c81aa550d33))
|
||||
* gridcell style ([a1b998e](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/a1b998e4b941abf8557e08e8a3a1affb164cbf59))
|
||||
* incorrect font choice on gridcell ([115090f](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/115090fc562798ac2ecbb271b6612c6a2c03d564))
|
||||
* revert global styles to unbreak site ([6b3626b](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/6b3626b6ac685fb27664ba3952fed98e16c7ebb8))
|
||||
|
||||
## [0.2.4](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.2.3...v0.2.4) (2023-08-14)
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "@lumeweb/lumeweb.com",
|
||||
"version": "0.2.4",
|
||||
"version": "0.2.5-develop.1",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "@lumeweb/lumeweb.com",
|
||||
"version": "0.2.4",
|
||||
"version": "0.2.5-develop.1",
|
||||
"dependencies": {
|
||||
"@astrojs/react": "^2.1.1",
|
||||
"@astrojs/tailwind": "^3.1.1",
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "@lumeweb/lumeweb.com",
|
||||
"type": "module",
|
||||
"version": "0.2.4",
|
||||
"version": "0.2.5-develop.1",
|
||||
"private": true,
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
|
|
@ -1,21 +1,38 @@
|
|||
---
|
||||
import './PoweredBy.scss';
|
||||
|
||||
import svgSia from '/src/assets/icons/sia.svg?raw';
|
||||
import svgHns from '/src/assets/icons/hns.svg?raw';
|
||||
import svgOsi from '/src/assets/icons/osi.svg?raw';
|
||||
import svgSia from "/src/assets/icons/sia.svg?raw";
|
||||
import svgHns from "/src/assets/icons/hns.svg?raw";
|
||||
import svgOsi from "/src/assets/icons/osi.svg?raw";
|
||||
---
|
||||
|
||||
<section id="powered-by">
|
||||
<h2>Powered By</h2>
|
||||
<div>
|
||||
<a href="https://sia.tech" title="Sia" class="sia-logo">
|
||||
<section
|
||||
id="powered-by"
|
||||
class="flex flex-col md:flex-row gap-16 items-center justify-center"
|
||||
>
|
||||
<h2
|
||||
class="font-display text-xl md:text-3xl text-primary uppercase font-bold mr-5"
|
||||
>
|
||||
Powered By
|
||||
</h2>
|
||||
<div class="flex flex-row items-center gap-x-10">
|
||||
<a
|
||||
href="https://sia.tech"
|
||||
title="Sia"
|
||||
class="w-28 h-28 text-gray-300 hover:text-white transition-all ease-in"
|
||||
>
|
||||
<Fragment set:html={svgSia} />
|
||||
</a>
|
||||
<a href="https://handshake.org" title="Handshake" class="hns-logo">
|
||||
<a
|
||||
href="https://handshake.org"
|
||||
title="Handshake"
|
||||
class="w-20 h-20 -mt-4 text-gray-300 hover:text-white transition-all ease-in"
|
||||
>
|
||||
<Fragment set:html={svgHns} />
|
||||
</a>
|
||||
<a href="https://opensource.org/osd/" title="Open Source Initiative" class="osi-logo">
|
||||
<a
|
||||
href="https://opensource.org/osd/"
|
||||
title="Open Source Initiative"
|
||||
class="w-20 h-20 -mt-6 text-gray-300 hover:text-white transition-all ease-in"
|
||||
>
|
||||
<Fragment set:html={svgOsi} />
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,54 +0,0 @@
|
|||
@import "/src/styles/mixins.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
#powered-by {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4em;
|
||||
margin: 12em 7.5%;
|
||||
|
||||
@media screen and (max-width: 47.99999rem) {
|
||||
flex-direction: column;
|
||||
gap: 2.5em;
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2.5em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include fluid-font-size(1.5625rem);
|
||||
font-weight: 700;
|
||||
line-height: 100%;
|
||||
text-transform: uppercase;
|
||||
color: $color-aquamarine;
|
||||
|
||||
@media screen and (min-width: 48rem) {
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 0.5em;
|
||||
color: $color-alto;
|
||||
|
||||
&:hover {
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
.sia-logo svg {
|
||||
@include fluid-width(5.5rem);
|
||||
}
|
||||
|
||||
.hns-logo svg {
|
||||
@include fluid-width(4.5rem);
|
||||
}
|
||||
|
||||
.osi-logo svg {
|
||||
@include fluid-width(4.5rem);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,26 +1,42 @@
|
|||
---
|
||||
import './Socials.scss';
|
||||
|
||||
import svgGit from '/src/assets/icons/git.svg?raw';
|
||||
import svgGithub from '/src/assets/icons/github.svg?raw';
|
||||
import svgDiscord from '/src/assets/icons/discord.svg?raw';
|
||||
import svgTwitter from '/src/assets/icons/twitter.svg?raw';
|
||||
import svgGit from "/src/assets/icons/git.svg?raw";
|
||||
import svgGithub from "/src/assets/icons/github.svg?raw";
|
||||
import svgDiscord from "/src/assets/icons/discord.svg?raw";
|
||||
import svgTwitter from "/src/assets/icons/twitter.svg?raw";
|
||||
---
|
||||
|
||||
<section id="socials">
|
||||
<h2>Get in touch</h2>
|
||||
<div>
|
||||
<a href="https://git.lumeweb.com" title="Git" class="git-logo">
|
||||
<Fragment set:html={svgGit} />
|
||||
</a>
|
||||
<a href="https://github.com/LumeWeb" title="GitHub" class="github-logo">
|
||||
<Fragment set:html={svgGithub} />
|
||||
</a>
|
||||
<a href="https://discord.gg/qpC8ADp3rS" title="Discord" class="discord-logo">
|
||||
<Fragment set:html={svgDiscord} />
|
||||
</a>
|
||||
<a href="https://twitter.com/lumeweb3" title="Twitter" class="twitter-logo">
|
||||
<Fragment set:html={svgTwitter} />
|
||||
</a>
|
||||
</div>
|
||||
<section id="socials" class="flex flex-col items-center">
|
||||
<h2 class="text-xl md:text-3xl font-display text-primary uppercase font-bold">
|
||||
Get in touch
|
||||
</h2>
|
||||
<div class="flex flex-row items-center justify-center gap-8 mt-10">
|
||||
<a
|
||||
href="https://git.lumeweb.com"
|
||||
title="Git"
|
||||
class="w-10 h-10 -mt-1 text-gray-300 hover:text-primary transition-all ease-in"
|
||||
>
|
||||
<Fragment set:html={svgGit} />
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/LumeWeb"
|
||||
title="GitHub"
|
||||
class="w-10 h-10 text-gray-300 hover:text-primary transition-all ease-in"
|
||||
>
|
||||
<Fragment set:html={svgGithub} />
|
||||
</a>
|
||||
<a
|
||||
href="https://discord.gg/qpC8ADp3rS"
|
||||
title="Discord"
|
||||
class="w-10 h-10 mt-3 text-gray-300 hover:text-primary transition-all ease-in"
|
||||
>
|
||||
<Fragment set:html={svgDiscord} />
|
||||
</a>
|
||||
<a
|
||||
href="https://twitter.com/lumeweb3"
|
||||
title="Twitter"
|
||||
class="w-10 h-10 text-gray-300 hover:text-primary transition-all ease-in"
|
||||
>
|
||||
<Fragment set:html={svgTwitter} />
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,29 +1,47 @@
|
|||
---
|
||||
import './Grid.scss';
|
||||
import GridCell from "../../ui/GridCell.astro";
|
||||
import GridContainer from "../../ui/GridContainer.astro";
|
||||
|
||||
const features = [
|
||||
{
|
||||
title: "Decentralized Websites (Goal)",
|
||||
description:
|
||||
"You should be able to gain access to any website on any network, in a secure and decentralized way",
|
||||
},
|
||||
{
|
||||
title: "Decentralized Publishing (Idea)",
|
||||
description:
|
||||
"You should be able to easily publish a blog or any other basic website for personal or professional use",
|
||||
},
|
||||
{
|
||||
title: "Website Building Tools (Idea)",
|
||||
description:
|
||||
"You should be able to easily build a website that targets the decentralized web",
|
||||
},
|
||||
{
|
||||
title: "eCommerce (Idea)",
|
||||
description:
|
||||
"You should be be able to buy or sell in a free market without censorship or politics blocking your ability to transact",
|
||||
},
|
||||
{
|
||||
title: "Earn a Living (Idea)",
|
||||
description:
|
||||
"You should be able to monetize your content or skills, without a middleman or gatekeeper. You should be able to be free to live your best life by having access to an open market so that you are never chained down or restricted",
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
<section id="grid" class="feature-grid">
|
||||
<div>
|
||||
<h2>Freedom. Privacy. Ownership.</h2>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Decentralized Websites (Goal)</h3>
|
||||
<p>You should be able to gain access to any website on any network, in a secure and decentralized way</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Decentralized Publishing (Idea)</h3>
|
||||
<p>You should be able to easily publish a blog or any other basic website for personal or professional use</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Website Building Tools (Idea)</h3>
|
||||
<p>You should be able to easily build a website that targets the decentralized web</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>eCommerce (Idea)</h3>
|
||||
<p>You should be be able to buy or sell in a free market without censorship or politics blocking your ability to transact</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Earn a Living (Idea)</h3>
|
||||
<p>You should be able to monetize your content or skills, without a middleman or gatekeeper. You should be able to be free to live your best life by having access to an open market so that you are never chained down or restricted</p>
|
||||
<section id="grid" class="mx-10 md:mx-20 lg:mx-40">
|
||||
<GridContainer>
|
||||
<div class="w-[calc(33.33%-20px)] pl-12 pt-5 mx-[10px]">
|
||||
<h2 class="text-primary font-display text-4xl leading-[1.6] font-bold">
|
||||
Freedom. <br /> Privacy. Ownership.
|
||||
</h2>
|
||||
</div>
|
||||
{
|
||||
features.map((feature) => (
|
||||
<GridCell title={feature.title} description={feature.description} />
|
||||
))
|
||||
}
|
||||
</GridContainer>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,16 @@
|
|||
---
|
||||
import '../../../styles/jumbotron.scss';
|
||||
import backgroundSrc from "/src/assets/vision-jumbotron-bg.png";
|
||||
---
|
||||
|
||||
<section id="jumbotron">
|
||||
<h1>
|
||||
Easy access to an open, user-owned web.
|
||||
<section
|
||||
id="jumbotron"
|
||||
class="relative w-full h-[420px] flex items-center justify-center"
|
||||
>
|
||||
<img
|
||||
src={backgroundSrc.src}
|
||||
class="-z-10 absolute top-[10px] left-1/2 -translate-x-1/2 w-[100em] max-w-none"
|
||||
/>
|
||||
<h1 class="font-display2 text-4xl lg:text-5xl w-full text-center">
|
||||
Easy access to an open, user-owned web.
|
||||
</h1>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,26 @@
|
|||
---
|
||||
import './NoVc.scss';
|
||||
import Button from "../../ui/Button.astro";
|
||||
import FeaturedGroup from "../../ui/FeaturedGroup.astro";
|
||||
import background from "/src/assets/double-brand-bg.png";
|
||||
---
|
||||
|
||||
<section id="no-vc">
|
||||
<div class="feature-group">
|
||||
<h2>Community-Powered</h2>
|
||||
<h3>All about the people, no VC here.</h3>
|
||||
<p>
|
||||
Our vision is completely grass roots, and FOSS. The user needs to have a voice and be in control of their web. Due to our principles, we have not taken any VC money that might be able to strap a jetpack to the project, because the output would compromise the spirit and goals we are setting out to achieve.
|
||||
</p>
|
||||
<p>
|
||||
We are <i>very</i> aware of the projects that have come before us and whom have made similar promises. We are also doing our best to learn from their mistakes and failures.
|
||||
</p>
|
||||
<p>
|
||||
The key difference that we see big picture is you need both an <b>economy</b> and <b>decentralized/P2P</b> networks, because running the internet is not free, and someone <i>always</i> has to foot the bill.
|
||||
</p>
|
||||
<p>
|
||||
Blockchain <b><i>finally</i></b> makes this possible.
|
||||
</p>
|
||||
<p>
|
||||
Having a pragmatic view on mass adoption without compromising on principles is needed to make progress on a user-owned web.
|
||||
</p>
|
||||
<div>
|
||||
<a href="/donate" class="btn-main">Contribute to our cause</a>
|
||||
</div>
|
||||
<section id="no-vc" class="relative flex flex-row mx-10 md:mx-20 lg:mx-40">
|
||||
<img
|
||||
src={background.src}
|
||||
class="absolute top-0 right-0 md:static -mx-10 -md:mx-20 lg:-mx-40 w-[1000px] max-h-[650px]"
|
||||
/>
|
||||
<div class="flex flex-col">
|
||||
<FeaturedGroup
|
||||
subtitle="Community-Powered"
|
||||
title="All about the people, no VC here."
|
||||
text={[
|
||||
"Our vision is completely grass roots, and FOSS. The user needs to have a voice and be in control of their web. Due to our principles, we have not taken any VC money that might be able to strap a jetpack to the project, because the output would compromise the spirit and goals we are setting out to achieve.",
|
||||
"We are <i>very</i> aware of the projects that have come before us and whom have made similar promises. We are also doing our best to learn from their mistakes and failures.",
|
||||
"The key difference that we see big picture is you need both an <b>economy</b> and <b>decentralized/P2P</b> networks, because running the internet is not free, and someone <i>always</i> has to foot the bill.",
|
||||
"Blockchain <b><i>finally</i></b> makes this possible.",
|
||||
"Having a pragmatic view on mass adoption without compromising on principles is needed to make progress on a user-owned web.",
|
||||
]}
|
||||
/>
|
||||
<Button label="Contribute to our cause" href="/donate" />
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,23 @@
|
|||
---
|
||||
import './Unify.scss';
|
||||
import unifyBg from "/src/assets/unifying-bg.png";
|
||||
import FeaturedGroup from "../../ui/FeaturedGroup.astro";
|
||||
---
|
||||
|
||||
<section id="unify">
|
||||
<div class="custom-bg"></div>
|
||||
<div class="feature-group">
|
||||
<h2>Community-Powered</h2>
|
||||
<h3>Unifying all the Networks</h3>
|
||||
<p>
|
||||
There are many, <i>many</i> "crypto", "defi", "web3", "P2P", and "dWeb" projects that have all taken hundreds
|
||||
of different approaches to innovate. However, they all have the same broad ethos in common, and they all
|
||||
need an easy means to access them in one place, but in a censorship-resistant way.
|
||||
</p>
|
||||
<p>
|
||||
We have a very ambitious vision, and this requires all "tribes" to work together enough for the benefit of
|
||||
the end user.
|
||||
</p>
|
||||
<p>
|
||||
Below are some of the ideas we are aiming for, and some we would like to tackle eventually.
|
||||
</p>
|
||||
</div>
|
||||
<section
|
||||
id="unify"
|
||||
class="mx-10 md:mx-20 lg:mx-40 flex flex-col-reverse md:flex-row gap-10"
|
||||
>
|
||||
<FeaturedGroup
|
||||
subtitle="Unifying all the Networks"
|
||||
title="Community-Powered"
|
||||
text={[
|
||||
`There are many, <i class="mr-1">many</i> "crypto", "defi", "web3", "P2P", and "dWeb" projects
|
||||
that have all taken hundreds of different approaches to innovate. However,
|
||||
they all have the same broad ethos in common, and they all need an easy means
|
||||
to access them in one place, but in a censorship-resistant way.`,
|
||||
`We have a very ambitious vision, and this requires all "tribes" to work together enough for the benefit of the end user.`,
|
||||
`Below are some of the ideas we are aiming for, and some we would like to tackle eventually.`,
|
||||
]}
|
||||
/>
|
||||
<img src={unifyBg.src} class="float-right w-full max-h-[550px] -mr-40" />
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,34 +1,38 @@
|
|||
---
|
||||
import './Contribute.scss';
|
||||
import mario from "/src/assets/mario-level-up.gif"
|
||||
import FeaturedGroup from "../../ui/FeaturedGroup.astro";
|
||||
import mario from "/src/assets/mario-level-up.gif";
|
||||
import background from "/src/assets/contribute-bg.png";
|
||||
import Button from "../../ui/Button.astro";
|
||||
---
|
||||
|
||||
<section id="contribute">
|
||||
<div class="feature-group">
|
||||
<h2>Web3 is Community</h2>
|
||||
<h3>Re-defining Web3, for the users</h3>
|
||||
<p>
|
||||
Web3 was a term first defined by Gavin Wood when the Ethereum network was starting out. He defined it as a
|
||||
"decentralized online ecosystem based on blockchain".
|
||||
</p>
|
||||
<p>
|
||||
However, we view it as much more than that, and definitely more than access to DeFi. We see a ton of more
|
||||
potential to what Web3 as an ideal can evolve to, and are setting out to make it a reality.
|
||||
</p>
|
||||
<p>
|
||||
To those that see Web3 as DeFi, we ask this: Do you go on your web browser to access TradingView or other market tools as your homepage, or do you go check your social media, email, and news sites, as <i>well</i> as your money?
|
||||
</p>
|
||||
<p>
|
||||
Blockchain itself is more than just <i>money</i>, and so is Web3, and by extension P2P networks.
|
||||
</p>
|
||||
<p>
|
||||
So help us in our goals to level-up Web3.
|
||||
</p>
|
||||
<div class="mario">
|
||||
<img src={mario.src} alt="Mario Level Up"/>
|
||||
</div>
|
||||
<div>
|
||||
<a href="/donate" class="btn-main">Donate</a>
|
||||
</div>
|
||||
</div>
|
||||
<section
|
||||
id="contribute"
|
||||
class="py-10 px-10 md:px-20 lg:px-40 relative h-full pb-20 bg-opacity-70 bg-cover after:block after:absolute after:top-0 after:bottom-0 after:left-0 after:right-0 after:bg-black/70 after:z-0 after:pointer-events-none"
|
||||
style={{
|
||||
background: `url(${background.src})`,
|
||||
"background-size": "cover",
|
||||
}}
|
||||
>
|
||||
<div class="z-10 relative max-w-3xl mt-16 space-y-10">
|
||||
<FeaturedGroup
|
||||
subtitle="Re-defining Web3, for the users"
|
||||
title="Web3 is Community"
|
||||
text={[
|
||||
`Web3 was a term first defined by Gavin Wood when the Ethereum network was
|
||||
starting out. He defined it as a "decentralized online ecosystem based on
|
||||
blockchain".`,
|
||||
`However, we view it as much more than that, and definitely more than
|
||||
access to DeFi. We see a ton of more potential to what Web3 as an ideal
|
||||
can evolve to, and are setting out to make it a reality.`,
|
||||
`To those that see Web3 as DeFi, we ask this: Do you go on your web browser
|
||||
to access TradingView or other market tools as your homepage, or do you go
|
||||
check your social media, email, and news sites, as <i>well</i> as your money?`,
|
||||
`Blockchain itself is more than just <i>money</i>, and so is Web3, and by
|
||||
extension P2P networks.`,
|
||||
`So help us in our goals to level-up Web3.`,
|
||||
]}
|
||||
/>
|
||||
<img src={mario.src} alt="Mario Level Up" />
|
||||
<Button label="Donate" href="/donate" />
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,35 +0,0 @@
|
|||
@import "/src/styles/vars.scss";
|
||||
|
||||
#contribute {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 71.1em;
|
||||
background: $color-blue-charcoal;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: url("/src/assets/contribute-bg.png");
|
||||
background-position: 50%;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.feature-group {
|
||||
max-width: 72em;
|
||||
margin: 9em 7.5%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.mario {
|
||||
margin-top: 2.5em;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,28 +1,42 @@
|
|||
---
|
||||
import './Grid.scss';
|
||||
import GridCell from "../../ui/GridCell.astro";
|
||||
import GridContainer from "../../ui/GridContainer.astro";
|
||||
|
||||
const features = [
|
||||
{
|
||||
title: "Access the markets, aka DeFi",
|
||||
description:
|
||||
"Web3 commonly get mixed up with DeFi, however, while you should be able to access any decentralized website or network, access to DeFi to manage your money is critical as well.",
|
||||
},
|
||||
{
|
||||
title: "Access any decentralized or P2P network",
|
||||
description:
|
||||
"The basics of Web3 is the sum of all the open networks and ecosystems. You should be able to access and visit any of these places. You can compare this to accessing things on Google, Facebook, Apple, or other networks/platforms that are generally walled gardens in the current web system.",
|
||||
},
|
||||
{
|
||||
title: "Publish Freely",
|
||||
description:
|
||||
'A core tenant of Web3 is censorship-resistance. You should be able to freely post controversial (or even things others just don\'t want to hear) information, such as news, blogging, or video. You should be allowed to openly debate, educate, inform, or entertain without getting "de-platformed".',
|
||||
},
|
||||
{
|
||||
title: "Socialize and Discover Freely",
|
||||
description:
|
||||
"While you have the ability to post, you should also have the ability to read.",
|
||||
},
|
||||
{
|
||||
title: "Own your web. Own your identity.",
|
||||
description:
|
||||
"You should be able to have your private data be and stay private unless you choose otherwise. This is achieved with your online web3 account, which serves as your identity and means of encrypting everything you do. If you want to share you can, but your data is yours, no one else's.",
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
<section id="grid" class="feature-grid">
|
||||
<div>
|
||||
<h3>Access the markets, aka DeFi</h3>
|
||||
<p>Web3 commonly get mixed up with DeFi, however, while you should be able to access any decentralized website or network, access to DeFi to manage your money is critical as well.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Access any decentralized or P2P network</h3>
|
||||
<p>The basics of Web3 is the sum of all the open networks and ecosystems. You should be able to access and visit any of these places.</p>
|
||||
<p>You can compare this to accessing things on Google, Facebook, Apple, or other networks/platforms that are generally walled gardens in the current web system.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Publish Freely</h3>
|
||||
<p>A core tenant of Web3 is censorship-resistance. You should be able to freely post controversial (or even things others just don't want to hear) information, such as news, blogging, or video. You should be allowed to openly debate, educate, inform, or entertain without getting "de-platformed".</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Socialize and Discover Freely</h3>
|
||||
<p>While you have the ability to post, you should <i>also</i> have the ability to <i>read</i>.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Own your web. Own your identity.</h3>
|
||||
<p>You should be able to have your private data <b>be</b> and <b>stay</b> private unless you choose otherwise. This is achieved with your online web3 account, which serves as your identity and means of encrypting everything you do.</p>
|
||||
<p>If you want to share you can, but your data is yours, no one else's.</p>
|
||||
</div>
|
||||
<section id="grid" class="mx-10 md:mx-20 lg:mx-40">
|
||||
<GridContainer>
|
||||
{
|
||||
features.map((feature) => (
|
||||
<GridCell description={feature.description} title={feature.title} />
|
||||
))
|
||||
}
|
||||
</GridContainer>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
#grid {
|
||||
margin-bottom: 1.2em;
|
||||
}
|
||||
|
|
@ -1,9 +1,17 @@
|
|||
---
|
||||
import '../../../styles/jumbotron.scss';
|
||||
import backgroundSrc from "/src/assets/whatsweb3-jumbotron-bg.png";
|
||||
---
|
||||
|
||||
<section id="jumbotron">
|
||||
<h1>
|
||||
An evolved, user-owned web where you have access to the world in a way only you control.
|
||||
<section
|
||||
id="jumbotron"
|
||||
class="relative w-full h-[420px] flex items-center justify-center"
|
||||
>
|
||||
<img
|
||||
src={backgroundSrc.src}
|
||||
class="-z-10 absolute top-[50px] left-1/2 -translate-x-1/2 w-[100em] max-w-none"
|
||||
/>
|
||||
<h1 class="font-display2 text-4xl lg:text-5xl w-full max-w-5xl text-center">
|
||||
An evolved, user-owned web where you have access to the world in a way only
|
||||
you control.
|
||||
</h1>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,19 @@
|
|||
---
|
||||
import './NewWorld.scss';
|
||||
import FeaturedGroup from "../../ui/FeaturedGroup.astro";
|
||||
import backgroundSrc from "/src/assets/new-world-bg.png";
|
||||
---
|
||||
|
||||
<section id="new-world">
|
||||
<div>
|
||||
<div class="feature-group">
|
||||
<h2>Community-Powered</h2>
|
||||
<h3>Your Web, Your Rules</h3>
|
||||
<p>
|
||||
In summary, Web3 is about what you want to do, post, read, play, chat, or interact without others saying
|
||||
otherwise. It is about freedom of speech <i>and</i> freedom of economy.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<section id="new-world" class="mx-10 md:mx-20 lg:mx-40 relative h-[850px]">
|
||||
<div class="-z-10 absolute top-0 right-0 bottom-0 w-[1500px] -mx-40 h-full">
|
||||
<img class="object-cover w-full max-w-none" src={backgroundSrc.src} />
|
||||
</div>
|
||||
<div class="float-right max-w-3xl mt-[25%]">
|
||||
<FeaturedGroup
|
||||
subtitle="Your Web, Your Rules"
|
||||
title="Community-Powered"
|
||||
text={[
|
||||
"In summary, Web3 is about what you want to do, post, read, play, chat, or interact without others saying otherwise. It is about freedom of speech <i>and</i> freedom of economy.",
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,28 +0,0 @@
|
|||
@import "/src/styles/vars.scss";
|
||||
|
||||
#new-world {
|
||||
> div {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
max-width: 185.6em;
|
||||
min-height: 75em;
|
||||
margin: 0 auto;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: url("/src/assets/new-world-bg.png");
|
||||
background-position: 50%;
|
||||
background-size: cover;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-group {
|
||||
max-width: 64em;
|
||||
margin: 9em 7.5%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
export interface Props {
|
||||
label: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
const { label, href } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="pt-10 w-full">
|
||||
<a
|
||||
href={href}
|
||||
class="text-2xl w-full block text-center md:max-w-[350px] rounded-md bg-primary py-3 px-10 text-black font-body"
|
||||
>{label}</a
|
||||
>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
---
|
||||
export interface Props {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
text: string[];
|
||||
}
|
||||
|
||||
// Default props
|
||||
const { title, subtitle, text } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="flex flex-col gap-10">
|
||||
<h2 class="font-display text-primary font-bold text-xl md:text-2xl uppercase">
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
<h3 class="font-display text-4xl md:text-6xl font-bold">
|
||||
{subtitle}
|
||||
</h3>
|
||||
|
||||
{
|
||||
text.map((paragraph) => (
|
||||
<p class="font-body text-xl md:text-3xl text-body">
|
||||
<Fragment set:html={paragraph} />
|
||||
</p>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
---
|
||||
export interface Props {
|
||||
title: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
const { title, description } = Astro.props;
|
||||
---
|
||||
|
||||
<div
|
||||
class="md:w-full h-full p-10 rounded-md bg-black mx-[10px] space-y-5 hover:ring-2 ring-primary transition-all flex flex-col justify-center"
|
||||
>
|
||||
<h3 class="font-body text-xl md:text-3xl">
|
||||
{title}
|
||||
</h3>
|
||||
<p class="text-lg md:text-xl text-body font-body">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<div
|
||||
class="flex flex-col justify-between items-start gap-y-10 md:grid md:grid-cols-3 md:gap-x-10 md:gap-y-10"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
@ -1,60 +1,78 @@
|
|||
---
|
||||
import "../styles/global.scss";
|
||||
import opengraph from "/src/assets/opengraph.png";
|
||||
import Navbar from "../components/Layout/Navbar/Navbar.astro";
|
||||
import Footer from "../components/Layout/Footer/Footer.astro";
|
||||
import JoinCommunity from "../components/Layout/JoinCommunity/JoinCommunity.astro";
|
||||
|
||||
export interface Props {
|
||||
view: string;
|
||||
title: string;
|
||||
view: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
const { view, title } = Astro.props;
|
||||
const {view, title} = Astro.props;
|
||||
const description = "A platform, network and experience that allows you to control and own your online web, and access all of the possibilities Web3 has to offer. Join the open web.";
|
||||
const url = "https://lumeweb.com";
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<head>
|
||||
<title>{title}</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta charset="utf-8"/>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0"
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0"
|
||||
/>
|
||||
<meta
|
||||
name="description"
|
||||
content="A platform, network and experience that allows you to control and own your online web, and access all of the possibilities Web3 has to offer. Join the open web."
|
||||
name="description"
|
||||
content=""
|
||||
/>
|
||||
<meta
|
||||
name="keywords"
|
||||
content="Web3 Extension, web3 browser, Lume Web, Web3, dWeb, p2p, handshake, eth, ethereum, ipfs, open web, privacy, decentralization, blockchain"
|
||||
name="keywords"
|
||||
content="Web3 Extension, web3 browser, Lume Web, Web3, dWeb, p2p, handshake, eth, ethereum, ipfs, open web, privacy, decentralization, blockchain"
|
||||
/>
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="website"/>
|
||||
<meta property="og:url" content={url}/>
|
||||
<meta property="og:title" content={title}/>
|
||||
<meta property="og:description" content={description}/>
|
||||
<meta property="og:image" content={opengraph.src}/>
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta property="twitter:card" content="summary_large_image"/>
|
||||
<meta property="twitter:url" content={url}/>
|
||||
<meta property="twitter:title" content={title}/>
|
||||
<meta property="twitter:description" content={description}/>
|
||||
<meta property="twitter:image" content={opengraph.src}/>
|
||||
|
||||
<!-- Matomo -->
|
||||
<script is:inline>
|
||||
var _paq = (window._paq = window._paq || []);
|
||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||
_paq.push(["trackPageView"]);
|
||||
_paq.push(["enableLinkTracking"]);
|
||||
(function () {
|
||||
var u = "//piwiki.lumeweb.com/";
|
||||
_paq.push(["setTrackerUrl", u + "matomo.php"]);
|
||||
_paq.push(["setSiteId", "1"]);
|
||||
var d = document,
|
||||
g = d.createElement("script"),
|
||||
s = d.getElementsByTagName("script")[0];
|
||||
g.async = true;
|
||||
g.src = u + "matomo.js";
|
||||
s.parentNode.insertBefore(g, s);
|
||||
})();
|
||||
var _paq = (window._paq = window._paq || []);
|
||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||
_paq.push(["trackPageView"]);
|
||||
_paq.push(["enableLinkTracking"]);
|
||||
(function () {
|
||||
var u = "//piwiki.lumeweb.com/";
|
||||
_paq.push(["setTrackerUrl", u + "matomo.php"]);
|
||||
_paq.push(["setSiteId", "1"]);
|
||||
var d = document,
|
||||
g = d.createElement("script"),
|
||||
s = d.getElementsByTagName("script")[0];
|
||||
g.async = true;
|
||||
g.src = u + "matomo.js";
|
||||
s.parentNode.insertBefore(g, s);
|
||||
})();
|
||||
</script>
|
||||
<!-- End Matomo Code -->
|
||||
</head>
|
||||
<body class="max-w-[1600px] mx-auto">
|
||||
<Navbar view={view} />
|
||||
<main class={view + " space-y-40 overflow-x-hidden relative "}>
|
||||
<slot />
|
||||
</main>
|
||||
{view !== "home" && <JoinCommunity />}
|
||||
<Footer />
|
||||
</body>
|
||||
</head>
|
||||
<body class="max-w-[1600px] mx-auto">
|
||||
<Navbar view={view}/>
|
||||
<main class={view + " space-y-40 overflow-x-hidden relative "}>
|
||||
<slot/>
|
||||
</main>
|
||||
{view !== "home" &&
|
||||
<JoinCommunity/>}
|
||||
<Footer/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -66,6 +66,40 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
.tilted-bg {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -5%;
|
||||
bottom: 0;
|
||||
left: -5%;
|
||||
margin: 2% 0;
|
||||
background: $color-blue-charcoal;
|
||||
transform: matrix(1, -0.04, 0.04, 1, 0, 0);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
.tilted-bg-r {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -5%;
|
||||
bottom: 0;
|
||||
left: -5%;
|
||||
margin: 2% 0;
|
||||
background: $color-blue-charcoal;
|
||||
transform: matrix(1, 0.04, -0.04, 1, 0, 0);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
@include fluid-font-size(0.625rem);
|
||||
flex-grow: 1;
|
||||
|
|
@ -75,6 +109,111 @@ a, button {
|
|||
transition: color $transition-duration;
|
||||
}
|
||||
|
||||
.btn-main {
|
||||
display: inline-block;
|
||||
padding: 0.5em 0.8em;
|
||||
color: $color-black;
|
||||
background: $color-aquamarine;
|
||||
border: 0.05em solid $color-aquamarine;
|
||||
border-radius: 0.25em;
|
||||
transition: color $transition-duration, background $transition-duration;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
color: $color-white;
|
||||
background: $color-blue-charcoal;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-group {
|
||||
h2 {
|
||||
margin-bottom: 1em;
|
||||
@include fluid-font-size(1.5625rem);
|
||||
font-weight: 700;
|
||||
line-height: 100%;
|
||||
text-transform: uppercase;
|
||||
color: $color-aquamarine;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 0.65em;
|
||||
@include fluid-font-size(2.8125rem);
|
||||
line-height: 109%;
|
||||
}
|
||||
|
||||
h2, h3 {
|
||||
text-shadow: 0.017em 0.017em 0.034em rgba($color-blue-charcoal, 0.65);
|
||||
}
|
||||
|
||||
p, ul {
|
||||
@include fluid-font-size(1.5rem);
|
||||
font-family: $font-family-jaldi;
|
||||
line-height: 148%;
|
||||
color: $color-cloud;
|
||||
transition: background $transition-duration;
|
||||
}
|
||||
|
||||
p + p, ul + p {
|
||||
margin-top: 0.78em;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.btn-main {
|
||||
font-family: $font-family-jaldi;
|
||||
@include fluid-font-size(1.5rem);
|
||||
margin-top: 1.57em;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
gap: 0.9em;
|
||||
padding: 0 7.5%;
|
||||
@include fluid-font-size(1.25rem);
|
||||
|
||||
@media screen and (min-width: 48rem) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-auto-rows: 1fr;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 64rem) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 2.95em 1.95em;
|
||||
background: $color-blue-charcoal;
|
||||
border: 0.05em solid transparent;
|
||||
border-radius: 0.5em;
|
||||
font-family: $font-family-jaldi;
|
||||
transition: border-color $transition-duration;
|
||||
|
||||
&:hover {
|
||||
border-color: $color-aquamarine;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include fluid-font-size(2rem);
|
||||
line-height: 109%;
|
||||
}
|
||||
|
||||
p {
|
||||
@include fluid-font-size(1.375rem);
|
||||
margin-top: 0.67em;
|
||||
line-height: 124%;
|
||||
color: $color-cloud;
|
||||
}
|
||||
}
|
||||
|
||||
.tilted-bg {
|
||||
position: relative;
|
||||
|
||||
|
|
@ -107,4 +246,19 @@ a, button {
|
|||
transform: matrix(1, 0.04, -0.04, 1, 0, 0);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
main.donate {
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -3em;
|
||||
left: 50%;
|
||||
width: 144em;
|
||||
height: 93.3em;
|
||||
background: url("/src/assets/donate-bg.png");
|
||||
background-size: contain;
|
||||
transform: translate(-50%, 0);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,17 +1,24 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
|
||||
variants: {
|
||||
extend: {
|
||||
boxShadow: ['active']
|
||||
}
|
||||
},
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: 'var(--color-aquamarine)',
|
||||
"dark-aquamarine": 'var(--color-dark-aquamarine)',
|
||||
body: 'var(--color-gray)',
|
||||
},
|
||||
"gradient-aqua": "linear-gradient(to right, var(--color-dark-aquamarine), var(--color-aquamarine))",
|
||||
}
|
||||
},
|
||||
fontFamily: {
|
||||
'body': '"Jaldi", sans-serif',
|
||||
'display': '"JetBrains Mono", monospace',
|
||||
}
|
||||
}
|
||||
'display2': '"IBM Plex Sans Devanagari", monospace',
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue