diff --git a/package.json b/package.json index f9094d9..708082a 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "autoprefixer": "^10.4.14", "qrcode": "^1.5.3", "react": "^18.2.0", + "react-dom": "^18.2.0", "sass": "^1.62.1", "tailwindcss": "^3.3.2", "typewriter-effect": "^2.19.0" diff --git a/src/assets/centralized-mullet-meme.png b/src/assets/centralized-mullet-meme.png new file mode 100644 index 0000000..6b5f224 Binary files /dev/null and b/src/assets/centralized-mullet-meme.png differ diff --git a/src/assets/home-gfx-left.png b/src/assets/home-gfx-left.png index 0ebe7d9..c3f6b2b 100644 Binary files a/src/assets/home-gfx-left.png and b/src/assets/home-gfx-left.png differ diff --git a/src/assets/meme-1-small.png b/src/assets/meme-1-small.png new file mode 100644 index 0000000..35c43ec Binary files /dev/null and b/src/assets/meme-1-small.png differ diff --git a/src/assets/meme-1.png b/src/assets/meme-1.png index 180c97b..1555025 100644 Binary files a/src/assets/meme-1.png and b/src/assets/meme-1.png differ diff --git a/src/assets/meme-2-small.png b/src/assets/meme-2-small.png new file mode 100644 index 0000000..f266a79 Binary files /dev/null and b/src/assets/meme-2-small.png differ diff --git a/src/assets/meme-2.png b/src/assets/meme-2.png index d8d3758..ea835b9 100644 Binary files a/src/assets/meme-2.png and b/src/assets/meme-2.png differ diff --git a/src/assets/meme-3-small.png b/src/assets/meme-3-small.png new file mode 100644 index 0000000..7ac1401 Binary files /dev/null and b/src/assets/meme-3-small.png differ diff --git a/src/assets/meme-3.png b/src/assets/meme-3.png index 63c867d..549aab9 100644 Binary files a/src/assets/meme-3.png and b/src/assets/meme-3.png differ diff --git a/src/assets/meme-4-small.png b/src/assets/meme-4-small.png new file mode 100644 index 0000000..c0e293f Binary files /dev/null and b/src/assets/meme-4-small.png differ diff --git a/src/assets/meme-4.png b/src/assets/meme-4.png index 5d68765..2b157b0 100644 Binary files a/src/assets/meme-4.png and b/src/assets/meme-4.png differ diff --git a/src/components/Home/Meme/Meme.astro b/src/components/Home/Meme/Meme.astro index 0cb709a..a209226 100644 --- a/src/components/Home/Meme/Meme.astro +++ b/src/components/Home/Meme/Meme.astro @@ -1,90 +1,38 @@ --- -import './Meme.scss'; -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'; +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"; ---
-
-

- Busting the Decentralized Web3 Myth -

-

- The Decentralized Mullet -

- Web 1 -

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

-

While some blockchains may be more decentralized than others, access to nearly every blockchain is also - centralized -

-

- So consider this a call to action for our community to go back to ethos and make Web3 real -

-
-
-
-
- Web 1 -

Web1

-
-

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

-
-
-
- -

Web2

-
-

- 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". -

- So despite 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. -

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

-
-
-
- -

Crypto & Defi

-
-

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

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

- - 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 truly decentralized. -

- - It became one large crypto casino. -

-
-
-
- -

Web3

-
-

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

- - The end result is an ecosystem that promotes and wants 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. - -

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

-
+
+
+

+ BUSTING THE DECENTERALIZED WEB3 MYTH +

+

The Centralized Mullet

+

+ 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. +

+ +

+ While some blockchains may be more decentralized than others, access to + nearly every blockchain is also entralized. +

+

+ So consider this a call to action for our community to go back to ethos + and make Web3 real. +

