added Careers landing page + tests

src/app/assets/career_videos.json

@@ -0,0 +1,50 @@
+[
+  {
+    "id": 1,
+    "video": "t0ojrm0fMoE",
+    "title": "Virtual Storage",
+    "description": "Users often have access to storage that is not installed as part of their own computer system. Cloud storage is facilitated by the internet, and is usually owned and managed by commercial organisations. In this video, Sabrina Singh, Cloud DBA at Morgan Stanley, explains the topic of virtual (cloud) storage and how she uses it in her day-to-day role.",
+    "name": "Sabrina Singh",
+    "job": "Cloud DBA at Morgan Stanley"
+  },
+  {
+    "id": 2,
+    "video": "l9ZTDi72yGU",
+    "title": "Systems Architecture",
+    "description": "Systems architecture refers to the parts of the computer like the processor, the memory, I/O expansion ports, and the buses that connect them together. Watch John explain how he uses systems architecture on a daily basis when designing computer systems to solve client problems - from designing a system that ensures a smooth running of the airport to developing a supercomputer for the American government. ",
+    "name": "John Easton",
+    "job": "Distinguished Engineer at IBM"
+  },
+  {
+    "id": 3,
+    "video": "IGXHArOSF-g",
+    "title": "Networking Hardware",
+    "description": "Everything in the connected world is built on computer networks including the internet. For any career in tech, it is essential to have knowledge of networking basics, and networking devices like switches, routers and wireless access points are the bedrock of networks that connect the world. Watch Elizabeth talk about her own career path and how you can help shape the future through technology. ",
+    "name": "Elizabeth Barr",
+    "job": "Head of the Cisco Networking Academy UK & Ireland"
+  },
+  {
+    "id": 4,
+    "video": "e7oxJqjGm2k",
+    "title": "Databases (SQL)",
+    "description": "SQL, which stands for Structured Query Language, is a language used in databases to create, update, delete, and read data. You can use the SELECT command and inner joins to retrieve data from the database. In a data-rich world, being able to filter and use data effectively is key. In this video, Zac explains how he helps all types of businesses use their data better and the exciting opportunities a role like his offers. ",
+    "name": "Zachary Decent",
+    "job": "Data Governance & Quality Manager at UK Power Networks"
+  },
+  {
+    "id": 5,
+    "video": "ZF52BMcuovY",
+    "title": "Cyber Security",
+    "description": "Cyber security is the process of applying techniques to prevent unauthorised access to computer networks and data stored within them. It helps us deal with security threats that have an intention to cause harm to code or steal our data. Watch Veno explain how she helps keep us safe online and protect our data by heading up a team of technical support engineers at Cisco Umbrella.",
+    "name": "Veno Senthil",
+    "job": "Technical Support Manager at Cisco"
+  },
+  {
+    "id": 6,
+    "video": "tGigHlIVgbI",
+    "title": "Programming 2D Arrays",
+    "description": "A 2D array is a data structure used in programming that has two pointers - an X and a Y. It can hold multiple pieces of data but has a single identifier and can be visualised as a table with rows and columns. Watch Gerard, a researcher and lecturer explain how robots use 2D arrays to detect objects and how you can learn to program them to complete tasks like moving things or even dress or feed people. ",
+    "name": "Gerard Canal",
+    "job": "Lecturer in Autonomous Systems at Kings College London"
+  }
+]

src/app/components/elements/Careers.tsx → src/app/components/elements/CareersBanner.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { Col, Container, Row } from "reactstrap";
 import { selectors, useAppSelector } from "../../state";
