From 5d06bac3d88bd1bc960414b918132f03d8c15dea Mon Sep 17 00:00:00 2001
From: Cauatn <tavarescauac@gmail.com>
Date: Thu, 11 Jul 2024 07:25:03 -0600
Subject: [PATCH] refactor: Convert footer CSS to Tailwind

---
 src/components/global/footer.astro |  68 +++++++++-------
 src/styles/global.css              | 123 -----------------------------
 2 files changed, 39 insertions(+), 152 deletions(-)

diff --git a/src/components/global/footer.astro b/src/components/global/footer.astro
index 99968e5..e77470e 100644
--- a/src/components/global/footer.astro
+++ b/src/components/global/footer.astro
@@ -1,11 +1,17 @@
-<footer class="footer">
+<footer class="bg-[#000] py-0 px-20">
   <div class="container">
-    <div class="footer__box">
-      <div class="footer__box-content">
-        <h2>Sign up for our newsletter</h2>
-        <p>We'll e-mail you once a month with updates about Ladybird.</p>
+    <div
+      class="flex items-center h-[335px] sm:h-[380px] bg-cover bg-no-repeat relative z-10 -top-[60px] rounded-[80px] bg-[url('../../../assets/img/discover-bg.webp')] w-full"
+    >
+      <div class="p-7 md:h-[335px] md:p-10 lg:py-12 lg:px-20">
+        <h2 class="text-[#000] mb-1 text-[36px] lg:text-4xl">
+          Sign up for our newsletter
+        </h2>
+        <p class="text-[#000] mb-6 max-w-[832px] lg:text-lg">
+          We'll e-mail you once a month with updates about Ladybird.
+        </p>
 
-        <div class="footer__pages-block">
+        <div class="flex flex-col">
           <form
             action="https://ladybird.us18.list-manage.com/subscribe/post?u=c15e0446263bcb0793a049dd0&id=43762f159d&f_id=00b4c2e1f0"
             method="post"
@@ -60,26 +66,22 @@
       </div>
     </div>
 
-    <div class="footer__content">
-      <div class="footer__content-top sm:flex sm:flex-col md:flex md:flex-row">
-        <div class="footer__content-left max-w-36">
-          <img
-            class="ladybird-logo"
-            src="/assets/img/logo-new.webp"
-            alt="Logo"
-          />
+    <div>
+      <div class="flex sm:flex-col md:flex-row justify-between gap-10">
+        <div class="h-fit">
+          <img class="max-w-48" src="/assets/img/logo-new.webp" alt="Logo" />
         </div>
-        <div class="footer__content-right">
-          <div class="footer__pages">
-            <div class="footer__pages-block">
-              <a href="/#about" class="footer__pages-link">About</a>
-              <a href="/#news" class="footer__pages-link">News</a>
-              <a href="/#gi" class="footer__pages-link">Get Involved</a>
+        <div>
+          <div class="flex gap-14">
+            <div class="flex flex-col">
+              <a href="/#about" class="mb-3 font-normal">About</a>
+              <a href="/#news" class="mb-3 font-normal">News</a>
+              <a href="/#gi" class="mb-3 font-normal">Get Involved</a>
             </div>
 
-            <div class="footer__pages-block">
-              <a href="/#sponsors" class="footer__pages-link">Sponsors</a>
-              <a href="mailto:contact@ladybird.org" class="footer__pages-link"
+            <div class="flex flex-col">
+              <a href="/#sponsors" class="mb-3 font-normal">Sponsors</a>
+              <a href="mailto:contact@ladybird.org" class="font-normal mb-0"
                 >Contact Us</a
               >
             </div>
@@ -87,23 +89,31 @@
         </div>
       </div>
 
-      <div class="footer__content-bottom">
-        <div class="footer__privacy">
+      <div
+        class="flex sm:flex-row flex-col gap-10 items-center justify-between py-[30px] pb-5 px-0 border-t-[#303030] border-t-[1px] mt-8 border-solid"
+      >
+        <div class="[&>p]:text-[#404040] font-normal">
           <p>© 2024. All rights reserved.</p>
         </div>
