Improve layout and style (#1492)

* modify docusaurus.config.js file

* small fix

* Adjust the layout of the homepage and introduce the GitHub button style.
pull/1504/head
youbo 8 months ago committed by GitHub
parent 2922aaf78f
commit c9abea4c37
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -1,49 +1,49 @@
// @ts-check // @ts-check
// Note: type annotations allow type checking and IDEs autocompletion // Note: type annotations allow type checking and IDEs autocompletion
const lightCodeTheme = require("prism-react-renderer/themes/github"); const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require("prism-react-renderer/themes/dracula"); const darkCodeTheme = require('prism-react-renderer/themes/dracula');
/** @type {import('@docusaurus/types').Config} */ /** @type {import('@docusaurus/types').Config} */
const config = { const config = {
title: "Hippo4j", title: 'Hippo4j',
tagline: "动态可观测线程池框架,为业务系统提高线上运行保障能力", tagline: '动态可观测线程池框架,为业务系统提高线上运行保障能力',
url: "https://hippo4j.cn", url: 'https://hippo4j.cn',
baseUrl: "/", baseUrl: '/',
onBrokenLinks: "throw", onBrokenLinks: 'throw',
onBrokenMarkdownLinks: "warn", onBrokenMarkdownLinks: 'warn',
favicon: "img/hippo4j_favicon.ico", favicon: 'img/hippo4j_favicon.ico',
// GitHub pages deployment config. // GitHub pages deployment config.
// If you aren't using GitHub pages, you don't need these. // If you aren't using GitHub pages, you don't need these.
organizationName: "hippo4j", // Usually your GitHub org/user name. organizationName: 'hippo4j', // Usually your GitHub org/user name.
projectName: "hippo4j.github.io", // Usually your repo name. projectName: 'hippo4j.github.io', // Usually your repo name.
deploymentBranch: "main", deploymentBranch: 'main',
// Even if you don't use internalization, you can use this field to set useful // Even if you don't use internalization, you can use this field to set useful
// metadata like html lang. For example, if your site is Chinese, you may want // metadata like html lang. For example, if your site is Chinese, you may want
// to replace "en" with "zh-Hans". // to replace "en" with "zh-Hans".
i18n: { i18n: {
defaultLocale: "zh", defaultLocale: 'zh',
locales: ["en", "zh"], locales: ['en', 'zh'],
localeConfigs: { localeConfigs: {
en: { en: {
label: "English", label: 'English',
direction: "ltr", direction: 'ltr',
}, },
zh: { zh: {
label: "简体中文", label: '简体中文',
direction: "ltr", direction: 'ltr',
}, },
}, },
}, },
presets: [ presets: [
[ [
"classic", 'classic',
/** @type {import('@docusaurus/preset-classic').Options} */ /** @type {import('@docusaurus/preset-classic').Options} */
({ ({
docs: { docs: {
sidebarPath: require.resolve("./sidebars.js"), sidebarPath: require.resolve('./sidebars.js'),
// Please change this to your repo. // Please change this to your repo.
// Remove this to remove the "edit this page" links. // Remove this to remove the "edit this page" links.
// Do not automatically expand the menu // Do not automatically expand the menu
@ -55,10 +55,10 @@ const config = {
// Please change this to your repo. // Please change this to your repo.
// Remove this to remove the "edit this page" links. // Remove this to remove the "edit this page" links.
editUrl: editUrl:
"https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/", 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
}, },
theme: { theme: {
customCss: require.resolve("./src/css/custom.css"), customCss: require.resolve('./src/css/custom.css'),
}, },
}), }),
], ],
@ -66,21 +66,21 @@ const config = {
plugins: [ plugins: [
[ [
"@docusaurus/plugin-content-docs", '@docusaurus/plugin-content-docs',
{ {
id: "community", id: 'community',
path: "community", path: 'community',
routeBasePath: "community", routeBasePath: 'community',
sidebarPath: require.resolve("./sidebarsCommunity.js"), sidebarPath: require.resolve('./sidebarsCommunity.js'),
}, },
], ],
async function myPlugin(context, options) { async function myPlugin(context, options) {
return { return {
name: "docusaurus-tailwindcss", name: 'docusaurus-tailwindcss',
configurePostCss(postcssOptions) { configurePostCss(postcssOptions) {
// Appends TailwindCSS and AutoPrefixer. // Appends TailwindCSS and AutoPrefixer.
postcssOptions.plugins.push(require("tailwindcss")); postcssOptions.plugins.push(require('tailwindcss'));
postcssOptions.plugins.push(require("autoprefixer")); postcssOptions.plugins.push(require('autoprefixer'));
return postcssOptions; return postcssOptions;
}, },
}; };
@ -92,64 +92,64 @@ const config = {
({ ({
autoCollapseCategories: true, autoCollapseCategories: true,
announcementBar: { announcementBar: {
id: "announcementBar-1", // Increment on change id: 'announcementBar-1', // Increment on change
content: content:
'⭐️ If you like hippo4j, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/opengoofy/hippo4j">GitHub</a> ⭐️', '⭐️ If you like hippo4j, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/opengoofy/hippo4j">GitHub</a> ⭐️',
backgroundColor: "#fafbfc", backgroundColor: '#fafbfc',
textColor: "#091E42", textColor: '#091E42',
isCloseable: false, isCloseable: false,
}, },
navbar: { navbar: {
title: "", title: '',
logo: { logo: {
alt: "Hippo4j 动态可观测线程池框架", alt: 'Hippo4j 动态可观测线程池框架',
src: "img/hippo4j.png", src: 'img/hippo4j.png',
}, },
items: [ items: [
{ {
type: "docSidebar", type: 'docSidebar',
docId: "intro", docId: 'intro',
position: "left", position: 'left',
sidebarId: "user_docs", sidebarId: 'user_docs',
label: "文档", label: '文档',
}, },
{ {
to: "/community/contributor-guide", to: '/community/contributor-guide',
label: "社区", label: '社区',
position: "left", position: 'left',
activeBaseRegex: `/community/`, activeBaseRegex: `/community/`,
}, },
/*{ to: "/team", label: "团队", position: "left" },*/ /*{ to: "/team", label: "团队", position: "left" },*/
{ to: "/users", label: "采用公司", position: "left" }, { to: '/users', label: '采用公司', position: 'left' },
{ to: "/group", label: "加群沟通", position: "left" }, { to: '/group', label: '加群沟通', position: 'left' },
/*{to: '/blog', label: '博客', position: 'left'},*/ /*{to: '/blog', label: '博客', position: 'left'},*/
{ {
href: "http://console.hippo4j.cn/index.html", href: 'http://console.hippo4j.cn/index.html',
label: "控制台样例", label: '控制台样例',
position: "left", position: 'left',
}, },
{ {
href: "https://magestack.cn", href: 'https://magestack.cn',
label: "🚀 拿个offer", label: '🚀 拿个offer',
position: "left", position: 'left',
}, },
{ {
type: "docsVersionDropdown", type: 'docsVersionDropdown',
position: "right", position: 'right',
dropdownActiveClassDisabled: true, dropdownActiveClassDisabled: true,
}, },
{ type: "localeDropdown", position: "right" }, { type: 'localeDropdown', position: 'right' },
/*{ /*{
href: 'https://gitee.com/mabaiwancn/hippo4j', href: 'https://gitee.com/mabaiwancn/hippo4j',
label: 'Gitee', label: 'Gitee',
position: 'right', position: 'right',
},*/ },*/
{ {
href: "https://github.com/opengoofy/hippo4j", href: 'https://github.com/opengoofy/hippo4j',
className: "header-github-link", className: 'header-github-link',
"aria-label": "GitHub repository", 'aria-label': 'GitHub repository',
position: "right", position: 'right',
}, },
/*{ /*{
@ -160,57 +160,57 @@ const config = {
], ],
}, },
footer: { footer: {
style: "dark", style: 'dark',
links: [ links: [
{ {
title: "Docs", title: 'Docs',
items: [ items: [
{ {
label: "Intro", label: 'Intro',
to: "/docs/user_docs/intro", to: '/docs/user_docs/intro',
}, },
{ {
label: "Config Mode", label: 'Config Mode',
to: "/docs/user_docs/getting_started/config/hippo4j-config-start", to: '/docs/user_docs/getting_started/config/hippo4j-config-start',
}, },
{ {
label: "Server Mode", label: 'Server Mode',
to: "/docs/user_docs/getting_started/server/hippo4j-server-start", to: '/docs/user_docs/getting_started/server/hippo4j-server-start',
}, },
], ],
}, },
{ {
title: "Community", title: 'Community',
items: [ items: [
{ {
label: "Group", label: 'Group',
href: "https://hippo4j.cn/group", href: 'https://hippo4j.cn/group',
}, },
{ {
label: "WeChat", label: 'WeChat',
href: "https://mp.weixin.qq.com/s/diVHYvwiuYH9aWpZDPc27g", href: 'https://mp.weixin.qq.com/s/diVHYvwiuYH9aWpZDPc27g',
}, },
], ],
}, },
{ {
title: "More", title: 'More',
items: [ items: [
{ {
label: "Gitee", label: 'Gitee',
href: "https://gitee.com/opengoofy/hippo4j", href: 'https://gitee.com/opengoofy/hippo4j',
}, },
{ {
label: "GitHub", label: 'GitHub',
href: "https://github.com/opengoofy/hippo4j", href: 'https://github.com/opengoofy/hippo4j',
}, },
], ],
}, },
{ {
title: "Links", title: 'Links',
items: [ items: [
{ {
label: "推广合作", label: '推广合作',
href: "https://hippo4j.cn/docs/user_docs/other/operation", href: 'https://hippo4j.cn/docs/user_docs/other/operation',
}, },
], ],
}, },
@ -221,7 +221,7 @@ const config = {
prism: { prism: {
theme: lightCodeTheme, theme: lightCodeTheme,
darkTheme: darkCodeTheme, darkTheme: darkCodeTheme,
additionalLanguages: ["java"], additionalLanguages: ['java'],
}, },
}), }),
}; };

@ -262,7 +262,7 @@
"description": "The homepage title description" "description": "The homepage title description"
}, },
"homepage.titleDescription2": { "homepage.titleDescription2": {
"message": "动态可观测线程池框架,为业务系统提高线上运行保障能力", "message": "动态可观测Java线程池框架,为你的业务系统提高线上运行保障能力",
"description": "The homepage title description" "description": "The homepage title description"
}, },
"homepage.startButton": { "homepage.startButton": {
@ -326,7 +326,7 @@
"description": "The third desc for fristPart " "description": "The third desc for fristPart "
}, },
"homepage.introduction.secondPartDesc1": { "homepage.introduction.secondPartDesc1": {
"message": "应用程序线程池运行时点,提供四个告警维度。", "message": "应用程序线程池运行时点,提供四个告警维度,并支持自定义时间内不重复报警。",
"description": "The first desc for secondPart " "description": "The first desc for secondPart "
}, },
"homepage.introduction.secondPartDesc2": { "homepage.introduction.secondPartDesc2": {
@ -354,7 +354,11 @@
"description": "The p1 for the secondTitle part" "description": "The p1 for the secondTitle part"
}, },
"homepage.secondTitleDesc2": { "homepage.secondTitleDesc2": {
"message": "提供了线程池动态调整、自定义警报和操作监控等功能,以帮助提高业务系统的运营支持能力。", "message": "提供了线程池动态调整、自定义警报和操作监控等功能。",
"description": "The p1 for the secondTitle part"
},
"homepage.secondTitleDesc3": {
"message": "帮助提高你的业务系统的运营支持能力。",
"description": "The p2 for the secondTitle part" "description": "The p2 for the secondTitle part"
} }
} }

@ -1,93 +1,99 @@
import React from "react"; import React from 'react';
import { Icon } from "@iconify/react"; import { Icon } from '@iconify/react';
import useBaseUrl from "@docusaurus/useBaseUrl"; import useBaseUrl from '@docusaurus/useBaseUrl';
import GithubInfo from "./GithubInfo"; import GithubInfo from './GithubInfo';
import Translate, { translate } from "@docusaurus/Translate"; import Translate, { translate } from '@docusaurus/Translate';
import Link from "@docusaurus/Link"; import Link from '@docusaurus/Link';
const Hero = () => { const Hero = () => {
const bgUrl = useBaseUrl("/img/bg.jpg"); const bgUrl = useBaseUrl('/img/bg.jpg');
return ( return (
<div className=" h-[100vh] lg:h-[58vh] relative text-black dark:text-white"> <header className="hero hero--primary heroBanner_UJJx dark:bg-[#1B1B1D]">
<div className=" absolute inset-0 overflow-hidden bg-repeat"> <div className="my-container dark:text-white">
{/* <div className="absolute inset-0 bg-gray-400 opacity-5 dark:opacity-0"></div> */} <div className="row">
<div className="col col--6">
<div className=" container px-20 py-12 lg:py-8 md:py-8 lg:px-20 md:px-10 mx-auto flex flex-wrap flex-col lg:flex-row items-center"> <h1 className="hero__logo text-5xl font-medium dark:text-white">
{/* <!--Left Col--> */} Hippo4j Thread Pool
<div className="flex flex-col w-full lg:w-1/2 md:w-2/3 justify-center items-start text-center md:text-left"> </h1>
{/* title and desc */} <p className="hero__subtitle">
<div> <Translate
<h1 className="my-4 font-jakarta lg:my-8 md:my-4 text-5xl font-bold leading-tight "> id="homepage.titleDescription2"
Hippo4j Thread Pool description="The homepage title description"
</h1>
<p className="leading-normal hero-image-url text-gray-600 dark:text-gray-100 text-xl mb-0">
<Translate
id="homepage.titleDescription2"
description="The homepage title description"
>
Enhancing the Operational Assurance Capability for Business
Systems Online.
</Translate>
</p>
</div>
{/* button group */}
<div className="flex my-4 lg:my-8 md:my-6 w-full justify-center md:justify-start">
<Link
to="/docs/user_docs/intro"
class="relative mr-4 w-32 text-center lg:w-48 hover:no-underline inline-flex items-center justify-start py-3 overflow-hidden font-semibold text-white transition-all duration-150 ease-in-out rounded bg-blue-500 group"
> >
<span class="absolute bottom-0 left-0 w-full h-1 transition-all duration-150 ease-in-out bg-blue-600 group-hover:h-full"></span> Enhancing the Operational Assurance Capability for Business
Systems Online.
<span class="relative w-full text-center transition-colors duration-200 ease-in-out group-hover:text-white"> </Translate>
Start Learning </p>
</span> <div class="social_VnSH">
</Link>
<a <a
class="github-button"
href="https://github.com/opengoofy/hippo4j" href="https://github.com/opengoofy/hippo4j"
class="relative w-32 hover:no-underline lg:w-48 inline-block text-lg group" data-show-count="true"
aria-label="Star opengoofy/hippo4j on GitHub"
> >
<span class="relative z-10 block px-5 py-3 overflow-hidden font-medium leading-tight text-gray-800 transition-colors duration-300 ease-out border-2 border-gray-900 rounded-lg group-hover:text-white"> Star
<span class="absolute inset-0 w-full h-full px-5 py-3 rounded-lg bg-gray-50"></span> </a>
<span class="absolute left-0 w-48 h-48 -ml-2 transition-all duration-300 origin-top-right -rotate-90 -translate-x-full translate-y-12 bg-gray-900 group-hover:-rotate-180 ease"></span> <a
<span class="relative flex items-center justify-center"> class="github-button ml-4"
{" "} href="https://github.com/opengoofy/hippo4j/fork"
<Icon data-icon="octicon-repo-forked"
className="w-6 h-6 mr-2 rounded-full flex-shrink-0 bg-white text-white" data-show-count="true"
icon="devicon:github" aria-label="Fork opengoofy/hippo4j on GitHub"
/> >
Github Fork
</span>
</span>
<span
class="absolute bottom-0 right-0 w-full h-12 -mb-1 -mr-1 transition-all duration-200 ease-linear bg-gray-900 rounded-lg group-hover:mb-0 group-hover:mr-0"
data-rounded="rounded-lg"
></span>
</a> </a>
</div> </div>
{/* github info */} <div className="buttons_pzbO">
<div className="github-info w-full"> {/* button group */}
<GithubInfo owner="opengoofy" repo="hippo4j" /> <div className="flex mt-6 w-full justify-center">
</div> <Link
to="/docs/user_docs/intro"
className="relative mr-4 w-32 text-center lg:w-48 hover:no-underline inline-flex items-center justify-start py-4 overflow-hidden font-semibold text-white transition-all duration-150 ease-in-out rounded bg-blue-500 group"
>
<span class="absolute bottom-0 left-0 w-full h-1 transition-all duration-150 ease-in-out bg-blue-600 group-hover:h-full"></span>
{/* button test */} <span class="relative w-full text-center transition-colors duration-200 ease-in-out group-hover:text-white">
<div className="flex"></div> Start Learning
</div> </span>
</Link>
{/* <!--Right image--> */} <a
<div className="w-full lg:w-1/2 text-center lg:block "> href="https://github.com/opengoofy/hippo4j"
<img class="relative w-32 hover:no-underline lg:w-48 inline-block text-lg group"
className="hero-img w-full h-auto object-cover lg:h-80 md:h-96 dark:rounded-lg dark:shadow-lg dark:filter-brightness-75" >
// src={useBaseUrl("/img/hero-removebg.png")} <span class="relative z-10 block px-5 py-4 overflow-hidden font-medium leading-tight text-gray-800 transition-colors duration-300 ease-out border-2 border-gray-900 rounded-lg group-hover:text-white">
alt="Hippo4j System" <span class="absolute inset-0 w-full h-full px-5 py-4 rounded-lg bg-gray-100"></span>
/> <span class="absolute left-0 w-52 h-48 -ml-2 transition-all duration-300 origin-top-right -rotate-90 -translate-x-full translate-y-12 bg-gray-900 group-hover:-rotate-180 ease"></span>
<span class="relative flex items-center justify-center">
{' '}
<Icon
className="w-6 h-6 mr-2 rounded-full flex-shrink-0 bg-white text-white"
icon="devicon:github"
/>
Github
</span>
</span>
<span
class="absolute bottom-0 right-0 w-full h-12 -mb-1 -mr-1 transition-all duration-200 ease-linear bg-gray-900 rounded-lg group-hover:mb-0 group-hover:mr-0"
data-rounded="rounded-lg"
></span>
</a>
</div>
</div>
</div>
<div className="col col--6">
<h1 className="hero__title">
<img
className="homeImg_cEyn max-w-[440px] mt-12 -ml-8"
src={useBaseUrl('/img/hero/hero-removebg.png')}
alt="homepage"
/>
</h1>
</div> </div>
</div> </div>
</div> </div>
</div> </header>
); );
}; };

@ -1,140 +1,171 @@
import React from "react"; import React from 'react';
import useBaseUrl from "@docusaurus/useBaseUrl"; import useBaseUrl from '@docusaurus/useBaseUrl';
import Translate from "@docusaurus/Translate"; import Translate from '@docusaurus/Translate';
const Introduction = () => { const Introduction = () => {
return ( return (
<section className="mb-28 dark:text-white"> <section className="dark:text-white">
<div className="introduction-container "> <div className="introduction-container ">
<div className="title-container w-full bg-[#EFEFEF] p-4 mb-12 flex flex-wrap dark:bg-[#242526]"> <div className="title-container w-full bg-[#EFEFEF] dark:text-white flex flex-wrap dark:bg-[#242526]">
<div className="left-image-container px-24 w-full md:w-1/2 sm:w-1/3"> <div className="my-container">
<img <div className="row">
className="w-full -mt-8 h-64 object-contain lg:h-64 md:h-96 dark:rounded-lg " <div className="col col--6 hfeatureImage_Eu74">
alt="Hippo4j System" <img
src={useBaseUrl("/img/introduction/t2.svg")} width="560"
/> height="315"
{/* <div className="introduction-title-image h-64 w-full img-div"></div> */} style={{ width: '560px', height: '315px' }}
</div> src={useBaseUrl('/img/introduction/t.jpg')}
<div className="right-title-container py-4 px-16 md:px-4 md:pt-8 w-full md:w-1/2 sm:w-2/3 sm:px-8"> />
<h2 className="w-full my-2 text-3xl font-medium leading-tight dark:text-white ">
<Translate
id="homepage.secondTitle"
description="The title for the introduction part"
>
What can Hippo4j do?
</Translate>
</h2>
<p className="leading-normal mt-8 max-w-xl md:pr-10 dark:text-white mb-2">
<Translate
id="homepage.secondTitleDesc2"
description="The p2 for the secondTitle part"
>
Provided functions such as dynamic adjustment of thread pool,
custom alerts, and operation monitoring to help improve the
operational support capabilities of business systems.
</Translate>
</p>
</div>
</div>
<div class="container px-20 lg:px-20 md:px-10 three-part-container">
<div class="flex flex-wrap pt-6">
<div class="w-full sm:w-1/3 md:w-1/4 ">
<img
className="w-full -mt-4 h-auto sm:h-64 object-contain lg:h-52 md:h-72 dark:rounded-lg "
src={useBaseUrl("/img/introduction/p11.svg")}
alt="Hippo4j System"
/>
</div>
<div class="w-full pr-4 sm:w-2/3 md:w-1/2 flex-grow ">
<h3 class="text-2xl dark:text-white font-normal leading-none ">
<Translate
id="homepage.introduction.fristPartTitle"
description="the title for the first introduction part"
>
Dynamic Change
</Translate>
</h3>
<div class="dark:text-white mb-8 ">
<p>
<Translate
className="cursor-pointer "
id="homepage.introduction.fristPartDesc1"
description="The first desc for fristPart "
>
Application runtime dynamically changes thread pool
parameters.
</Translate>{" "}
</p>
</div> </div>
</div> <div className="col col--6 hfeatureContent_iAnb">
</div> <h3 className="hfeatureTitle_i6jH text-4xl font-medium mb-8">
<div class="flex flex-wrap md:-mt16 flex-col-reverse sm:flex-row">
<div class="w-full flex-grow sm:w-2/3 md:w-2/3 md:pl-[28rem] sm:pl-8 mt-6 lg:pt-8">
<div class="align-middle ">
<h3 class="text-2xl dark:text-white font-normal leading-none mb-3">
<Translate <Translate
id="homepage.introduction.secondPartTitle" id="homepage.secondTitle"
description="the title for the second introduction part" description="The title for the introduction part"
> >
Custom Alarm What can Hippo4j do?
</Translate> </Translate>
</h3> </h3>
<div class="dark:text-white mb-8"> <p>
<p> <Translate
<Translate id="homepage.secondTitleDesc2"
className="cursor-pointer" description="The p1 for the secondTitle part"
id="homepage.introduction.secondPartDesc1" >
description="The first desc for secondPart " Provided functions such as dynamic adjustment of thread
> pool, custom alerts.
Application thread pool runtime point, providing four </Translate>
alarm dimensions. </p>
</Translate> <p>
</p>
</div>
</div>
</div>
<div class="w-full sm:w-1/3 md:w-1/4 mt-6">
<img
className="w-full h-auto sm:h-64 object-contain lg:h-52 md:h-96 dark:rounded-lg "
src={useBaseUrl("/img/introduction/p22.svg")}
alt="Hippo4j System"
/>
</div>
</div>
<div class="flex mt-2 flex-wrap">
<div class="w-full sm:w-1/3 md:w-1/4 ">
<img
className="w-full -mt-4 h-auto sm:h-64 object-contain lg:h-60 md:h-72 dark:rounded-lg "
src={useBaseUrl("/img/introduction/p33.svg")}
alt="Hippo4j System"
/>
</div>
<div class="w-full pr-4 sm:w-2/3 md:w-1/2 md:mt-8 flex-grow ">
<h3 class="text-2xl dark:text-white font-normal leading-none ">
<Translate
id="homepage.introduction.thirdPartTitle"
description="the title for the third introduction part"
>
Operation Monitoring
</Translate>
</h3>
<div class="dark:text-white mb-8">
<p className="m-0">
<Translate <Translate
className="cursor-pointer" id="homepage.secondTitleDesc3"
id="homepage.introduction.thirdPartDesc1" description="The p2 for the secondTitle part"
description="The first desc for thirdPart "
> >
Supports custom duration thread pool for data collection and Help improve the operational support capabilities of your
storage. business system.
</Translate> </Translate>
</p> </p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<section className="section_rXKr dark:text-white">
<div className="my-container">
<div className="row">
<div className="my-container">
<div className="row feature_gF_R">
<div className="col col--3">
<div className="text--center">
<img
className="featureImage_FjLv"
src={useBaseUrl('/img/introduction/p11.svg')}
alt="feture-[object Object]"
/>
</div>
</div>
<div className="col col--9 featureDesc_r01v">
<div>
<h2>
{' '}
<Translate
id="homepage.introduction.fristPartTitle"
description="the title for the first introduction part"
>
Dynamic Change
</Translate>
</h2>
<div>
<p>
<Translate
className=" "
id="homepage.introduction.fristPartDesc1"
description="The first desc for fristPart "
>
Application runtime dynamically changes thread pool
parameters.
</Translate>{' '}
</p>
</div>
</div>
</div>
</div>
</div>
<div className="my-container">
<div className="row feature_gF_R featureReverse_QJY9">
<div className="col col--3">
<div className="text--center">
<img
className="featureImage_FjLv"
src={useBaseUrl('/img/introduction/p22.svg')}
alt="feture-[object Object]"
/>
</div>
</div>
<div className="col col--9 featureDesc_r01v">
<div>
<h2>
{' '}
<Translate
id="homepage.introduction.secondPartTitle"
description="the title for the second introduction part"
>
Custom Alarm
</Translate>
</h2>
<div>
<p>
<Translate
className="cursor-pointer"
id="homepage.introduction.secondPartDesc1"
description="The first desc for secondPart "
>
Application thread pool runtime point, providing
four alarm dimensions.
</Translate>
</p>
</div>
</div>
</div>
</div>
</div>
<div className="my-container">
<div className="row feature_gF_R">
<div className="col col--3">
<div className="text--center">
<img
className="featureImage_FjLv"
src={useBaseUrl('/img/introduction/p33.svg')}
alt="feture-[object Object]"
/>
</div>
</div>
<div className="col col--9 featureDesc_r01v">
<div>
<h2>
<Translate
id="homepage.introduction.thirdPartTitle"
description="the title for the third introduction part"
>
Operation Monitoring
</Translate>
</h2>
<div>
<p>
<Translate
className="cursor-pointer"
id="homepage.introduction.thirdPartDesc1"
description="The first desc for thirdPart "
>
Supports custom duration thread pool for data
collection and storage.
</Translate>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div> </div>
</section> </section>
); );

@ -10,8 +10,8 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap"); @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@700&display=swap"); @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@700&display=swap');
:root { :root {
/* /*
See css var + hsl color palette technique: See css var + hsl color palette technique:
@ -25,20 +25,20 @@
--site-color-svg-icon-favorite: #e9669e; --site-color-svg-icon-favorite: #e9669e;
--site-color-checkbox-checked-bg: hsl(167deg 56% 73% / 25%); --site-color-checkbox-checked-bg: hsl(167deg 56% 73% / 25%);
--site-color-feedback-background: #fff; --site-color-feedback-background: #fff;
--ifm-font-family-base: "Poppins"; --ifm-font-family-base: 'Poppins';
/* custom */ /* custom */
--docs-color-primary-tint: #2160fd29; --docs-color-primary-tint: #2160fd29;
--ifm-breadcrumb-item-background-active: #0000000d; --ifm-breadcrumb-item-background-active: #0000000d;
--ifm-breadcrumb-color-active: #2160fd; --ifm-breadcrumb-color-active: #2160fd;
} }
html[data-theme="dark"] { html[data-theme='dark'] {
--site-color-feedback-background: #f0f8ff; --site-color-feedback-background: #f0f8ff;
--site-color-favorite-background: #1d1e1e; --site-color-favorite-background: #1d1e1e;
--site-color-checkbox-checked-bg: hsl(167deg 56% 73% / 10%); --site-color-checkbox-checked-bg: hsl(167deg 56% 73% / 10%);
} }
[data-theme="light"] { [data-theme='light'] {
--ifm-color-primary: #2160fd; --ifm-color-primary: #2160fd;
--ifm-color-primary-dark: hsl(var(--site-primary-hue-saturation) 26%); --ifm-color-primary-dark: hsl(var(--site-primary-hue-saturation) 26%);
--ifm-color-primary-darker: hsl(var(--site-primary-hue-saturation) 23%); --ifm-color-primary-darker: hsl(var(--site-primary-hue-saturation) 23%);
@ -53,7 +53,7 @@ html[data-theme="dark"] {
); );
} }
[data-theme="dark"] { [data-theme='dark'] {
--ifm-color-primary: #1a90ff; --ifm-color-primary: #1a90ff;
--ifm-color-primary-dark: hsl(var(--site-primary-hue-saturation) 41%); --ifm-color-primary-dark: hsl(var(--site-primary-hue-saturation) 41%);
--ifm-color-primary-darker: hsl(var(--site-primary-hue-saturation) 38%); --ifm-color-primary-darker: hsl(var(--site-primary-hue-saturation) 38%);
@ -77,7 +77,7 @@ html[data-theme="dark"] {
padding: 0 var(--ifm-pre-padding); padding: 0 var(--ifm-pre-padding);
} }
[data-theme="dark"] .docusaurus-highlight-code-line { [data-theme='dark'] .docusaurus-highlight-code-line {
background-color: rgb(66 66 66 / 30%); background-color: rgb(66 66 66 / 30%);
} }
@ -86,7 +86,7 @@ html[data-theme="dark"] {
} }
.header-github-link::before { .header-github-link::before {
content: ""; content: '';
width: 24px; width: 24px;
height: 24px; height: 24px;
display: flex; display: flex;
@ -94,7 +94,7 @@ html[data-theme="dark"] {
no-repeat; no-repeat;
} }
[data-theme="dark"] .header-github-link::before { [data-theme='dark'] .header-github-link::before {
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
no-repeat; no-repeat;
} }
@ -115,15 +115,15 @@ html[data-theme="dark"] {
background-color: var(--ifm-tabs-color-active); background-color: var(--ifm-tabs-color-active);
} }
[data-theme="light"] .themedDocusaurus [fill="#FFFF50"] { [data-theme='light'] .themedDocusaurus [fill='#FFFF50'] {
fill: greenyellow; fill: greenyellow;
} }
[data-theme="dark"] .themedDocusaurus [fill="#FFFF50"] { [data-theme='dark'] .themedDocusaurus [fill='#FFFF50'] {
fill: seagreen; fill: seagreen;
} }
[data-theme="light"] .DocSearch { [data-theme='light'] .DocSearch {
--docsearch-muted-color: var(--ifm-color-emphasis-700); --docsearch-muted-color: var(--ifm-color-emphasis-700);
--docsearch-container-background: rgb(94 100 112 / 70%); --docsearch-container-background: rgb(94 100 112 / 70%);
/* Modal */ /* Modal */
@ -139,7 +139,7 @@ html[data-theme="dark"] {
--docsearch-footer-background: var(--ifm-color-white); --docsearch-footer-background: var(--ifm-color-white);
} }
[data-theme="dark"] .DocSearch { [data-theme='dark'] .DocSearch {
--docsearch-text-color: var(--ifm-font-color-base); --docsearch-text-color: var(--ifm-font-color-base);
--docsearch-muted-color: var(--ifm-color-secondary-darkest); --docsearch-muted-color: var(--ifm-color-secondary-darkest);
--docsearch-container-background: rgb(47 55 69 / 70%); --docsearch-container-background: rgb(47 55 69 / 70%);
@ -161,7 +161,7 @@ html[data-theme="dark"] {
); );
} }
div[class^="announcementBar_"] { div[class^='announcementBar_'] {
--site-announcement-bar-stripe-color1: hsl( --site-announcement-bar-stripe-color1: hsl(
var(--site-primary-hue-saturation) 85% var(--site-primary-hue-saturation) 85%
); );
@ -195,14 +195,14 @@ div[class^="announcementBar_"] {
white-space: nowrap; white-space: nowrap;
} }
[data-theme="light"] img[src$="#gh-dark-mode-only"], [data-theme='light'] img[src$='#gh-dark-mode-only'],
[data-theme="dark"] img[src$="#gh-light-mode-only"] { [data-theme='dark'] img[src$='#gh-light-mode-only'] {
display: none; display: none;
} }
/* Used to test CSS insertion order */ /* Used to test CSS insertion order */
.test-marker-site-custom-css-unique-rule { .test-marker-site-custom-css-unique-rule {
content: "site-custom-css-unique-rule"; content: 'site-custom-css-unique-rule';
} }
@media only screen and (max-width: 996px) { @media only screen and (max-width: 996px) {
@ -224,19 +224,80 @@ div[class^="announcementBar_"] {
} }
} }
@media (min-width: 1440px) {
.container {
max-width: var(--ifm-container-width-xl);
}
}
@media (max-width: 996px) {
.col {
--ifm-col-width: 100%;
flex-basis: var(--ifm-col-width);
margin-left: 0;
}
.footer {
--ifm-footer-padding-horizontal: 0;
}
.colorModeToggle_DEke,
.footer__link-separator,
.navbar__item,
.sidebar_re4s,
.tableOfContents_bqdL {
display: none;
}
.footer__col {
margin-bottom: calc(var(--ifm-spacing-vertical) * 3);
}
.footer__link-item {
display: block;
}
.navbar > .container,
.navbar > .container-fluid {
padding: 0;
}
.navbar__toggle {
display: inherit;
}
.navbar__search-input {
width: 9rem;
}
.pills--block,
.tabs--block {
flex-direction: column;
}
.searchBox_ZlJk {
position: absolute;
right: var(--ifm-navbar-padding-horizontal);
}
.docItemContainer_F8PC {
padding: 0 0.3rem;
}
}
/* Custom */ /* Custom */
.bg-cousom { .bg-cousom {
background-position: 50% 65%; background-position: 50% 65%;
} }
:root[data-theme="light"] { :root[data-theme='light'] {
--hero-image-url: url("../../static/img/hero/hero-removebg.png"); --hero-image-url: url('../../static/img/hero/hero-removebg.png');
--bg-background-color: #ffffff; --bg-background-color: #ffffff;
--bg-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='199' viewBox='0 0 100 199'%3E%3Cg fill='%23dddddd' fill-opacity='0.4'%3E%3Cpath d='M0 199V0h1v1.99L100 199h-1.12L1 4.22V199H0zM100 2h-.12l-1-2H100v2z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); --bg-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='199' viewBox='0 0 100 199'%3E%3Cg fill='%23dddddd' fill-opacity='0.4'%3E%3Cpath d='M0 199V0h1v1.99L100 199h-1.12L1 4.22V199H0zM100 2h-.12l-1-2H100v2z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
} }
:root[data-theme="dark"] { :root[data-theme='dark'] {
--hero-image-url: url("../../static/img/hero/hero-removebg.png"); --hero-image-url: url('../../static/img/hero/hero-removebg.png');
--bg-background-color: #1b1b1d; --bg-background-color: #1b1b1d;
--bg-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='%239C92AC' fill-opacity='0.4'%3E%3Cpath fill-rule='evenodd' d='M5 3.59L1.46.05.05 1.46 3.59 5 .05 8.54l1.41 1.41L5 6.41l3.54 3.54 1.41-1.41L6.41 5l3.54-3.54L8.54.05 5 3.59zM17 2h24v2H17V2zm0 4h24v2H17V6zM2 17h2v24H2V17zm4 0h2v24H6V17z'/%3E%3C/g%3E%3C/svg%3E"); --bg-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='%239C92AC' fill-opacity='0.4'%3E%3Cpath fill-rule='evenodd' d='M5 3.59L1.46.05.05 1.46 3.59 5 .05 8.54l1.41 1.41L5 6.41l3.54 3.54 1.41-1.41L6.41 5l3.54-3.54L8.54.05 5 3.59zM17 2h24v2H17V2zm0 4h24v2H17V6zM2 17h2v24H2V17zm4 0h2v24H6V17z'/%3E%3C/g%3E%3C/svg%3E");
} }
@ -255,7 +316,7 @@ div[class^="announcementBar_"] {
} }
.font-jakarta { .font-jakarta {
font-family: "Plus Jakarta Sans", sans-serif; font-family: 'Plus Jakarta Sans', sans-serif;
} }
/* sidebar style */ /* sidebar style */
@ -280,8 +341,8 @@ nav.menu {
color: rgb(255 255 255 / var(--tw-text-opacity)); color: rgb(255 255 255 / var(--tw-text-opacity));
} }
div[class^="announcementBar_"] { div[class^='announcementBar_'] {
font-size: 14px; font-size: 16px;
background: none; background: none;
background-color: #fafbfc; background-color: #fafbfc;
padding: 8px 0; padding: 8px 0;
@ -289,7 +350,7 @@ div[class^="announcementBar_"] {
justify-content: center; justify-content: center;
font-weight: inherit; font-weight: inherit;
} }
div[class^="announcementBar_"] a { div[class^='announcementBar_'] a {
text-decoration: underline; text-decoration: underline;
color: #091e42; color: #091e42;
} }
@ -301,3 +362,185 @@ div[class^="announcementBar_"] a {
margin: 0; margin: 0;
line-height: 2; line-height: 2;
} }
.logo-img-container {
align-items: center;
background: #fff;
border: 1px solid #eaecef;
border-radius: 4px;
box-shadow: 0 1px 2px 0 #f8f9fa;
display: flex;
height: 80px;
justify-content: center;
margin: 5px;
min-width: 0;
}
/* new add */
.hero {
align-items: center;
background-color: #fff;
color: #000;
display: flex;
padding: 4rem 2rem;
}
.heroBanner_UJJx {
overflow: hidden;
padding: 1rem 0 5rem;
position: relative;
text-align: center;
}
.my-container {
margin: 0 auto;
max-width: 1140px;
}
.row {
display: flex;
flex-wrap: wrap;
margin: 0 calc(1rem * -1);
}
.col[class*='col--'] {
flex: 0 0 var(--ifm-col-width);
}
.col {
--ifm-col-width: 100%;
flex: 1 0;
margin-left: 0;
max-width: var(--ifm-col-width);
}
.col--6 {
--ifm-col-width: 50%;
}
.col--3 {
--ifm-col-width: 25%;
}
.col--9 {
--ifm-col-width: 75%;
}
.col,
.my-container {
padding: 0 1rem;
width: 100%;
}
.hero__logo {
height: 150px;
max-width: 500px;
transform: translateY(40%);
}
.hero__logo,
.hero__subtitle,
.hero__title {
margin: 0 auto;
width: 100%;
}
h1,
h2,
h3 {
font-weight: 400;
line-height: 1.25;
}
.social_VnSH {
margin-top: 30px;
}
.social_VnSH span:nth-child(2) {
margin-left: 8px;
}
.buttons_pzbO {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 30px 0 0;
}
.hero__title {
background-size: 110%;
color: transparent;
height: 300px;
max-width: 400px;
font-size: 3rem;
}
.hero__subtitle {
font-size: 1.2em;
max-width: 600px;
}
.hfeatureImage_Eu74 {
height: 100%;
padding: 60px 1rem !important;
}
.hfeatureContent_iAnb {
padding: 60px 0 60px calc(1rem + 20px) !important;
}
.section_rXKr {
padding: 4rem 0;
width: 100%;
}
.section_rXKr h3 {
font-size: 1.7em;
font-weight: 500;
text-align: center;
}
.feature_gF_R {
margin-bottom: 0.5rem;
}
.featureImage_FjLv {
height: 256px;
}
.featureDesc_r01v {
align-items: center;
display: flex !important;
}
.featureReverse_QJY9 {
flex-direction: row-reverse;
float: right;
}
@media screen and (max-width: 966px) {
.heroBanner_UJJx {
padding: 2rem;
}
.col {
--ifm-col-width: 100%;
flex-basis: var(--ifm-col-width);
margin-left: 0;
}
.hero {
padding-left: 0;
padding-right: 0;
}
}
@media screen and (max-width: 768px) {
.feature_gF_R {
margin-bottom: 0.5rem;
}
.featureImage_FjLv {
height: 96px;
margin-bottom: 1.5rem;
}
}
@media (max-width: 650px) {
.buttons_pzbO > a {
margin: 10px 5px;
}
.frameworkLogos_QXHq img {
height: 45px;
}
}
@media (min-width: 1440px) {
.my-container {
max-width: 1320px;
}
}

@ -1,23 +1,23 @@
import React from "react"; import React from 'react';
import { useEffect } from "react"; import { useEffect } from 'react';
import clsx from "clsx"; import clsx from 'clsx';
import Link from "@docusaurus/Link"; import Link from '@docusaurus/Link';
// import Translate from "@docusaurus/Translate"; // import Translate from "@docusaurus/Translate";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Layout from "@theme/Layout"; import Layout from '@theme/Layout';
// import HomepageFeatures from "@site/src/components/HomepageFeatures"; // import HomepageFeatures from "@site/src/components/HomepageFeatures";
import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment"; import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
import LandingLayout from "@site/src/components/LandingPage"; import LandingLayout from '@site/src/components/LandingPage';
import Head from '@docusaurus/Head';
import styles from "./index.module.css"; import styles from './index.module.css';
if (ExecutionEnvironment.canUseDOM) { if (ExecutionEnvironment.canUseDOM) {
var _hmt = _hmt || []; var _hmt = _hmt || [];
(function () { (function () {
var hm = document.createElement("script"); var hm = document.createElement('script');
hm.src = "https://hm.baidu.com/hm.js?473eaadc06f3d63771f303df1fc29b58"; hm.src = 'https://hm.baidu.com/hm.js?473eaadc06f3d63771f303df1fc29b58';
var s = document.getElementsByTagName("script")[0]; var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(hm, s); s.parentNode.insertBefore(hm, s);
})(); })();
} }
@ -25,7 +25,7 @@ if (ExecutionEnvironment.canUseDOM) {
function HomepageHeader() { function HomepageHeader() {
const { siteConfig } = useDocusaurusContext(); const { siteConfig } = useDocusaurusContext();
return ( return (
<header className={clsx("hero hero--primary", styles.heroBanner)}> <header className={clsx('hero hero--primary', styles.heroBanner)}>
<div className="container"> <div className="container">
<h1 className="hero__title">{siteConfig.title}</h1> <h1 className="hero__title">{siteConfig.title}</h1>
<p className="hero__subtitle">{siteConfig.tagline}</p> <p className="hero__subtitle">{siteConfig.tagline}</p>
@ -50,6 +50,9 @@ export default function Home() {
title={`${siteConfig.title}`} title={`${siteConfig.title}`}
description="Description will go into a meta tag in <head />" description="Description will go into a meta tag in <head />"
> >
<Head>
<script async defer src="https://buttons.github.io/buttons.js"></script>
</Head>
{/* <HomepageHeader /> */} {/* <HomepageHeader /> */}
<main> <main>
{/* <HomepageFeatures /> */} {/* <HomepageFeatures /> */}

@ -12,22 +12,18 @@ function CompanyCards({ companies }) {
.map((company) => ( .map((company) => (
<div <div
onClick={() => window.open(company.url)} onClick={() => window.open(company.url)}
key={company.url} className="rounded-lg overflow-hidden transform cursor-pointer transition-all duration-500 hover:scale-110"
// className="bg-white rounded-lg overflow-hidden shadow-sm transform cursor-pointer transition-all duration-500 hover:scale-110" // style={{ border: "1px solid #E5E7EB" }}
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
<div className="h-20 logo-img-container p-1"
className="h-22 w-24 object-contain" style={{ position: "relative" }}
style={{ position: "relative" }} >
> <img
<img src={useBaseUrl(company.logo)}
src={useBaseUrl(company.logo)} alt={`${company.name}`}
alt={`${company.name}`} className="max-h-[90%] max-w-[90%] h-auto object-contain"
className="h-22 w-24 object-contain" />
/>
</div>
</div> </div>
</div> </div>
))} ))}
@ -37,11 +33,11 @@ function CompanyCards({ companies }) {
export default function OurUsers() { export default function OurUsers() {
return ( return (
<Layout title="OurUsers" description="companies using our product"> <Layout title="OurUsers" description="companies using our product">
<div className="max-w-screen-lg mx-auto dark:text-white"> <div className="w-[1200px] px-5 mx-auto dark:text-white">
{/* text description*/} {/* text description*/}
<div className="max-w-screen-sm sm:mx-auto mx-10 text-center my-8 mt-16 "> <div className="max-w-screen-sm sm:mx-auto mx-10 text-center my-8 mt-14 mb-12 ">
<div className="text-center mt-8"> <div className="text-center ">
<h2 className="text-3xl font-bold my-4"> <h2 className="text-3xl font-medium mb-7">
<Translate <Translate
id="companyPage.title" id="companyPage.title"
description="the title for the company page" description="the title for the company page"
@ -50,12 +46,12 @@ export default function OurUsers() {
</Translate> </Translate>
</h2> </h2>
<div <div
className="mx-auto h-1 bg-gradient-to-r from-green-400 to-blue-500 my-6" className="mx-auto h-[0.215rem] bg-gradient-to-r from-green-400 to-blue-500 mb-6"
style={{ width: "30%" }} style={{ width: "30%" }}
></div> ></div>
</div> </div>
<div className="flex flex-col items-center mx-auto"> <div className=" mb-7 mx-auto">
<p className="text-lg leading-loose mb-2 max-w-1/2"> <p className="text-lg leading-loose mb-2 ">
<Translate <Translate
id="companyPage.descriptionText" id="companyPage.descriptionText"
description="the description for the company page" description="the description for the company page"
@ -64,7 +60,7 @@ export default function OurUsers() {
This is our greatest motivation to move forward. This is our greatest motivation to move forward.
</Translate>{" "} </Translate>{" "}
</p> </p>
<p className="text-lg mb-4 max-w-1/2 leading-loose"> <p className="text-lg mb-5 leading-loose">
<Translate <Translate
id="companyPage.questionText" id="companyPage.questionText"
description="the text for the company question" description="the text for the company question"

Binary file not shown.

After

Width:  |  Height:  |  Size: 118 KiB

@ -174,11 +174,7 @@
"logo": "/img/company_logos/youdao.png", "logo": "/img/company_logos/youdao.png",
"url": "https://www.youdao.com" "url": "https://www.youdao.com"
}, },
{
"name": "神州数码(西安)",
"logo": "/img/company_logos/digitalchina.png",
"url": "https://www.digitalchina.com"
},
{ {
"name": "广联达科技股份有限公司", "name": "广联达科技股份有限公司",
"logo": "/img/company_logos/glodon.jpg", "logo": "/img/company_logos/glodon.jpg",

Loading…
Cancel
Save