Final touches

src/Components/Footer/Footer.tsx

@@ -19,7 +19,7 @@ const Footer = () => {
         >
           <FaLinkedin className="text-gold-light" size={30} />
         </a>
-        <a
+        {/* <a
           href="https://instagram.com"
           target="_blank"
           rel="noopener noreferrer"
@@ -28,7 +28,7 @@ const Footer = () => {
         </a>
         <a href="https://twitter.com" target="_blank" rel="noopener noreferrer">
           <FaXTwitter className="text-gold-light" size={30} />
-        </a>
+        </a> */}
       </div>
       <p className="text-center text-gray-400 font-medium">
         &copy; 2024 LK Results. All rights reservered.

src/Components/Navbar/Navbar.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from "react-i18next";
 
 export default () => {
   const [state, setState] = useState(false);
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
 
   const [colorChange, setColorChange] = useState(false);
   const changeColor = () => {
@@ -28,7 +28,16 @@ export default () => {
 
   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" });
+    }
+  };
+
+  const changeLanguage = (lng: string) => {
+    i18n.changeLanguage(lng);
   };
 
   return (
@@ -64,7 +73,7 @@ export default () => {
           </div>
         </div>
         <div
-          className={`absolute top-[3.24rem] md:top-0 left-0 w-full z-50 flex flex-col items-center justify-center pb-3 mt-8 md:relative md:bg-transparent md:pb-0 md:mt-0 ${
+          className={`absolute top-[3.24rem] md:top-0 left-0 w-full z-50 flex flex-col md:flex-row items-center justify-center pb-3 mt-8 md:relative md:bg-transparent md:pb-0 md:mt-0 ${
             state
               ? colorChange
                 ? "block bg-black bg-opacity-80 transition duration-500"
@@ -72,7 +81,7 @@ export default () => {
               : "hidden md:flex"
           }`}
         >
-          <ul className="text-text-gold space-y-8 md:flex md:space-x-6 md:space-y-0">
+          <ul className="text-text-gold space-y-8 md:ml-auto md:flex md:space-x-6 md:space-y-0 justify-center items-center">
             {navigation.map((item, idx) => {
               return (
                 <li key={idx} className="hover:text-white">
@@ -91,6 +100,12 @@ export default () => {
               );
             })}
           </ul>
+          <button
+            className="mt-5 md:mt-0 md:ml-auto"
+            onClick={() => changeLanguage(i18n.language === "en" ? "pt" : "en")}
+          >
+            {i18n.language === "en" ? "PT" : "EN"}
+          </button>
         </div>
       </div>
     </nav>

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>
   );