Add CircleOverview component

client/src/components/circle/CircleOverview.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type {Circle} from '@/types';
+
+const props = defineProps<{
+  circleData: Circle
+}>()
+
+</script>
+
+<template>
+  <div class="circle-overview px-16 py-24 relative">
+    <div
+      class="w-8 h-8 absolute right-4 top-4 cursor-pointer"
+      @click="$emit('close')"
+    >
+      <it-icon-close class="h-8 w-8"></it-icon-close>
+    </div>
+
+
+    <h1 class="">Überblick: Circle "{{ circleData.title }}"</h1>
+
+    <p class="mt-8 text-xl">Hier zeigen wir dir, was du in diesem Circle lernen wirst.</p>
+
+    <div class="mt-8 p-4 border border-gray-500">
+      <h3>Du wirst in der Lage sein, ... </h3>
+
+      <ul class="mt-4">
+        <li class="text-xl flex items-center h-12" v-for="goal in circleData.goals" :key="goal.id">
+          <it-icon-check class="w-12 h-12 text-sky-500"></it-icon-check>
+          <div>{{ goal.value }}</div>
+        </li>
+      </ul>
+    </div>
+
+    <h3 class="mt-16">
+      Du wirst dein neu erworbenes Wissen auf folgenden berufstypischen Situation anwenden können:
+    </h3>
+
+    <ul class="grid grid-cols-3 auto-rows-fr gap-6 mt-8">
+      <li
+        v-for="jobSituation in circleData.job_situations"
+        :key="jobSituation.id"
+        class="job-situation border border-gray-500 p-4 text-xl flex items-center"
+      >
+        {{jobSituation.value}}
+      </li>
+    </ul>
+
+  </div>
+</template>
+
+<style scoped>
+</style>

client/src/views/CircleView.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import * as log from 'loglevel';
 
-import MainNavigationBar from '../components/MainNavigationBar.vue';
+import MainNavigationBar from '@/components/MainNavigationBar.vue';
-import LearningSequence from '../components/circle/LearningSequence.vue';
+import LearningSequence from '@/components/circle/LearningSequence.vue';
+import CircleOverview from '@/components/circle/CircleOverview.vue';
 
-import {onMounted} from 'vue'
+import {onMounted, reactive} from 'vue'
 import {useCircleStore} from '@/stores/circle';
 
 const props = defineProps<{
@@ -13,6 +14,10 @@ const props = defineProps<{
 
 const circleStore = useCircleStore();
 
+const state = reactive({
+  showOverview: false,
+});
+
 onMounted(() => {
   log.info('CircleView.vue mounted');
   circleStore.loadCircle(props.circleSlug);
@@ -21,51 +26,56 @@ onMounted(() => {
 </script>
 
 <template>
-  <MainNavigationBar/>
+  <div v-if="state.showOverview">
+    <CircleOverview :circle-data="circleStore.circleData" @close="state.showOverview = false"/>
+  </div>
+  <div v-else>
+    <MainNavigationBar/>
 
-  <div class="circle">
+    <div class="circle">
-    <div class="flex flex-col lg:flex-row">
+      <div class="flex flex-col lg:flex-row">
-      <div class="flex-initial lg:w-128 px-4 py-8 lg:px-8">
+        <div class="flex-initial lg:w-128 px-4 py-8 lg:px-8">
-        <h1 class="text-blue-dark text-7xl">
+          <h1 class="text-blue-dark text-7xl">
-          {{ circleStore.circleData.title }}
+            {{ circleStore.circleData.title }}
-        </h1>
+          </h1>
 
-        <div class="mt-8">
+          <div class="mt-8">
-          <img src="@/assets/circle-analyse.svg" alt="">
+            <img src="@/assets/circle-analyse.svg" alt="">
-        </div>
-
-        <div class="outcome border border-gray-500 mt-8 p-6">
-          <h3 class="text-blue-dark">Das lernst du in diesem Circle.</h3>
-          <div class="prose mt-4">
-            {{ circleStore.circleData.description }}
           </div>
 
-          <button class="btn-primary mt-4">Erfahre mehr dazu</button>
+          <div class="outcome border border-gray-500 mt-8 p-6">
+            <h3 class="text-blue-dark">Das lernst du in diesem Circle.</h3>
+            <div class="prose mt-4">
+              {{ circleStore.circleData.description }}
+            </div>
+
+            <button class="btn-primary mt-4" @click="state.showOverview = true">Erfahre mehr dazu</button>
+          </div>
+
+          <div class="expert border border-gray-500 mt-8 p-6">
+            <h3 class="text-blue-dark">Hast du Fragen?</h3>
+            <div class="prose mt-4">Tausche dich mit der Fachexpertin aus für den Circle Analyse aus.</div>
+            <button class="btn-secondary mt-4">
+              Fachexpertin kontaktieren
+            </button>
+          </div>
         </div>
 
-        <div class="expert border border-gray-500 mt-8 p-6">
+        <div class="flex-auto bg-gray-100 px-4 py-8 lg:px-24">
-          <h3 class="text-blue-dark">Hast du Fragen?</h3>
+          <div
-          <div class="prose mt-4">Tausche dich mit der Fachexpertin aus für den Circle Analyse aus.</div>
+            v-for="learningSequence in circleStore.circleData.learningSequences"
-          <button class="btn-secondary mt-4">
+            :key="learningSequence.translation_key"
-            Fachexpertin kontaktieren
+          >
-          </button>
+            <LearningSequence
+              :learning-sequence="learningSequence" @toggleLearningContentCheckbox="toggleLearningContentCheckbox"
+              :completion-data="circleStore.completionData"
+            ></LearningSequence>
+          </div>
+
         </div>
       </div>
 
-      <div class="flex-auto bg-gray-100 px-4 py-8 lg:px-24">
-        <div
-          v-for="learningSequence in circleStore.circleData.learningSequences"
-          :key="learningSequence.translation_key"
-        >
-          <LearningSequence
-            :learning-sequence="learningSequence" @toggleLearningContentCheckbox="toggleLearningContentCheckbox"
-            :completion-data="circleStore.completionData"
-          ></LearningSequence>
-        </div>
-
-      </div>
     </div>
-
   </div>
 </template>