From b69d66704ccc4ead9e2973d4d68e315d3fcde759 Mon Sep 17 00:00:00 2001
From: Mohit Davar <mohitdavar2004@gmail.com>
Date: Fri, 8 Aug 2025 20:42:03 +0000
Subject: [PATCH] improvement in ui and ux of footer links and back-to-top

Signed-off-by: Mohit Davar <mohitdavar2004@gmail.com>
---
 layouts/partials/footer_section.html | 125 +++++++++++++++++++--------
 1 file changed, 90 insertions(+), 35 deletions(-)

diff --git a/layouts/partials/footer_section.html b/layouts/partials/footer_section.html
index 6f5dd7b4..09e3a605 100644
--- a/layouts/partials/footer_section.html
+++ b/layouts/partials/footer_section.html
@@ -1,52 +1,107 @@
-<footer class="site-footer">
+<footer class="site-footer" style="text-align: center; padding: 40px 20px; color: #fff;">
   {{ with .Site.GetPage "privacy.md" }}
-  <p class="powered-by">
+  <p class="powered-by" style="margin-bottom: 30px;">
     {{ printf "<a href=\"%s\">%s</a>" .RelPermalink .Title | safeHTML }}
   </p>
   {{ end }}
 
   <!-- <p class="powered-by"> -->
-    <!-- {{ with .Site.Copyright }}{{ . | markdownify}}  {{ end }} -->
+  <!-- {{ with .Site.Copyright }}{{ . | markdownify}}  {{ end }} -->
   {{ if .IsHome }}
-    {{ if eq .Language.ContentDir "content/en"}}
-       <div style="font-size: 18px;color: #fff;text-align: center;margin-top: 20px;">Volcano is a <a href="https://www.cncf.io/" style="color: #c8000b;">Cloud Native Computing Foundation</a> incubating project.</div>
-       <div style="margin: 52px 0 36px;">
-         <img src="/img/logo_cloudnative.png" alt="cloudnative logo" width="auto;" height="100px;" style="margin: 0 auto;">
-       </div>
-       <div style="font-size: 14px;color: #fff;text-align: center;">The Linux Foundation has registered trademarks and uses trademarks. For a list of trademarks of The Linux Foundation, please see our <a href="https://www.linuxfoundation.org/trademark-usage/" style="color: #c8000b;">Trademark Usage </a>page.</br>2025 @ Volcano Project Authors. All rights reserved.</div>
-       <div style="margin-top: 60px;padding-bottom: 40px;">
-         <a href="#">
-           <img src="/img/icon_up.svg" alt="up icon" width="33px;" height="33px;" style="margin:0px auto;">
-         </a>
-       </div>
-    {{ else }}
-       <div style="font-size: 18px;color: #fff;text-align: center;margin-top: 20px;">Volcano是 <a href="https://www.cncf.io/" style="color: #c8000b;">云原生计算基金会</a> 孵化项目</div>
-       <div style="margin: 52px 0 36px;">
-         <img src="/img/logo_cloudnative.png" alt="cloudnative logo" width="auto;" height="100px;" style="margin: 0 auto;">
-       </div>
-       <div style="font-size: 14px;color: #fff;text-align: center;">Linux基金会已注册并使用相关商标。 有关Linux基金会的商标列表，请参见 <a style="color: #c8000b;">商标使用</a> 页面。</br>最终解释权归2025 @ Volcano 项目作者所有。保留一切权利。</div>
-       <div style="margin-top: 60px;padding-bottom: 40px;">
-         <a href="#">
-           <img src="/img/icon_up.svg" alt="up icon" width="33px;" height="33px;" style="margin:0px auto;">
-         </a>
-       </div>
-    {{ end }}
+  {{ if eq .Language.ContentDir "content/en"}}
+  <div style="font-size: 18px; margin: 30px 0;">
+    Volcano is a <a href="https://www.cncf.io/" style="color: #c8000b; transition: color 0.3s ease;">Cloud Native
+      Computing Foundation</a> incubating project.
+  </div>
+  <div style="margin: 50px 0;">
+    <img src="/img/logo_cloudnative.png" alt="cloudnative logo" width="auto" height="100px"
+      style="display: block; margin: 0 auto;">
+  </div>
+  <div style="font-size: 14px; line-height: 1.6; max-width: 800px; margin: 0 auto;">
+    The Linux Foundation has registered trademarks and uses trademarks. For a list of trademarks of The Linux
+    Foundation,
+    please see our
+    <a href="https://www.linuxfoundation.org/trademark-usage/"
+      style="color: #c8000b; transition: color 0.3s ease;">Trademark Usage </a> page.<br>
+    {{ now.Format "2006" }} © Volcano Project Authors. All rights reserved.
+  </div>
+  <div style="margin-top: 40px; padding-bottom: 20px;">
+    <a href="#" class="back-to-top" style="text-decoration: none;">
+      <div class="back-to-top-btn" style="width: fit-content; margin: 0px auto; transition: all 0.3s ease;">
+        <img src="/img/icon_up.svg" alt="up icon" width="33px" height="33px"
+          style="display: block; margin: 0 auto; transition: transform 0.3s ease;">
+      </div>
+    </a>
+  </div>
   {{ else }}
