From 90a88d5bc7477b4af3f26867217fa27e3bd57067 Mon Sep 17 00:00:00 2001
From: Technobot <marbotclaw@gmail.com>
Date: Sat, 11 Apr 2026 19:13:36 +0700
Subject: [PATCH 1/3] feat: add animations, improve styling, update
 dependencies

- Add 15+ CSS keyframe animations (fade-in, slide, bounce, float, pulse-glow, shimmer, etc.)
- Add utility animation classes with stagger delays
- Improve Navbar: glass effect on scroll, hover underline, smooth transitions
- Improve TemplateLanding: animated hero text, floating image, CTA button
- Improve GamesCard: crossfade image swap, hover glow, scale effect
- Improve Features: card-based layout with icons, staggered animations
- Improve Login: loading state, input focus animations, card entrance
- Improve Footer: quick links section, hover effects, dynamic year
- Improve PremiumCard: pulse-glow CTA, hover border effect
- Fix App.css: add post card hover, button ripple, loading spinner, custom scrollbar
- Update frontend dependencies to latest stable versions
- Update backend dependencies to latest stable versions
- Fix backend app.js: add error handler, uncomment module.exports, add dev script
---
 client/package.json                      |  20 +-
 client/src/App.css                       | 106 ++++++++
 client/src/components/Features.js        |  62 +++--
 client/src/components/Footer.js          |  36 ++-
 client/src/components/GamesCard.js       |  66 +++--
 client/src/components/Navbar.js          |  32 ++-
 client/src/components/PremiumCard.js     |  12 +-
 client/src/components/TemplateLanding.js |  26 +-
 client/src/index.css                     | 303 +++++++++++++++++++++++
 client/src/pages/Login.js                |  34 ++-
 server/express/app.js                    |  17 +-
 server/express/package.json              |  31 +--
 12 files changed, 638 insertions(+), 107 deletions(-)

diff --git a/client/package.json b/client/package.json
index e12c614..564f142 100644
--- a/client/package.json
+++ b/client/package.json
@@ -4,20 +4,20 @@
   "private": true,
   "dependencies": {
     "@cometchat-pro/chat": "^3.0.10",
-    "@sweetalert2/theme-borderless": "^5.0.15",
+    "@sweetalert2/theme-borderless": "^5.0.23",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "axios": "^1.2.0",
-    "daisyui": "^2.42.1",
+    "axios": "^1.7.9",
+    "daisyui": "^4.12.23",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-redux": "^8.0.5",
+    "react-redux": "^9.2.0",
     "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1",
-    "redux": "^4.2.0",
-    "redux-thunk": "^2.4.2",
-    "sweetalert2": "^11.6.15",
+    "redux": "^5.0.1",
+    "redux-thunk": "^3.1.0",
+    "sweetalert2": "^11.15.10",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -45,8 +45,8 @@
     ]
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.13",
-    "postcss": "^8.4.19",
-    "tailwindcss": "^3.2.4"
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.5.1",
+    "tailwindcss": "^3.4.17"
   }
 }
diff --git a/client/src/App.css b/client/src/App.css
index 049372a..d820cec 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -12,3 +12,109 @@
 /* .option__videocall-group {
     display: none;
 } */
