♻️ user journey paged

angular.json

@@ -15,6 +15,7 @@
       "prefix": "",
       "architect": {
         "build": {
+          "defaultConfiguration": "production",
           "builder": "@angular-builders/custom-webpack:browser",
           "options": {
             "sourceMap": true,
@@ -59,6 +60,14 @@
             }
           },
           "configurations": {
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            },
             "production": {
               "fileReplacements": [
                 {
@@ -90,12 +99,16 @@
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
+          "defaultConfiguration": "development",
           "options": {
             "browserTarget": "hslayers-app:build"
           },
           "configurations": {
             "production": {
               "browserTarget": "hslayers-app:build:production"
+            },
+            "development": {
+              "browserTarget": "hslayers-app:build:development"
             }
           }
         },

package.json

@@ -5,11 +5,11 @@
   "scripts": {
     "ng": "ng",
     "build": "ng build --configuration production",
-    "dev": "ng serve --configuration production --disable-host-check",
+    "dev": "ng serve --disable-host-check",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "@ng-bootstrap/ng-bootstrap": "^12.1.2",
+    "@angular/router": "^13.3.11",
     "@types/d3": "^7.1.0",
     "@types/plotly.js-dist-min": "^2.3.0",
     "angular-plotly.js": "^4.0.4",

src/app/app-routing.module.ts

@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router'; // CLI imports router
+import { ComparingRuralAttractivenessComponent } from './pages/comparing-rural-attractiveness/comparing-rural-attractiveness.component';
+import { ExploringDynamicsComponent } from './pages/exploring-dynamics/exploring-dynamics.component';
+import { ExploringImpactComponent } from './pages/exploring-impact/exploring-impact.component';
+import { LandingPageComponent } from './pages/landing-page/landing-page.component';
+import { PolicyOptionsExplorerComponent } from './pages/policy-options-explorer/policy-options-explorer.component';
+import { RegionalForesightComponent } from './pages/regional-foresight/regional-foresight.component';
+import { RuralAttractivenessExplorerComponent } from './pages/rural-attractiveness-explorer/rural-attractiveness-explorer.component';
+import { SystemDynamicsModellingComponent } from './pages/system-dynamics-modelling/system-dynamics-modelling.component';
+import { TextMiningComponent } from './pages/text-mining/text-mining.component';
+
+const routes: Routes = [
+    { path: 'regional-foresight', component: RegionalForesightComponent },
+    { path: 'text-mining', component: TextMiningComponent },
+    { path: 'system-dynamics', component: SystemDynamicsModellingComponent },
+    { path: 'policy-options-explorer', component: PolicyOptionsExplorerComponent },
+    { path: 'rural-attractiveness-explorer', component: RuralAttractivenessExplorerComponent },
+    { path: 'comparing-rural-attractiveness', component: ComparingRuralAttractivenessComponent },
+    { path: 'exploring-dynamics', component: ExploringDynamicsComponent },
+    { path: 'exploring-impact', component: ExploringImpactComponent },
+    { path: '**', component: LandingPageComponent } // Default route
+
+]; // sets up routes constant where you define your routes
+
+// configures NgModule imports and exports
+@NgModule({
+    imports: [RouterModule.forRoot(routes)],
+    exports: [RouterModule]
+})
+export class AppRoutingModule { }

src/app/app.component.html

@@ -1,29 +1,50 @@
-<div class="menu-link">
-  <div class="container" (click)="toggleMenu()">
-    <div class="bar1"></div>
-    <div class="bar2"></div>
-    <div class="bar3"></div>
-  </div>
-</div>
-
 <main>
-  <a name="0-intro"></a>
-  <landing-page></landing-page>
-
-<about-rural-attractiveness-explorer></about-rural-attractiveness-explorer>
-
-<text-mining></text-mining>
-
-<system-dynamics-modelling></system-dynamics-modelling>
-
-<policy-options-explorer></policy-options-explorer>
-
-<rural-attractiveness-explorer></rural-attractiveness-explorer>
-
-<comparing-rural-attractiveness></comparing-rural-attractiveness>
-
-<exploring-dynamics></exploring-dynamics>
-
-<exploring-impact></exploring-impact>
-
+<nav class="navbar fixed-top navbar-expand-lg bg-light">
+  <div class="container-fluid">
+    <a class="navbar-brand" routerLink="/" href="#">Polirural</a>
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
+      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+        <li class="nav-item">
+          <a class="nav-link" routerLink="/regional-foresight" routerLinkActive="active"
+            ariaCurrentWhenActive="page">Regional foresight</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLink="/text-mining" routerLinkActive="active" ariaCurrentWhenActive="page">Text
+            mining</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLink="/system-dynamics" routerLinkActive="active"
+            ariaCurrentWhenActive="page">System dynamics</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLink="/policy-options-explorer" routerLinkActive="active"
+            ariaCurrentWhenActive="page">Policy options explorer</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLink="/rural-attractiveness-explorer" routerLinkActive="active"
+            ariaCurrentWhenActive="page">Rural attractiveness explorer</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLink="/comparing-rural-attractiveness" routerLinkActive="active"
+            ariaCurrentWhenActive="page">Comparing rural attractiveness</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLink="/exploring-dynamics" routerLinkActive="active"
+            ariaCurrentWhenActive="page">Exploring dynamics</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLink="/exploring-impact" routerLinkActive="active"
+            ariaCurrentWhenActive="page">Exploring impact</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</nav>
 </main>
+<div class="page-header">
+  <router-outlet></router-outlet>
+</div>

src/app/app.component.scss

@@ -1,7 +1,13 @@
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
+@import "bootstrap/scss/navbar";
+@import "bootstrap/scss/nav";
 @import "bootstrap/scss/card";
+@import "bootstrap/scss/containers";
+@import "bootstrap/scss/helpers";
 
 .hs-map {
   width: 90%;
@@ -33,40 +39,6 @@ hslayers {
   display: block;
 }
 
-.menu-link {
-  position: fixed;
-  left: 0;
-  top: 0;
-  margin: 1rem;
-}
-
-/* https://www.w3schools.com/howto/howto_css_menu_icon.asp */
-.container {
-  display: inline-block;
-  cursor: pointer;
-}
-
-.bar1, .bar2, .bar3 {
-  width: 35px;
-  height: 5px;
-  background-color: #333;
-  margin: 6px 0;
-  transition: 0.4s;
-}
-
-/* Rotate first bar */
-.change .bar1 {
-  -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
-  transform: rotate(-45deg) translate(-9px, 6px) ;
-}
-
-/* Fade out the second bar */
-.change .bar2 {
-  opacity: 0;
-}
-
-/* Rotate last bar */
-.change .bar3 {
-  -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
-  transform: rotate(45deg) translate(-8px, -8px) ;
+p {
+  text-align: justify!important;
 }

src/app/app.component.ts

@@ -1,7 +1,5 @@
 import {Component} from '@angular/core';
-import {NgbOffcanvas} from '@ng-bootstrap/ng-bootstrap';
 
-import {MenuComponent} from './menu/menu.component';
 import {SdmDihService} from './sdm-dih.service';
 
 @Component({
@@ -15,18 +13,5 @@ export class AppComponent {
     ? '../assets/'
     : './assets/';
 
-  constructor(
-    private offcanvasService: NgbOffcanvas,
-    public sdmDihService: SdmDihService
-  ) {}
-
-  toggleMenu() {
-    if (this.offcanvasService.hasOpenOffcanvas()) {
-      return;
-    }
-    this.offcanvasService.open(MenuComponent, {
-      scroll: true,
-      backdrop: true,
-    });
-  }
+  constructor(public sdmDihService: SdmDihService) {}
 }

src/app/app.module.ts

@@ -1,11 +1,11 @@
 import {BrowserModule} from '@angular/platform-browser';
 import {FormsModule} from '@angular/forms';
 import {NgModule} from '@angular/core';
-import {NgbOffcanvasModule} from '@ng-bootstrap/ng-bootstrap';
 
 import {AppComponent} from './app.component';
 
 import {AboutRuralAttractivenessExplorerComponent} from './pages/about-rural-attractiveness-explorer/about-rural-attractiveness-explorer.component';
+import {AppRoutingModule} from './app-routing.module';
 import {ComparingRuralAttractivenessComponent} from './pages/comparing-rural-attractiveness/comparing-rural-attractiveness.component';
 import {DiscsModule} from './discs-chart/discs.module';
 import {DotsModule} from './dots-chart/dots.module';
@@ -13,7 +13,6 @@ import {ExploringDynamicsComponent} from './pages/exploring-dynamics/exploring-d
 import {ExploringImpactComponent} from './pages/exploring-impact/exploring-impact.component';
 import {LandingPageComponent} from './pages/landing-page/landing-page.component';
 import {MapModule} from './map-chart/map.module';
-import {MenuComponent} from './menu/menu.component';
 import {PolicyOptionsExplorerComponent} from './pages/policy-options-explorer/policy-options-explorer.component';
 import {RegionalForesightComponent} from './pages/regional-foresight/regional-foresight.component';
 import {RuralAttractivenessExplorerComponent} from './pages/rural-attractiveness-explorer/rural-attractiveness-explorer.component';
@@ -28,7 +27,6 @@ import {TextMiningComponent} from './pages/text-mining/text-mining.component';
     ExploringDynamicsComponent,
     ExploringImpactComponent,
     LandingPageComponent,
-    MenuComponent,
     PolicyOptionsExplorerComponent,
     RegionalForesightComponent,
     RuralAttractivenessExplorerComponent,
@@ -38,10 +36,10 @@ import {TextMiningComponent} from './pages/text-mining/text-mining.component';
   imports: [
     BrowserModule,
     FormsModule,
-    NgbOffcanvasModule,
     DiscsModule,
     DotsModule,
     MapModule,
+    AppRoutingModule
   ],
   providers: [],
   bootstrap: [AppComponent],

src/app/discs-chart/year-graph/year-graph.component.scss

@@ -1,7 +1,7 @@
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
 @import "bootstrap/scss/mixins";
-@import "bootstrap/scss/utilities";
+//@import "bootstrap/scss/utilities";
 @import "bootstrap/scss/forms";
 @import "bootstrap/scss/card";
 

src/app/pages/comparing-rural-attractiveness/comparing-rural-attractiveness.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ComparingRuralAttractivenessComponent } from './comparing-rural-attractiveness.component';
+
+describe('ComparingRuralAttractivenessComponent', () => {
+  let component: ComparingRuralAttractivenessComponent;
+  let fixture: ComponentFixture<ComparingRuralAttractivenessComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ComparingRuralAttractivenessComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ComparingRuralAttractivenessComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/comparing-rural-attractiveness/comparing-rural-attractiveness.component.ts

@@ -3,9 +3,10 @@ import {Component, OnInit} from '@angular/core';
 @Component({
   selector: 'comparing-rural-attractiveness',
   templateUrl: './comparing-rural-attractiveness.component.html',
+  styleUrls: ['./comparing-rural-attractiveness.component.scss'],
 })
 export class ComparingRuralAttractivenessComponent implements OnInit {
   constructor() {}
 
-  ngOnInit() {}
+  ngOnInit(): void {}
 }

src/app/pages/exploring-dynamics/exploring-dynamics.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ExploringDynamicsComponent } from './exploring-dynamics.component';
+
+describe('ExploringDynamicsComponent', () => {
+  let component: ExploringDynamicsComponent;
+  let fixture: ComponentFixture<ExploringDynamicsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ExploringDynamicsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ExploringDynamicsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/exploring-dynamics/exploring-dynamics.component.ts

@@ -5,9 +5,10 @@ import {SdmDihService} from '../../sdm-dih.service';
 @Component({
   selector: 'exploring-dynamics',
   templateUrl: './exploring-dynamics.component.html',
+  styleUrls: ['./exploring-dynamics.component.scss'],
 })
 export class ExploringDynamicsComponent implements OnInit {
   constructor(public sdmDihService: SdmDihService) {}
 
-  ngOnInit() {}
+  ngOnInit(): void {}
 }

src/app/pages/exploring-impact/exploring-impact.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ExploringImpactComponent } from './exploring-impact.component';
+
+describe('ExploringImpactComponent', () => {
+  let component: ExploringImpactComponent;
+  let fixture: ComponentFixture<ExploringImpactComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ExploringImpactComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ExploringImpactComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/exploring-impact/exploring-impact.component.ts

@@ -3,9 +3,10 @@ import {Component, OnInit} from '@angular/core';
 @Component({
   selector: 'exploring-impact',
   templateUrl: './exploring-impact.component.html',
+  styleUrls: ['./exploring-impact.component.scss'],
 })
 export class ExploringImpactComponent implements OnInit {
   constructor() {}
 
-  ngOnInit() {}
+  ngOnInit(): void {}
 }

src/app/pages/landing-page/landing-page.component.html

@@ -1,32 +1,150 @@
-<h1 class="pl-2">Rural Attractiveness Explorer</h1>
-<h2 class="pl-2">Regional attractiveness of Polirural Pilot Regions based on system Dynamics models</h2>
-<div class="pl-2">
-  <h3>SDM &ndash; DIH integration bridge</h3>
-  <p>This page provides some showcase ideas about visualization of SDM model outputs in various points in time.
-    SDM is a System Dynamics Model developed as a part of the Polirural project. <a href="hub.polirural.eu">DIH</a> is
-    a Digital Innovation Hub developed as another part of the Polirural project.
-    Regional attractiveness is one of the tools present in the DIH.</p>
-</div>
-<div class="pl-2">
-  <h3>About System Dynamics Modelling</h3>
-  <p>The SDM tool can be used to simulate the impacts of different policy approaches on various KPIs in the PoliRural
-    pilot regions through 2040. The outputs of this tool are highly interesting and relevant for decision-making and
-    planning activities.
-  </p>
-  <p></p>
-</div>
-<div class="pl-2">
-  <h3>About Regional Attractiveness</h3>
-  <p>Attractiveness can be seen from the perspective of a farmer, a young man or woman, a businessman or a
-    sociologist. As there is no singular perception of attractiveness, there cannot be a singular value representing
-    it. In the Index of regional attractiveness, we emphasize the attractiveness of a region as a compound and
-    relative value. Based on available statistical data about a region, each region is then assessed by several
-    factors. In this showcase we differentiate social, anthropic, natural and economic factor.</p>
-  <p></p>
-</div>
+<div class="container has-fixed-header">
+
+  <h1 class="pl-2">Rural Attractiveness Explorer</h1>
+  <h2 class="pl-2">Regional attractiveness of Polirural Pilot Regions based on system Dynamics models</h2>
+  <div class="pl-2">
+    <h3>SDM &ndash; DIH integration bridge</h3>
+    <p>This page provides some showcase ideas about visualization of SDM model outputs in various points in time.
+      SDM is a System Dynamics Model developed as a part of the Polirural project. <a href="hub.polirural.eu">DIH</a> is
+      a Digital Innovation Hub developed as another part of the Polirural project.
+      Regional attractiveness is one of the tools present in the DIH.</p>
+  </div>
+  <div class="pl-2">
+    <h3>About System Dynamics Modelling</h3>
+    <p>The SDM tool can be used to simulate the impacts of different policy approaches on various KPIs in the PoliRural
+      pilot regions through 2040. The outputs of this tool are highly interesting and relevant for decision-making and
+      planning activities.
+    </p>
+    <p></p>
+  </div>
+  <div class="pl-2">
+    <h3>About Regional Attractiveness</h3>
+    <p>Attractiveness can be seen from the perspective of a farmer, a young man or woman, a businessman or a
+      sociologist. As there is no singular perception of attractiveness, there cannot be a singular value representing
+      it. In the Index of regional attractiveness, we emphasize the attractiveness of a region as a compound and
+      relative value. Based on available statistical data about a region, each region is then assessed by several
+      factors. In this showcase we differentiate social, anthropic, natural and economic factor.</p>
+    <p></p>
+  </div>
 
-<!--
-  Link to page 1 entitled “Regional Foresight”
-  Link to page 2 entitled “Text Mining applied to Regional Foresight”
-  Link to page 3 entitled “SDM applied to Regional Foresight”
-  -->
+  <h2 class="my-5">
+    Exploring New Tools to Support Regional Foresight Initiatives
+  </h2>
+
+  <div class="row mt-4 p-4">
+    <p>
+      From 2020 to 2022, twelve Regional Foresight exercises in the EU and neighbouring countries, provided a
+      living
+      laboratory for exploring the use of novel tools and techniques in highly participative approaches to local
+      policy
+      co-design, led by teams at regional and sub-regional level. To this end POLIRURAL teams designed and
+      developed novel IT
+      systems intended to support and enrich stakeholder engagement in those 12 regional Foresight exercises.
+    </p>
+  </div>
+  <div class="row mt-4">
+    <div class="col-6 p-5 bg-light">
+      <p>
+        One of those systems employed a wide range of Text Mining and Machine learning techniques to support the
+        work of readers
+        and researchers tasked with discovering relevant information in large libraries of documents, with a
+        view to
+        reducing
+        the burden of work required of local leadership teams to provide stakeholders with short, relevant, and
+        timely texts on
+        complex issues that affect their region, and which may require a policy response. This tool is called
+        the
+        SEMANTIC
+        EXPLORER (SE).
+      </p>
+    </div>
+    <div class="col-6 p-3">
+      <div class="card">
+        Test
+      </div>
+    </div>
+  </div>
+  <div class="row mt-4">
+    <div class="col-6"></div>
+    <div class="col-6 p-5 bg-light">
+      <p>
+
+      </p>
+      <p>
+        Our biggest effort was devoted to the use of System Dynamic Modelling or SDM, in a tool allowing normal
+        citizens to
+        explore the impact of different policy options on regional KPIs or indicators of performance. This tool
+        is
+        called the
+        POLICY OPTIONS EXPLORER (POE).
+      </p>
+    </div>
+  </div>
+  <div class="row mt-4">
+    <div class="col-6 p-5 bg-light">
+      <p>
+        Our third tool is the RURAL ATTRACTIVENESS EXPLORER (RAE). It connects the POE to a composite Index of
+        Rural
+        Attractiveness (IRA), allowing users to see how different policy choices will play out over time in
+        terms of
+        their
+        impact on an
+      </p>
+    </div>
+    <div class="col-6"></div>
+  </div>
+  <div class="row mt-4 p-4">
+    <p>
+      An important aspect of all of this work was to better understand how one can help non-experts, as opposed to
+      professional economists, statisticians, and modellers, to better understand how the world is changing, how
+      the
+      challenge
+      of growth and development is evolving, and the range of available real-world policy options, with the
+      intention
+      of
+      being
+      able to take part in a meaningful and impactful local policy process.
+    </p>
+  </div>
+  <div class="row mt-4 p-4">
+    <p>
+      To find out more, the reader is invited to follow the links to our pages on
+    </p>
+    <nav>
+
+      <ul>
+        <li>
+          <a routerLink="/regional-foresight" routerLinkActive="active" ariaCurrentWhenActive="page">
+            Regional foresight
+          </a>
+        </li>
+        <li>
+          <a routerLink="/text-mining" routerLinkActive="active" ariaCurrentWhenActive="page">
+            Text Mining applied to Regional Foresight
+          </a>
+        </li>
+        <li>
+          <a routerLink="/system-dynamics" routerLinkActive="active" ariaCurrentWhenActive="page">
+            System Dynamic Modelling
+          </a>
+        </li>
+      </ul>
+      <p>
+        or skip directly to
+      </p>
+      <ul>
+        <li>The SE tool (add link to the SE),</li>
+        <li>
+          <a routerLink="/policy-options-explorer" routerLinkActive="active" ariaCurrentWhenActive="page">
+            The Policy Options Explorer
+          </a>
+        </li>
+        <li>
+          <a routerLink="/rural-attractiveness-explorer" routerLinkActive="active" ariaCurrentWhenActive="page">
+            The Rural Attractiveness Explorer
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</div>

src/app/pages/landing-page/landing-page.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LandingPageComponent } from './landing-page.component';
+
+describe('LandingPageComponent', () => {
+  let component: LandingPageComponent;
+  let fixture: ComponentFixture<LandingPageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LandingPageComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LandingPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/landing-page/landing-page.component.ts

@@ -3,9 +3,10 @@ import {Component, OnInit} from '@angular/core';
 @Component({
   selector: 'landing-page',
   templateUrl: './landing-page.component.html',
+  styleUrls: ['./landing-page.component.scss'],
 })
 export class LandingPageComponent implements OnInit {
   constructor() {}
 
-  ngOnInit() {}
+  ngOnInit(): void {}
 }

src/app/pages/policy-options-explorer/policy-options-explorer.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PolicyOptionsExplorerComponent } from './policy-options-explorer.component';
+
+describe('PolicyOptionsExplorerComponent', () => {
+  let component: PolicyOptionsExplorerComponent;
+  let fixture: ComponentFixture<PolicyOptionsExplorerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PolicyOptionsExplorerComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PolicyOptionsExplorerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/policy-options-explorer/policy-options-explorer.component.ts

@@ -3,9 +3,10 @@ import {Component, OnInit} from '@angular/core';
 @Component({
   selector: 'policy-options-explorer',
   templateUrl: './policy-options-explorer.component.html',
+  styleUrls: ['./policy-options-explorer.component.scss'],
 })
 export class PolicyOptionsExplorerComponent implements OnInit {
   constructor() {}
 
-  ngOnInit() {}
+  ngOnInit(): void {}
 }

src/app/pages/regional-foresight/regional-foresight.component.html

@@ -1,12 +1,108 @@
-  <!-- TODO: <div class="page">
-    <a name="1-foresight"></a><h1 class="pl-2">Regional Foresight</h1> -->
-  <!--
-A short note on the POLIRURAL project as a host for 12 regional Foresight initiatives. 
+<div class="container has-fixed-header">
 
-Links to FS related project deliverables
-Links to newsletter and related articles
-Links to internal deliverables (inventories, guides, compendia etc.)
-Links to the 12 Foresight pages
-Links to external pages for FUP
-    -->
-  <!-- </div> -->
+    <h2 class="my-5">An Overview of Regional Foresight</h2>
+    <p>Foresight has a long history as a strategic management tool. It was employed initially in the development of
+        national
+        research agendas in countries like Japan. It was adopted by the European Commission with the establishment of a
+        Cellule Prospective and the FAST program for Forecasting and Assessment in Science and Technology, under
+        President
+        Jacques Delors. Over the years, the practice of Foresight has evolved beyond national and EU inputs to science
+        and
+        technology policy. It is now applied to a much broader range of issues related to economic and social
+        development,
+        at sectoral, regional, and sub-regional level.&nbsp;</p>
+    <p>Despite its emphasis on stakeholder engagement, the use of the term &lsquo;foresight&rsquo; is often confused
+        with
+        future studies. Foresight practitioners often make the mistake of focusing exclusively on engagement with
+        stakeholders at grass roots level. This is unfortunate as it ignores the need for engagement with
+        &lsquo;actors&rsquo;, those who get things done. That means the people in politics or public administration who
+        hold
+        the purse strings, have the power to allocate budgets or mobilize finance, enact legislation, or design and
+        implement programs. Without effective engagement with such actors, reports stay on the shelf, the plans they
+        contain, however well drafted, never get carried out and the &rsquo;visions&rsquo; of communities never become
+        anything more than a dream.&nbsp;&nbsp;</p>
+    <p>Aware of these issues, the POLIRURAL project provided a framework for the execution of its 12 regional Foresight
+        initiatives, that include the following key elements.</p>
+    <ul>
+        <li>Bottom-up activities where the leadership team works with policy beneficiaries</li>
+        <li>Top-down activities where the leadership team works with those who make policy happen</li>
+        <li>Production of timely and adequate content to support the work at every stage of the process</li>
+    </ul>
+    <p>&nbsp;The overall process should produce a minimal set of documents including</p>
+    <ul>
+        <li>A vision, which also describes the challenges to be addressed to achieve that vision</li>
+        <li>An action plan, with policy measures to address the challenges and their intervention logic</li>
+        <li>A roadmap which explains measure sequencing, funding, and assignment of responsibility!&nbsp;</li>
+    </ul>
+    <p>Finally, we have asked all of the local leadership teams to measures intended to</p>
+    <ul>
+        <li>Secure endorsement of the vision and action plan by beneficiaries</li>
+        <li>Secure adoption of the package by the actors who make policy happen</li>
+        <li>Ensure the appointment of a monitoring committee to oversee implementation of the plan.&nbsp;</li>
+    </ul>
+    <p>For those who want to know more, they might like to consult the following set of project related resources.&nbsp;
+    </p>
+    <ul>
+        <li>T<a href="https://youtu.be/m66wjhqLbg0?t=765" target="_blank" rel="noopener">raining session</a> by Patrick
+            Crehan on Regional Foresight</li>
+        <li>D1.8 Future Outlooks Methodology (missing link, requested from SPI)</li>
+        <li><a href="https://polirural.eu/resources/inventory-of-drivers-of-change/" target="_blank" rel="noopener">The
+                STEEPV Inventory of Drivers of Change</a></li>
+        <li><a href="https://polirural.eu/wp-content/uploads/2021/11/PoliRural-Foresight-Guide-to-Deep-Dives.pdf"
+                target="_blank" rel="noopener">The Guide to Deep Dives &ndash; COVID Response</a></li>
+        <li><a href="https://polirural.eu/wp-content/uploads/2022/02/Deep-Dive-CAP-Reform.pdf" target="_blank"
+                rel="noopener">The Guide to Deep Dives &ndash; CAP Reform</a></li>
+        <li><a href="https://polirural.eu/wp-content/uploads/2022/02/Deep-Dives-Green-Deal.pdf" target="_blank"
+                rel="noopener">The Guide to Deep Dives &ndash; The Green Deal</a></li>
+        <li><a href="https://polirural.eu/resources/newsletters/" target="_blank" rel="noopener">Newsletter No. 01
+                article
+                entitled &ldquo;Regional Foresight&rdquo;</a></li>
+        <li><a href="https://polirural.eu/resources/newsletters/" target="_blank" rel="noopener">Newsletter No. 07
+                article
+                entitled &ldquo;The STEEPV Inventory of Drivers of Change&rdquo;</a></li>
+        <li><a href="https://polirural.eu/resources/newsletters/" target="_blank" rel="noopener">Newsletter No. 09
+                article
+                entitled &ldquo;Tools for Regional Foresight - Guide to Deep Dives on the Regional Impact of COVID
+                19&rdquo;</a></li>
+        <li><a href="https://polirural.eu/resources/newsletters/" target="_blank" rel="noopener">Newsletter No. 11
+                article
+                entitled &ldquo;Tools for Regional Foresight - Guide to Deep Dives on CAP Reform&rdquo;</a></li>
+        <li><a href="https://polirural.eu/" target="_blank" rel="noopener">The POLIRURAL project</a></li>
+        <li><a href="https://polirural.eu/pilots/" target="_blank" rel="noopener">The Regional Foresight pilots</a></li>
+        <li><a href="https://polirural.eu/?smd_process_download=1&amp;download_id=1174" target="_blank"
+                rel="noopener">The
+                Regional Foresight pilot for Apulia, Italy</a></li>
+        <li><a href="https://polirural.eu/?smd_process_download=1&amp;download_id=1175" target="_blank"
+                rel="noopener">The
+                Regional Foresight pilot for Gevgelija-Strumica, Macedonia</a></li>
+        <li><a href="https://polirural.eu/?smd_process_download=1&amp;download_id=1176" target="_blank"
+                rel="noopener">The
+                Regional Foresight pilot for Galilee, Israel</a></li>
+        <li><a href="https://polirural.eu/?smd_process_download=1&amp;download_id=1170" target="_blank"
+                rel="noopener">The
+                Regional Foresight pilot for Central Bohemia, Czech Republic</a></li>
+        <li><a href="https://polirural.eu/?smd_process_download=1&amp;download_id=1170" target="_blank"
+                rel="noopener">The
+                Regional Foresight pilot for Slovakia</a></li>
+        <li><a href="https://polirural.eu/?smd_process_download=1&amp;download_id=1172" target="_blank"
+                rel="noopener">The
+                Regional Foresight pilot for Hame, Finland</a></li>
+        <li><a href="https://polirural.eu/?smd_process_download=1&amp;download_id=1173" target="_blank"
+                rel="noopener">The
+                Regional Foresight pilot for Central Greece</a></li>
+        <li><a href="https://polirural.eu/?smd_process_download=1&amp;download_id=1148" target="_blank"
+                rel="noopener">The
+                Regional Foresight pilot for Flanders, Belgium</a></li>
+        <li><a href="https://polirural.eu/?smd_process_download=1&amp;download_id=1152" target="_blank"
+                rel="noopener">The
+                Regional Foresight pilot for Monaghan, Ireland</a></li>
+        <li><a href="https://polirural.eu/?smd_process_download=1&amp;download_id=1153" target="_blank"
+                rel="noopener">The
+                Regional Foresight pilot for Segobriga, Spain</a></li>
+        <li><a href="https://polirural.eu/wp-content/uploads/2021/11/04Vidzeme_Latvia.pdf" target="_blank"
+                rel="noopener">The Regional Foresight pilot for Vidzeme, Latvia</a></li>
+        <li><a href="https://polirural.eu/?smd_process_download=1&amp;download_id=1169" target="_blank"
+                rel="noopener">The
+                Regional Foresight pilot for Mazowiecke, Poland</a></li>
+    </ul>
+</div>

src/app/pages/regional-foresight/regional-foresight.component.ts

@@ -3,9 +3,10 @@ import {Component, OnInit} from '@angular/core';
 @Component({
   selector: 'regional-foresight',
   templateUrl: './regional-foresight.component.html',
+  styleUrls: ['./regional-foresight.component.scss'],
 })
 export class RegionalForesightComponent implements OnInit {
   constructor() {}
 
-  ngOnInit() {}
+  ngOnInit(): void {}
 }

src/app/pages/rural-attractiveness-explorer/rural-attractiveness-explorer.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RuralAttractivenessExplorerComponent } from './rural-attractiveness-explorer.component';
+
+describe('RuralAttractivenessExplorerComponent', () => {
+  let component: RuralAttractivenessExplorerComponent;
+  let fixture: ComponentFixture<RuralAttractivenessExplorerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ RuralAttractivenessExplorerComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RuralAttractivenessExplorerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/rural-attractiveness-explorer/rural-attractiveness-explorer.component.ts

@@ -3,9 +3,10 @@ import {Component, OnInit} from '@angular/core';
 @Component({
   selector: 'rural-attractiveness-explorer',
   templateUrl: './rural-attractiveness-explorer.component.html',
+  styleUrls: ['./rural-attractiveness-explorer.component.scss'],
 })
 export class RuralAttractivenessExplorerComponent implements OnInit {
   constructor() {}
 
-  ngOnInit() {}
+  ngOnInit(): void {}
 }

src/app/pages/system-dynamics-modelling/system-dynamics-modelling.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SystemDynamicsModellingComponent } from './system-dynamics-modelling.component';
+
+describe('SystemDynamicsModellingComponent', () => {
+  let component: SystemDynamicsModellingComponent;
+  let fixture: ComponentFixture<SystemDynamicsModellingComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SystemDynamicsModellingComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SystemDynamicsModellingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/system-dynamics-modelling/system-dynamics-modelling.component.ts

@@ -3,9 +3,10 @@ import {Component, OnInit} from '@angular/core';
 @Component({
   selector: 'system-dynamics-modelling',
   templateUrl: './system-dynamics-modelling.component.html',
+  styleUrls: ['./system-dynamics-modelling.component.scss'],
 })
 export class SystemDynamicsModellingComponent implements OnInit {
   constructor() {}
 
-  ngOnInit() {}
+  ngOnInit(): void {}
 }

src/app/pages/text-mining/text-mining.component.ts

@@ -3,9 +3,10 @@ import {Component, OnInit} from '@angular/core';
 @Component({
   selector: 'text-mining',
   templateUrl: './text-mining.component.html',
+  styleUrls: ['./text-mining.component.scss'],
 })
 export class TextMiningComponent implements OnInit {
   constructor() {}
 
-  ngOnInit() {}
+  ngOnInit(): void {}
 }

src/styles.scss

@@ -1,9 +1,9 @@
 /* You can add global styles to this file, and also import other style files */
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
-@import "bootstrap/scss/offcanvas";
 @import "bootstrap/scss/close";
 @import "bootstrap/scss/images";
 
@@ -88,12 +88,20 @@ h2 {
   color: #ff3e00;
 }
 
+p {
+  text-align: justify;
+}
+
 @media (min-width: 640px) {
   main {
     max-width: none;
   }
 }
 
+.has-fixed-header {
+  margin-top: 50px;
+}
+
 .hsl {
   /*
     hs-sidebar, .hs-sidebar-list, .hs-sidebar-item {