+ Web 1 +
diff --git a/src/components/Home/Typewriter/Typewriter.astro b/src/components/Home/Typewriter/Typewriter.astro index 3bd95f5..b74e740 100644 --- a/src/components/Home/Typewriter/Typewriter.astro +++ b/src/components/Home/Typewriter/Typewriter.astro @@ -1,9 +1,13 @@ --- -import './Typewriter.scss'; -import TypewriterContent from './TypewriterContent.jsx'; +import "./Typewriter.scss"; +import TypewriterContent from "./TypewriterContent.jsx"; --- -
+
+

diff --git a/src/components/Home/Typewriter/Typewriter.scss b/src/components/Home/Typewriter/Typewriter.scss index 0cb64c4..90926dc 100644 --- a/src/components/Home/Typewriter/Typewriter.scss +++ b/src/components/Home/Typewriter/Typewriter.scss @@ -8,11 +8,11 @@ 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); - @include fluid-font-size-xs(6.25rem); line-height: 110%; letter-spacing: -0.06em; text-align: center; diff --git a/src/components/Home/Typewriter/TypewriterContent.jsx b/src/components/Home/Typewriter/TypewriterContent.jsx index 1826c3a..35e2aab 100644 --- a/src/components/Home/Typewriter/TypewriterContent.jsx +++ b/src/components/Home/Typewriter/TypewriterContent.jsx @@ -12,14 +12,14 @@ const HeaderContent = () => { words = randomString.split(' '); return ( - _' }} onInit={ (typewriter) => { + _' }} onInit={(typewriter) => { typewriter .changeDelay(50) .typeString(randomString.substring(0, randomString.lastIndexOf(' ')) + ' ') .start(); typewriter .typeString('' + words[words.length - 1] + '') - } }/> + }} /> ); }; diff --git a/src/components/Home/Vision/Vision.astro b/src/components/Home/Vision/Vision.astro index 0f42bff..b3f2e74 100644 --- a/src/components/Home/Vision/Vision.astro +++ b/src/components/Home/Vision/Vision.astro @@ -1,15 +1,20 @@ ---- -import './Vision.scss'; ---- -
-
-

Our Vision

-

Enable an open, censorship-resistant web

-

Web3 is the next evolution of the internet that combines many legos from past decades.

-

Benefits include internet freedom, privacy, and ownership over your personal web.

- +
+

+ Our Vision +

+

Make Web3 easy for everyone

+

+ 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. +

+
+ Download Extension
+
diff --git a/src/components/Home/Vision/Vision.scss b/src/components/Home/Vision/Vision.scss deleted file mode 100644 index c499c2f..0000000 --- a/src/components/Home/Vision/Vision.scss +++ /dev/null @@ -1,40 +0,0 @@ -@import "/src/styles/vars.scss"; - -#vision { - position: relative; - display: flex; - flex-direction: column; - justify-content: center; - min-height: 56.8em; - margin: 0 7.5%; - - &::before { - content: ""; - position: absolute; - inset: 0; - min-width: 68em; - margin-left: min(0em, calc((100% - 68em) / 2)); - background-image: url("/src/assets/video-placeholder.webp"); - background-position: right top; - background-repeat: no-repeat; - background-size: contain; - z-index: -1; - } - - .feature-group { - max-width: 64em; - } - - @media screen and (max-width: 80rem) { - p { - background: rgba($color-blue-charcoal-2, 0.75); - border-radius: 0.5em; - padding: 0.3em 0.5em; - margin: -0.3em -0.5em; - } - - p + p { - margin-top: 0.48em; - } - } -} diff --git a/src/components/Home/Web3/Web3.astro b/src/components/Home/Web3/Web3.astro index 2bc2e62..60f18d2 100644 --- a/src/components/Home/Web3/Web3.astro +++ b/src/components/Home/Web3/Web3.astro @@ -1,25 +1,23 @@ ---- -import './Web3.scss'; ---- - -
-
-

- What is the Web? -

-

- Why Web3 matters -

-

- 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". -

-

- 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 😉. -

- +
+
+ +
+
+

+ What is the Web? +

+

Why Web3 matters

+

+ 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. +

