diff --git a/groups/home/bootstrap3/Vue3-v.7-css.html b/groups/home/bootstrap3/Vue3-v.7-css.html
new file mode 100644
index 0000000..a7c525c
--- /dev/null
+++ b/groups/home/bootstrap3/Vue3-v.7-css.html
@@ -0,0 +1,645 @@
+<style>
+  :root {
+    --kbccblue: #003466;
+    --kbccorange: #ff4e00;
+    --text: #111;
+  }
+
+  body {
+    color: var(--text);
+    overflow-x: hidden;
+  }
+
+  a,
+  a:hover {
+    text-decoration: none;
+  }
+
+  /* Skip link styles (WCAG 2.4.1) */
+  .skip-link {
+    position: absolute;
+    top: -40px;
+    left: 0;
+    background: var(--kbccblue);
+    color: #fff;
+    padding: 8px 16px;
+    z-index: 10000;
+    text-decoration: none;
+    font-weight: bold;
+  }
+  .skip-link:focus {
+    top: 0;
+    outline: 3px solid var(--kbccorange);
+    outline-offset: 2px;
+  }
+
+  /* Screen reader only class for visually hidden content */
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* style slide out chat */
+  #lcs_slide_out_button-21944 {
+    font-size: 1.5em;
+  }
+
+  /* style header */
+  #header-div {
+    padding: 30px;
+  }
+
+  /* style the hamburger menu */
+  #hamburger-container {
+    float: left;
+  }
+  #hamburger,
+  #hamburger:active {
+    border: none;
+    outline: none;
+    background-color: #fff;
+    color: var(--kbccblue);
+  }
+  #hamburger-ul > li > .searchmenu {
+    background-color: #fff;
+  }
+  #hamburger-ul {
+    padding: 25px 0;
+  }
+
+  /* have bootstrap dropdowns fade in and out */
+  .dropdown-menu.fade {
+    display: block;
+    opacity: 0;
+    pointer-events: none;
+  }
+  .open > .dropdown-menu.fade {
+    pointer-events: auto;
+    opacity: 1;
+  }
+  .fade {
+    -webkit-transition-duration: 5s; /* Safari */
+    transition-duration: 0.5s;
+  }
+  /* Show dropdown on hover AND keyboard focus (WCAG 2.1.1) */
+  .dropdown:hover .dropdown-menu,
+  .dropdown:focus-within .dropdown-menu {
+    display: block;
+  }
+
+  /* Navigation dropdown keyboard support (WCAG 2.1.1) */
+  .main-nav-dropdown:focus-within > .dropdown-menu.fade {
+    pointer-events: auto;
+    opacity: 1;
+  }
+
+  /* style the login at the top right */
+  #login-div {
+    float: right;
+    padding: 8px 15px 0 0;
+    color: var(--kbccblue);
+    font-size: 1.5em;
+  }
+  #login-text {
+    display: inline-block;
+    vertical-align: -2px;
+  }
+  #login-icon {
+    display: inline-block;
+    margin-left: 5px;
+  }
+
+  /* Accessible focus indicators for primary navigation elements */
+  #hamburger:focus,
+  #hamburger:focus-visible,
+  #login-div:focus,
+  #login-div:focus-visible,
+  .searchmenu:focus,
+  .searchmenu:focus-visible,
+  .nav-jumbotron-link:focus,
+  .nav-jumbotron-link:focus-visible,
+  .ga-by-jumbotron:focus,
+  .ga-by-jumbotron:focus-visible,
+  .ga-library-links:focus,
+  .ga-library-links:focus-visible,
+  /* OneSearch widget (central search form) */
+  .onesearch-jumbotron input:focus,
+  .onesearch-jumbotron input:focus-visible,
+  .onesearch-jumbotron button:focus,
+  .onesearch-jumbotron button:focus-visible,
+  /* Navigation dropdown toggles */
+  .dropdown-toggle:focus,
+  .dropdown-toggle:focus-visible {
+    outline: 3px solid #0056b3; /* high-contrast blue */
+    outline-offset: 2px;
+  }
+
+  /* style alert */
+  #hours-content-container {    /* this id comes from the components libguide */
+    background-color: var(--kbccblue);
+    color: #fff;
+    text-align: center;
+    font-size: 1.5em;
+    padding: 4px;
+    margin: -10px -11px -30px -11px;
+    border-radius: 3px;
+  }
+  #hours-content-container > a {
+    color: #fff
+  }
+
+  /* style navbar */
+  nav.navbar-default.main-nav-container {
+    background-color: white;
+    border: none;
+    font-size: 1.4em;
+    color: var(--text);
+    border-radius: 0;
+  }
+  .nav .open > a,
+  .nav .open > a:focus,
+  .nav .open > a:hover {
+    background-color: #fff;
+  }
+  .nav > li > a:hover {
+    outline: none;
+  }
+  .navbar-default .navbar-nav > li > a {
+    color: var(--text);
+  }
+  #navbar-center {
+    display: flex;
+    justify-content: left;
+    float: none;
+  }
+  .ga-main-navbar {
+    font-size: 1.3em;
+  }
+  #dropdownMenu1 {
+    border-radius: 0;
+  }
+  a.searchmenu {
+    color: var(--text);
+  }
+  .highlight-menu-item {
+    padding: 5px;
+  }
+  .highlight-menu-item:hover {
+    cursor: pointer;
+  }
+
+  /* style background image */
+  .kbcc-background-image {
+    background: linear-gradient(
+        to bottom,
+        rgba(255, 255, 255, 0.6) 0%,
+        rgba(255, 255, 255, 0.6) 100%
+      ),
+      url("https://libapps.s3.amazonaws.com/accounts/16298/images/library_front_view.jpg");
+    background-position: 50% 71%;
+    padding: 20px 0;
+    border-radius: 5px;
+    background-size: cover;
+    margin: -30px 0 30px 0;
+  }
+
+  /* style jumbotron */
+  .onesearch-jumbotron {
+    text-align: center;
+    margin-top: -40px;
+  }
+  #app2 {
+    margin: auto;
+    width: 80%;
+  }
+  #onesearch-header {
+    font-size: 10em;
+    margin-bottom: 0;
+  }
+  .form-width {
+    width: 100%;
+  }
+  .zero-margin {
+    margin: -2px;
+  }
+  #radios {
+    float: left;
+  }
+  .radiocontainer {
+     margin-left: 10px;
+  }
+  .radiocontainer {
+    display: inline-block;
+  }
+  #booksradio, #articlesradio, #everythingradio {
+    margin-right: 3px;
+  }
+  #advanced {
+    float: right;
+    margin-top: 10px;
+  }
+  #advanced > strong > a {
+    color: black;
+  }
+  /* add flex so that blue box-shadows line up */
+  #flex-search-form {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+  }
+  .inherit-height-from-flex {
+    height: inherit;
+  }
+
+  /* shadow for the search bar */
+  #blue-border2 {
+    box-shadow: 0 5px 0 var(--kbccblue), 0 -5px 0 var(--kbccblue),
+      -5px -5px 0 var(--kbccblue), -5px 5px 0 var(--kbccblue);
+  }
+  /*#blue-border2 {
+    box-shadow: 0 -5px 0 var(--kbccblue), 0 5px 0 var(--kbccblue);
+  }*/
+  #blue-border3 {
+    box-shadow: 0 5px 0 var(--kbccblue), 0 -5px 0 var(--kbccblue),
+      5px -5px 0 var(--kbccblue), 5px 5px 0 var(--kbccblue);
+  }
+
+  /* style for nav by the jumbotron */
+	.kbcc-background-image > .col-sm-4 {
+		margin-top: 10px;
+	}
+  .nav-divs-by-jumbotron {
+    text-align: center;
+    padding: 6px;
+    margin: 6px 0;
+    color: white;
+    background-color: var(--kbccblue);
+    border-radius: 3px;
+  }
+  .nav-divs-by-jumbotron > h2 {
+    font-size: 1.5em;
+    margin-bottom: 4px;
+    margin-top: 4px;
+  }
+  .nav-divs-by-jumbotron:hover {
+    background-color: #444;
+  }
+  #eq_32886 {
+    background-color: var(--kbccblue);
+    border: none;
+  }
+  .nav-divs-by-jumbotron:hover > h2 > #eq_32886,
+  #eq_32886:hover {
+    background-color: #444;
+  }
+  #bookastudyroom {
+    cursor: pointer;
+  }
+
+  /* Ensure nav-jumbotron buttons match link width */
+  .nav-jumbotron-link.btn-link {
+    display: block;
+    width: 100%;
+    padding: 0;        /* remove default Bootstrap padding */
+    border: none;      /* ensure no extra border height */
+    background: none;  /* keep background controlled by inner div */
+  }
+
+  /* Remove default heading margin for uniform button height */
+  #bookastudyroom-heading {
+    margin: 0px;
+  }
+
+  /* style link list */
+  .link-list {
+    font-size: 1.7em;
+  }
+
+  /* External link icon styling (WCAG 2.4.4) */
+  .external-link-icon {
+    font-size: 0.7em;
+    margin-left: 4px;
+    vertical-align: middle;
+  }
+
+  /* style the panels with the text content */
+  .panel > .show-panel {
+    background-color: var(--kbccblue);
+    text-align: center;
+  }
+  .hide-body-border {
+    border: none;
+    box-shadow: none;
+  }
+  .glyphicon-panel-title {
+    font-size: 2em;
+  }
+  .content-panel-title {
+    color: white;
+    font-size: 2em;
+  }
+  .content-panel-title > h2 {
+    margin: 7px 0;
+    font-size: 1em;
+  }
+  .panel-heading {
+    padding: 2px;
+  }
+
+  /* style the gallery */
+  .slick-slide img {
+    padding: 2px;
+    max-height: 350px !important;
+    object-fit: contain;
+    margin: 0;
+  }
+  .s-lib-public-side-header {
+    display: none;
+  }
+  .slick-active {
+    outline: 0;
+  }
+
+  /* make the slick arrows bigger; adjust margin and padding around big arrows */
+  .slick-prev:before, .slick-next:before {
+    font-size: 40px !important;
+  }
+  .slick-prev:before {
+    margin-left: -30px;
+  }
+  button.slick-next.slick-arrow, button.slick-prev.slick-arrow {
+    height: 40px !important;
+    width: 40px !important;
+  }
+  button.slick-next.slick-arrow {
+    padding-top: 3px;
+  }
+  button.slick-prev.slick-arrow {
+    padding: 3px;
+    padding-left: 30px;
+  }
+
+  /* style to make all imported boxes floating */
+  .s-lib-box-title {
+    display: none;
+  }
+  .s-lg-box {
+    box-shadow: none !important;
+  }
+  .s-lib-box .s-lib-box-title {
+    display: none;
+  }
+  .s-lib-box {
+    box-shadow: none !important;
+    border: 0 !important;
+  }
+
+  /* style the dropdown menus */
+  .dropdown-margin {
+    padding: 20px 0;
+  }
+  .bigger-fancy-text {
+    font-size: 1.2em;
+    padding: 5px;
+  }
+  .bigger-icon {
+    font-size: 1.5em;
+    margin-right: 8px;
+  }
+  .caret-text {
+    display: inline-block;
+    color: var(--kbccblue);
+    font-weight: bold;
+  }
+  .fancy-caret {
+    display: inline-block;
+    margin-left: 8px;
+    color: var(--kbccorange);
+  }
+  .open > a > .fancy-caret {
+    margin-bottom: -4px;
+    vertical-align: -4px;
+    display: inline-block;
+  }
+  .open > a > .caret-text {
+    vertical-align: -1px;
+  }
+
+  /* style footer */
+  #orange-line {
+    height: 10px;
+    background-color: var(--kbccorange);
+  }
+  #main-blue-footer {
+    background-color: var(--kbccblue);
+    color: white;
+    padding: 30px;
+  }
+  .whiteahrefs a:link,
+  .whiteahrefs a:hover,
+  .whiteahrefs a:visited,
+  .whiteahrefs a:active {
+    color: white;
+  }
+  .whiteahrefs a i {
+    margin: 4px 5px 0 0;
+    font-size: 1.5em;
+  }
+  .whiteahrefs {
+    margin-top: 10px;
+  }
+  #lighthouse-logo > a > img {
+    max-width: 150px;
+  }
+
+  /* media queries */
+
+  @media only screen and (min-width: 1px) {
+    #library-logo {
+      max-width: 100%;
+      max-height: 150px;
+    }
+    nav.navbar-default.main-nav-container {
+      margin-top: -20px;
+    }
+    .nav-by-jumbotron {
+      margin-top: 40px !important;
+    }
+    #main-blue-footer {
+      min-height: 450px;
+    }
+    .library-address {
+      float: left;
+    }
+    #cuny-logo {
+      float: left;
+      clear: both;
+      margin-top: 10px;
+    }
+    .libapps {
+      float: left;
+      clear: left;
+    }
+  }
+
+  @media only screen and (max-width: 472px) {
+    #app2 { margin-bottom: 65px; }
+    #radios > label, #radios > div > label { margin-bottom: -5px; }
+  }
+
+  @media only screen and (max-width: 360px) {
+    #app2 { margin-bottom: 85px; }
+  }
+
+  @media only screen and (max-width: 992px) {
+    #advanced {
+      display: none;
+    }
+  }
+
+  @media only screen and (max-width: 768px) {
+    #login-text {
+      display: none;
+    }
+    #radios, #advanced {
+      margin-top: -8px;
+      margin-bottom: 50px;
+   }
+    #defineYourSearch {
+      display: none;
+    }
+  }
+
+  @media only screen and (min-width: 768px) {
+    #radios {
+      margin-top: 8px;
+    }
+    .nav-by-jumbotron {
+      margin-top: 0 !important;
+    }
+    #lighthouse-logo {
+      display: inline-block;
+      float: left;
+    }
+    #main-blue-footer {
+      min-height: 210px;
+    }
+    .library-address {
+      display: inline-block;
+      margin: -10px 30px;
+      font-size: 1.1em;
+    }
+    #cuny-logo {
+      float: right;
+      clear: none;
+      margin: -10px 0;
+    }
+    .libapps {
+      float: right;
+      clear: both;
+    }
+    .libapps.whiteahrefs {
+      margin-top: -10px;
+    }
+  }
+
+  @media only screen and (min-width: 1px) and (max-width: 992px) {
+    #hamburger-alternative {
+      display: none;
+    }
+  }
+
+  @media only screen and (min-width: 992px) {
+    #header-div {
+      text-align: center;
+    }
+    #hamburger,
+    #hamburger-ul {
+      display: none;
+    }
+    #library-logo {
+      max-width: 100%;
+      max-height: 350px;
+    }
+  }
+
+  @media only screen and (min-width: 1200px) {
+    #library-logo {
+      margin-top: -3px;
+    }
+  }
+</style>
+
+<!-- scripts to make the Book a Study Room widget run -->
+<script src="https://kbcc-cuny.libcal.com/js/equipment.min.js"></script>
+<script>
+  jQuery(function () {
+    jQuery("#eq_32886, #bookastudyroom").LibCalEquipmentBooking({
+      iid: 5570,
+      gid: 32886,
+      eid: 0,
+      width: 560,
+      height: 680,
+    });
+  });
+</script>
+
+<!-- If browser is pre-ES6, show a warning-->
+<script>
+  window.isES6 = false;
+</script>
+<script>
+  <!-- test ES6 functionality -->
+  // Arrow functions support
+  () => {};
+
+  // Class support
+  class __ES6FeatureDetectionTest {}
+
+  // Object initializer property and method shorthands
+  let es6a = true;
+  let es6b = {
+    es6a,
+    es6c() {
+      return true;
+    },
+    es6d: [1, 2, 3],
+  };
+
+  // Object destructuring
+  let { es6c, es6d } = es6b;
+
+  // Spread operator
+  let es6e = [...es6d, 4];
+
+  // ternary operator
+  let es6f = es6a ? "ternary" : "no ternary";
+
+  // nullish coalescing
+  es6a ??= 10;
+
+  window.isES6 = true;
+</script>
+
+<script type="text/javascript">
+  window.onload = function () {
+    <!-- display the error message if feature detection flags old browser -->
+    if (window.isES6 == false) {
+      document.getElementById("obsolete_browser_alert").innerHTML =
+        '<div class="alert alert-danger" role="alert" style="text-align: center;"><strong>WARNING! Unsupported browser!</strong><br />It looks like you\'re using an old browser.<br />This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge.<br />If you continue with this browser, many parts of this site will not work and you will see unexpected results.</div>';
+    }
+  };
+</script>
+
+<!-- FontAwesome -->
+<script
+  src="https://kit.fontawesome.com/4c28f38a07.js"
+  crossorigin="anonymous"
+></script>
diff --git a/groups/home/bootstrap3/Vue3-v.7.html b/groups/home/bootstrap3/Vue3-v.7.html
new file mode 100644
index 0000000..68c6f2f
--- /dev/null
+++ b/groups/home/bootstrap3/Vue3-v.7.html
@@ -0,0 +1,374 @@
+<body class="s-lib-public-body">
+  <!-- Google Tag Manager (noscript) -->
+  <noscript>
+    <iframe
+      src="https://www.googletagmanager.com/ns.html?id=GTM-NXHWQX3"
+      height="0"
+      width="0"
+      style="display: none; visibility: hidden"
+    ></iframe>
+  </noscript>
+  <!-- End Google Tag Manager (noscript) -->
+
+  <!-- Skip Navigation Link (WCAG 2.4.1) -->
+  <a href="#main-content" class="skip-link">Skip to main content</a>
+
+  <!-- BEGIN: content -->
+  <div id="s-lib-public-main" class="s-lib-main container s-lib-side-borders">
+    <!-- Visually hidden H1 for proper heading hierarchy (WCAG 1.3.1, 2.4.6) -->
+    <h1 class="sr-only">Robert J. Kibbee Library - Kingsborough Community College</h1>
+
+    <div id="s-lg-index-cols">
+      <div id="app1">
+        <!-- vue app1 -->
+        <div class="row">
+          <div id="obsolete_browser_alert"></div>
+          <div class="col-xs-12" id="header-div">
+            <div class="dropdown" id="hamburger-container">
+              <button
+                class="btn btn-default dropdown-toggle"
+                type="button"
+                data-toggle="dropdown"
+                aria-haspopup="true"
+                aria-expanded="false"
+                aria-label="Main menu"
+                id="hamburger"
+              >
+                <i class="fas fa-bars" aria-hidden="true" style="font-size: 2em"></i>
+              </button>
+              <ul
+                class="dropdown-menu fade"
+                aria-labelledby="hamburger"
+                id="hamburger-ul"
+              >
+                <li
+                  v-for="item in hamburger"
+                  v-bind:key="item.id"
+                >
+                  <a
+                    class="searchmenu"
+                    v-bind:aria-label="item.description + (item.target_blank ? ' (opens in new tab)' : '')"
+                    v-bind:href="item.link"
+                    v-bind:target="item.target_blank"
+                  >
+                    <hamburger-component v-bind:item="item"></hamburger-component>
+                  </a>
+                </li>
+              </ul>
+            </div>
+            <!-- end of hamburger container -->
+            <a
+              href="https://cuny-kb.primo.exlibrisgroup.com/discovery/account?vid=01CUNY_KB:CUNY_KB"
+              id="login-div"
+              aria-label="Login to your library account"
+            >
+              <div id="login-text">Login</div>
+              <div id="login-icon"><i class="fas fa-user" aria-hidden="true"></i></div>
+            </a>
+            <img
+              id="library-logo"
+              class="image-fail"
+              alt="Kibbee Library logo"
+              src="https://libapps.s3.amazonaws.com/accounts/16298/images/xsmall-2.jpg"
+            />
+            {{content_box_33471502}}
+          </div>
+          <!-- end of header div -->
+        </div>
+        <!-- end of row -->
+        <div class="row" id="hamburger-alternative">
+          <div class="col-xs-12">
+            <navig-component v-bind:navlistofmenus="navlistofmenus"></navig-component>
+          </div>
+          <!-- end of col-xs-12 -->
+        </div>
+        <!--end of row-->
+      </div>
+      <!--end of Vue app1-->
+    </div>
+    <div class="container" style="margin-top: 14px">
+      <div class="row kbcc-background-image">
+        <div class="col-sm-8">
+          <div id="app2" style="clear: both;">
+            <onesearch-component></onesearch-component>
+          </div><!-- end of Vue app2 -->
+        </div>
+        <div class="col-sm-4">
+          <div class="nav-by-jumbotron" id="main-content">
+            <button
+              id="eq_32886"
+              type="button"
+              class="ga-by-jumbotron ga-by-jumbotron-rooms nav-jumbotron-link btn-link"
+              style="display:block;width:100%;"
+              aria-label="Book A Study Room"
+            >
+              <div class="nav-divs-by-jumbotron" id="bookastudyroom">
+                <h2 id="bookastudyroom-heading">Book A Study Room</h2>
+              </div>
+            </button>
+            <a
+              href="https://library.kbcc.cuny.edu/az.php"
+              class="ga-by-jumbotron ga-by-jumbotron-databases"
+            >
+              <div class="nav-divs-by-jumbotron">
+                <h2>Databases</h2>
+              </div>
+            </a>
+            <a
+              href="https://library.kbcc.cuny.edu/guides"
+              class="ga-by-jumbotron ga-by-jumbotron-guides"
+            >
+              <div class="nav-divs-by-jumbotron">
+                <h2>Research Guides</h2>
+              </div>
+            </a>
+            <a
+              href="https://library.kbcc.cuny.edu/faq"
+              class="ga-by-jumbotron ga-by-jumbotron-print"
+            >
+              <div class="nav-divs-by-jumbotron">
+                <h2>FAQ</h2>
+              </div>
+            </a>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-7 col-lg-6">
+          <div class="panel panel-default hide-body-border">
+            <div class="panel-heading show-panel">
+              <span class="panel-title content-panel-title">
+                <h2>Library Links</h2>
+              </span>
+            </div>
+            <div class="panel-body">
+              <div class="row">
+                <div class="col-sm-6">
+                  <ul class="link-list">
+                    <li>
+                      <a
+                        href="https://library.kbcc.cuny.edu/ENGLISH24"
+                        class="ga-library-links"
+                      >
+                        How to Use the Library
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        href="https://cuny-kb.alma.exlibrisgroup.com/discovery/collectionDiscovery?vid=01CUNY_KB:CUNY_KB&collectionId=8155422080006129"
+                        class="ga-library-links"
+                      >
+                        2024-2025 Textbooks
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        href="https://cuny-kb.alma.exlibrisgroup.com/discovery/collectionDiscovery?vid=01CUNY_KB:CUNY_KB&collectionId=8150905740006129"
+                        class="ga-library-links"
+                      >
+                        Streaming Video
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        href="https://cuny-kb.alma.exlibrisgroup.com/discovery/collectionDiscovery?vid=01CUNY_KB:CUNY_KB&collectionId=8156195890006129"
+                        class="ga-library-links"
+                      >
+                        Comic Books &amp; Graphic Novels
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+                <div class="col-sm-6">
+                  <ul class="link-list">
+                    <li>
+                      <a
+                        href="http://kbcc.ezproxy.cuny.edu/login?url=https://search.ebscohost.com/login.aspx?authtype=ip,uid&custid=s9000138&profile=ehost&defaultdb=a9h"
+                        target="_blank"
+                        class="ga-library-links"
+                        aria-label="Academic Search Complete (opens in new tab)"
+                      >
+                        Academic Search Complete
+                        <i class="fas fa-external-link-alt external-link-icon" aria-hidden="true"></i>
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        href="http://kbcc.ezproxy.cuny.edu/login?url=https://search.proquest.com/usmajordailies/advanced/news/fromDatabasesLayer?accountid=38336"
+                        target="_blank"
+                        class="ga-library-links"
+                        aria-label="US Newspapers (opens in new tab)"
+                      >
+                        US Newspapers
+                        <i class="fas fa-external-link-alt external-link-icon" aria-hidden="true"></i>
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        href="http://www.nytimes.com/passes"
+                        target="_blank"
+                        class="ga-library-links"
+                        aria-label="NY Times Free Pass (opens in new tab)"
+                      >
+                        NY Times Free Pass
+                        <i class="fas fa-external-link-alt external-link-icon" aria-hidden="true"></i>
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        href="https://library.kbcc.cuny.edu/newarrivals/leisure"
+                        class="ga-library-links"
+                      >
+                        Leisure Reading Collection
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-md-5 col-lg-6">
+          <div class="panel panel-default hide-body-border">
+            <div class="panel-heading show-panel">
+              <span class="panel-title content-panel-title">
+                <h2>Featured in the Library</h2>
+              </span>
+            </div>
+            <div class="panel-body">{{content_box_25912431}}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="container">
+      <div class="row">
+        <!-- BEGIN: Page Footer -->
+        <div id="orange-line"></div>
+        <div id="main-blue-footer">
+          <div id="lighthouse-logo">
+            <a href="https://www.kbcc.cuny.edu">
+              <img
+                src="https://libapps.s3.amazonaws.com/accounts/16298/images/Orange_Vector_Mac_Building.png"
+                alt="Kingsborough Lighthouse logo"
+                loading="lazy"
+              />
+            </a>
+          </div>
+          <div class="library-address">
+            <div class="whiteahrefs">
+              <strong>Robert J. Kibbee Library</strong><br />
+              2001 Oriental Blvd<br />
+              Brooklyn, NY, 11209<br />
+              <a href="tel:+1-718-368-5632">718-368-5632</a>
+            </div>
+            <div class="whiteahrefs">
+              <a
+                aria-label="Instagram (opens in new tab)"
+                href="https://www.instagram.com/kbcclibrary/"
+                target="_blank"
+              >
+                <i aria-hidden="true" class="fab fa-instagram"></i>
+              </a>
+              <a
+                aria-label="Goodreads (opens in new tab)"
+                href="https://www.goodreads.com/user/show/51717966-kingsborough-library"
+                target="_blank"
+              >
+                <i aria-hidden="true" class="fab fa-goodreads"></i>
+              </a>
+              <a
+                aria-label="TikTok (opens in new tab)"
+                href="https://www.tiktok.com/@kbcclibrary?lang=en"
+                target="_blank"
+              >
+                <i aria-hidden="true" class="fab fa-tiktok"></i>
+              </a>
+              <a
+                aria-label="YouTube (opens in new tab)"
+                href="https://www.youtube.com/channel/UCpeJWrnzLXEizw8cMvVp-_Q/videos"
+                target="_blank"
+              >
+                <i aria-hidden="true" class="fab fa-youtube"></i>
+              </a>
+              <a
+                aria-label="Spotify (opens in new tab)"
+                href="https://open.spotify.com/user/313lfmvr4ezmkb2mhodzd5ubzg4a"
+                target="_blank"
+              >
+                <i aria-hidden="true" class="fab fa-spotify"></i>
+              </a>
+            </div>
+          </div>
+          <div id="cuny-logo">
+            <a
+              href="https://www.cuny.edu"
+              target="_blank"
+              aria-label="CUNY (opens in new tab)"
+            >
+              <img
+                src="https://libapps.s3.amazonaws.com/accounts/16298/images/CUNYlogo-white.png"
+                alt="CUNY logo"
+                loading="lazy"
+              />
+            </a>
+          </div>
+          <div class="whiteahrefs libapps">
+            <a
+              href="https://kbcc-cuny.libapps.com/libapps/login.php?site_id=2365"
+            >
+              LibApps
+            </a>
+            |
+            <a
+              href="https://cuny-kb.alma.exlibrisgroup.com/mng/login?auth=SAML"
+            >
+              Alma
+            </a>
+          </div>
+          <div style="height: 10px"></div>
+        </div>
+        <!-- END: Page Footer -->
+      </div>
+    </div>
+  </div>
+
+  <div id="s-lib-alert" title="">
+    <div id="s-lib-alert-content"></div>
+  </div>
+  <div id="s-lib-popover-title" class="hide">
+    <span class="text-info"><strong>title</strong></span>
+    <button
+      type="button"
+      id="popclose"
+      class="close"
+      onclick="jQuery('.s-lib-popover').popover('hide')"
+      aria-label="Close popover"
+    >
+      &times;
+    </button>
+  </div>
+  <div id="s-lib-popover-content" class="hide">
+    <i class="fa fa-refresh fa-spin" aria-hidden="true"></i> Loading...
+    <button class="btn btn-default btn-sm popclose" type="button">Close</button>
+  </div>
+  <div id="s-lib-scroll-top" title="Back to Top">
+    <span class="fa-stack fa-lg" aria-hidden="true">
+      <i class="fa fa-square-o fa-stack-2x"></i>
+      <i
+        class="fa fa-angle-double-up fa-stack-1x"
+        style="position: relative; bottom: 2px"
+      ></i>
+    </span>
+  </div>
+
+  <!-- LibChat widget script -->
+  <script src="https://kbcc-cuny.libanswers.com/load_chat.php?hash=f7d1629a91e178fd0f799322e803b6e7"></script>
+
+  <!-- add Vue scripts -->
+  <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> development -->
+  <script src="https://unpkg.com/vue/dist/vue.global.prod.js"></script><!-- production -->
+  <script
+    type="text/javascript"
+    src="https://libapps.s3.amazonaws.com/sites/2365/include/main7.js"
+  ></script>
+</body>
diff --git a/groups/home/bootstrap3/src/main7.js b/groups/home/bootstrap3/src/main7.js
new file mode 100644
index 0000000..91b350d
--- /dev/null
+++ b/groups/home/bootstrap3/src/main7.js
@@ -0,0 +1,445 @@
+const hamburgerComponent = {
+  template: `<div class="bigger-fancy-text">
+    <i v-bind:class="item.icon" aria-hidden="true"></i>
+    <strong>{{ item.description }}</strong>
+  </div>`,
+  props: ["item"],
+};
+
+const navigComponent = {
+  // Fixed: Removed invalid nested <a> elements (WCAG 4.1.1)
+  // Changed outer <a> to <div> and made dropdown-toggle a <button>
+  template: `<nav class="navbar navbar-default main-nav-container" aria-label="Main navigation">
+    <div class="container-fluid">
+      <ul class="nav navbar-nav" id="navbar-center">
+        <li v-for="(navmenu, navkey) in navlistofmenus"
+            v-bind:key="navmenu.id"
+            class="dropdown main-nav-dropdown"
+        >
+          <button class="dropdown-toggle ga-main-navbar"
+                  type="button"
+                  data-toggle="dropdown"
+                  aria-haspopup="true"
+                  v-bind:aria-expanded="navmenu.isOpen ? 'true' : 'false'"
+                  @click="toggleDropdown(navmenu)"
+                  @keydown.escape="closeDropdown(navmenu)"
+          >
+            <span class="caret-text">{{ navkey }}</span>
+            <span class="fancy-caret"><i class="fas fa-angle-down" aria-hidden="true"></i></span>
+          </button>
+          <ul class="dropdown-menu fade dropdown-margin"
+              v-bind:aria-label="navkey + ' submenu'"
+          >
+            <li v-for="item in navmenu.data"
+                v-bind:key="item.id"
+            >
+              <a class="searchmenu"
+                 v-bind:aria-label="item.description + (item.target_blank ? ' (opens in new tab)' : '')"
+                 v-bind:href="item.link"
+                 v-bind:target="item.target_blank"
+              >
+                <div class="bigger-fancy-text">
+                  <i v-bind:class="item.icon" aria-hidden="true"></i>
+                  <strong>{{ item.description }}</strong>
+                  <i v-if="item.target_blank" class="fas fa-external-link-alt external-link-icon" aria-hidden="true"></i>
+                </div>
+              </a>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </nav>`,
+  props: ["navlistofmenus"],
+  methods: {
+    toggleDropdown(navmenu) {
+      // Toggle the isOpen state for aria-expanded
+      navmenu.isOpen = !navmenu.isOpen;
+    },
+    closeDropdown(navmenu) {
+      navmenu.isOpen = false;
+    }
+  }
+};
+
+const onesearchComponent = {
+  // Fixed: Added autocomplete="off" to search input (WCAG 1.3.5)
+  // Note: autocomplete="off" is appropriate here as this is a library search, not a standard web search
+  template: `<form class="form-inline onesearch-jumbotron"
+      name="searchPrimoForm1"
+      ref="oneSearchForm"
+      role="search"
+      method="get"
+      action="https://cuny-kb.primo.exlibrisgroup.com/discovery/search"
+      enctype="application/x-www-form-urlencoded; charset=utf-8"
+      aria-label="Search the library catalog"
+  >
+    <!-- default is "everything"  option suggested from OLS widget builder -->
+    <input name="facet" :value="facet" type="hidden"/>
+    <input name="mfacet" :value="mfacet" type="hidden" />
+    <input name="vid" value="01CUNY_KB:CUNY_KB" type="hidden" />
+    <input name="tab" value="Everything" type="hidden" />
+    <input name="search_scope" value="IZ_CI_AW" type="hidden" />
+    <input name="mode" value="basic" type="hidden" />
+    <input name="highlight" value="true" type="hidden" />
+    <input name="displayMode" value="full" type="hidden" />
+    <input name="bulkSize" value="10" type="hidden" />
+    <input name="dum" value="true" type="hidden" />
+    <input name="displayField" value="all" type="hidden" />
+    <input name="pcAvailabiltyMode" value="false" type="hidden" />
+    <input name="query" ref="primoQueryString" type="hidden" />
+    <div id="onesearch-header">
+        <a href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en">
+            <img class="image-fail onesearchsubmit" src="https://libapps.s3.amazonaws.com/accounts/16298/images/onesearch_logo.png" alt="OneSearch" />
+        </a>
+    </div>
+    <div class="form-group" id="flex-search-form">
+        <label class="sr-only" for="primoQueryTemp">Search terms</label>
+        <div class="input-group zero-margin form-width" id="blue-border2">
+            <input class="form-control inherit-height-from-flex"
+                   name="queryTemp"
+                   id="primoQueryTemp"
+                   ref="primoQueryTempString"
+                   type="search"
+                   v-model="searchstring"
+                   aria-label="Search terms"
+                   placeholder="Enter search term here"
+                   autocomplete="off"
+             />
+        </div>
+        <div class="input-group zero-margin" id="blue-border3">
+            <input type="submit"
+                   class="btn btn-default form-control onesearchsubmit inherit-height-from-flex"
+                   value="Search"
+                   @click.stop.prevent="submitSearch"
+            />
+        </div>
+    </div>
+    <fieldset id="radios">
+        <legend class="sr-only">Limit search to</legend>
+
+        <input type="radio"
+               name="radio1"
+               id="booksradio"
+               @click="selectradio('rtype,include,books', '')"
+        >
+        <label for="booksradio">Books</label>
+
+        <div class="radiocontainer">
+            <input type="radio"
+                   name="radio1"
+                   id="articlesradio"
+                   @click="selectradio('tlevel,include,peer_reviewed', 'rtype,include,articles,1')"
+            >
+            <label for="articlesradio">Articles (Peer reviewed)</label>
+        </div>
+
+        <div class="radiocontainer">
+            <input type="radio"
+                   name="radio1"
+                   id="everythingradio"
+                   @click="selectradio('', '')"
+            >
+            <label for="everythingradio">Everything</label>
+        </div>
+    </fieldset>
+    <div id="advanced">
+        <strong>
+            <a href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?vid=01CUNY_KB:CUNY_KB&lang=en&mode=advanced">Advanced</a>
+        </strong>
+    </div>
+</form>`,
+  methods: {
+    selectradio(radiooutputfacet, radiooutputmfacet) {
+      this.facet = radiooutputfacet; // store the data from the radio selection
+      this.mfacet = radiooutputmfacet;
+    },
+    submitSearch() {
+      this.$refs.primoQueryString.value = `any,contains,${this.$refs.primoQueryTempString.value.replace(
+        /[,]/g,
+        " "
+      )}`; // vueified OLS widget code
+      this.$refs.oneSearchForm.submit(); // submit the form
+    },
+  },
+  data() {
+    return {
+      facet: "", // initialize the data from the radio selection
+      mfacet: "",
+    };
+  },
+};
+
+const { createApp } = Vue;
+
+const app1 = createApp({
+  components: {
+    "navig-component": navigComponent,
+    "hamburger-component": hamburgerComponent,
+  },
+  data() {
+    return {
+      hamburger: [
+        {
+          link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en",
+          icon: "fas fa-search fa-fw bigger-icon",
+          description: "OneSearch",
+          target_blank: "",
+          id: 1,
+        },
+        {
+          link: "https://library.kbcc.cuny.edu/az.php",
+          icon: "fas fa-database fa-fw bigger-icon",
+          description: "Databases A to Z",
+          target_blank: "",
+          id: 2,
+        },
+        {
+          link: "https://library.kbcc.cuny.edu/guides",
+          icon: "fas fa-telescope fa-fw bigger-icon",
+          description: "Research Guides",
+          target_blank: "",
+          id: 3,
+        },
+        {
+          link: "https://library.kbcc.cuny.edu/faq",
+          icon: "fas fa-question-circle fa-fw bigger-icon",
+          description: "FAQ",
+          target_blank: "",
+          id: 4,
+        },
+        {
+          link: "https://library.kbcc.cuny.edu/calendar",
+          icon: "fas fa-clock fa-fw bigger-icon",
+          description: "Library Hours",
+          target_blank: "",
+          id: 5,
+        },
+        {
+          link: "https://library.kbcc.cuny.edu/sitemap",
+          icon: "fas fa-location-arrow fa-fw bigger-icon",
+          description: "Site Map",
+          target_blank: "",
+          id: 6,
+        },
+      ],
+      navlistofmenus: {
+        "Find It": {
+          id: 1,
+          isOpen: false, // Added for dynamic aria-expanded (WCAG 4.1.2)
+          data: [
+            {
+              link: "https://library.kbcc.cuny.edu/az.php",
+              icon: "fas fa-database fa-fw bigger-icon",
+              description: "Databases A to Z",
+              target_blank: "",
+              id: 1,
+            },
+            {
+              link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/npsearch?vid=01CUNY_KB:CUNY_KB&search_scope=all",
+              icon: "fas fa-newspaper fa-fw bigger-icon",
+              description: "Newspaper Search",
+              target_blank: "",
+              id: 2,
+            },
+            {
+              link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search?vid=01CUNY_KB:CUNY_KB&tab=CourseReserves&search_scope=CourseReserves",
+              icon: "fas fa-cloud-download-alt fa-fw bigger-icon",
+              description: "Course Reserves",
+              target_blank: "",
+              id: 3,
+            },
+            {
+              link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/jsearch?vid=01CUNY_KB:CUNY_KB",
+              icon: "fas fa-book fa-fw bigger-icon",
+              description: "Search for Specific Journals",
+              target_blank: "",
+              id: 4,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/academicworks",
+              icon: "fas fa-archive fa-fw bigger-icon",
+              description: "CUNY Academic Works",
+              target_blank: "_blank",
+              id: 5,
+            },
+            {
+              link: "https://kbcc.textbookx.com/institutional/index.php",
+              icon: "fas fa-cash-register fa-fw bigger-icon",
+              description: "KBCC Bookstore",
+              target_blank: "_blank",
+              id: 6,
+            },
+          ],
+        },
+        Services: {
+          id: 2,
+          isOpen: false, // Added for dynamic aria-expanded (WCAG 4.1.2)
+          data: [
+            {
+              link: "https://kbcc-cuny.illiad.oclc.org/illiad/logon.html",
+              icon: "fas fa-books fa-fw bigger-icon",
+              description: "Interlibrary Loan",
+              target_blank: "_blank",
+              id: 1,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/libraryservices/informationliteracy",
+              icon: "fas fa-chalkboard-teacher fa-fw bigger-icon",
+              description: "Book a Library Instruction Session",
+              target_blank: "",
+              id: 2,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/mediaservices",
+              icon: "fas fa-photo-video fa-fw bigger-icon",
+              description: "Media Services",
+              target_blank: "",
+              id: 3,
+            },
+            {
+              link: "https://kbcc-cuny.libanswers.com/form?queue_id=6967",
+              icon: "fas fa-shopping-basket fa-fw bigger-icon",
+              description: "Suggest a Book for Purchase",
+              target_blank: "",
+              id: 4,
+            },
+            {
+              link: "https://kbcc-cuny.libwizard.com/id/8cdb3f1a787de3c307a8cf5d75cad406",
+              icon: "fas fa-bookmark fa-fw bigger-icon",
+              description: "Suggest an Item to Add to Reserves",
+              target_blank: "",
+              id: 5,
+            },
+          ],
+        },
+        "About Us": {
+          id: 3,
+          isOpen: false, // Added for dynamic aria-expanded (WCAG 4.1.2)
+          data: [
+            {
+              link: "https://library.kbcc.cuny.edu/about-us/directory",
+              icon: "fas fa-address-book fa-fw bigger-icon",
+              description: "Faculty & Staff Directory",
+              target_blank: "",
+              id: 1,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/newarrivals",
+              icon: "far fa-mail-bulk fa-fw bigger-icon",
+              description: "New Arrivals",
+              target_blank: "",
+              id: 2,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/about-us/liaisons",
+              icon: "fas fa-theater-masks fa-fw bigger-icon",
+              description: "Subject Liaisons",
+              target_blank: "",
+              id: 3,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/social",
+              icon: "far fa-hashtag fa-fw bigger-icon",
+              description: "Social Media",
+              target_blank: "",
+              id: 4,
+            },
+            {
+              link: "https://cuny-kb.alma.exlibrisgroup.com/discovery/collectionDiscovery?vid=01CUNY_KB:CUNY_KB",
+              icon: "fa-solid fa-star fa-fw bigger-icon",
+              description: "Featured Collections",
+              target_blank: "",
+              id: 5,
+            },
+          ],
+        },
+        "Location & Hours": {
+          id: 4,
+          isOpen: false, // Added for dynamic aria-expanded (WCAG 4.1.2)
+          data: [
+            {
+              link: "https://tour.kingsborough.edu/",
+              icon: "fas fa-map-marked-alt fa-fw bigger-icon",
+              description: "Campus Map",
+              target_blank: "",
+              id: 1,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/calendar",
+              icon: "fas fa-clock fa-fw bigger-icon",
+              description: "Library Hours",
+              target_blank: "",
+              id: 2,
+            },
+          ],
+        },
+        Help: {
+          id: 5,
+          isOpen: false, // Added for dynamic aria-expanded (WCAG 4.1.2)
+          data: [
+            {
+              link: "https://library.kbcc.cuny.edu/askalibrarian",
+              icon: "fas fa-book-reader fa-fw bigger-icon",
+              description: "Ask A Librarian",
+              target_blank: "",
+              id: 1,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/faq",
+              icon: "fas fa-question-circle fa-fw bigger-icon",
+              description: "FAQ",
+              target_blank: "",
+              id: 2,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/guides",
+              icon: "fas fa-telescope fa-fw bigger-icon",
+              description: "Research Guides and Tutorials",
+              target_blank: "",
+              id: 3,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/ENGLISH24",
+              icon: "fas fa-question fa-fw bigger-icon",
+              description: "How to Use the Library",
+              target_blank: "",
+              id: 4,
+            },
+          ],
+        },
+      },
+    };
+  },
+  mounted() {
+    // Dynamic aria-expanded for hamburger menu (WCAG 4.1.2)
+    const hamburger = document.getElementById('hamburger');
+    const hamburgerContainer = document.getElementById('hamburger-container');
+
+    if (hamburger && hamburgerContainer) {
+      // Update aria-expanded when dropdown opens/closes
+      hamburgerContainer.addEventListener('shown.bs.dropdown', function() {
+        hamburger.setAttribute('aria-expanded', 'true');
+      });
+      hamburgerContainer.addEventListener('hidden.bs.dropdown', function() {
+        hamburger.setAttribute('aria-expanded', 'false');
+      });
+
+      // Fallback for Bootstrap 3 events
+      jQuery(hamburgerContainer).on('show.bs.dropdown', function() {
+        hamburger.setAttribute('aria-expanded', 'true');
+      });
+      jQuery(hamburgerContainer).on('hide.bs.dropdown', function() {
+        hamburger.setAttribute('aria-expanded', 'false');
+      });
+    }
+  }
+});
+app1.mount("#app1");
+
+const app2 = createApp({
+  components: {
+    "onesearch-component": onesearchComponent,
+  },
+});
+app2.mount("#app2");