Merge pull request #8 from leslieyip02/add-footer

KAN-4 Add footer

src/App.css

@@ -1,9 +1,6 @@
-/* #root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-} */
+#root {
+  flex-direction: column;
+}
 
 .logo {
   height: 6em;

src/App.jsx

@@ -1,6 +1,7 @@
 import { Routes, Route } from 'react-router-dom';
 import { Home } from './pages';
 import NavigationBar from './layout/NavigationBar';
+import Footer from './layout/Footer';
 import './App.css';
 
 function App() {
@@ -15,8 +16,7 @@ function App() {
         </Routes>
       </main>
 
-      {/* Footer */}
-      <footer>NUSComputing</footer>
+      <Footer />
     </>
   );
 }

src/index.css

@@ -8,8 +8,7 @@
 
 html, body {
   font-family: 'Montserrat', sans-serif;
-  /* background-color: #4a69bd; */
-  /* color: #ffffff; */
+  overscroll-behavior: none;
 }
 
 a {

src/layout/Footer.css

@@ -0,0 +1,17 @@
+.footer-banner {
+  @apply
+    sticky
+    flex
+    flex-col
+    w-full
+    px-8
+    md:px-20
+    pt-8
+    md:pt-10
+    pb-16
+    md:pb-20
+    gap-y-1
+    bg-primary
+    text-white
+  ;
+}

src/layout/Footer.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import {
+  FaFacebookF,
+  FaInstagram,
+  FaTelegramPlane,
+  FaYoutube,
+  FaLinkedinIn,
+} from 'react-icons/fa';
+import { IoMdMail } from 'react-icons/io';
+import './Footer.css';
+
+function Footer() {
+  const socialMediaLinks = [
+    {
+      platform: 'Facebook',
+      url: 'https://www.facebook.com/nuscomputing',
+      icon: FaFacebookF,
+    },
+    {
+      platform: 'Instagram',
+      url: 'https://www.instagram.com/NUSComputingClub/',
+      icon: FaInstagram,
+    },
+    {
+      platform: 'Telegram',
+      url: 'https://t.me/nuscomputingclub',
+      icon: FaTelegramPlane,
+    },
+    {
+      platform: 'YouTube',
+      url: 'https://www.youtube.com/channel/UCIXFOIE140R6x0z05hgim0Q',
+      icon: FaYoutube,
+    },
+    {
+      platform: 'LinkedIn',
+      url: 'https://www.linkedin.com/company/nus-students-computing-club/',
+      icon: FaLinkedinIn,
+    },
+    {
+      platform: 'Email',
+      url: '[email protected]',
+      icon: IoMdMail,
+    },
+  ];
+
+  return (
+    <footer className='w-full'>
+      <div className='footer-banner'>
+        <h4 className='font-heading font-bold text-xl'>
+          NUS Students&#39; Computing Club
+        </h4>
+        <p className='font-subheading text-sm'>
+          A constituent club of the NUS Students&#39; Union
+        </p>
+
+        <div className='flex flex-row flex-wrap'>
+          {
+            socialMediaLinks.map((data, key) => {
+              return (
+                <Link
+                  to={data.url}
+                  aria-label={data.platform}
+                  key={key}
+                  className='mr-4 my-1 text-xl'
+                >
+                  <data.icon />
+                </Link>
+              );
+            })
+          }
+        </div>
+
+        <p className='font-subheading text-sm'>
+          Copyright © NUS Students&#39; Computing Club •&nbsp;
+          <span className='inline-block underline'>
+            <Link to='/privacy'>Privacy Policy</Link>
+          </span>
+        </p>
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;

src/layout/NavigationBar.jsx → src/layout/NavigationBar.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Link } from 'react-router-dom';
 import NavigationMenu from './NavigationMenu';
 import './NavigationBar.css';

src/layout/NavigationMenu.jsx → src/layout/NavigationMenu.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { IoMenu, IoClose } from 'react-icons/io5';
 import NavigationMenuItem from './NavigationMenuItem';
 import './NavigationMenu.css';

src/layout/NavigationMenuItem.css

@@ -3,11 +3,31 @@
     relative
     font-heading
     p-4
-    md:px-0
+    md:p-0
     text-black
     hover:scale-[1.1]
     hover:rounded-md
-    hover:bg-gray-100
+    hover:bg-slate-100
     md:hover:bg-transparent
   ;
 }
+
+.navigation-menu-item::before {
+  content: '';
+
+  @apply
+    absolute
+    block
+    w-full
+    h-0.5
+    bottom-0
+    left-0
+    bg-outline
+    transition-transform
+    duration-300
+    ease-out
+    scale-x-0
+    origin-top-left
+    hover:md:scale-x-100
+  ;
+}

src/layout/NavigationMenuItem.tsx

@@ -5,7 +5,7 @@ import './NavigationMenuItem.css';
 interface NavigationMenuItemProps {
   link: string;
   label: string;
-  dropdown: boolean;
+  dropdown?: boolean;
 }
 
 function NavigationMenuItem(props: NavigationMenuItemProps) {

tailwind.config.js

@@ -1,7 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 
 module.exports = {
-  content: ['./src/**/*.{js,jsx}'],
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
   theme: {
     extend: {
       colors: {