Adding category banner and desktop version

frontend/src/assets/main.css

@@ -49,6 +49,7 @@ h4
   padding: 2rem;
   background-color: var(--color-background-soft);
   border-radius: 27px;
+  margin-bottom: 2rem;
 }
 
 .title

frontend/src/components/CategorieBanner.vue

@@ -0,0 +1,71 @@
+<script setup>
+import APIClient from '@/api_client';
+import { onMounted, defineProps, ref } from 'vue';
+
+const imageData = ref('');
+const imageLoaded = ref(false);
+
+const props = defineProps({
+    id_category: Number
+})
+
+onMounted(async () => {
+    console.log(props.id_category);
+    imageData.value = await APIClient.getImageCategory(props.id_category);
+    imageLoaded.value = true;
+});
+</script>
+
+<template>
+    <Transition>
+        <div v-if="imageLoaded">
+            <h2 class="title">Categorie</h2>
+            <div class="category-banner" :style="{ backgroundImage: 'url(' + imageData + ')' }">
+                <div class="opacity-filter">
+                    <span class="category-name">Politique</span> <!-- TODO -->
+                </div>
+            </div>
+        </div>
+    </Transition>
+</template>
+
+<style scoped style="scss">
+.v-enter-active,
+.v-leave-active {
+    transition: all 1s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+    opacity: 0;
+    transform: scale(0.9);
+}
+
+.category-banner {
+    border-radius: 1.5rem;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    margin-bottom: 1.3rem;
+
+    .opacity-filter {
+        background-color: rgba(0, 0, 0, 0.5);
+        padding: 1rem;
+        border-radius: 1.5rem;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .category-name {
+            font-family: 'Montserrat', Inter, sans-serif;
+            font-weight: 800;
+            color: black;
+            font-size: 1.75rem;
+            font-style: italic;
+            color: white;
+            text-transform: uppercase;
+        }
+    }
+}
+</style>

frontend/src/views/QuizView.vue

@@ -3,6 +3,7 @@ import { useRoute } from 'vue-router';
 import { onMounted, ref } from 'vue';
 import AnswerForm from '@/components/AnswerForm.vue';
 import LeaderBoard from '@/components/LeaderBoard.vue';
+import CategorieBanner from '@/components/CategorieBanner.vue';
 import APIClient from '@/api_client';
 
 // default variables
@@ -27,23 +28,45 @@ onMounted(() => {
 </script>
 
 <template>
-    <section class="quiz container">
+    <section class="quiz container col-wrapper">
         <p class="info">Answer correctly to the question and earn as many IQs as possible!</p>
-        <h1 class="title">Question</h1>
-        <p class="question box">{{ question }}</p>
-        <AnswerForm @new-question="fetchNewQuestion" :hasAskedOptions="hasAskedOptions"/>
-        <LeaderBoard :id_category="Number(id_category)"/>
+        <div class="empty-space"></div>
+        <div>
+            <h1 class="title">Question</h1>
+            <p class="question box">{{ question }}</p>
+            <AnswerForm @new-question="fetchNewQuestion" :hasAskedOptions="hasAskedOptions" />
+        </div>
+        <div>
+            <CategorieBanner class="category-banner" :id_category="Number(id_category)" />
+            <LeaderBoard :id_category="Number(id_category)" />
+        </div>
+
     </section>
 </template>
 
 <style scoped>
 .title {
     text-align: center;
-    margin-bottom: 1rem;
 }
 
 .question {
     text-align: center;
     margin-bottom: 1.3rem;
 }
+
+.category-banner {
+    display: none;
+}
+
+@media (min-width: 1024px) {
+    .col-wrapper {
+        display: grid;
+        grid-template-columns: .66fr .33fr;
+        column-gap: 2rem;
+    }
+
+    .category-banner {
+        display: block;
+    }
+}
 </style>