style: make header & footer responsive

Author: void-ness

package-lock.json

@@ -46,7 +46,7 @@ const Footer = () => {
               <a href="#">
                 <span className="sr-only">WebX DAO</span>
                 <img
-                  className="w-auto h-8 sm:h-10"
+                  className="w-auto h-16 sm:h-10"
                   src="/images/logo/white_logo.png"
                   alt=""
                 />
@@ -63,13 +63,13 @@ const Footer = () => {
               <>
                 <div
                   key={item.name + "_footer"}
-                  className="text-center sm:text-left"
+                  className="sm:text-left"
                 >
-                  <p className="text-sm font-medium text-white/90">
+                  <p className="text-lg sm:text-sm font-medium text-white/90">
                     {item.name}
                   </p>
 
-                  <nav className="mt-8" aria-label={item.name}>
+                  <nav className="mt-4 sm:mt-8" aria-label={item.name}>
                     <ul className="space-y-4 text-sm">
                       {item.children.map((child) => (
                         <li key={child.name}>
@@ -89,13 +89,13 @@ const Footer = () => {
           </div>
         </div>
 
-        <div className="pt-6 mt-12">
+        <div className="pt-6 mt-5 sm:mt-12">
           <div className="text-center sm:flex sm:justify-between sm:text-left">
             <p className="text-sm text-gray-500">
               <span className="block sm:inline">All rights reserved.</span>
             </p>
 
-            <p className="mt-4 text-sm text-gray-500 sm:order-first sm:mt-0">
+            <p className="mt-1 text-sm text-gray-500 sm:order-first sm:mt-0">
               <span className="flex items-center justify-center">
                 &copy; {new Date().getFullYear()} Made with
                 <SiGithubsponsors

src/components/Global/Footer.js

@@ -15,10 +15,10 @@ const navigation = [
 const Navbar = () => {
   return (
     <Popover as="header" className="relative">
-      <div className="bg-transparent pt-6">
+      <div className="bg-transparent pt-4 sm:pt-6">
         {/* NAVIGATION BAR */}
         <nav
-          className="relative mx-auto flex max-w-7xl items-center justify-between px-4 sm:px-6"
+          className="relative mx-auto mb-4 flex max-w-7xl items-center justify-between px-4 sm:px-6"
           aria-label="Global"
         >
           <div className="flex flex-1 items-center">
@@ -27,7 +27,7 @@ const Navbar = () => {
                 <>
                   <span className="sr-only ">WebX DAO</span>
                   <img
-                    className="h-8 w-auto sm:h-10 cursor-pointer"
+                    className="h-10 w-auto sm:h-10 cursor-pointer"
                     src="/images/logo/white_logo.png"
                     alt="WebX DAO White Logo"
                   />

src/components/Global/Navbar.js

@@ -19,7 +19,7 @@ export default function Projects({ projectsData }) {
         </div>
       </section>
 
-      <div className="container max-w-screen-xl mx-auto my-8 grid pb-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mb-8 gap-6 px-8">
+      <div className="container max-w-screen-xl mx-auto my-8 grid pb-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mb-0 sm:mb-8 gap-6 px-8">
         {projectsData.map(
           ({ name, imgUrl, type, title, text, tags }, index) => (
             <div