From 917a818c8375c0c880e5c4b3bf5760698bc739f1 Mon Sep 17 00:00:00 2001
From: Juan Di Toro <ditorojuanf@gmail.com>
Date: Sat, 19 Aug 2023 15:04:42 +0200
Subject: [PATCH] fix: meme headline and donate button

---
 src/components/Donate/Why.astro         |   2 +-
 src/components/Home/WebComparison.astro | 246 ++++++++++++------------
 2 files changed, 126 insertions(+), 122 deletions(-)

diff --git a/src/components/Donate/Why.astro b/src/components/Donate/Why.astro
index d8164e6..a4e3260 100644
--- a/src/components/Donate/Why.astro
+++ b/src/components/Donate/Why.astro
@@ -12,7 +12,7 @@ import backgroud from "/src/assets/why-bg-2.png";
     src={backgroud.src}
     class="absolute xl:relative -z-10 min-w-[1000px] h-[750px] -mx-10 md:-mx-20 lg:-mx-40"
   />
-  <div>
+  <div class="py-5 px-2 lg:px-0">
     <FeaturedGroup
       subtitle="Why should I donate to Lume?"
       title="Help us break the pattern"
diff --git a/src/components/Home/WebComparison.astro b/src/components/Home/WebComparison.astro
index e9bde44..af79f6b 100644
--- a/src/components/Home/WebComparison.astro
+++ b/src/components/Home/WebComparison.astro
@@ -10,20 +10,24 @@ import meme4Small from "/src/assets/meme-4-small.png";
 ---
 
 <section
-    class="flex flex-col w-full border-y border-dark-aquamarine divide-y divide-dark-aquamarine lg:h-[1200px]"
+  class="flex flex-col w-full border-y border-dark-aquamarine divide-y divide-dark-aquamarine lg:h-[1200px]"
 >
-    <h3 class="font-display text-4xl md:text-6xl font-bold mb-5 font-display text-primary ">Web3's Current Path</h3>
-    <!-- MEME GRID BIG -->
-    <div
-        class="hidden lg:flex flex-1 flex-row w-full divide-x divide-dark-aquamarine"
-    >
-        <div class="relative flex-1 w-1/2 h-full max-w-full overflow-hidden">
-            <img
-                src={meme1.src}
-                alt=""
-                class="absolute bottom-0 -left-[100px] object-contain xl:-left-5 float-left"
-            />
-            <span class="float-right mt-16 w-[300px] space-y-10 mr-5">
+  <h3
+    class="font-display text-4xl md:text-6xl font-bold p-5 uppercase bg-dark-aquamarine text-primary"
+  >
+    Web3's Current Path
+  </h3>
+  <!-- MEME GRID BIG -->
+  <div
+    class="hidden lg:flex flex-1 flex-row w-full divide-x divide-dark-aquamarine"
+  >
+    <div class="relative flex-1 w-1/2 h-full max-w-full overflow-hidden">
+      <img
+        src={meme1.src}
+        alt=""
+        class="absolute bottom-0 -left-[100px] object-contain xl:-left-5 float-left"
+      />
+      <span class="float-right mt-16 w-[300px] space-y-10 mr-5">
         <h3 class="font-display text-6xl">Web1</h3>
         <p class="font-body text-2xl text-body">
           Nostalgically recalled for chat rooms and IRC by tech enthusiasts,
@@ -31,14 +35,14 @@ import meme4Small from "/src/assets/meme-4-small.png";
           web access, email, shopping, and chat for mainstream users.
         </p>
       </span>
-        </div>
-        <div class="relative flex-1 max-w-full overflow-hidden">
-            <img
-                src={meme2.src}
-                alt=""
-                class="absolute bottom-0 -left-[110px] object-contain xl:-left-5 float-left"
-            />
-            <span class="float-right mt-16 w-[300px] space-y-10 mr-5">
+    </div>
+    <div class="relative flex-1 max-w-full overflow-hidden">
+      <img
+        src={meme2.src}
+        alt=""
+        class="absolute bottom-0 -left-[110px] object-contain xl:-left-5 float-left"
+      />
+      <span class="float-right mt-16 w-[300px] space-y-10 mr-5">
         <h3 class="font-display text-6xl">Web2</h3>
         <p class="font-body text-2xl text-body">
           Featuring improved gaming, online apps, and video streaming, was
@@ -48,19 +52,19 @@ import meme4Small from "/src/assets/meme-4-small.png";
           regulates your web experience, often citing "safety".
         </p>
       </span>
-        </div>
     </div>
-    <div
-        class="hidden lg:flex flex-1 flex-row w-full divide-x divide-dark-aquamarine"
-    >
-        <div class="relative flex-1 overflow-hidden">
-            <img
-                src={meme3.src}
-                alt=""
-                class="absolute bottom-0 -left-[110px] xl:-left-5 float-left object-contain"
-            />
-            <span class="float-right mt-16 w-[300px] space-y-10 mr-1 xl:mr-5">
-        <h3 class="font-display text-6xl">Crypto/<br/>DeFi</h3>
+  </div>
+  <div
+    class="hidden lg:flex flex-1 flex-row w-full divide-x divide-dark-aquamarine"
+  >
+    <div class="relative flex-1 overflow-hidden">
+      <img
+        src={meme3.src}
+        alt=""
+        class="absolute bottom-0 -left-[110px] xl:-left-5 float-left object-contain"
+      />
+      <span class="float-right mt-16 w-[300px] space-y-10 mr-1 xl:mr-5">
+        <h3 class="font-display text-6xl">Crypto/<br />DeFi</h3>
         <p class="font-body text-2xl text-body">
           The advent of Bitcoin sparked innovation, but over time,
           centralization increased. Factors such as the influx of big money,
