Redesign and code refactoring

Author: keeniGithub

README.md

@@ -1,3 +1,7 @@
+<img src="public/status-logo.svg" width="400px">
+
 # Qualsu servers status
 
-https://status.qual.su
+[status.qual.su](https://status.qual.su)
+
+![Next.js](https://img.shields.io/badge/Next.js-14-000000?style=flat-square&logo=next.js&logoColor=white) ![React](https://img.shields.io/badge/React-18-20232A?style=flat-square&logo=react&logoColor=61DAFB) ![TypeScript](https://img.shields.io/badge/TypeScript-5-3178C6?style=flat-square&logo=typescript&logoColor=white) ![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-3-06B6D4?style=flat-square&logo=tailwindcss&logoColor=white) ![Axios](https://img.shields.io/badge/Axios-1.13.4-0D47A1?style=flat-square&logo=axios&logoColor=white)

public/logo.svg

@@ -1,26 +1,25 @@
-export default function Footer(){
+import { images } from '../config/routing/images.route';
+import { links } from '../config/routing/links.route';
+
+export default function Footer() {
+    const currentYear = new Date().getFullYear();
+
     return (
-        <footer className="bg-black/20 backdrop-blur-sm rounded-lg shadow m-4 mx-10">
-            <div className="w-full mx-auto p-4 md:py-8">
-                <div className="sm:flex sm:items-center sm:justify-between">
-                    <a href="https://qual.su" className="flex items-center mb-4 sm:mb-0 space-x-3 rtl:space-x-reverse">
-                        <img src="/logo/full-logo.png" className="w-60" alt="Qualsu logo"/>
-                    </a>
-                    <ul className="flex flex-wrap items-center mb-6 text-sm font-medium sm:mb-0 text-gray-400">
-                        <li>
-                            <a href="https://qual.su" target="_blank" className="hover:underline me-4 md:me-6">Site</a>
-                        </li>
-                        <li>
-                            <a href="https://feedback.qual.su" target="_blank" className="hover:underline me-4 md:me-6">Feedback</a>
-                        </li>
-                        <li>
-                            <a href="https://id.qual.su" target="_blank" className="hover:underline me-4 md:me-6">Qual ID</a>
-                        </li>
-                    </ul>
+        <footer className="fixed bottom-0 left-0 right-0 px-6 py-4 border-t border-white/5">
+            <div className="flex items-center justify-between max-w-2xl mx-auto flex-col md:flex-row gap-y-4">
+                <a href={links.QUALSU.SITE} target="_blank" rel="noreferrer">
+                    <img src={images.LOGO} className="h-4 opacity-70 hover:opacity-100 transition-opacity duration-200" alt="Qualsu" />
+                </a>
+                <div className="flex items-center gap-5">
+                    <a href={links.QUALSU.SITE} target="_blank" rel="noreferrer" className="text-xs text-white/50 hover:text-white/70 transition-colors duration-150">Site</a>
+                    <a href={links.FEEDBACK.SITE} target="_blank" rel="noreferrer" className="text-xs text-white/50 hover:text-white/70 transition-colors duration-150">Feedback</a>
+                    <a href={links.QSU_ID.SITE} target="_blank" rel="noreferrer" className="text-xs text-white/50 hover:text-white/70 transition-colors duration-150">Qual ID</a>
                 </div>
-                <hr className="my-6 sm:mx-auto border-gray-700 lg:my-8" />
-                <span className="block text-sm sm:text-center text-gray-400">© 2021-2025 <a href="https://qual.su" className="hover:underline">Qualsu</a></span>
+                <span className="text-xs text-white/30">
+                    © 2021-{currentYear} 
+                    <a href={links.QUALSU.SITE} target='_blank' className='hover:text-white/70 transition-colors duration-150'> Qualsu</a>
+                </span>
             </div>
         </footer>
-    )
+    );
 }

public/logo/full-logo.png

@@ -1,13 +1,14 @@
+import { images } from "../config/routing/images.route";
+import { pages } from "../config/routing/pages.route";
+
 export default function Navbar() {
     return (
-        <>
-            <nav className="fixed top-0 left-0 right-0 z-50 bg-black/20 text-white backdrop-blur-sm">
-                <div className="container mx-auto flex justify-between items-center p-4">
-                    <a href="/">
-                        <img src="logo/logo.svg" alt="Qualsu logo" className="h-8" />
-                    </a>
-                </div>
-            </nav>
-        </>
+        <nav className="fixed top-0 left-0 right-0 z-50">
+            <div className="container mx-auto flex items-center px-6 py-5">
+                <a href={pages.ROOT}>
+                    <img src={images.STATUS} alt="Qualsu logo" className="h-7 opacity-90 hover:opacity-100 transition-opacity duration-200" />
+                </a>
+            </div>
+        </nav>
     );
 }