Add footer section to all pages - Fixes #139add footer component to all pages-Issue #139

client/src/components/common/Footer.jsx

@@ -0,0 +1,101 @@
+import { useNavigate } from "react-router-dom";
+import { FaGithub, FaLinkedin, FaInstagram, FaTwitter } from "react-icons/fa";
+
+export default function Footer() {
+  const navigate = useNavigate();
+
+  const quickLinks = [
+    { label: "Home", path: "/landing" },
+    { label: "Create Room", path: "/create-room" },
+    { label: "Join Room", path: "/join-room" },
+    { label: "How to Play", path: "/how-to-play" },
+    { label: "About Dev", path: "/about" },
+  ];
+
+  return (
+    <footer className="w-full bg-black border-t-2 border-[#FFFB00] text-white py-6 mt-auto">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {/* Logo & Description */}
+          <div className="flex flex-col items-center md:items-start">
+            <div className="flex items-center gap-2 mb-3">
+              <img src="/logo.png" alt="GuessSync Logo" className="w-10 h-10" />
+              <h2 className="text-2xl font-silkscreen">
+                GUES<span className="text-[#FFFB00] drop-shadow-[0_0_5px_#FFFB00]">SYNC</span>
+              </h2>
+            </div>
+            <p className="text-sm text-gray-400 text-center md:text-left font-montserrat">
+              Fast-paced multiplayer music guessing game. Play with friends and race to the top!
+            </p>
+          </div>
+
+          {/* Quick Links */}
+          <div className="flex flex-col items-center">
+            <h3 className="text-lg font-silkscreen text-[#FFFB00] mb-3">Quick Links</h3>
+            <ul className="space-y-2">
+              {quickLinks.map((link) => (
+                <li key={link.path}>
+                  <button
+                    onClick={() => navigate(link.path)}
+                    className="text-sm text-gray-400 hover:text-[#FFFB00] transition-colors font-montserrat"
+                  >
+                    {link.label}
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Social Links & Copyright */}
+          <div className="flex flex-col items-center md:items-end">
+            <h3 className="text-lg font-silkscreen text-[#FFFB00] mb-3">Connect</h3>
+            <div className="flex gap-4 mb-4">
+              <a
+                href="https://github.com/yogeshwaran9125"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-gray-400 hover:text-[#FFFB00] transition-colors"
+                aria-label="GitHub"
+              >
+                <FaGithub size={24} />
+              </a>
+              <a
+                href="https://www.linkedin.com/in/yogeshwaran-m-3b19452a9/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-gray-400 hover:text-[#FFFB00] transition-colors"
+                aria-label="LinkedIn"
+              >
+                <FaLinkedin size={24} />
+              </a>
+              <a
+                href="https://www.instagram.com/wtfisyogesh"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-gray-400 hover:text-[#FFFB00] transition-colors"
+                aria-label="Instagram"
+              >
+                <FaInstagram size={24} />
+              </a>
+              <a
+                href="https://twitter.com"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-gray-400 hover:text-[#FFFB00] transition-colors"
+                aria-label="Twitter"
+              >
+                <FaTwitter size={24} />
+              </a>
+            </div>
+            <p className="text-xs text-gray-500 text-center md:text-right font-montserrat">
+              © {new Date().getFullYear()} GuessSync. All rights reserved.
+            </p>
+            <p className="text-xs text-gray-500 text-center md:text-right font-montserrat mt-1">
+              Made with ❤️ for Hacktoberfest
+            </p>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}

client/src/pages/AboutDev.jsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import Navbar from "../components/common/Navbar";
+import Footer from "../components/common/Footer";
 
 const AboutDev = () => {
   const [displayText, setDisplayText] = useState("");
@@ -36,7 +37,7 @@ const AboutDev = () => {
   ];
 
   return (
-    <div className="h-screen bg-black text-white font-sans relative flex flex-col overflow-y-auto lg:overflow-hidden">
+    <div className="bg-black text-white font-sans relative flex flex-col">
       <style>
         {`
           .social-icon {
@@ -106,8 +107,8 @@ const AboutDev = () => {
       {/* Fixed Navbar */}
       <Navbar />
 
-      {/* Main Content */}
-      <div className="flex-1 flex flex-col md:flex-row justify-center items-center gap-1 sm:gap-5 lg:gap-14 px-4 sm:px-8 lg:px-12 pt-0 pb-2 sm:py-6">
+      {/* Main Content - Full viewport height */}
+      <div className="min-h-screen flex flex-col md:flex-row justify-center items-center gap-1 sm:gap-5 lg:gap-14 px-4 sm:px-8 lg:px-12 py-8 sm:py-10 lg:py-12">
         {/* Profile Image */}
         <div className="relative flex justify-center items-center">
           <img
@@ -178,6 +179,7 @@ const AboutDev = () => {
           </div>
         </div>
       </div>
+      <Footer />
     </div>
   );
 };

client/src/pages/CreateRoom.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState, useRef } from "react";
 import Navbar from "../components/common/Navbar";
+import Footer from "../components/common/Footer";
 import { useNavigate } from "react-router-dom";
 import socket from "../socket";
 import sendIcon from "../assets/send.png";
@@ -31,25 +32,6 @@ const CreateRoom = () => {
   const [isCreating, setIsCreating] = useState(false);
   const navigate = useNavigate();
 
-  useEffect(() => {
-  const handleResize = () => {
-    if (window.innerWidth >= 1024) {
-      document.body.style.overflow = "hidden"; // lock scroll
-    } else {
-      document.body.style.overflow = "auto";   // allow scroll
-    }
-  };
-
-  handleResize(); // run on mount
-  window.addEventListener("resize", handleResize);
-
-  return () => {
-    document.body.style.overflow = "auto"; // cleanup
-    window.removeEventListener("resize", handleResize);
-  };
-}, []);
-
-
   useEffect(() => {
     window.scrollTo(0, 0);
     const code = Math.floor(100000 + Math.random() * 900000);
@@ -219,6 +201,9 @@ const CreateRoom = () => {
   const showCreateBtn = selectedLanguage || spotifyConfirmed;
 
 return (
+<div className="bg-black flex flex-col text-white font-montserrat">
+  <Navbar />
+  <div className="min-h-screen flex flex-col items-center px-4 py-6 sm:px-6 md:px-8">
 <div className="bg-black min-h-screen flex flex-col text-white font-montserrat">
   {isCreating && <LoadingOverlay text="Creating Room..." />}
   {!isCreating && <Navbar />}
@@ -498,7 +483,12 @@ return (
           </div>
         </div>
       )}
+
+      {/* Spacer to ensure scrolling */}
+      <div className="h-20"></div>
+
       </div> 
+      <Footer />
     </div>
   );
 };

client/src/pages/HomePage.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Footer from "../components/common/Footer";
 import {
   faRightToBracket,
   faEarListen,
@@ -142,7 +143,7 @@ const HomePage = () => {
 
   return (
     <div
-      className="relative w-full h-screen overflow-hidden bg-black text-white flex flex-col justify-center items-center px-4 sm:px-6 md:px-10"
+      className="relative w-full bg-black text-white flex flex-col"
       ref={containerRef}
     >
       <style>
@@ -183,8 +184,8 @@ const HomePage = () => {
         />
       ))}
 
-      {/* Main Content */}
-      <div className="z-10 text-center space-y-6 w-full">
+      {/* Main Content - Full viewport height */}
+      <div className="min-h-screen z-10 text-center space-y-6 w-full flex flex-col justify-center items-center px-4 sm:px-6 md:px-10">
         {/* Logo + Title */}
         <div className="flex flex-col sm:flex-row items-center justify-center gap-2 sm:gap-3">
           <img
@@ -308,6 +309,7 @@ const HomePage = () => {
           </button>
         </div>
       </div>
+      <Footer />
     </div>
   );
 };

client/src/pages/HowToPlay.jsx

@@ -1,5 +1,6 @@
 // Added by Reshma - How To Play Page
 import Navbar from "../components/common/Navbar";
+import Footer from "../components/common/Footer";
 import { useEffect, useState } from "react";
 
 const HowToPlay = () => {
@@ -217,6 +218,7 @@ const HowToPlay = () => {
           </div>
         </section>
       </div>
+      <Footer />
     </div>
   );
 };

client/src/pages/JoinRoom.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from "react";
 import { useNavigate } from "react-router-dom";
 import Navbar from "../components/common/Navbar";
+import Footer from "../components/common/Footer";
 import socket from "../socket";
 
 export default function JoinRoom() {
@@ -168,6 +169,7 @@ return (
         </p>
       </div>
     </div>
+    <Footer />
   </div>
 );
 

client/src/pages/LandingPage.jsx

@@ -3,6 +3,7 @@ import { useNavigate } from "react-router-dom";
 import AvatarSelector from "../components/LandingPage/AvatarSelector";
 import GlowingButton from "../components/common/GlowingButton";
 import Navbar from "../components/common/Navbar";
+import Footer from "../components/common/Footer";
 
 export default function LandingPage() {
   const navigate = useNavigate();
@@ -15,7 +16,7 @@ export default function LandingPage() {
     userData?.avatar || localStorage.getItem("userAvatar") || null
   );
   const [greeted, setGreeted] = useState(!!userData || (!!name && !!avatar));
-  const [isSignedUp, setIsSignedUp] = useState(!!userData);
+  const isSignedUp = !!userData; // User is signed up if userData exists
 
   useEffect(() => {
     if (name.trim()) localStorage.setItem("userName", name);
@@ -34,12 +35,12 @@ export default function LandingPage() {
   };
 
   return (
-    <div className="bg-black text-white font-montserrat h-screen w-screen overflow-hidden flex flex-col">
+    <div className="bg-black text-white font-montserrat flex flex-col">
       <Navbar />
 
-      {/* Scale landing body */}
-      <div className="flex-1 flex items-start sm:items-center justify-center px-4 pt-3 sm:pt-0">
-        <div className="flex flex-col justify-center items-center w-full scale-[1.05] sm:scale-100 md:scale-[1.25]">
+      {/* Scale landing body - Takes full viewport height */}
+      <div className="min-h-screen flex items-center justify-center px-4 py-8">
+        <div className="flex flex-col justify-center items-center w-full max-w-4xl">
           {/* Greeting */}
           <h1 className="text-3xl sm:text-4xl md:text-5xl font-black mb-6 text-center">
             Hello{greeted ? `, ${name}!` : "!"}
@@ -124,8 +125,12 @@ export default function LandingPage() {
               />
             </div>
           </div>
+
+          {/* Spacer to ensure footer is below viewport */}
+          <div className="h-20"></div>
         </div>
       </div>
+      <Footer />
     </div>
   );
 }

client/src/pages/Login.jsx

@@ -5,6 +5,7 @@ import googleIcon from "../assets/google.svg";
 import { auth, provider } from "../config/firebase";
 import AvatarGrid from "../components/common/AvatarGrid";
 import Navbar from "../components/common/Navbar";
+import Footer from "../components/common/Footer";
 
 const Login = () => {
   const [email, setEmail] = useState("");
@@ -192,6 +193,7 @@ const Login = () => {
           )}
         </div>
       </div>
+      <Footer />
     </div>
   );
 };

client/src/pages/Signup.jsx

@@ -9,6 +9,7 @@ import {
 import { auth, provider } from "../config/firebase";
 import AvatarGrid from "../components/common/AvatarGrid";
 import Navbar from "../components/common/Navbar";
+import Footer from "../components/common/Footer";
 
 const Signup = () => {
   const [name, setName] = useState("");
@@ -224,6 +225,7 @@ const Signup = () => {
           )}
         </div>
       </div>
+      <Footer />
     </div>
   );
 };