💫 UI Enhancement: Added AOS Scroll Animations + Fixed Auth Page Crash

client/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@reduxjs/toolkit": "^2.5.0",
     "@zegocloud/zego-uikit-prebuilt": "^2.14.0",
+    "aos": "^2.3.4",
     "axios": "^1.7.9",
     "client": "^0.0.1",
     "date-fns": "^4.1.0",

client/src/App.jsx

@@ -8,6 +8,9 @@ import { setUser } from "./store/slices/userSlice.jsx";
 import ScrollToTop from "./components/ScrollToTop";
 import ScrollRestoration from "./components/ScrollRestoration";
 import { Toaster, toast } from 'react-hot-toast';
+import AOS from "aos";
+import "aos/dist/aos.css";
+
 function App() {
   const matches = useMatches();
   const hideLayout = matches.some((match) => match.handle?.noLayout);
@@ -17,7 +20,7 @@ function App() {
     // Restore user session on app load
     const token = localStorage.getItem('token');
     const userData = localStorage.getItem('userData');
-    
+
     if (token && userData) {
       try {
         const parsedUserData = JSON.parse(userData);
@@ -29,6 +32,13 @@ function App() {
         localStorage.removeItem('userData');
       }
     }
+
+    // ✅ Initialize AOS
+    AOS.init({
+      duration: 1000,   // animation duration in ms
+      once: true,       // whether animation happens only once
+      easing: "ease-in-out", // default easing
+    });
   }, [dispatch]);
 
   return (
@@ -44,7 +54,7 @@ function App() {
 
       {!hideLayout && <Footer />}
       <ScrollToTop />
-      <Toaster position="top-right" /> 
+      <Toaster position="top-right" />
     </div>
   );
 }

client/src/pages/About.jsx

@@ -118,14 +118,13 @@ const About = () => {
       {/* Main Content */}
       <div className="relative z-10">
         {/* Hero Section */}
-        <section className="py-20 px-4">
+        <section className="py-20 px-4" data-aos="fade-up">
           <div className="container mx-auto max-w-6xl">
             <div
-              className={`text-center transition-all duration-1000 ${
-                isVisible
-                  ? "opacity-100 translate-y-0"
-                  : "opacity-0 translate-y-10"
-              }`}
+              className={`text-center transition-all duration-1000 ${isVisible
+                ? "opacity-100 translate-y-0"
+                : "opacity-0 translate-y-10"
+                }`}
             >
               <div className="inline-flex items-center gap-2 bg-purple-500/20 backdrop-blur-sm border border-purple-500/30 rounded-full px-6 py-2 mb-6">
                 <Sparkles className="w-5 h-5 text-purple-400" />
@@ -158,12 +157,10 @@ const About = () => {
               {stats.map((stat, index) => (
                 <div
                   key={index}
-                  className={`text-center group transition-all duration-500 ${
-                    isVisible
-                      ? "opacity-100 translate-y-0"
-                      : "opacity-0 translate-y-10"
-                  }`}
-                  style={{ transitionDelay: `${index * 150}ms` }}
+                  className={`text-center group transition-all duration-500 `}
+                  data-aos="fade-up"
+                  data-aos-delay={index * 200} // 👈 Staggered delay (0ms, 200ms, 400ms)
+                  data-aos-duration="800"
                 >
                   <div className="bg-white/10 backdrop-blur-sm border border-white/20 rounded-2xl p-6 hover:bg-white/20 transition-all duration-300 group-hover:scale-105">
                     <div className="text-purple-400 mb-2 flex justify-center group-hover:scale-110 transition-transform duration-300">
@@ -197,14 +194,10 @@ const About = () => {
               {services.map((service, index) => (
                 <div
                   key={service.id}
-                  className={`group relative overflow-hidden rounded-2xl transition-all duration-700 hover:scale-105 ${
-                    isVisible
-                      ? "opacity-100 translate-y-0"
-                      : "opacity-0 translate-y-10"
-                  }`}
-                  style={{ transitionDelay: `${index * 200}ms` }}
-                  onMouseEnter={() => setActiveCard(service.id)}
-                  onMouseLeave={() => setActiveCard(null)}
+                  className="group relative overflow-hidden rounded-2xl transition-all duration-700 hover:scale-105"
+                  data-aos={index % 2 === 0 ? "fade-right" : "fade-left"}
+                  data-aos-delay={index * 200}
+                  data-aos-duration="1000"
                 >
                   {/* Card Background */}
                   <div
@@ -235,12 +228,9 @@ const About = () => {
                       {service.features.map((feature, featureIndex) => (
                         <div
                           key={featureIndex}
-                          className={`flex items-center gap-3 transition-all duration-300 ${
-                            activeCard === service.id
-                              ? "opacity-100 translate-x-0"
-                              : "opacity-70 translate-x-2"
-                          }`}
-                          style={{ transitionDelay: `${featureIndex * 100}ms` }}
+                          className="flex items-center gap-3 transition-all duration-300"
+                          data-aos="fade-up"
+                          data-aos-delay={featureIndex * 100}
                         >
                           <CheckCircle className="w-5 h-5 text-green-400 flex-shrink-0" />
                           <span className="text-gray-300 group-hover:text-white transition-colors duration-300">
@@ -267,8 +257,9 @@ const About = () => {
           </div>
         </section>
 
+
         {/* CTA Section */}
-        <section className="py-20 px-4">
+        <section className="py-20 px-4" data-aos="fade-right">
           <div className="container mx-auto max-w-4xl">
             <div className="text-center bg-gradient-to-r from-purple-600/20 to-pink-600/20 backdrop-blur-sm border border-purple-500/30 rounded-3xl p-12">
               <h2 className="text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-white to-purple-200 bg-clip-text text-transparent">

client/src/pages/Blog.jsx

@@ -220,7 +220,7 @@ const Blog = () => {
   );
 
   return (
-    <section className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 text-white py-20">
+    <section className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 text-white py-20" data-aos="fade-up">
       {/* Animated Background */}
       <div className="fixed inset-0 pointer-events-none">
         <div className="absolute top-1/4 left-1/4 w-64 h-64 bg-blue-500/20 rounded-full blur-3xl animate-pulse"></div>