dylan/gander
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

CHANGE: Changed layout and content of footer

Browse Source
This commit is contained in:
JustIceO7
2025-02-27 04:48:49 +00:00
parent 607b1cd397
commit 40d40da956
1 changed files with 17 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/src/components/Layout/Footer.tsx
View File

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