diff --git a/src/docs/howTo/gettingStarted.md b/src/docs/howTo/gettingStarted.md
new file mode 100644
index 0000000..2736788
--- /dev/null
+++ b/src/docs/howTo/gettingStarted.md
@@ -0,0 +1,11 @@
+1. Start a game to generate a unique URL that can connect you and
+ your players.
+
+ Each game is recycled after 24 hours so make sure you create a new game when you play your next session.
+
+2. Invite players with your unique URL from step 1.
+3. Share a map, roll dice or share audio with your players.
+
+ All data is saved automatically to your computer so next session simply use the same browser and all your maps and tokens will be ready to go.
+
+That's it, no accounts, no paywalls, no ads, just a virtual tabletop.
diff --git a/src/icons/HelpIcon.js b/src/icons/HelpIcon.js
new file mode 100644
index 0000000..f45c9a8
--- /dev/null
+++ b/src/icons/HelpIcon.js
@@ -0,0 +1,19 @@
+import React from "react";
+
+function HelpIcon() {
+ return (
+
+ );
+}
+
+export default HelpIcon;
diff --git a/src/modals/GettingStartedModal.js b/src/modals/GettingStartedModal.js
new file mode 100644
index 0000000..9a8e157
--- /dev/null
+++ b/src/modals/GettingStartedModal.js
@@ -0,0 +1,29 @@
+import React from "react";
+import { Box, Label, Text } from "theme-ui";
+import raw from "raw.macro";
+
+import Modal from "../components/Modal";
+import Markdown from "../components/Markdown";
+import Link from "../components/Link";
+
+const gettingStarted = raw("../docs/howTo/gettingStarted.md");
+
+function GettingStartedModal({ isOpen, onRequestClose }) {
+ return (
+
+
+
+
+
+ For more tutorials visit the How To page
+
+
+
+ );
+}
+
+export default GettingStartedModal;
diff --git a/src/routes/Home.js b/src/routes/Home.js
index 76e5952..072c04d 100644
--- a/src/routes/Home.js
+++ b/src/routes/Home.js
@@ -6,6 +6,9 @@ import Footer from "../components/Footer";
import StartModal from "../modals/StartModal";
import JoinModal from "../modals/JoinModal";
+import GettingStartedModal from "../modals/GettingStartedModal";
+
+import HelpIcon from "../icons/HelpIcon";
import AuthContext from "../contexts/AuthContext";
@@ -19,6 +22,9 @@ import owlington from "../images/Owlington.png";
function Home() {
const [isStartModalOpen, setIsStartModalOpen] = useState(false);
const [isJoinModalOpen, setIsJoinModalOpen] = useState(false);
+ const [isGettingStartedModalOpen, setIsGettingStartedModalOpen] = useState(
+ false
+ );
// Reset password on visiting home
const { setPassword } = useContext(AuthContext);
@@ -50,6 +56,18 @@ function Home() {
Owlbear Rodeo
+
@@ -76,6 +94,7 @@ function Home() {
>
Donate
+
@@ -101,6 +120,10 @@ function Home() {
isOpen={isStartModalOpen}
onRequestClose={() => setIsStartModalOpen(false)}
/>
+ setIsGettingStartedModalOpen(false)}
+ />