Add demo to docs (#456)

README.md

@@ -7,6 +7,7 @@
 [![last
 commit](https://img.shields.io/github/last-commit/evroon/bracket)](https://img.shields.io/github/last-commit/evroon/bracket)
 [![release](https://img.shields.io/github/v/release/evroon/bracket)](https://img.shields.io/github/v/release/evroon/bracket)<br/>
+[Demo](https://www.bracketapp.nl/demo) |
 [Documentation](https://docs.bracketapp.nl) |
 [Quickstart](https://docs.bracketapp.nl/docs/running-bracket/quickstart) |
 [GitHub](https://github.com/evroon/bracket) |
@@ -32,6 +33,9 @@ It has the following features:
 ### Preview
 <img alt="" src="docs/static/img/bracket-screenshot-design.png" width="100%" />
 
+# Live Demo
+A demo is available for free at <https://www.bracketapp.nl/demo>. The demo lasts for 30 minutes, after which
+your data will de deleted. 
 
 # Quickstart
 To quickly run bracket to see how it works, clone it and run `docker-compose up`:

docs/src/components/HeroTitle/index.js

@@ -1,7 +1,18 @@
-import { Container, Text, Button, Group } from "@mantine/core";
+import { Container, Text, Button, Group, Center } from "@mantine/core";
 import { GithubIcon } from "@mantinex/dev-icons";
 import classes from "./styles.module.css";
 import React from "react";
+import {
+  IconBracketsContainStart,
+  IconLibrary,
+  IconLivePhoto,
+  IconLiveView,
+  IconPlayCard,
+  IconPlayerPlay,
+  IconRocket,
+  IconRun,
+  IconStar,
+} from "@tabler/icons-react";
 
 export function HeroTitle() {
   return (
@@ -31,22 +42,27 @@ export function HeroTitle() {
             className={classes.control}
             variant="gradient"
             gradient={{ from: "indigo", to: "#674ad6" }}
+            onClick={() => {
+              open("https://www.bracketapp.nl/demo", "_self");
+            }}
+          >
+            <Center inline>
+              <IconRocket size="32px" style={{ marginRight: "0.5rem" }} />
+              Demo
+            </Center>
+          </Button>
+          <Button
+            size="xl"
+            className={classes.control}
+            variant="default"
             onClick={() => {
               open("docs/running-bracket/quickstart", "_self");
             }}
           >
-            Get started
-          </Button>
-
-          <Button
-            component="a"
-            href="https://github.com/evroon/bracket"
-            size="xl"
-            variant="default"
-            className={classes.control}
-            leftSection={<GithubIcon size={20} />}
-          >
-            GitHub
+            <Center inline>
+              <IconLibrary size="32px" style={{ marginRight: "0.5rem" }} />
+              Get started
+            </Center>
           </Button>
         </Group>
       </Container>

docs/src/components/feature_cards.js

@@ -15,7 +15,7 @@ import {
 import classes from "../pages/index.module.css";
 import React from "react";
 
-const mockdata = [
+const cardData = [
   {
     title: "Open-source and free",
     description:
@@ -45,8 +45,7 @@ const mockdata = [
 ];
 
 export default function FeaturesCards() {
-  const theme = useMantineTheme();
-  const features = mockdata.map((feature) => (
+  const features = cardData.map((feature) => (
     <Card
       key={feature.title}
       shadow="md"

docs/src/pages/index.js

@@ -6,7 +6,12 @@ import {
   createTheme,
   Image,
   MantineProvider,
+  Paper,
+  rem,
+  ThemeIcon,
+  Text,
   Title,
+  Stack,
 } from "@mantine/core";
 import "@mantine/core/styles.css";
 import "@mantine/carousel/styles.css";
@@ -14,9 +19,46 @@ import { HeroTitle } from "../components/HeroTitle";
 import { HomeCarousel } from "../components/HomeCarousel";
 import classes from "./index.module.css";
 import FeaturesCards from "../components/feature_cards";
+import { IconBrandGithub, IconColorSwatch } from "@tabler/icons-react";
 
 const theme = createTheme({});
 
+function CardGradient() {
+  return (
+    <Center mx="1rem" mt="2rem">
+      <Paper
+        radius="md"
+        className={classes.social_card}
+        onClick={() => {
+          open("https://github.com/evroon/bracket");
+        }}
+      >
+        <Center inline>
+          <ThemeIcon
+            size="xl"
+            radius="md"
+            variant="filled"
+            color="black"
+            mr="1rem"
+          >
+            <IconBrandGithub
+              style={{ width: rem(38), height: rem(38) }}
+              stroke={1.5}
+            />
+          </ThemeIcon>
+          <Text size="xl" fw={500} inline>
+            GitHub
+          </Text>
+        </Center>
+        <Text size="sm" mt="sm" c="dimmed">
+          Go to the GitHub repository to star or fork Bracket, create issues/PRs
+          or start discussions.
+        </Text>
+      </Paper>
+    </Center>
+  );
+}
+
 export default function Home() {
   return (
     <MantineProvider theme={theme} defaultColorScheme="dark">
@@ -36,10 +78,15 @@ export default function Home() {
               />
             </Container>
           </Center>
+
+          <CardGradient />
+
           <Title order={2} className={classes.title} ta="center" mt="lg">
             Features
           </Title>
+
           <FeaturesCards />
+
           <Container mt="lg" px="0px">
             <Title order={2} className={classes.title} ta="center" my="lg">
               Screenshots

docs/src/pages/index.module.css

@@ -41,4 +41,31 @@
     height: rem(2px);
     margin-top: var(--mantine-spacing-sm);
   }
-}
+}
+
+.social_card {
+  position: relative;
+  cursor: pointer;
+  overflow: hidden;
+  transition:
+    transform 150ms ease,
+    box-shadow 100ms ease;
+  padding: var(--mantine-spacing-xl);
+  padding-left: calc(var(--mantine-spacing-xl) * 1);
+  margin-bottom: 1rem;
+  background-color: #000;
+
+  @mixin hover {
+    box-shadow: var(--mantine-shadow-md);
+    transform: scale(1.02);
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: rem(6px);
+  }
+}