Merge pull request #219 from void-ness/#216-Responsive-projects-page

#216 responsive projects page

Author: mkubdev

src/components/Global/Footer.js

@@ -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/Navbar.js

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

src/pages/projects.js

@@ -8,18 +8,18 @@ export default function Projects({ projectsData }) {
         <title>Projects | WebXDAO</title>
       </Head>
       <section className="text-white text-center bg-[#00007f]">
-        <div className="px-20 py-20">
+        <div className="px-5 py-10 sm:p-20">
           <h1 className="font-bold text-3xl md:text-5xl antialiased">
             Resources/Projects
           </h1>
-          <div className="mt-6 text-xl font-light text-true-gray-500 antialiased">
+          <div className="mt-6 text-lg md:text-xl font-light text-true-gray-500 antialiased">
             Here you can find a list of good projects and resources to learn
             about Blockchain and Web 3.0
           </div>
         </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
@@ -29,25 +29,24 @@ export default function Projects({ projectsData }) {
               <div className="bg-white p-4 rounded-lg flex flex-col justify-between">
                 <div className="relative mb-6">
                   <img
-                    className="lg:h-60 xl:h-56 md:h-64 h-72 w-full object-cover object-center rounded-md"
+                    className="h-44 md:h-64 lg:h-60 xl:h-56 w-full object-cover object-center rounded-md"
                     src={prefix + imgUrl}
                     alt={name}
                   />
                 </div>
-                <div className="flex justify-between">
-                  <h2 className="text-xl text-gray-900 font-semibold mb-4">
+                <div className="flex justify-between items-center md:items-start mb-2 md:mb-4">
+                  <h2 className="text-lg md:text-xl text-gray-900 font-semibold">
                     {title}
                   </h2>
                   <h3
-                    className={`tracking-widest ${
-                      type === "FREE" ? "text-green-500" : "text-yellow-500"
-                    } text-sm font-semibold title-font`}
+                    className={`tracking-widest ${type === 'FREE' ? 'text-green-500' : 'text-yellow-500'
+                      } text-sm font-semibold title-font`}
                   >
                     {type}
                   </h3>
                 </div>
 
-                <p className="leading-relaxed text-base text-gray-800 mb-5">
+                <p className="leading-relaxed text-sm md:text-base text-gray-800 mb-5">
                   {text}
                 </p>