From 0e7c117a1b844074231a77cbab0dd9194e654f37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Roso=C5=82owski?=
 <87621210+rr-adam@users.noreply.github.com>
Date: Tue, 17 Sep 2024 11:00:18 +0200
Subject: [PATCH] Upgrade to bootstrap 5

---
 home/package-lock.json                  |  38 +-
 home/package.json                       |   3 +-
 home/src/components/FooterComponent.vue |  11 +-
 home/src/components/HeaderComponent.vue | 488 ++++++++++--------------
 home/src/components/SlideCarousel.vue   | 334 +++++++++-------
 home/src/main.js                        |   4 +-
 home/src/styles/global.scss             |  17 +
 7 files changed, 451 insertions(+), 444 deletions(-)

diff --git a/home/package-lock.json b/home/package-lock.json
index bbca4815..9cf1b092 100644
--- a/home/package-lock.json
+++ b/home/package-lock.json
@@ -9,8 +9,7 @@
       "version": "1.0.0",
       "dependencies": {
         "@gtm-support/vue-gtm": "^2.2.0",
-        "bootstrap": "^4.6.2",
-        "jquery": "^3.7.1",
+        "bootstrap": "^5.3.3",
         "vite-plugin-static-copy": "^1.0.1",
         "vue": "^3.4.15",
         "vue-router": "^4.2.5"
@@ -553,6 +552,16 @@
         "url": "https://opencollective.com/unts"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.9.6",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.9.6.tgz",
@@ -948,9 +957,9 @@
       "dev": true
     },
     "node_modules/bootstrap": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz",
-      "integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==",
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
+      "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
       "funding": [
         {
           "type": "github",
@@ -962,8 +971,7 @@
         }
       ],
       "peerDependencies": {
-        "jquery": "1.9.1 - 3",
-        "popper.js": "^1.16.1"
+        "@popperjs/core": "^2.11.8"
       }
     },
     "node_modules/brace-expansion": {
@@ -1734,11 +1742,6 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "dev": true
     },
-    "node_modules/jquery": {
-      "version": "3.7.1",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
-      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg=="
-    },
     "node_modules/js-yaml": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
