feat: flesh out hack-night pages

src/components/hacknight/Tabs.tsx → src/components/hacknight/HackNightTabs.tsx

@@ -1,5 +1,5 @@
 import { Tabs } from '../Tabs';
-import AboutTab from './AboutTab';
+import UpdatesTab from './UpdatesTab';
 import ProjectsTab from './ProjectsTab';
 import ResourcesTab from './ResourcesTab';
 
@@ -8,9 +8,9 @@ export default function HackNightTabs() {
     <Tabs
       tabs={[
         {
-          value: 'about',
-          title: 'About',
-          renderContent: () => <AboutTab />,
+          value: 'udpates',
+          title: 'Updates',
+          renderContent: () => <UpdatesTab />,
         },
         {
           value: 'projets',

src/components/hacknight/ProjectsTab.tsx

@@ -1,22 +1,99 @@
-export default function ProjectsTab() {
+import styles from './styles.module.css';
+
+export default function () {
   return (
-    <div className="flex flex-wrap">
-      <div>
-        <h1 className="text-3xl font-bold">Hack Night</h1>
-        <p className="text-lg">This is a description of the hack night.</p>
-      </div>
-      <div>
-        <h1 className="text-3xl font-bold">Projects</h1>
-        <p className="text-lg">
-          These are the projects that were worked on during the hack night.
+    <div className={styles.container}>
+      <section className={styles.section} id="event-details">
+        <p id="topic" className={styles.topic}>
+          TWD Voting System
         </p>
-      </div>
-      <div>
-        <h1 className="text-3xl font-bold">Resources</h1>
-        <p className="text-lg">
-          These are the resources that were used during the hack night.
+        <h2 className={styles.section_h2}>Active Since: February 14, 2024</h2>
+        <br />
+        <p>
+          We're building a voting system as the first feature of the new Tulsa
+          Web Devs Website! This is a greenfield opportunity to innovate and
+          create solutions that will shape the future of decision-making within
+          our organization.
         </p>
-      </div>
+        <br />
+        <p>
+          We're embarking on a mission to design and implement a modern internal
+          voting system that breaks away from traditional models. Our goal is to
+          find the best voting system that fosters inclusivity, accuracy, and
+          efficiency, ensuring that every voice is heard and represented.
+        </p>
+        <br />
+        <h3 className={styles.section_h3}>
+          Why First-Past-the-Post Won't Cut It
+        </h3>
+        <br />
+        <p>
+          We recognize that the traditional first-past-the-post approach is
+          outdated and flawed. It often leads to misrepresentation, discourages
+          voter turnout, and fails to provide fair representation for all
+          stakeholders. We're here to challenge the status quo and explore
+          alternative voting systems that address these shortcomings head-on.
+        </p>
+        <br />
+        <h3 className={styles.section_h3}>Exploring the Possibilities:</h3>
+        <br />
+        <div className={styles.tip}>
+          <span className={styles.tip_text}>
+            Tip: Want to dive deeper into alternative voting methods? Check out{' '}
+            <a
+              className={styles.link}
+              href="https://www.eac.gov/sites/default/files/electionofficials/Final_Alternative_Voting_Methods_in_the_United_States_508.pdf"
+              target="_blank"
+            >
+              this comprehensive guide!
+            </a>
+          </span>
+        </div>
+        <br />
+        <br />
+        <p>
+          We have a vast landscape of voting systems to explore, from the
+          tried-and-tested to the cutting-edge. Let's take a glimpse at some of
+          the avenues we'll be delving into:
+        </p>
+        <br />
+        <ul className={styles.list}>
+          <li className={styles.list_item}>
+            <span className={styles.emphasis}>Plurality Voting</span>: While it
+            has its merits, such as ensuring majority/plurality representation,
+            we'll need to navigate its pitfalls, including misrepresentation of
+            parties and voter disenfranchisement.
+          </li>
+          <br />
+          <li className={styles.list_item}>
+            <span className={styles.emphasis}>Proportional Representation</span>
+            : A promising path that offers accurate party representation and
+            broader inclusivity. However, we'll need to tackle challenges like
+            system complexity and potential trade-offs in decision-making.
+          </li>
+          <br />
+          <li className={styles.list_item}>
+            <span className={styles.emphasis}>SemiProportional Systems</span>:
+            An intriguing middle ground between tradition and innovation,
+            promising fairer representation and flexibility in voting. Yet, we
+            must address issues like limited usage and inconsistency in results.
+          </li>
+        </ul>
+        <br />
+        <h3 className={styles.section_h3}>Your Mission:</h3>
+        <br />
+        <p>
+          As part of this project, you'll have the opportunity to contribute
+          your expertise and creativity to shape the future of internal voting.
+          Together, we'll pioneer solutions that empower our organization and
+          set a new standard for democratic decision-making.
+        </p>
+        <br />
+        <p>
+          Let's roll up our sleeves, embrace the challenge, and embark on this
+          exciting journey to revolutionize internal voting systems!
+        </p>
+      </section>
     </div>
   );
 }

src/components/hacknight/ResourcesTab.tsx

@@ -1,21 +1,57 @@
+import styles from './styles.module.css';
+
 export default function ResourcesTab() {
   return (
-    <>
-      <p>Here are some resources to help you get started:</p>
-      <ul>
-        <li>
-          <a href="https://www.freecodecamp.org/">FreeCodeCamp</a>
-        </li>
-        <li>
-          <a href="https://www.codecademy.com/">Codecademy</a>
-        </li>
-        <li>
-          <a href="https://www.udemy.com/">Udemy</a>
-        </li>
-        <li>
-          <a href="https://www.khanacademy.org/">Khan Academy</a>
-        </li>
-      </ul>
-    </>
+    <div className={styles.container}>
+      <section className={styles.section} id="resources">
+        <p id="topic" className={styles.topic}>
+          Resources
+        </p>
+        <h2 className={styles.section_h2}>Stuff we use</h2>
+        <br />
+        <div className={styles.two_column_grid}>
+          <ul className={styles.list}>
+            <h3 className={styles.section_h3}>Collaboration Tools</h3>
+            <li className={styles.list_item}>
+              <a href="https://github.com/tulsawebdevs/website">TWD Github</a>
+            </li>
+            <li className={styles.list_item}>
+              <a href="https://github.com/tulsawebdevs/website/projects?query=is%3Aopen">
+                TWD Active Projects
+              </a>
+            </li>
+            <li className={styles.list_item}>
+              <a href="https://www.meetup.com/tulsa-web-devs/">
+                Upcoming Events
+              </a>
+            </li>
+            <li className={styles.list_item}>
+              <a href="https://g.co/kgs/V1Dxko2">Directions to 36º North</a>
+            </li>
+          </ul>
+
+          <ul className={styles.list}>
+            <h3 className={styles.section_h3}>Learning Resources</h3>
+            <li className={styles.list_item}>
+              <a href="https://www.freecodecamp.org/">FreeCodeCamp</a>
+            </li>
+            <li className={styles.list_item}>
+              <a href="https://www.codecademy.com/">Codecademy</a>
+            </li>
+            <li className={styles.list_item}>
+              <a href="https://www.udemy.com/">Udemy</a>
+            </li>
+            <li className={styles.list_item}>
+              <a href="https://www.khanacademy.org/">Khan Academy</a>
+            </li>
+          </ul>
+        </div>
+        <p className={styles.section_footer}>
+          Reach out to us on{' '}
+          <a href="https://slack.techlahoma.org">Slack at #ug-tulsa-webdevs </a>
+          if you have any questions!
+        </p>
+      </section>
+    </div>
   );
 }

src/components/hacknight/UpdatesTab.tsx

@@ -0,0 +1,44 @@
+import styles from './styles.module.css';
+
+export default function () {
+  return (
+    <div className={styles.container}>
+      <section className={styles.section} id="event-details">
+        <p id="topic" className={styles.topic}>
+          Let's Greenfield Democracy!
+        </p>
+        <h2 className={styles.section_h2}>February 27, 2024 - 6pm-9pm CST</h2>
+        <br />
+        <p>
+          This month, as part of a new pilot format for Hack Night, we're
+          exploring alternative voting systems and empowering YOU, our
+          membership, to have an ongoing say in programming for the group!
+        </p>
+        <br />
+        <p>
+          We'd like your help designing, architecting, and implementing (time
+          allowing) a mechanism to make it easy for members to suggest topics,
+          propose projects, and cast their votes for the direction of Tulsa Web
+          Devs!
+        </p>
+        <br />
+        <p>
+          We'll break out into teams, discuss the problem, and work together
+          towards building a solution. A successful solution is one that
+          features a simple, user-friendly UI, ensures fairness in voting, and
+          fosters engagement among members.
+        </p>
+        <br />
+        Want to get a head start? Check out the "Projects" tab for a project
+        brief!
+        <br />
+        <p className={styles.section_footer}>
+          <a href="https://www.meetup.com/tulsa-web-devs/events/298383788/">
+            Please RSVP on Meetup so we can get an accurate head-count. We look
+            forward to seeing you there!
+          </a>
+        </p>
+      </section>
+    </div>
+  );
+}

src/components/hacknight/styles.module.css

@@ -0,0 +1,87 @@
+.container {
+  max-width: 800px;
+  margin: auto;
+  padding: 5px;
+}
+
+.topic {
+  font-size: calc(1.25rem + 1.25vw);
+  align-self: center;
+  font-weight: 500;
+}
+
+.section {
+  margin: 20px 0;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.section_h2 {
+  font-size: 22px;
+  padding-bottom: 5px;
+  color: rgb(var(--accent-light));
+  border-bottom: solid;
+  border-color: rgb(var(--accent-dark));
+}
+
+.section_h3 {
+  font-size: 18px;
+  padding-bottom: 5px;
+  color: rgb(var(--accent-light));
+}
+
+.section_footer {
+  font-size: 20px;
+  padding-block: 10px;
+  font-weight: 600;
+  text-align: center;
+}
+
+.section_footer:hover {
+  text-decoration-line: underline;
+}
+
+.emphasis {
+  font-weight: 700;
+  text-decoration: underline;
+}
+
+.list {
+  padding-inline-start: 20px;
+}
+
+.list_item::before {
+  content: '☞';
+  margin-right: 5px;
+}
+
+.tip {
+  display: flex;
+  background-color: rgb(var(--accent-dark));
+  opacity: 0.8;
+  padding: 10px;
+  border-radius: 8px;
+}
+
+.tip_text {
+  font-style: italic;
+  flex-grow: 1;
+  text-align: center;
+}
+
+.tip::before {
+  content: '💡';
+  margin-right: 5px;
+}
+
+.link {
+  color: rgb(var(--accent-light));
+  text-decoration: underline;
+}
+
+.two_column_grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+}