Feat/no ref/executives and constitution

README.md

@@ -71,6 +71,14 @@ Sponsors are hard-coded in `src/routes/LandingPage/SponsorshipSection/Sponsorshi
 
 Workshop slides and code are published in the [QuantSoc/workshop-materials](https://github.com/QuantSoc/workshop-materials) repo.
 
+### Updating the team page
+
+The executives shown on `/team` are listed in `src/routes/TeamPage/executives.js`, newest year first. The first year in the list is shown as the current executive. For a new year, copy a year's block to the top of the list and fill in the names, roles and (optional) LinkedIn links.
+
+### Updating the constitution
+
+The `/constitution` page is generated from `src/routes/ConstitutionPage/constitution.txt`. It can be updated directly from `constitution.txt`, or you can open it up on Google Docs, choose **File -> Download -> Plain text (.txt)**, and insert the new file instead of the old `constitution.text`.
+
 ### Updating Jobs Listings & Articles
 
 All the Job Listings are stored in the [Firebase Firestore](https://firebase.google.com/docs/firestore) database. Simply log into Firebase Hosting using quantsoc email OAuth, and then end it manually from there.

src/App.jsx

@@ -10,6 +10,8 @@ import Footer from 'components/Footer';
 import Mathsprint from 'routes/MathsprintPage/MathsprintPage';
 import ArticlesPage from 'routes/ArticlesPage';
 import ContactPage from 'routes/ContactPage/ContactPage';
+import TeamPage from 'routes/TeamPage/TeamPage';
+import ConstitutionPage from 'routes/ConstitutionPage/ConstitutionPage';
 
 const App = () => {
   return (
@@ -24,6 +26,8 @@ const App = () => {
           <Route path="/resources" element={<ResourcesPage />} />
           <Route path="/contact" element={<ContactPage />} />
           <Route path="/mathsprint" element={<Mathsprint />} />
+          <Route path="/team" element={<TeamPage />} />
+          <Route path="/constitution" element={<ConstitutionPage />} />
         </Routes>
         <Footer />
       </div>

src/components/BurgerMenu/BurgerMenu.jsx

@@ -70,36 +70,45 @@ const BurgerMenu = () => {
           className="burger-menu-item"
           onKeyDown={() => {}}
           tabIndex={-1}
-          to='/#events'
+          smooth
+          to='/team#'
         >
-          Events
+          Team
         </HashLink>
         <HashLink
           className="burger-menu-item"
           onKeyDown={() => {}}
           tabIndex={-1}
           smooth
-          to='/resources#'
+          to='/constitution#'
         >
-          Resources
+          Constitution
+        </HashLink>
+        <HashLink
+          className="burger-menu-item"
+          onKeyDown={() => {}}
+          tabIndex={-1}
+          to='/#events'
+        >
+          Events
         </HashLink>
         <HashLink
           className="burger-menu-item"
           onKeyDown={() => {}}
           tabIndex={-1}
           smooth
-          to='/#sponsorships'
+          to='/resources#'
         >
-          Sponsors
+          Resources
         </HashLink>
         <HashLink
           className="burger-menu-item"
           onKeyDown={() => {}}
           tabIndex={-1}
           smooth
-          to='/articles#'
+          to='/#sponsorships'
         >
-          News
+          Sponsors
         </HashLink>
         <HashLink
             to='/contact#'

src/components/Footer/Footer.jsx

@@ -44,6 +44,16 @@ const Footer = () => {
                   Resources
                 </a>
               </li>
+              <li>
+                <a className="nav-link" href="/team">
+                  Our Team
+                </a>
+              </li>
+              <li>
+                <a className="nav-link" href="/constitution">
+                  Constitution
+                </a>
+              </li>
               <li>
                 <a
                   className="nav-link"

src/components/NavBar/NavBar.jsx

@@ -47,6 +47,24 @@ const NavBar = () => {
         >
           About Us
         </HashLink>
+        <HashLink
+          tabIndex={-1}
+          onKeyDown={() => {}}
+          smooth
+          to='/team#'
+          className="text-main menu-item menu-item-mobile"
+        >
+          Team
+        </HashLink>
+        <HashLink
+          tabIndex={-1}
+          onKeyDown={() => {}}
+          smooth
+          to='/constitution#'
+          className="text-main menu-item menu-item-mobile"
+        >
+          Constitution
+        </HashLink>
         <HashLink
           tabIndex={-1}
           smooth
@@ -78,15 +96,6 @@ const NavBar = () => {
           Sponsors
         </HashLink>
 
-        <HashLink
-          tabIndex={-1}
-          onKeyDown={() => {}}
-          smooth
-          to='/articles#'
-          className="text-main menu-item menu-item-mobile"
-        >
-          News
-        </HashLink>
         <HashLink
           to='/contact#'
           smooth

src/components/PageHero/PageHero.jsx

@@ -0,0 +1,24 @@
+import './index.less';
+
+// Dark header used at the top of the Team and Constitution pages.
+// `title` can contain a <span> to highlight a word; anything passed as
+// children (stats, buttons, ...) is shown underneath the subtitle.
+const PageHero = ({
+  eyebrow = 'QuantSoc UNSW',
+  title,
+  subtitle,
+  children,
+}) => {
+  return (
+    <header className="page-hero">
+      <div className="page-hero__content">
+        <p className="page-hero__eyebrow">{eyebrow}</p>
+        <h1 className="page-hero__title">{title}</h1>
+        {subtitle && <p className="page-hero__subtitle">{subtitle}</p>}
+        {children}
+      </div>
+    </header>
+  );
+};
+
+export default PageHero;

src/components/PageHero/index.less

@@ -0,0 +1,135 @@
+@import '../../styles/constants.less';
+
+// Solid background with faint grid lines for a subtle "trading chart" feel
+.page-hero {
+  padding: 6rem 15% 5rem;
+  color: white;
+  font-family: 'Poppins';
+  text-align: left;
+  background-color: @black-purple;
+  background-image:
+    linear-gradient(fade(white, 5%) 1px, transparent 1px),
+    linear-gradient(90deg, fade(white, 5%) 1px, transparent 1px);
+  background-size: 48px 48px;
+
+  @media screen and (max-width: @tablet) {
+    padding: 5rem 8% 4rem;
+  }
+
+  @media screen and (max-width: @mobile) {
+    padding: 3.5rem 1.5rem 3rem;
+  }
+}
+
+.page-hero__content {
+  max-width: 760px;
+}
+
+.page-hero__eyebrow {
+  margin-bottom: 1rem;
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: @quantsoc-primary;
+}
+
+.page-hero__title {
+  margin: 0 0 1.5rem;
+  font-size: 64px;
+  font-weight: 600;
+  line-height: 1.1;
+  color: white;
+
+  span {
+    color: @quantsoc-primary;
+  }
+
+  @media screen and (max-width: @mobile) {
+    font-size: 40px;
+  }
+}
+
+.page-hero__subtitle {
+  max-width: 600px;
+  font-size: 20px;
+  line-height: 1.6;
+  color: fade(white, 80%);
+
+  @media screen and (max-width: @mobile) {
+    font-size: 16px;
+  }
+}
+
+.page-hero__stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem 3rem;
+  margin-top: 2.5rem;
+
+  @media screen and (max-width: @mobile) {
+    gap: 1rem 1.25rem;
+  }
+}
+
+.page-hero__stat {
+  display: flex;
+  flex-direction: column;
+  padding-left: 1rem;
+  border-left: 3px solid @mid-purple;
+
+  @media screen and (max-width: @mobile) {
+    padding-left: 0.75rem;
+  }
+}
+
+.page-hero__stat-value {
+  font-size: 36px;
+  font-weight: 600;
+  line-height: 1.2;
+  font-variant-numeric: tabular-nums;
+
+  @media screen and (max-width: @mobile) {
+    font-size: 28px;
+  }
+}
+
+.page-hero__stat-label {
+  font-size: 14px;
+  color: fade(white, 65%);
+}
+
+.page-hero__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-top: 2.5rem;
+}
+
+.page-hero__button {
+  padding: 0.75rem 1.5rem;
+  border: 2px solid fade(white, 60%);
+  border-radius: 8px;
+  font-size: 17px;
+  font-weight: 500;
+  color: white;
+  text-decoration: none;
+  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease-out;
+
+  &:hover {
+    color: white;
+    border-color: white;
+    background-color: fade(white, 10%);
+    transform: translateY(-2px);
+  }
+}
+
+.page-hero__button--primary {
+  border-color: @mid-purple;
+  background-color: @mid-purple;
+
+  &:hover {
+    border-color: @dark-purple;
+    background-color: @dark-purple;
+  }
+}