eca218ac79
* Adds base template for new docs site * Adds Apis to docs * add some css from rn * Fix right side sidebar functionality * Basic docs * adds old docs * Cleans up unnecessary files * Chane links * Adds docusaurus v2 * Styling fixes * adds wip and new assets * adds code image * Add FAQ link * Adds analytics * adds cname * cleanup blogs
86 lines
1.9 KiB
JavaScript
86 lines
1.9 KiB
JavaScript
import React from "react";
|
||
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
|
||
import styled from "styled-components";
|
||
import { Header, Container, H1, Center } from "./common";
|
||
import styles from "../styles.module.css";
|
||
import withBaseUrl from "@docusaurus/withBaseUrl";
|
||
|
||
const ActionButton = styled.a`
|
||
${props => {
|
||
switch (props.type) {
|
||
case "primary":
|
||
return `
|
||
color: white;
|
||
background: var(--ifm-color-primary);
|
||
&:hover {
|
||
color: white;
|
||
text-decoration: none;
|
||
background: var(--ifm-color-primary-dark);
|
||
}
|
||
`;
|
||
case "secondary":
|
||
return `
|
||
&::after {
|
||
content: "›";
|
||
font-size: 24px;
|
||
margin-left: 5px;
|
||
text-align: center;
|
||
}
|
||
`;
|
||
}
|
||
}}
|
||
padding: 0.7rem 1.1rem;
|
||
font-size: 1.2em;
|
||
`;
|
||
const Title = styled(H1)`
|
||
font-size: 3em;
|
||
font-weight: 600;
|
||
`;
|
||
const Tagline = styled.p`
|
||
font-size: 1.6em;
|
||
text-align: center;
|
||
`;
|
||
const MainLogo = styled.img`
|
||
max-width: 170px;
|
||
`;
|
||
|
||
const MainHeader = styled(Header)`
|
||
padding-bottom: 40px;
|
||
`;
|
||
|
||
function ActionContainer() {
|
||
return (
|
||
<div>
|
||
<ActionButton type="primary" href={"#quick-start"} target="_self">
|
||
Quick start
|
||
</ActionButton>
|
||
<ActionButton
|
||
type="secondary"
|
||
href={withBaseUrl("docs/guides/getting-started")}
|
||
target="_self"
|
||
>
|
||
Learn basics
|
||
</ActionButton>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export const Hero = () => {
|
||
const context = useDocusaurusContext();
|
||
const { siteConfig = {} } = context;
|
||
return (
|
||
<MainHeader>
|
||
<Container>
|
||
<Center>
|
||
<MainLogo src={"img/logox200.png"} />
|
||
<Title>{siteConfig.title}</Title>
|
||
<Tagline>{siteConfig.tagline}</Tagline>
|
||
<div className={styles.buttons}>
|
||
<ActionContainer />
|
||
</div>
|
||
</Center>
|
||
</Container>
|
||
</MainHeader>
|
||
);
|
||
};
|