feat: add initial footer with page links

- Implemented a non-final footer structure - Included links to other pages for navigation
TEDxNTUA · Feb 23, 2025 · 24e73cd · 24e73cd
1 parent 39aaa14
commit 24e73cd
Show file tree

Hide file tree

Showing 6 changed files with 298 additions and 4 deletions.
diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js
@@ -1,5 +1,43 @@
-function Footer() {
-  return <div>Test Footer</div>;
-}
+"use client";
+
+import Link from "next/link";
+import SocialMediaFooter from "./SocialMediaFooter";
+
+import styles from "./magnetic.module.css";
 
-export default Footer;
+export default function Footer() {
+  return (
+    <footer className="bg-black text-white p-6 md:p-12">
+      {/* Nav links*/}
+      <ul className="col-span-1 grid grid-cols-2 grid-rows-2 z-10 mt-4 lg:text-2xl justify-center justify-items-center">
+        <li>
+          <Link href="/" className="text-white text-md font-bold">
+            <p className={styles.magnetic}>Home</p>
+          </Link>
+        </li>
+        <li>
+          <Link href="/speakers" className="text-white text-md font-bold">
+            <p className={styles.magnetic}>Speakers</p>
+          </Link>
+        </li>
+        <li>
+          <Link href="/partners" className="text-white text-md font-bold">
+            <p className={styles.magnetic}>Sponsors</p>
+          </Link>
+        </li>
+        <li>
+          <Link href="/about" className="text-white text-md font-bold">
+            <p className={styles.magnetic}>About</p>
+          </Link>
+        </li>
+      </ul>
+
+      <div className="flex flex-row justify-between bg-black">
+        <p className="text-center text-gray-500 text-xs">
+          ALL RIGHTS RESERVED © 2025
+        </p>
+        <SocialMediaFooter />
+      </div>
+    </footer>
+  );
+}
diff --git a/src/components/Footer/SocialMediaFooter.js b/src/components/Footer/SocialMediaFooter.js
@@ -0,0 +1,57 @@
+import SocialMediaItem from "./SocialMediaItem";
+
+const socialMediaLinks = {
+  twitter: "https://twitter.com/tedxntua?lang=en",
+  facebook: "https://facebook.com/tedxntua",
+  instagram: "https://instagram.com/tedxntua/?hl=en",
+  linkedin: "https://linkedin.com/company/tedxntua",
+  spotify:
+    "https://open.spotify.com/user/31jmzq7bew5xcd2cypvo4xuua6ay?si=Qt_NzTPGRFyETbZ4XgKoxw&utm_source=copy-link&nd=1&dlsi=ca94005974b04c42",
+  tiktok: "https://www.tiktok.com/@tedxntua",
+  youtube: "https://www.youtube.com/@TEDxNTUA",
+};
+
+function SocialMediaFooter() {
+  return (
+    <div className="grid grid-cols-6 gap-3 justify-items-center">
+      <SocialMediaItem
+        link={socialMediaLinks.instagram}
+        iconName={"instagram"}
+        color={"white"}
+        hoverColor={"yellow"}
+      />
+      <SocialMediaItem
+        link={socialMediaLinks.facebook}
+        iconName={"facebook-f"}
+        color={"white"}
+        hoverColor={"yellow"}
+      />
+      <SocialMediaItem
+        link={socialMediaLinks.tiktok}
+        iconName={"tiktok"}
+        color={"white"}
+        hoverColor={"yellow"}
+      />
+      <SocialMediaItem
+        link={socialMediaLinks.linkedin}
+        iconName={"linkedin"}
+        color={"white"}
+        hoverColor={"yellow"}
+      />
+      <SocialMediaItem
+        link={socialMediaLinks.spotify}
+        iconName={"spotify"}
+        color={"white"}
+        hoverColor={"yellow"}
+      />
+      <SocialMediaItem
+        link={socialMediaLinks.youtube}
+        iconName={"youtube"}
+        color={"white"}
+        hoverColor={"yellow"}
+      />
+    </div>
+  );
+}
+
+export default SocialMediaFooter;
diff --git a/src/components/Footer/SocialMediaItem.js b/src/components/Footer/SocialMediaItem.js
@@ -0,0 +1,37 @@
+"use client";
+import { useState } from "react";
+
+function SocialMediaItem({ iconName, link, color, hoverColor }) {
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <a
+      href={link}
+      target="_blank"
+      className="max-w-[50%] sm:max-w-[30%] md:max-w-[60%] inline-block"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <div>
+        {/* <Image */}
+        <img
+          className={`${isHovered ? "hidden" : "block"}`}
+          src={`./socialMediaIcons/${color}/${iconName}-${color}.png`}
+          alt={`${iconName}-icon`}
+          width={30}
+          height={30}
+        />
+        {/* <Image */}
+        <img
+          className={`${isHovered ? "block" : "hidden"}`}
+          src={`./socialMediaIcons/${hoverColor}/${iconName}-${hoverColor}.png`}
+          alt={`${iconName}-icon`}
+          width={30}
+          height={30}
+        />
+      </div>
+    </a>
+  );
+}
+
+export default SocialMediaItem;
diff --git a/src/components/Footer/SocialMediaList.js b/src/components/Footer/SocialMediaList.js
@@ -0,0 +1,36 @@
+import SocialMediaItem from "./SocialMediaItem";
+
+const socialMediaLinks = {
+  twitter: "https://twitter.com/tedxntua?lang=en",
+  facebook: "https://facebook.com/tedxntua",
+  instagram: "https://instagram.com/tedxntua/?hl=en",
+  linkedin: "https://linkedin.com/company/tedxntua",
+  spotify:
+    "https://open.spotify.com/user/31jmzq7bew5xcd2cypvo4xuua6ay?si=Qt_NzTPGRFyETbZ4XgKoxw&utm_source=copy-link&nd=1&dlsi=ca94005974b04c42",
+  tiktok: "https://www.tiktok.com/@tedxntua",
+};
+
+function SocialMediaList() {
+  const socialMediaItems = Object.keys(socialMediaLinks).map((key) => {
+    const link = socialMediaLinks[key];
+    let iconName = key;
+    return (
+      <SocialMediaItem
+        key={key} // Make sure to include a unique key for each element in the array
+        link={link}
+        iconName={iconName}
+        color={"white"}
+        hoverColor={"red"}
+      />
+    );
+  });
+  return (
+    <section className="text-center bottom-0">
+      <div className="grid grid-cols-6 justify-center gap-2">
+        {socialMediaItems}
+      </div>
+    </section>
+  );
+}
+
+export default SocialMediaList;
diff --git a/src/components/Footer/TedxWithSocial.js b/src/components/Footer/TedxWithSocial.js
@@ -0,0 +1,110 @@
+"use client";
+import React from "react";
+import { Container, Typography, Grid, Button } from "@mui/material";
+import FacebookIcon from "@mui/icons-material/Facebook";
+import InstagramIcon from "@mui/icons-material/Instagram";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import useTheme from "@mui/material/styles/useTheme";
+const Footer = () => {
+  const theme = useTheme();
+  const isPhone = useMediaQuery(theme.breakpoints.down("sm"));
+  const icon_size = isPhone ? 50 : 30;
+  return (
+    <>
+      <footer className="footer">
+        <Container>
+          <Typography
+            variant={isPhone ? "h3" : "h2"}
+            color="white"
+            align="center"
+          >
+            <span style={{ color: "red" }}>#</span>TEDxNTUA
+          </Typography>
+
+          <Typography variant="body2" color="white" align="center">
+            Follow us on social media for behind-the-scenes
+            <br /> moments and much more!
+          </Typography>
+
+          <Container
+            style={{
+              paddingTop: "10px",
+              paddingBottom: "10px",
+              justifyContent: "center",
+              display: "flex",
+              alignItems: "center",
+            }}
+          >
+            <Button
+              onClick={() =>
+                window.open("https://www.facebook.com/tedxntua/", "_blank")
+              }
+            >
+              <FacebookIcon
+                style={{
+                  color: "white",
+                  width: icon_size,
+                  height: icon_size,
+                }}
+              />
+            </Button>
+
+            <Button
+              onClick={() =>
+                window.open("https://www.instagram.com/tedxntua/", "_blank")
+              }
+            >
+              <InstagramIcon
+                style={{
+                  color: "white",
+                  width: icon_size,
+                  height: icon_size,
+                }}
+              />
+            </Button>
+
+            <Button
+              onClick={() =>
+                window.open("https://www.tiktok.com/@tedxntua", "_blank")
+              }
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width={icon_size}
+                height={icon_size}
+                viewBox="0 0 15 15"
+                fill="none"
+              >
+                <path
+                  d="M10.6703 0H8.14238V10.2174C8.14238 11.4348 7.17012 12.4348 5.96016 12.4348C4.75021 12.4348 3.77793 11.4348 3.77793 10.2174C3.77793 9.02175 4.72861 8.04346 5.89536 8V5.43479C3.3242 5.47825 1.25 7.58696 1.25 10.2174C1.25 12.8696 3.36741 15 5.98178 15C8.59611 15 10.7135 12.8478 10.7135 10.2174V4.97825C11.6642 5.67392 12.8309 6.08696 14.0625 6.10871V3.54348C12.1612 3.47826 10.6703 1.91304 10.6703 0Z"
+                  fill="white"
+                />
+              </svg>
+            </Button>
+
+            <Button
+              onClick={() =>
+                window.open("https://www.youtube.com/c/TEDxNTUA", "_blank")
+              }
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width={icon_size}
+                height={icon_size}
+                viewBox="0 0 15 15"
+                fill="none"
+              >
+                <path
+                  d="M14.8506 4.5C14.8506 4.5 14.7041 3.46582 14.2529 3.01172C13.6816 2.41406 13.043 2.41113 12.75 2.37598C10.6523 2.22363 7.50293 2.22363 7.50293 2.22363H7.49707C7.49707 2.22363 4.34766 2.22363 2.25 2.37598C1.95703 2.41113 1.31836 2.41406 0.74707 3.01172C0.295898 3.46582 0.152344 4.5 0.152344 4.5C0.152344 4.5 0 5.71582 0 6.92871V8.06543C0 9.27832 0.149414 10.4941 0.149414 10.4941C0.149414 10.4941 0.295898 11.5283 0.744141 11.9824C1.31543 12.5801 2.06543 12.5596 2.39941 12.624C3.60059 12.7383 7.5 12.7734 7.5 12.7734C7.5 12.7734 10.6523 12.7676 12.75 12.6182C13.043 12.583 13.6816 12.5801 14.2529 11.9824C14.7041 11.5283 14.8506 10.4941 14.8506 10.4941C14.8506 10.4941 15 9.28125 15 8.06543V6.92871C15 5.71582 14.8506 4.5 14.8506 4.5ZM5.9502 9.44531V5.22949L10.002 7.34473L5.9502 9.44531Z"
+                  fill="white"
+                />
+              </svg>
+            </Button>
+          </Container>
+        </Container>
+      </footer>
+    </>
+  );
+};
+
+export default Footer;
diff --git a/src/components/Footer/magnetic.module.css b/src/components/Footer/magnetic.module.css
@@ -0,0 +1,16 @@
+.magnetic::after {
+  content: "";
+  width: 0%;
+  height: 2px;
+  background-color: white;
+  display: block;
+  margin-top: 2px;
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+  transition: width 0.2s linear;
+}
+
+.magnetic:hover::after {
+  width: 100%;
+}