First pass at 2026

Author: seanmarcia

components/Accordion.js

@@ -2,24 +2,30 @@ import styles from "../styles/modules/accordion.module.scss";
 import { useState } from "react";
 
 export default ({ title, content }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
   const extend = (e) => {
-    const panel = e.target.parentNode.nextSibling;
-    if (panel.style.maxHeight) {
+    const panel = e.target.closest(`.${styles.accordion}`).querySelector(`.${styles.panel}`);
+    const accordion = e.target.closest(`.${styles.accordion}`);
+    
+    if (panel.style.maxHeight && panel.style.maxHeight !== "0px") {
       panel.style.maxHeight = null;
+      accordion.classList.remove(styles.active);
+      setIsOpen(false);
     } else {
       panel.style.maxHeight = panel.scrollHeight + "px";
+      accordion.classList.add(styles.active);
+      setIsOpen(true);
     }
   };
 
   return (
-    <div className={styles.accordion}>
+    <div className={`${styles.accordion} ${isOpen ? styles.active : ''}`}>
       <div onClick={extend}>
         <h4>{title}</h4>
       </div>
       <div className={styles.panel}>
-        <br />
         <p>{content}</p>
-        <br />
       </div>
     </div>
   );

components/Layout.js

@@ -5,13 +5,11 @@ export default ({ children }) => {
     <>
       <nav className="navbar navbar-expand-md navbar-light">
         <div className="container">
-          <Link href="/">
-            <a className="navbar-brand">
-              <img
-                style={{ width: "200px" }}
-                src="/img/logos/classic-logo.png"
-              />
-            </a>
+          <Link href="/" className="navbar-brand">
+            <img
+              style={{ width: "200px" }}
+              src="/img/logos/classic-logo.png"
+            />
           </Link>
           <button
             className="navbar-toggler"
@@ -23,18 +21,18 @@ export default ({ children }) => {
           <div className="collapse navbar-collapse" id="navbar-target">
             <ul className="navbar-nav ml-auto">
               <li className="nav-item">
-                <Link href="/">
-                  <a className="nav-link">Home</a>
+                <Link href="/" className="nav-link">
+                  Home
                 </Link>
               </li>
               <li className="nav-item">
-                <Link href="/schedule">
-                  <a className="nav-link">Schedule</a>
+                <Link href="/schedule" className="nav-link">
+                  Schedule
                 </Link>
               </li>
               <li className="nav-item">
-                <Link href="/faqs">
-                  <a className="nav-link">FAQs</a>
+                <Link href="/faqs" className="nav-link">
+                  FAQs
                 </Link>
               </li>
               <li className="nav-item">
@@ -59,6 +57,14 @@ export default ({ children }) => {
             <div>
               <h1>Get in touch!</h1>
               <ul className="horizontal-links">
+                <li>
+                  <a
+                    href="mailto:[email protected]"
+                    title="Email us"
+                  >
+                    📧
+                  </a>
+                </li>
                 <li>
                   <a
                     href="https://github.com/rubyforgood"
@@ -78,6 +84,9 @@ export default ({ children }) => {
               </ul>
 
               <ul className="horizontal-links" style={{ paddingTop: "15px" }}>
+                <li>
+                  <a href="mailto:[email protected]">[email protected]</a>
+                </li>
                 <li>
                   <a href="https://github.com/rubyforgood/code-of-conduct" target="_blank">Code of Conduct</a>
                 </li>
@@ -89,7 +98,7 @@ export default ({ children }) => {
             />
           </div>
           <div>
-            <small>&copy; 2024 Ruby for Good ❤️</small>
+            <small>&copy; 2026 Ruby for Good ❤️</small>
           </div>
         </div>
       </footer>