kubevela
/
kubevela.github.io
mirror of https://github.com/kubevela/kubevela.github.io.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

replace WhatIs to components (#860) 

Signed-off-by: Arhell <arhell333@gmail.com>
This commit is contained in:
Ihor Sychevskyi 2022-07-17 05:29:58 +03:00 committed by GitHub
parent 2100a5fb94
commit 966ba02853
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 41 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/WhatIs.js Normal file
View File

@ -0,0 +1,40 @@
import clsx from "clsx";
import styles from "../pages/styles.module.css";
import React from 'react';
import Translate, { translate } from '@docusaurus/Translate';
import useBaseUrl from '@docusaurus/useBaseUrl';
const WhatIs = () => (
<div className={clsx('hero', styles.hero)}>
<div className="container">
<div className="row">
<div className="col col--6">
<h1><Translate>What is KubeVela?</Translate></h1>
<p className="hero__subtitle">
<small>
<Translate>
KubeVela is a modern software delivery platform that makes deploying and operating applications across today's hybrid, multi-cloud environments
</Translate><i><Translate> easier, faster and more reliable.</Translate></i>
<br />
<br />
<Translate>
KubeVela is infrastructure agnostic, programmable, yet most importantly,
</Translate><i><b> <Translate>application-centric.</Translate></b></i>
<Translate> It allows you to build powerful software, and deliver them anywhere!</Translate>
</small>
</p>
</div>
<div className="col">
<img
className="image"
src={useBaseUrl("img/what-is-kubevela.png")}
align="right"
alt="what is kubevela"
/>
</div>
</div>
</div>
</div >
);
export default WhatIs

34
src/pages/index.js
View File

@ -9,6 +9,7 @@ import GitHubButton from 'react-github-btn';
import styles from './styles.module.css';
import FeatureList from '../components/FeatureList'
import Button from '../components/button'
import WhatIs from "../components/WhatIs";
export default function Home() {
const context = useDocusaurusContext();
@ -63,36 +64,3 @@ export default function Home() {
</Layout>
);
}
const WhatIs = () => (
<div className={clsx('hero', styles.hero)}>
<div className="container">
<div className="row">
<div className="col col--6">
<h1><Translate>What is KubeVela?</Translate></h1>
<p className="hero__subtitle">
<small>
<Translate>
KubeVela is a modern software delivery platform that makes deploying and operating applications across today's hybrid, multi-cloud environments
</Translate><i><Translate> easier, faster and more reliable.</Translate></i>
<br />
<br />
<Translate>
KubeVela is infrastructure agnostic, programmable, yet most importantly,
</Translate><i><b> <Translate>application-centric.</Translate></b></i>
<Translate> It allows you to build powerful software, and deliver them anywhere!</Translate>
</small>
</p>
</div>
<div className="col">
<img
className="image"
src={useBaseUrl("img/what-is-kubevela.png")}
align="right"
alt="what is kubevela"
/>
</div>
</div>
</div>
</div >
);