chore: add missing pages

Haidra-Org · Jul 29, 2024 · 6ae490a · 6ae490a
1 parent 5c9b622
commit 6ae490a
Show file tree

Hide file tree

Showing 7 changed files with 521 additions and 24 deletions.
diff --git a/.gitignore b/.gitignore
@@ -16,6 +16,7 @@
 # production
 /build
 build.sh
+*.tar.gz
 
 # misc
 .DS_Store

diff --git a/app/_components/Footer/footer.module.css b/app/_components/Footer/footer.module.css
@@ -3,6 +3,7 @@
   color: white;
   display: flex;
   flex-direction: column;
+  margin-top: 16px;
   padding: 16px 32px;
   padding-bottom: 66px;
   width: 100%;

diff --git a/app/_components/Footer/index.tsx b/app/_components/Footer/index.tsx
@@ -8,11 +8,9 @@ import {
   IconCamera,
   IconExternalLink,
   IconInfoCircle,
-  IconMessage,
   IconPhoto,
   IconQuestionMark,
-  IconRobot,
-  IconTool
+  IconRobot
 } from '@tabler/icons-react'
 import Linker from '../Linker'
 
@@ -34,7 +32,7 @@ export default function Footer() {
               Create new image
             </Link>
           </div>
-          <div>
+          {/* <div>
             <Link className={styles.LinkWrapper} href="/controlnet">
               ControlNet
             </Link>
@@ -48,8 +46,8 @@ export default function Footer() {
             <Link className={styles.LinkWrapper} href="/create?panel=img2img">
               Image-to-image
             </Link>
-          </div>
-          <div>
+          </div> */}
+          {/* <div>
             <Link
               className={styles.LinkWrapper}
               href="/create?panel=inpainting"
@@ -61,7 +59,7 @@ export default function Footer() {
             <Link className={styles.LinkWrapper} href="/live-paint">
               Live paint
             </Link>
-          </div>
+          </div> */}
         </div>
         <div className={styles.Section}>
           <div className={styles.SectionTitle}>
@@ -89,7 +87,7 @@ export default function Footer() {
               Model details
             </Link>
           </div>
-          <div>
+          {/* <div>
             <Link className={styles.LinkWrapper} href="/info/models/updates">
               Model updates
             </Link>
@@ -98,9 +96,9 @@ export default function Footer() {
             <Link className={styles.LinkWrapper} href="/info/workers">
               Worker details
             </Link>
-          </div>
+          </div> */}
         </div>
-        <div className={styles.Section}>
+        {/* <div className={styles.Section}>
           <div className={styles.SectionTitle}>
             <IconTool stroke={1} />
             Utilities
@@ -133,7 +131,7 @@ export default function Footer() {
               User profile
             </Link>
           </div>
-        </div>
+        </div> */}
         <div className={styles.Section}>
           <div className={styles.SectionTitle}>
             <IconBuildingCommunity stroke={1} />
@@ -148,11 +146,11 @@ export default function Footer() {
               AI Horde <IconExternalLink size={18} stroke={1} />
             </div>
           </Link>
-          <div>
+          {/* <div>
             <Link className={styles.LinkWrapper} href="/showcase">
               Image showcase
             </Link>
-          </div>
+          </div> */}
         </div>
         <div className={styles.Section}>
           <div className={styles.SectionTitle}>
@@ -166,10 +164,10 @@ export default function Footer() {
           </div>
         </div>
         <div className={styles.Section}>
-          <div className={styles.SectionTitle}>
+          {/* <div className={styles.SectionTitle}>
             <IconMessage stroke={1} />
             Contact
-          </div>
+          </div> */}
           <div>
             <Link
               href="https://discord.com/channels/781145214752129095/1107628882783391744"
@@ -204,11 +202,11 @@ export default function Footer() {
               </div>
             </Link>
           </div>
-          <div>
+          {/* <div>
             <Link className={styles.LinkWrapper} href="/contact">
               Send message
             </Link>
-          </div>
+          </div> */}
         </div>
         <div className={styles.Section}>
           <div className={styles.SectionTitle}>
@@ -225,11 +223,11 @@ export default function Footer() {
               Changelog
             </Link>
           </div>
-          <div>
+          {/* <div>
             <Link className={styles.LinkWrapper} href="/contributors">
               Contributors
             </Link>
-          </div>
+          </div> */}
           <div>
             <Link
               href="https://github.com/daveschumaker/artbot-for-stable-diffusion"
@@ -242,10 +240,15 @@ export default function Footer() {
               </div>
             </Link>
           </div>
-          <div>
+          {/* <div>
             <Link className={styles.LinkWrapper} href="/settings?panel=prefs">
               Preferences
             </Link>
+          </div> */}
+          <div>
+            <Link className={styles.LinkWrapper} href="/terms">
+              Terms of Use
+            </Link>
           </div>
           <div>
             <Link className={styles.LinkWrapper} href="/privacy">

diff --git a/app/_components/HeaderNav/HamburgerNavButton.tsx b/app/_components/HeaderNav/HamburgerNavButton.tsx
@@ -237,6 +237,24 @@ export default function HamburgerNavButton() {
                 Import / Export
               </Link>
             </ul>
+            <Link
+              className={MenuOptionCss}
+              href="/terms"
+              onClick={handleCloseMenu}
+              tabIndex={open ? 0 : -1}
+            >
+              <IconHelp stroke={1.5} />
+              Terms of Use
+            </Link>
+            <Link
+              className={MenuOptionCss}
+              href="/privacy"
+              onClick={handleCloseMenu}
+              tabIndex={open ? 0 : -1}
+            >
+              <IconHelp stroke={1.5} />
+              Privacy Policy
+            </Link>
             <Link
               className={MenuOptionCss}
               href="/about"
@@ -246,7 +264,7 @@ export default function HamburgerNavButton() {
               <IconHelp stroke={1.5} />
               About
             </Link>
-            <ul className={MenuSubOptionsCss}>
+            {/* <ul className={MenuSubOptionsCss}>
               <Link
                 className={MenuSubOptionCss}
                 href="/contact"
@@ -256,7 +274,7 @@ export default function HamburgerNavButton() {
                 <IconPointFilled size={12} stroke={1.5} />
                 Contact
               </Link>
-            </ul>
+            </ul> */}
           </div>
         </div>
       </div>

diff --git a/app/about/page.tsx b/app/about/page.tsx
@@ -0,0 +1,50 @@
+'use client'
+
+/* eslint-disable @next/next/no-img-element */
+import Linker from '../_components/Linker'
+import PageTitle from '../_components/PageTitle'
+import { appBasepath } from '../_utils/browserUtils'
+
+export default function AboutPage() {
+  return (
+    <div className="col gap-x-20">
+      <PageTitle>About ArtBot</PageTitle>
+      <div className="max-w-[1000px]">
+        <img
+          src={`${appBasepath()}/painting_bot.png`}
+          alt="painting of a confused robot"
+          style={{
+            borderRadius: '8px',
+            boxShadow: `0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2)`,
+            marginBottom: '16px',
+            width: '100%'
+          }}
+        />
+      </div>
+      <div className="col gap-2">
+        <div>
+          ArtBot is a front-end web client designed for interacting with the{' '}
+          <Linker href="https://aihorde.net">AI Horde</Linker> distributed
+          cluster.
+        </div>
+        <div>
+          The AI Horde is an open source platform that utilizes idle GPU power
+          provided by a community of generous users that allows anyone to create
+          generative AI artwork on their own computers or mobile devices. More
+          information is available on the Stable Horde page and you can also
+          join their Discord server for further discussion on the technology
+          behind the cluster, as well as tools built on top of the platform
+          (such as ArtBot).
+        </div>
+        <div>
+          ArtBot was initially built as a way to experiment with various
+          client-side technology, such as IndexedDB and LocalStorage APIs. These
+          APIs allow you to securely and privately store the AI generated images
+          you*apos;ve created with the cluster within your own browser. The UI
+          components are built using NextJS. The source code is available on{' '}
+          <Linker href="https://github.com/Haidra-Org/artbot">Github</Linker>.
+        </div>
+      </div>
+    </div>
+  )
+}