Added arcade demo (#14)

* added demo page

* linked demo page

src/App.tsx

@@ -11,6 +11,7 @@ const Editor = lazy(() => import('~/pages/templates/Editor'))
 const ZiteChef = lazy(() => import('~/pages/anthropic/ZiteChef'))
 const UserTaken = lazy(() => import('~/pages/404/Taken'))
 const NotFound = lazy(() => import('~/pages/404/404'))
+const Demo = lazy(() => import('~/pages/demo/Arcade'))
 
 const App: Component = () => {
   return (
@@ -24,6 +25,7 @@ const App: Component = () => {
           <Route path="/explore" component={Explorer} />
           <Route path="/editor" component={Editor} />
           <Route path="/api" component={ZiteChef} />
+          <Route path="/demo" component={Demo} />
           <Route path="/404" component={NotFound} />
           <Route path="/:username" component={UserTaken} />
         </Router>

src/pages/auth/Login.tsx

@@ -6,6 +6,7 @@ import Input from './components/Input'
 import Header from './components/Header'
 import Button from '~/components/Button'
 import Footer from './components/Footer'
+import Demo from './components/Demo'
 
 type LoginField = {
   name: 'identifier' | 'password';
@@ -59,6 +60,7 @@ const Login: Component = () => {
 
   return (
     <div class="flex size-full items-center justify-center">
+      <Demo />
       <OverlayLoader status={status()} error={error()} />
       <div class="flex size-full flex-col items-center justify-center space-y-4 px-4 md:w-1/3 md:px-0 lg:space-y-2">
         <Header />

src/pages/auth/SignUp.tsx

@@ -6,6 +6,7 @@ import Input from './components/Input'
 import Header from './components/Header'
 import Button from '~/components/Button'
 import Footer from './components/Footer'
+import Demo from './components/Demo'
 
 type SignUpField = {
   name: 'username' | 'email' | 'password';
@@ -61,6 +62,7 @@ const SignUp: Component = () => {
 
   return (
     <div class="flex size-full items-center justify-center">
+      <Demo />
       <OverlayLoader status={status()} error={error()} />
       <div class="flex size-full flex-col items-center justify-center space-y-4 px-4 md:w-1/3 md:px-0 lg:space-y-2">
         <Header />

src/pages/auth/components/Demo.tsx

@@ -0,0 +1,13 @@
+import { useNavigate } from '@solidjs/router'
+import { VoidComponent } from 'solid-js'
+import Button from '~/components/Button'
+
+const Demo: VoidComponent = () => {
+  const navigate = useNavigate()
+
+  return <div class="fixed right-10 top-10 flex w-[200px] items-end justify-end sm:w-[500px]">
+    <Button onClick={() => navigate('/demo')} size="h-14" label="demo >" />
+  </div>
+}
+
+export default Demo

src/pages/demo/Arcade.tsx

@@ -0,0 +1,23 @@
+import { useNavigate } from '@solidjs/router'
+import { Component, Suspense } from 'solid-js'
+import { Loader } from '~/components/Loader'
+
+const Demo: Component = () => {
+  const navigate = useNavigate()
+
+  return <div class="flex size-full items-center justify-center">
+    <button onClick={() => navigate('/')} class="fixed left-10 top-10 rounded-full bg-accent px-5 py-2 text-primary">{'< Back'}</button>
+    <div class="flex size-5/6 items-center justify-center">
+      <Suspense fallback={<Loader />}>
+        <div style={{'position':'relative','padding-bottom':'calc(53.63247863247863% + 41px)','height':'0','width':'100%'}}>
+          <iframe src="https://demo.arcade.software/9WurR7ejQZLsBNjHFrJa?embed&show_copy_link=true" title="zitefy.com"
+            frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen
+            allow="clipboard-write"
+            style={{'position':'absolute','top':'0','left':'0','width':'100%','height':'100%','color-scheme':'light'}} />
+        </div>
+      </Suspense>
+    </div>
+  </div>
+}
+
+export default Demo