Fixed navbar/footer links, navbar color issue, and week 4/5 ordering

pages/hack-school/_meta.json

@@ -6,6 +6,6 @@
   "week1": "Week 1: HTML, CSS, and JavaScript",
   "react": "Week 2: React and Next.js",
   "express": "Week 3: APIs with Express",
-  "deployment": "Week 4: Debugging and Deployment",
-  "mongodb": "Week 5: Databases with MongoDB"
+  "mongodb": "Week 4: Databases with MongoDB",
+  "deployment": "Week 5: Debugging and Deployment"
 }

pages/hack-school/deployment.mdx

@@ -1,4 +1,4 @@
-# Week 4: Debugging and Deployment
+# Week 5: Debugging and Deployment
 
 ## What is deployment?
 

pages/hack-school/mongodb.mdx

@@ -1,4 +1,4 @@
-# Week 5: Databases and MongoDB
+# Week 4: Databases and MongoDB
 
 ## What is a Database?
 A database is an organized collection of data or information. It allows people to store information between sessions on a website.

src/components/footer/index.tsx

@@ -17,37 +17,34 @@ const Footer: React.FC = () => {
       <h2 className={styles.title}>Connect With Us!</h2>
       <div className={styles.content}>
         <div className={styles.socialLinks}>
-          <a href="#email" className={styles.link}>
+          <a href="mailto:hack@acmucsd.org" className={styles.link}>
             <FaEnvelope /> Email
           </a>
-          <a href="#discord" className={styles.link}>
+          <a href="https://acmurl.com/hack-disc" className={styles.link} target="_blank">
             <FaDiscord /> Discord
           </a>
-          <a href="#medium" className={styles.link}>
-            <FaMediumM /> Medium
-          </a>
-          <a href="#facebook" className={styles.link}>
-            <FaFacebookF /> Facebook
-          </a>
-          <a href="#github" className={styles.link}>
+          <a href="https://github.com/acmucsd" className={styles.link} target="_blank">
             <FaGithub /> Github
           </a>
-          <a href="#instagram" className={styles.link}>
+          <a
+            href="https://www.instagram.com/acm.ucsd/?hl=en"
+            className={styles.link}
+            target="_blank"
+          >
             <FaInstagram /> Instagram
           </a>
-          <a href="#linkedin" className={styles.link}>
+          <a
+            href="https://www.linkedin.com/company/acm-ucsd/"
+            className={styles.link}
+            target="_blank"
+          >
             <FaLinkedinIn /> LinkedIn
           </a>
-          <a href="#youtube" className={styles.link}>
-            <FaYoutube /> YouTube
+          <a href="https://www.facebook.com/acmucsd/" className={styles.link} target="_blank">
+            <FaFacebookF /> Facebook
           </a>
         </div>
         <div className={styles.newsletter}>
-          <h3>Newsletter</h3>
-          <p>Receive weekly events and news!</p>
-          <button type="button" className={styles.subscribeButton}>
-            Subscribe!
-          </button>
           <a
             href="https://vercel.com?utm_source=your-team&utm_campaign=oss"
             target="_blank"

src/components/navbar/index.tsx

@@ -7,17 +7,44 @@ import Logo from '../../../public/Logo';
 
 const NAV_LINKS = [
   { name: 'Home', href: '/' },
-  { name: 'About', href: '/about' },
-  { name: 'Events', href: '/events' },
-  { name: 'Team', href: '/team' },
-  { name: 'Contact', href: '/contact' },
+  { name: 'About', href: '/#about' },
+  { name: 'Events', href: '/#events' },
+  { name: 'Team', href: '/#team' },
+  { name: 'Contact', href: '/#contact' },
   { name: 'Hack School', href: '/hack-school' },
 ];
 
 const Navbar: React.FC = () => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  // Inject smooth scroll CSS once
+  React.useEffect(() => {
+    const style = document.createElement('style');
+    style.innerHTML = 'html { scroll-behavior: smooth; }';
+    document.head.appendChild(style);
+    return () => {
+      document.head.removeChild(style);
+    };
+  }, []);
+
+  // Custom click handler for hash links
+  const handleNavClick = (e: React.MouseEvent<HTMLElement>, href: string) => {
+    if (href.startsWith('/#')) {
+      e.preventDefault();
+      const id = href.split('#')[1];
+      const el = document.getElementById(id);
+      if (el) {
+        el.scrollIntoView({ behavior: 'smooth' });
+      }
+      // Optionally close menu on mobile
+      setIsMenuOpen(false);
+      // Update URL hash without page reload
+      window.history.pushState(null, '', href);
+    }
+  };
+
   return (
-    <nav className={`${styles.navbar} ${isMenuOpen ? styles.navbarOpen : ''}`}>
+    <nav className={styles.navbar}>
       <div className={styles.navbarContent}>
         <Logo />
         <button
@@ -31,7 +58,25 @@ const Navbar: React.FC = () => {
         <ul className={`${styles.navLinks} ${isMenuOpen ? styles.navLinksOpen : ''}`}>
           {NAV_LINKS.map(link => (
             <li key={link.name}>
-              <Link href={link.href}>{link.name}</Link>
+              {link.href.startsWith('/#') ? (
+                <button
+                  type="button"
+                  className={styles.navButton}
+                  onClick={e => handleNavClick(e, link.href)}
+                  onKeyDown={e => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      handleNavClick(e as any, link.href);
+                    }
+                  }}
+                  tabIndex={0}
+                  aria-label={link.name}
+                  role="link"
+                >
+                  {link.name}
+                </button>
+              ) : (
+                <Link href={link.href}>{link.name}</Link>
+              )}
             </li>
           ))}
         </ul>

src/components/navbar/style.module.css

@@ -8,10 +8,6 @@
   transition: box-shadow 0.3s ease, background-color 0.3s ease;
 }
 
-.navbarOpen {
-  background-color: rgba(255, 255, 255, 0.98);
-}
-
 .navbarContent {
   display: flex;
   align-items: center;
@@ -104,10 +100,8 @@
     left: 0;
     right: 0;
     width: 100%;
-    background-color: white;
     padding: 0 2rem;
     z-index: 1000;
-    border-top: 1px solid #ddd;
     max-height: 0;
     overflow: hidden;
     opacity: 0;

src/homepage.tsx

@@ -14,9 +14,16 @@ const HomePage: NextPage<{ past_events: EventsArray; future_events: EventsArray
   return (
     <main>
       <Hero />
-      <About />
-      <Events past_events={past_events} future_events={future_events} />
-      <Team />
+      <section id="about">
+        <About />
+      </section>
+      <section id="events">
+        <Events past_events={past_events} future_events={future_events} />
+      </section>
+      <section id="team">
+        <Team />
+      </section>
+      <section id="contact">{/* Add your Contact component or content here */}</section>
     </main>
   );
 };