ThengaCoders · dveloper-akash · Dec 4, 2025 · Dec 4, 2025
diff --git a/src/App.jsx b/src/App.jsx
@@ -16,6 +16,11 @@ import NotFound from './components/NotFound'
 import Profile from "./pages/Profile";
 import PayoutDashboard from "./pages/PayoutDashboard";
 import AdminRoute from "./routes/AdminRoutes";
+import PrivacyPolicy from "./pages/legal/PrivacyPolicy";
+import TermsAndConditions from "./pages/legal/TermsAndConditions";
+import RefundPolicy from "./pages/legal/RefundPolicy";
+import Contact from "./pages/legal/Contact";
+import About from "./pages/legal/About";
 
 function InterceptorBoot() {
   const navigate = useNavigate();
@@ -51,9 +56,14 @@ function App() {
               <AdminRoute>
                 <PayoutDashboard />
               </AdminRoute>
-              } />
+            } />
             <Route path="*" element={<NotFound />} />
             <Route path="/profile" element={<Profile />} />
+            <Route path="/privacy-policy" element={<PrivacyPolicy />} />
+            <Route path="/terms" element={<TermsAndConditions />} />
+            <Route path="/refund-policy" element={<RefundPolicy />} />
+            <Route path="/contact" element={<Contact />} />
+            <Route path="/about" element={<About />} />
           </Routes>
         </main>
         <Footer />

diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -1,9 +1,24 @@
+import { Link } from "react-router-dom";
 import styles from "./Footer.module.css";
 
 export default function Footer() {
   return (
     <footer className={styles.myFooter}>
       <div className={styles.line}></div>
+
+      {/* Legal Links */}
+      <div className={styles.linksWrapper}>
+        <Link to="/privacy-policy" className={styles.link}>Privacy Policy</Link>
+        <span className={styles.dot}>•</span>
+        <Link to="/terms" className={styles.link}>Terms & Conditions</Link>
+        <span className={styles.dot}>•</span>
+        <Link to="/refund-policy" className={styles.link}>Refund Policy</Link>
+        <span className={styles.dot}>•</span>
+        <Link to="/contact" className={styles.link}>Contact Us</Link>
+        <span className={styles.dot}>•</span>
+        <Link to="/about" className={styles.link}>About Us</Link>
+      </div>
+
       <p className={styles.text}>© Copyrighted by Thenga Coders</p>
     </footer>
   );

diff --git a/src/components/Footer.module.css b/src/components/Footer.module.css
@@ -6,73 +6,116 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 16px 40px 12px;
+  padding: 18px 40px 14px;
   font-family: Inter, sans-serif;
   width: 100%;
-  max-width: 100%;
-  box-sizing: border-box;
   background: #ffffff;
   z-index: 100;
+  box-sizing: border-box;
+  gap: 6px;
 }
 
+/* Divider Line */
 .line {
-  width: 100%;            
-  height: 1px;            /* thinner line */
-  background-color: #ccc; /* light gray */
-  margin: 0 0 10px 0;  /* spacing below the line */
+  width: 100%;
+  height: 1px;
+  background-color: #d8d8d8;
+  margin-bottom: 8px;
   border-radius: 2px;
-  box-sizing: border-box;
 }
 
