Merge branch 'develop'

# Conflicts:
#	CHANGELOG.md
#	npm-shrinkwrap.json
#	package.json
This commit is contained in:
Derrick Hammer 2023-08-14 09:45:29 -04:00
commit 9152c08f80
Signed by: pcfreak30
GPG Key ID: C997C339BE476FF2
14 changed files with 392 additions and 159 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 90 KiB

View File

@ -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>

View File

@ -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);
}
}

View File

@ -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>

View File

@ -1,29 +1,48 @@
---
import './Grid.scss';
// import "./Grid.scss";
import GridCell from "./GridCell.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>
</div>
<section
id="grid"
class="flex flex-col md:mx-20 lg:mx-40 justify-between items-start gap-y-10 md:flex-row md:flex-wrap"
>
<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} />
))
}
</section>

View File

@ -0,0 +1,17 @@
---
export interface Props {
title: string;
description: string;
}
const { title, description } = Astro.props;
---
<div class="lg:w-[calc(33.33%-20px)] p-10 bg-black mx-[10px] space-y-5">
<h3 class="font-display text-xl md:text-2xl">
{title}
</h3>
<p class="text-lg md:text-xl text-body font-body">
{description}
</p>
</div>

View File

@ -1,9 +1,12 @@
---
import '../../../styles/jumbotron.scss';
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.
</h1>
<section id="jumbotron" class="relative">
<img
src={backgroundSrc.src}
class="-z-10 absolute left-1/2 -translate-x-1/2 w-[100em] max-w-none"
/>
<h1 class="font-display2">Easy access to an open, user-owned web.</h1>
</section>

View File

@ -1,28 +1,29 @@
---
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 pb-40 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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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,34 @@ a, button {
transform: matrix(1, 0.04, -0.04, 1, 0, 0);
z-index: -1;
}
}
main.what {
&::before {
content: "";
position: absolute;
top: -2em;
left: 50%;
width: 151.3em;
height: 122.4em;
background: url("/src/assets/what-bg.png");
background-size: contain;
transform: translate(-50%, 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;
}
}

View File

@ -12,6 +12,7 @@ module.exports = {
fontFamily: {
'body': '"Jaldi", sans-serif',
'display': '"JetBrains Mono", monospace',
'display2': '"IBM Plex Sans Devanagari", monospace',
}
}
}