5 files changed, 143 insertions, 0 deletions

diff --git a/docusaurus/src/components/ButtonLink.tsx b/docusaurus/src/components/ButtonLink.tsx
new file mode 100644
index 0000000..12fc559
--- /dev/null
+++ b/docusaurus/src/components/ButtonLink.tsx
@@ -0,0 +1,27 @@
+/**
+ * @license
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ * This file is part of Wolfree.
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+ */
+
+import React from "react";
+import Link from "@docusaurus/Link";
+import { Button } from "@mui/material";
+
+const ButtonLink = ({ to = String(), text = String() }) => (
+  <Link to={to}>
+    <Button size="large" sx={{ textTransform: "capitalize" }}>
+      <strong>{text}</strong>
+      &nbsp; »
+    </Button>
+  </Link>
+);
+
+export default ButtonLink;
+
+// Typography - MUI System
+// https://mui.com/system/typography/
+
+// Docusaurus Client API | Docusaurus
+// https://docusaurus.io/docs/docusaurus-core#link
diff --git a/docusaurus/src/components/FormCTA.tsx b/docusaurus/src/components/FormCTA.tsx
new file mode 100644
index 0000000..1b5a81e
--- /dev/null
+++ b/docusaurus/src/components/FormCTA.tsx
@@ -0,0 +1,23 @@
+/**
+ * @license
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ * This file is part of Wolfree.
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+ */
+
+import React from "react";
+import submitMathInputForm from "../functions/submitMathInputForm";
+import InputMathProblems from "./InputMathProblems";
+import ShowStepButton from "./ShowStepButton";
+
+const FormCTA = ({ autoFocus = Boolean() }) => (
+  <form onSubmit={submitMathInputForm}>
+    <p></p>
+    <InputMathProblems autoFocus={autoFocus} />
+    <p></p>
+    <ShowStepButton />
+    <p></p>
+  </form>
+);
+
+export default FormCTA;
diff --git a/docusaurus/src/components/FormQuickStart.tsx b/docusaurus/src/components/FormQuickStart.tsx
new file mode 100644
index 0000000..60589fb
--- /dev/null
+++ b/docusaurus/src/components/FormQuickStart.tsx
@@ -0,0 +1,35 @@
+/**
+ * @license
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ * This file is part of Wolfree.
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+ */
+
+import React from "react";
+import submitMathInputForm from "../functions/submitMathInputForm";
+import InputMathProblems from "./InputMathProblems";
+import ShowStepButton from "./ShowStepButton";
+
+const FormQuickStart = () => (
+  <form onSubmit={submitMathInputForm}>
+    <ol>
+      <li>
+        <p>Type your math problem in the text box.</p>
+        <InputMathProblems defaultValue="y'=y" />
+      </li>
+      <li>
+        <p>
+          Click the "Show Steps" button.
+        </p>
+        <ShowStepButton />
+      </li>
+      <li>
+        <p>
+          Explore the step-by-step solution provided. 🎉
+        </p>
+      </li>
+    </ol>
+  </form>
+);
+
+export default FormQuickStart;
diff --git a/docusaurus/src/components/InputMathProblems.tsx b/docusaurus/src/components/InputMathProblems.tsx
new file mode 100644
index 0000000..c7b49ce
--- /dev/null
+++ b/docusaurus/src/components/InputMathProblems.tsx
@@ -0,0 +1,33 @@
+/**
+ * @license
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ * This file is part of Wolfree.
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+ */
+
+import React from "react";
+import TextField from "@mui/material/TextField";
+// TextField API - Material UI
+// https://mui.com/material-ui/api/text-field/
+
+const InputMathProblems = ({
+  autoFocus = Boolean(),
+  defaultValue = String(),
+}) => (
+  <TextField
+    name="i"
+    type="search"
+    autoCapitalize="off"
+    autoComplete="off"
+    autoCorrect="off"
+    spellCheck="false"
+    inputProps={{ enterkeyhint: "go" }}
+    autoFocus={autoFocus}
+    label="&nbsp; Input math problems"
+    variant="outlined"
+    fullWidth
+    defaultValue={defaultValue}
+  />
+);
+
+export default InputMathProblems;
diff --git a/docusaurus/src/components/ShowStepButton.tsx b/docusaurus/src/components/ShowStepButton.tsx
new file mode 100644
index 0000000..3ae7ba3
--- /dev/null
+++ b/docusaurus/src/components/ShowStepButton.tsx
@@ -0,0 +1,25 @@
+/**
+ * @license
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ * This file is part of Wolfree.
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+ */
+
+import React from "react";
+import { Button } from "@mui/material";
+
+const ShowStepButton = () => (
+  <Button
+    type="submit"
+    size="large"
+    variant="contained"
+    sx={{ textTransform: "capitalize" }}
+  >
+    Show Steps
+  </Button>
+);
+
+export default ShowStepButton;
+
+// Typography - MUI System
+// https://mui.com/system/typography/