From 0538a0d13377f380053f4b6253111aa89bd6d706 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 1 Sep 2025 15:02:27 +0000
Subject: [PATCH 1/2] Initial plan


From 491a50f86076de2643865b2ee54dbf6187b63cec Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 1 Sep 2025 15:15:27 +0000
Subject: [PATCH 2/2] Comprehensive UI improvements with enhanced animations,
 shadows, and micro-interactions

Co-authored-by: Pavan0228 <140827035+Pavan0228@users.noreply.github.com>
---
 frontend/src/components/Layout.jsx | 21 +++++++------
 frontend/src/index.css             | 20 +++++++++---
 frontend/src/pages/Dashboard.jsx   | 34 ++++++++++----------
 frontend/src/pages/HomePage.jsx    | 43 +++++++++++++------------
 frontend/src/pages/Profile.jsx     |  8 ++---
 frontend/src/styles/styles.css     | 50 ++++++++++++++++++++++++++++++
 frontend/tailwind.config.js        | 15 +++++++++
 7 files changed, 137 insertions(+), 54 deletions(-)

diff --git a/frontend/src/components/Layout.jsx b/frontend/src/components/Layout.jsx
index fa65cc0..854a78c 100644
--- a/frontend/src/components/Layout.jsx
+++ b/frontend/src/components/Layout.jsx
@@ -90,21 +90,22 @@ const Layout = ({ setIsAuthenticated }) => {
                             {/* Theme Toggle */}
                             <button
                                 onClick={toggleTheme}
-                                className="p-2.5 rounded-xl bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:bg-gray-200 dark:hover:bg-gray-700 transition-all duration-300 hover:scale-105"
+                                className="p-2.5 rounded-xl bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:bg-gray-200 dark:hover:bg-gray-700 transition-all duration-300 hover:scale-105 hover:shadow-lg active:scale-95 relative overflow-hidden group"
                             >
+                                <div className="absolute inset-0 bg-gradient-to-r from-primary-500/10 to-secondary-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                                 {theme === "light" ? (
-                                    <Moon className="h-5 w-5 text-gray-600 dark:text-gray-400" />
+                                    <Moon className="h-5 w-5 text-gray-600 dark:text-gray-400 relative z-10 group-hover:rotate-12 transition-transform duration-300" />
                                 ) : (
-                                    <Sun className="h-5 w-5 text-yellow-500" />
+                                    <Sun className="h-5 w-5 text-yellow-500 relative z-10 group-hover:rotate-12 transition-transform duration-300" />
                                 )}
                             </button>
 
                             {/* Logout Button */}
                             <button
                                 onClick={handleLogout}
-                                className="btn-secondary p-2.5"
+                                className="btn-secondary p-2.5 hover:shadow-lg active:scale-95 group"
                             >
-                                <LogOut className="h-5 w-5" />
+                                <LogOut className="h-5 w-5 group-hover:-rotate-12 transition-transform duration-300" />
                                 <span className="hidden sm:inline-block ml-2">
                                     Logout
                                 </span>
