CAMEL-15185: Footer design

* CAMEL-15185: add footer design for hugo page - desktop version

* CAMEL-15185: add footer desktop and mobile design for hugo and antora pages

* CAMEL-15185: add toggle functionality for mobile footer

update the breakpoint

* CAMEL-15185: Update the breakpoint and add link to privacy policy

* CAMEL-15185: automate the toggling action using checkbox

* CAMEL-15185: reduce vertical space between items in footer
diff --git a/antora-ui-camel/src/css/footer.css b/antora-ui-camel/src/css/footer.css
index 3bae8e3..c67a783 100644
--- a/antora-ui-camel/src/css/footer.css
+++ b/antora-ui-camel/src/css/footer.css
@@ -19,12 +19,46 @@
 
 footer .footer p {
   flex-basis: 100%;
-  margin: 0.5rem 0;
+  margin: 3rem 0 0.5rem 0;
   padding: 0 1rem;
 }
 
+footer .footer p.remark::after {
+  content: '';
+  display: block;
+  position: relative;
+  height: 1px;
+  width: 25rem;
+  margin: 2rem auto 1rem auto;
+  background: var(--footer-after-background);
+}
+
 footer .footer a {
-  color: var(--footer-link-font-color);
+  color: var(--footer-font-color);
+}
+
+footer .footer .context {
+  display: inline-block;
+  margin: 0 0 1rem 0;
+}
+
+footer .footer .context a {
+  font-size: 15px;
+  text-transform: uppercase;
+}
+
+footer .footer .context a::after {
+  content: ' ';
+  display: inline-block;
+  border-radius: 50%;
+  width: 8px;
+  height: 8px;
+  margin: 0 1rem;
+  background: var(--footer-after-background);
+}
+
+footer .footer .context:last-child a::after {
+  display: none;
 }
 
 footer .footer figure.logo {
@@ -32,12 +66,11 @@
   flex-grow: 1;
   align-items: flex-start;
   justify-content: center;
-  text-align: center;
+  margin-inline-start: 0;
 }
 
 footer .footer figure.logo img {
   width: 6rem;
-  height: 100%;
 }
 
 footer .footer dl {
@@ -45,7 +78,11 @@
   flex-grow: 1;
   align-items: flex-start;
   justify-content: center;
-  margin-left: 1rem;
+  margin: 3rem 0 0 1rem;
+}
+
+footer .footer dl:first-child {
+  margin-top: 0;
 }
 
 footer .footer dl dt {
@@ -65,14 +102,12 @@
   background: var(--footer-font-color);
 }
 
