update

frontend/src/App.css

@@ -5,8 +5,6 @@
   min-height: 100vh;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   color: #ffffff; /* Text color for high contrast */
 }
@@ -26,7 +24,6 @@
 /* Header section styling */
 .App-header {
   background: linear-gradient(135deg, #111827, #1e40af); /* Dark gradient for a sleek look */
-  min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -70,9 +67,8 @@
   text-align: center;
   padding: 20px;
   font-size: 0.9rem;
-  position: fixed;
+  margin-top: auto; /* Ensures footer stays at the bottom of the content */
   width: 100%;
-  bottom: 0;
   box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
 }
 

frontend/src/App.js

@@ -13,15 +13,14 @@ import { useAuth } from "./auth/AuthContext";
 import logo from "./assets/logo.png";
 
 function App() {
-  const { isAuthenticated, loading } = useAuth(); // Add `loading` to manage fallback states
+  const { isAuthenticated, loading } = useAuth();
 
   if (loading) {
-    // Display a loading spinner or fallback while authentication is verified
     return <div style={styles.loading}>Loading...</div>;
   }
 
   return (
-    <div className="App">
+    <div className="app-container" style={styles.appContainer}>
       <Header />
       <main style={styles.main}>
         <Routes>
@@ -60,7 +59,7 @@ const Home = () => {
       <img src={logo} alt="Skill Match Bot Logo" style={styles.logo} />
       <h1 style={styles.heading}>Welcome to Skill Match Bot</h1>
       <p style={styles.paragraph}>
-      Unlock personalized side hustle opportunities, master profitable skills, and build success-driven habits with an AI-powered platform that adapts to you. 
+        Unlock personalized side hustle opportunities, master profitable skills, and build success-driven habits with an AI-powered platform that adapts to you.
       </p>
       <Link to="/register" style={styles.link}>
         Get Started
@@ -70,12 +69,17 @@ const Home = () => {
 };
 
 const styles = {
+  appContainer: {
+    display: "flex",
+    flexDirection: "column",
+    minHeight: "100vh",
+  },
   main: {
+    flex: 1, // Ensures main content takes up available space
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
     flexDirection: "column",
-    minHeight: "calc(100vh - 120px)",
     padding: "20px",
     background: "linear-gradient(135deg, #00274d, #00509e)",
     boxSizing: "border-box",

frontend/src/index.css

@@ -56,6 +56,7 @@ a:hover {
   max-width: 1200px;
   margin: 0 auto;
   padding: 20px;
+  flex: 1; /* Ensures the container stretches to take up available space */
 }
 
 /* Header Styling */
@@ -166,7 +167,7 @@ button:hover {
 .results button {
   background: none;
   border: 1px solid #2563eb;
-  color: #2563eb;
+  color: #ffffff;
   padding: 8px 12px;
   cursor: pointer;
   border-radius: 8px;