REFACTOR: Footer Styles

frontend/src/components/Layout/DynamicPageContent.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import Navbar from "../Navigation/Navbar";
 import { useSidebar } from "../../context/SidebarContext";
+import Footer from "./Footer";
 
 interface DynamicPageContentProps extends React.HTMLProps<HTMLDivElement> {
   children: React.ReactNode;
@@ -20,13 +21,16 @@ const DynamicPageContent: React.FC<DynamicPageContentProps> = ({
   const { showSideBar } = useSidebar();
 
   return (
-    <div className={`${className} bg-[url(/images/background-pattern.svg)]`} style={style}>
+    <div
+      className={`${className} bg-[url(/images/background-pattern.svg)]`}
+      style={style}
+    >
       <Navbar variant={navbarVariant} />
       <div
         id="content"
         className={`min-w-[850px] ${
           showSideBar ? "w-[85vw] translate-x-[15vw]" : "w-[100vw]"
-        } items-start transition-all duration-[500ms] ease-in-out ${contentClassName}`}
+        } items-start pb-[12vh] transition-all duration-[500ms] ease-in-out ${contentClassName}`}
       >
         {children}
       </div>

frontend/src/components/Layout/Footer.tsx

@@ -1,11 +1,17 @@
+import { Mail as MailIcon } from "lucide-react";
 import { useState } from "react";
-import { Mail, Facebook, Twitter, Instagram, Linkedin } from "lucide-react";
 
 const Footer = () => {
   const [email, setEmail] = useState("");
 
-  const handleKeyDown = async (event) => {
+  const handleKeyDown = async (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.key === "Enter") {
+      send_newsletter();
+    }
+  }
+
+  const send_newsletter = async () => {
+    if (email) {
       if (email.trim() === "") return;
       try {
         const response = await fetch(`/api/send_newsletter/${email}`, 
@@ -26,41 +32,26 @@ const Footer = () => {
       } catch (error) {
         console.error("Error subscribing:", error);
       }
-
     }
   };
 
   return (
-    <footer className="bg-gradient-to-r from-[#1a1a2e] to-[#3a0ca3] text-white p-10">
+    <footer className="absolute bottom-0 h-[12vh] w-full p-4 bg-gradient-to-b from-white/0 via-[#3a0ca3]/50 to-[#3a0ca3] text-white">
       <div className="flex flex-wrap justify-between gap-x-10 gap-y-6">
         {/* About Section */}
         <div className="flex-1 min-w-[250px]">
           <h2 className="text-2xl font-bold">Gander</h2>
-          <p className="text-sm mt-2">Your very favourite streaming service</p>
+          <p className="text-sm mt-2">
+            Your very favourite streaming service
+          </p>
         </div>
 
         {/* Office Section */}
         <div className="flex-1 min-w-[200px]">
-          <h3 className="text-lg font-semibold mb-2">Some Street</h3>
-          <p className="text-sm">On Some Road</p>
-          <p className="text-sm">Near Some Country</p>
-          <p className="text-sm">That is definitely on Earth</p>
-          <p className="text-sm mt-2">
-            <a href="mailto:xyzemail@gmail.com" className="underline">info@gander.com</a>
-          </p>
-          <p className="text-sm">+69-280690345</p>
-        </div>
-
-        {/* Links Section */}
-        <div className="flex-1 min-w-[150px]">
-          <h3 className="text-lg font-semibold mb-2">Links</h3>
-          <ul className="space-y-1">
-            <li><a href="#" className="hover:underline">Home</a></li>
-            <li><a href="#" className="hover:underline">Categories</a></li>
-            <li><a href="#" className="hover:underline">Live Now</a></li>
-            <li><a href="#" className="hover:underline">User Page</a></li>
-            <li><a href="#" className="hover:underline">Contact</a></li>
-          </ul>
+          <h3 className="text-lg font-semibold mb-2">Contact Us!</h3>
+          <a href="mailto:xyzemail@gmail.com" className="underline">
+              response.gander@gmail.com
+            </a>
         </div>
 
         {/* Newsletter Section */}
@@ -75,16 +66,7 @@ const Footer = () => {
               onChange={(e) => setEmail(e.target.value)}
               onKeyDown={handleKeyDown}
             />
-            <Mail className="text-white cursor-pointer" onClick={() => handleKeyDown({ key: "Enter" })} />
-          </div>
-
-          {/* Social Icons */}
-          <div className="flex gap-4 mt-4">
-            <Facebook className="cursor-pointer hover:opacity-80" />
-            <Twitter className="cursor-pointer hover:opacity-80" />
-            <Instagram className="cursor-pointer hover:opacity-80" />
-            <Linkedin className="cursor-pointer hover:opacity-80" />
-          </div>
+            <MailIcon className="text-white cursor-pointer" onClick={send_newsletter} />
           </div>
           </div>
 
@@ -92,6 +74,7 @@ const Footer = () => {
         <div className="text-center text-xs border-t border-gray-600 mt-6 pt-4">
           Group 11
         </div>
+      </div>
     </footer>
   );
 };

frontend/src/pages/HomePage.tsx

@@ -32,7 +32,7 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
   return (
     <DynamicPageContent
       navbarVariant="home"
-      className="min-h-screen animate-moving_bg"
+      className="relative min-h-screen animate-moving_bg"
     >
       <ListRow
         type="stream"