@@ -129,7 +130,7 @@ const Layout = ({ setIsAuthenticated }) => {
                         <div className="p-4 flex justify-end">
                             <button
                                 onClick={() => setIsExpanded(!isExpanded)}
-                                className="text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 hidden lg:block transition-all duration-300 p-2 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-800"
+                                className="text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 hidden lg:block transition-all duration-300 p-2 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-800 hover:scale-110 active:scale-95"
                             >
                                 {isExpanded ? (
                                     <ChevronLeft size={20} />
@@ -144,19 +145,19 @@ const Layout = ({ setIsAuthenticated }) => {
                                     key={index}
                                     to={item.path}
                                     className={({ isActive }) => `
-                                        group w-full flex items-center px-4 py-4 mb-2 relative transition-all duration-300 rounded-xl
+                                        group w-full flex items-center px-4 py-4 mb-2 relative transition-all duration-300 rounded-xl hover:shadow-lg hover:-translate-y-0.5
                                         ${
                                             isActive
-                                                ? "bg-gradient-to-r from-primary-500/10 to-secondary-500/10 text-primary-600 dark:text-primary-400 border-l-4 border-primary-600"
+                                                ? "bg-gradient-to-r from-primary-500/10 to-secondary-500/10 text-primary-600 dark:text-primary-400 border-l-4 border-primary-600 shadow-lg"
                                                 : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white"
                                         }
                                     `}
                                 >
                                     <div
-                                        className={`relative transition-transform duration-300 group-hover:scale-110`}
+                                        className={`relative transition-transform duration-300 group-hover:scale-110 group-hover:rotate-6`}
                                     >
                                         <item.icon size={20} />
-                                        <span className="absolute -top-1 -right-1 h-2 w-2 bg-gradient-to-r from-primary-600 to-secondary-600 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
+                                        <span className="absolute -top-1 -right-1 h-2 w-2 bg-gradient-to-r from-primary-600 to-secondary-600 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 shadow-lg shadow-primary-500/50"></span>
                                     </div>
                                     {isExpanded ? (
                                         <span className="ml-4 font-medium">
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 621ea5e..93368ea 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -16,25 +16,37 @@
 
 @layer components {
     .btn-primary {
-        @apply inline-flex items-center justify-center px-6 py-3 bg-gradient-to-r from-primary-600 to-secondary-600 hover:from-primary-700 hover:to-secondary-700 text-white font-medium rounded-xl transition-all duration-300 shadow-lg hover:shadow-xl hover:shadow-primary-500/25 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none;
+        @apply inline-flex items-center justify-center px-6 py-3 bg-gradient-to-r from-primary-600 to-secondary-600 hover:from-primary-700 hover:to-secondary-700 text-white font-medium rounded-xl transition-all duration-300 shadow-lg hover:shadow-xl hover:shadow-primary-500/30 transform hover:scale-105 hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none active:scale-95;
     }
 
     .btn-secondary {
-        @apply inline-flex items-center justify-center px-6 py-3 bg-white dark:bg-gray-800 text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600 font-medium rounded-xl transition-all duration-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
+        @apply inline-flex items-center justify-center px-6 py-3 bg-white dark:bg-gray-800 text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600 font-medium rounded-xl transition-all duration-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:shadow-lg hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 active:scale-95;
     }
 
     .card {
-        @apply bg-white dark:bg-gray-800 backdrop-blur-xl border border-gray-200/50 dark:border-gray-700/50 rounded-2xl shadow-xl shadow-primary-500/10 dark:shadow-primary-500/5 transition-all duration-300;
+        @apply bg-white dark:bg-gray-800 backdrop-blur-xl border border-gray-200/50 dark:border-gray-700/50 rounded-2xl shadow-xl shadow-primary-500/10 dark:shadow-primary-500/5 transition-all duration-300 hover:shadow-2xl hover:shadow-primary-500/15 hover:-translate-y-1;
     }
 
     .input-field {
-        @apply w-full px-4 py-3 bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl focus:bg-white dark:focus:bg-gray-800 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-300 outline-none text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400;
+        @apply w-full px-4 py-3 bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl focus:bg-white dark:focus:bg-gray-800 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-300 outline-none text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 hover:border-gray-300 dark:hover:border-gray-600;
     }
 
     .gradient-text {
         @apply bg-gradient-to-r from-primary-600 to-secondary-600 bg-clip-text text-transparent;
     }
 
+    .feature-card {
+        @apply card p-8 cursor-pointer hover:border-primary-200 dark:hover:border-primary-800 hover:bg-gradient-to-br hover:from-primary-50/50 dark:hover:from-primary-900/20 hover:to-transparent;
+    }
+
+    .stat-card {
+        @apply text-center;
+    }
+
+    .step-card {
+        @apply text-center p-8 rounded-2xl bg-white dark:bg-gray-800 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border border-gray-100 dark:border-gray-700;
+    }
+
     .bg-pattern {
         background-image: radial-gradient(
             circle at 1px 1px,
diff --git a/frontend/src/pages/Dashboard.jsx b/frontend/src/pages/Dashboard.jsx
index 2b436ab..a0c2f53 100644
--- a/frontend/src/pages/Dashboard.jsx
+++ b/frontend/src/pages/Dashboard.jsx
@@ -191,38 +191,39 @@ const Dashboard = () => {
                       Array.from({ length: 4 }).map((_, index) => (
                           <div key={index} className="card p-6 animate-pulse">
                               <div className="flex items-center justify-between mb-4">
-                                  <div className="w-12 h-12 bg-gray-300 dark:bg-gray-600 rounded-xl"></div>
+                                  <div className="w-12 h-12 bg-gray-300 dark:bg-gray-600 rounded-xl animate-shimmer"></div>
                               </div>
-                              <div className="space-y-2">
-                                  <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-3/4"></div>
-                                  <div className="h-6 bg-gray-300 dark:bg-gray-600 rounded w-1/2"></div>
-                                  <div className="h-3 bg-gray-300 dark:bg-gray-600 rounded w-2/3"></div>
+                              <div className="space-y-3">
+                                  <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-3/4 animate-shimmer"></div>
+                                  <div className="h-6 bg-gray-300 dark:bg-gray-600 rounded w-1/2 animate-shimmer"></div>
+                                  <div className="h-3 bg-gray-300 dark:bg-gray-600 rounded w-2/3 animate-shimmer"></div>
                               </div>
                           </div>
                       ))
                     : stats.map((stat, index) => (
                           <div
                               key={index}
-                              className="card p-6 hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1"
+                              className="card p-6 hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 group animate-fade-in-scale"
+                              style={{ animationDelay: `${index * 0.1}s` }}
                           >
                               <div className="flex items-center justify-between mb-4">
                                   <div
-                                      className={`p-3 bg-${stat.color}-100 dark:bg-${stat.color}-900/20 rounded-xl`}
+                                      className={`p-3 bg-${stat.color}-100 dark:bg-${stat.color}-900/20 rounded-xl group-hover:scale-110 transition-transform duration-300 shadow-lg group-hover:shadow-xl`}
                                   >
                                       <stat.icon
-                                          className={`h-6 w-6 text-${stat.color}-600 dark:text-${stat.color}-400`}
+                                          className={`h-6 w-6 text-${stat.color}-600 dark:text-${stat.color}-400 group-hover:rotate-6 transition-transform duration-300`}
                                       />
                                   </div>
                               </div>
                               <div>
-                                  <p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">
+                                  <p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-1 uppercase tracking-wider">
                                       {stat.title}
                                   </p>
-                                  <p className="text-2xl font-bold text-gray-900 dark:text-white mb-1">
+                                  <p className="text-2xl font-bold text-gray-900 dark:text-white mb-1 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors duration-300">
                                       {stat.value}
                                   </p>
                                   <p
-                                      className={`text-sm ${
+                                      className={`text-sm font-medium ${
                                           stat.trend === "up"
                                               ? "text-green-600 dark:text-green-400"
                                               : stat.trend === "building"
@@ -260,19 +261,20 @@ const Dashboard = () => {
                         recentProjects.map((project, index) => (
                             <div
                                 key={index}
-                                className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-900/50 rounded-xl border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900 transition-colors cursor-pointer"
+                                className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-900/50 rounded-xl border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900 transition-all duration-300 cursor-pointer group hover:shadow-lg hover:-translate-y-0.5 animate-slide-in-up"
+                                style={{ animationDelay: `${index * 0.1}s` }}
                             >
                                 <div className="flex items-center gap-4">
-                                    <div className="p-2 bg-primary-100 dark:bg-primary-900/20 rounded-lg">
-                                        <Activity className="h-5 w-5 text-primary-600 dark:text-primary-400" />
+                                    <div className="p-2 bg-primary-100 dark:bg-primary-900/20 rounded-lg group-hover:scale-110 transition-transform duration-300 shadow-sm group-hover:shadow-md">
+                                        <Activity className="h-5 w-5 text-primary-600 dark:text-primary-400 group-hover:rotate-12 transition-transform duration-300" />
                                     </div>
                                     <div>
-                                        <h3 className="font-medium text-gray-900 dark:text-white">
+                                        <h3 className="font-medium text-gray-900 dark:text-white group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors duration-300">
                                             {project.name}
                                         </h3>
                                         <div className="flex items-center gap-4 mt-1">
                                             <span
-                                                className={`text-xs px-2 py-1 rounded-full font-medium ${
+                                                className={`text-xs px-2 py-1 rounded-full font-medium transition-transform duration-300 group-hover:scale-105 ${
                                                     project.status === "Active"
                                                         ? "bg-green-100 dark:bg-green-900/20 text-green-600 dark:text-green-400"
                                                         : "bg-yellow-100 dark:bg-yellow-900/20 text-yellow-600 dark:text-yellow-400"
diff --git a/frontend/src/pages/HomePage.jsx b/frontend/src/pages/HomePage.jsx
index da816d6..7dd6de3 100644
--- a/frontend/src/pages/HomePage.jsx
+++ b/frontend/src/pages/HomePage.jsx
@@ -180,24 +180,26 @@ const HomePage = () => {
                         <div className="flex flex-col sm:flex-row gap-4 justify-center mb-16">
                             <button
                                 onClick={() => navigate("/auth")}
-                                className="btn-primary px-8 py-4 text-lg font-semibold group"
+                                className="btn-primary px-8 py-4 text-lg font-semibold group relative overflow-hidden"
                             >
-                                Start Deploying Free
-                                <ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />
+                                <span className="relative z-10">Start Deploying Free</span>
+                                <ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform relative z-10" />
+                                <div className="absolute inset-0 bg-gradient-to-r from-primary-700 to-secondary-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                             </button>
-                            <button className="btn-secondary px-8 py-4 text-lg font-semibold">
-                                Watch Demo
+                            <button className="btn-secondary px-8 py-4 text-lg font-semibold group">
+                                <span>Watch Demo</span>
+                                <Globe className="ml-2 h-5 w-5 group-hover:rotate-12 transition-transform" />
                             </button>
                         </div>
 
                         {/* Stats */}
                         <div className="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
                             {stats.map((stat, index) => (
-                                <div key={index} className="text-center">
-                                    <div className="text-3xl md:text-4xl font-bold gradient-text mb-2">
+                                <div key={index} className="stat-card group animate-slide-in-up" style={{ animationDelay: `${index * 0.1}s` }}>
+                                    <div className="text-3xl md:text-4xl font-bold gradient-text mb-2 group-hover:scale-110 transition-transform duration-300">
                                         {stat.number}
                                     </div>
-                                    <div className="text-gray-600 dark:text-gray-400 font-medium">
+                                    <div className="text-gray-600 dark:text-gray-400 font-medium text-sm uppercase tracking-wider">
                                         {stat.label}
                                     </div>
                                 </div>
@@ -231,16 +233,17 @@ const HomePage = () => {
                         {features.map((feature, index) => (
                             <div
                                 key={index}
-                                className="card p-8 hover:shadow-xl transition-all duration-300 group"
+                                className="feature-card group animate-fade-in-scale"
+                                style={{ animationDelay: `${index * 0.1}s` }}
                             >
                                 <div
-                                    className={`w-16 h-16 bg-gradient-to-r ${feature.color} rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300`}
+                                    className={`w-16 h-16 bg-gradient-to-r ${feature.color} rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 group-hover:rotate-3 transition-all duration-300 shadow-lg group-hover:shadow-xl`}
                                 >
                                     <div className="text-white">
                                         {feature.icon}
                                     </div>
                                 </div>
-                                <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
+                                <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-4 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors duration-300">
                                     {feature.title}
                                 </h3>
                                 <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
@@ -265,40 +268,40 @@ const HomePage = () => {
                     </div>
 
                     <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-                        <div className="text-center">
-                            <div className="w-20 h-20 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center mx-auto mb-6">
+                        <div className="step-card animate-fade-in-scale" style={{ animationDelay: '0.1s' }}>
+                            <div className="w-20 h-20 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg hover:shadow-xl hover:scale-110 transition-all duration-300">
                                 <Github className="w-10 h-10 text-white" />
                             </div>
                             <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
                                 1. Connect Repository
                             </h3>
-                            <p className="text-gray-600 dark:text-gray-300">
+                            <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
                                 Connect your GitHub repository with one click.
                                 We support both public and private repos.
                             </p>
                         </div>
 
-                        <div className="text-center">
-                            <div className="w-20 h-20 bg-gradient-to-r from-purple-500 to-pink-600 rounded-full flex items-center justify-center mx-auto mb-6">
+                        <div className="step-card animate-fade-in-scale" style={{ animationDelay: '0.2s' }}>
+                            <div className="w-20 h-20 bg-gradient-to-r from-purple-500 to-pink-600 rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg hover:shadow-xl hover:scale-110 transition-all duration-300">
                                 <Code className="w-10 h-10 text-white" />
                             </div>
                             <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
                                 2. Configure & Build
                             </h3>
-                            <p className="text-gray-600 dark:text-gray-300">
+                            <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
                                 We automatically detect your framework and
                                 configure the optimal build settings.
                             </p>
                         </div>
 
-                        <div className="text-center">
-                            <div className="w-20 h-20 bg-gradient-to-r from-pink-500 to-red-600 rounded-full flex items-center justify-center mx-auto mb-6">
+                        <div className="step-card animate-fade-in-scale" style={{ animationDelay: '0.3s' }}>
+                            <div className="w-20 h-20 bg-gradient-to-r from-pink-500 to-red-600 rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg hover:shadow-xl hover:scale-110 transition-all duration-300">
                                 <Rocket className="w-10 h-10 text-white" />
                             </div>
                             <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
                                 3. Deploy & Go Live
                             </h3>
-                            <p className="text-gray-600 dark:text-gray-300">
+                            <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
                                 Your app is deployed globally with SSL, CDN, and
                                 monitoring included automatically.
                             </p>
diff --git a/frontend/src/pages/Profile.jsx b/frontend/src/pages/Profile.jsx
index 05b9b48..9febf4c 100644
--- a/frontend/src/pages/Profile.jsx
+++ b/frontend/src/pages/Profile.jsx
@@ -389,7 +389,7 @@ function Profile() {
                                             <div className="flex items-center gap-2">
                                                 {user.isGithubConnected ? (
                                                     <>
-                                                        <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
+                                                        <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse shadow-lg shadow-green-500/50"></div>
                                                         <span className="text-green-600 dark:text-green-400 font-medium text-sm">
                                                             Connected
                                                         </span>
@@ -409,7 +409,7 @@ function Profile() {
                                                 Profile
                                             </span>
                                             <div className="flex items-center gap-2">
-                                                <div className="w-2 h-2 bg-green-500 rounded-full"></div>
+                                                <div className="w-2 h-2 bg-green-500 rounded-full shadow-lg shadow-green-500/50"></div>
                                                 <span className="text-green-600 dark:text-green-400 font-medium text-sm">
                                                     Complete
                                                 </span>
@@ -456,7 +456,7 @@ function Profile() {
                                     {!isEditing ? (
                                         <button
                                             onClick={() => setIsEditing(true)}
-                                            className="flex items-center gap-2 px-6 py-3 bg-primary-600 hover:bg-primary-700 text-white rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl font-medium"
+                                            className="flex items-center gap-2 px-6 py-3 bg-primary-600 hover:bg-primary-700 text-white rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl font-medium hover:-translate-y-0.5 active:scale-95"
                                         >
                                             <Edit3 className="h-4 w-4" />
                                             Edit Profile
@@ -466,7 +466,7 @@ function Profile() {
                                             <button
                                                 onClick={handleUpdateDetails}
                                                 disabled={updating}
-                                                className="flex items-center gap-2 px-6 py-3 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors disabled:opacity-50 shadow-lg font-medium"
+                                                className="flex items-center gap-2 px-6 py-3 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-all duration-200 disabled:opacity-50 shadow-lg hover:shadow-xl font-medium hover:-translate-y-0.5 active:scale-95"
                                             >
                                                 {updating ? (
                                                     <Loader className="h-4 w-4 animate-spin" />
diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css
index 256c503..929786b 100644
--- a/frontend/src/styles/styles.css
+++ b/frontend/src/styles/styles.css
@@ -56,6 +56,37 @@
     }
 }
 
+@keyframes shimmer {
+    0% {
+        background-position: -200% 0;
+    }
+    100% {
+        background-position: 200% 0;
+    }
+}
+
+@keyframes slide-in-up {
+    0% {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes fade-in-scale {
+    0% {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
 .animate-bounce-gentle {
     animation: bounce-gentle 3s ease-in-out infinite;
 }
@@ -77,6 +108,25 @@
     animation: glow 2s ease-in-out infinite alternate;
 }
 
+.animate-shimmer {
+    background: linear-gradient(
+        90deg,
+        transparent,
+        rgba(255, 255, 255, 0.4),
+        transparent
+    );
+    background-size: 200% 100%;
+    animation: shimmer 2s infinite;
+}
+
+.animate-slide-in-up {
+    animation: slide-in-up 0.6s ease-out forwards;
+}
+
+.animate-fade-in-scale {
+    animation: fade-in-scale 0.5s ease-out forwards;
+}
+
 /* Gradient text effect */
 .gradient-text {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 9942232..b69acfd 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -65,6 +65,9 @@ export default {
                 "bounce-gentle": "bounce-gentle 2s infinite",
                 "pulse-gentle": "pulse-gentle 2s infinite",
                 glow: "glow 2s ease-in-out infinite alternate",
+                shimmer: "shimmer 2s infinite",
+                "slide-in-up": "slide-in-up 0.6s ease-out forwards",
+                "fade-in-scale": "fade-in-scale 0.5s ease-out forwards",
             },
             keyframes: {
                 "bounce-gentle": {
@@ -79,6 +82,18 @@ export default {
                     "0%": { boxShadow: "0 0 20px rgba(139, 92, 246, 0.3)" },
                     "100%": { boxShadow: "0 0 30px rgba(139, 92, 246, 0.6)" },
                 },
+                shimmer: {
+                    "0%": { backgroundPosition: "-200% 0" },
+                    "100%": { backgroundPosition: "200% 0" },
+                },
+                "slide-in-up": {
+                    "0%": { opacity: "0", transform: "translateY(30px)" },
+                    "100%": { opacity: "1", transform: "translateY(0)" },
+                },
+                "fade-in-scale": {
+                    "0%": { opacity: "0", transform: "scale(0.95)" },
+                    "100%": { opacity: "1", transform: "scale(1)" },
+                },
             },
             backgroundImage: {
                 "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",