Final touches

src/Components/Pages/Hero/Hero.tsx

@@ -7,7 +7,12 @@ const Hero = () => {
 
   const handleNavigation = (path: string) => {
     const element = document.getElementById(path);
-    element?.scrollIntoView({ behavior: "smooth" });
+    const navbarHeight = 110; // Replace with your navbar's height
+    if (element) {
+      const top =
+        element.getBoundingClientRect().top + window.scrollY - navbarHeight;
+      window.scrollTo({ top: top, behavior: "smooth" });
+    }
   };
 
   return (

src/Components/Pages/Services/CameraCards.tsx

@@ -9,26 +9,30 @@ const CameraCards = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="h-full fade-effect flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
+    <div className="h-full flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
       <Card
         title={t("services.cards.media.card1.title")}
         description={t("services.cards.media.card1.description")}
         imgSrc={EnvisionImg}
+        delay="0s"
       />
       <Card
         title={t("services.cards.media.card2.title")}
         description={t("services.cards.media.card2.description")}
         imgSrc={CaptureImg}
+        delay="0.2s"
       />
       <Card
         title={t("services.cards.media.card3.title")}
         description={t("services.cards.media.card3.description")}
         imgSrc={EditImg}
+        delay="0.4s"
       />
       <Card
         title={t("services.cards.media.card4.title")}
         description={t("services.cards.media.card4.description")}
         imgSrc={PublishImg}
+        delay="0.6s"
       />
     </div>
   );

src/Components/Pages/Services/MarketingCards.tsx

@@ -9,26 +9,30 @@ const MarketingCards = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="h-full fade-effect flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
+    <div className="h-full flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
       <Card
         title={t("services.cards.marketing.card1.title")}
         description={t("services.cards.marketing.card1.description")}
         imgSrc={AnaliseImg}
+        delay="0s"
       />
       <Card
         title={t("services.cards.marketing.card2.title")}
         description={t("services.cards.marketing.card2.description")}
         imgSrc={CreateImg}
+        delay="0.2s"
       />
       <Card
         title={t("services.cards.marketing.card3.title")}
         description={t("services.cards.marketing.card3.description")}
         imgSrc={ScaleImg}
+        delay="0.4s"
       />
       <Card
         title={t("services.cards.marketing.card4.title")}
         description={t("services.cards.marketing.card4.description")}
         imgSrc={ExecuteImg}
+        delay="0.6s"
       />
     </div>
   );

src/Components/Pages/Services/ServiceCard.tsx

@@ -2,13 +2,18 @@ interface IProps {
   title: string;
   description: string;
   imgSrc: string;
+  delay: string;
 }
 
-const Card = ({ title, description, imgSrc }: IProps) => {
+const Card = ({ title, description, imgSrc, delay }: IProps) => {
   return (
     <div
       className="flex flex-col justify-end flex-1 h-full border-solid border shadow-lg bg-cover bg-center text-center"
-      style={{ backgroundImage: `url(${imgSrc})` }}
+      style={{
+        backgroundImage: `url(${imgSrc})`,
+        animation: `fadeEffect 1s ${delay} forwards`,
+        opacity: 0, // Add this line
+      }}
     >
       <div className="lg:my-6">
         <h2

src/Components/Pages/Services/Services.tsx

@@ -20,8 +20,8 @@ const Services = () => {
       </h1>
       <h1>
         {t("services.heading.part3")}
-        <span className="gold-text">*</span>
-        {t("services.heading.part4")}
+        <span className="gold-text">{t("services.heading.part4")}</span>
+        {t("services.heading.part5")}
       </h1>
 
       <h2 className="sub-header-text">{t("services.subheading")}</h2>

src/Components/Pages/Services/SocialMedia.tsx

@@ -9,26 +9,30 @@ const SocialMediaCards = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="h-full fade-effect flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
+    <div className="h-full flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
       <Card
         title={t("services.cards.social.card1.title")}
         description={t("services.cards.social.card1.description")}
         imgSrc={AlgorithmImg}
+        delay="0s"
       />
       <Card
         title={t("services.cards.social.card2.title")}
         description={t("services.cards.social.card2.description")}
         imgSrc={ScheduleImg}
+        delay="0.2s"
       />
       <Card
         title={t("services.cards.social.card3.title")}
         description={t("services.cards.social.card3.description")}
         imgSrc={TargetImg}
+        delay="0.4s"
       />
       <Card
         title={t("services.cards.social.card4.title")}
         description={t("services.cards.social.card4.description")}
         imgSrc={ExpandImg}
+        delay="0.6s"
       />
     </div>
   );

src/Components/Pages/Services/WesiteCards.tsx

@@ -9,26 +9,30 @@ const WesiteCards = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="h-full fade-effect flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
+    <div className="h-full flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
       <Card
         title={t("services.cards.website.card1.title")}
         description={t("services.cards.website.card1.description")}
         imgSrc={IdealizeImg}
+        delay="0s"
       />
       <Card
         title={t("services.cards.website.card2.title")}
         description={t("services.cards.website.card2.description")}
         imgSrc={DesignImg}
+        delay="0.2s"
       />
       <Card
         title={t("services.cards.website.card3.title")}
         description={t("services.cards.website.card3.description")}
         imgSrc={CodeImg}
+        delay="0.4s"
       />
       <Card
         title={t("services.cards.website.card4.title")}
         description={t("services.cards.website.card4.description")}
         imgSrc={BuildImg}
+        delay="0.6s"
       />
     </div>
   );