some static pages

Author: timmyichen

client/Header.tsx

@@ -5,7 +5,7 @@ import { useRouter } from 'next/router';
 import LogoutLink from './components/LogoutLink';
 
 const anonRoutes = {
-  left: [{ href: '/', label: 'Home' }],
+  left: [{ href: '/', label: 'Home' }, { href: '/about', label: 'About' }],
   right: [
     { href: '/login', label: 'Log in' },
     { href: '/join', label: 'Join' },
@@ -16,6 +16,7 @@ const authedRoutes = {
   left: [
     { href: '/event', label: 'My Event' },
     { href: '/create', label: 'Create' },
+    { href: '/about', label: 'About' },
   ],
   right: [
     { href: '/account', label: 'Account' },

pages/_error.tsx

@@ -1,8 +1,15 @@
 import * as React from 'react';
 
+const email = '[email protected]';
+
 export default () => (
   <h1>
     hey you hit an error thats a real shame can you let me know what happened at
-    [email protected] thanks
+    <a href={`mailto:${email}`}>{email}</a> thanks
+    <style jsx>{`
+      h1 {
+        max-width: 600px;
+      }
+    `}</style>
   </h1>
 );

pages/about.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+
+const email = '[email protected]';
+
+export default () => {
+  return (
+    <div className="about-page">
+      <p>
+        Hello, my name is Tim. I made this thing. If you have questions,
+        comments, or concerns, you can reach me at{' '}
+        <a href={`mailto:${email}`}>{email}</a>.
+      </p>
+      <p>
+        This is a simple tool for people to set up events (like Hackathons)
+        where one group (attendees) get assistance from another group (mentors).
+        Events have an expiration time and all accounts/data associated with the
+        event are deleted afterwards.
+      </p>
+      <p>
+        The MVP of this thing was made over a two days so things might break. If
+        they do, please let me know at the email above.
+      </p>
+      <p>
+        The code is open-source and you're welcome to make improvements via pull
+        requests. Github link is here:{' '}
+        <a href="https://github.com/timmyichen/help-a-hacker" target="_blank">
+          timmyichen/help-a-hacker
+        </a>
+        . It's written in TypeScript, React, Redux, Next.js, and Bootstrap on
+        the client, and TypeScript, Node, Express, and MongoDB on the server.
+      </p>
+      <style jsx>{`
+        .about-page {
+          max-width: 400px;
+          margin: 50px auto;
+        }
+      `}</style>
+    </div>
+  );
+};

pages/index.tsx

@@ -1,10 +1,19 @@
 import * as React from 'react';
+import Link from 'next/link';
 
 export default () => {
   return (
     <div className="landing-page">
+      <p>
+        Hey, and welcome to Help-A-Hacker. Navigate pages above or visit the
+        <Link href="/about">
+          <a>About Page</a>
+        </Link>{' '}
+        to learn some more.
+      </p>
       <style jsx>{`
         .landing-page {
+          max-width: 600px;
         }
       `}</style>
     </div>