WIP

webapp/src/App.tsx

@@ -6,6 +6,7 @@ import ExternalPageNavBar from "./components/global/ExternalPageNavBar";
 import About from "./pages/About";
 import DataAnalysis from "./pages/DataAnalysis";
 import AnnualReport from "./pages/AnnualReport";
+import CompendiumData from "./pages/CompendiumData";
 
 function App(): ReactElement {
   return (
@@ -15,6 +16,7 @@ function App(): ReactElement {
         <Landing /> */}
         <Navigation />
         <Routes>
+        <Route path="/data" element={<CompendiumData />} />
           <Route path="/about" element={<About />} />
           <Route path="/analysis" element={<DataAnalysis />} />
           <Route path="/report" element={<AnnualReport />} />

webapp/src/components/CollapsibleBox.tsx

+import React, { useState } from 'react';
+
+interface CollapsibleBoxProps {
+  title: string;
+  children: React.ReactNode;
+}
+
+const CollapsibleBox: React.FC<CollapsibleBoxProps> = ({ title, children }) => {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  return (
+    <div style={{ border: '3px solid #003F5F', display: 'flex', maxWidth: '50vw' }}>
+
+      {!isCollapsed && <div>
+        <h1 className="geant-header">{title}</h1>
+        {children}
+      </div> ||
+        <h1 className="geant-header">{title}</h1>}
+      <button style={{ marginLeft: 'auto' }} onClick={() => setIsCollapsed(!isCollapsed)}>
+        {isCollapsed ? 'Expand' : 'Collapse'}
+      </button>
+    </div>
+  );
+};
+
+export default CollapsibleBox;

webapp/src/index.tsx

@@ -2,8 +2,8 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import App from "./App";
-import './styles.scss';
 import 'bootstrap/dist/css/bootstrap.min.css';
+import './main.scss';
 
 const container = document.getElementById('root') as HTMLElement;
 const root = createRoot(container); 

webapp/src/styles.scss → webapp/src/main.scss

+@import 'scss/base/text';
+@import 'scss/layout/components';
+
 table {
   min-width: 650px;
 }

webapp/src/pages/CompendiumData.tsx

+import React, { ReactElement } from "react";
+import { Container, Row, Col } from "react-bootstrap";
+import SectionDataLogo from "../images/section_data_large.png";
+import CollapsibleBox from "../components/CollapsibleBox";
+
+function CompendiumData(): ReactElement {
+    return (
+        <Container className="grey-container">
+            <Row>
+                <div>
+                    <h1 className="geant-header">Compendium Data</h1>
+                    <h1 className="geant-header">Compendium<br />Reports</h1>
+                </div>
+            </Row>
+            <Row>
+                <img src={SectionDataLogo} style={{ maxWidth: '5%' }} />
+                <p className="wordwrap">
+                    What the Compendium is, the history of it, the aim, what you can find in it etc etc etc etc
+                    Lorem ipsum dolor sit amet, consec tetur adi piscing elit, sed do eiusmod tempor inc dolor sit amet, consec
+                    tetur adi piscing elit, sed do eiusmod tempor inc
+                </p>
+            </Row>
+            <Row>
+                <div className="center">
+
+                <CollapsibleBox title="ORGANISATION">
+
+                    <Col align="left">
+                        <Row>
+                            <span>Length of NREN dark fibres leased by NRENs</span>
+                        </Row>
+
+                        <Row>
+                            <span>Length of dark fibres operated by NRENs outside their own countries</span>
+                        </Row>
+
+                        <Row>
+                            <span>Average duration of NREN's Indefensible Rights of use of dark fibre cables</span>
+                        </Row>
+                        <Row>
+                            <span>Length of of dark fibre cables laid by the NREN in their network</span>
+                        </Row>
+                    </Col>
+                    <Col align="right">
+                        <Row>
+                            <span>Length of NREN dark fibres leased by NRENs</span>
+                        </Row>
+
+                        <Row>
+                            <span>Length of dark fibres operated by NRENs outside their own countries</span>
+                        </Row>
+
+                        <Row>
+                            <span>Average duration of NREN's Indefensible Rights of use of dark fibre cables</span>
+                        </Row>
+                        <Row>
+                            <span>Length of of dark fibre cables laid by the NREN in their network</span>
+                        </Row>
+                    </Col>
+                </CollapsibleBox>
+                </div>
+                
+            </Row>
+        </Container>
+    );
+}
+
+export default CompendiumData;

webapp/src/pages/Landing.tsx

-import React, {ReactElement} from "react";
-import {Card, Container, Row, Col} from "react-bootstrap";
+import React, { ReactElement } from "react";
+import { Card, Container, Row, Col } from "react-bootstrap";
 import SectionDataLogo from "../images/section_data_large.png";
 import SectionReportsLogo from "../images/section_reports_large.png";
 
 function Landing(): ReactElement {
     return (
-        <Container>
-            <Row className="justify-content-md-center">
-                <Col align={'center'}>
-                    THE GÉANT COMPENDIUM OF NRENS
-                    <br/>
-                    <p>
-                        What the Compendium is, the history of it, the aim, what you can nd in it etc etc etc etc
-                        Lorem ipsum dolor sit amet, consec tetur adi piscing elit, sed do eiusmod tempor inc dolor sit
-                        amet,
-                        consec tetur adi piscing elit, sed do eiusmod tempor inc
+        <Container className="grey-container">
+            <Row>
+                <div className="center-text">
+                    <h1 className="geant-header">THE GÉANT COMPENDIUM OF NRENS</h1>
+                    <br />
+                    <p className="wordwrap">
+                        What the Compendium is, the history of it, the aim, what you can
+                        find in it etc etc etc etc
+                        Lorem ipsum dolor sit amet, consec tetur
+                        adi piscing elit, sed do eiusmod tempor inc dolor sit amet, consec
+                        tetur adi piscing elit, sed do eiusmod tempor inc
                     </p>
-                </Col>
+                </div>
             </Row>
             <Row>
                 <Col>
-                    <Container>
+                    <Container
+                        style={{ backgroundColor: "white" }}
+                        className="rounded-border"
+                    >
                         <Row className="justify-content-md-center">
-                            <Col align={'center'}>
-                                <Card style={{ width: '18rem' }}>
+                            <Col align={"center"}>
+                                <Card style={{ width: "18rem" }}>
                                     <Card.Img src={SectionDataLogo}></Card.Img>
                                     <Card.Body>
                                         <Card.Title>Compendium Data</Card.Title>
-                                        <Card.Text>The results of the Compendium Surveys
-                                            lled in annually by NRENs. Questions cover
-                                            many topics: Network, Connected Users,
-                                            Services, Standards & Policies</Card.Text>
+                                        <Card.Text>
+                                            The results of the Compendium Surveys lled in annually by
+                                            NRENs. Questions cover many topics: Network, Connected
+                                            Users, Services, Standards & Policies
+                                        </Card.Text>
                                     </Card.Body>
                                 </Card>
                             </Col>
-                            <Col align={'center'}>
-                                <Card style={{ width: '18rem' }}>
+                            <Col align={"center"}>
+                                <Card style={{ width: "18rem" }}>
                                     <Card.Img src={SectionReportsLogo}></Card.Img>
                                     <Card.Body>
                                         <Card.Title>Compendium Reports</Card.Title>
-                                        <Card.Text>A GÉANT Compendium Report is published
-                                            annually, drawing on data from the Compendium
-                                            Survey lled in by NRENs, complemented by
-                                            information from other surveys</Card.Text>
+                                        <Card.Text>
+                                            A GÉANT Compendium Report is published annually, drawing
+                                            on data from the Compendium Survey lled in by NRENs,
+                                            complemented by information from other surveys
+                                        </Card.Text>
                                     </Card.Body>
                                 </Card>
                             </Col>
@@ -54,4 +60,4 @@ function Landing(): ReactElement {
     );
 }
 
-export default Landing;
\ No newline at end of file
+export default Landing;

webapp/src/scss/abstracts/_variables.scss

+$ash-grey: rgb(109, 110, 112);       // #6D6E70
+$light-ash-grey: rgb(185, 190, 197); // #B9BEC5
+$light-off-white: rgb(234, 237, 243);// #EAEDF3
+$teal-green: rgb(42, 166, 156);      // #2AA69C
+$teal-blue: rgb(83, 187, 180);       // #53BBB4
+$turquoise-blue: rgb(167, 220, 216); // #A7DCD8
+$yellow-orange: rgb(247, 158, 59);   // #F79E3B
+$yellow: rgb(250, 190, 102);         // #FABE66
+$light-beige: rgb(252, 231, 201);    // #FCE7C9
+$dark-teal: rgb(0, 63, 95);          // #003F5F
\ No newline at end of file

webapp/src/scss/base/_text.scss

+@import '../abstracts/variables';
+
+.regular-17pt {
+    font-family: "Open Sans", sans-serif;
+    font-size: 17pt;
+    font-weight: normal;
+}
+
+.bold-20pt {
+    font-family: "Open Sans", sans-serif;
+    font-size: 20pt;
+    font-weight: bold;
+}
+
+.bold-caps-16pt {
+    font-family: "Open Sans", sans-serif;
+    font-size: 16pt;
+    font-weight: bold;
+    text-transform: uppercase;
+}
+
+.bold-caps-17pt {
+    font-family: "Open Sans", sans-serif;
+    font-size: 17pt;
+    font-weight: bold;
+    text-transform: uppercase;
+}
+
+.bold-caps-20pt {
+    font-family: "Open Sans", sans-serif;
+    font-size: 20pt;
+    font-weight: bold;
+    text-transform: uppercase;
+}
+
+.bold-caps-30pt {
+    font-family: "Open Sans", sans-serif;
+    font-size: 30pt;
+    font-weight: bold;
+    text-transform: uppercase;
+}
+
+.geant-header {
+    @extend .bold-caps-20pt;
+    color: $dark-teal;
+}
\ No newline at end of file

webapp/src/scss/layout/_components.scss

+@import '../abstracts/variables';
+
+.rounded-border {
+  border-radius: 25px;
+  border: 1px solid $light-ash-grey
+}
+
+.grey-container {
+  background-color: $light-off-white;
+  max-width: 100vw;
+  height: 100vh;
+  padding: 2% 0;
+}
+
+.wordwrap {
+  max-width: 30vw;
+  word-wrap: break-word;
+}
+
+.center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.center-text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: 2%;
+  max-width: 100vw;
+  flex-direction: column;
+}
\ No newline at end of file