Merge pull request #131 from HE-Arc/sp-125-page-home

Sp 125 page home

frontend/src/components/Header.vue

@@ -1,13 +1,14 @@
 <script setup>
 import { RouterLink } from 'vue-router'
+import IconLogo from '@/components/icons/IconLogo.vue'
 </script>
 
 <template>
   <header>
     <div class="wrapper">
-      <RouterLink id="main-title" to="/">MasterIQ</RouterLink>
+      <RouterLink id="main-title" to="/"><IconLogo class="header-logo"/></RouterLink>
       <nav>
-        <RouterLink to="/">Categories</RouterLink>
+        <RouterLink to="/categories">Categories</RouterLink>
         <RouterLink to="/add-question">Add question</RouterLink>
         <RouterLink to="/login">Login</RouterLink>
         <RouterLink to="/logout">Logout</RouterLink>
@@ -23,6 +24,11 @@ header {
   line-height: 1.5;
 }
 
+.header-logo {
+  width: 50px;
+  height: 50px;
+}
+
 .wrapper
 {
   display: flex;
@@ -64,7 +70,8 @@ nav {
 @media (min-width: 1024px) {
   #main-title
   {
-    margin-bottom: 0;
+    margin-bottom: 0;    
+    line-height: 0;
   }
   .wrapper {
     flex-direction: row;

frontend/src/components/icons/FullLogo.vue

@@ -0,0 +1,17 @@
+<template>
+    <svg width="900" height="203" viewBox="0 0 900 203" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M101.625 154L105.438 132.438H115.312L125.25 76.0625H115.375L119.188 54.5H169.5L180.812 108.812L212.5 54.5H258.5L254.688 76.0625H244.812L234.875 132.438H244.75L240.938 154H191.062L194.875 132.438H203.188L210.312 91.875L174.562 154H156.812L143.188 91.1875L135.938 132.438H144.562L140.75 154H101.625ZM278.688 155.125C274.229 155.125 270.125 154.146 266.375 152.188C262.667 150.188 259.708 147.167 257.5 143.125C255.292 139.083 254.188 133.979 254.188 127.812C254.188 119.479 255.729 112.167 258.812 105.875C261.938 99.5833 266.271 94.6875 271.812 91.1875C277.354 87.6458 283.771 85.875 291.062 85.875C294.146 85.875 297.5 86.375 301.125 87.375C304.792 88.3333 307.875 89.7083 310.375 91.5L314.75 87H338.625L330.062 135.25H338.688L335.375 154H303.562L300.688 145.562C297.562 148.812 294.083 151.229 290.25 152.812C286.458 154.354 282.604 155.125 278.688 155.125ZM290.812 136.375C292.604 136.375 294.438 135.708 296.312 134.375C298.188 133.042 299.771 130.896 301.062 127.938L304.812 106.688C303.896 105.979 302.771 105.458 301.438 105.125C300.104 104.75 298.833 104.562 297.625 104.562C293.333 104.562 289.958 106.542 287.5 110.5C285.083 114.458 283.875 119.729 283.875 126.312C283.875 133.021 286.188 136.375 290.812 136.375ZM383.188 155.125C378.938 155.125 374.896 154.646 371.062 153.688C367.229 152.729 363.896 151.354 361.062 149.562L358.312 154H344.562L348.688 130.5H364.688C365.396 134.042 366.771 136.688 368.812 138.438C370.896 140.146 373.229 141 375.812 141C379.854 141 381.875 139.333 381.875 136C381.875 134.167 381.167 132.771 379.75 131.812C378.333 130.854 376.5 130.083 374.25 129.5C372.042 128.875 369.688 128.208 367.188 127.5C364.688 126.792 362.312 125.833 360.062 124.625C357.854 123.375 356.042 121.646 354.625 119.438C353.208 117.188 352.5 114.208 352.5 110.5C352.5 105.292 353.875 100.854 356.625 97.1875C359.417 93.5208 363.229 90.7083 368.062 88.75C372.938 86.7917 378.479 85.8125 384.688 85.8125C388.771 85.8125 392.5 86.2083 395.875 87C399.25 87.7917 402.292 89.1042 405 90.9375L407.25 87H421L417.188 108.5H401.188C400.312 105.042 399 102.646 397.25 101.312C395.5 99.9792 393.542 99.3125 391.375 99.3125C389.208 99.3125 387.562 99.75 386.438 100.625C385.354 101.458 384.812 102.562 384.812 103.938C384.812 105.562 385.521 106.833 386.938 107.75C388.396 108.625 390.25 109.375 392.5 110C394.792 110.625 397.208 111.312 399.75 112.062C402.333 112.812 404.75 113.854 407 115.188C409.292 116.521 411.146 118.354 412.562 120.688C414.021 123.021 414.75 126.083 414.75 129.875C414.75 135.125 413.396 139.646 410.688 143.438C408.021 147.188 404.312 150.083 399.562 152.125C394.812 154.125 389.354 155.125 383.188 155.125ZM455 155.125C445.083 155.125 437.938 152.812 433.562 148.188C429.188 143.562 427.812 136.646 429.438 127.438L433.25 105.75H423.062L426.062 88.6875L436.438 87.6875L439.062 72.6875L470.5 66.125L466.812 87H481.812L478.5 105.75H463.5L459.625 127.875C459.167 130.458 459.354 132.458 460.188 133.875C461.062 135.292 462.771 136 465.312 136C466.854 136 468.167 135.854 469.25 135.562C470.375 135.271 471.396 134.979 472.312 134.688L473.875 135.438L470.75 153.312C468.292 153.896 465.812 154.333 463.312 154.625C460.812 154.958 458.042 155.125 455 155.125ZM517.625 155.125C506.167 155.125 497.354 152.542 491.188 147.375C485.062 142.208 482 135.125 482 126.125C482 117.958 483.812 110.875 487.438 104.875C491.062 98.8333 496.083 94.1667 502.5 90.875C508.958 87.5417 516.438 85.875 524.938 85.875C531.188 85.875 536.458 86.875 540.75 88.875C545.042 90.8333 548.292 93.4375 550.5 96.6875C552.708 99.9375 553.812 103.5 553.812 107.375C553.812 109.792 553.312 112.229 552.312 114.688C551.312 117.146 549.417 119.292 546.625 121.125C543.875 122.917 539.854 124.062 534.562 124.562L511.688 126.688C512.729 133.146 518.042 136.375 527.625 136.375C530.917 136.375 534.292 135.771 537.75 134.562C541.25 133.354 544.542 131.583 547.625 129.25L549.188 130L546 147.938C543.958 149.479 541.312 150.792 538.062 151.875C534.854 152.958 531.438 153.771 527.812 154.312C524.229 154.854 520.833 155.125 517.625 155.125ZM512.812 113.562L512.688 114.688L523.875 113.625C526.333 113.417 528.104 112.75 529.188 111.625C530.271 110.458 530.812 109.125 530.812 107.625C530.812 105.417 530.188 103.812 528.938 102.812C527.729 101.771 526.208 101.25 524.375 101.25C521.167 101.25 518.604 102.417 516.688 104.75C514.812 107.042 513.521 109.979 512.812 113.562ZM554.812 154L558.125 135.25H567.062L572.125 106.562H563.188L566.188 89.5L605.25 85.8125L602.625 100.625C605.375 95.5833 608.938 91.8125 613.312 89.3125C617.688 86.8125 622.562 85.5625 627.938 85.5625L623.25 112.062C620.458 111.062 617.583 110.562 614.625 110.562C607.458 110.562 602.667 113.25 600.25 118.625L597.312 135.25H611.562L608.25 154H554.812ZM621.75 154L625.562 132.438H636.062L646 76.0625H635.5L639.312 54.5H693.062L689.25 76.0625H678.75L668.812 132.438H679.312L675.5 154H621.75ZM735.188 155.812C725.979 155.812 718.104 154.167 711.562 150.875C705.021 147.583 700.021 142.896 696.562 136.812C693.146 130.688 691.438 123.396 691.438 114.938C691.438 105.688 692.833 97.2708 695.625 89.6875C698.458 82.0625 702.438 75.5 707.562 70C712.729 64.4583 718.833 60.1875 725.875 57.1875C732.958 54.1875 740.75 52.6875 749.25 52.6875C758.5 52.6875 766.375 54.3333 772.875 57.625C779.417 60.9167 784.417 65.625 787.875 71.75C791.333 77.8333 793.062 85.1042 793.062 93.5625C793.062 101.062 792 108.104 789.875 114.688C787.792 121.271 784.854 127.188 781.062 132.438H791.188L787.375 154H773.75C767.208 154 761.854 153.083 757.688 151.25C750.646 154.292 743.146 155.812 735.188 155.812ZM727.562 104.188C727.438 105.062 727.312 105.938 727.188 106.812C727.062 107.646 726.958 108.458 726.875 109.25C729 106.667 731.646 104.604 734.812 103.062C738.021 101.521 741.521 100.75 745.312 100.75C750.438 100.75 754.375 102.021 757.125 104.562C757.625 100.562 757.875 96.375 757.875 92C757.875 80.1667 754.208 74.25 746.875 74.25C742.458 74.25 738.5 76.7917 735 81.875C731.542 86.9167 729.062 94.3542 727.562 104.188ZM727.625 125.875C727.625 128.583 728.479 130.708 730.188 132.25C731.938 133.792 734.333 134.562 737.375 134.562C740.292 134.562 742.979 133.604 745.438 131.688L744.812 123.812C744.562 120.771 743.875 118.562 742.75 117.188C741.625 115.812 739.896 115.125 737.562 115.125C734.812 115.125 732.458 116.104 730.5 118.062C728.583 119.979 727.625 122.583 727.625 125.875Z"
+            fill="#68DAC1" />
+        <g clip-path="url(#clip0_262_375)">
+            <path
+                d="M253.263 32.5865C255.032 32.5385 256.743 31.5861 257.689 29.9477C259.151 27.4155 258.284 24.1804 255.752 22.7184C253.22 21.2564 249.985 22.1233 248.523 24.6555C247.57 26.3054 247.607 28.2519 248.45 29.8081L234.304 39.1483C232.057 40.6317 229.009 39.6663 228.028 37.1593L222.535 23.0956C223.551 22.6587 224.444 21.9061 225.04 20.8749C226.502 18.3427 225.635 15.1076 223.103 13.6457C220.57 12.1837 217.335 13.0505 215.873 15.5827C214.411 18.1149 215.278 21.35 217.81 22.812L217.891 22.8583L206.496 54.6867C205.115 58.5337 206.683 62.8304 210.235 64.8812L241.996 83.2186C245.537 85.2627 250.035 84.4835 252.694 81.3593L274.561 55.5773L274.642 55.6236C277.174 57.0856 280.409 56.2187 281.871 53.6865C283.333 51.1543 282.466 47.9192 279.934 46.4572C277.402 44.9953 274.167 45.8621 272.705 48.3943C272.109 49.4255 271.904 50.575 272.034 51.6734L257.108 53.9488C254.446 54.3521 252.086 52.1951 252.247 49.5078L253.263 32.5865Z"
+                fill="#FFD700" />
+        </g>
+        <defs>
+            <clipPath id="clip0_262_375">
+                <rect width="76.2075" height="67.74" fill="white" transform="translate(224.87) rotate(30)" />
+            </clipPath>
+        </defs>
+    </svg>
+</template>

frontend/src/components/icons/IconLogo.vue

@@ -0,0 +1,22 @@
+<template>
+    <svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g clip-path="url(#clip0_239_239)">
+            <path
+                d="M16.2453 429.668L26.2233 373.235H52.068L78.0763 225.691H52.2316L62.2096 169.258H193.887L223.494 311.404L306.426 169.258H426.817L416.839 225.691H390.994L364.986 373.235H390.83L380.852 429.668H250.32L260.298 373.235H282.053L300.701 267.075L207.136 429.668H160.681L125.022 265.276L106.048 373.235H128.621L118.643 429.668H16.2453Z"
+                fill="#68DAC1" />
+            <g clip-path="url(#clip1_239_239)">
+                <path
+                    d="M416.173 93.2504C421.236 93.1133 426.132 90.3878 428.839 85.6991C433.023 78.4529 430.542 69.1953 423.296 65.0117C416.05 60.828 406.792 63.3086 402.608 70.5548C399.883 75.2764 399.989 80.8464 402.402 85.2996L361.92 112.028C355.491 116.273 346.769 113.51 343.959 106.336L328.242 66.0911C331.15 64.8408 333.705 62.6873 335.409 59.7364C339.592 52.4902 337.112 43.2325 329.866 39.0489C322.619 34.8653 313.362 37.3459 309.178 44.5921C304.994 51.8383 307.475 61.096 314.721 65.2796L314.951 65.4121L282.344 156.493C278.393 167.502 282.879 179.797 293.043 185.666L383.933 238.141C394.064 243.99 406.937 241.761 414.547 232.82L477.122 159.042L477.351 159.174C484.598 163.358 493.855 160.877 498.039 153.631C502.222 146.385 499.742 137.127 492.496 132.943C485.249 128.76 475.992 131.24 471.808 138.487C470.104 141.438 469.517 144.727 469.888 147.87L427.176 154.381C419.559 155.536 412.805 149.363 413.267 141.673L416.173 93.2504Z"
+                    fill="#FFD700" />
+            </g>
+        </g>
+        <defs>
+            <clipPath id="clip0_239_239">
+                <rect width="512" height="512" fill="white" />
+            </clipPath>
+            <clipPath id="clip1_239_239">
+                <rect width="218.078" height="193.847" fill="white" transform="translate(334.923) rotate(30)" />
+            </clipPath>
+        </defs>
+    </svg>
+</template>

frontend/src/router/index.js

@@ -6,9 +6,14 @@ const router = createRouter({
   routes: [
     {
       path: '/',
-      name: 'Categories',
+      name: 'Home',
       component: HomeView
     },
+    {
+      path: '/categories',
+      name: 'Categories',
+      component: () => import('../views/CategoriesView.vue')
+    },
     {
       path: '/quiz/:id_category',
       name: 'Quiz',

frontend/src/views/CategoriesView.vue

@@ -0,0 +1,57 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import CategoryItem from '@/components/CategoryItem.vue';
+import LeaderBoard from '@/components/LeaderBoard.vue';
+import APIClient from '@/api_client.js';
+
+const categories = ref([]);
+const randomId = ref(0);
+
+
+onMounted(async () => {
+    categories.value = await APIClient.getCategories();
+    // get a random category id for the random category button
+    randomId.value = Math.floor(Math.random() * Object.keys(categories.value).length) + 1;
+});
+</script>
+
+<template>
+    <main class="container col-wrapper">
+        <p class="info">Maximise your IQ by correctly answering the questions in the different categories below and
+            climb the leaderboard to become the best.</p>
+        <div class="empty-space"></div>
+        <div>
+            <h1 class="title">Categories</h1>
+            <div class="all-categories">
+                <CategoryItem v-for="category, key in categories" :id="parseInt(key)" :category></CategoryItem>
+            </div>
+            <div class="btn-container">
+                <RouterLink class="btn" :to="{ name: 'Quiz', params: { id_category: randomId } }">Random category</RouterLink>
+            </div>
+        </div>
+        <LeaderBoard />
+    </main>
+</template>
+
+<style scoped>
+.all-categories {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
+    row-gap: 1rem;
+    column-gap: 1rem;
+}
+
+.btn-container {
+    display: flex;
+    justify-content: center;
+    padding: 2rem 0;
+}
+
+@media (min-width: 1024px) {
+    .col-wrapper {
+        display: grid;
+        grid-template-columns: .66fr .33fr;
+        column-gap: 2rem;
+    }
+}
+</style>

frontend/src/views/HomeView.vue

@@ -1,57 +1,62 @@
 <script setup>
-import { ref, onMounted } from 'vue';
-import CategoryItem from '@/components/CategoryItem.vue';
-import LeaderBoard from '@/components/LeaderBoard.vue';
-import APIClient from '@/api_client.js';
-
-const categories = ref([]);
-const randomId = ref(0);
-
-
-onMounted(async () => {
-    categories.value = await APIClient.getCategories();
-    // get a random category id for the random category button
-    randomId.value = Math.floor(Math.random() * Object.keys(categories.value).length) + 1;
-});
+import MainLogo from '@/components/icons/FullLogo.vue';
 </script>
 
 <template>
-    <main class="container col-wrapper">
-        <p class="info">Maximise your IQ by correctly answering the questions in the different categories below and
-            climb the leaderboard to become the best.</p>
-        <div class="empty-space"></div>
-        <div>
-            <h1 class="title">Categories</h1>
-            <div class="all-categories">
-                <CategoryItem v-for="category, key in categories" :id="parseInt(key)" :category></CategoryItem>
-            </div>
-            <div class="btn-container">
-                <RouterLink class="btn" :to="{ name: 'Quiz', params: { id_category: randomId } }">Random category</RouterLink>
-            </div>
+    <main class="container">
+        <MainLogo class="logo" />
+        <div class="info-wrapper box">
+            <p class="info">Are you looking to improve your IQ in different categories and measure yourself against
+                others?
+                Whether you're into history, geography, music or film, we've got the perfect quiz for you.
+                Answer as many questions as you can to become the IQ master.</p>
+            <p class="info">But first, log in to save your progress:</p>
+            <RouterLink class="btn" :to="{ name: 'Login' }">Login</RouterLink>
+            <RouterLink class="btn" :to="{ name: 'Register' }">Register</RouterLink>
         </div>
-        <LeaderBoard />
     </main>
 </template>
 
 <style scoped>
-.all-categories {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
-    row-gap: 1rem;
-    column-gap: 1rem;
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
-.btn-container {
-    display: flex;
-    justify-content: center;
-    padding: 2rem 0;
+.info-wrapper {
+    text-align: center;
+}
+
+.info:first-child {
+    margin-top: 0;
+}
+
+.btn {
+    display: block;
+    flex-direction: column;
+    margin-top: 1rem;
+}
+
+.logo {
+    width: 300px;
+    height: 150px;
+}
+
+@media (min-width: 576px) {
+    .info-wrapper {
+        max-width: 80%;
+    }
+
+    .logo {
+        width: 400px;
+        height: 130px;
+    }
 }
 
 @media (min-width: 1024px) {
-    .col-wrapper {
-        display: grid;
-        grid-template-columns: .66fr .33fr;
-        column-gap: 2rem;
+    .info-wrapper {
+        max-width: 50%;
     }
 }
 </style>