Remove Slack, fix Twitter link, add updated footer from docs (#305)

* Remove Slack, fix Twitter link, add updated footer from docs

* Fix #300

* Fix broken links

* Fix another link

4 files changed, 59 insertions, 37 deletions

diff --git a/config.yml b/config.yml
index 8f7882ac..8c10c3aa 100644
--- a/config.yml
+++ b/config.yml
@@ -87,7 +87,7 @@ params:
   main:                 "https://getbootstrap.com"
   github_org:           "https://github.com/twbs"
   repo:                 "https://github.com/twbs/blog"
-  slack:                "https://bootstrap-slack.herokuapp.com"
+  twitter:              "getbootstrap"
   blog:                 "https://blog.getbootstrap.com/"
   expo:                 "https://expo.getbootstrap.com/"
   icons:                "https://icons.getbootstrap.com/"
@@ -97,6 +97,3 @@ params:
   # the first image in the following array is always used, unless specified in the front matter
   images:
     - "/assets/img/bootstrap-social.png"
-
-social:
-  twitter:              "getbootstrap"
diff --git a/src/assets/scss/_footer.scss b/src/assets/scss/_footer.scss
index 74f27ff2..87cee6d2 100644
--- a/src/assets/scss/_footer.scss
+++ b/src/assets/scss/_footer.scss
@@ -3,28 +3,14 @@
 //
 
 .bd-footer {
-  font-size: .875rem;
-
   a {
-    font-weight: 600;
     color: $gray-700;
+    text-decoration: none;
 
     &:hover,
     &:focus {
-      color: $blue-500;
-    }
-  }
-}
-
-.bd-footer-links {
-  padding-left: 0;
-  margin-bottom: 1rem;
-
-  li {
-    display: inline-block;
-
-    + li {
-      margin-left: 1rem;
+      color: $link-color;
+      text-decoration: underline;
     }
   }
 }
diff --git a/src/layouts/partials/footer.html b/src/layouts/partials/footer.html
index af860da5..9ae8e42a 100644
--- a/src/layouts/partials/footer.html
+++ b/src/layouts/partials/footer.html
@@ -1,12 +1,57 @@
-<footer class="bd-footer p-3 p-md-5 mt-5 text-center text-muted bg-light">
-  <div class="container">
-    <ul class="bd-footer-links">
-      <li><a href="{{ .Site.Params.github_org }}">GitHub</a></li>
-      <li><a href="https://twitter.com/{{ .Site.Social.twitter }}">Twitter</a></li>
-      <li><a href="{{ .Site.Params.main }}/docs/{{ .Site.Params.docs_version }}/examples/">Examples</a></li>
-      <li><a href="{{ .Site.Params.main }}/docs/{{ .Site.Params.docs_version }}/about/overview/">About</a></li>
-    </ul>
-    <p class="mb-0">Designed and built with all the love in the world by the <a href="{{ .Site.Params.main }}/docs/{{ .Site.Params.docs_version }}/about/team/">Bootstrap team</a> with the help of <a href="{{ .Site.Params.repo }}/graphs/contributors">our contributors</a>.</p>
-    <p class="mb-0">Currently <a href="{{ .Site.Params.github_org }}/bootstrap/releases/tag/v{{ .Site.Params.current_version }}">v{{ .Site.Params.current_version }}</a>. The Bootstrap Blog is <a href="{{ .Site.Params.repo }}">open source</a> under the MIT license.</p>
+<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
+  <div class="container py-4 py-md-5 px-4 px-md-3">
+    <div class="row">
+      <div class="col-lg-3 mb-3">
+        <a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
+          {{ partial "icons/bootstrap-white-fill.svg" (dict "class" "d-block me-2" "width" "40" "height" "32") }}
+          <span class="fs-5">Bootstrap</span>
+        </a>
+        <ul class="list-unstyled small text-muted">
+          <li class="mb-2">Designed and built with all the love in the world by the <a href="{{ .Site.Params.main }}/docs/{{ .Site.Params.docs_version }}/about/team/">Bootstrap team</a> with the help of <a href="{{ .Site.Params.repo }}/graphs/contributors">our contributors</a>.</li>
+        </ul>
+      </div>
+      <div class="col-6 col-lg-2 offset-lg-1 mb-3">
+        <h5>Links</h5>
+        <ul class="list-unstyled">
+          <li class="mb-2"><a href="{{ .Site.Params.main }}/">Home</a></li>
+          <li class="mb-2"><a href="{{ .Site.Params.main }}/docs/{{ .Site.Params.docs_version }}/">Docs</a></li>
+          <li class="mb-2"><a href="{{ .Site.Params.main }}/docs/{{ .Site.Params.docs_version }}/examples/">Examples</a></li>
+          <li class="mb-2"><a href="{{ .Site.Params.icons }}">Icons</a></li>
+          <li class="mb-2"><a href="{{ .Site.Params.themes }}">Themes</a></li>
+          <li class="mb-2"><a href="{{ .Site.Params.blog }}">Blog</a></li>
+          <li class="mb-2"><a href="{{ .Site.Params.swag }}">Swag Store</a></li>
+        </ul>
+      </div>
+      <div class="col-6 col-lg-2 mb-3">
+        <h5>Guides</h5>
+        <ul class="list-unstyled">
+          <li class="mb-2"><a href="{{ .Site.Params.main }}/docs/{{ .Site.Params.docs_version }}/getting-started/">Getting started</a></li>
+          <li class="mb-2"><a href="{{ .Site.Params.main }}/docs/{{ .Site.Params.docs_version }}/examples/starter-template/">Starter template</a></li>
+          <li class="mb-2"><a href="{{ .Site.Params.main }}/docs/{{ .Site.Params.docs_version }}/getting-started/webpack/">Webpack</a></li>
+          <li class="mb-2"><a href="{{ .Site.Params.main }}/docs/{{ .Site.Params.docs_version }}/getting-started/parcel/">Parcel</a></li>
+          <li class="mb-2"><a href="{{ .Site.Params.main }}/docs/{{ .Site.Params.docs_version }}/getting-started/vite/">Vite</a></li>
+        </ul>
+      </div>
+      <div class="col-6 col-lg-2 mb-3">
+        <h5>Projects</h5>
+        <ul class="list-unstyled">
+          <li class="mb-2"><a href="{{ .Site.Params.github_org }}/bootstrap">Bootstrap 5</a></li>
+          <li class="mb-2"><a href="{{ .Site.Params.github_org }}/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
+          <li class="mb-2"><a href="{{ .Site.Params.github_org }}/icons">Icons</a></li>
+          <li class="mb-2"><a href="{{ .Site.Params.github_org }}/rfs">RFS</a></li>
+          <li class="mb-2"><a href="{{ .Site.Params.github_org }}/bootstrap-npm-starter">npm starter</a></li>
+        </ul>
+      </div>
+      <div class="col-6 col-lg-2 mb-3">
+        <h5>Community</h5>
+        <ul class="list-unstyled">
+          <li class="mb-2"><a href="{{ .Site.Params.github_org }}/bootstrap/issues">Issues</a></li>
+          <li class="mb-2"><a href="{{ .Site.Params.github_org }}/bootstrap/discussions">Discussions</a></li>
+          <li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
+          <li class="mb-2"><a href="{{ .Site.Params.opencollective }}">Open Collective</a></li>
+          <li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </footer>
diff --git a/src/layouts/partials/navbar.html b/src/layouts/partials/navbar.html
index 5b67a20c..804fc0a9 100644
--- a/src/layouts/partials/navbar.html
+++ b/src/layouts/partials/navbar.html
@@ -52,12 +52,6 @@
             </a>
           </li>
           <li class="nav-item col-6 col-lg-auto">
-            <a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.slack }}" target="_blank" rel="noopener">
-              {{ partial "icons/slack.svg" (dict "class" "navbar-nav-svg" "width" "16" "height" "16") }}
-              <small class="d-lg-none ms-2">Slack</small>
-            </a>
-          </li>
-          <li class="nav-item col-6 col-lg-auto">
             <a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.opencollective }}" target="_blank" rel="noopener">
               {{ partial "icons/opencollective.svg" (dict "class" "navbar-nav-svg" "width" "16" "height" "16") }}
               <small class="d-lg-none ms-2">Open Collective</small>