add register button in navbar

src/components/Button/index.tsx

@@ -0,0 +1,26 @@
+import { type ReactNode } from 'react';
+import styles from './styles.module.scss';
+
+interface Props {
+  href?: string; // no href = disabled
+  variant?: 'primary' | 'secondary' | 'menu';
+  children?: ReactNode;
+}
+
+export default function Button({ href, variant, children }: Props) {
+  const classes: string[] = [styles.btn];
+  if (!href) classes.push(styles.disabled);
+  if (variant !== 'secondary') classes.push(styles.primary);
+  if (variant === 'menu') classes.push(styles.menu);
+
+  return (
+    <a
+      className={classes.join(' ')}
+      href={href}
+      target="_blank"
+      referrerPolicy="no-referrer"
+    >
+      {children}
+    </a>
+  );
+}

src/components/Button/styles.module.scss

@@ -0,0 +1,43 @@
+@use '../../styles/colors';
+@use '../../styles/breakpoints';
+
+$primary-hover: #6dbeda;
+$primary-pressed: #53a0bc;
+
+.btn {
+  border-radius: 8px;
+  padding: 0.75rem;
+  background-color: colors.$secondary;
+  color: colors.$text;
+  display: flex;
+  width: fit-content;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  transition: 100ms;
+  font-weight: 400;
+
+  &.menu {
+    padding: 0.75rem;
+  }
+
+  &.disabled {
+    cursor: default;
+  }
+
+  @media (min-width: breakpoints.$phone) {
+    padding: 1.25rem;
+  }
+}
+
+.btn.primary {
+  background-color: colors.$primary;
+
+  &:hover {
+    background-color: $primary-hover;
+  }
+
+  &:active {
+    background-color: $primary-pressed;
+  }
+}

src/components/Navbar/index.tsx

@@ -6,6 +6,7 @@ import { motion, AnimatePresence } from 'framer-motion';
 import styles from './style.module.scss';
 import logo from '../../graphics/tentative logo.svg';
 import { useEffect, useRef } from 'react';
+import Button from '../Button';
 
 interface Link {
   name: string;
@@ -42,12 +43,30 @@ export default function NavBar({ links }: Props) {
   };
 
   return (
-    <nav ref={navbarRef}>
+    <nav className={styles.nav} ref={navbarRef}>
       {/* logo */}
       <button className={styles.logo} onClick={backToTop}>
         <img src={logo.src} alt="logo" />
       </button>
 
+      {/* links */}
+      <section className={styles.links}>
+        {links.map(l => (
+          <a href={l.url} key={l.url}>
+            <h5>{l.name}</h5>
+          </a>
+        ))}
+        {/* registration button */}
+        <Button variant="menu" href="https://tinyurl.com/hackforimpactregister">
+          REGISTER
+        </Button>
+      </section>
+
+      {/* backdrop */}
+      <div
+        className={`${styles.backdrop} ${menuVisible ? styles.show : null}`}
+      ></div>
+
       {/* menu toggle */}
       <button
         className={styles.button}
@@ -66,20 +85,6 @@ export default function NavBar({ links }: Props) {
         </svg>
       </button>
 
-      {/* backdrop */}
-      <div
-        className={`${styles.backdrop} ${menuVisible ? styles.show : null}`}
-      ></div>
-
-      {/* links */}
-      <section className={styles.links}>
-        {links.map(l => (
-          <a href={l.url} key={l.url}>
-            <h5>{l.name}</h5>
-          </a>
-        ))}
-      </section>
-
       <AnimatePresence>
         {menuVisible && (
           <motion.section

src/components/Navbar/style.module.scss

@@ -3,7 +3,7 @@
 
 $nav-height: 4.5rem;
 
-nav {
+.nav {
   position: fixed;
   top: 0;
 
@@ -49,7 +49,7 @@ nav {
   padding: 0;
 
   @media (min-width: breakpoints.$tablet) {
-    visibility: hidden;
+    display: none;
   }
 }
 
@@ -80,6 +80,7 @@ nav {
 .links {
   display: none;
   justify-content: space-evenly;
+  align-items: center;
   gap: 2rem;
   z-index: 10;