redesigned app for cleaner ux

src/Components/Pages/Services/CardGroup.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
 import WesiteCards from "./WesiteCards";
 import Buttons from "./Buttons";
 import MarketingCards from "./MarketingCards";
@@ -7,6 +8,7 @@ import SocialMediaCards from "./SocialMedia";
 
 const CardGroup = () => {
   const [activeGroup, setActiveGroup] = useState("webCards");
+  const prefersReducedMotion = useReducedMotion();
 
   const changeActiveGroup = (group: string) => {
     setActiveGroup(group);
@@ -31,9 +33,29 @@ const CardGroup = () => {
   }
 
   return (
-    <div className="h-full font-medium md:px-8 py-3 text-2xl md:text-3xl bg-gradient-to-br from-custom-bglight to-custom-bgdark rounded-xl flex flex-col">
-      {ActiveCards && <ActiveCards />}
+    <div className="flex flex-col gap-8 lg:gap-10">
       <Buttons changeActiveGroup={changeActiveGroup} />
+      <div className="relative">
+        <AnimatePresence mode="wait">
+          {ActiveCards && (
+            <motion.div
+              key={activeGroup}
+              initial={
+                prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 12 }
+              }
+              animate={
+                prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+              }
+              exit={
+                prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: -12 }
+              }
+              transition={{ type: "spring", damping: 26, stiffness: 220 }}
+            >
+              <ActiveCards />
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
     </div>
   );
 };