update(homepage): learn more should move to zero skills section

src/components/header/index.jsx

@@ -1,4 +1,3 @@
-import { Link } from "react-router-dom";
 import FloraImg from "../../assets/images/floral.svg";
 import { homeHeroImage } from "../../assets/images";
 
@@ -17,12 +16,12 @@ const Header = () => {
             Clubs and workshops for secondary school girls across Africa to
             explore STEM subjects in a fun and supportive environment.
           </p>
-          <Link
-            to="/"
+          <a
+            href="#zero-tech-skills"
             className="bg-[#B70569] w-[240px] max-sm:text-sm rounded-[30px] text-white py-[18px] mt-2 inline-block text-center"
           >
             Learn More{" "}
-          </Link>
+          </a>
         </div>
         <div className="max-md:hidden">
           <img src={homeHeroImage} alt="" className="md:w-[850px] lg:w-fit" />

src/pages/home/page.jsx

@@ -21,7 +21,10 @@ const HomePage = () => {
           Engineering, and Mathematics (STEM)."
         />
       </section>
-      <section className="my-3 md:my-20 bg-[#F8F8F8] pt-5 pb-2">
+      <section
+        className="my-3 md:my-20 bg-[#F8F8F8] pt-5 pb-2"
+        id="zero-tech-skills"
+      >
         <div className="bg-white my-5 pt-5 md:pt-10 lg:pt-14 rounded-[32px] w-[90%] max-w-[1280px] mx-auto px-5">
           <h4 className="font-medium text-2xl md:text-3xl lg:text-4xl leading-normal md:leading-normal lg:leading-normal text-center">
             <span className="text-primaryPink font-bold ">