Fix navbar-blur,hero spacing, 'See more event' btn

Author: Muchael123

src/components/Events/Events.tsx

@@ -63,7 +63,7 @@ export default function Events() {
     >
 
       <h2 className="pb-2 text-3xl text-white font-bold md:pb-10">Community Events</h2>
-      <div className="grid grid-cols-1 gap-y-4 md:gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-3 xl:gap-x-8 md:grid-cols-2 px-4 md:px-10 lg:px-16 py-8 md:py-14 xl:py-16">
+      <div className="grid grid-cols-1 gap-y-4  md:gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-3 xl:gap-x-8 md:grid-cols-2 px-4 md:px-10 lg:px-16 pt-8 md:pt-14 xl:pt-16">
         {events.map((event) => (
           <DisplayRC
             key={event.id}
@@ -74,18 +74,17 @@ export default function Events() {
             target={event.target}
           />
         ))}
-
-        <div className="flex items-center justify-center pt-1 tracking-wide mt-4 text-white md:pt-0 md:text-right md:absolute md:bottom-24 md:right-10 2xl:bottom-26 lg:right-16">
+      </div>
+      <div className="flex items-start justify-center md:justify-end tracking-wide mt-4  px-4 md:px-10 lg:px-16  w-full text-white pb-10 md:pb-14 xl:pb-16">
           <Link href="https://kommunity.com/reactjs-developer-community-kenya-reactdevske/events">
             <a
               target="_blank"
-              className="bg-[#61dafb] text-black px-6 py-3 rounded-full font-semibold text-lg hover:bg-[#48cae4] transition duration-300 ease-in-out hover:scale-105 hover:shadow-lg"
+              className="bg-[#61dafb] text-black px-6 w-full max-w-[350px] text-center py-3 rounded-md font-semibold text-lg hover:bg-[#48cae4] transition duration-300 ease-in-out hover:scale-105 hover:shadow-lg"
             >
               See More Events
             </a>
           </Link>
         </div>
-      </div>
     </section>
   );
 }

src/components/HeroHeader/MobileHero.tsx

@@ -6,14 +6,14 @@ import backgroundImage from '/public/images/hero-image.jpg'; // Add your backgro
 export default function MobileHero() {
   return (
     <div
-      className="flex h-[50vh] items-center justify-center bg-black bg-cover bg-center text-white mt-0"
+      className="flex items-center justify-center bg-black bg-cover bg-center text-white mt-0"
       style={{
         backgroundImage: `url(${backgroundImage.src})`
       }}
     >
 
       <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"
+      className="bg-black pt-[20vh] h-full justify-end items-center pb-[5vh] 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 

src/components/Navbar/Navbar.tsx

@@ -23,7 +23,7 @@ export default function Navbar() {
 
   if (!screenWidth) return null;
   return (
-    <header className="lg:pl-[49px] fixed top-0  w-full bg-black text-white justify-between bg-opacity-50 z-10">
+    <header className="lg:pl-[49px] fixed top-0 backdrop-blur-md 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 className="">
           <Link href={HOME}>