Created skeleton careers hub

components/CareerResourceCard.tsx

@@ -0,0 +1,42 @@
+// @ts-nocheck comment
+import React from 'react';
+import styles from '../styles/CareersHub.module.css';
+
+export default function CareerResourceCard({ resource, index }: any) {
+  const { title, category, description, link, image } = resource.fields;
+  const imgUrl = image ? 'https:' + image.fields.file.url : null;
+
+  return (
+    <a
+      href={link || '#'}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={styles.resourceCard}
+      key={index}
+    >
+      <div className={styles.resourceImageContainer}>
+        {imgUrl ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img className={styles.resourceImg} src={imgUrl} alt={title} />
+        ) : (
+          <div
+            style={{
+              color: 'var(--light-grey)',
+              fontFamily: 'Montserrat',
+              fontSize: '10pt',
+            }}
+          >
+            No image
+          </div>
+        )}
+      </div>
+      <div className={styles.resourceContent}>
+        {category && <p className={styles.resourceCategory}>{category}</p>}
+        <p className={styles.resourceTitle}>{title}</p>
+        {description && (
+          <p className={styles.resourceDescription}>{description}</p>
+        )}
+      </div>
+    </a>
+  );
+}

components/JoinUsGrid.tsx

@@ -24,7 +24,7 @@ const portfolios = [
   { key: 'publications', label: 'Publications', desc: publicationsDescription, styleId: styles.publications },
   { key: 'socials', label: 'Socials', desc: socialsDescription, styleId: styles.socials },
   { key: 'spons', label: 'Sponsorships', desc: sponsDescription, styleId: styles.spons },
-  { key: 'education', label: 'Education', desc: eduDescription, styleId: styles.education },
+  { key: 'education', label: 'Workshops', desc: eduDescription, styleId: styles.education },
 ];
 
 const PortfolioGrid = () => {

data/navbar.ts

@@ -64,6 +64,11 @@ const sponsorsDropdownContent = [
     link: '/sponsors/jobs-board',
     icon: WorkOutlineOutlinedIcon,
   },
+  {
+    pageName: 'Careers Hub',
+    link: '/careers-hub',
+    icon: LocalLibraryOutlinedIcon,
+  },
 ];
 
 const eventsDropdownContent = [

lib/api.tsx

@@ -245,6 +245,21 @@ export async function loadLatestEvent() {
   return res.items;
 }
 
+export async function loadCareerResources() {
+  const res = await client
+    .getEntries({
+      content_type: 'careerResource',
+      select: 'fields',
+      order: 'fields.index',
+      limit: 1000,
+    })
+    .catch((error) => {
+      console.error(error);
+      return null;
+    });
+  return res ? res.items : [];
+}
+
 export async function loadLatestPodcast() {
   const res = await client
     .getEntries({

pages/careers-hub.tsx

@@ -0,0 +1,155 @@
+// @ts-nocheck comment
+import React, { useEffect, useState } from 'react';
+import styles from '../styles/CareersHub.module.css';
+import PageHeader from '../components/Header';
+import LoadingScreen from '../components/LoadingScreen';
+import ScrollUpBtn from '../components/ScrollUpBtn';
+import UpcomingEvent from '../components/UpcomingEvent';
+import { loadCareerResources, loadSponsors, loadUpcomingEvents } from '../lib/api';
+import Head from 'next/head';
+import { revalidate } from '../lib/helpers/constants';
+import Image from 'next/image';
+import useDarkMode from '../components/useDarkMode';
+
+const PLATINUM_SPONSOR_ORDER = ['Jane Street (2026)', 'Atlassian (2026)', 'Audinate (2026)', 'Macquarie Group (2026)', 'PricewaterhouseCoopers (2026)'];
+
+const CareersHub = ({ careerResources, sponsors, upcomingEvents }: any) => {
+  const [headerLoading, setHeaderLoading] = useState(true);
+  const [sourceLoading] = useState(false);
+  const isDark = useDarkMode();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
+  const platinumSponsors = PLATINUM_SPONSOR_ORDER
+    .map((name) => sponsors.find((s: any) => s.fields.name === name))
+    .filter(Boolean);
+
+  const displayedEvents = upcomingEvents.slice(0, 3);
+
+  return (
+    <div>
+      <Head>
+        <title>Careers Hub | UNSW WIT</title>
+      </Head>
+      {sourceLoading && headerLoading ? (
+        <LoadingScreen />
+      ) : (
+        <>
+          <PageHeader
+            imgUrl="/headers/2026-IT-subbies.jpeg"
+            title="Careers Hub"
+            imageLoading={setHeaderLoading}
+          />
+          <div className={styles.body}>
+            <p className={styles.intro}>
+              Your one-stop destination for career resources, job opportunities, and professional
+              development. Explore internships, graduate roles, and curated resources to help you
+              kickstart your career in tech.
+            </p>
+
+            {/* Resources */}
+            <h2 className={styles.sectionTitle}>RESOURCES</h2>
+            <p className={styles.sectionSubtitle}>
+              Check out our career guides and resources from past years.
+            </p>
+            <div className={styles.resourceList}>
+              {careerResources.length ? (
+                careerResources.map((resource: any, index: number) => {
+                  const { title, category, description, link } = resource.fields;
+                  return (
+                    <a
+                      key={index}
+                      href={link || '#'}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className={styles.resourceRow}
+                    >
+                      {category && <span className={styles.resourceTag}>{category}</span>}
+                      <span className={styles.resourceRowTitle}>{title}</span>
+                      {description && (
+                        <span className={styles.resourceRowDesc}>{description}</span>
+                      )}
+                      <span className={styles.resourceArrow}>→</span>
+                    </a>
+                  );
+                })
+              ) : (
+                <p className={styles.emptyMessage}>
+                  Check back soon for career resources and guides!
+                </p>
+              )}
+            </div>
+
+            {/* Platinum Sponsors */}
+            <h2 className={styles.sectionTitle}> SPONSORS</h2>
+            <div className={styles.sponsorGrid}>
+              {platinumSponsors.map((sponsor: any, index: number) => {
+                const logoUrl = isDark
+                  ? 'https:' + sponsor.fields.darkModeLogo.fields.file.url
+                  : 'https:' + sponsor.fields.lightModeLogo.fields.file.url;
+                const descText =
+                  sponsor.fields.description?.content?.[0]?.content?.[0]?.value || '';
+                return (
+                  <div key={index} className={styles.sponsorCard}>
+                    <div className={styles.sponsorLogoWrap}>
+                      <Image
+                        src={logoUrl}
+                        alt={sponsor.fields.name}
+                        width={120}
+                        height={60}
+                        className={styles.sponsorLogo}
+                        style={{ objectFit: 'contain' }}
+                      />
+                    </div>
+                    {descText && <p className={styles.sponsorDesc}>{descText}</p>}
+                    <a
+                      href={sponsor.fields.website}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className={styles.sponsorLink}
+                    >
+                      Visit website →
+                    </a>
+                  </div>
+                );
+              })}
+            </div>
+
+            {/* Upcoming Events */}
+            <h2 className={styles.sectionTitle}>UPCOMING EVENTS</h2>
+            <p className={styles.sectionSubtitle}>Check out what&apos;s coming up!</p>
+            {!displayedEvents.length ? (
+              <p className={styles.emptyMessage}>Keep a lookout here for upcoming events!</p>
+            ) : (
+              <div className={styles.eventsRow}>
+                {displayedEvents.map((event: any, index: number) => (
+                  <UpcomingEvent key={index} upcomingEvent={event} />
+                ))}
+              </div>
+            )}
+
+            <ScrollUpBtn />
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export async function getStaticProps() {
+  const careerResources = await loadCareerResources();
+  const sponsors = await loadSponsors();
+  const upcomingEvents = await loadUpcomingEvents();
+  return {
+    props: {
+      careerResources,
+      sponsors: sponsors || [],
+      upcomingEvents: upcomingEvents || [],
+    },
+    revalidate: revalidate,
+  };
+}
+
+export default CareersHub;

pages/join-us.tsx

@@ -45,84 +45,20 @@ const JoinUs = () => {
             title="Join Us"
             imageLoading={setHeaderLoading}
           />
-          {/* Start of connect with us */}
-          <h2 className={styles.header}>Connect with us</h2>
-          <div className={styles.joinUsBody}>
-            <div className={styles.joinUsRight}>
-              <div className={styles.joinButtons}>
-                {Object.keys(socials).map((social, index) => {
-                  return (
-                    <BootstrapTooltip
-                      key={social}
-                      title={
-                        <>
-                          <div className="tooltipTitle">{social}</div>
-                        </>
-                      }
-                    >
-                      <a
-                        className={styles.joinLink}
-                        key={index}
-                        href={socials[social][0]}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
-                        <Image
-                          src={`/icons/${socials[social][1]}`}
-                          alt={social}
-                          height="250"
-                          width="250"
-                        />
-                      </a>
-                    </BootstrapTooltip>
-                  );
-                })}
-              </div>
-            </div>
-            <div className={styles.googleMap}>
-              {!hideSpinner ? (
-                <CircularProgress
-                  variant="indeterminate"
-                  size={50}
-                  thickness={5}
-                  id={styles.joinLoading}
-                />
-              ) : null}
-              <iframe
-                onLoad={() => setHideSpinner(true)}
-                title="google-maps"
-                width="100%"
-                height="390"
-                frameBorder="0"
-                className={styles.gmapColour}
-                src="https://maps.google.com/maps?width=100%25&amp;height=600&amp;hl=en&amp;q=UNSW%20Sydney%20High%20St%20Kensington,%20NSW%202052%20Australia+(UNSW%20Sydney)&amp;t=&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed"
-              />
-            </div>
-          </div>
-          {/* End of connect with us section */}
 
           {/* Start of how to join section */}
           <h2 className={styles.section}>How to join</h2>
           <div className={styles.descriptionHowto}>
-            <strong>Join us via SpArc</strong>
+            <strong>Join us via Rubric</strong>
             <p>
-              Fill out the following&nbsp;
-              <a
-                href="https://bit.ly/join-wit-2024"
-                className={styles.link}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                form
-              </a>{' '}
-              and sign up on{' '}
+              Sign up on{' '}
               <a
-                href="https://member.arc.unsw.edu.au/s/clubdetail?clubid=0016F0000371W0xQAE"
+                href="https://campus.hellorubric.com/?s=4749"
                 className={styles.link}
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                SpArc
+                Rubric
               </a>
               .
             </p>
@@ -131,12 +67,12 @@ const JoinUs = () => {
               Our subcommittee recruitment drive opens at the beginning of
               UNSW’s first academic term, in February each year, via our&nbsp;
               <a
-                href="https://www.facebook.com/unsw.wit/"
+                href="https://www.facebook.com/events/1243781480447084/1243781487113750/"
                 className={styles.link}
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                Facebook page
+                Facebook group
               </a>
               . To get involved, search for our subcommittee Facebook event and
               fill in the application form attached to the event.