chore(release): 0.2.4-develop.2 [skip ci]

## [0.2.4-develop.2](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.2.4-develop.1...v0.2.4-develop.2) (2023-08-14)

CHANGELOG.md

@@ -1,3 +1,5 @@
+## [0.2.4-develop.2](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.2.4-develop.1...v0.2.4-develop.2) (2023-08-14)
+
 ## [0.2.4-develop.1](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.2.3...v0.2.4-develop.1) (2023-08-14)
 
 

npm-shrinkwrap.json

@@ -1,12 +1,12 @@
 {
     "name": "@lumeweb/lumeweb.com",
-    "version": "0.2.4-develop.1",
+    "version": "0.2.4-develop.2",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@lumeweb/lumeweb.com",
-            "version": "0.2.4-develop.1",
+            "version": "0.2.4-develop.2",
             "dependencies": {
                 "@astrojs/react": "^2.1.1",
                 "@astrojs/tailwind": "^3.1.1",

package.json

@@ -1,7 +1,7 @@
 {
     "name": "@lumeweb/lumeweb.com",
     "type": "module",
-    "version": "0.2.4-develop.1",
+    "version": "0.2.4-develop.2",
     "private": true,
     "repository": {
         "type": "git",

src/components/Vision/Grid/Grid.astro

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

src/components/Vision/Grid/GridCell.astro

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

src/components/Vision/Jumbotron/Jumbotron.astro

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

src/components/Vision/NoVc/NoVc.astro

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

src/components/Vision/Unify/Unify.astro

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

src/components/ui/Button.astro

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

src/components/ui/FeaturedGroup.astro

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

tailwind.config.cjs

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