Fixed smooth scrolling + Added animations to the services cards

src/Components/Pages/Hero/Hero.tsx

@@ -2,6 +2,11 @@ import HeroImg from "../../../assets/HeroImg.svg";
 import Stars from "../../../assets/Stars.svg";
 
 const Hero = () => {
+  const handleNavigation = (path: string) => {
+    const element = document.getElementById(path);
+    element?.scrollIntoView({ behavior: "smooth" });
+  };
+
   return (
     <div className="flex flex-col lg:mt-20 lg:flex-row 1920:padding-calc items-center">
       <div className="lg:w-1/2 w-full xl:w-1/2 hidden lg:flex transform origin-left">
@@ -32,7 +37,14 @@ const Hero = () => {
             so you can focus on what's important!
           </h2>
           <div className="flex mt-5 lg:mt-12 mx-20 lg:mx-0 lg:ml-auto rounded-xl bg-gradient-to-br from-gold-light to-gold-dark p-0.5 shadow-lg">
-            <a className="flex w-full" href="#Contact">
+            <a
+              className="flex w-full"
+              href="Contact"
+              onClick={(e) => {
+                e.preventDefault();
+                handleNavigation("Contact");
+              }}
+            >
               <button className="flex-1 font-medium md:px-8 py-3 text-2xl md:text-3xl bg-gradient-to-br from-custom-bglight to-custom-bgdark rounded-xl hover:bg-transparent hover:from-transparent hover:to-transparent transition duration-500">
                 Yes, I want that!
               </button>