Add routes navbar mermaid and todos

app/components/navbar/index.hbs

@@ -0,0 +1,31 @@
+<nav class="bg-gray-800">
+  <div class="mx-auto px-2 sm:px-6 lg:px-8">
+    <div class="relative flex h-16 items-center justify-between">
+      <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
+      </div>
+      <div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
+        <div class="flex flex-shrink-0 items-center">
+          <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500"
+            alt="Your Company">
+        </div>
+        <div class="hidden sm:ml-6 sm:block">
+          <div class="flex space-x-4">
+            <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
+            <a href="/" class="bg-gray-900 text-white rounded-md px-3 py-2 text-sm font-medium"
+              aria-current="page">Home</a>
+            <a href="/about" class="bg-gray-900 text-white rounded-md px-3 py-2 text-sm font-medium" aria-current="page">About</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Mobile menu, show/hide based on menu state. -->
+  <div class="sm:hidden" id="mobile-menu">
+    <div class="flex justify-between space-y-1 px-2 pb-3 pt-2">
+      <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
+      <a href="/" class="bg-gray-900 text-white rounded-md px-3 py-2 text-sm font-medium" aria-current="page">Home</a>
+      <a href="/about" class="bg-gray-900 text-white rounded-md px-3 py-2 text-sm font-medium" aria-current="page">About</a>
+    </div>
+  </div>
+</nav>

app/components/schema/mermaid.md

@@ -0,0 +1,11 @@
+### Scenario eligibility for Bildungsurlaub
+```mermaid
+stateDiagram-v2
+    state1: Employed
+    state2: In the company for more than 6 months
+    state3: Eligible for Bildungsurlaub
+    state4: Can use up to 10 days every two years
+    state1 -->  state2
+    state2 --> state3
+    state3 --> state4
+```

app/router.js

@@ -6,4 +6,9 @@ export default class Router extends EmberRouter {
   rootURL = config.rootURL;
 }
 
-Router.map(function () {});
+Router.map(function () {
+    this.route('routes', { path: '/' }, function () {
+      this.route('home', { path: '/' });
+      this.route('about');
+    });
+});

app/routes/about/template.hbs

@@ -0,0 +1,9 @@
+About
+
+TODO
+<ul>
+  <li>About me</li>
+  <li>Full resources used for the project</li>
+  <li>Include links to German articles and links</li>
+  <li>Include Mermaid.js Tailwind, Ember</li>
+</ul>

app/routes/home/template.hbs

@@ -0,0 +1,24 @@
+<div class="flex justify-center">
+  <div>
+    <img src="/mermaid.png" alt="schema to employed until eligibility for bildungsurlaub">
+  </div>
+
+
+<div>
+  <h2><b>TODO:</b></h2>
+
+  <ul>
+    <li>What is Bildungsurlaub?</li>
+    <li>Definition from the German law</li>
+    <li>Are you eligible for Bildungsurlaub?</li>
+    <li>Include complete schema of scenarios</li>
+    <li>Schema needs a complete alt text</li>
+    <li>Add additional links</li>
+    <li>Create a request for Bildungsurlaub to HR</li>
+    <li>Copy text in English</li>
+    <li>Copy text in German</li>
+    <li>Replace Tailwind logo with Bildungsurlaub one (Canva logo creation? or ask ChatGPT for platform to create logos)</li>
+    <li>Verify pages are accessible with Colorblind extension + Lighthouse</li>
+  </ul>
+</div>
+</div>

app/templates/application.hbs

@@ -1,5 +1,7 @@
 {{page-title "Bildungsurlaub"}}
+<Navbar />
+<h1 id="title">Bildungsurlaub</h1>
 
-<h2 id="title">Welcome to Ember</h2>
 
-{{outlet}}
+{{outlet}}
+