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>

src/Components/Pages/Services/CameraCards.tsx

@@ -6,7 +6,7 @@ import PublishImg from "../../../assets/imgs/Publish.jpg";
 
 const CameraCards = () => {
   return (
-    <div className="h-full flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
+    <div className="h-full fade-effect flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
       <Card title="Envision" description="Prespective" imgSrc={EnvisionImg} />
       <Card title="Capture" description="Moments" imgSrc={CaptureImg} />
       <Card title="Edit" description="Moments" imgSrc={EditImg} />

src/Components/Pages/Services/CardBtn.tsx

@@ -6,7 +6,7 @@ interface props {
 
 const CardBtn = ({ title, onClick, isSelected }: props) => {
   const buttonClass = isSelected
-    ? "w-full font-medium md:px-4 py-1 text-xs lg:text-sm xl:text-lg bg-gradient-to-br from-custom-bglight to-custom-bgdark"
+    ? "w-full font-bold md:px-4 py-1 text-xs lg:text-sm xl:text-lg bg-gradient-to-br from-custom-bglight to-custom-bgdark"
     : "w-full font-medium md:px-4 py-1 text-xs lg:text-sm xl:text-lg bg-gradient-to-br from-custom-bglight to-custom-bgdark text-gray-400 shadow-inner";
 
   const divClass = isSelected

src/Components/Pages/Services/MarketingCards.tsx

@@ -6,7 +6,7 @@ import ExecuteImg from "../../../assets/imgs/Execute.jpg";
 
 const MarketingCards = () => {
   return (
-    <div className="h-full flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
+    <div className="h-full fade-effect flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
       <Card title="Analise" description="Problem" imgSrc={AnaliseImg} />
       <Card title="Create" description="Strategy" imgSrc={CreateImg} />
       <Card title="Scale" description="Company" imgSrc={ScaleImg} />

src/Components/Pages/Services/SocialMedia.tsx

@@ -6,7 +6,7 @@ import ExpandImg from "../../../assets/imgs/Expand.jpg";
 
 const SocialMediaCards = () => {
   return (
-    <div className="h-full flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
+    <div className="h-full fade-effect flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
       <Card title="Algorithm" description="Analise" imgSrc={AlgorithmImg} />
       <Card title="Schedule" description="Content" imgSrc={ScheduleImg} />
       <Card title="Target" description="Audience" imgSrc={TargetImg} />

src/Components/Pages/Services/WesiteCards.tsx

@@ -6,7 +6,7 @@ import BuildImg from "../../../assets/imgs/Build.png";
 
 const WesiteCards = () => {
   return (
-    <div className="h-full flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
+    <div className="h-full fade-effect flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
       <Card title="Idealize" description="Website" imgSrc={IdealizeImg} />
       <Card title="Design" description="Website" imgSrc={DesignImg} />
       <Card title="Code" description="Website" imgSrc={CodeImg} />

src/index.css

@@ -27,3 +27,16 @@ body {
 .gold-text {
   @apply bg-clip-text text-transparent bg-gradient-to-br from-gold-light to-gold-dark;
 }
+
+.fade-effect {
+  animation: fadeEffect 1s ease-in-out;
+}
+
+@keyframes fadeEffect {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}