@@ -2044,17 +2047,6 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/popper.js": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
-      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
-      "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
-      "peer": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/popperjs"
-      }
-    },
     "node_modules/postcss": {
       "version": "8.4.34",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.34.tgz",
diff --git a/home/package.json b/home/package.json
index c8352f15..68684e59 100644
--- a/home/package.json
+++ b/home/package.json
@@ -12,8 +12,7 @@
   },
   "dependencies": {
     "@gtm-support/vue-gtm": "^2.2.0",
-    "bootstrap": "^4.6.2",
-    "jquery": "^3.7.1",
+    "bootstrap": "^5.3.3",
     "vite-plugin-static-copy": "^1.0.1",
     "vue": "^3.4.15",
     "vue-router": "^4.2.5"
diff --git a/home/src/components/FooterComponent.vue b/home/src/components/FooterComponent.vue
index 9f9a95d6..f1444283 100644
--- a/home/src/components/FooterComponent.vue
+++ b/home/src/components/FooterComponent.vue
@@ -25,15 +25,16 @@
             href="https://www.youtube.com/user/EDMCouncil"
             class="social-icons"
             target="_blank"
-            v-on:click="outboundClick('youtube')"
+            @click="outboundClick('youtube')"
             aria-label="youtube"
-            ><img src="../assets/icons/social-icons-yt.svg" alt="youtube icon"
-          /></a>
+          >
+            <img src="../assets/icons/social-icons-yt.svg" alt="youtube icon" />
+          </a>
           <a
             href="https://twitter.com/edmcouncil"
             class="social-icons"
             target="_blank"
-            v-on:click="outboundClick('twitter')"
+            @click="outboundClick('twitter')"
             aria-label="twitter"
           >
             <img src="../assets/icons/social-icons-twitter.svg" alt="twitter icon" />
@@ -42,7 +43,7 @@
             href="https://www.linkedin.com/company/edm-council/"
             class="social-icons"
             target="_blank"
-            v-on:click="outboundClick('linkedin')"
+            @click="outboundClick('linkedin')"
             aria-label="linkedin"
           >
             <img src="../assets/icons/social-icons-in.svg" alt="linkedin icon" />
diff --git a/home/src/components/HeaderComponent.vue b/home/src/components/HeaderComponent.vue
index ab271557..1be93eaa 100644
--- a/home/src/components/HeaderComponent.vue
+++ b/home/src/components/HeaderComponent.vue
@@ -1,9 +1,9 @@
 <template>
-  <header class="container px-0">
+  <header class="container website-header px-0">
     <div class="container-fluid">
       <div class="row">
         <div class="col px-0">
-          <div class="navigation-container d-block d-lg-block">
+          <div class="navigation-container">
             <nav class="navbar navbar-expand navbar-light">
               <a
                 class="navbar-brand"
@@ -11,10 +11,12 @@
                 target="_blank"
                 aria-label="edmc logo"
               >
-                <img id="logo-fibo" src="@/assets/img/logo.png" alt="edmc logo" />
+                <img id="ontology-logo" src="@/assets/img/logo.png" alt="edmc logo" />
               </a>
 
-              <ul class="navbar-nav ml-auto align-items-center">
+              <ul
+                class="navbar-nav flex-column-reverse flex-lg-row ms-auto align-items-end align-items-lg-center gap-3 gap-lg-0"
+              >
                 <li class="nav-item d-none d-lg-block">
                   <a
                     class="nav-link"
@@ -25,7 +27,7 @@
                   </a>
                 </li>
                 <li class="nav-item d-none d-lg-block">
-                  <a class="nav-link" href="https://edmcouncil.org" target="_blank"> EDMConnect </a>
+                  <a class="nav-link" href="https://edmcouncil.org" target="_blank">EDMConnect</a>
                 </li>
                 <li class="nav-item d-none d-lg-block">
                   <a class="nav-link" href="https://edmcouncil.org" target="_blank">
@@ -35,86 +37,93 @@
 
                 <li class="nav-item dropdown">
                   <a
+                    id="navbarDropdown"
                     class="dropdown-toggle"
                     href="#"
-                    id="navbarDropdown"
                     role="button"
-                    data-toggle="dropdown"
-                    aria-haspopup="true"
+                    data-bs-toggle="dropdown"
                     aria-expanded="false"
                   >
                     <div class="burger-button">
                       <img
                         class="icon-burger"
                         src="@/assets/icons/union-burger.svg"
-                        alt="burger menu"
+                        alt="menu icon"
                       />
                       <h3>MENU</h3>
                     </div>
                   </a>
-                  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
-                    <a
-                      class="nav-link dropdown-item d-lg-none"
-                      href="https://edmcouncil.org/events/event_list.asp"
-                      target="_blank"
-                    >
-                      Calendar
-                    </a>
-
-                    <a
-                      class="nav-link dropdown-item d-lg-none"
-                      href="https://edmcouncil.org/Login.aspx"
-                      target="_blank"
-                    >
-                      EDMConnect
-                    </a>
-
-                    <a
-                      class="nav-link dropdown-item d-lg-none"
-                      href="https://edmcouncil.org/login.aspx"
-                      target="_blank"
-                    >
-                      Sign in / Register
-                    </a>
-
-                    <div class="dropdown-divider d-lg-none"></div>
-
-                    <div
-                      class="nav-link dropdown-item"
-                      @click="navigationHandler('/')"
-                      @keydown.enter="navigationHandler('/')"
-                    >
-                      About OKG
-                    </div>
-                    <a
-                      class="nav-link dropdown-item"
-                      href="https://spec.edmcouncil.org/fibo/"
-                      v-on:click="outboundLinkClick('https://spec.edmcouncil.org/fibo/')"
-                    >
-                      FIBO Home
-                    </a>
-                    <a
-                      class="nav-link dropdown-item"
-                      href="https://spec.edmcouncil.org/auto/"
-                      v-on:click="outboundLinkClick('https://spec.edmcouncil.org/auto/')"
-                    >
-                      AUTO Home
-                    </a>
-                    <a
-                      class="nav-link dropdown-item"
-                      href="https://spec.edmcouncil.org/idmp/"
-                      v-on:click="outboundLinkClick('https://spec.edmcouncil.org/idmp/')"
-                    >
-                      IDMP Home
-                    </a>
-                    <div
-                      class="nav-link dropdown-item"
-                      @click="navigationHandler('contact')"
-                      @keydown.enter="navigationHandler('contact')"
-                    >
-                      Contact Person
-                    </div>
-                  </div>
+                  <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
+                    <li>
+                      <a
+                        class="dropdown-item d-lg-none"
+                        href="https://edmcouncil.org/events/event_list.asp"
+                        target="_blank"
+                      >
+                        Calendar
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        class="dropdown-item d-lg-none"
+                        href="https://edmcouncil.org/Login.aspx"
+                        target="_blank"
+                      >
+                        EDMConnect
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        class="dropdown-item d-lg-none"
+                        href="https://edmcouncil.org/login.aspx"
+                        target="_blank"
+                      >
+                        Sign in / Register
+                      </a>
+                    </li>
+                    <li><hr class="dropdown-divider d-lg-none" /></li>
+                    <li>
+                      <a class="dropdown-item" href="#" @click.prevent="navigationHandler('/')">
+                        About OKG
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        class="dropdown-item"
+                        href="https://spec.edmcouncil.org/fibo/"
+                        @click="outboundLinkClick('https://spec.edmcouncil.org/fibo/')"
+                      >
+                        FIBO Home
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        class="dropdown-item"
+                        href="https://spec.edmcouncil.org/auto/"
+                        @click="outboundLinkClick('https://spec.edmcouncil.org/auto/')"
+                      >
+                        AUTO Home
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        class="dropdown-item"
+                        href="https://spec.edmcouncil.org/idmp/"
+                        @click="outboundLinkClick('https://spec.edmcouncil.org/idmp/')"
+                      >
+                        IDMP Home
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        class="dropdown-item"
+                        href="#"
+                        @click.prevent="navigationHandler('contact')"
+                      >
+                        Contact Person
+                      </a>
+                    </li>
+                  </ul>
                 </li>
               </ul>
             </nav>
@@ -127,18 +136,12 @@
 </template>
 
 <script>
-import $ from 'jquery';
 import SlideCarousel from '@/components/SlideCarousel.vue';
-import { outboundClick } from '../helpers/ga';
+import { outboundLinkClick } from '../helpers/ga';
 
 export default {
   name: 'HeaderComponent',
   components: { SlideCarousel },
-  mounted() {
-    $(document).on('click', '.dropdown-menu .sub-nav-menu', (e) => {
-      e.stopPropagation();
-    });
-  },
   methods: {
     navigationHandler(to) {
       if (this.$route.fullPath !== to && this.$route.fullPath !== `/${to}`) {
@@ -146,274 +149,203 @@ export default {
       }
       this.$emit('navigationEvent', to);
     },
-    outboundClick
+    outboundLinkClick
   }
 };
 </script>
 
 <style lang="scss">
-header {
+header.website-header {
   background: linear-gradient(98.03deg, rgba(255, 255, 255, 0.9) 5.63%, rgba(255, 255, 255, 0) 100%),
     linear-gradient(0deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)),
     url('@/assets/img/header-white.jpg');
   background-size: cover;
   background-position: center;
   padding: 0;
-  min-height: 532px;
-  max-height: 532px;
-
+  min-height: 480px;
   display: flex;
   flex-direction: column;
-}
-.navbar {
-  padding: 0;
-  li {
-    border-bottom: 0;
-    padding: 0;
-    margin-left: 40px;
-    letter-spacing: 0;
-  }
-}
 
-.navigation-container {
-  padding: 40px 60px;
-}
+  .navbar {
+    padding: 0;
+    justify-content: space-between;
 
-// edmc logo
-.navbar-brand {
-  padding: 0;
-  margin: 0;
+    .nav-item {
+      margin-left: 40px;
+    }
 
-  #logo-fibo {
-    width: 140px;
+    li {
+      border-bottom: 0;
+      padding: 0;
+      letter-spacing: 0;
+    }
   }
-}
 
-// menu button
-.dropdown {
-  .burger-button {
-    align-items: center;
-    background-color: map-get($colors-map, 'white');
-    color: map-get($colors-map, 'black-80');
-    border-radius: 2px;
-    box-shadow: 0px 5px 20px #07539526;
-    display: flex;
-    padding: 15px 40px;
+  .navigation-container {
+    padding: 40px 60px;
+  }
 
-    transition: background-color 0.35s ease;
+  .navbar-brand {
+    padding: 0;
+    margin: 0;
 
-    .icon-burger {
-      height: 24px;
-      width: 24px;
-      margin-right: 20px;
+    #ontology-logo {
+      width: 140px;
+      max-height: 60px;
+      object-fit: contain;
+      object-position: left;
     }
   }
 
-  &.show .burger-button {
-    background-color: map-get($colors-map, 'white-60');
-  }
-}
+  .dropdown {
+    .burger-button {
+      align-items: center;
+      background-color: var(--bs-white);
+      color: var(--bs-gray-800);
+      border-radius: 2px;
+      box-shadow: 0px 5px 20px rgba(7, 83, 149, 0.15);
+      display: flex;
+      padding: 15px 40px;
+      transition: background-color 0.35s ease;
 
-.dropdown-menu {
-  user-select: none;
-  pointer-events: none;
+      .icon-burger {
+        height: 24px;
+        width: 24px;
+        margin-right: 20px;
+      }
+    }
 
-  display: block;
-  padding: 0;
-  width: 320px;
-  max-width: calc(100vw - 75px);
-  border: none;
-  background-color: map-get($colors-map, 'white');
-  box-shadow: 0px 5px 20px -5px rgba(8, 84, 150, 0.15);
-  border-radius: 0;
-
-  margin-top: 5px;
-  opacity: 0;
-
-  transition:
-    opacity 0.35s ease,
-    margin-top 0.35s ease;
-
-  &.show {
-    user-select: unset;
-    pointer-events: unset;
-
-    margin-top: 15px;
-    opacity: 1;
+    & .show .burger-button {
+      background-color: rgba(255, 255, 255, 0.6);
+    }
   }
-}
 
-.dropdown-toggle {
-  &:hover {
-    text-decoration: none;
-  }
+  .dropdown-menu {
+    user-select: none;
+    pointer-events: none;
 
-  &::after {
-    display: none;
-  }
-}
+    display: block;
+    padding: 0;
+    width: 320px;
+    max-width: calc(100vw - 75px);
+    border: none;
+    background-color: map-get($colors-map, 'white');
+    box-shadow: 0px 5px 20px -5px rgba(8, 84, 150, 0.15);
+    border-radius: 0;
+    right: 0;
+    left: auto;
 
-// nav items - title list
-.navbar-expand .navbar-nav .nav-link {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  font-size: 18px;
-  line-height: 30px;
+    margin-top: 5px;
+    opacity: 0;
 
-  padding: 0;
+    transition:
+      opacity 0.35s ease,
+      margin-top 0.35s ease;
 
-  color: map-get($colors-map, 'black');
+    &.show {
+      user-select: unset;
+      pointer-events: unset;
 
-  &:hover {
-    cursor: pointer;
-    user-select: none;
-    color: map-get($colors-map, 'black-60');
+      margin-top: 15px;
+      opacity: 1;
+    }
   }
-}
 
-// nav items inside menu
-.navbar-light .navbar-nav .dropdown-menu > .nav-link {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 700;
-  font-size: 18px;
-  line-height: 30px;
+  .dropdown-toggle {
+    text-decoration: none;
 
-  color: map-get($colors-map, 'black-80');
+    &::after {
+      display: none;
+    }
+  }
 
-  margin: 0;
-  padding: 15px 40px;
+  .navbar-nav .nav-link {
+    font-family: 'Inter', sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 30px;
+    padding: 0;
+    color: var(--bs-black);
 
-  &:hover {
-    color: map-get($colors-map, 'black-80');
-    background-color: map-get($colors-map, 'black-5');
-  }
-  &:focus {
-    color: map-get($colors-map, 'black-80');
-    background-color: unset;
-  }
-  &:active {
-    color: map-get($colors-map, 'black-80');
-    background-color: map-get($colors-map, 'black-20');
+    &:hover {
+      color: rgba(0, 0, 0, 0.6);
+    }
   }
 
-  // sub items collapse (category title)
-  &.sub-nav-menu {
-    background-color: transparent;
-    position: relative;
+  .navbar-nav .dropdown-menu .dropdown-item {
+    font-family: 'Inter', sans-serif;
+    font-style: normal;
+    font-weight: 700;
+    font-size: 18px;
+    line-height: 30px;
+    color: var(--bs-gray-800);
+    margin: 0;
+    padding: 15px 40px;
 
-    &::after {
-      content: '';
-      background-image: url('@/assets/icons/triangle-down.svg');
-      background-size: 24px;
-      background-position: center;
-      width: 24px;
-      height: 24px;
-      position: absolute;
-
-      right: 40px;
-      top: 18px;
-      transition: transform 0.35s ease;
+    &:hover {
+      color: var(--bs-gray-800);
+      background-color: rgba(0, 0, 0, 0.05);
     }
-
-    &.collapsed {
-      &::after {
-        transform: rotate(90deg);
-      }
+    &:focus {
+      color: var(--bs-gray-800);
+      background-color: transparent;
+    }
+    &:active {
+      color: var(--bs-gray-800);
+      background-color: rgba(0, 0, 0, 0.2);
     }
   }
-}
-.dropdown-divider {
-  border-top: 1px solid map-get($colors-map, 'black-5');
-}
-
-// nav items inside menu - sub items
-.navbar-expand .navbar-nav .nav-link.sub-nav-item {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 700;
-  font-size: 18px;
-  line-height: 30px;
 
-  color: map-get($colors-map, 'black-80');
-
-  margin: 0;
-  padding: 15px 40px 15px 60px;
-
-  &:hover {
-    background-color: map-get($colors-map, 'black-5');
-  }
-  &:focus {
-    background-color: unset;
-  }
-  &:active {
-    background-color: map-get($colors-map, 'black-20');
+  .dropdown-divider {
+    border-top: 1px solid rgba(0, 0, 0, 0.05);
   }
 }
 
-@media (max-width: 350px) {
-  .dropdown {
-    .burger-button {
-      .icon-burger {
-        margin: 0;
-      }
-      h3 {
-        display: none;
-      }
-    }
+@media (max-width: 430px) {
+  header.website-header {
+    min-height: 520px;
   }
-}
 
-@media (max-width: 1024px) {
-  .navbar li {
-    margin-left: 30px;
+  header.website-header .dropdown .burger-button {
+    .icon-burger {
+      margin: 0;
+    }
+    h3 {
+      display: none;
+    }
   }
 }
 
 @media (max-width: 991px) {
-  .navbar-brand {
-    #logo-fibo {
-      width: 105px;
-    }
+  header.website-header .navbar-brand #ontology-logo {
+    width: 105px;
   }
 
-  .navbar li {
-    margin-left: 0px;
+  .navbar-nav {
+    flex-direction: column-reverse;
   }
-  .dropdown {
-    .burger-button {
-      padding: 15px 30px;
-    }
+
+  header.website-header .dropdown .burger-button {
+    padding: 15px 30px;
   }
-  .navbar-light .navbar-nav .dropdown-menu > .nav-link,
-  .navbar-expand .navbar-nav .nav-link.sub-nav-item {
+
+  header.website-header .navbar-nav .dropdown-menu .dropdown-item {
     padding: 10px 30px;
-    font-weight: 700;
     font-size: 16px;
     line-height: 24px;
     letter-spacing: 0.02em;
     white-space: normal;
   }
 
-  .navbar-expand .navbar-nav .nav-link.sub-nav-item {
-    padding: 10px 30px 10px 45px;
-  }
-
-  .navbar-light .navbar-nav .dropdown-menu > .nav-link.sub-nav-menu::after {
-    top: 9px;
-    right: 30px;
-  }
-
-  .navigation-container {
-    padding: 20px 30px;
+  header.website-header .navigation-container {
+    padding: 20px 30px 60px 30px;
   }
 }
 
 @media (max-width: 992px) and (min-width: 700px) {
-  header {
+  header.website-header {
     min-height: 400px;
-    max-height: 400px;
   }
 }
 </style>
diff --git a/home/src/components/SlideCarousel.vue b/home/src/components/SlideCarousel.vue
index 6189a3e4..2ea034d6 100644
--- a/home/src/components/SlideCarousel.vue
+++ b/home/src/components/SlideCarousel.vue
@@ -1,109 +1,39 @@
 <template>
-  <div class="container-fluid carousel-container d-flex flex-column">
+  <div class="carousel-container">
     <div
       id="carouselController"
-      class="carousel slide row justify-content-center flex-grow-1"
-      data-ride="carousel"
-      data-interval="10000"
+      ref="carouselElement"
+      class="carousel slide"
+      data-bs-ride="carousel"
+      data-bs-interval="10000"
     >
-      <div class="carousel-inner col-lg-10">
-        <div class="carousel-item active">
-          <span class="text-display">Open Knowledge Graph Lab</span>
-          <h2>We deliver Graph Powered Agile Intelligence</h2>
-
-          <a
-            href="https://edmconnect.edmcouncil.org/okginterestcommunity/okg-shared-lab"
-            v-on:click="
-              outboundLinkClick(
-                'https://edmconnect.edmcouncil.org/okginterestcommunity/okg-shared-lab'
-              )
-            "
-          >
-            OKGSL mission
-          </a>
-        </div>
-        <div class="carousel-item">
-          <span class="text-display">Open Knowledge Graph Training</span>
-          <h2>EDMC offers courses in Knowledge Graph and FIBO, available in multiple forms.</h2>
-
-          <a
-            href="https://edmconnect.edmcouncil.org/okginterestcommunity/okg-training/okg-training-events"
-            v-on:click="
-              outboundLinkClick(
-                'https://edmconnect.edmcouncil.org/okginterestcommunity/okg-training/okg-training-events'
-              )
-            "
-          >
-            CHECK AND REGISTER
-          </a>
-        </div>
-        <div class="carousel-item">
-          <span class="text-display">FIBO</span>
-          <h2>
-            The Financial Industry Business Ontology (FIBO) defines the sets of things that are of
-            interest in financial business applications and the ways that those things can relate to
-            one another.
-          </h2>
-
-          <a
-            href="https://spec.edmcouncil.org/fibo/"
-            v-on:click="outboundLinkClick('https://spec.edmcouncil.org/fibo/')"
-          >
-            Official FIBO website
-          </a>
-        </div>
-        <div class="carousel-item">
-          <span class="text-display">AUTO</span>
-          <h2>
-            The Automotive Ontology (AUTO) defines the shared conceptual structures in the
-            automotive industry.
-          </h2>
-
-          <a
-            href="https://spec.edmcouncil.org/auto/"
-            v-on:click="outboundLinkClick('https://spec.edmcouncil.org/auto/')"
-          >
-            Official AUTO website
-          </a>
-        </div>
-        <div class="carousel-item">
-          <span class="text-display">IDMP</span>
-          <h2>
-            The Identification of Medicinal Products Ontology (IDMP) aims to demonstrates added
-            value to the ISO IDMP standards for data usability across organizational boundaries and
-            regulatory jurisdictions.
-          </h2>
-
-          <a
-            href="https://spec.edmcouncil.org/idmp/"
-            v-on:click="outboundLinkClick('https://spec.edmcouncil.org/idmp/')"
-          >
-            Official IDMP website
+      <div class="carousel-inner">
+        <div
+          v-for="(item, index) in carouselItems"
+          :key="item.id"
+          :class="{ active: index === 0 }"
+          class="carousel-item"
+          data-bs-interval="8000"
+        >
+          <span class="text-display">{{ item.title }}</span>
+          <h2>{{ item.text }}</h2>
+          <a :href="item.link.url" @click="outboundLinkClick(item.link.url)">
+            {{ item.link.name }}
           </a>
         </div>
       </div>
-      <div class="carousel-controls-container col-lg-2">
+      <div class="carousel-controls-container">
         <div class="controls">
-          <div
-            class="controls__chevron controls__chevron--prev"
-            data-target="#carouselController"
-            role="button"
-            data-slide="prev"
-          >
+          <div class="controls__chevron controls__chevron--prev" role="button" @click="prevSlide()">
             <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-            <span class="sr-only">Previous</span>
+            <span class="visually-hidden-focusable">Previous</span>
           </div>
           <div class="controls__text">
             <p>{{ currentSlide }} of {{ slideCount }}</p>
           </div>
-          <div
-            class="controls__chevron controls__chevron--next"
-            data-target="#carouselController"
-            role="button"
-            data-slide="next"
-          >
+          <div class="controls__chevron controls__chevron--next" role="button" @click="nextSlide()">
             <span class="carousel-control-next-icon" aria-hidden="true"></span>
-            <span class="sr-only">Next</span>
+            <span class="visually-hidden-focusable">Next</span>
           </div>
         </div>
       </div>
@@ -112,19 +42,98 @@
 </template>
 
 <script>
-import $ from 'jquery';
+import { ref, onMounted, onUnmounted } from 'vue';
+import { Carousel } from 'bootstrap';
 
 export default {
   name: 'SlideCarousel',
-  mounted() {
-    $('#carouselController').on('slide.bs.carousel', (e) => {
-      this.currentSlide = e.to + 1;
+  setup() {
+    const carouselElement = ref(null);
+    const carousel = ref(null);
+    const currentSlide = ref(1);
+    const carouselItems = [
+      {
+        id: 1,
+        title: 'Open Knowledge Graph Lab',
+        text: 'We deliver Graph Powered Agile Intelligence',
+        link: {
+          url: 'https://edmconnect.edmcouncil.org/okginterestcommunity/okg-shared-lab',
+          name: 'OKGSL mission'
+        }
+      },
+      {
+        id: 2,
+        title: 'Open Knowledge Graph Training',
+        text: 'EDMC offers courses in Knowledge Graph and FIBO, available in multiple forms.',
+        link: {
+          url: 'https://edmconnect.edmcouncil.org/okginterestcommunity/okg-training/okg-training-events',
+          name: 'CHECK AND REGISTER'
+        }
+      },
+      {
+        id: 3,
+        title: 'FIBO',
+        text: 'The Financial Industry Business Ontology (FIBO) defines the sets of things that are of interest in financial business applications and the ways that those things can relate to one another.',
+        link: {
+          url: 'https://spec.edmcouncil.org/fibo/',
+          name: 'Official FIBO website'
+        }
+      },
+      {
+        id: 4,
+        title: 'AUTO',
+        text: 'The Automotive Ontology (AUTO) defines the shared conceptual structures in the automotive industry.',
+        link: {
+          url: 'https://spec.edmcouncil.org/auto/',
+          name: 'Official AUTO website'
+        }
+      },
+      {
+        id: 5,
+        title: 'IDMP',
+        text: 'The Identification of Medicinal Products Ontology (IDMP) aims to demonstrates added value to the ISO IDMP standards for data usability across organizational boundaries and regulatory jurisdictions.',
+        link: {
+          url: 'https://spec.edmcouncil.org/idmp/',
+          name: 'Official IDMP website'
+        }
+      }
+    ];
+
+    const slideCount = carouselItems.length;
+
+    const prevSlide = () => {
+      carousel.value?.prev();
+    };
+
+    const nextSlide = () => {
+      carousel.value?.next();
+    };
+
+    onMounted(() => {
+      if (carouselElement.value) {
+        carousel.value = new Carousel(carouselElement.value);
+
+        carouselElement.value.addEventListener('slide.bs.carousel', (event) => {
+          currentSlide.value = event.to + 1;
+        });
+      } else {
+        console.error('Carousel element not found');
+      }
     });
-  },
-  data() {
+
+    onUnmounted(() => {
+      if (carouselElement.value) {
+        carouselElement.value.removeEventListener('slide.bs.carousel', () => {});
+      }
+    });
+
     return {
-      currentSlide: 1,
-      slideCount: 5
+      carouselElement,
+      currentSlide,
+      carouselItems,
+      slideCount,
+      prevSlide,
+      nextSlide
     };
   }
 };
@@ -133,18 +142,36 @@ export default {
 <style lang="scss" scoped>
 .carousel-container {
   flex: 1;
-  padding: 30px 60px 60px 60px;
+  padding: 0px 60px 60px 60px;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  min-height: 340px;
+  max-height: 340px;
+
+  #carouselController {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
 
   .carousel-inner {
     overflow: visible;
-    max-height: 260px;
+    flex: 1;
+    display: flex;
+    align-items: center;
   }
 }
 
 .carousel-controls-container {
   display: flex;
+  position: absolute;
   flex-direction: column-reverse;
+  bottom: 0;
+  right: 0;
+  padding: 0;
+  z-index: 11;
 
   .controls {
     display: flex;
@@ -190,83 +217,88 @@ export default {
 }
 
 .carousel-item {
+  padding: 0;
+  margin: 0;
+  position: absolute;
+
   span.text-display {
     display: inline-block;
+    color: var(--bs-black);
   }
   h2 {
     margin: 40px 0;
-    color: map-get($colors-map, 'black-80');
+    color: var(--bs-gray-800);
   }
   a {
-    font-family: 'Inter';
+    font-family: 'Inter', sans-serif;
     font-style: normal;
     font-weight: 700;
     font-size: 20px;
     line-height: 24px;
-
     display: inline-block;
-
     letter-spacing: 0.02em;
     text-decoration-line: underline;
-
-    color: map-get($colors-map, 'black');
+    color: var(--bs-black);
 
     &:hover {
-      color: map-get($colors-map, 'black-60');
+      color: rgba(0, 0, 0, 0.6);
     }
   }
-  // transition
   &.active {
     opacity: 1;
     transition:
-      transform 1s ease-out,
-      opacity 1s ease;
+      transform 1s ease-out 0.2s,
+      opacity 0.5s ease-out 0.2s;
   }
-  // entering slide
+
   &.carousel-item-next {
-    opacity: 0;
+    opacity: 1;
     transition:
-      transform 1s ease-out,
-      opacity 1s ease;
+      transform 1.2s ease-out,
+      opacity 1s ease-out 0.6s;
   }
   &.carousel-item-prev {
-    opacity: 0;
+    opacity: 1;
     transition:
-      transform 1s ease-out,
-      opacity 1s ease;
-  }
-  &.active.carousel-item-right,
-  &.carousel-item-next:not(.carousel-item-left) {
-    transform: translateX(120px);
+      transform 1.2s ease-out,
+      opacity 1s ease-out 0.6s;
   }
-  &.active.carousel-item-left,
-  &.carousel-item-prev:not(.carousel-item-right) {
-    transform: translateX(-70px);
-  }
-  // leaving slide
+
   &.active.carousel-item-left {
     opacity: 0;
     transition:
       transform 1s ease-in,
-      opacity 0.5s ease-out;
+      opacity 0.3s ease-out;
   }
   &.active.carousel-item-right {
     opacity: 0;
     transition:
       transform 1s ease-in,
-      opacity 0.5s ease-out;
+      opacity 0.3s ease-out;
+  }
+
+  &.carousel-item-next:not(.carousel-item-start),
+  &.active.carousel-item-end {
+    opacity: 0;
+    transform: translateX(120px);
+  }
+
+  &.carousel-item-prev:not(.carousel-item-end),
+  &.active.carousel-item-start {
+    opacity: 0;
+    transform: translateX(-80px);
   }
 }
 
 @media (max-width: 992px) {
   .carousel-container {
-    padding: 30px;
+    padding: 0px 30px 30px 30px;
   }
 
   .carousel-item {
     h2 {
-      margin: 32px 0;
-      color: map-get($colors-map, 'black-60');
+      margin: 30px 0;
+      color: var(--bs-gray-600);
     }
     a {
       font-size: 18px;
@@ -288,6 +320,10 @@ export default {
 }
 
 @media (max-width: 350px) {
+  .carousel-container {
+    min-height: 380px;
+    max-height: 380px;
+  }
   .carousel-item {
     .text-display {
       font-size: 30px;
@@ -297,7 +333,7 @@ export default {
       font-size: 16px;
       line-height: 24px;
       margin: 15px 0;
-      color: map-get($colors-map, 'black-60');
+      color: var(--bs-gray-600);
     }
     a {
       font-size: 16px;
@@ -305,4 +341,34 @@ export default {
     }
   }
 }
+
+@media (max-width: 991px) {
+  .carousel-container {
+    min-height: 380px;
+    max-height: 380px;
+  }
+  .carousel-container .carousel-inner {
+    display: flex;
+    align-items: flex-start;
+  }
+}
+
+@media (max-width: 992px) and (min-width: 700px) {
+  .carousel-container {
+    min-height: 260px;
+    max-height: 260px;
+  }
+}
+
+@media (min-width: 1439px) {
+  .carousel-item {
+    width: calc(100% - 320px);
+  }
+}
+
+@media (min-width: 1800px) {
+  .carousel-item {
+    width: 70%;
+  }
+}
 </style>
diff --git a/home/src/main.js b/home/src/main.js
index 1a5358d7..376492fb 100644
--- a/home/src/main.js
+++ b/home/src/main.js
@@ -20,8 +20,8 @@ app.use(
     enabled: true,
     debug: false,
     loadScript: true,
-    vueRouter: router,
-  }),
+    vueRouter: router
+  })
 );
 
 app.mount('#app');
diff --git a/home/src/styles/global.scss b/home/src/styles/global.scss
index 3a5cfcb3..7ebdaf8f 100644
--- a/home/src/styles/global.scss
+++ b/home/src/styles/global.scss
@@ -27,6 +27,23 @@ $normal-button-disabled-bg: rgba(0, 0, 0, 0.4);
   font-family: Inter;
 }
 
+@media (min-width: 991px) {
+  // scrollbar
+
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: map-get($colors-map, 'black-40');
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: map-get($colors-map, 'black-80');
+  }
+}
+
 // Common elements
 
 .custom-switch {