+
+/* ========== POST CARD ANIMATIONS ========== */
+.post-card {
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.post-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
+}
+
+/* ========== BUTTON ANIMATIONS ========== */
+.btn-animated {
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.btn-animated::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  transition: width 0.6s ease, height 0.6s ease;
+}
+
+.btn-animated:hover::after {
+  width: 300px;
+  height: 300px;
+}
+
+.btn-animated:active {
+  transform: scale(0.95);
+}
+
+/* ========== INPUT ANIMATIONS ========== */
+.input-animated {
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.input-animated:focus {
+  border-color: #D7385E;
+  box-shadow: 0 0 0 3px rgba(215, 56, 94, 0.2);
+}
+
+/* ========== LOADING SPINNER ========== */
+.loading-spinner {
+  width: 50px;
+  height: 50px;
+  border: 4px solid rgba(215, 56, 94, 0.2);
+  border-top-color: #D7385E;
+  border-radius: 50%;
+  animation: spin-slow 0.8s linear infinite;
+}
+
+@keyframes spin-slow {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ========== CARD ENTRANCE ========== */
+.card-entrance {
+  animation: fade-in-up 0.5s ease-out both;
+}
+
+/* ========== NAVBAR GLASS ========== */
+.navbar-glass {
+  background: rgba(17, 16, 29, 0.8);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+/* ========== GAMES CARD CROSSFADE ========== */
+.games-card-img {
+  transition: opacity 0.4s ease, transform 0.4s ease;
+}
+
+.games-card-overlay {
+  transition: opacity 0.3s ease;
+  backdrop-filter: blur(4px);
+}
+
+/* ========== SCROLLBAR ========== */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #11101d;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #D7385E;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #e84a6f;
+}
diff --git a/client/src/components/Features.js b/client/src/components/Features.js
index 3bb0d8c..62df78d 100644
--- a/client/src/components/Features.js
+++ b/client/src/components/Features.js
@@ -1,27 +1,57 @@
 import styles, { layout } from "../style";
 
 function Features() {
+	const features = [
+		{
+			title: "Smart Matchmaking",
+			desc: "Find match with our matchmaking system. Get paired with players who match your skill level and playstyle.",
+			icon: "🎯",
+		},
+		{
+			title: "Real-time Communication",
+			desc: "Communicate with your team via chat, voice call*, or even video call*! Never miss a callout again.",
+			icon: "💬",
+		},
+		{
+			title: "Share Your Moments",
+			desc: "Share your best gaming moments in a post. Build your gaming identity and connect with the community.",
+			icon: "📸",
+		},
+	];
+
 	return (
 		<section id="" className={layout.section}>
 			<div className={layout.sectionInfo}>
-				<h2 className={styles.heading2}>HIGHLIGHT FEATURES</h2>
+				<h2 className={`${styles.heading2} animate-fade-in-left`}>
+					HIGHLIGHT <span className="text-gradient">FEATURES</span>
+				</h2>
 			</div>
 
-			<div className={`${layout.sectionImg} flex-col`}>
-				<div className={layout.sectionInfo}>
-					<p className={`${styles.paragraph} max-w-[470px] mt-5`}>
-						Find match with our matchmaking system. Communicate with them via
-						chat, voice call <sup>*</sup>, or even video call <sup>*</sup>!
-					</p>
-					<p className={`${styles.paragraph} max-w-[470px] mt-5`}>
-						Share your moments playing with them in a post.
-					</p>
-					<p className="font-poppins text-xs mt-2 text-slate-400">
-						{" "}
-						<sup>*</sup> You can only make group & initiate a 1-on-1 call on
-						premium subcription.
-					</p>
-				</div>
+			<div className={`${layout.sectionImg} flex-col gap-6`}>
+				{features.map((feature, index) => (
+					<div
+						key={index}
+						className={`feature-card p-5 rounded-xl border border-white/10 transition-all duration-300 hover:border-[#D7385E]/50 hover:shadow-lg hover:shadow-[#D7385E]/10 animate-fade-in-right`
+						}
+						style={{ animationDelay: `${index * 0.15}s` }}
+					>
+						<div className="flex items-start gap-4">
+							<span className="text-3xl">{feature.icon}</span>
+							<div>
+								<h3 className="font-poppins font-semibold text-white text-lg mb-1">
+									{feature.title}
+								</h3>
+								<p className={`${styles.paragraph} text-sm`}>
+									{feature.desc}
+								</p>
+							</div>
+						</div>
+					</div>
+				))}
+				<p className="font-poppins text-xs mt-2 text-slate-400 animate-fade-in-up delay-500">
+					<sup>*</sup> You can only make group & initiate a 1-on-1 call on
+					premium subscription.
+				</p>
 			</div>
 		</section>
 	);
diff --git a/client/src/components/Footer.js b/client/src/components/Footer.js
index 86a46af..770c209 100644
--- a/client/src/components/Footer.js
+++ b/client/src/components/Footer.js
@@ -1,26 +1,54 @@
 import styles from "../style";
 import teamupnologo from "../assets/teamupnologo.png";
+
 const Footer = () => {
   return (
     <section
-      className={`${styles.flexCenter} ${styles.paddingY} xl:px-5 flex-col`}
+      className={`${styles.flexCenter} ${styles.paddingY} xl:px-5 flex-col animate-fade-in-up`}
     >
       <div className={`${styles.flexStart} md:flex-row flex-col mb-8 w-full`}>
         <div className="flex-1 flex flex-col justify-start mr-10">
           <img
             src={teamupnologo}
             alt="teamup"
-            className="w-[250px] h-100% object-contain"
+            className="w-[250px] h-100% object-contain transition-transform duration-300 hover:scale-105"
           />
           <p className={`${styles.paragraph} mt-4 max-w-[310px]`}>
             Brought to you by gamers, for gamers.
           </p>
         </div>
+
+        <div className="flex-1 flex flex-col md:items-end mt-6 md:mt-0">
+          <h4 className="font-poppins font-semibold text-white text-lg mb-4">
+            Quick Links
+          </h4>
+          <div className="flex flex-col gap-2">
+            <a
+              href="/"
+              className="font-poppins text-dimWhite text-sm transition-all duration-300 hover:text-[#D7385E] hover:translate-x-1"
+            >
+              Home
+            </a>
+            <a
+              href="/login"
+              className="font-poppins text-dimWhite text-sm transition-all duration-300 hover:text-[#D7385E] hover:translate-x-1"
+            >
+              Login
+            </a>
+            <a
+              href="/register"
+              className="font-poppins text-dimWhite text-sm transition-all duration-300 hover:text-[#D7385E] hover:translate-x-1"
+            >
+              Register
+            </a>
+          </div>
+        </div>
       </div>
+
       {/* copyright text */}
-      <div className="w-full flex justify-between items-center md:flex-row flex-col pt-6 border-t-[1px] border=t-[#3F3E45]">
+      <div className="w-full flex justify-between items-center md:flex-row flex-col pt-6 border-t-[1px] border-t-[#3F3E45]">
         <p className="font-poppins font-normal text-center text-[18px] leading-[27px] text-white">
-          2022 Jakarta. All Rights Reserved
+          {new Date().getFullYear()} Jakarta. All Rights Reserved
         </p>
       </div>
     </section>
diff --git a/client/src/components/GamesCard.js b/client/src/components/GamesCard.js
index ac6b3d3..ba612c7 100644
--- a/client/src/components/GamesCard.js
+++ b/client/src/components/GamesCard.js
@@ -1,36 +1,50 @@
+import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 
-const GamesCard = ({ game, gif }) => {
+const GamesCard = ({ game, gif, index }) => {
   const navigation = useNavigate();
-  function changePic1() {
-    document.getElementById(game.id).src = game.imgUrl;
-  }
-  function changePic2() {
-    document.getElementById(game.id).src = gif;
-  }
+  const [isHovered, setIsHovered] = useState(false);
+
   return (
     <div
-      className="w-full md:w-[240px] lg:w-[400px] inline-block cursor-pointer relative my-3 mr-3"
+      className="w-full md:w-[240px] lg:w-[400px] inline-block cursor-pointer relative my-3 mr-3 animate-scale-in"
+      style={{ animationDelay: `${(index || 0) * 0.15}s` }}
       onClick={() => navigation("/login")}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
     >
-      <img
-        id={game.id}
-        className="w-full h-auto block rounded-3xl transition-all"
-        src={game.imgUrl}
-        alt="testinggame"
-      />
-      <div
-        className="absolute top-0 left-0 w-full h-full bg-black/50 rounded-3xl opacity-0 hover:opacity-100 text-white"
-        onMouseOver={() => {
-          changePic2();
-        }}
-        onMouseOut={() => {
-          changePic1();
-        }}
-      >
-        <p className="white-space-normal text-xs md:text-sm font-bold flex justify-center items-center h-full text-center">
-          {game.name}
-        </p>
+      <div className="relative overflow-hidden rounded-3xl group">
+        {/* Base image */}
+        <img
+          className="w-full h-auto block rounded-3xl transition-all duration-500 group-hover:scale-110"
+          src={game.imgUrl}
+          alt={game.name}
+        />
+
+        {/* GIF overlay on hover */}
+        <img
+          className={`absolute top-0 left-0 w-full h-full object-cover rounded-3xl transition-opacity duration-400 ${
+            isHovered ? "opacity-100" : "opacity-0"
+          }`}
+          src={gif}
+          alt={`${game.name} gameplay`}
+        />
+
+        {/* Overlay */}
+        <div
+          className={`absolute top-0 left-0 w-full h-full bg-black/50 rounded-3xl backdrop-blur-sm transition-opacity duration-300 flex justify-center items-center ${
+            isHovered ? "opacity-100" : "opacity-0"
+          }`}
+        >
+          <p className="text-xs md:text-sm font-bold text-white text-center px-4 transform transition-transform duration-300 group-hover:scale-110">
+            {game.name}
+          </p>
+        </div>
+
+        {/* Glow effect on hover */}
+        <div
+          className={`absolute -inset-1 rounded-3xl bg-gradient-to-r from-[#D7385E]/30 to-[#33bbcf]/30 opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-sm -z-10`}
+        ></div>
       </div>
     </div>
   );
diff --git a/client/src/components/Navbar.js b/client/src/components/Navbar.js
index e9149f0..afc1380 100644
--- a/client/src/components/Navbar.js
+++ b/client/src/components/Navbar.js
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { close, menu } from "../assets";
 import teamupnologo from "../assets/teamupnologo.png";
 import { Link, useNavigate } from "react-router-dom";
@@ -6,32 +6,44 @@ import { Link, useNavigate } from "react-router-dom";
 const Navbar = () => {
 	const navigation = useNavigate();
 	const [toggle, setToggle] = useState(false);
+	const [scrolled, setScrolled] = useState(false);
+
+	useEffect(() => {
+		const handleScroll = () => {
+			setScrolled(window.scrollY > 20);
+		};
+		window.addEventListener("scroll", handleScroll);
+		return () => window.removeEventListener("scroll", handleScroll);
+	}, []);
 
 	return (
-		<nav className="w-full flex py-5 justify-between items-center navbar">
+		<nav className={`w-full flex py-5 justify-between items-center navbar transition-all duration-300 ${scrolled ? "navbar-glass" : ""}`}>
 			<img
 				src={teamupnologo}
 				alt="fotologo"
-				className="w-[200px] h-full cursor-pointer"
+				className="w-[200px] h-full cursor-pointer transition-transform duration-300 hover:scale-105"
 				onClick={() => navigation("/home")}
 			/>
 
 			{localStorage.getItem("access_token") ? (
 				<ul className="list-none sm:flex hidden justify-end items-center flex-1">
 					<li
-						className={`font-poppins font-normal cursor-pointer text-[16px] mr-10 text-white `}>
+						className={`font-poppins font-normal cursor-pointer text-[16px] mr-10 text-white transition-all duration-300 hover:text-[#D7385E] group relative`}>
 						<Link to="/home">Home</Link>
+						<span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-[#D7385E] transition-all duration-300 group-hover:w-full"></span>
 					</li>
 				</ul>
 			) : (
 				<ul className="list-none sm:flex hidden justify-end items-center flex-1">
 					<li
-						className={`font-poppins font-normal cursor-pointer text-[16px] mr-10 text-white `}>
+						className={`font-poppins font-normal cursor-pointer text-[16px] mr-10 text-white transition-all duration-300 hover:text-[#D7385E] group relative`}>
 						<Link to="/login">Login</Link>
+						<span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-[#D7385E] transition-all duration-300 group-hover:w-full"></span>
 					</li>
 					<li
-						className={`font-poppins font-normal cursor-pointer text-[16px] mr-0 text-white `}>
+						className={`font-poppins font-normal cursor-pointer text-[16px] mr-0 text-white transition-all duration-300 hover:text-[#D7385E] group relative`}>
 						<Link to="/register">Register</Link>
+						<span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-[#D7385E] transition-all duration-300 group-hover:w-full"></span>
 					</li>
 				</ul>
 			)}
@@ -40,7 +52,7 @@ const Navbar = () => {
 				<img
 					src={toggle ? close : menu}
 					alt="menu"
-					className="w-[28px] h-[28px] object-contain"
+					className="w-[28px] h-[28px] object-contain transition-transform duration-300 hover:scale-110"
 					onClick={() => setToggle((men) => !men)}
 				/>
 
@@ -51,18 +63,18 @@ const Navbar = () => {
 					{localStorage.getItem("access_token") ? (
 						<ul className="list-none flex flex-col justify-end items-center flex-1">
 							<li
-								className={`font-poppins font-normal cursor-pointer text-[16px] mr-10 text-white `}>
+								className={`font-poppins font-normal cursor-pointer text-[16px] mr-10 text-white transition-all duration-300 hover:text-[#D7385E]`}>
 								<Link to="/home">Home</Link>
 							</li>
 						</ul>
 					) : (
 						<ul className="list-none flex flex-col justify-end items-center flex-1">
 							<li
-								className={`font-poppins font-normal cursor-pointer text-[16px] mb-4 text-white `}>
+								className={`font-poppins font-normal cursor-pointer text-[16px] mb-4 text-white transition-all duration-300 hover:text-[#D7385E]`}>
 								<Link to="/login">Login</Link>
 							</li>
 							<li
-								className={`font-poppins font-normal cursor-pointer text-[16px] mr-0 text-white `}>
+								className={`font-poppins font-normal cursor-pointer text-[16px] mr-0 text-white transition-all duration-300 hover:text-[#D7385E]`}>
 								<Link to="/register">Register</Link>
 							</li>
 						</ul>
diff --git a/client/src/components/PremiumCard.js b/client/src/components/PremiumCard.js
index bc6b5ce..d200002 100644
--- a/client/src/components/PremiumCard.js
+++ b/client/src/components/PremiumCard.js
@@ -6,15 +6,15 @@ export default function PremiumCard() {
 	const handleShow = () => setShow(true);
 
 	return (
-		<div className="flex flex-col items-center justify-center bg-[#262525] shadow-md shadow-black rounded-sm">
-			<p className="text-lg mt-3 mx-3">
-				{" "}
-				Be a premium member to form a group!{" "}
+		<div className="flex flex-col items-center justify-center bg-[#262525] shadow-md shadow-black rounded-sm p-6 animate-fade-in-up border border-white/5 transition-all duration-300 hover:border-[#D7385E]/30 hover:shadow-lg hover:shadow-[#D7385E]/10">
+			<p className="text-lg mt-3 mx-3 text-center">
+				Be a premium member to form a group!
 			</p>
 			<label
 				htmlFor="modal-premium"
-				className="btn mb-3 rounded-full bg-[#D7385E] text-slate-200"
-				onClick={handleShow}>
+				className="btn mb-3 rounded-full bg-[#D7385E] text-slate-200 btn-animated animate-pulse-glow mt-4 transition-transform duration-300 hover:scale-105"
+				onClick={handleShow}
+			>
 				Go Premium
 			</label>
 			<ModalPremium />
diff --git a/client/src/components/TemplateLanding.js b/client/src/components/TemplateLanding.js
index 632e09e..2c93512 100644
--- a/client/src/components/TemplateLanding.js
+++ b/client/src/components/TemplateLanding.js
@@ -6,27 +6,37 @@ const TemplateLanding = () => (
 		<div
 			className={`flex-1 ${styles.flexStart} flex-col xl:px-16 xl:py-10 sm:px-16 px-6`}>
 			<div className="flex flex-row justify-between items-center w-full ">
-				<h1 className="flex-1 font-poppins font-semibold ss:text-[72px] text-[52px] text-white ss:leading-[100px] leading-[75px]">
-					TEAM UP
+				<h1 className="flex-1 font-poppins font-semibold ss:text-[72px] text-[52px] text-white ss:leading-[100px] leading-[75px] animate-fade-in-left">
+					<span className="text-gradient">TEAM</span>{" "}
+					<span className="animate-text-glow inline-block">UP</span>
 				</h1>
 			</div>
 
-			<p className={`${styles.paragraph} max-w-[470px] mt-5 `}>
+			<p className={`${styles.paragraph} max-w-[470px] mt-5 animate-fade-in-left delay-200`}>
 				Find the best personalized teammates and never play alone again!
 			</p>
+
+			<div className="mt-8 animate-fade-in-up delay-400">
+				<a
+					href="/login"
+					className="btn-animated bg-[#D7385E] text-white font-poppins font-semibold px-8 py-3 rounded-lg inline-block transition-transform duration-300 hover:scale-105 hover:shadow-lg hover:shadow-[#D7385E]/30"
+				>
+					Get Started
+				</a>
+			</div>
 		</div>
 
 		<div className={`flex-1 flex ${styles.flexCenter} md:my-0 my-10 relative`}>
 			<img
 				src={nogs}
 				alt="gambarapaaja"
-				className="w-[100%] h-[100%] relative z-[5]"
+				className="w-[100%] h-[100%] relative z-[5] animate-float"
 			/>
 
-			{/* NOTEEEEEE!!!! disini ada pink gradient dari index.css */}
-			<div className="absolute z-[0] w-[40%] h-[35%] top-0 pink__gradient"></div>
-			<div className="absolute z-[1] w-[80%] h-[80%] rounded-full bottom-40 white"></div>
-			<div className="absolute z-[0] w-[50%] h-[50%] right-20 bottom-20 blue__gradient"></div>
+			{/* Animated gradient blobs */}
+			<div className="absolute z-[0] w-[40%] h-[35%] top-0 pink__gradient animate-float-slow"></div>
+			<div className="absolute z-[1] w-[80%] h-[80%] rounded-full bottom-40 white__gradient animate-float"></div>
+			<div className="absolute z-[0] w-[50%] h-[50%] right-20 bottom-20 blue__gradient animate-float-slow"></div>
 		</div>
 	</section>
 );
diff --git a/client/src/index.css b/client/src/index.css
index 0802e79..cf8b658 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -80,6 +80,7 @@
   box-shadow: 0px 20px 100px -10px rgba(66, 71, 91, 0.1);
 }
 
+/* ========== SIDEBAR ANIMATION ========== */
 .sidebar {
   -webkit-animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
   animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
@@ -107,6 +108,307 @@
   }
 }
 
+/* ========== FADE IN ANIMATIONS ========== */
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-in-down {
+  from {
+    opacity: 0;
+    transform: translateY(-30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-in-left {
+  from {
+    opacity: 0;
+    transform: translateX(-30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes fade-in-right {
+  from {
+    opacity: 0;
+    transform: translateX(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* ========== SLIDE ANIMATIONS ========== */
+@keyframes slide-in-left {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slide-in-right {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+/* ========== BOUNCE ANIMATIONS ========== */
+@keyframes bounce-in {
+  0% {
+    opacity: 0;
+    transform: scale(0.3);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.05);
+  }
+  70% {
+    transform: scale(0.9);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes bounce-subtle {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-8px);
+  }
+}
+
+/* ========== PULSE & GLOW ========== */
+@keyframes pulse-glow {
+  0%, 100% {
+    box-shadow: 0 0 5px rgba(215, 56, 94, 0.4);
+  }
+  50% {
+    box-shadow: 0 0 20px rgba(215, 56, 94, 0.8), 0 0 40px rgba(215, 56, 94, 0.3);
+  }
+}
+
+@keyframes text-glow {
+  0%, 100% {
+    text-shadow: 0 0 10px rgba(215, 56, 94, 0.3);
+  }
+  50% {
+    text-shadow: 0 0 20px rgba(215, 56, 94, 0.6), 0 0 40px rgba(215, 56, 94, 0.2);
+  }
+}
+
+/* ========== FLOAT ANIMATION ========== */
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-15px);
+  }
+}
+
+@keyframes float-slow {
+  0%, 100% {
+    transform: translateY(0px) rotate(0deg);
+  }
+  50% {
+    transform: translateY(-10px) rotate(2deg);
+  }
+}
+
+/* ========== SCALE ANIMATIONS ========== */
+@keyframes scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes scale-in-center {
+  from {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* ========== SHIMMER / LOADING ========== */
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+@keyframes ripple {
+  0% {
+    transform: scale(0.8);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(2.4);
+    opacity: 0;
+  }
+}
+
+/* ========== SPIN / ROTATE ========== */
+@keyframes spin-slow {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ========== GRADIENT ANIMATION ========== */
+@keyframes gradient-shift {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+/* ========== UTILITY CLASSES ========== */
+.animate-fade-in {
+  animation: fade-in 0.6s ease-out both;
+}
+
+.animate-fade-in-up {
+  animation: fade-in-up 0.6s ease-out both;
+}
+
+.animate-fade-in-down {
+  animation: fade-in-down 0.6s ease-out both;
+}
+
+.animate-fade-in-left {
+  animation: fade-in-left 0.6s ease-out both;
+}
+
+.animate-fade-in-right {
+  animation: fade-in-right 0.6s ease-out both;
+}
+
+.animate-slide-in-left {
+  animation: slide-in-left 0.5s ease-out both;
+}
+
+.animate-slide-in-right {
+  animation: slide-in-right 0.5s ease-out both;
+}
+
+.animate-bounce-in {
+  animation: bounce-in 0.8s ease-out both;
+}
+
+.animate-bounce-subtle {
+  animation: bounce-subtle 2s ease-in-out infinite;
+}
+
+.animate-pulse-glow {
+  animation: pulse-glow 2s ease-in-out infinite;
+}
+
+.animate-text-glow {
+  animation: text-glow 2s ease-in-out infinite;
+}
+
+.animate-float {
+  animation: float 3s ease-in-out infinite;
+}
+
+.animate-float-slow {
+  animation: float-slow 5s ease-in-out infinite;
+}
+
+.animate-scale-in {
+  animation: scale-in 0.5s ease-out both;
+}
+
+.animate-scale-in-center {
+  animation: scale-in-center 0.5s ease-out both;
+}
+
+.animate-shimmer {
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.08) 50%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+.animate-spin-slow {
+  animation: spin-slow 3s linear infinite;
+}
+
+.animate-gradient {
+  background-size: 200% 200%;
+  animation: gradient-shift 4s ease infinite;
+}
+
+/* ========== STAGGER DELAYS ========== */
+.delay-100 { animation-delay: 0.1s; }
+.delay-200 { animation-delay: 0.2s; }
+.delay-300 { animation-delay: 0.3s; }
+.delay-400 { animation-delay: 0.4s; }
+.delay-500 { animation-delay: 0.5s; }
+.delay-600 { animation-delay: 0.6s; }
+.delay-700 { animation-delay: 0.7s; }
+.delay-800 { animation-delay: 0.8s; }
+
+/* ========== FEATURE CARD HOVER ========== */
 .feature-card:hover {
   background: var(--black-gradient);
   box-shadow: var(--card-shadow);
@@ -124,6 +426,7 @@
   background: var(--black-gradient);
 }
 
+/* ========== GRADIENT BLOBS ========== */
 .blue__gradient {
   background: linear-gradient(180deg, rgba(188, 165, 255, 0) 0%, #214d76 100%);
   filter: blur(123px);
diff --git a/client/src/pages/Login.js b/client/src/pages/Login.js
index 3a55189..005ea79 100644
--- a/client/src/pages/Login.js
+++ b/client/src/pages/Login.js
@@ -7,6 +7,7 @@ import logo from "../assets/teamupnologo.png";
 export default function Login() {
 	const dispatch = useDispatch();
 	const navigation = useNavigate();
+	const [isLoading, setIsLoading] = useState(false);
 
 	const [loginForm, setLoginForm] = useState({
 		email: "",
@@ -24,22 +25,24 @@ export default function Login() {
 
 	const handleSubmit = (e) => {
 		e.preventDefault();
+		setIsLoading(true);
 		dispatch(login(loginForm))
 			.then(() => {
 				console.log("welcome, username");
 				navigation("/home");
 			})
-			.catch((err) => console.log(err));
+			.catch((err) => console.log(err))
+			.finally(() => setIsLoading(false));
 	};
 
 	return (
-		<div className="flex w-full min-h-screen justify-center items-center font-poppins">
-			<div className="flex justify-center flex-col px-8 pt-8 pb-10 w-80 h-content shadow-lg bg-[#2A302F] max-w-sm">
+		<div className="flex w-full min-h-screen justify-center items-center font-poppins bg-primary">
+			<div className="flex justify-center flex-col px-8 pt-8 pb-10 w-80 h-content shadow-2xl shadow-black/50 bg-[#2A302F] max-w-sm rounded-xl animate-bounce-in border border-white/5">
 				<form onSubmit={handleSubmit}>
 					<div className="flex justify-center font-bold text-2xl mb-5">
 						<img
 							src={logo}
-							className="h-auto w-40 hover:cursor-pointer"
+							className="h-auto w-40 hover:cursor-pointer transition-transform duration-300 hover:scale-110"
 							onClick={() => navigation("/")}
 						/>
 					</div>
@@ -52,7 +55,8 @@ export default function Login() {
 							name="email"
 							value={loginForm.email}
 							onChange={handleChange}
-							className="form-control block w-full px-3 py-2.5 text-sm text-gray-900 bg-white bg-clip-padding border border-solid border-gray-300 rounded-xs"
+							className="form-control block w-full px-3 py-2.5 text-sm text-gray-900 bg-white bg-clip-padding border border-solid border-gray-300 rounded-sm input-animated"
+							placeholder="Enter your email"
 						/>
 					</div>
 					<div className="relative form-group mb-6">
@@ -64,19 +68,29 @@ export default function Login() {
 							name="password"
 							value={loginForm.password}
 							onChange={handleChange}
-							className="form-control block w-full px-3 py-2.5 bg-white bg-clip-padding text-slate-900 border border-solid border-gray-300 rounded-sm"
+							className="form-control block w-full px-3 py-2.5 bg-white bg-clip-padding text-slate-900 border border-solid border-gray-300 rounded-sm input-animated"
+							placeholder="Enter your password"
 						/>
 					</div>
 					<div className="flex flex-col justify-center gap-2">
 						<button
 							type="submit"
-							className="btn btn-wide bg-[#D7385E] text-slate-200 rounded-sm">
-							LOGIN
+							disabled={isLoading}
+							className="btn btn-wide bg-[#D7385E] text-slate-200 rounded-sm btn-animated disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 hover:shadow-lg hover:shadow-[#D7385E]/30"
+						>
+							{isLoading ? (
+								<span className="flex items-center gap-2">
+									<span className="loading-spinner w-4 h-4 border-2"></span>
+									Logging in...
+								</span>
+							) : (
+								"LOGIN"
+							)}
 						</button>
-						<p className="mt-2 text-xs">
+						<p className="mt-2 text-xs text-center">
 							{" "}
 							Don't have an account?{" "}
-							<Link to="/register">
+							<Link to="/register" className="text-[#D7385E] hover:underline transition-all duration-300">
 								<u>Sign up now.</u>
 							</Link>
 						</p>
diff --git a/server/express/app.js b/server/express/app.js
index 2d8818a..b970ab9 100644
--- a/server/express/app.js
+++ b/server/express/app.js
@@ -8,14 +8,27 @@ const port = process.env.PORT || 3000;
 const router = require("./routes/index");
 const cors = require("cors");
 
+// Middleware
 app.use(cors());
 app.use(express.urlencoded({ extended: true }));
 app.use(express.json());
 
+// Routes
 app.use("/", router);
 
+// Error handler middleware
+app.use((err, req, res, next) => {
+  console.error(err.stack);
+  const statusCode = err.statusCode || 500;
+  const message = err.message || "Internal Server Error";
+  res.status(statusCode).json({
+    error: message,
+  });
+});
+
+// Start server
 app.listen(port, () => {
-  console.log(`Example app listening on port ${port}`);
+  console.log(`Server listening on port ${port}`);
 });
 
-// module.exports = app;
+module.exports = app;
diff --git a/server/express/package.json b/server/express/package.json
index 2bc0131..fe64450 100644
--- a/server/express/package.json
+++ b/server/express/package.json
@@ -6,6 +6,7 @@
   "scripts": {
     "test": "npx jest --verbose --forceExit --runInBand --setTimeOut=1000 --coverage",
     "start": "node app.js",
+    "dev": "nodemon app.js",
     "db-deploy": "railway run npx sequelize-cli --env=production db:migrate:undo:all && railway run npx sequelize-cli --env=production db:migrate && railway run npx sequelize-cli --env=production db:seed:all",
     "db-start": "npx sequelize db:drop && npx sequelize db:create && npx sequelize db:migrate && npx sequelize db:seed:all",
     "db-test": "npx sequelize-cli --env=test db:drop && npx sequelize-cli --env=test db:create && npx sequelize-cli --env=test db:migrate",
@@ -24,25 +25,25 @@
   "homepage": "https://github.com/ivanarifin/TEAM-UP#readme",
   "dependencies": {
     "api": "^5.0.4",
-    "axios": "^1.2.0",
+    "axios": "^1.7.9",
     "bcryptjs": "^2.4.3",
-    "cloudinary": "^1.32.0",
+    "cloudinary": "^1.41.3",
     "cors": "^2.8.5",
-    "dotenv": "^16.0.3",
-    "express": "^4.18.2",
-    "google-auth-library": "^8.7.0",
-    "jsonwebtoken": "^8.5.1",
-    "midtrans-client": "^1.3.1",
+    "dotenv": "^16.4.7",
+    "express": "^4.21.2",
+    "google-auth-library": "^9.15.1",
+    "jsonwebtoken": "^9.0.2",
+    "midtrans-client": "^1.4.2",
     "multer": "^1.4.5-lts.1",
-    "pg": "^8.8.0",
-    "sequelize": "^6.26.0",
-    "sharp": "^0.31.2",
-    "uuid": "^9.0.0"
+    "pg": "^8.13.1",
+    "sequelize": "^6.37.5",
+    "sharp": "^0.33.5",
+    "uuid": "^11.0.5"
   },
   "devDependencies": {
-    "jest": "^29.3.1",
-    "nodemon": "^2.0.20",
-    "sequelize-cli": "^6.5.2",
-    "supertest": "^6.3.1"
+    "jest": "^29.7.0",
+    "nodemon": "^3.1.9",
+    "sequelize-cli": "^6.6.2",
+    "supertest": "^7.0.0"
   }
 }

From be24f53b2f617f5dbd6c37706a61ff5bc644ae0d Mon Sep 17 00:00:00 2001
From: Technobot <marbotclaw@gmail.com>
Date: Wed, 22 Apr 2026 15:55:27 +0700
Subject: [PATCH 2/3] chore: resolve merge conflicts with dev branch

- Merged app.js changes (kept health check & separate listener, added error handler)
- Updated package.json dependencies for both client and server
- Applied all frontend animation and styling improvements
- Resolved conflicts in styling and component logic
---
 client/src/App.css    | 3 ---
 server/express/app.js | 6 ------
 2 files changed, 9 deletions(-)

diff --git a/client/src/App.css b/client/src/App.css
index d820cec..39f083c 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -1,6 +1,3 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
 @import url('https://fonts.googleapis.com/css2?family=Chakra+Petch&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap');
 
diff --git a/server/express/app.js b/server/express/app.js
index b970ab9..6eca8ff 100644
--- a/server/express/app.js
+++ b/server/express/app.js
@@ -4,7 +4,6 @@ if (process.env.NODE_ENV !== "production") {
 
 const express = require("express");
 const app = express();
-const port = process.env.PORT || 3000;
 const router = require("./routes/index");
 const cors = require("cors");
 
@@ -26,9 +25,4 @@ app.use((err, req, res, next) => {
   });
 });
 
-// Start server
-app.listen(port, () => {
-  console.log(`Server listening on port ${port}`);
-});
-
 module.exports = app;

From 2e366e77d60044cc988424ed52f8e97d4c8bd2c2 Mon Sep 17 00:00:00 2001
From: Technobot <marbotclaw@gmail.com>
Date: Wed, 22 Apr 2026 16:02:51 +0700
Subject: [PATCH 3/3] chore: resolve merge conflict in app.js and refine error
 handler