-import { CAREER_VIDEO_LINK, isStudent } from "../../services";
+import { isStudent } from "../../services";
+import careerVideos from "../../assets/career_videos.json";
 
 const CsAtWorkDescription = () => {
   const user = useAppSelector(selectors.user.orNull);
@@ -17,39 +18,37 @@ const CsAtWorkDescription = () => {
   return <p className="mb-3">{!user?.loggedIn ? loggedOutDescription : roleSpecificDescription}</p>;
 };
 
-export const Careers = () => {
+const videoId = careerVideos[0].video;
+
+export const CareersBanner = () => {
   const user = useAppSelector(selectors.user.orNull);
   return (
     <Container className="d-flex align-items-center flex-column">
       <button className="btn-lg">Careers in Computer Science</button>
-      <Row className="at-work">
-        <Col xs={12} sm={6} className="left-column">
+      <Row className="career reversed">
+        <Col xs={12} sm={6} className="video-column">
           <iframe
             title="career-video"
             className="no-border mh-100"
             id="ytplayer"
             width="100%"
             height="100%"
-            src={CAREER_VIDEO_LINK}
+            src={`https://www.youtube-nocookie.com/embed/${videoId}?enablejsapi=1&fs=1&modestbranding=1`}
             allowFullScreen
           />
         </Col>
-        <Col className="right-column">
-          <h5>
-            <strong>
-              {isStudent(user) ? "Linking computer science to the real world" : "Computer Science at work"}
-            </strong>
-          </h5>
+        <Col className="video-description-column">
+          <h4>{isStudent(user) ? "Linking computer science to the real world" : "Computer Science at work"}</h4>
           <CsAtWorkDescription />
         </Col>
       </Row>
       <Row className="cs-journey">
         <Col xs="auto" className="left-column">
-          <h5>
+          <h4>
             <a href="/pages/computer_science_journeys_gallery" rel="noopener noreferrer">
-              <strong>Computer Science Journeys</strong>
+              Computer Science Journeys
             </a>
-          </h5>
+          </h4>
           <p className="mb-3">
             Discover our monthly interview series and learn from passionate educators within the Isaac community, and
             recently-graduated computer scientists who are doing AMAZING things in a huge range of computing-related

src/app/components/navigation/IsaacApp.tsx

@@ -93,6 +93,7 @@ import { StudentRegistration } from "../pages/StudentRegistration";
 import { TeacherRegistration } from "../pages/TeacherRegistration";
 import { WorkbookDownload } from "../pages/WorkbookDownload";
 import { RegistrationSuccess } from "../pages/RegistrationSuccess";
+import { Careers } from "../pages/Careers";
 
 const ContentEmails = lazy(() => import("../pages/ContentEmails"));
 const MyProgress = lazy(() => import("../pages/MyProgress"));
@@ -334,6 +335,7 @@ export const IsaacApp = () => {
               <TrackedRoute exact path="/resetpassword/:token" component={ResetPasswordHandler} />
               <TrackedRoute exact path="/verifyemail" component={EmailAlterHandler} />
               {/* Static pages */}
+              <TrackedRoute exact path="/careers_in_computer_science" component={Careers} />
               <TrackedRoute exact path="/contact" component={Contact} />
               <TrackedRoute exact path="/teacher_account_request" ifUser={isLoggedIn} component={TeacherRequest} />
               <StaticPageRoute exact path="/privacy" pageId="privacy_policy" />

src/app/components/pages/Careers.tsx

@@ -0,0 +1,105 @@
+import React from "react";
+import { Col, Container, Row } from "reactstrap";
+import { TitleAndBreadcrumb } from "../elements/TitleAndBreadcrumb";
+import { Link } from "react-router-dom";
+import { EventsCarousel } from "../elements/EventsCarousel";
+import careerVideos from "../../assets/career_videos.json";
+
+interface CareerPanelProps {
+  video: string;
+  title: string;
+  description: string;
+  name: string;
+  job: string;
+  reversed?: boolean;
+}
+
+const CareerPanel = ({ video, title, description, name, job, reversed }: CareerPanelProps) => {
+  const videoColumn = (
+    <Col xs={12} sm={6} className="video-column">
+      <iframe
+        title={title}
+        className="no-border mh-100"
+        width="100%"
+        height="100%"
+        src={`https://www.youtube-nocookie.com/embed/${video}?enablejsapi=1&fs=1&modestbranding=1`}
+        allowFullScreen
+      />
+    </Col>
+  );
+
+  const videoDescriptionColumn = (
+    <Col className="video-description-column">
+      <h3 style={{ textDecorationLine: "underline" }}>{title}</h3>
+      <Row className="mx-0 mt-3 career">
+        <Col xs={12} xl={4} className="p-0" data-testid="video-speaker">
+          <Row className="flex-nowrap m-0">
+            <img height="26px" src="/assets/person.svg" alt="person icon" className="mr-2" />
+            <span>{name}</span>
+          </Row>
+        </Col>
+        <Col className="p-0 mt-3 mt-xl-0" data-testid="speaker-role">
+          <Row className="flex-nowrap m-0">
+            <img height="26px" src="/assets/career.svg" alt="career icon" className="mr-2" />
+            <span>{job}</span>
+          </Row>
+        </Col>
+      </Row>
+      <p className="mt-3" data-testid="video-description">
+        {description}
+      </p>
+    </Col>
+  );
+
+  return (
+    <Row className={`mt-5 career${reversed ? " reversed" : ""}`}>
+      {reversed ? (
+        <>
+          {videoDescriptionColumn}
+          {videoColumn}
+        </>
+      ) : (
+        <>
+          {videoColumn}
+          {videoDescriptionColumn}
+        </>
+      )}
+    </Row>
+  );
+};
+
+export const Careers = () => (
+  <Container id="careers-page">
+    <TitleAndBreadcrumb currentPageTitle="Careers in Computer Science" />
+    <div className="mt-4" />
+
+    <section id="careers" className="d-flex justify-content-center flex-column align-items-center pattern-03-reverse">
+      {careerVideos.map(({ video, title, description, name, job, id }) => (
+        <CareerPanel
+          key={`video-${id}`}
+          video={video}
+          title={title}
+          description={description}
+          name={name}
+          job={job}
+          reversed={id % 2 === 0}
+        />
+      ))}
+    </section>
+
+    <section id="events">
+      <Container className="pt-4 pb-5">
+        <div className="eventList pt-5 pattern-03">
+          <h2 className="h-title text-center mb-4">Events</h2>
+          <p className="pt-4 pb-2 event-description text-center col-md-8 offset-md-2">
+            {"We offer free online events for students. Visit our "}
+            <Link to="/events">Events page</Link>
+            {" to see what's happening, and sign up today!"}
+          </p>
+          <EventsCarousel />
+          <Link to="/events">See all Events</Link>
+        </div>
+      </Container>
+    </section>
+  </Container>
+);

src/app/components/site/Homepage.tsx

@@ -10,7 +10,7 @@ import classNames from "classnames";
 import { PromoContent } from "../elements/PromoContent";
 import { ShowLoading } from "../handlers/ShowLoading";
 import { Dashboard } from "../elements/Dashboard";
-import { Careers } from "../elements/Careers";
+import { CareersBanner } from "../elements/CareersBanner";
 
 export const Homepage = () => {
   useEffect(() => {
@@ -66,7 +66,7 @@ export const Homepage = () => {
         )}
 
         <section id="careers" className="banner-primary pattern-05 p-5">
-          <Careers />
+          <CareersBanner />
         </section>
 
         <section id="news">

src/app/components/site/NavigationBar.tsx

@@ -50,8 +50,9 @@ export const NavigationBar = () => {
         <LinkItem to="/topics/gcse">GCSE topics</LinkItem>
         <LinkItem to="/topics/a_level">A level topics</LinkItem>
         <LinkItem to="/gameboards/new">Question Finder</LinkItem>
+        <LinkItem to="/pages/computer_science_journeys_gallery">Computer Science Journeys</LinkItem>
+        <LinkItem to="/careers_in_computer_science">Careers in Computer Science</LinkItem>
         <LinkItem to="/glossary">Glossary</LinkItem>
-        <LinkItem to="/pages/computer_science_journeys_gallery">Computer science journeys</LinkItem>
       </NavigationSection>
 
       <NavigationSection title="Events">

src/app/services/constants.ts

@@ -928,6 +928,3 @@ export const hubNames: { [key in Hub]: string } = {
   WEST_YORKSHIRE: "West Yorkshire",
   YORK_EAST_AND_SOUTH_YORKSHIRE: "York, East, and South Yorkshire",
 };
-
-export const CAREER_VIDEO_LINK =
-  "https://www.youtube-nocookie.com/embed/t0ojrm0fMoE?enablejsapi=1&fs=0&modestbranding=1";

src/scss/common/careers.scss

@@ -1,13 +1,14 @@
-.at-work {
+.career {
   margin: 2rem 0 0 0;
   width: 100%;
-  .left-column {
+  .video-column {
+    background-color: black;
     padding: 0;
     min-height: 300px;
     min-width: 500px;
   }
 
-  .right-column {
+  .video-description-column {
     background-color: white;
     padding: 2rem;
     align-content: center;
@@ -37,10 +38,22 @@
   }
 }
 
-@media (max-width: 992px) {
+@media (max-width: 1200px) {
   .cs-journey,
-  .at-work {
+  .career {
     max-width: 500px;
+    flex-direction: column;
+    iframe {
+      min-height: 300px;
+    }
+    .video-column {
+      min-height: 0;
+    }
+    .video-description-column {
+      padding: 1rem;
+    }
+    .video-column,
+    .video-description-column,
     .left-column,
     .right-column {
       width: 100%;
@@ -54,13 +67,7 @@
     }
   }
 
-  .at-work {
+  .career.reversed {
     flex-direction: column-reverse;
-    iframe {
-      min-height: 300px;
-    }
-    .left-column {
-      min-height: 0;
-    }
   }
 }

src/test/components/elements/Careers.test.tsx → src/test/components/elements/CareersBanner.test.tsx

@@ -1,11 +1,11 @@
 import { screen } from "@testing-library/react";
 import { TestUserRole, renderTestEnvironment } from "../../utils";
-import { Careers } from "../../../app/components/elements/Careers";
+import { CareersBanner } from "../../../app/components/elements/CareersBanner";
 import { USER_ROLES } from "../../../app/services";
 
 const renderCareers = async (role?: TestUserRole) => {
   renderTestEnvironment({
-    PageComponent: Careers,
+    PageComponent: CareersBanner,
     initialRouteEntries: ["/"],
     role: role ?? "ANONYMOUS",
   });