feat: Added basic version of site 5

src/pages/study_site_5/StartPage5.jsx

@@ -0,0 +1,128 @@
+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 { Spacer } from "@geist-ui/core";
+import ScrollableTab from "../../components/ScrollableTab";
+import { Tab } from "react-tabs-scrollable";
+import {
+  Info,
+  Clipboard,
+  Search,
+  MapPin,
+  Home,
+  Star,
+  Phone,
+  Zap,
+  CheckSquare,
+  Cloud,
+} from "@geist-ui/icons";
+import PropertyOverview from "./tab_content/PropertyOverview";
+import PropertyFeatures from "./tab_content/PropertyFeatures";
+import PropertyEnergyEfficiency from "./tab_content/PropertyEnergyEfficiency";
+import PropertyLocation from "./tab_content/PropertyLocation";
+import PropertyTransfer from "./tab_content/PropertyTransfer";
+import PropertyConstruction from "./tab_content/PropertyConstruction";
+import PropertyFacilities from "./tab_content/PropertyFacilities";
+import PropertyOutsideSpace from "./tab_content/PropertyOutsideSpace";
+import PropertyNotices from "./tab_content/PropertyNotices";
+import PropertyContact from "./tab_content/PropertyContact";
+
+const tabContent = [
+  <PropertyOverview />,
+  <PropertyFeatures />,
+  <PropertyEnergyEfficiency />,
+  <PropertyLocation />,
+  <PropertyTransfer />,
+  <PropertyConstruction />,
+  <PropertyFacilities />,
+  <PropertyOutsideSpace />,
+  <PropertyNotices />,
+  <PropertyContact />,
+];
+
+function StartPage5({ redirectLoc }) {
+  const [activeTabIndex, setActiveTabIndex] = useState(0);
+
+  var saveMouseLog = function () {
+    pushToMouseLog(getHeatmapData());
+  };
+
+  const onActiveTabChange = (index) => {
+    setActiveTabIndex(index);
+  };
+
+  // TODO THINK IF I WANT TO JUST USE AN OVERLAY FOR OTHER DUMMY LINKS, WHICH ARENT CORRECT???
+  // IS THAT OKAY???
+
+  return (
+    <StudySite>
+      <WebpageBanner translationKey="task_5_info" />
+      <Spacer h={2} />
+      <img
+        src="/images/cheerful_chateaus_logo.png"
+        width="150px"
+        alt="Cheerful Chateaus Logo"
+      />
+      <Spacer h={3} />
+      {tabContent[activeTabIndex]}
+      <ScrollableTab onActiveTabChange={onActiveTabChange}>
+        <Tab actionType="text">
+          <Search viewBox="0 -8 24 32" size={18} />
+          <Spacer inline w={0.35} />
+          Overview
+        </Tab>
+        <Tab actionType="button" redirectLoc={redirectLoc}>
+          <Star viewBox="0 -8 24 32" size={18} />
+          <Spacer inline w={0.35} />
+          Features
+        </Tab>
+        <Tab actionType="text">
+          <Zap viewBox="0 -8 24 32" size={18} />
+          <Spacer inline w={0.35} />
+          Energy Efficiency
+        </Tab>
+        <Tab actionType="text">
+          <MapPin viewBox="0 -8 24 32" size={18} />
+          <Spacer inline w={0.35} />
+          Location
+        </Tab>
+        <Tab actionType="text">
+          <CheckSquare viewBox="0 -8 24 32" size={18} />
+          <Spacer inline w={0.35} />
+          Transfer
+        </Tab>
+        <Tab actionType="text">
+          <Home viewBox="0 -8 24 32" size={18} />
+          <Spacer inline w={0.35} />
+          Construction
+        </Tab>
+        <Tab actionType="text">
+          <Clipboard viewBox="0 -8 24 32" size={18} />
+          <Spacer inline w={0.35} />
+          Facilities
+        </Tab>
+        <Tab actionType="text">
+          <Cloud viewBox="0 -8 24 32" size={18} />
+          <Spacer inline w={0.35} />
+          Outside Space
+        </Tab>
+        <Tab actionType="text">
+          <Info viewBox="0 -8 24 32" size={18} />
+          <Spacer inline w={0.35} />
+          Notices
+        </Tab>
+        <Tab actionType="text">
+          <Phone viewBox="0 -8 24 32" size={18} />
+          <Spacer inline w={0.35} />
+          Contact
+        </Tab>
+      </ScrollableTab>
+    </StudySite>
+  );
+}
+
+export default StartPage5;

src/pages/study_site_5/tab_content/PropertyConstruction.jsx

