From 5eebd51949cc4683dd07ae4f636a515b8f53c351 Mon Sep 17 00:00:00 2001
From: EvanLin3141 <evan.lin.3.141@gmail.com>
Date: Tue, 25 Feb 2025 23:26:19 +0000
Subject: [PATCH] ADD: Footer

---
 frontend/src/components/Layout/Footer.tsx | 69 +++++++++++++++++++++++
 frontend/src/pages/HomePage.tsx           | 11 ++++
 frontend/src/pages/UserPage.tsx           |  1 +
 3 files changed, 81 insertions(+)
 create mode 100644 frontend/src/components/Layout/Footer.tsx

diff --git a/frontend/src/components/Layout/Footer.tsx b/frontend/src/components/Layout/Footer.tsx
new file mode 100644
index 0000000..8256ea4
--- /dev/null
+++ b/frontend/src/components/Layout/Footer.tsx
@@ -0,0 +1,69 @@
+import { Mail, Facebook, Twitter, Instagram, Linkedin } from "lucide-react";
+
+const Footer = () => {
+  return (
+    <footer className="bg-gradient-to-r from-[#1a1a2e] to-[#3a0ca3] text-white p-10">
+      <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>
+        </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>
+        </div>
+
+        {/* Newsletter Section */}
+        <div className="flex-1 min-w-[250px]">
+          <h3 className="text-lg font-semibold mb-2">Newsletter</h3>
+          <div className="flex items-center border-b border-white py-2">
+            <input 
+              type="email" 
+              placeholder="Enter your email" 
+              className="bg-transparent outline-none text-sm flex-1 px-2"
+            />
+            <Mail className="text-white cursor-pointer" />
+          </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>
+        </div>
+      </div>
+
+      {/* Footer Bottom */}
+      <div className="text-center text-xs border-t border-gray-600 mt-6 pt-4">
+        Group 11
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
index d2ed15c..a5c7531 100644
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -5,6 +5,7 @@ import { useStreams, useCategories } from "../context/ContentContext";
 import Button from "../components/Input/Button";
 import DynamicPageContent from "../components/Layout/DynamicPageContent";
 import LoadingScreen from "../components/Layout/LoadingScreen";
+import Footer from "../components/Layout/Footer";
 
 interface HomePageProps {
   variant?: "default" | "personalised";
@@ -31,7 +32,16 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
     <DynamicPageContent
       navbarVariant="home"
       className="h-full min-h-screen bg-[url(/images/background-pattern.svg)] animate-moving_bg"
+      style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
     >
+            {/* Hide Scrollbar for WebKit-based Browsers */}
+            <style>
+        {`
+          ::-webkit-scrollbar {
+            display: none;
+          }
+        `}
+      </style>
       <ListRow
         type="stream"
         title={
@@ -75,6 +85,7 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
           Show More
         </Button>
       </ListRow>
+      <Footer/>
     </DynamicPageContent>
   );
 };
diff --git a/frontend/src/pages/UserPage.tsx b/frontend/src/pages/UserPage.tsx
index 4fd4ecb..8bc6b7a 100644
--- a/frontend/src/pages/UserPage.tsx
+++ b/frontend/src/pages/UserPage.tsx
@@ -111,6 +111,7 @@ const UserPage: React.FC = () => {
           : bgColors[userPageVariant]
       } text-white flex flex-col`}
     >
+      
       <div className="flex justify-evenly justify-self-center items-center h-full px-4 py-8 max-w-[80vw] w-full">
         <div className="grid grid-cols-4 grid-rows-[0.1fr_4fr] w-full gap-8">
           {/* Profile Section - TOP  */}