updates to home.

src/app/app.module.ts

@@ -37,12 +37,17 @@ import {MatToolbarModule} from '@angular/material/toolbar';
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatInputModule} from '@angular/material/input';
+import {TrainingComponent} from './training/training.component';
 
 const routes: Routes = [
   {
     path: 'styleguide',
     component: StyleGuideComponent
   },
+  {
+    path: 'training',
+    component: TrainingComponent
+  },
   {
     path: '',
     component: HomeComponent

src/app/home/home.component.html

@@ -23,6 +23,7 @@
       id="{{link.id}}_menu_link"
     >{{ link.label }}</a>
     <div id="selected_indicator" [ngStyle]="{'top.px': activeLinkTop, 'opacity': showIndicator ? 1 : 0}"></div>
+    <a routerLink="/training">Training</a>
   </div>
 
   <div *ngFor="let link of menuLinks" class="scroll-spy-section" id="{{link.id}}">

src/app/home/home.component.scss

@@ -18,7 +18,7 @@
   right: -300px;
   z-index: 100;
   height: 100vh;
-  width: 300px;
+  width: 350px;
   background-color: rgba(255, 255, 255, 0.8);
   padding: 80px;
   transition: all 1s ease-in-out;
@@ -28,6 +28,7 @@
   align-items: flex-end;
   gap: 20px;
   box-sizing: border-box;
+  border-radius: 0;
 
   &.expanded {
     right: 0px;

src/app/home/home.component.ts

@@ -54,7 +54,7 @@ export class HomeComponent implements AfterViewInit {
     this.showIndicator = true;
     this.onSectionChange(linkId);
   }
-
+router
   onSectionChange(sectionId: string) {
     this.currentSection = sectionId;
     this.moveSelectedIndicator(this.currentSection);

src/app/training/training.component.html

@@ -0,0 +1,87 @@
+<div class="container">
+  <div class="title">
+    <h1>SpiffWorkflow Training</h1>
+    <h3>Empower your team with expert-led training in BPMN and SpiffWorkflow</h3>
+  </div>
+
+  <img src="assets/images/training/train.jpg" alt="Team collaborating on a BPMN diagram" class="hero-image"/>
+
+  <main>
+    <p>All training sessions are provided live, either over a video call or in person. Our comprehensive courses are
+      designed to help you master complex topics and build transparency and understanding between diverse
+      interdisciplinary teams in your organization.</p>
+    <p>Training is provided by core developers of the open source SpiffWorkflow application and
+    experts in Business Process Modeling Notation.</p>
+
+    <section class="training-type">
+      <div class="training-head">
+        <span
+          [inlineSVG]="'/assets/icons/workflow.svg'"
+          class="train-icon"
+        ></span>
+        <div>
+          <h2>Business Analyst Training</h2>
+          <p><strong>Duration:</strong> 5 hours per day over 3 consecutive days</p>
+          <p><strong>Format:</strong> Live video call</p>
+          <p>Our Business Analyst Training offers an in-depth exploration of BPMN Modeling with practical labs and exercises
+            in SpiffWorkflow.</p>
+        </div>
+      </div>
+      <h3>BPMN Topics Covered:</h3>
+      <ul>
+        <li>Analytic Modeling</li>
+        <li>BPMN Task Types</li>
+        <li>Gateways</li>
+        <li>Composition (sub-processes, call activities)</li>
+        <li>Concurrency</li>
+        <li>Data Objects and Data Stores</li>
+        <li>Events</li>
+        <li>Messages</li>
+        <li>Loops</li>
+        <li>Escalations</li>
+      </ul>
+      <h3>SpiffWorkflow Specific Topics:</h3>
+      <ul>
+        <li>Testing and BPMN Extensions</li>
+        <li>Managing groups and permissions</li>
+        <li>Creating approval processes</li>
+        <li>Maximizing DMN decision tables</li>
+      </ul>
+      <div class="price">
+        <p>Organizational Training: $16,400 (max class size 10 people)</p>
+        <p>Individual Training: $3,200 per person (when available)</p>
+      </div>
+    </section>
+
+    <section class="training-type">
+      <div class="training-head">
+        <div
+          [inlineSVG]="'/assets/icons/python.svg'"
+          class="train-icon"
+        ></div>
+        <div>
+        <h2>Integration Training</h2>
+        <p><strong>Duration:</strong> 5 hours (1 day workshop)</p>
+        <p><strong>Target Audience:</strong> Software developers and Dev/Ops teams</p>
+        <p>Our Integration Training is designed for those who need to manage and extend SpiffWorkflow.</p>
+        </div>
+      </div>
+      <h3>Course Content:</h3>
+      <ul>
+        <li>Building extensions within the SpiffWorkflow application</li>
+        <li>Creating standalone Python applications referenced from the SpiffWorkflow interface</li>
+        <li>Brief overview of BPMN</li>
+      </ul>
+      <div class="price">
+        <p>Organizational Training: $4,000 (max class size 10 people)</p>
+      </div>
+    </section>
+
+    <p>BPMN and SpiffWorkflow are complex topics that require training to use them effectively. With our expert-led
+      courses, you'll be equipped to accomplish highly complex tasks and improve collaboration across your
+      organization.</p>
+
+    <a href="#" class="cta">Enroll in Training Today</a>
+  </main>
+
+</div>

src/app/training/training.component.scss

@@ -0,0 +1,68 @@
+.title {
+  h3 {
+    color: #1d6256;
+  }
+}
+
+.training-head {
+  flex-direction: row;
+  box-sizing: border-box;
+  display: flex;
+  place-content: flex-start;
+  align-items: center;
+  opacity: 1;
+}
+
+::ng-deep .train-icon svg path { fill: #5ccfbb; }
+
+svg {
+}
+
+.train-icon {
+  width: 256px;
+}
+
+
+.training-type {
+  background-color: #231f20;
+  color: #fff;
+  padding: 20px;
+  margin-bottom: 20px;
+  border-radius: 20px;
+
+  h2 {
+    color: #5ccfbb;
+  }
+
+}
+ul {
+  padding-left: 20px;
+}
+.cta {
+  background-color: #3498db;
+  color: white;
+  padding: 10px 20px;
+  text-decoration: none;
+  border-radius: 5px;
+  display: inline-block;
+  margin-top: 20px;
+}
+.hero-image {
+  width: 100%;
+  max-height: 600px;
+  object-fit: cover;
+  border-radius: 5px;
+  margin-bottom: 20px;
+}
+.icon {
+  width: 50px;
+  height: 50px;
+  margin-right: 10px;
+  vertical-align: middle;
+}
+.price {
+  font-size: 1.2em;
+  font-weight: bold;
+  color: #5ccfbb;
+  margin-top: 10px;
+}

src/app/training/training.component.spec.ts

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

src/app/training/training.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import {isEven} from '../util';
+import {NgIf} from '@angular/common';
+import {InlineSVGModule} from 'ng-inline-svg-2';
+
+@Component({
+  selector: 'app-training',
+  standalone: true,
+  imports: [
+    NgIf,
+    InlineSVGModule
+  ],
+  templateUrl: './training.component.html',
+  styleUrl: './training.component.scss'
+})
+export class TrainingComponent {
+
+  protected readonly isEven = isEven;
+}