-  <div style="padding-bottom: 40px;">
-     <a href="#">
-       <img src="/img/icon_up1.png" alt="up icon" width="auto;" height="auto;" style="margin:0px auto;">
-     </a>
-   </div>
-   <p class="powered-by" style="padding-bottom: 20px;">{{ with .Site.Copyright }}{{ . | markdownify}}  {{ end }}</p>
+  <div style="font-size: 18px; margin: 30px 0px;">
+    Volcano是 <a href="https://www.cncf.io/" tyle="color: #c8000b; transition: color 0.3s ease;">云原生计算基金会</a> 孵化项目
+  </div>
+  <div style="margin: 50px 0;">
+    <img src="/img/logo_cloudnative.png" alt="cloudnative logo" width="auto" height="100px"
+      style="display: block; margin: 0 auto;">
+  </div>
+  <div style="font-size: 14px; line-height: 1.6; max-width: 800px; margin: 0 auto 50px auto;">
+    Linux基金会已注册并使用相关商标。 有关Linux基金会的商标列表，请参见
+    <a href="https://www.linuxfoundation.org/trademark-usage/" style="color: #c8000b; transition: color 0.3s ease;">商标使用</a> 页面。<br>
+    最终解释权归 {{ now.Format "2006" }} © Volcano 项目作者所有。保留一切权利。
+  </div>
+  <div style="margin-top: 40px; padding-bottom: 20px;">
+    <a href="#" class="back-to-top" style="text-decoration: none;">
+      <div class="back-to-top-btn" style="width: fit-content; margin: 0px auto; transition: all 0.3s ease;">
+        <img src="/img/icon_up.svg" alt="up icon" width="33px" height="33px"
+          style="display: block; margin: 0 auto; transition: transform 0.3s ease;">
+      </div>
+    </a>
+  </div>
+  {{ end }}
+  {{ else }}
+  <div style="padding-bottom: 30px;">
+    <a href="#" class="back-to-top" style="text-decoration: none;">
+      <div class="back-to-top-btn" style="width: fit-content; margin: 0px auto; transition: all 0.3s ease;">
+        <img src="/img/icon_up1.png" alt="up icon" width="auto" height="auto"
+          style="display: block; margin: 0 auto; transition: transform 0.3s ease;">
+      </div>
+    </a>
+  </div>
+  <p class="powered-by" style="padding-bottom: 20px;">
+    {{ with .Site.Copyright }}{{ . | markdownify}} {{ end }}
+  </p>
 
   {{ end }}
-    <!-- {{ if ne .Type "docs" }} -->
-    <!-- <span class="float-right" aria-hidden="true">
+  <!-- {{ if ne .Type "docs" }} -->
+  <!-- <span class="float-right" aria-hidden="true">
       <a href="#" id="back_to_top">
         <span class="button_icon">
           <i class="fas fa-chevron-up fa-2x"></i>
         </span>
       </a>
     </span> -->
-    <!-- {{ end }} -->
+  <!-- {{ end }} -->
 </footer>
+
+<style>
+  .back-to-top-btn:hover img {
+    transform: translateY(-3px);
+  }
+
+  footer a:hover {
+    color: #ff1a1a !important;
+  }
+
+  .back-to-top {
+    cursor: pointer;
+  }
+</style>
+
+<script>
+  // Smooth scroll to top functionality
+  document.addEventListener('DOMContentLoaded', function () {
+    document.querySelectorAll('.back-to-top').forEach(btn => {
+      btn.addEventListener('click', function (e) {
+        e.preventDefault();
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+      });
+    });
+  });
+</script>
\ No newline at end of file