Changed buttons to tab style things in the Services cards container

src/Components/Pages/Services/Buttons.tsx

@@ -16,7 +16,7 @@ const Buttons = ({ changeActiveGroup }: props) => {
   };
 
   return (
-    <div className="lg:px-40 flex flex-row 2xl:gap-8 gap-2 mx-2 md:gap-5 mt-5 lg:mt-10 mb-4 flex-wrap justify-center">
+    <div className="lg:px-40 flex flex-row 2xl:gap-8 gap-2 mx-2 md:gap-5 mt-5 lg:mt-10 mb-4 justify-center">
       <CardBtn
         title="Marketing"
         onClick={() => handleClick("markCards")}

src/Components/Pages/Services/CameraCards.tsx

@@ -20,19 +20,19 @@ const CameraCards = () => {
         title={t("services.cards.media.card2.title")}
         description={t("services.cards.media.card2.description")}
         imgSrc={CaptureImg}
-        delay="0.2s"
+        delay="0.1s"
       />
       <Card
         title={t("services.cards.media.card3.title")}
         description={t("services.cards.media.card3.description")}
         imgSrc={EditImg}
-        delay="0.4s"
+        delay="0.2s"
       />
       <Card
         title={t("services.cards.media.card4.title")}
         description={t("services.cards.media.card4.description")}
         imgSrc={PublishImg}
-        delay="0.6s"
+        delay="0.3s"
       />
     </div>
   );

src/Components/Pages/Services/CardBtn.tsx

@@ -6,19 +6,13 @@ interface props {
 
 const CardBtn = ({ title, onClick, isSelected }: props) => {
   const buttonClass = isSelected
-    ? "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
-    ? "flex flex-1 flex-row mt-5 lg:mt-12 bg-gradient-to-b from-gold-light to-gold-dark p-0.5 shadow-lg transform scale-110"
-    : "flex flex-1 flex-row mt-5 lg:mt-12 bg-gradient-to-b from-gold-light to-gold-dark p-0.5 shadow-lg";
+    ? "w-full font-bold md:px-4 py-1 text-xs lg:text-sm xl:text-2xl cursor-pointer"
+    : "w-full font-medium md:px-4 py-1 text-xs lg:text-sm xl:text-xl text-gray-400 shadow-inner hover:text-text-gold cursor-pointer";
 
   return (
-    <div className={divClass}>
-      <button className={buttonClass} onClick={onClick}>
+      <a className={buttonClass} onClick={onClick}>
         {title}
-      </button>
-    </div>
+      </a>
   );
 };
 

src/Components/Pages/Services/MarketingCards.tsx

@@ -20,19 +20,19 @@ const MarketingCards = () => {
         title={t("services.cards.marketing.card2.title")}
         description={t("services.cards.marketing.card2.description")}
         imgSrc={CreateImg}
-        delay="0.2s"
+        delay="0.1s"
       />
       <Card
         title={t("services.cards.marketing.card3.title")}
         description={t("services.cards.marketing.card3.description")}
         imgSrc={ScaleImg}
-        delay="0.4s"
+        delay="0.2s"
       />
       <Card
         title={t("services.cards.marketing.card4.title")}
         description={t("services.cards.marketing.card4.description")}
         imgSrc={ExecuteImg}
-        delay="0.6s"
+        delay="0.3s"
       />
     </div>
   );

src/Components/Pages/Services/SocialMedia.tsx

@@ -20,19 +20,19 @@ const SocialMediaCards = () => {
         title={t("services.cards.social.card2.title")}
         description={t("services.cards.social.card2.description")}
         imgSrc={ScheduleImg}
-        delay="0.2s"
+        delay="0.1s"
       />
       <Card
         title={t("services.cards.social.card3.title")}
         description={t("services.cards.social.card3.description")}
         imgSrc={TargetImg}
-        delay="0.4s"
+        delay="0.2s"
       />
       <Card
         title={t("services.cards.social.card4.title")}
         description={t("services.cards.social.card4.description")}
         imgSrc={ExpandImg}
-        delay="0.6s"
+        delay="0.3s"
       />
     </div>
   );

src/Components/Pages/Services/WesiteCards.tsx

@@ -20,19 +20,19 @@ const WesiteCards = () => {
         title={t("services.cards.website.card2.title")}
         description={t("services.cards.website.card2.description")}
         imgSrc={DesignImg}
-        delay="0.2s"
+        delay="0.1s"
       />
       <Card
         title={t("services.cards.website.card3.title")}
         description={t("services.cards.website.card3.description")}
         imgSrc={CodeImg}
-        delay="0.4s"
+        delay="0.2s"
       />
       <Card
         title={t("services.cards.website.card4.title")}
         description={t("services.cards.website.card4.description")}
         imgSrc={BuildImg}
-        delay="0.6s"
+        delay="0.3s"
       />
     </div>
   );