[AMORO-3628] Add user logo wall on the home page. (#4010)

* [AMORO-3628] Add users logo wall in the home page

* update

Co-authored-by: Claude

Author: xxubai

site/amoro-site/hugo.toml

@@ -50,6 +50,68 @@ sectionPagesMenu = "main"
   desc = "Can be easily deployed and used in private environments, cloud environments, hybrid cloud environments, and multi-cloud environments."
   icon = "Infrastructure-Idependent"
 
+# Users who are using Amoro
+[[params.users]]
+  name = "ByteDance"
+  logo = "bytedance.png"
+[[params.users]]
+  name = "Tencent Cloud"
+  logo = "tencent-cloud.svg"
+[[params.users]]
+  name = "Cisco"
+  logo = "cisco.png"
+[[params.users]]
+  name = "Youdao"
+  logo = "youdao.png"
+[[params.users]]
+  name = "Huya"
+  logo = "huya.png"
+[[params.users]]
+  name = "NetEase Media"
+  logo = "netease-media.png"
+[[params.users]]
+  name = "GREE"
+  logo = "gree.png"
+[[params.users]]
+  name = "Lalamove"
+  logo = "lalamove.png"
+[[params.users]]
+  name = "Lilith Games"
+  logo = "lilith.png"
+[[params.users]]
+  name = "Huatai Securities"
+  logo = "huatai.png"
+[[params.users]]
+  name = "Gaoji Medical"
+  logo = "gaoji.png"
+[[params.users]]
+  name = "TRS"
+  logo = "trs.png"
+[[params.users]]
+  name = "Shunwang"
+  logo = "shunwang.png"
+[[params.users]]
+  name = "China Telecom Zhejiang"
+  logo = "china-telecom.png"
+[[params.users]]
+  name = "SEMI"
+  logo = "semi.png"
+[[params.users]]
+  name = "China Mobile Suzhou"
+  logo = "china-mobile.png"
+[[params.users]]
+  name = "Onething Tech"
+  logo = "onething.svg"
+[[params.users]]
+  name = "DMALL"
+  logo = "dmall.png"
+[[params.users]]
+  name = "Ctrip"
+  logo = "ctrip.png"
+[[params.users]]
+  name = "Huifu"
+  logo = "huifu.svg"
+
 [outputFormats.SearchIndex]
 baseName = "landingpagesearch"
 mediaType = "application/json"

site/amoro-theme/layouts/index.html

@@ -22,6 +22,7 @@
     <div id="content">
     {{ partial "home-intro.html" . }}
     {{ partial "home-content.html" . }}
+    {{ partial "home-users.html" . }}
     {{ partial "home-feature.html" . }}
     {{ partial "home-footer.html" . }}
     <!-- Include termynal.js for landing-page homepage -->

site/amoro-theme/layouts/partials/home-users.html

@@ -0,0 +1,41 @@
+<!-- - Licensed to the Apache Software Foundation (ASF) under one or more-->
+<!-- - contributor license agreements.  See the NOTICE file distributed with-->
+<!-- - this work for additional information regarding copyright ownership.-->
+<!-- - The ASF licenses this file to You under the Apache License, Version 2.0-->
+<!-- - (the "License"); you may not use this file except in compliance with-->
+<!-- - the License.  You may obtain a copy of the License at-->
+<!-- - -->
+<!-- -   http://www.apache.org/licenses/LICENSE-2.0-->
+<!-- - -->
+<!-- - Unless required by applicable law or agreed to in writing, software-->
+<!-- - distributed under the License is distributed on an "AS IS" BASIS,-->
+<!-- - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.-->
+<!-- - See the License for the specific language governing permissions and-->
+<!-- - limitations under the License.-->
+<div id="home-users">
+  <div class="content">
+    <div class="title">Who is Using Amoro</div>
+    <div class="subtitle">Trusted by leading companies worldwide</div>
+    <div class="users-wall">
+      <div class="users-track">
+        {{range .Site.Params.users}}
+        <div class="user-item" title="{{ .name }}">
+          <img src="{{ .Site.BaseURL }}/img/users/{{ .logo }}" alt="{{ .name }}" />
+        </div>
+        {{end}}
+        <!-- Duplicate for infinite scroll effect -->
+        {{range .Site.Params.users}}
+        <div class="user-item" title="{{ .name }}">
+          <img src="{{ .Site.BaseURL }}/img/users/{{ .logo }}" alt="{{ .name }}" />
+        </div>
+        {{end}}
+      </div>
+    </div>
+    <div class="add-company">
+      <a href="https://github.com/apache/amoro/issues/1853" target="_blank" class="btn btn-add">
+        Add Your Company
+      </a>
+    </div>
+  </div>
+</div>
+

site/amoro-theme/static/css/home-page.css

@@ -206,4 +206,150 @@
 
 #home-footer .apache .logo{
   padding-top: 20px;
-}
+}
+
+/* User Wall Styles */
+#home-users {
+  background: #fff;
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+}
+
+#home-users .content {
+  width: 100%;
+  max-width: 1182px;
+  padding: 64px 41px;
+}
+
+#home-users .content .title {
+  font-size: 32px;
+  font-weight: bold;
+  line-height: 24px;
+  text-align: center;
+  margin-bottom: 16px;
+}
+
+#home-users .content .subtitle {
+  font-size: 16px;
+  color: #53576a;
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+#home-users .users-wall {
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+#home-users .users-wall::before,
+#home-users .users-wall::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100px;
+  z-index: 2;
+  pointer-events: none;
+}
+
+#home-users .users-wall::before {
+  left: 0;
+  background: linear-gradient(to right, #fff 0%, transparent 100%);
+}
+
+#home-users .users-wall::after {
+  right: 0;
+  background: linear-gradient(to left, #fff 0%, transparent 100%);
+}
+
+#home-users .users-track {
+  display: flex;
+  animation: scroll-left 40s linear infinite;
+  width: fit-content;
+}
+
+#home-users .users-track:hover {
+  animation-play-state: paused;
+}
+
+@keyframes scroll-left {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-50%);
+  }
+}
+
+#home-users .user-item {
+  flex-shrink: 0;
+  width: 180px;
+  height: 80px;
+  margin: 0 20px;
+  padding: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f5f6fa;
+  border-radius: 8px;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+#home-users .user-item:hover {
+  transform: scale(1.05);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+
+#home-users .user-item img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  filter: grayscale(100%);
+  opacity: 0.7;
+  transition: filter 0.3s ease, opacity 0.3s ease;
+}
+
+#home-users .user-item:hover img {
+  filter: grayscale(0%);
+  opacity: 1;
+}
+
+#home-users .add-company {
+  text-align: center;
+  margin-top: 40px;
+}
+
+#home-users .btn-add {
+  display: inline-block;
+  padding: 12px 32px;
+  background: #0036A1;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 500;
+  border-radius: 8px;
+  text-decoration: none;
+  transition: background 0.3s ease;
+}
+
+#home-users .btn-add:hover {
+  background: #002880;
+  color: #fff;
+  text-decoration: none;
+}
+
+@media screen and (max-width: 800px) {
+  #home-users .user-item {
+    width: 140px;
+    height: 60px;
+    margin: 0 12px;
+  }
+
+  #home-users .users-wall::before,
+  #home-users .users-wall::after {
+    width: 50px;
+  }
+}