Merge pull request #57 from appKom/redesign-footer

Add bekk and online logo in footer
appKom · Sep 17, 2024 · 2a04346 · 2a04346
2 parents 4d95152 + cc6134f
commit 2a04346
Show file tree

Hide file tree

Showing 4 changed files with 134 additions and 45 deletions.
diff --git a/public/Online_hvit.svg b/public/Online_hvit.svg
diff --git a/public/bekk_white.svg b/public/bekk_white.svg
diff --git a/src/components/all/Footer.tsx b/src/components/all/Footer.tsx
@@ -1,60 +1,94 @@
-import { BsSlack, BsFacebook, BsInstagram, BsGithub } from 'react-icons/bs';
-
-const footerLinkSize = 35;
+import {
+  Slack,
+  Facebook,
+  Instagram,
+  Github,
+  Mail,
+  ExternalLink,
+} from 'lucide-react';
+import { Link } from 'react-router-dom';
 
 const footerLinks = [
-  {
-    name: 'Slack',
-    icon: <BsSlack size={footerLinkSize} />,
-    link: 'https://onlinentnu.slack.com/',
-  },
+  { name: 'Slack', icon: <Slack />, link: 'https://onlinentnu.slack.com/' },
   {
     name: 'Facebook',
-    icon: <BsFacebook size={footerLinkSize} />,
+    icon: <Facebook />,
     link: 'http://facebook.com/LinjeforeningenOnline',
   },
   {
     name: 'Instagram',
-    icon: <BsInstagram size={footerLinkSize} />,
+    icon: <Instagram />,
     link: 'https://www.instagram.com/online_ntnu/',
   },
-  {
-    name: 'Github',
-    icon: <BsGithub size={footerLinkSize} />,
-    link: 'https://github.com/appKom',
-  },
+  { name: 'Github', icon: <Github />, link: 'https://github.com/appKom' },
 ];
 
 const Footer = () => (
-  <div className="flex flex-col gap-8 py-8 bg-onlineblue mt-28">
-    <div className="flex justify-center gap-8">
-      {footerLinks.map((link) => {
-        return (
-          <a
-            href={link.link}
-            key={link.name}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="transition-all hover:text-onlineyellow"
+  <footer className="px-4 py-12 text-gray-200 bg-gray-950 md:px-6 lg:px-8">
+    <div className="mx-auto max-w-7xl">
+      <div className="flex flex-col items-center justify-between mb-8 space-y-8 md:flex-row md:space-y-0">
+        <div className="flex flex-col items-center space-y-4 md:items-start">
+          <h2 className="text-2xl font-bold">Onlinefondet</h2>
+          <div className="flex items-center space-x-2 transition-colors hover:text-onlineyellow">
+            <Mail size={18} className="" />
+            <Link to="mailto:[email protected]">
+              [email protected]
+            </Link>
+          </div>
+        </div>
+
+        <div className="flex flex-col items-center space-y-4 md:items-end">
+          <div className="flex space-x-4">
+            {footerLinks.map((link, index) => (
+              <Link
+                to={link.link}
+                key={index}
+                className="transition-colors hover:text-onlineyellow"
+                aria-label={link.name}
+              >
+                {link.icon}
+              </Link>
+            ))}
+          </div>
+          <div className="text-sm text-center md:text-right">
+            <p>Feil på siden?</p>
+            <Link
+              to="mailto:[email protected]"
+              className="flex items-center justify-center space-x-1 transition-colors hover:underline hover:text-onlineyellow md:justify-end"
+            >
+              <span>Ta kontakt med Appkom</span>
+              <ExternalLink size={14} />
+            </Link>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex flex-col items-center justify-between py-8 space-y-6 border-t border-gray-800 md:flex-row md:space-y-0">
+        <div className="flex items-center space-x-6">
+          <Link
+            to="https://online.ntnu.no/"
+            className="transition hover:opacity-50"
           >
-            {link.icon}
-          </a>
-        );
-      })}
-    </div>
-    <div className="flex flex-col items-center gap-2">
-      <div>Feil på siden?</div>
-      <div>
-        Ta kontakt med{' '}
-        <a
-          href="mailto:[email protected]"
-          className="font-medium transition-all hover:text-onlineyellow"
-        >
-          Appkom
-        </a>
+            <img
+              src="Online_hvit.svg"
+              alt="Online logo"
+              className="w-32 h-auto"
+            />
+          </Link>
+          <Link
+            to="https://www.bekk.no/"
+            className="transition hover:opacity-50"
+          >
+            <img src="bekk_white.svg" alt="Bekk logo" className="w-32 h-auto" />
+          </Link>
+        </div>
+        <p className="text-sm text-gray-400">
+          &copy; {new Date().getFullYear()} Onlinefondet. Alle rettigheter
+          reservert.
+        </p>
       </div>
     </div>
-  </div>
+  </footer>
 );
 
 export default Footer;
diff --git a/src/components/all/Navbar.tsx b/src/components/all/Navbar.tsx
@@ -1,4 +1,4 @@
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import { useState, useEffect, useRef } from 'react';
 import { Spiral as Hamburger } from 'hamburger-react';
 import clsx from 'clsx';
@@ -13,6 +13,7 @@ const navLinks = [
 const Navbar = () => {
   const [showNavbar, setShowNavbar] = useState(true);
   const [lastScroll, setLastScroll] = useState(0);
+  const location = useLocation();
 
   useEffect(() => {
     const controlNavbar = () => {
@@ -28,11 +29,16 @@ const Navbar = () => {
     };
   }, [lastScroll]);
 
+  useEffect(() => {
+    // Scroll to top when location changes
+    window.scrollTo(0, 0);
+  }, [location]);
+
   return (
     <div
       className={clsx(
         showNavbar ? 'opacity-100' : 'opacity-0 pointer-events-none',
-        'bg-[#131620] top-0 sticky w-full transition z-20 flex items-center justify-between px-4 py-2 md:py-5 md:px-8 border-b border-[#293046] shadow-md',
+        'bg-gray-950/80 backdrop-blur top-0 sticky w-full transition z-20 flex items-center justify-between px-4 py-2 md:py-5 md:px-8 border-b border-[#293046] shadow-md',
       )}
     >
       <MobileNavbar />
@@ -96,6 +102,14 @@ const MobileNavbar = () => {
           </motion.div>
         )}
       </div>
+
+      <Link
+        to="https://www.bekk.no/"
+        target="_blank"
+        className="hidden p-2 transition md:block hover:opacity-50"
+      >
+        <img src="bekk_white.svg" alt="Bekk logo" className="h-10" />
+      </Link>
     </div>
   );
 };
@@ -111,7 +125,7 @@ const DesktopNavbar = () => (
       {navLinks.map((link) => (
         <Link
           to={link.path}
-          className="px-4 py-2 transition hover:bg-[#1e2334] text-lg rounded-md border hover:border hover:border-[#293046] border-[#131620] tracking-wide"
+          className="px-4 py-2 transition hover:bg-[#1e2334] text-lg rounded-md border hover:border hover:border-[#293046] border-transparent tracking-wide"
           key={link.title}
         >
           {link.title}