UPDATE: Added Hover Gradient Animation Effect on Logo.

Could be referenced for future use.
Usage of tailwind.config.js

frontend/src/assets/styles/index.css

@@ -39,16 +39,6 @@
   }
 }
 
-.agog-text {
-  background: linear-gradient(to right, #60A5FA, #8B5CF6, #EC4899, #FACC15);
-  background-clip: text;
-}
-
-.agog-text:hover {
-  background: white;
-  transition: ease;
-}
-
 /* 
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;

frontend/src/components/Layout/Name.tsx

@@ -1,10 +1,11 @@
 const Name = () => {
     return (
-        <div className="flex flex-col justify-center">
+        <div id="logo" className="text-center">
-            <span className="agog-text text-4xl font-bold italic bg-clip-text text-transparent">
+            <span className="text-7xl font-bold italic bg-agog bg-clip-text text-transparent leading-none p-1 hover:scale-110 transition-all hover:animate-agog bg-[length:300%_300%]">
-                AGOG</span>
+                AGOG
+            </span>
         </div>
-    )
+    );
-}
+};
 
-export default Name;
+export default Name;

frontend/tailwind.config.js

@@ -6,7 +6,22 @@ export default {
   ],
   theme: {
     extend: {
+      keyframes: {
+        agog: {
+          "0%": { backgroundPosition: "0% 50%" },
+          "100%": { backgroundPosition: "100% 50%" },
+        },
+      },
+
+      animation: {
+        agog: "agog 6s linear infinite",
+      },
+
+      backgroundImage: {
+        agog: "linear-gradient(to right, #60A5FA, #8B5CF6, #EC4899, #FACC15,#60A5FA, #8B5CF6, #EC4899, #FACC15)",
+      },
     },
   },
-  plugins: [],
+  plugins: [
-}
+  ],
+};