added contact

Author: Tony Qiu

frontend/src/App.tsx

@@ -3,6 +3,7 @@ import { Analytics } from '@vercel/analytics/react'
 import EventsPage from '@/pages/EventsPage'
 import ClubsPage from '@/pages/ClubsPage'
 import AboutPage from '@/pages/AboutPage'
+import ContactPage from '@/pages/ContactPage'
 import Footer from '@/components/Footer'
 import Navbar from '@/components/Navbar'
 
@@ -17,6 +18,7 @@ function App() {
             <Route path="/events" element={<EventsPage />} />
             <Route path="/clubs" element={<ClubsPage />} />
             <Route path="/about" element={<AboutPage />} />
+            <Route path="/contact" element={<ContactPage />} />
           </Routes>
         </main>
 

frontend/src/components/Footer.tsx

@@ -102,7 +102,7 @@ function Footer() {
               reserved.
             </p>
           </div>
-          <div className="flex items-center gap-4">
+          <div className="flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-4">
             <a
               href="https://wat2do.instatus.com/"
               target="_blank"
@@ -129,6 +129,18 @@ function Footer() {
             >
               Clubs
             </a>
+            <a
+              href="/about"
+              className="hover:text-gray-900 dark:hover:text-gray-200"
+            >
+              About
+            </a>
+            <a
+              href="/contact"
+              className="hover:text-gray-900 dark:hover:text-gray-200"
+            >
+              Contact
+            </a>
           </div>
         </div>
       </div>

frontend/src/components/Navbar.tsx

@@ -65,6 +65,17 @@ function Navbar() {
               >
                 About
               </Button>
+              <Button
+                variant="link"
+                onMouseDown={() => handleNavigation("/contact")}
+                className={`text-sm font-medium ${
+                  isActive("/contact")
+                    ? "text-gray-900 dark:text-white"
+                    : "text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
+                }`}
+              >
+                Contact
+              </Button>
             </div>
           </div>
 
@@ -141,6 +152,13 @@ function Navbar() {
               >
                 About
               </Button>
+              <Button
+                variant="ghost"
+                className="w-full justify-start text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
+                onMouseDown={() => handleNavigation("/contact")}
+              >
+                Contact
+              </Button>
               <div className="border-t border-gray-200/50 dark:border-gray-700/50 my-2"></div>
               <div className="flex gap-2">
                 <Button

frontend/src/pages/ContactPage.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+
+const ContactPage: React.FC = () => {
+  return (
+    <div className="min-h-[60vh]">
+      <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
+        Contact
+      </h1>
+      <p className="text-gray-600 dark:text-gray-300 mb-8">
+        Questions, ideas, or feedback? We'd love to hear from you.
+      </p>
+
+      <div className="grid gap-6 sm:grid-cols-2">
+        <div className="rounded-lg border border-gray-200 dark:border-gray-700 p-5 bg-white dark:bg-gray-900">
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+            Email
+          </h2>
+          <p className="text-gray-600 dark:text-gray-300">
+            Reach us at {" "}
+            <a
+              href="mailto:tqiu@uwaterloo.ca"
+              className="underline hover:text-gray-900 dark:hover:text-gray-100"
+            >
+              tqiu@uwaterloo.ca
+            </a>{" "}
+            and {" "}
+            <a
+              href="mailto:ericahan.38@gmail.com"
+              className="underline hover:text-gray-900 dark:hover:text-gray-100"
+            >
+              ericahan.38@gmail.com
+            </a>
+            .
+          </p>
+        </div>
+
+        <div className="rounded-lg border border-gray-200 dark:border-gray-700 p-5 bg-white dark:bg-gray-900">
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+            GitHub Issues
+          </h2>
+          <p className="text-gray-600 dark:text-gray-300">
+            Found a bug or want a feature? Open an issue {" "}
+            <a
+              href="https://github.com/ericahan22/bug-free-octo-spork/issues"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="underline hover:text-gray-900 dark:hover:text-gray-100"
+            >
+              on GitHub
+            </a>
+            .
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(ContactPage);
+
+