Merge pull request #248 from tarunfy/responsivess-design-fix

Responsivess design fix

Author: vinzvinci

src/components/Global/Footer.js

@@ -3,16 +3,16 @@ import Link from "next/link";
 
 const navigation = [
   {
-    name: "ABOUT US",
-    href: "/about-us",
+    name: "About Us",
+    href: "/about",
     children: [
       { name: "Who we are?", href: "/about-us#who" },
       { name: "What we do?", href: "/about-us#what" },
       { name: "Team WebX", href: "/team" },
     ],
   },
   {
-    name: "SOCIALS",
+    name: "Socials",
     href: "/",
     children: [
       { name: "GitHub", href: "https://github.com/WebXDAO" },
@@ -22,12 +22,12 @@ const navigation = [
     ],
   },
   {
-    name: "CONTACT",
+    name: "Contact",
     href: "/contact",
     children: [{ name: "Contact us", href: "mailto:[email protected]" }],
   },
   {
-    name: "PARTNERS",
+    name: "Partners",
     href: "/partners",
     children: [
       { name: "Our partners", href: "/partners" },
@@ -45,7 +45,7 @@ const Footer = () => {
             <div className="flex justify-center text-teal-600 sm:justify-start">
               <a href="https://webxdao.xyz">
                 <span className="sr-only">WebX DAO</span>
-                <img className="w-auto h-14 sm:h-16" src="/images/logo/logo.png" alt="WebX DAO Logo" />
+                <img className="w-auto sm:h-14 md:h-16 h-12" src="/images/logo/logo.png" alt="" />
               </a>
             </div>
             {/* 
@@ -60,16 +60,14 @@ const Footer = () => {
                 <div key={item.name + "_footer"} className="sm:text-left">
                   <p className="text-lg sm:text-sm font-medium text-white/90">{item.name}</p>
 
-                  <nav className="mt-4 sm:mt-8" aria-label={item.name}>
+                  <nav className="mt-4 sm:mt-3" aria-label={item.name}>
                     <ul className="space-y-4 text-sm">
                       {item.children.map((child) => (
                         <li key={child.name}>
-                          <Link
-                            className="transition text-white/60 hover:text-white/60/75 "
-                            href={child.href}
-                            key = {child.name}
-                          >
-                            <span className="text-white/60 cursor-pointer">{child.name}</span>
+                          <Link href="/">
+                            <span className="text-white/60 hover:text-white/95 transition cursor-pointer">
+                              {child.name}
+                            </span>
                           </Link>
                         </li>
                       ))}

src/components/Global/Navbar.js

@@ -22,7 +22,7 @@ const Navbar = () => {
           aria-label="Global"
         >
           <div className="flex items-center flex-1">
-            <div className="flex items-center justify-between w-full md:w-auto">
+            <div className="flex items-center justify-between w-full lg:w-auto">
               <Link href="/">
                   <a>
                 <>
@@ -35,7 +35,7 @@ const Navbar = () => {
                         </>
                   </a>
               </Link>
-              <div className="flex items-center -mr-2 md:hidden">
+              <div className="flex items-center justify-between -mr-2 lg:hidden ">
                 <Popover.Button className="inline-flex items-center justify-center p-2 text-gray-400 bg-transparent rounded-md focus-ring-inset hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-white">
                   <span className="sr-only">Open main menu</span>
                   <Bars3Icon className="w-6 h-6" aria-hidden="true" />
@@ -44,8 +44,8 @@ const Navbar = () => {
             </div>
             {/* Add content here to get menu next to icon */}
           </div>
-          <div className="hidden md:flex md:items-center md:space-x-6">
-            <div className="hidden space-x-8 md:ml-10 md:flex">
+          <div className="hidden lg:flex lg:items-center md:space-x-6">
+            <div className="hidden space-x-8 lg:ml-10 lg:flex">
               {navigation.map((item) => (
                 <Link href={item.href} key={item.name}>
                   <a className="text-base font-medium text-white hover:text-gray-300">
@@ -77,12 +77,16 @@ const Navbar = () => {
       >
         <Popover.Panel
           focus
-          className="absolute inset-x-0 top-0 z-10 p-2 transition origin-top transform md:hidden"
+          className="absolute inset-x-0 top-0 z-10 p-2 transition origin-top transform lg:hidden"
         >
           <div className="overflow-hidden rounded-lg shadow-xl backdrop-blur-sm bg-gradient1/50 ring-1 ring-white ring-opacity-5">
             <div className="flex items-center justify-between px-5 pt-4">
               <div>
-                <img className="w-auto h-12" src="/images/logo/logo.png" alt="WebX DAO" />
+                <img
+                  className="w-auto h-10 sm:h-12 md:h-14 lg:h-16"
+                  src="/images/logo/logo.png"
+                  alt="WebX DAO"
+                />
               </div>
               <div className="-mr-2">
                 <Popover.Button className="inline-flex items-center justify-center p-2 text-gray-400 rounded-md bg-white/20 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-cyber-webx">

src/components/Home/HeroSection/Hero.js

@@ -15,31 +15,26 @@ export default function Hero() {
                   <div className="lg:py-24">
                     <h1 className="mt-4 text-5xl font-bold tracking-tight text-white sm:mt-5 sm:text-6xl lg:mt-6 xl:text-7xl">
                       <span className="block">Build with us,</span>
-                      <span className="block text-white">
-                        the future of web.
-                      </span>
+                      <span className="block text-white">the future of web.</span>
                     </h1>
                     <p className="mt-3 text-base text-white/70 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
-                      We focus on building and talking about possible future
-                      usage of web technologies.
+                      We focus on building and talking about possible future usage of web
+                      technologies.
                     </p>
                     <div className="mt-8 sm:mt-6">
                       <div className="sm:mx-auto sm:max-w-7xl">
                         <div className="sm:flex">
-                          <div className="flex flex-col w-full mb-6 sm:mt-0 md:flex-row gap-x-4 gap-y-4">
+                          <div className="flex flex-col md:items-center md:justify-center lg:items-start lg:justify-start w-full mb-6 sm:mt-0 md:flex-row gap-x-4 gap-y-4">
                             <DiscordButton></DiscordButton>
                             <ContributeButton></ContributeButton>
                           </div>
                         </div>
                         <CallToActionHero></CallToActionHero>
                         <p className="mt-3 text-sm text-white/70 sm:mt-4">
-                          We are an opensource community working around the
-                          future of the web. Learn blockchain technology
-                          together. The community is powered by{" "}
+                          We are an opensource community working around the future of the web. Learn
+                          blockchain technology together. The community is powered by{" "}
                           <Link href="https://devprotocol.xyz/">
-                            <a className="font-medium text-white">
-                              Dev Protocol
-                            </a>
+                            <a className="font-medium text-white">Dev Protocol</a>
                           </Link>
                           .
                         </p>