Fix dropdown color and hero spacing

Author: Muchael123

src/components/HeroHeader/DesktopHero.tsx

@@ -4,7 +4,7 @@ import LinkButton from '../LinkButton/LinkButton';
 export default function HeroHeader() {
   return (
     <div
-      className="relative bg-cover bg-center bg-no-repeat"
+      className="relative bg-cover  bg-center bg-no-repeat"
       style={{
         backgroundImage: `url('/images/hero-image.jpg')`,
         backgroundColor: '#160c0c',
@@ -21,7 +21,7 @@ export default function HeroHeader() {
         </p>
         <div className="flex items-center justify-center mb-44 relative">
           <LinkButton
-            className="flex justify-center items-center bg-[#EC0505] w-[307px] h-[61px] rounded-md text-white font-montserrat font-bold"
+            className="flex justify-center items-center bg-[#EC0505] hover:bg-[#e12e2e] transition-all duration:200 hover:scale-105 w-[307px] h-[61px] rounded-md text-white font-montserrat font-bold"
             href="https://bit.ly/joinreactdevske"
             target="_blank"
             rel="noopener noreferrer"

src/components/HeroHeader/MobileHero.tsx

@@ -6,13 +6,15 @@ import backgroundImage from '/public/images/hero-image.jpg'; // Add your backgro
 export default function MobileHero() {
   return (
     <div
-      className="relative bg-black bg-cover bg-center text-white mt-0"
+      className="flex h-[80vh] bg-black bg-cover bg-center text-white mt-0"
       style={{
         backgroundImage: `url(${backgroundImage.src})`
       }}
     >
 
-      <div className="bg-black bg-opacity-50 p-6 rounded-md"> {/* Adds opacity to make text more legible */}
+      <div 
+      className="bg-black h-full justify-end items-center flex-col bg-opacity-50 p-6 rounded-md flex   bg-cover bg-center text-white mt-0"
+      > {/* Adds opacity to make text more legible */}
         <h1 className="font-robotoMono font-medium text-2xl text-center mb-2 text-white">
           React Developer Community Kenya 
         </h1>
@@ -21,7 +23,7 @@ export default function MobileHero() {
             href="https://bit.ly/joinreactdevske"
             target="_blank"
             rel="noopener noreferrer"
-            className="flex justify-center items-center bg-[#12A04E] text-white w-44 rounded-md"
+            className="flex justify-center items-center bg-[#12A04E] text-white px-10 py-2 rounded-md"
           >
             Join ReactJS Kenya
           </LinkButton>

src/components/Navbar/Navbar.tsx

@@ -23,12 +23,12 @@ export default function Navbar() {
 
   if (!screenWidth) return null;
   return (
-    <header className="lg:pl-[49px] fixed top-0  w-full bg-black bg-opacity-50 z-10">
-      <nav className="nav py-2 md:py-4  md:pl-5 flex flex-row justify-around items-center">
+    <header className="lg:pl-[49px] fixed top-0  w-full bg-black text-white justify-between bg-opacity-50 z-10">
+      <nav className="nav py-2 md:py-4  md:pl-5 flex flex-row justify-between md:justify-around px-4 items-center">
         <div>
           <Link href={HOME}>
             <a>
-              <Logo size={screenWidth > breakpoint ? 60: 45} />
+              <Logo size={60} />
             </a>
           </Link>
         </div>