Fix z-index and animation (#15407)

Co-authored-by: Craig Box <craig.box@gmail.com>

content/en/_index.html

@@ -28,7 +28,7 @@ description: A service mesh for observability, security in depth, and management
 </script>
 
 <main class="landing">
-    <section id="banner">
+    <section id="hero">
         <h1 id="title">
             Service Mesh. Simplified.
         </h1>

content/zh/_index.html

@@ -30,7 +30,7 @@ description: 用于可观测性、深度安全性和加速管理部署周期的
 </script>
 
 <main class="landing">
-    <section id="banner">
+    <section id="hero">
         <h1 id="title">
             服务网格。简化。
         </h1>

src/sass/base/_constants.scss

@@ -26,6 +26,7 @@ $footerHeight: 7rem;
 $modal-z: 110;
 $header-z: 100;
 $overlay-z: 75;
+$hero-text-z: 70;
 $sidebar-z: 50;
 $banner-z: 20;
 $floating-button-z: 15;

src/sass/misc/_landing.scss

@@ -8,7 +8,7 @@
         }
     }
 
-    #banner {
+    #hero {
         position: relative;
         display: flex;
         flex-direction: column;
@@ -31,7 +31,6 @@
         h1 {
             margin-bottom: .5rem;
             font-weight: var(--semiBoldWeight);
-            z-index: 99999;
 
             @media (min-width: $bp-md) {
                 margin-bottom: 1.5rem;
@@ -40,7 +39,7 @@
 
         h1, .subtitle {
             color: #ffffff;
-            z-index: 99999;
+            z-index: $hero-text-z;
         }
 
         &-animation {

src/ts/headerAnimation.js

@@ -77,13 +77,13 @@ function createCamera(
 
 // Function to create a WebGLRenderer with specified properties
 function createRenderer(rendererProps = {}) {
-    const container = document.getElementById("banner");
+    const container = document.getElementById("hero");
     const renderer = new THREE.WebGLRenderer({ ...rendererProps, alpha: true });
-    renderer.domElement.id = "banner-animation";
+    renderer.domElement.id = "hero-animation";
     renderer.setPixelRatio(window.devicePixelRatio);
     renderer.setSize(container.offsetWidth, container.offsetHeight);
     renderer.setClearColor(0xffffff, 0);
-    renderer.domElement.id = "banner-animation";
+    renderer.domElement.id = "hero-animation";
     return renderer;
 }
 
@@ -96,13 +96,13 @@ function runAnimation(
     enableAnimation = false,
     uniforms = getDefaultUniforms()
 ) {
-    // Append banner-animation canvas to banner
-    const container = document.getElementById("banner");
+    // Append hero-animation canvas to hero
+    const container = document.getElementById("hero");
     container.appendChild(renderer.domElement);
 
     // Register resize listener
     window.addEventListener("resize", () => {
-        let container = document.getElementById("banner");
+        let container = document.getElementById("hero");
         camera.aspect = container.offsetWidth / container.offsetHeight;
         camera.updateProjectionMatrix();
         renderer.setSize(container.offsetWidth, container.offsetHeight);
@@ -164,7 +164,7 @@ const uniforms = {
         },
     },
     // Point size for rendering
-    u_pointsize: { value: 6.0 },
+    u_pointsize: { value: 3.0 },
 
     // Parameters for the wave1 animation
     u_transformation_freq_1: { value: 3.0 },