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

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

@ -1,93 +1,99 @@
import React from "react";
import { Icon } from "@iconify/react";
import useBaseUrl from "@docusaurus/useBaseUrl";
import GithubInfo from "./GithubInfo";
import Translate, { translate } from "@docusaurus/Translate";
import Link from "@docusaurus/Link";
import React from 'react';
import { Icon } from '@iconify/react';
import useBaseUrl from '@docusaurus/useBaseUrl';
import GithubInfo from './GithubInfo';
import Translate, { translate } from '@docusaurus/Translate';
import Link from '@docusaurus/Link';
const Hero = () => {
const bgUrl = useBaseUrl("/img/bg.jpg");
const bgUrl = useBaseUrl('/img/bg.jpg');
return (
<div className=" h-[100vh] lg:h-[58vh] relative text-black dark:text-white">
<div className=" absolute inset-0 overflow-hidden bg-repeat">
{/* <div className="absolute inset-0 bg-gray-400 opacity-5 dark:opacity-0"></div> */}
<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">
{/* <!--Left Col--> */}
<div className="flex flex-col w-full lg:w-1/2 md:w-2/3 justify-center items-start text-center md:text-left">
{/* title and desc */}
<div>
<h1 className="my-4 font-jakarta lg:my-8 md:my-4 text-5xl font-bold leading-tight ">
Hippo4j Thread Pool
</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"
<header className="hero hero--primary heroBanner_UJJx dark:bg-[#1B1B1D]">
<div className="my-container dark:text-white">
<div className="row">
<div className="col col--6">
<h1 className="hero__logo text-5xl font-medium dark:text-white">
Hippo4j Thread Pool
</h1>
<p className="hero__subtitle">
<Translate
id="homepage.titleDescription2"
description="The homepage title description"
>
<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>
<span class="relative w-full text-center transition-colors duration-200 ease-in-out group-hover:text-white">
Start Learning
</span>
</Link>
Enhancing the Operational Assurance Capability for Business
Systems Online.
</Translate>
</p>
<div class="social_VnSH">
<a
class="github-button"
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">
<span class="absolute inset-0 w-full h-full px-5 py-3 rounded-lg bg-gray-50"></span>
<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>
<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>
Star
</a>
<a
class="github-button ml-4"
href="https://github.com/opengoofy/hippo4j/fork"
data-icon="octicon-repo-forked"
data-show-count="true"
aria-label="Fork opengoofy/hippo4j on GitHub"
>
Fork
</a>
</div>
{/* github info */}
<div className="github-info w-full">
<GithubInfo owner="opengoofy" repo="hippo4j" />
</div>
<div className="buttons_pzbO">
{/* button group */}
<div className="flex mt-6 w-full justify-center">
<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 */}
<div className="flex"></div>
</div>
<span class="relative w-full text-center transition-colors duration-200 ease-in-out group-hover:text-white">
Start Learning
</span>
</Link>
{/* <!--Right image--> */}
<div className="w-full lg:w-1/2 text-center lg:block ">
<img
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")}
alt="Hippo4j System"
/>
<a
href="https://github.com/opengoofy/hippo4j"
class="relative w-32 hover:no-underline lg:w-48 inline-block text-lg group"
>
<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">
<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>
</header>
);
};

