chore(release): 0.2.5 [skip ci]

## [0.2.5](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.2.4...v0.2.5) (2023-08-14)

### Bug Fixes

* bring back ibm font ([ccc873d](ccc873d547))
* revert global styles to unbreak site ([6b3626b](6b3626b6ac))

CHANGELOG.md

@@ -1,3 +1,11 @@
+## [0.2.5](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.2.4...v0.2.5) (2023-08-14)
+
+
+### Bug Fixes
+
+* bring back ibm font ([ccc873d](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/ccc873d547de3e9cd8ba1067d95d5ab5cfd8a9f4))
+* 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)
 
 

npm-shrinkwrap.json

@@ -1,12 +1,12 @@
 {
     "name": "@lumeweb/lumeweb.com",
-    "version": "0.2.4",
+    "version": "0.2.5",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@lumeweb/lumeweb.com",
-            "version": "0.2.4",
+            "version": "0.2.5",
             "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",
+    "version": "0.2.5",
     "private": true,
     "repository": {
         "type": "git",

src/components/Home/PoweredBy/PoweredBy.astro

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

src/components/Home/PoweredBy/PoweredBy.scss

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

src/components/Home/Socials/Socials.astro

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

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

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>

src/styles/global.scss

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

tailwind.config.cjs

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