-.text {
-  margin: 0;
+/* Legal Links Row */
+.linksWrapper {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-bottom: 4px;
+}
+
+/* Single Link */
+.link {
   font-size: 14px;
   color: #0a1427;
-  padding-bottom: 0px;
-  line-height: 1.4;
+  text-decoration: none;
+  opacity: 0.85;
+  transition: 0.2s;
+}
+
+.link:hover {
+  opacity: 1;
+  color: #ffa116; /* subtle highlight */
 }
 
-/* Tablet styles (max-width: 1024px) */
+/* Dots between links */
+.dot {
+  color: #bbbbbb;
+  font-size: 12px;
+  margin: 0 4px;
+}
+
+/* Copyright */
+.text {
+  margin: 0;
+  font-size: 13px;
+  color: #020a1a;
+  opacity: 0.75;
+}
+
+/* Tablet (≤1024px) */
 @media (max-width: 1024px) {
   .myFooter {
-    padding: 14px 35px 10px;
+    padding: 16px 30px 12px;
   }
 
-  .text {
+  .link {
     font-size: 13px;
   }
 
-  .line {
-    margin: 0 0 8px 0;
+  .text {
+    font-size: 12.5px;
   }
 }
 
-/* Mobile styles (max-width: 768px) */
+/* Mobile (≤768px) */
 @media (max-width: 768px) {
   .myFooter {
-    padding: 12px 24px 10px;
+    padding: 14px 20px 10px;
   }
 
-  .line {
-    margin: 0 0 8px 0;
+  .linksWrapper {
+    gap: 8px;
   }
 
-  .text {
+  .link {
     font-size: 12px;
   }
+
+  .dot {
+    font-size: 11px;
+  }
+
+  .text {
+    font-size: 11.5px;
+  }
 }
 
-/* Small mobile styles (max-width: 480px) */
+/* Small Mobile (≤480px) */
 @media (max-width: 480px) {
   .myFooter {
-    padding: 10px 16px 8px;
+    padding: 12px 12px 10px;
   }
 
-  .line {
-    margin: 0 0 7px 0;
+  .linksWrapper {
+    gap: 6px;
+  }
+
+  .link {
+    font-size: 11px;
   }
 
   .text {
     font-size: 11px;
   }
-}
+}
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -34,6 +34,7 @@ export default function Header() {
 
   return (
     <header className={styles.siteHeader}>
+      {/* LOGO */}
       <div className={styles.logo}>
         <NavLink to="/" className={styles.logoLink}>
           <span className={styles.logoSymbol}>
@@ -43,76 +44,99 @@ export default function Header() {
         </NavLink>
       </div>
 
-      {/* Desktop Navigation */}
-      <nav className={styles.mainNav}>
-        <NavLink
-          to="/rooms"
-          className={({ isActive }) =>
-            isActive ? `${styles.navLink} ${styles.active}` : styles.navLink
-          }
+      {/* 🔥 RIGHT SIDE GROUP (GitHub + Desktop Nav + Hamburger) */}
+      <div className={styles.rightGroup}>
+        {/* GitHub Button */}
+        <a
+          href="https://github.com/ThengaCoders"
+          target="_blank"
+          rel="noopener noreferrer"
+          className={styles.githubButton}
         >
-          My Rooms
-        </NavLink>
+          <img
+            src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
+            alt="GitHub"
+            className={styles.githubIcon}
+          />
+        </a>
 
-        {loggedIn ? (
-          <button onClick={handleLogout} className={`${styles.navLink} ${styles.logoutBtn}`}>
-            Logout
-          </button>
-        ) : (
+        {/* Desktop Navigation */}
+        <nav className={styles.mainNav}>
           <NavLink
-            to="/login"
+            to="/rooms"
             className={({ isActive }) =>
               isActive ? `${styles.navLink} ${styles.active}` : styles.navLink
             }
           >
-            Sign In
+            My Rooms
           </NavLink>
-        )}
-      </nav>
 
-      {/* Mobile Menu */}
-      <div className={styles.mobileMenuWrapper} ref={mobileMenuRef}>
-        <button
-          className={`${styles.hamburgerBtn} ${isMobileMenuOpen ? styles.active : ""}`}
-          onClick={() => setIsMobileMenuOpen((prev) => !prev)}
-        >
-          <span className={styles.hamburgerLine}></span>
-          <span className={styles.hamburgerLine}></span>
-          <span className={styles.hamburgerLine}></span>
-        </button>
-
-        {isMobileMenuOpen && (
-          <div className={styles.mobileMenu}>
+          {loggedIn ? (
+            <button
+              onClick={handleLogout}
+              className={`${styles.navLink} ${styles.logoutBtn}`}
+            >
+              Logout
+            </button>
+          ) : (
             <NavLink
-              to="/rooms"
+              to="/login"
               className={({ isActive }) =>
-                isActive ? `${styles.mobileMenuItem} ${styles.active}` : styles.mobileMenuItem
+                isActive ? `${styles.navLink} ${styles.active}` : styles.navLink
               }
-              onClick={() => setIsMobileMenuOpen(false)}
             >
-              <i className="fa-solid fa-door-open"></i>
-              My Rooms
+              Sign In
             </NavLink>
+          )}
+        </nav>
 
-            {loggedIn ? (
-              <button onClick={handleLogout} className={`${styles.mobileMenuItem} ${styles.logoutBtn}`}>
-                <i className="fa-solid fa-sign-out-alt"></i>
-                Logout
-              </button>
-            ) : (
+        {/* Mobile Menu */}
+        <div className={styles.mobileMenuWrapper} ref={mobileMenuRef}>
+          <button
+            className={`${styles.hamburgerBtn} ${isMobileMenuOpen ? styles.active : ""}`}
+            onClick={() => setIsMobileMenuOpen((prev) => !prev)}
+          >
+            <span className={styles.hamburgerLine}></span>
+            <span className={styles.hamburgerLine}></span>
+            <span className={styles.hamburgerLine}></span>
+          </button>
+
+          {isMobileMenuOpen && (
+            <div className={styles.mobileMenu}>
               <NavLink
-                to="/login"
+                to="/rooms"
                 className={({ isActive }) =>
                   isActive ? `${styles.mobileMenuItem} ${styles.active}` : styles.mobileMenuItem
                 }
                 onClick={() => setIsMobileMenuOpen(false)}
               >
-                <i className="fa-solid fa-sign-in-alt"></i>
-                Sign In
+                <i className="fa-solid fa-door-open"></i>
+                My Rooms
               </NavLink>
-            )}
-          </div>
-        )}
+
+              {loggedIn ? (
+                <button
+                  onClick={handleLogout}
+                  className={`${styles.mobileMenuItem} ${styles.logoutBtn}`}
+                >
+                  <i className="fa-solid fa-sign-out-alt"></i>
+                  Logout
+                </button>
+              ) : (
+                <NavLink
+                  to="/login"
+                  className={({ isActive }) =>
+                    isActive ? `${styles.mobileMenuItem} ${styles.active}` : styles.mobileMenuItem
+                  }
+                  onClick={() => setIsMobileMenuOpen(false)}
+                >
+                  <i className="fa-solid fa-sign-in-alt"></i>
+                  Sign In
+                </NavLink>
+              )}
+            </div>
+          )}
+        </div>
       </div>
     </header>
   );