@ -1,140 +1,171 @@
import React from "react";
import useBaseUrl from "@docusaurus/useBaseUrl";
import Translate from "@docusaurus/Translate";
import React from 'react';
import useBaseUrl from '@docusaurus/useBaseUrl';
import Translate from '@docusaurus/Translate';
const Introduction = () => {
return (
<section className="mb-28 dark:text-white">
<section className="dark:text-white">
<div className="introduction-container ">
<div className="title-container w-full bg-[#EFEFEF] p-4 mb-12 flex flex-wrap dark:bg-[#242526]">
<div className="left-image-container px-24 w-full md:w-1/2 sm:w-1/3">
<img
className="w-full -mt-8 h-64 object-contain lg:h-64 md:h-96 dark:rounded-lg "
alt="Hippo4j System"
src={useBaseUrl("/img/introduction/t2.svg")}
/>
{/* <div className="introduction-title-image h-64 w-full img-div"></div> */}
</div>
<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 className="title-container w-full bg-[#EFEFEF] dark:text-white flex flex-wrap dark:bg-[#242526]">
<div className="my-container">
<div className="row">
<div className="col col--6 hfeatureImage_Eu74">
<img
width="560"
height="315"
style={{ width: '560px', height: '315px' }}
src={useBaseUrl('/img/introduction/t.jpg')}
/>
</div>
</div>
</div>
<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">
<div className="col col--6 hfeatureContent_iAnb">
<h3 className="hfeatureTitle_i6jH text-4xl font-medium mb-8">
<Translate
id="homepage.introduction.secondPartTitle"
description="the title for the second introduction part"
id="homepage.secondTitle"
description="The title for the introduction part"
>
Custom Alarm
What can Hippo4j do?
</Translate>
</h3>
<div class="dark:text-white mb-8">
<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 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">
<p>
<Translate
id="homepage.secondTitleDesc2"
description="The p1 for the secondTitle part"
>
Provided functions such as dynamic adjustment of thread
pool, custom alerts.
</Translate>
</p>
<p>
<Translate
className="cursor-pointer"
id="homepage.introduction.thirdPartDesc1"
description="The first desc for thirdPart "
id="homepage.secondTitleDesc3"
description="The p2 for the secondTitle part"
>
Supports custom duration thread pool for data collection and
storage.
Help improve the operational support capabilities of your
business system.
</Translate>
</p>
</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>
</section>
);

@ -10,8 +10,8 @@
@tailwind components;
@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=Plus+Jakarta+Sans:wght@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');
:root {
/*
See css var + hsl color palette technique:
@ -25,20 +25,20 @@
--site-color-svg-icon-favorite: #e9669e;
--site-color-checkbox-checked-bg: hsl(167deg 56% 73% / 25%);
--site-color-feedback-background: #fff;
--ifm-font-family-base: "Poppins";
--ifm-font-family-base: 'Poppins';
/* custom */
--docs-color-primary-tint: #2160fd29;
--ifm-breadcrumb-item-background-active: #0000000d;
--ifm-breadcrumb-color-active: #2160fd;
}
html[data-theme="dark"] {
html[data-theme='dark'] {
--site-color-feedback-background: #f0f8ff;
--site-color-favorite-background: #1d1e1e;
--site-color-checkbox-checked-bg: hsl(167deg 56% 73% / 10%);
}
[data-theme="light"] {
[data-theme='light'] {
--ifm-color-primary: #2160fd;
--ifm-color-primary-dark: hsl(var(--site-primary-hue-saturation) 26%);
--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-dark: hsl(var(--site-primary-hue-saturation) 41%);
--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);
}
[data-theme="dark"] .docusaurus-highlight-code-line {
[data-theme='dark'] .docusaurus-highlight-code-line {
background-color: rgb(66 66 66 / 30%);
}
@ -86,7 +86,7 @@ html[data-theme="dark"] {
}
.header-github-link::before {
content: "";
content: '';
width: 24px;
height: 24px;
display: flex;
@ -94,7 +94,7 @@ html[data-theme="dark"] {
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")
no-repeat;
}
@ -115,15 +115,15 @@ html[data-theme="dark"] {
background-color: var(--ifm-tabs-color-active);
}
[data-theme="light"] .themedDocusaurus [fill="#FFFF50"] {
[data-theme='light'] .themedDocusaurus [fill='#FFFF50'] {
fill: greenyellow;
}
[data-theme="dark"] .themedDocusaurus [fill="#FFFF50"] {
[data-theme='dark'] .themedDocusaurus [fill='#FFFF50'] {
fill: seagreen;
}
[data-theme="light"] .DocSearch {
[data-theme='light'] .DocSearch {
--docsearch-muted-color: var(--ifm-color-emphasis-700);
--docsearch-container-background: rgb(94 100 112 / 70%);
/* Modal */
@ -139,7 +139,7 @@ html[data-theme="dark"] {
--docsearch-footer-background: var(--ifm-color-white);
}
[data-theme="dark"] .DocSearch {
[data-theme='dark'] .DocSearch {
--docsearch-text-color: var(--ifm-font-color-base);
--docsearch-muted-color: var(--ifm-color-secondary-darkest);
--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(
var(--site-primary-hue-saturation) 85%
);
@ -195,14 +195,14 @@ div[class^="announcementBar_"] {
white-space: nowrap;
}
[data-theme="light"] img[src$="#gh-dark-mode-only"],
[data-theme="dark"] img[src$="#gh-light-mode-only"] {
[data-theme='light'] img[src$='#gh-dark-mode-only'],
[data-theme='dark'] img[src$='#gh-light-mode-only'] {
display: none;
}
/* Used to test CSS insertion order */
.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) {
@ -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 */
.bg-cousom {
background-position: 50% 65%;
}
:root[data-theme="light"] {
--hero-image-url: url("../../static/img/hero/hero-removebg.png");
:root[data-theme='light'] {
--hero-image-url: url('../../static/img/hero/hero-removebg.png');
--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");
}
:root[data-theme="dark"] {
--hero-image-url: url("../../static/img/hero/hero-removebg.png");
:root[data-theme='dark'] {
--hero-image-url: url('../../static/img/hero/hero-removebg.png');
--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");
}
@ -255,7 +316,7 @@ div[class^="announcementBar_"] {
}
.font-jakarta {
font-family: "Plus Jakarta Sans", sans-serif;
font-family: 'Plus Jakarta Sans', sans-serif;
}
/* sidebar style */
@ -280,8 +341,8 @@ nav.menu {
color: rgb(255 255 255 / var(--tw-text-opacity));
}
div[class^="announcementBar_"] {
font-size: 14px;
div[class^='announcementBar_'] {
font-size: 16px;
background: none;
background-color: #fafbfc;
padding: 8px 0;
@ -289,7 +350,7 @@ div[class^="announcementBar_"] {
justify-content: center;
font-weight: inherit;
}
div[class^="announcementBar_"] a {
div[class^='announcementBar_'] a {
text-decoration: underline;
color: #091e42;
}
@ -301,3 +362,185 @@ div[class^="announcementBar_"] a {
margin: 0;
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 { useEffect } from "react";
import clsx from "clsx";
import Link from "@docusaurus/Link";
import React from 'react';
import { useEffect } from 'react';
import clsx from 'clsx';
import Link from '@docusaurus/Link';
// import Translate from "@docusaurus/Translate";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import Layout from "@theme/Layout";
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Layout from '@theme/Layout';
// 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 styles from "./index.module.css";
import LandingLayout from '@site/src/components/LandingPage';
import Head from '@docusaurus/Head';
import styles from './index.module.css';
if (ExecutionEnvironment.canUseDOM) {
var _hmt = _hmt || [];
(function () {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?473eaadc06f3d63771f303df1fc29b58";
var s = document.getElementsByTagName("script")[0];
var hm = document.createElement('script');
hm.src = 'https://hm.baidu.com/hm.js?473eaadc06f3d63771f303df1fc29b58';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(hm, s);
})();
}
@ -25,7 +25,7 @@ if (ExecutionEnvironment.canUseDOM) {
function HomepageHeader() {
const { siteConfig } = useDocusaurusContext();
return (
<header className={clsx("hero hero--primary", styles.heroBanner)}>
<header className={clsx('hero hero--primary', styles.heroBanner)}>
<div className="container">
<h1 className="hero__title">{siteConfig.title}</h1>
<p className="hero__subtitle">{siteConfig.tagline}</p>
@ -50,6 +50,9 @@ export default function Home() {
title={`${siteConfig.title}`}
description="Description will go into a meta tag in <head />"
>
<Head>
<script async defer src="https://buttons.github.io/buttons.js"></script>
</Head>
{/* <HomepageHeader /> */}
<main>
{/* <HomepageFeatures /> */}

@ -12,22 +12,18 @@ function CompanyCards({ 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"
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="rounded-lg overflow-hidden 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-22 w-24 object-contain"
style={{ position: "relative" }}
>
<img
src={useBaseUrl(company.logo)}
alt={`${company.name}`}
className="h-22 w-24 object-contain"
/>
</div>
<div
className="h-20 logo-img-container p-1"
style={{ position: "relative" }}
>
<img
src={useBaseUrl(company.logo)}
alt={`${company.name}`}
className="max-h-[90%] max-w-[90%] h-auto object-contain"
/>
</div>
</div>
))}
@ -37,11 +33,11 @@ function CompanyCards({ companies }) {
export default function OurUsers() {
return (
<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*/}
<div className="max-w-screen-sm sm:mx-auto mx-10 text-center my-8 mt-16 ">
<div className="text-center mt-8">
<h2 className="text-3xl font-bold my-4">
<div className="max-w-screen-sm sm:mx-auto mx-10 text-center my-8 mt-14 mb-12 ">
<div className="text-center ">
<h2 className="text-3xl font-medium mb-7">
<Translate
id="companyPage.title"
description="the title for the company page"
@ -50,12 +46,12 @@ export default function OurUsers() {
</Translate>
</h2>
<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%" }}
></div>
</div>
<div className="flex flex-col items-center mx-auto">
<p className="text-lg leading-loose mb-2 max-w-1/2">
<div className=" mb-7 mx-auto">
<p className="text-lg leading-loose mb-2 ">
<Translate
id="companyPage.descriptionText"
description="the description for the company page"
@ -64,7 +60,7 @@ export default function OurUsers() {
This is our greatest motivation to move forward.
</Translate>{" "}
</p>
<p className="text-lg mb-4 max-w-1/2 leading-loose">
<p className="text-lg mb-5 leading-loose">
<Translate
id="companyPage.questionText"
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",
"url": "https://www.youdao.com"
},
{
"name": "神州数码(西安)",
"logo": "/img/company_logos/digitalchina.png",
"url": "https://www.digitalchina.com"
},
{
"name": "广联达科技股份有限公司",
"logo": "/img/company_logos/glodon.jpg",

Loading…
Cancel
Save