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,6 +26,10 @@ onMounted(() => {
 </script>
 
 <template>
+  <div v-if="state.showOverview">
+    <CircleOverview :circle-data="circleStore.circleData" @close="state.showOverview = false"/>
+  </div>
+  <div v-else>
     <MainNavigationBar/>
 
     <div class="circle">
@@ -40,7 +49,7 @@ onMounted(() => {
               {{ circleStore.circleData.description }}
             </div>
 
-          <button class="btn-primary mt-4">Erfahre mehr dazu</button>
+            <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">
@@ -67,6 +76,7 @@ onMounted(() => {
       </div>
 
     </div>
+  </div>
 </template>
 
 <style scoped>