feat: You can go all the way. :)

src/App.js

@@ -260,7 +260,7 @@ function App() {
             path="/tour_operators"
             element={
               <React.Suspense fallback={<>...</>}>
-                <TourOperators />
+                <TourOperators redirectLoc={latinSquareOrder[2]} />
               </React.Suspense>
             }
           />

src/components/InfoPageComponent.jsx

@@ -10,7 +10,7 @@ function InfoPageComponent({ children, redirectLoc }) {
   return (
     <div>
       {children}
-      <div>
+      <div style={{ width: "fit-content", margin: "40px auto" }}>
         <Button
           onClick={() => {
             redirectToPage(redirectLoc);

src/components/ScrollableTab.jsx

@@ -1,6 +1,8 @@
 import React, { useState } from "react";
 import { Tabs, Tab } from "react-tabs-scrollable";
 import "react-tabs-scrollable/dist/rts.css";
+import { getHeatmapData } from "./webpage_container/StudySite";
+import { pushToMouseLog } from "../core/log/SensorLogger";
 
 var amountTabs = 0;
 var reachedEndValue = false;
@@ -10,6 +12,10 @@ var endElement = amountTabs;
 function ScrollableTab({ onActiveTabChange, children }) {
   const [activeTab, setActiveTab] = useState(0);
 
+  const saveMouseLog = function () {
+    pushToMouseLog(getHeatmapData());
+  };
+
   // define a onClick function to bind the value on tab click
   const onTabClick = (e, index) => {
     const buttonAttributes = e.target.attributes;
@@ -22,6 +28,7 @@ function ScrollableTab({ onActiveTabChange, children }) {
       : "";
 
     if (actionType === "button") {
+      saveMouseLog();
       window.location.href = redirectLoc;
     }
     setActiveTab(index);

src/pages/study_site_2/StartPage2.jsx

@@ -29,7 +29,6 @@ import HotelLocation from "./tab_content/HotelLocation";
 import HotelFlights from "./tab_content/HotelFlights";
 import HotelCatering from "./tab_content/HotelCatering";
 
-
 const tabContent = [
   (<HotelFeatures />),
   (<HotelFacilities />),
@@ -102,7 +101,7 @@ function StartPage2({ redirectLoc }) {
           <Spacer inline w={0.35} />
           Catering
         </Tab>
-        <Tab actionType="button" redirectLoc={redirectLoc}>
+        <Tab actionType="button" redirectLoc="./tour_operators">
           <User viewBox="0 -8 24 32" size={18} />
           <Spacer inline w={0.35} />
           Tour Operators

src/pages/study_site_2/TourOperators.jsx

@@ -79,7 +79,7 @@ function TourOperators({ redirectLoc }) {
           </Text>
           <ul>
             <li>
-              <a href="">Prices</a>
+              <a href={redirectLoc}>Prices</a>
             </li>
             <li>
               <a href="mailto:misguided.getaways@example.com">Contact</a>

src/pages/study_site_3/StartPage3.jsx

@@ -31,26 +31,21 @@ import ProgrammeEvents from "./tab_content/ProgrammeEvents";
 import StudentLife from "./tab_content/StudentLife";
 import AboutUVV from "./tab_content/AboutUVV";
 
-
-const tabContent = [
-  (<ProgrammeOverview />),
-  (<StudyProgramme />),
-  (<ProgrammeCareers />),
-  (<ApplicationAndAdmissions />),
-  (<TuitionFee />),
-  (<ProgrammeMeetThePeople />),
-  (<ProgrammeContact />),
-  (<ProgrammeEvents />),
-  (<StudentLife />),
-  (<AboutUVV />)
-];
-
 function StartPage3({ redirectLoc }) {
   const [activeTabIndex, setActiveTabIndex] = useState(0);
 
-  var saveMouseLog = function () {
-    pushToMouseLog(getHeatmapData());
-  };
+  const tabContent = [
+    <ProgrammeOverview />,
+    <StudyProgramme />,
+    <ProgrammeCareers />,
+    <ApplicationAndAdmissions />,
+    <TuitionFee />,
+    <ProgrammeMeetThePeople />,
+    <ProgrammeEvents />,
+    <StudentLife />,
+    <ProgrammeContact redirectLoc={redirectLoc} />,
+    <AboutUVV />,
+  ];
 
   const onActiveTabChange = (index) => {
     setActiveTabIndex(index);
@@ -67,8 +62,10 @@ function StartPage3({ redirectLoc }) {
         src="/images/uvv_logo.png"
         width="150px"
         alt="Universiteit van Voorbeeldhuizen Logo"
+        className="centeredLogo"
       />
-      <Spacer h={3} />
+      <Spacer h={1} />
+      <h2>Software Engineering</h2>
       {tabContent[activeTabIndex]}
       <ScrollableTab onActiveTabChange={onActiveTabChange}>
         <Tab actionType="text">
@@ -76,7 +73,7 @@ function StartPage3({ redirectLoc }) {
           <Spacer inline w={0.35} />
           Overview
         </Tab>
-        <Tab actionType="button" redirectLoc={redirectLoc}>
+        <Tab actionType="text">
           <Book viewBox="0 -8 24 32" size={18} />
           <Spacer inline w={0.35} />
           Study Programme
@@ -101,11 +98,6 @@ function StartPage3({ redirectLoc }) {
           <Spacer inline w={0.35} />
           Meet the people
         </Tab>
-        <Tab actionType="text">
-          <MessageCircle viewBox="0 -8 24 32" size={18} />
-          <Spacer inline w={0.35} />
-          Contact
-        </Tab>
         <Tab actionType="text">
           <Calendar viewBox="0 -8 24 32" size={18} />
           <Spacer inline w={0.35} />
@@ -116,6 +108,11 @@ function StartPage3({ redirectLoc }) {
           <Spacer inline w={0.35} />
           Student Life
         </Tab>
+        <Tab actionType="text">
+          <MessageCircle viewBox="0 -8 24 32" size={18} />
+          <Spacer inline w={0.35} />
+          Contact
+        </Tab>
         <Tab actionType="text">
           <Info viewBox="0 -8 24 32" size={18} />
           <Spacer inline w={0.35} />

src/pages/study_site_3/tab_content/ProgrammeContact.jsx

@@ -1,6 +1,12 @@
-import { Text } from "@geist-ui/core";
+import { Text, Divider } from "@geist-ui/core";
+import { getHeatmapData } from "../../../components/webpage_container/StudySite";
+import { pushToMouseLog } from "../../../core/log/SensorLogger";
+
+function ProgrammeContact({ redirectLoc }) {
+  const saveMouseLog = function () {
+    pushToMouseLog(getHeatmapData());
+  };
 
-function ProgrammeContact() {
   return (
     <div>
       <Text>
@@ -9,11 +15,17 @@ function ProgrammeContact() {
       </Text>
       <Text>
         Email:{" "}
-        <a href="mailto:admissions.uvv@example.com">
-          admissions.uvv@example.com
-        </a>
+        <a href="mailto:admissions.uvv@example.com">contact.uvv@example.com</a>
       </Text>
       <Text>Phone: +31 20 123 4567</Text>
+      <Divider />
+      <Text>
+        For general questions on admissions, contact us via our{" "}
+        <a href={redirectLoc} onClick={saveMouseLog}>
+          contact form
+        </a>
+        .
+      </Text>
     </div>
   );
 }

src/pages/study_site_5/StartPage5.jsx

@@ -1,10 +1,6 @@
 import React, { useState } from "react";
 import WebpageBanner from "../../components/webpage_container/WebpageBanner";
-import {
-  StudySite,
-  getHeatmapData,
-} from "../../components/webpage_container/StudySite";
-import { pushToMouseLog } from "../../core/log/SensorLogger";
+import { StudySite } from "../../components/webpage_container/StudySite";
 import { Spacer } from "@geist-ui/core";
 import ScrollableTab from "../../components/ScrollableTab";
 import { Tab } from "react-tabs-scrollable";
@@ -31,6 +27,9 @@ import PropertyOutsideSpace from "./tab_content/PropertyOutsideSpace";
 import PropertyNotices from "./tab_content/PropertyNotices";
 import PropertyContact from "./tab_content/PropertyContact";
 
+function StartPage5({ redirectLoc }) {
+  const [activeTabIndex, setActiveTabIndex] = useState(0);
+
   const tabContent = [
     <PropertyOverview />,
     <PropertyFeatures />,
@@ -39,18 +38,11 @@ const tabContent = [
     <PropertyTransfer />,
     <PropertyConstruction />,
     <PropertyFacilities />,
-  <PropertyOutsideSpace />,
+    <PropertyOutsideSpace redirectLoc={redirectLoc} />,
     <PropertyNotices />,
     <PropertyContact />,
   ];
 
-function StartPage5({ redirectLoc }) {
-  const [activeTabIndex, setActiveTabIndex] = useState(0);
-
-  var saveMouseLog = function () {
-    pushToMouseLog(getHeatmapData());
-  };
-
   const onActiveTabChange = (index) => {
     setActiveTabIndex(index);
   };
@@ -66,6 +58,7 @@ function StartPage5({ redirectLoc }) {
         src="/images/cheerful_chateaus_logo.png"
         width="150px"
         alt="Cheerful Chateaus Logo"
+        className="centeredLogo"
       />
       <Spacer h={3} />
       {tabContent[activeTabIndex]}

src/pages/study_site_5/tab_content/PropertyOutsideSpace.jsx

@@ -1,11 +1,20 @@
 import { Text } from "@geist-ui/core";
+import { getHeatmapData } from "../../../components/webpage_container/StudySite";
+import { pushToMouseLog } from "../../../core/log/SensorLogger";
+
+function PropertyOutsideSpace({ redirectLoc }) {
+  var saveMouseLog = function () {
+    pushToMouseLog(getHeatmapData());
+  };
 
-function PropertyOutsideSpace() {
   return (
     <Text>
       The flat includes a private balcony with stunning views of the Amsterdam
-      skyline. The building also features a communal rooftop terrace, perfect
-      for relaxing and socializing with neighbors.
+      skyline. The building also features a{" "}
+      <a href={redirectLoc} onClick={saveMouseLog}>
+        communal rooftop gardening space
+      </a>
+      , perfect for relaxing and socializing with neighbors.
     </Text>
   );
 }