+
+ Learn More
+
diff --git a/src/components/Home/Web3/Web3.scss b/src/components/Home/Web3/Web3.scss deleted file mode 100644 index f2c830f..0000000 --- a/src/components/Home/Web3/Web3.scss +++ /dev/null @@ -1,49 +0,0 @@ -@import "/src/styles/mixins.scss"; -@import "/src/styles/vars.scss"; - -#web3 { - display: flex; - flex-direction: column; - justify-content: center; - height: 70em; - margin-top: 6em; - - &::after { - content: ""; - position: absolute; - left: 0; - top: 50%; - width: 100%; - height: 81.7em; - max-width: 63.7em; - margin: -40em 0 0; - background-image: url("/src/assets/home-gfx-left.png"); - background-position: left; - background-repeat: no-repeat; - background-size: contain; - pointer-events: none; - z-index: -1; - } - - .feature-group { - @include fluid-position-left(58.4em, 58em); - max-width: 64em; - - h2 { - margin-top: 1em; - } - - @media screen and (max-width: 80rem) { - p { - background: rgba($color-blue-charcoal, 0.75); - border-radius: 0.5em; - padding: 0.3em 0.5em; - margin: -0.3em -0.5em; - } - - p + p { - margin-top: 0.48em; - } - } - } -} diff --git a/src/components/Home/WebComparison/WebComparison.astro b/src/components/Home/WebComparison/WebComparison.astro new file mode 100644 index 0000000..82eae75 --- /dev/null +++ b/src/components/Home/WebComparison/WebComparison.astro @@ -0,0 +1,135 @@ +--- +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 meme1Small from "/src/assets/meme-1-small.png"; +import meme2Small from "/src/assets/meme-2-small.png"; +import meme3Small from "/src/assets/meme-3-small.png"; +import meme4Small from "/src/assets/meme-4-small.png"; +--- + +
+ + + + + + +
+

Web1

+

+ Nostalgically recalled for chat rooms and IRC by tech enthusiasts, + signifies the era of integrated services like AOL dial-up, providing web + access, email, shopping, and chat for mainstream users. +

+ +
+
+

Web2

+

+ Featuring improved gaming, online apps, and video streaming, was swiftly + monopolized by Silicon Valley, creating a top-down system controlled by a + few tech elites. Despite innovations, this system, including the broader + internet infrastructure like ISPs and domains, regulates your web + experience, often citing "safety". +

+ +
+
+

Crypto/DeFi

+

+ The advent of Bitcoin sparked innovation, but over time, centralization + increased. Factors such as the influx of big money, greed, hype, and FOMO + contributed to this trend. The introduction of many money legos worsened + the situation, leading to boom and bust cycles. +

+ +
+
+

Web3

+

+ Web3 emerged as a buzzword to replace DeFi, but its meaning varies. + Despite aiming for decentralization, Web3 relies on centralized + crypto/DeFi infrastructure. Money dominates over ideology, driven by + funders. A balance is necessary between free markets and public goods to + address the current imbalance. +

+ +
+ +
diff --git a/src/components/Layout/Navbar/Navbar.astro b/src/components/Layout/Navbar/Navbar.astro new file mode 100644 index 0000000..0977685 --- /dev/null +++ b/src/components/Layout/Navbar/Navbar.astro @@ -0,0 +1,71 @@ +--- +const { view } = Astro.props; + +function getActiveClass(linkView) { + return view === linkView ? "border-b border-white" : ""; +} +--- + + diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 872ec7f..9e372b5 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,8 +1,8 @@ --- -import '../styles/global.scss'; -import Navbar from '../components/Layout/Navbar/Navbar.jsx'; -import Footer from '../components/Layout/Footer/Footer.astro'; -import JoinCommunity from '../components/Layout/JoinCommunity/JoinCommunity.astro'; +import "../styles/global.scss"; +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; @@ -17,16 +17,22 @@ const { view, title } = Astro.props; {title} - - + + - -
+ +
- {view !== 'home' && } + {view !== "home" && }