Compare commits
No commits in common. "874b290afa8ca41b62b864f78fdcb533ad0bd3b7" and "14cb588bd0aafd7617b894384cc2c333cf1501af" have entirely different histories.
874b290afa
...
14cb588bd0
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
import GridCell from "../../ui/GridCell.astro";
|
||||
import GridContainer from "../../ui/GridContainer.astro";
|
||||
// import "./Grid.scss";
|
||||
import GridCell from "./GridCell.astro";
|
||||
|
||||
const features = [
|
||||
{
|
||||
|
|
@ -31,8 +31,10 @@ const features = [
|
|||
];
|
||||
---
|
||||
|
||||
<section id="grid" class="mx-10 md:mx-20 lg:mx-40">
|
||||
<GridContainer>
|
||||
<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.
|
||||
|
|
@ -43,5 +45,4 @@ const features = [
|
|||
<GridCell title={feature.title} description={feature.description} />
|
||||
))
|
||||
}
|
||||
</GridContainer>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -7,10 +7,8 @@ export interface Props {
|
|||
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">
|
||||
<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">
|
||||
|
|
@ -1,16 +1,12 @@
|
|||
---
|
||||
import "../../../styles/jumbotron.scss";
|
||||
import backgroundSrc from "/src/assets/vision-jumbotron-bg.png";
|
||||
---
|
||||
|
||||
<section
|
||||
id="jumbotron"
|
||||
class="relative w-full h-[420px] flex items-center justify-center"
|
||||
>
|
||||
<section id="jumbotron" class="relative">
|
||||
<img
|
||||
src={backgroundSrc.src}
|
||||
class="-z-10 absolute top-[10px] left-1/2 -translate-x-1/2 w-[100em] max-w-none"
|
||||
class="-z-10 absolute 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>
|
||||
<h1 class="font-display2">Easy access to an open, user-owned web.</h1>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,10 @@ import FeaturedGroup from "../../ui/FeaturedGroup.astro";
|
|||
import background from "/src/assets/double-brand-bg.png";
|
||||
---
|
||||
|
||||
<section id="no-vc" class="relative flex flex-row mx-10 md:mx-20 lg:mx-40">
|
||||
<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]"
|
||||
|
|
|
|||
|
|
@ -1,38 +1,34 @@
|
|||
---
|
||||
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";
|
||||
import './Contribute.scss';
|
||||
import mario from "/src/assets/mario-level-up.gif"
|
||||
---
|
||||
|
||||
<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.`,
|
||||
]}
|
||||
/>
|
||||
<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"/>
|
||||
<Button label="Donate" href="/donate" />
|
||||
</div>
|
||||
<div>
|
||||
<a href="/donate" class="btn-main">Donate</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,35 @@
|
|||
@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,42 +1,28 @@
|
|||
---
|
||||
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.",
|
||||
},
|
||||
];
|
||||
import './Grid.scss';
|
||||
---
|
||||
|
||||
<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 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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
#grid {
|
||||
margin-bottom: 1.2em;
|
||||
}
|
||||
|
|
@ -1,17 +1,9 @@
|
|||
---
|
||||
import backgroundSrc from "/src/assets/whatsweb3-jumbotron-bg.png";
|
||||
import '../../../styles/jumbotron.scss';
|
||||
---
|
||||
|
||||
<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.
|
||||
<section id="jumbotron">
|
||||
<h1>
|
||||
An evolved, user-owned web where you have access to the world in a way only you control.
|
||||
</h1>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,16 @@
|
|||
---
|
||||
import FeaturedGroup from "../../ui/FeaturedGroup.astro";
|
||||
import backgroundSrc from "/src/assets/new-world-bg.png";
|
||||
import './NewWorld.scss';
|
||||
---
|
||||
|
||||
<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} />
|
||||
<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 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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
@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%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -51,7 +51,7 @@ const { view, title } = Astro.props;
|
|||
</head>
|
||||
<body class="max-w-[1600px] mx-auto">
|
||||
<Navbar view={view} />
|
||||
<main class={view + " space-y-40 overflow-x-hidden relative mb-20"}>
|
||||
<main class={view + " space-y-40 overflow-x-hidden relative "}>
|
||||
<slot />
|
||||
</main>
|
||||
{view !== "home" && <JoinCommunity />}
|
||||
|
|
|
|||
|
|
@ -248,6 +248,21 @@ a, button {
|
|||
}
|
||||
}
|
||||
|
||||
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: "";
|
||||
|
|
|
|||
|
|
@ -1,24 +1,18 @@
|
|||
/** @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