-        <div class="footer__social">
+        <div>
           <a
             href="https://github.com/LadybirdBrowser/ladybird"
-            class="footer__social-link"
+            class="w-8 h-8 inline-flex items-center justify-center rounded-full bg-[#16141b] hover:bg-[#8a64e5]"
           >
             <img src="/assets/img/github.svg" alt="GitHub" />
           </a>
 
-          <a href="https://discord.gg/nvfjVJ4Svh" class="footer__social-link">
+          <a
+            href="https://discord.gg/nvfjVJ4Svh"
+            class="w-8 h-8 inline-flex items-center justify-center rounded-full bg-[#16141b] hover:bg-[#8a64e5]"
+          >
             <img src="/assets/img/discord.svg" alt="Discord" />
           </a>
 
-          <a href="https://x.com/ladybirdbrowser" class="footer__social-link">
+          <a
+            href="https://x.com/ladybirdbrowser"
+            class="w-8 h-8 inline-flex items-center justify-center rounded-full bg-[#16141b] hover:bg-[#8a64e5]"
+          >
             <img src="/assets/img/x.svg" alt="X/Twitter" />
           </a>
         </div>
diff --git a/src/styles/global.css b/src/styles/global.css
index a460088..d6866ef 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -159,129 +159,6 @@ a {
   color: #fff;
 }
 
-.footer {
-  background: #000;
-  padding: 0 20px;
-}
-
-.footer__box {
-  position: relative;
-  z-index: 10;
-  top: -60px;
-  border-radius: 80px;
-  background-image: url("../../../assets/img/discover-bg.webp");
-  background-repeat: no-repeat;
-  background-size: cover;
-  width: 100%;
-  height: 380px;
-  display: flex;
-  align-items: center;
-}
-
-@media (min-width: 768px) {
-  .footer__box {
-    height: 335px;
-  }
-}
-
-.footer__box-content {
-  padding: 30px;
-}
-
-@media (min-width: 768px) {
-  .footer__box-content {
-    padding: 40px;
-  }
-}
-
-@media (min-width: 991px) {
-  .footer__box-content {
-    padding: 50px 90px;
-  }
-}
-
-.footer__box h2 {
-  color: #000;
-  margin-bottom: 4px;
-  font-size: 36px;
-}
-
-@media (min-width: 991px) {
-  .footer__box h2 {
-    font-size: 48px;
-  }
-}
-
-.footer__box p {
-  color: #000;
-  margin-bottom: 24px;
-  max-width: 832px;
-}
-
-.footer__pages {
-  display: flex;
-  gap: 60px;
-}
-
-.footer__pages-link {
-  margin-bottom: 12px;
-  font-weight: 400;
-}
-
-.footer__pages-link:nth-last-child(1) {
-  margin-bottom: 0;
-}
-
-.footer__pages-block {
-  display: flex;
-  flex-direction: column;
-}
-
-.footer__social-link {
-  width: 40px;
-  height: 40px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 100px;
-  background: #16141b;
-}
-
-.footer__social-link:hover {
-  background: #8a64e5;
-}
-
-.footer__privacy p {
-  color: #404040;
-  font-weight: 400;
-}
-
-.footer__content-top {
-  display: flex;
-  justify-content: space-between;
-  flex-direction: column;
-  gap: 40px;
-}
-
-.footer__content-bottom {
-  display: flex;
-  justify-content: space-between;
-  border-top: 1px solid #303030;
-  padding: 30px 0 20px 0;
-  margin-top: 30px;
-  flex-direction: column;
-  gap: 40px;
-  text-align: center;
-}
-
-@media (min-width: 380px) {
-  .footer__content-bottom {
-    flex-direction: row;
-    gap: initial;
-    text-align: initial;
-  }
-}
-
 .hero {
   background-color: #000;
   position: relative;