@@ -69,14 +73,14 @@ import meme4Small from "/src/assets/meme-4-small.png";
           cycles.
         </p>
       </span>
-        </div>
-        <div class="relative flex-1 overflow-hidden">
-            <img
-                src={meme4.src}
-                alt=""
-                class="absolute bottom-0 -left-[110px] object-contain xl:-left-5 float-left"
-            />
-            <span class="float-right mt-16 w-[300px] space-y-10 mr-1 xl:mr-5">
+    </div>
+    <div class="relative flex-1 overflow-hidden">
+      <img
+        src={meme4.src}
+        alt=""
+        class="absolute bottom-0 -left-[110px] object-contain xl:-left-5 float-left"
+      />
+      <span class="float-right mt-16 w-[300px] space-y-10 mr-1 xl:mr-5">
         <h3 class="font-display text-6xl">Web3</h3>
         <p class="font-body text-2xl text-body">
           Web3 emerged as a buzzword to replace DeFi, but its meaning varies.
@@ -86,86 +90,86 @@ import meme4Small from "/src/assets/meme-4-small.png";
           to address the current imbalance.
         </p>
       </span>
-        </div>
     </div>
-    <!-- MEME GRID BIG -->
+  </div>
+  <!-- MEME GRID BIG -->
 
-    <!-- MEME GRID SMALL -->
-    <div class="lg:hidden flex flex-col gap-8 py-10 px-8">
-        <h3 class="font-display text-3xl">Web1</h3>
-        <p class="font-body text-body text-xl">
-            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..
-        </p>
-        <img src={meme1Small.src} class="-mb-10 w-60 self-center"/>
-    </div>
-    <div class="lg:hidden flex flex-col gap-8 py-10 px-8">
-        <h3 class="font-display text-3xl">Web2</h3>
-        <p class="font-body text-body text-xl">
-            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".
-        </p>
-        <p class="font-body text-body text-xl">
-            So <i>despite</i> 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.
-        </p>
-        <p class="font-body text-body text-xl">
-            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.
-        </p>
-        <img src={meme2Small.src} class="-mb-10 w-60 self-center"/>
-    </div>
-    <div class="lg:hidden flex flex-col gap-8 py-10 px-8">
-        <h3 class="font-display text-3xl">Crypto/DeFi</h3>
-        <p class="font-body text-body text-xl">
-            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.
-        </p>
-        <p class="font-body text-body text-xl">
-            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.
-        </p>
-        <p class="font-body text-body text-xl">
-            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 <i>truly decentralized</i>.
-        </p>
-        <p class="font-body text-body text-xl">
-            It became one large crypto casino.
-        </p>
-        <img src={meme3Small.src} class="-mb-10 w-60 self-center"/>
-    </div>
-    <div class="lg:hidden flex flex-col gap-8 py-10 px-8">
-        <h3 class="font-display text-3xl">Web3</h3>
-        <p class="font-body text-xl text-body">
-            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.
-        </p>
-        <p class="font-body text-xl text-body">
-            The end result is an ecosystem that promotes and <b><i>wants</i></b> 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.
-        </p>
-        <p class="font-body text-xl text-body">
-            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.
-        </p>
-        <img src={meme4Small.src} class="-mb-10 w-60 self-center"/>
-    </div>
-    <!-- MEME GRID SMALL -->
+  <!-- MEME GRID SMALL -->
+  <div class="lg:hidden flex flex-col gap-8 py-10 px-8">
+    <h3 class="font-display text-3xl">Web1</h3>
+    <p class="font-body text-body text-xl">
+      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..
+    </p>
+    <img src={meme1Small.src} class="-mb-10 w-60 self-center" />
+  </div>
+  <div class="lg:hidden flex flex-col gap-8 py-10 px-8">
+    <h3 class="font-display text-3xl">Web2</h3>
+    <p class="font-body text-body text-xl">
+      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".
+    </p>
+    <p class="font-body text-body text-xl">
+      So <i>despite</i> 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.
+    </p>
+    <p class="font-body text-body text-xl">
+      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.
+    </p>
+    <img src={meme2Small.src} class="-mb-10 w-60 self-center" />
+  </div>
+  <div class="lg:hidden flex flex-col gap-8 py-10 px-8">
+    <h3 class="font-display text-3xl">Crypto/DeFi</h3>
+    <p class="font-body text-body text-xl">
+      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.
+    </p>
+    <p class="font-body text-body text-xl">
+      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.
+    </p>
+    <p class="font-body text-body text-xl">
+      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 <i>truly decentralized</i>.
+    </p>
+    <p class="font-body text-body text-xl">
+      It became one large crypto casino.
+    </p>
+    <img src={meme3Small.src} class="-mb-10 w-60 self-center" />
+  </div>
+  <div class="lg:hidden flex flex-col gap-8 py-10 px-8">
+    <h3 class="font-display text-3xl">Web3</h3>
+    <p class="font-body text-xl text-body">
+      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.
+    </p>
+    <p class="font-body text-xl text-body">
+      The end result is an ecosystem that promotes and <b><i>wants</i></b> 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.
+    </p>
+    <p class="font-body text-xl text-body">
+      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.
+    </p>
+    <img src={meme4Small.src} class="-mb-10 w-60 self-center" />
+  </div>
+  <!-- MEME GRID SMALL -->
 </section>