info page

client/src/app.tsx

@@ -6,13 +6,14 @@ import { Provider } from 'react-redux'
 
 import createWs from './ws';
 
-import Header from './components/header';
+import Nav from './components/nav';
 
 import Offers from './routes/offers';
 import Acp from './routes/acp';
 import Login from './routes/login';
 import Search from './routes/search';
 import List from './routes/list';
+import Info from './routes/info';
 
 import store, { userState, wsState, State } from './store'
 
@@ -29,13 +30,14 @@ const Main = () => {
 
     return (
         <main id="app">
-            <Header />
+            <Nav />
             <Router>
                 <Route path="/" component={Offers} />
                 <Route path="/login" component={Login} mode="login" />
                 <Route path="/register" component={Login} mode="register" />
                 <Route path="/search" component={Search} />
                 <Route path="/list" component={List} />
+                <Route path="/info" component={Info} />
 
                 {/* ACP */}
                 <Route path="/offers/acp" component={Acp} />

client/src/components/nav.tsx

@@ -10,12 +10,15 @@ function showAdmin(user) {
     return user && user.email === 'ntr@mnml.gg';
 }
 
-const Header = () => {
+const DEFAULT_ROUTE = '/info';
+
+const Nav = () => {
     const dispatch = useDispatch()
     const user = useSelector((state: State) => state.user);
 
     useEffect(() => {
         if (!user) route('/login');
+        route(DEFAULT_ROUTE)
     }, [user])
 
     async function logoutClick(e) {
@@ -47,7 +50,7 @@ const Header = () => {
 
     const userNav = () => (
         <nav>
-            <a href="/account">Account</a>
+            <a href="/info">Info</a>
             <a href="/auth/logout" onClick={logoutClick}>Logout</a>
         </nav>
     )
@@ -61,4 +64,4 @@ const Header = () => {
     );
 }
 
-export default Header;
+export default Nav;

client/src/routes/info.tsx

@@ -0,0 +1,49 @@
+import { h } from 'preact';
+
+const Info = () => {
+    return (
+        <div class='info'>
+            <div class='words'>
+                <section>
+                    <h1>Info</h1>
+                    <p> Thanks for signing up! </p>
+                    <p> Mates Crates is a record importing service in alpha. </p>
+                    <p> Its purpose is to reduce the cost of shipping vinyl records to Melbourne, Australia. </p>
+                </section>
+
+                <section>
+                    <h3>How It Works</h3>
+                    <p> First, add some records to your <span class='alt'>List</span> on the <a href='/search'>Search Page</a>. </p>
+                    <p> Mates Crates will then make offers to you for releases you add to your <a href='/list'>List</a>. </p>
+                </section>
+
+                <section>
+                    <h2>Offers</h2>
+                    <p> Think of offers like an expression of interest, they are not confirmed until they are set to <span class='alt-text'>Confirmed</span> status. </p>
+                    <p> After that they will be shipped to Melbourne and ready for pick up. </p>
+                </section>
+
+                <section>
+                    <h2>Pick Up</h2>
+                    <p> Use the contact options to get in touch. </p>
+                    <p> Payment is cash on delivery. </p>
+                </section>
+
+                <section>
+                    <h2>FAQ</h2>
+                    <h3> Record Condition </h3>
+                    <p> All Mates Crates offers are for records that are either mint condition or close to it. </p>
+                    <h3> Delivery Times </h3>
+                    <p> Records are usually available for pickup within a week. We order in bulk, which often means express, insured shipping to Melbourne. </p>
+                </section>
+            </div>
+            <section class='contact'>
+                <h2>Contact</h2>
+                <p><a href='mailto:ntr@mnml.gg'>Email</a></p>
+                <p><a href='https://discord.gg/QfjY8WNQyx'>Discord</a></p>
+            </section>
+        </div>
+    );
+};
+
+export default Info;

client/src/style/index.less

@@ -184,15 +184,23 @@ button, [type=submit] {
         }
     }
 
-    .info {
-        p {
-            margin-bottom: var(--base-spacing);
-        }
-    }
 
 }
 
-.alt-text {
+.info {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+
+    section {
+        margin-bottom: var(--base-spacing);
+    }
+
+    .contact {
+        text-align: center;
+    }
+}
+
+.alt-text, .alt {
     font-family: var(--secondary-font-family);
     // font-size: var(--small-font-size);
     text-transform: uppercase;
@@ -272,12 +280,8 @@ form {
 }
 
 a {
-    // padding-left: var(--base-spacing);
-    margin-right: var(--base-spacing);
-
     color: var(--secondary-font-color);
     font-family: var(--secondary-font-family);
-    font-size: var(--small-font-size);
     text-transform: uppercase;
 
     &:hover {
@@ -285,6 +289,13 @@ a {
     }
 }
 
+nav {
+    a {
+        font-size: var(--small-font-size);
+        margin-right: var(--base-spacing);
+    }
+}
+
 
 header {
     display: grid;