ivanarifin · Marbot-claw · Apr 11, 2026 · Apr 22, 2026 · Apr 22, 2026 · Apr 22, 2026
diff --git 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
@@ -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');
 
@@ -12,3 +9,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
@@ -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
@@ -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
@@ -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>
   );