@@ -0,0 +1,13 @@
+import { Text } from "@geist-ui/core";
+
+function PropertyConstruction() {
+  return (
+    <Text>
+      Built in 2010, the flat features modern construction techniques and
+      high-quality materials. The building is well-maintained and complies with
+      all current safety and building regulations.
+    </Text>
+  );
+}
+
+export default PropertyConstruction;

src/pages/study_site_5/tab_content/PropertyContact.jsx

@@ -0,0 +1,14 @@
+import { Text } from "@geist-ui/core";
+
+function PropertyContact() {
+  return (
+    <Text>
+      For more information or to schedule a viewing, please contact us at:<br/>
+      <strong>Email:</strong> info@cheerfulchateaus.com<br/>
+      <strong>Phone:</strong> +31 20 123 4567<br/>
+      <strong>Address:</strong> Prinsengracht 123, 1016 GJ Amsterdam, Netherlands
+    </Text>
+  );
+}
+
+export default PropertyContact;

src/pages/study_site_5/tab_content/PropertyEnergyEfficiency.jsx

@@ -0,0 +1,14 @@
+import { Text } from "@geist-ui/core";
+
+function PropertyEnergyEfficiency() {
+  return (
+    <Text>
+      This flat has an energy efficiency rating of A, thanks to its modern
+      insulation, double-glazed windows, and energy-efficient appliances. Enjoy
+      lower utility bills and a smaller carbon footprint while living in
+      comfort.
+    </Text>
+  );
+}
+
+export default PropertyEnergyEfficiency;

src/pages/study_site_5/tab_content/PropertyFacilities.jsx

@@ -0,0 +1,14 @@
+function PropertyFacilities() {
+  return (
+    <ul>
+      <li>Secure Entry System</li>
+      <li>Underground Parking</li>
+      <li>Bicycle Storage</li>
+      <li>Fitness Center</li>
+      <li>Communal Garden</li>
+      <li>Elevator Access</li>
+    </ul>
+  );
+}
+
+export default PropertyFacilities;

src/pages/study_site_5/tab_content/PropertyFeatures.jsx

@@ -0,0 +1,14 @@
+function PropertyFeatures() {
+  return (
+    <ul>
+      <li>2 Spacious Bedrooms</li>
+      <li>1 Modern Bathroom</li>
+      <li>Open Plan Living and Dining Area</li>
+      <li>Hardwood Floors</li>
+      <li>High-Speed Internet</li>
+      <li>In-Uni Laundry</li>
+    </ul>
+  );
+}
+
+export default PropertyFeatures;

src/pages/study_site_5/tab_content/PropertyLocation.jsx

@@ -0,0 +1,14 @@
+import { Text } from "@geist-ui/core";
+
+function PropertyLocation() {
+  return (
+    <Text>
+      Situated in the vibrant district of Jordaan, the flat is within walking
+      distance to key landmarks, shopping districts, and public transportation
+      hubs. Nearby attractions include the Anne Frank House, the Westermarkt,
+      and the bustling Dam Square.
+    </Text>
+  );
+}
+
+export default PropertyLocation;

src/pages/study_site_5/tab_content/PropertyNotices.jsx

@@ -0,0 +1,13 @@
+function PropertyNotices() {
+  return (
+    <ul>
+      <li>No Pets Allowed</li>
+      <li>No Smoking</li>
+      <li>Minimum Lease Term: 12 Months</li>
+      <li>Deposit Required: €1500</li>
+      <li>Monthly Rent: €2000</li>
+    </ul>
+  );
+}
+
+export default PropertyNotices;

src/pages/study_site_5/tab_content/PropertyOutsideSpace.jsx

@@ -0,0 +1,13 @@
+import { Text } from "@geist-ui/core";
+
+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.
+    </Text>
+  );
+}
+
+export default PropertyOutsideSpace;

src/pages/study_site_5/tab_content/PropertyOverview.jsx

@@ -0,0 +1,14 @@
+import { Text } from "@geist-ui/core";
+
+function PropertyOverview() {
+  return (
+    <Text>
+      Welcome to Cheerful Chateaus! Our featured flat is a charming 2-bedroom
+      apartment located in the heart of Amsterdam. Perfectly suited for urban
+      professionals and small families, this modern flat offers a blend of
+      comfort and convenience with a touch of luxury.
+    </Text>
+  );
+}
+
+export default PropertyOverview;

src/pages/study_site_5/tab_content/PropertyTransfer.jsx

@@ -0,0 +1,13 @@
+import { Text } from "@geist-ui/core";
+
+function PropertyTransfer() {
+  return (
+    <Text>
+      The flat is available for immediate transfer. Our friendly staff will
+      guide you through the process, ensuring a smooth and hassle-free move-in
+      experience. We offer flexible viewing times to accommodate your schedule.
+    </Text>
+  );
+}
+
+export default PropertyTransfer;