refactor: 'JoinCommunity' component is now tailwind

src/components/Donate/Legal/Legal.astro

@@ -2,7 +2,7 @@
 // import './Legal.scss';
 ---
 
-<section id="legal" class="mx-20 lg:mx-40">
+<section id="legal" class="mx-20 lg:mx-40 pb-40">
   <h2 class="text-3xl lg:text-4xl font-display my-10">Tax and Legal</h2>
   <p class="text-lg lg:text-xl font-body text-body my-5">
     <strong

src/components/Donate/Methods/Methods.astro

@@ -190,7 +190,7 @@ await addCurrency(
                 src={currency.qrSmall}
               />
             </div>
-            <div class="flex flex-row-reverse px-5 py-2 rounded-md text-body items-start justify-between">
+            <div class="flex flex-row-reverse px-5 py-2 rounded-md text-body items-start justify-between mt-4">
               <button
                 id="copy-address"
                 class="w-7 h-7 bg-gray-500"

src/components/Layout/JoinCommunity/JoinCommunity.astro

@@ -1,38 +1,54 @@
 ---
-import './JoinCommunity.scss';
+// import "./JoinCommunity.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="join-community">
-  <div>
-    <h2>
+<section
+  id="join-community"
+  class="bg-primary space-between text-black p-20 lg:px-40 flex flex-col lg:flex-row"
+>
+  <div class="w-full">
+    <h2 class="text-3xl font-bold lg:text-4xl font-display">
       Join our community, lend a hand.
     </h2>
-    <p>
+    <p class="text-xl lg:text-2xl font-body">
       Web3 gives people control over their data, privacy, and ownership.
     </p>
   </div>
-    <div>
-      <a href="https://git.lumeweb.com" title="Git" class="git-logo">
+  <div class="flex flex-row gap-14">
+    <a
+      href="https://git.lumeweb.com"
+      title="Git"
+      class="w-16 h-16 text-blue-charcoal hover:text-black transition-colors duration-200 cursor-pointer"
+    >
       <Fragment set:html={svgGit} />
     </a>
-    </div>
-  <div>
-    <a href="https://github.com/LumeWeb" title="GitHub" class="github-logo">
+
+    <a
+      href="https://github.com/LumeWeb"
+      title="GitHub"
+      class="w-16 h-16 text-blue-charcoal hover:text-black transition-colors duration-200 cursor-pointer"
+    >
       <Fragment set:html={svgGithub} />
     </a>
-  </div>
-  <div>
-    <a href="https://discord.gg/qpC8ADp3rS" title="Discord" class="discord-logo">
+
+    <a
+      href="https://discord.gg/qpC8ADp3rS"
+      title="Discord"
+      class="mt-2 w-16 h-16 text-blue-charcoal hover:text-black transition-colors duration-200 cursor-pointer"
+    >
       <Fragment set:html={svgDiscord} />
     </a>
-  </div>
-  <div>
-    <a href="https://twitter.com/lumeweb3" title="Twitter" class="twitter-logo">
+
+    <a
+      href="https://twitter.com/lumeweb3"
+      title="Twitter"
+      class="w-16 h-16 text-blue-charcoal hover:text-black transition-colors duration-200 cursor-pointer"
+    >
       <Fragment set:html={svgTwitter} />
     </a>
   </div>

src/styles/global.scss

@@ -41,7 +41,8 @@
   --color-aquamarine: #7afcbb;
   --color-dark-aquamarine: #1F4A3D;
   --color-gray: #C7C7C7;
-  --color-blue-charcoal: #020e10;
+  --color-charcoal: #020e10;
+  --color-blue-charcoal: #0B3F48;
 }
 
 html {

tailwind.config.cjs

@@ -9,6 +9,8 @@ module.exports = {
         "dark-aquamarine": 'var(--color-dark-aquamarine)',
         body: 'var(--color-gray)',
         "gradient-aqua": "linear-gradient(to right, var(--color-dark-aquamarine), var(--color-aquamarine))",
+        "blue-charcoal": 'var(--color-blue-charcoal)',
+        "charcoal": 'var(--color-charcoal)',
       }
     },
     fontFamily: {