From dd08019745c1701d29fca2a29caecb6dab79697a Mon Sep 17 00:00:00 2001
From: youbo <42180410+spongebody@users.noreply.github.com>
Date: Thu, 7 Sep 2023 16:06:51 +0800
Subject: [PATCH] Initial completion of user page development (#1450)

---
 docs/i18n/zh/code.json                    |  16 ++++
 docs/src/pages/{users.md => old_users.md} |   0
 docs/src/pages/users.js                   | 101 ++++++++++++++++++++++
 3 files changed, 117 insertions(+)
 rename docs/src/pages/{users.md => old_users.md} (100%)
 create mode 100644 docs/src/pages/users.js

diff --git a/docs/i18n/zh/code.json b/docs/i18n/zh/code.json
index 3cb42849..8dec86f4 100644
--- a/docs/i18n/zh/code.json
+++ b/docs/i18n/zh/code.json
@@ -296,5 +296,21 @@
   "homepage.introduction.thirdPartDesc": {
     "message": "支持自定义时长线程池运行数据采集存储，同时也支持 Prometheus、InfluxDB 等采集监控，通过 Grafana 或内置监控页面提供可视化大屏监控运行指标",
     "description": "the desc for the third introduction part"
+  },
+  "companyPage.title": {
+    "message": "谁在使用 Hippo4j ?",
+    "description": "the title for the company page"
+  },
+  "companyPage.descriptionText": {
+    "message": "非常感谢大家对 Hippo4j 的关注和支持，这是我们前进最大的动力。",
+    "description": "the description for the company page"
+  },
+  "companyPage.questionText": {
+    "message": "正在使用Hippo4j ?",
+    "description": "the text for the company question"
+  },
+  "companyPage.linkText": {
+    "message": "点击进行登记",
+    "description": "the text for the company page link"
   }
 }
diff --git a/docs/src/pages/users.md b/docs/src/pages/old_users.md
similarity index 100%
rename from docs/src/pages/users.md
rename to docs/src/pages/old_users.md
diff --git a/docs/src/pages/users.js b/docs/src/pages/users.js
new file mode 100644
index 00000000..be8b207c
--- /dev/null
+++ b/docs/src/pages/users.js
@@ -0,0 +1,101 @@
+import React from "react";
+import Layout from "@theme/Layout";
+import companyData from "@site/static/json/company_logo.json";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import Translate from "@docusaurus/Translate";
+function CompanyCards({ companies }) {
+  return (
+    <div className="grid sm:grid-cols-2 grid-cols-1 md:px-16 md:grid-cols-3 lg:grid-cols-5 gap-4 mb-16 lg:px-2 px-10">
+      {companies.map((company) => (
+        <div
+          onClick={() => window.open(company.url)}
+          key={company.url}
+          className="bg-white rounded-lg overflow-hidden shadow-sm transform cursor-pointer transition-all duration-500 hover:scale-110"
+          style={{ border: "1px solid #E5E7EB" }}
+        >
+          <div className="flex dark:text-black items-center justify-center h-28">
+            <div
+              className="h-24 w-24 object-contain"
+              style={{ position: "relative" }}
+            >
+              <img
+                src={useBaseUrl(company.logo)}
+                alt={`${company.name}`}
+                className="h-24 w-24 object-contain"
+                onError={(e) => {
+                  e.target.style.display = "none"; // Hide the image if it fails to load
+                  e.target.nextSibling.style.display = "flex"; // Show the alt text
+                }}
+              />
+              <div
+                className="flex items-center justify-center absolute inset-0 text-center"
+                style={{
+                  display: "none", // Hide the alt text by default
+                }}
+              >
+                {company.name}
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+export default function OurUsers() {
+  return (
+    <Layout title="OurUsers" description="companies using our product">
+      <div className="max-w-screen-lg mx-auto dark:text-white">
+        {/* text description*/}
+        <div className="max-w-screen-sm sm:mx-auto mx-10 text-center my-8 ">
+          <div className="text-center mt-8">
+            <h2 className="text-3xl font-bold mb-4">
+              <Translate
+                id="companyPage.title"
+                description="the title for the company page"
+              >
+                Who is using Hippo4j?
+              </Translate>
+            </h2>
+            <div
+              className="mx-auto h-1 bg-gradient-to-r from-green-400 to-blue-500 mb-4"
+              style={{ width: "30%" }}
+            ></div>
+          </div>
+          <div className="flex flex-col items-center mx-auto">
+            <p className="text-lg mb-2 max-w-1/2" style={{ lineHeight: "1.5" }}>
+              <Translate
+                id="companyPage.descriptionText"
+                description="the description for the company page"
+              >
+                Thank you very much for your attention and support to Hippo4j.
+                This is our greatest motivation to move forward.
+              </Translate>{" "}
+            </p>
+            <p className="text-lg mb-4 max-w-1/2" style={{ lineHeight: "1.5" }}>
+              <Translate
+                id="companyPage.questionText"
+                description="the text for the company question"
+              >
+                Are you using Hippo4j?
+              </Translate>{" "}
+              <a
+                href="https://github.com/opengoofy/hippo4j/issues/13"
+                className="text-blue-500 hover:text-blue-700 font-bold"
+              >
+                <Translate
+                  id="companyPage.linkText"
+                  description="the text for the company page link"
+                >
+                  Click to register
+                </Translate>
+              </a>
+            </p>
+          </div>
+        </div>
+        {/* company logo display */}
+        <CompanyCards companies={companyData} className="ml-0" />
+      </div>
+    </Layout>
+  );
+}