From 40d40da956116b74d7e8065febf8280c028ca28b Mon Sep 17 00:00:00 2001
From: JustIceO7 <oscarcao777@gmail.com>
Date: Thu, 27 Feb 2025 04:48:49 +0000
Subject: [PATCH] CHANGE: Changed layout and content of footer

---
 frontend/src/components/Layout/Footer.tsx | 47 ++++++++---------------
 1 file changed, 17 insertions(+), 30 deletions(-)

diff --git a/frontend/src/components/Layout/Footer.tsx b/frontend/src/components/Layout/Footer.tsx
index 8a0eaea..bc3348f 100644
--- a/frontend/src/components/Layout/Footer.tsx
+++ b/frontend/src/components/Layout/Footer.tsx
@@ -14,18 +14,18 @@ const Footer = () => {
     if (email) {
       if (email.trim() === "") return;
       try {
-        const response = await fetch(`/api/send_newsletter/${email}`, 
-        {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-        });
+        const response = await fetch(`/api/send_newsletter/${email}`,
+          {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          });
 
         if (!response.ok) {
           throw new Error("Failed to subscribe");
         }
-        
+
         setEmail("");
         alert("Successfully added to newsletter");
 
@@ -37,30 +37,19 @@ const Footer = () => {
 
   return (
     <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">
+      <div className="flex justify-between gap-x-10 gap-y-6 flex-wrap">
         {/* About Section */}
-        <div className="flex-1 min-w-[250px]">
+        <div className="flex-[2] min-w-[50px] shrink">
           <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">Contact Us!</h3>
-          <a href="mailto:xyzemail@gmail.com" className="underline">
-              response.gander@gmail.com
-            </a>
         </div>
 
         {/* Newsletter Section */}
-        <div className="flex-1 min-w-[250px]">
-          <h3 className="text-lg font-semibold mb-2">Newsletter</h3>
+        <div className="flex-1 min-w-[100px] shrink">
+          <h3 className="text-lg font-semibold mb-2 pl-2">Our Newsletter</h3>
           <div className="flex items-center border-b border-white py-2">
-            <input 
-              type="email" 
-              placeholder="Enter your email" 
+            <input
+              type="email"
+              placeholder="Enter your email"
               className="bg-transparent outline-none text-sm flex-1 px-2"
               value={email}
               onChange={(e) => setEmail(e.target.value)}
@@ -68,12 +57,10 @@ const Footer = () => {
             />
             <MailIcon className="text-white cursor-pointer" onClick={send_newsletter} />
           </div>
-          </div>
+        </div>
 
         {/* Footer Bottom */}
-        <div className="text-center text-xs border-t border-gray-600 mt-6 pt-4">
-          Group 11
-        </div>
+        <div className="text-center text-xs border-t border-gray-600 mt-6 pt-4">Group 11</div>
       </div>
     </footer>
   );