-footer .footer dl dd {
-  margin: 0;
+footer .footer .footer-menu {
+  display: block;
 }
 
-@media screen and (max-width: 1023px) {
-  footer .footer figure.logo {
-    display: none;
-  }
+footer .footer dl dd {
+  margin: 0;
 }
 
 .footer-tools {
@@ -90,3 +125,116 @@
   border-radius: 0.4rem 0.4rem 0 0;
   height: 2rem;
 }
+
+footer .footer .break-row-footer {
+  display: block;
+  flex-basis: 100%;
+  height: 0;
+}
+
+footer .footer .footer-icons {
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  line-height: 1.6;
+  padding: 0.5rem;
+  font-weight: bold;
+}
+
+footer .footer .footer-icons .brand-icon {
+  height: 2em;
+  width: 1.75em;
+  margin: 0.35rem;
+  fill: var(--navbar-font-color);
+}
+
+footer .footer .show-menu,
+footer .footer .hide-menu {
+  display: none;
+}
+
+input[type="checkbox"] {
+  width: 0;
+  height: 0;
+  float: right;
+  visibility: hidden;
+}
+
+@media screen and (max-width: 1023px) {
+  footer .footer dl {
+    flex-basis: 100%;
+    margin-top: 2rem;
+  }
+
+  footer .footer dl dt {
+    margin-bottom: 0;
+  }
+
+  footer .footer figure.logo {
+    text-align: center;
+  }
+
+  footer .footer figure.logo img {
+    width: 4.5rem;
+  }
+
+  footer .footer p.remark::after {
+    width: auto;
+  }
+
+  footer .footer .context a {
+    font-size: 13.5px;
+  }
+
+  footer .footer .context a::after {
+    width: 5px;
+    height: 5px;
+  }
+
+  footer .footer .footer-icons .brand-icon {
+    height: 1.5rem;
+  }
+
+  footer .footer .show-menu {
+    float: right;
+    height: 40px;
+    margin-top: -2.5rem;
+  }
+
+  footer .footer .hide-menu {
+    float: right;
+    height: 35px;
+    margin-top: -2.5rem;
+  }
+
+  footer .footer .footer-menu {
+    margin-top: 1rem;
+  }
+
+  input[type="checkbox"] + label img.show-menu {
+    display: block;
+  }
+
+  input[type="checkbox"] ~ label img.hide-menu,
+  input[type="checkbox"] ~ div.footer-menu {
+    display: none;
+  }
+
+  input[type="checkbox"]:checked + label img.show-menu {
+    display: none;
+  }
+
+  input[type="checkbox"]:checked ~ label img.hide-menu,
+  input[type="checkbox"]:checked ~ div.footer-menu {
+    display: block;
+  }
+
+  input[type="checkbox"]:not(:checked) + label img.show-menu {
+    display: block;
+  }
+
+  input[type="checkbox"]:not(:checked) ~ label .hide-menu,
+  input[type="checkbox"]:not(:checked) ~ div.footer-menu {
+    display: none;
+  }
+}
diff --git a/antora-ui-camel/src/css/vars.css b/antora-ui-camel/src/css/vars.css
index d8a0edf..e38a678 100644
--- a/antora-ui-camel/src/css/vars.css
+++ b/antora-ui-camel/src/css/vars.css
@@ -129,8 +129,9 @@
   --frontpage-max-width: calc(1366 / var(--rem-base) * 1rem);
   /* footer */
   --footer-line-height: var(--doc-line-height);
-  --footer-background: var(--color-smoke-90);
+  --footer-background: var(--color-smoke-50);
   --footer-font-color: var(--color-gray-70);
+  --footer-after-background: var(--color-gray-50);
   --footer-link-font-color: var(--color-jet-80);
   --footer-height: 23rem; /* empirically corresponding current design of the foooter */
   /* dimensions */
diff --git a/antora-ui-camel/src/img/hide-footer-menu.svg b/antora-ui-camel/src/img/hide-footer-menu.svg
new file mode 100644
index 0000000..76a440d
--- /dev/null
+++ b/antora-ui-camel/src/img/hide-footer-menu.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" version="1.1">
+  <path stroke-width="5" stroke="#000" d="M32.5 50l35 35m0-35l-35 35"/>
+</svg>
\ No newline at end of file
diff --git a/antora-ui-camel/src/img/show-footer-menu.svg b/antora-ui-camel/src/img/show-footer-menu.svg
new file mode 100644
index 0000000..a90c6f0
--- /dev/null
+++ b/antora-ui-camel/src/img/show-footer-menu.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" version="1.1">
+  <path stroke="#000" stroke-width="5" d="M32.5 50h35M50 32.5v35"/>
+</svg>
\ No newline at end of file
diff --git a/antora-ui-camel/src/partials/footer-content.hbs b/antora-ui-camel/src/partials/footer-content.hbs
index 12301db..5afc4a4 100644
--- a/antora-ui-camel/src/partials/footer-content.hbs
+++ b/antora-ui-camel/src/partials/footer-content.hbs
@@ -3,41 +3,86 @@
     </div>
     <footer>
         <div class="footer">
-            <figure class="logo">
-                <img src="{{siteRootPath}}/_/img/logo-d.svg" class="logo-small mt-60" alt="Apache Camel Logo" aria-label="white silhouette of a camel in front of a sand dune">
-            </figure>
             <dl>
+                <figure class="logo">
+                    <img src="{{siteRootPath}}/_/img/logo-d.svg" class="logo-small mt-60" alt="Apache Camel Logo"
+                        aria-label="white silhouette of a camel in front of a sand dune">
+                </figure>
                 <dt>Overview</dt>
-                <dd><a href="{{siteRootPath}}/blog/">Blog</a></dd>
-                <dd><a href="{{siteRootPath}}/components/latest/">Components</a></dd>
-                <dd><a href="{{siteRootPath}}/download/">Download</a></dd>
-                <dd><a href="{{siteRootPath}}/manual/latest/getting-started.html">Getting started</a></dd>
-                <dd><a href="{{siteRootPath}}/manual/latest/faq/index.html">FAQ</a></dd>
+                <input type="checkbox" id="show-overview"/>
+                <label for="show-overview"><img class="show-menu" src="{{siteRootPath}}/_/img/show-footer-menu.svg"></label>
+                <label for="show-overview"><img class="hide-menu" src="{{siteRootPath}}/_/img/hide-footer-menu.svg"></label>
+                <div class="footer-menu">
+                    <dd><a href="{{siteRootPath}}/blog/">Blog</a></dd>
+                    <dd><a href="{{siteRootPath}}/docs/">Documentation</a></dd>
+                    <dd><a href="{{siteRootPath}}/community/support">COmmunity</a></dd>
+                    <dd><a href="{{siteRootPath}}/download/">Download</a></dd>
+                </div>
+            </dl>
+            <dl>
+                <dt>Documentation</dt>
+                <input type="checkbox" id="show-docs"/>
+                <label for="show-docs"><img class="show-menu" src="{{siteRootPath}}/_/img/show-footer-menu.svg"></label>
+                <label for="show-docs"><img class="hide-menu" src="{{siteRootPath}}/_/img/hide-footer-menu.svg"></label>
+                <div class="footer-menu">
+                    <dd><a href="{{siteRootPath}}/manual/latest/">User Manual</a></dd>
+                    <dd><a href="{{siteRootPath}}/components/latest/index.html">Components</a></dd>
+                    <dd><a href="{{siteRootPath}}/camel-k/latest/">Camel-K</a></dd>
+                    <dd><a href="{{siteRootPath}}/camel-kafka-connector/latest/">Camel Kafka Connector</a></dd>
+                    <dd><a href="{{siteRootPath}}/camel-quarkus/latest/">Camel Quarkus</a></dd>
+                    <dd><a href="{{siteRootPath}}/camel-spring-boot/latest/">Camel Spring Boot</a></dd>
+                    <dd><a href="{{siteRootPath}}/camel-karaf/latest/">Camel Karaf</a></dd>
+                    <dd><a href="{{siteRootPath}}/manual/latest/faq/index.html">FAQ</a></dd>
+                </div>
             </dl>
             <dl>
                 <dt>Community</dt>
-                <dd><a href="https://www.apache.org/foundation/policies/conduct">Code of conduct</a></d>
-                <dd><a href="{{siteRootPath}}/community/support/">Support</a></dd>
-                <dd><a href="{{siteRootPath}}/manual/latest/contributing.html">Contributing</a></dd>
-                <dd><a href="{{siteRootPath}}/community/user-stories/">User stories</a></dd>
-                <dd><a href="{{siteRootPath}}/community/articles/">Articles</a></dd>
-                <dd><a href="{{siteRootPath}}/community/books/">Books</a></dd>
-                <dd><a href="{{siteRootPath}}/community/team/">Team</a></dd>
+                <input type="checkbox" id="show-community"/>
+                <label for="show-community"><img class="show-menu" src="{{siteRootPath}}/_/img/show-footer-menu.svg"></label>
+                <label for="show-community"><img class="hide-menu" src="{{siteRootPath}}/_/img/hide-footer-menu.svg"></label>
+                <div class="footer-menu">
+                    <dd><a href="{{siteRootPath}}/community/support/">Support</a></dd>
+                    <dd><a href="{{siteRootPath}}/manual/latest/contributing.html">Contributing</a></dd>
+                    <dd><a href="{{siteRootPath}}/manual/latest/mailing-lists.html">Mailing Lists</a></dd>
+                    <dd><a href="{{siteRootPath}}/community/user-stories/">User stories</a></dd>
+                    <dd><a href="{{siteRootPath}}/community/articles/">Articles</a></dd>
+                    <dd><a href="{{siteRootPath}}/community/books/">Books</a></dd>
+                    <dd><a href="{{siteRootPath}}/community/team/">Team</a></dd>
+                </div>
             </dl>
             <dl>
                 <dt>About</dt>
-                <dd><a href="{{siteRootPath}}/acknowledgments/">Acknowledgments</a></d>
-                <dd><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/events/current-event.html" title="Apache Events">Apache Events</a></dd>
-                <dd><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/licenses/" title="License">License</a></dd>
-                <dd><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/security/" title="Security">Security</a></dd>
-                <dd><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/foundation/sponsorship.html" title="Sponsorship">Sponsorship</a></dd>
-                <dd><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/foundation/thanks.html" title="Thanks">Thanks</a></dd>
+                <input type="checkbox" id="show-about"/>
+                <label for="show-about"><img class="show-menu" src="{{siteRootPath}}/_/img/show-footer-menu.svg"></label>
+                <label for="show-about"><img class="hide-menu" src="{{siteRootPath}}/_/img/hide-footer-menu.svg"></label>
+                <div class="footer-menu">
+                    <dd><a href="{{siteRootPath}}/acknowledgments/">Acknowledgments</a></d>
+                    <dd><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/events/current-event.html" title="Apache Events">Apache Events</a></dd>
+                    <dd><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/licenses/" title="License">License</a></dd>
+                    <dd><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/security/" title="Security">Security</a></dd>
+                    <dd><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/foundation/sponsorship.html" title="Sponsorship">Sponsorship</a></dd>
+                    <dd><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/foundation/thanks.html" title="Thanks">Thanks</a></dd>
+                </div>
             </dl>
-            <p>
+            <p class="remark">
                 &copy; 2004-{{now_year}} The <a href="https://apache.org">Apache Software Foundation</a>.<br>
                 Apache Camel, Camel, Apache, the Apache feather logo, and the Apache Camel project logo are trademarks of
                 The Apache Software Foundation. All other marks mentioned may be trademarks or registered trademarks of
                 their respective owners.
             </p>
+            <div class="resources">
+                <div class="context">
+                    <a href="{{siteRootPath}}/privacy-policy/">Privacy Policy</a>
+                </div>
+                <div class="context">
+                    <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/foundation/policies/conduct">Code of Conduct</a>
+                </div>
+            </div>
+            <div class="break-row-footer"></div>
+            <div id="social-media" class="footer-icons">
+                <a rel="noopener noreferrer nofollow" href="https://github.com/apache/camel/" title="Collaborate on GitHub"><svg class="brand-icon"><use xlink:href="{{uiRootPath}}/img/brand-logos.svg#github" /></svg></a>
+                <a rel="noopener noreferrer nofollow" href="https://gitter.im/apache/apache-camel" title="Chat on Gitter"><svg class="brand-icon"><use xlink:href="{{uiRootPath}}/img/brand-logos.svg#gitter" /></svg></a>
+                <a rel="noopener noreferrer nofollow" href="https://twitter.com/ApacheCamel" title="Follow Apache Camel on Twitter"><svg class="brand-icon"><use xlink:href="{{uiRootPath}}/img/brand-logos.svg#twitter" /></svg></a>
+            </div>
         </div>
     </footer>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index a490a2c..ab46923 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -6,41 +6,68 @@
     </div>
     <footer>
         <div class="footer">
-            <figure class="logo">
-                <img class="logo" src="/_/img/logo-d.svg" alt="Apache Camel Logo" aria-label="white silhouette of a camel in front of a sand dune">
-            </figure>
-
             <dl>
+                <figure class="logo">
+                    <img class="logo" src="/_/img/logo-d.svg" alt="Apache Camel Logo"
+                        aria-label="white silhouette of a camel in front of a sand dune">
+                </figure>
                 <dt>Overview</dt>
-                <dd><a href="/blog/">Blog</a></dd>
-                <dd><a href="/components/latest/">Components</a></dd>
-                <dd><a href="/download/">Download</a></dd>
-                <dd><a href="/manual/latest/getting-started.html">Getting started</a></dd>
-                <dd><a href="/manual/latest/faq/index.html">FAQ</a></dd>
+                <input type="checkbox" id="show-overview"/>
+                <label for="show-overview"><img class="show-menu" src="/_/img/show-footer-menu.svg"></label>
+                <label for="show-overview"><img class="hide-menu" src="/_/img/hide-footer-menu.svg"></label>
+                <div class="footer-menu">
+                    <dd><a href="/blog/">Blog</a></dd>
+                    <dd><a href="/docs/">Documentation</a></dd>
+                    <dd><a href="/community/support/">Community</a></dd>
+                    <dd><a href="/blog/">Download</a></dd>
+                </div>
             </dl>
-
+            <dl>
+                <dt>Documentation</dt>
+                <input type="checkbox" id="show-docs"/>
+                <label for="show-docs"><img class="show-menu" src="/_/img/show-footer-menu.svg"></label>
+                <label for="show-docs"><img class="hide-menu" src="/_/img/hide-footer-menu.svg"></label>
+                <div class="footer-menu">
+                    <dd><a href="/manual/latest/">User Manual</a></dd>
+                    <dd><a href="/components/latest/index.html">Components</a></dd>
+                    <dd><a href="/camel-k/latest/">Camel-K</a></dd>
+                    <dd><a href="/camel-kafka-connector/latest/">Camel Kafka Connector</a></dd>
+                    <dd><a href="/camel-quarkus/latest/">Camel Quarkus</a></dd>
+                    <dd><a href="/camel-spring-boot/latest/">Camel Spring Boot</a></dd>
+                    <dd><a href="/camel-karaf/latest/">Camel Karaf</a></dd>
+                    <dd><a href="/manual/latest/faq/index.html">FAQ</a></dd>
+                </div>
+            </dl>
             <dl>
                 <dt>Community</dt>
-                <dd><a href="https://www.apache.org/foundation/policies/conduct">Code of conduct</a></d>
-                <dd><a href="/community/support/">Support</a></dd>
-                <dd><a href="/manual/latest/contributing.html">Contributing</a></dd>
-                <dd><a href="/community/user-stories/">User stories</a></dd>
-                <dd><a href="/community/articles/">Articles</a></dd>
-                <dd><a href="/community/books/">Books</a></dd>
-                <dd><a href="/community/team/">Team</a></dd>
+                <input type="checkbox" id="show-community"/>
+                <label for="show-community"><img class="show-menu" src="/_/img/show-footer-menu.svg"></label>
+                <label for="show-community"><img class="hide-menu" src="/_/img/hide-footer-menu.svg"></label>
+                <div class="footer-menu">
+                    <dd><a href="/community/support/">Support</a></dd>
+                    <dd><a href="/manual/latest/contributing.html">Contributing</a></dd>
+                    <dd><a href="/manual/latest/mailing-lists.html">Mailing Lists</a></dd>
+                    <dd><a href="/community/user-stories/">User stories</a></dd>
+                    <dd><a href="/community/articles/">Articles</a></dd>
+                    <dd><a href="/community/books/">Books</a></dd>
+                    <dd><a href="/community/team/">Team</a></dd>
+                </div>
             </dl>
-
             <dl>
                 <dt>About</dt>
-                <dd><a href="/acknowledgments/">Acknowledgments</a></d>
-                <dd><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/events/current-event.html" title="Apache Events">Apache Events</a></dd>
-                <dd><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/licenses/" title="License">License</a></dd>
-                <dd><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/security/" title="Security">Security</a></dd>
-                <dd><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/foundation/sponsorship.html" title="Sponsorship">Sponsorship</a></dd>
-                <dd><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/foundation/thanks.html" title="Thanks">Thanks</a></dd>
+                <input type="checkbox" id="show-about"/>
+                <label for="show-about"><img class="show-menu" src="/_/img/show-footer-menu.svg"></label>
+                <label for="show-about"><img class="hide-menu" src="/_/img/hide-footer-menu.svg"></label>
+                <div class="footer-menu">
+                    <dd><a href="/acknowledgments/">Acknowledgments</a></d>
+                    <dd><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/events/current-event.html" title="Apache Events">Apache Events</a></dd>
+                    <dd><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/licenses/" title="License">License</a></dd>
+                    <dd><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/security/" title="Security">Security</a></dd>
+                    <dd><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/foundation/sponsorship.html" title="Sponsorship">Sponsorship</a></dd>
+                    <dd><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/foundation/thanks.html" title="Thanks">Thanks</a></dd>
+                </div>
             </dl>
-
-            <p>
+            <p class="remark">
                 &copy; 2004-{{ now.Format "2006" }} The <a href="https://apache.org">Apache Software Foundation</a>.<br>
                 Apache Camel, Camel, Apache, the Apache feather logo, and the Apache Camel project logo are trademarks of
                 The Apache Software Foundation. All other marks mentioned may be trademarks or registered trademarks of
@@ -49,7 +76,20 @@
                     <a href="https://netlify.com">This site is powered by Netlify</a>
                 {{ end }}
             </p>
-
+            <div class="resources">
+                <div class="context">
+                    <a href="/privacy-policy/">Privacy Policy</a>
+                </div>
+                <div class="context">
+                    <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/foundation/policies/conduct">Code of Conduct</a>
+                </div>
+            </div>
+            <div class="break-row-footer"></div>
+            <div id="social-media" class="footer-icons">
+                <a rel="noopener noreferrer nofollow" href="https://github.com/apache/camel/" title="Collaborate on GitHub"><svg class="brand-icon"><use href="{{ "_/img/brand-logos.svg#github" | relURL }}" /></svg></a>
+                <a rel="noopener noreferrer nofollow" href="https://gitter.im/apache/apache-camel" title="Chat on Gitter"><svg class="brand-icon"><use href="{{ "/_/img/brand-logos.svg#gitter" | relURL }}" /></svg></a>
+                <a rel="noopener noreferrer nofollow" href="https://twitter.com/ApacheCamel" title="Follow Apache Camel on Twitter"><svg class="brand-icon"><use href="{{ "/_/img/brand-logos.svg#twitter" | relURL }}" /></svg></a>
+            </div>
         </div>
     </footer>
     <script src="{{ path.Join "_" (index .Site.Data "rev-manifest" "js/vendor/algoliasearch.js") | relURL }}"></script>