Merge branch 'develop' into translation

src/Components/Pages/Hero/Hero.tsx

@@ -5,6 +5,11 @@ import Stars from "../../../assets/Stars.svg";
 const Hero = () => {
   const { t } = useTranslation();
 
+  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">

src/Components/Pages/Services/CameraCards.tsx

@@ -9,7 +9,7 @@ const CameraCards = () => {
   const { t } = useTranslation();
 
   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={t("services.cards.media.card1.title")}
         description={t("services.cards.media.card1.description")}

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

@@ -9,7 +9,7 @@ const MarketingCards = () => {
   const { t } = useTranslation();
 
   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={t("services.cards.marketing.card1.title")}
         description={t("services.cards.marketing.card1.description")}

src/Components/Pages/Services/SocialMedia.tsx

@@ -9,7 +9,7 @@ const SocialMediaCards = () => {
   const { t } = useTranslation();
 
   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={t("services.cards.social.card1.title")}
         description={t("services.cards.social.card1.description")}

src/Components/Pages/Services/WesiteCards.tsx

@@ -9,7 +9,7 @@ const WesiteCards = () => {
   const { t } = useTranslation();
 
   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={t("services.cards.website.card1.title")}
         description={t("services.cards.website.card1.description")}