Fix link issue caused by z index, add more vibe on the about statement

Author: cindykandie

src/components/AboutUs/AboutUs.tsx

@@ -7,14 +7,10 @@ export default function AboutUs() {
       <h2 className="text-3xl md:text-6xl tracking-wide md:font-light uppercase">
         About Us
       </h2>
-      <p className="hidden md:inline-block text-4xl font-bold ">
-        Empowering great talent
-      </p>
       <p className="sm:text-sm md:text-xl tracking-wide text-center space-y-4">
-        We bring together people who are passionate about React JS and{' '}
-        <br className="hidden md:display" />
-        it&apos;s ecosystem. We are a community of full-stack developers,
-        frontend developers and so much more
+        We are a vibrant community of developers passionate about React NextJs React Native and the powerful ecosystem. Our mission is to empower developers—from full-stack
+        experts to frontend enthusiasts—to grow, collaborate, and create meaningful 
+        solutions. Join us to connect, learn, and contribute to the future of web development.
       </p>
     </section>
   );

src/components/Events/Events.tsx

@@ -59,7 +59,7 @@ export default function Events() {
   return (
     <section
       id="events"
-      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"
+      className="relative flex flex-col items-center justify-center w-full pt-16 bg-[#023e8a] md:py-20 gap-y-2 md:gap-y-5"
     >
 
       <h2 className="pb-2 text-3xl text-white font-bold md:pb-10">Community Events</h2>

src/components/MissionPillars/MissionPillars.tsx

@@ -21,7 +21,7 @@ export default function MissionPillars() {
 
   return (
     <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]">
+      <h2 className="uppercase font-bold text-2xl sm:text-3xl md:text-5xl tracking-wide text-center mb-6 md:mb-8 text-[#f6f7f8]">
         Our Mission Pillars
       </h2>
       {pillars.map((pillar, index) => (

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 fixed top-0 bg-black bg-opacity-50">
+      <header className="lg:pl-[49px] w-full fixed top-0 bg-black bg-opacity-50 z-10">
         <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-[#0096c7]">
+        <div className="flex flex-col py-12 bg-[#030e30] text-white">
           <AboutUs />
         </div>
         <MissionPillars />