You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
96 lines
2.5 KiB
96 lines
2.5 KiB
import React from "react"; |
|
import classnames from "classnames"; |
|
import Layout from "@theme/Layout"; |
|
import Link from "@docusaurus/Link"; |
|
import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; |
|
import useBaseUrl from "@docusaurus/useBaseUrl"; |
|
import styles from "./styles.module.css"; |
|
|
|
const features = [ |
|
{ |
|
title: <>Powered by Zephyr™</>, |
|
imageUrl: "img/undraw_zephyr.svg", |
|
description: ( |
|
<> |
|
With a wide range of architecture support, ZMK is ready for many existing keyboards. |
|
</> |
|
), |
|
}, |
|
{ |
|
title: <>Permissive Licensing</>, |
|
imageUrl: "img/undraw_open_source.svg", |
|
description: ( |
|
<> |
|
MIT licensed to remove any future limitations in innovation. |
|
</> |
|
), |
|
}, |
|
{ |
|
title: <>Wireless First</>, |
|
imageUrl: "img/undraw_wireless.svg", |
|
description: ( |
|
<> |
|
Designed for the future, including wireless support. |
|
</> |
|
), |
|
}, |
|
]; |
|
|
|
function Feature({ imageUrl, title, description }) { |
|
const imgUrl = useBaseUrl(imageUrl); |
|
return ( |
|
<div className={classnames("col col--4", styles.feature)}> |
|
{imgUrl && ( |
|
<div className="text--center"> |
|
<img className={styles.featureImage} src={imgUrl} alt={title} /> |
|
</div> |
|
)} |
|
<h3>{title}</h3> |
|
<p>{description}</p> |
|
</div> |
|
); |
|
} |
|
|
|
function Home() { |
|
const context = useDocusaurusContext(); |
|
const { siteConfig = {} } = context; |
|
return ( |
|
<Layout |
|
title={`Hello from ${siteConfig.title}`} |
|
description="Description will go into a meta tag in <head />" |
|
> |
|
<header className={classnames("hero hero--primary", styles.heroBanner)}> |
|
<div className="container"> |
|
<h1 className="hero__title">{siteConfig.title}</h1> |
|
<p className="hero__subtitle">{siteConfig.tagline}</p> |
|
<div className={styles.buttons}> |
|
<Link |
|
className={classnames( |
|
"button button--outline button--lg", |
|
styles.getStarted |
|
)} |
|
to={useBaseUrl("docs/")} |
|
> |
|
Get Started |
|
</Link> |
|
</div> |
|
</div> |
|
</header> |
|
<main> |
|
{features && features.length > 0 && ( |
|
<section className={styles.features}> |
|
<div className="container"> |
|
<div className="row"> |
|
{features.map((props, idx) => ( |
|
<Feature key={idx} {...props} /> |
|
))} |
|
</div> |
|
</div> |
|
</section> |
|
)} |
|
</main> |
|
</Layout> |
|
); |
|
} |
|
|
|
export default Home;
|
|
|