Add module page

client/src/components/ObjectiveGroup.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="objective-group">
+    <h4>Gesellschaft</h4>
+
+    <ul>
+      <li class="objective-group__objective" v-for="objective in objectives" :key="objective.id">
+        {{objective.text}}
+      </li>
+    </ul>
+  </div>
+
+</template>
+
+<script>
+  export default {
+    data: () => {
+      return {
+        objectives: [
+          {
+            id: 1,
+            text: 'Ich kann wichtige personelle und organisatorische Strukturen der Berufsfachschule beschreiben.'
+          },
+          {id: 2, text: 'Ich kenne die Angebote und Regeln meiner Schule.'},
+          {
+            id: 3,
+            text: 'Ich kenne den Aufbau des Schullehrplans ABU und können das Qualifikationsverfahren des allgemeinbildenden Unterrichts ABU beschreiben.'
+          },
+          {id: 4, text: 'Ich kann die drei Lernorte unterscheiden.'}
+        ]
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .objective-group {
+    background-color: $grey-3;
+    padding: 17px;
+
+    &__objective {
+      font-size: 1.2857142857142858rem;
+    }
+  }
+</style>

client/src/pages/module.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="module">
+    <h2 class="module__meta-title">Modul 1</h2>
+    <h1 class="module__title">Mein neues Umfeld</h1>
+    <img src="https://picsum.photos/640/320" alt="" class="module__hero">
+    <p class="module__intro">
+      Sie stehen am Anfang eines neuen Lebensabschnitts. In Ihrer Rolle als Berufslernende oder Berufslernender haben Sie Verantwortung übernommen.
+
+      Wie erging es Ihnen am ersten Arbeits- und Schultag?
+    </p>
+
+    <h3>Lernziele</h3>
+    <objective-group></objective-group>
+
+    <h3>1.1 Lehrbeginn</h3>
+    <h4>Auftrag 1</h4>
+    <h4>Das Interview</h4>
+    <h4>Tipp</h4>
+    <h3>1.2  Die drei Lernorte</h3>
+    <h4>Unser Berufsbildungssystem</h4>
+    <h5>Die Berufsfachschule</h5>
+
+  </div>
+</template>
+
+<script>
+  import ObjectiveGroup from '@/components/ObjectiveGroup.vue';
+
+  export default {
+    components: {
+      ObjectiveGroup
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .module {
+    display: flex;
+    justify-self: center;
+    width: 640px;
+    flex-direction: column;
+
+    &__meta-title {
+      font-size: 2.6rem;
+      font-weight: 300;
+      font-family: $serif-font-family;
+    }
+
+    &__intro {
+      font-size: 1.5625rem;
+    }
+  }
+
+</style>