Version 1.0.0 - Frontend

src/components/Widget/View/Default.vue

@@ -1,10 +1,79 @@
 <template>
-    <p>Test</p>
+ <div class="default">
+  <!-- <Carousel v-show="!loading" class="child"> -->
+    <Changelog/>
+    <!-- <History/>
+    <Advice/>
+  </Carousel> -->
+  <p v-show="loading" class="loading">
+    <Icon icon="fa-spinner fa-solid" spin-pulse/> Chargement en cours
+  </p>
+ </div>
 </template>
 
 <script setup>
+import Welcome from './Home/Welcome.vue';
+import Carousel from '@/components/UI/Carousel.vue';
+import Changelog from './Home/Changelog.vue';
+import Advice from './Home/Advice.vue';
+import History from './Home/History.vue';
+
+import { ref } from 'vue';
+import Events from '@/utils/Events';
+
+const loading = ref(true);
+
+Events.on("CHANGELOG_LOADED", () => {
+    loading.value = false;
+});
+
+
+
 </script>
 
 <style scoped>
+.textSecond {
+    font-size: 0.8em;
+    color: var(--text-secondary);
+    opacity: 0.8;
+
+}   
+
+p {
+    margin: 0 0 0.5em 0;
+    font-size: 1.5em;
+    font-weight: 600;
+
+}
+
+.default  {
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-template-columns: 1fr;
+    gap: 5px;
+    flex: 1;
+}
+
+@media screen and (max-width: 768px),
+       screen and (max-height: 607px) {
+    .default {
+        grid-template-rows: 1fr;
+    }
+}
+
+.child {
+     grid-column: 1 / -1;
+    
+    width: 100%;
+}
+
+.loading {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;;
+    color: var(--text-secondary);
+}
 
 </style>