Fixed the ui of home page and navbar component for tablet screens

Author: Tarun Sharma

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 href="https://webxdao.github.io/">
@@ -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-8" src="/images/logo/white_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>