Fix the footer padding and spacing for better UI

Author: cindykandie

src/components/Events/Events.tsx

@@ -59,11 +59,11 @@ export default function Events() {
   return (
     <section
       id="events"
-      className="relative flex flex-col items-center justify-center w-full pt-16 bg-[#09AFC6] md:py-20 gap-y-2 md:gap-y-5"
+      className="relative flex flex-col items-center justify-center w-full pt-16 bg-[#023e8a] -z-10 md:py-20 gap-y-2 md:gap-y-5"
     >
 
-      <h2 className="pb-2 text-3xl 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 bg-[#09AFC6] px-4 md:px-10 lg:px-16 py-8 md:py-14 xl:py-16">
+      <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">
         {events.map((event) => (
           <DisplayRC
             key={event.id}

src/components/HeroHeader/DesktopHero.tsx

@@ -16,7 +16,7 @@ export default function HeroHeader() {
         <Navbar />
       </div>
       <div className="w-full flex flex-col items-center justify-center z-10 bg-black bg-opacity-30">
-        <h1 className="font-montserrat font-bold text-center text-white text-[40px] leading-10 w-[388px] mx-auto mt-20">
+        <h1 className="font-montserrat font-bold text-center text-white text-[40px] leading-10 w-[388px] mx-auto mt-24">
           React Developer Community Kenya
         </h1>
         <p className="font-montserrat text-white w-[570px] mx-auto text-center mt-5 mb-[45px]">

src/components/MissionPillars/MissionPillars.tsx

@@ -20,7 +20,7 @@ export default function MissionPillars() {
   ];
 
   return (
-    <section className="flex flex-col w-full items-center bg-[#90e0ef] py-8 md:py-12 space-y-8 md:space-y-12">
+    <section className="flex flex-col w-full items-center bg-[#0077b6] py-8 md:py-12 space-y-8 md:space-y-12">
       <h2 className="uppercase font-bold text-2xl sm:text-3xl md:text-5xl tracking-wide text-center mb-6 md:mb-8 text-[#20232a]">
         Our Mission Pillars
       </h2>

src/components/Navbar/Navbar.tsx

@@ -8,7 +8,7 @@ import LinkButton from '../LinkButton/LinkButton';
 export default function Navbar() {
   return (
     <>
-      <header className="lg:pl-[49px] w-full bg-transparent">
+      <header className="lg:pl-[49px] w-full fixed top-0 bg-black bg-opacity-50">
         <nav className="nav py-4 pl-5 flex flex-col md:flex-row justify-around items-center">
           <div>
             <Link href={HOME}>

src/pages/index.page.tsx

@@ -23,7 +23,7 @@ export default function Home() {
       </Head>
       <main className="">
         <HeroHeader />
-        <div className="flex flex-col py-12 bg-[#caf0f8]">
+        <div className="flex flex-col py-12 bg-[#0096c7]">
           <AboutUs />
         </div>
         <MissionPillars />