added modules menu and static page

src/app/pages/menu.routes.ts

@@ -56,6 +56,12 @@ export const menuRoutes: IMenuItem[] = [
       },
     ],
   },
+  {
+    path: '/modules',
+    menuText: 'Modules',
+    type: MenuType.Default,
+    disabled: false,
+  },
   {
     path: '/contact',
     menuText: 'Contact',

src/app/pages/website/modules/modules.component.html

@@ -0,0 +1,51 @@
+<littil-title>Modules</littil-title>
+
+<littil-content-container>
+    <div class="grid grid-cols-12 gap-x-4 my-12">
+        <article class="col-span-12 md:col-span-8">
+            <p>Project LITTIL is ontstaan uit een idee van Stichting Devoxx4Kids Nederland. 
+                Deze stichting heeft meerdere modules in haar beheer waarmee vrijwilligers 
+                programmeerlessen kunnen geven aan kinderen in de leeftijd van 8 tot 14 jaar.
+            </p>
+            <div class="flex flex-col gap-y-4 mt-6">
+                <h3>Indien je aan de slag wilt met een les module, dan raden wij je aan om de 
+                    volgende workshops als basis te nemen:</h3>
+                <ul class="list-disc">
+                  <li>Een spelletje programmeren met Scratch (zonder installatie meteeen aan de slag):
+                    <ul><li><a href="https://github.com/devoxx4kids/materials/tree/master/workshops/scratch/nl/Kubecon_2023/appels" target="_blank">Vang de appels</a>
+                    </li><li>
+                        <a href="https://github.com/devoxx4kids/materials/tree/master/workshops/scratch/nl/Kubecon_2023/racen" target="_blank">Auto racen</a>
+                    </li>
+                    </ul>
+                  </li>
+                  <li>Leren programmeren door middel van een spel te spelen met CodeCombat (hiervoor moet je van te voren gebruikers namen configureren): 
+                    <ul><li><a href="https://github.com/devoxx4kids/materials/blob/master/workshops/CodeCombat/nl/UtrechtJUG_Devoxx4kids_CodeCombat_v.1.0.pdf" target="_blank">CodeCombat</a>
+                    </li></ul>
+                  </li>
+                  <li>Aan de slag zonder computer met CSUnplugged (hier heb je wat eigen materialen voor nodig):
+                    <ul><li>
+                        <a href="http://www.devoxx4kids.org/nederland/materiaal/cs-unplugged/" target="_blank">CSUnplugged</a>
+                    </li></ul> </li>
+                    <li>Muziek maken door te programmeren in Ruby (hier moet je van te voren wat installeren):
+                        <ul><li>
+                            <a href="http://www.devoxx4kids.org/nederland/materiaal/sonic-pi/" target="_blank">SonicPi</a>
+                        </li></ul> </li>
+                  <li>Een algemene IT les met uitgebreide gastdocent instructies vind je hier:
+                    <ul><li>
+                        <a href="https://github.com/devoxx4kids/materials/tree/master/workshops/IntroductionToIT/nl" target="_blank">Introductie IT</a>
+                    </li></ul> 
+                  </li>
+                  <li>Al het materiaal is te vinden onder deze link, niet alle modules zijn echter direct toe te passen in de klas:
+                    <ul><li>
+                        <a href="http://www.devoxx4kids.org/nederland/materiaal/" target="_blank">Devoxx4kids materiaal</a>
+                    </li></ul> 
+                  </li>
+                </ul>
+            </div>
+        </article>
+
+    </div>
+
+
+</littil-content-container>
+<littil-footer></littil-footer>

src/app/pages/website/modules/modules.component.spec.ts

@@ -0,0 +1,29 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ButtonComponent } from '../../../components/button/button.component';
+import { ContentContainerComponent } from '../../../components/content-container/content-container.component';
+import { TitleComponent } from '../../../components/title/title.component';
+import { ModulesComponent } from './modules.component';
+
+describe('ModulesComponent', () => {
+  let component: ModulesComponent;
+  let fixture: ComponentFixture<ModulesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [
+        ModulesComponent,
+        TitleComponent,
+        ButtonComponent,
+        ContentContainerComponent,
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ModulesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/website/modules/modules.component.ts

@@ -0,0 +1,54 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'littil-modules',
+  templateUrl: './modules.component.html',
+})
+export class ModulesComponent {
+
+  managementMock: { name: string, role: string, image?: string }[] = [
+    {
+      name: 'Koen Aerts',
+      role: 'Voorzitter Devoxx4Kids Nederland',
+      image: 'koen.jpg',
+    },
+    {
+      name: 'Saskia Vermeer Ooms',
+      role: 'Secretaris Devoxx4Kids Nederland',
+      image: 'saskia.jpg',
+    },
+    {
+      name: 'Eddy Vos',
+      role: 'Penningmeester Devoxx4Kids Nederland / Product owner LITTIL',
+      image: 'eddy.jpg',
+    },
+    {
+      name: 'Pepijn Schildkamp',
+      role: 'Bestuurslid Devoxx4Kids Nederland',
+      image: 'pepijn.jpg',
+    },
+    {
+      name: 'Anja van Hagen',
+      role: 'Lead Front-End Developers LITTIL',
+      image: 'anja.jpg',
+    },
+    {
+      name: 'Lennert Gijsen',
+      role: 'Lead Infra LITTIL',
+      image: 'lennert.jpg',
+    },
+    {
+      name: 'Marcel Wildenburg',
+      role: 'Lead Back-End Developers LITTIL',
+      image: 'marcel.jpg',
+    },
+  ];
+
+  constructor(private router: Router) {
+  }
+
+    navToContact(): void {
+    this.router.navigateByUrl('contact');
+  }
+}

src/app/pages/website/modules/modules.module.ts

@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { ContentContainerModule } from '../../../components/content-container/content-container.module';
+import { FooterModule } from '../../../components/footer/footer.module';
+import { ModulesComponent } from "./modules.component";
+import { ButtonModule } from "../../../components/button/button.module";
+import { TitleModule } from "../../../components/title/title.module";
+import {ContactBannerModule} from "../../../components/contact-banner/contact-banner.module";
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ModulesComponent,
+  },
+];
+
+@NgModule({
+  declarations: [ModulesComponent],
+    imports: [
+        ButtonModule,
+        CommonModule,
+        ContentContainerModule,
+        TitleModule,
+        RouterModule.forChild(routes),
+        FooterModule,
+        ContactBannerModule,
+    ],
+})
+export class ModulesModule { }

src/app/pages/website/website.routing.ts

@@ -43,6 +43,14 @@ export const websiteRoutes: Routes = [
         loadChildren: () =>
           import('./devoxx4kids/devoxx4kids.module').then((m) => m.Devoxx4kidsModule),
       },
+      {
+        path: 'modules',
+        data: {
+          menuText: 'Modules',
+        },
+        loadChildren: () =>
+          import('./modules/modules.module').then((m) => m.ModulesModule),
+      },
       {
         path: 'blog',
         data: {