Create documentation website (#19)

* feat: scaffold documentation app * feat: init documentation website with mantine * feat: add theme button * feat: setup mdx link component * feat: setup basic documentation folder * feat: add routing folder * feat: scaffold homepage * feat: refined navbar and hero * feat: create pre mdx component * feat: create mdx blockquote component * feat: create code mdx component * fix: remove HTMLProps type * feat: create base hero page * ci: add lint/formatting/type checking to documentation * ci: add documentation pipeline * fix: static build documentation * fix: remove documentation test check * fix: install deps outside workspace * fix: filter prettier checks * fix: eslint plugins * fix: clone eslintrc * feat: update dark theme colors * doc: add installation page * feat: add deploy documenation CD pipeline * fix: update documentation bucket region * feat: update documentation head tags * fix: deploy website on main branch push
2026-07-29 22:02:46 -07:00 · 2024-07-27 11:33:34 +02:00
parent 19782a2dbe
commit 1ae7f72de3
50 changed files with 955 additions and 0 deletions
@@ -0,0 +1,53 @@
+import {
+  Button,
+  Center,
+  Container,
+  CopyButton,
+  Group,
+  rem,
+  Text,
+  Title,
+} from '@mantine/core'
+import { IconCopy, IconCheck } from '@tabler/icons-react'
+import { Link } from 'tuono'
+
+export default function Hero(): JSX.Element {
+  return (
+    <Container size={1100} mt={200}>
+      <Center>
+        <Title order={1}>The react/rust fullstack framework</Title>
+      </Center>
+      <Center mt={50}>
+        <Text fz="18px">
+          The technologies we love seamessly working together to unleash the
+          <strong> highest web performance</strong> ever met on react
+        </Text>
+      </Center>
+      <Center mt={50}>
+        <Group>
+          <Button component={Link} href="/documentation/installation" size="lg">
+            Get Started
+          </Button>
+          <CopyButton value="cargo install tuono">
+            {({ copied, copy }) => (
+              <Button
+                onClick={copy}
+                size="lg"
+                style={{ border: 'solid 1px var(--mantine-color-violet-1)' }}
+                color="gray"
+                leftSection="cargo install tuono"
+                rightSection={
+                  copied ? (
+                    <IconCheck style={{ width: rem(20) }} />
+                  ) : (
+                    <IconCopy style={{ width: rem(20) }} />
+                  )
+                }
+              />
+            )}
+          </CopyButton>
+        </Group>
+      </Center>
+    </Container>
+  )
+}