feat(demo): describe components on the home page

- change order of component in nav
- minor css updates

demos/frontend/src/components/App/App.scss

@@ -1,12 +1,3 @@
-body {
-  margin: 0;
-  padding: 20px;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
-    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
 html {
   box-sizing: border-box;
 }
@@ -16,6 +7,15 @@ html {
   box-sizing: inherit;
 }
 
+body {
+  margin: 0;
+  padding: 20px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+  'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
@@ -31,6 +31,16 @@ ol {
   margin-top: 0;
 }
 
+h3 {
+  text-transform: uppercase;
+  font-weight: normal;
+  margin-top: 23px
+}
+
+a:link, a:visited, a:hover, a:active {
+  color: blue;
+}
+
 .app-container {
   display: flex;
   max-width: 1200px;

demos/frontend/src/components/App/App.tsx

@@ -22,7 +22,7 @@ function App() {
         <Router>
           <div className="app-container">
             <Navigation />
-            <div className="component-container">
+            <main className="component-container">
               <Routes>
                 <Route path="/" element={<Home />} />
                 <Route path="/pagination" element={<Pagination />} />
@@ -42,7 +42,7 @@ function App() {
                 <Route path="/modal" element={<ModalDemo />} />
                 <Route path="/quick-form" element={<ContactDemo />} />
               </Routes>
-            </div>
+            </main>
           </div>
         </Router>
       </ErrorBoundary>

demos/frontend/src/components/App/Navigation.tsx

@@ -10,16 +10,6 @@ function Navigation() {
             Home
           </Link>
         </li>
-        <li>
-          <Link to="/pagination" className="main-navigation__link">
-            Pagination
-          </Link>
-        </li>
-        <li>
-          <Link to="/navigation" className="main-navigation__link">
-            Navigation
-          </Link>
-        </li>
         <li>
           <Link to="/login" className="main-navigation__link">
             Login
@@ -44,13 +34,18 @@ function Navigation() {
           </Link>
         </li>
         <li>
-          <Link to="/async-handler" className="main-navigation__link">
-            Async Handler
+          <Link to="/quick-form" className="main-navigation__link">
+            Quick Form
           </Link>
         </li>
         <li>
-          <Link to="/recursive-data-lister" className="main-navigation__link">
-            Recursive Data Lister
+          <Link to="/navigation" className="main-navigation__link">
+            Navigation
+          </Link>
+        </li>
+        <li>
+          <Link to="/pagination" className="main-navigation__link">
+            Pagination
           </Link>
         </li>
         <li>
@@ -59,8 +54,13 @@ function Navigation() {
           </Link>
         </li>
         <li>
-          <Link to="/quick-form" className="main-navigation__link">
-            Contact (Quick Form)
+          <Link to="/recursive-data-lister" className="main-navigation__link">
+            Recursive Data Lister
+          </Link>
+        </li>
+        <li>
+          <Link to="/async-handler" className="main-navigation__link">
+            Async Handler (deprecated)
           </Link>
         </li>
       </ul>

demos/frontend/src/components/Home/Home.tsx

@@ -1,12 +1,118 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
+import css from './home.module.css';
 
 class Home extends React.Component {
   render() {
     return (
-      <div>
-        <h3>Demo</h3>
-        <p>React Component library.</p>
-      </div>
+      <>
+        <h2>NPM Library Demo</h2>
+
+        <h3>Forms</h3>
+        <p>
+          <strong>
+            <Link to="/login" className={css.package}>
+              Login
+            </Link>
+          </strong>{' '}
+          - customizable, responsive login component with server support that
+          validates against a default or custom Zod schema. Peer deps:
+          react-hook-form and zod.
+        </p>
+
+        <p>
+          <strong>
+            <Link to="/signup" className={css.package}>
+              Signup
+            </Link>
+          </strong>{' '}
+          - customizable, responsive signup component with server support that
+          validates against a default or custom Zod schema. Peer deps:
+          react-hook-form and zod.
+        </p>
+        <p>
+          <strong>
+            <Link to="/forgot-password" className={css.package}>
+              Forgot password
+            </Link>
+          </strong>{' '}
+          (includes forgot password reset) - customizable, responsive set of
+          forgot password components with server support that validate against a
+          default or custom Zod schema. Peer deps: react-hook-form and zod.
+        </p>
+        <p>
+          <strong>
+            <Link to="/quick-form" className={css.package}>
+              Quick Form
+            </Link>
+          </strong>{' '}
+          - form generator that can quickly produce simple React forms with
+          validation and server support. By default, it is a Contact form. Peer
+          deps: react-hook-form and zod.
+        </p>
+
+        <h3>UI Widgets</h3>
+        <p>
+          <strong>
+            <Link to="/navigation" className={css.package}>
+              Navigation
+            </Link>
+          </strong>{' '}
+          - customizable, responsive navigation component. Supports auth states
+          and comes with an optional sidecar component for login/logout/signup.
+        </p>
+        <p>
+          <strong>
+            <Link to="/pagination" className={css.package}>
+              Pagination
+            </Link>
+          </strong>{' '}
+          - sexy and responsive pagination component for React.
+        </p>
+        <p>
+          <strong>
+            <Link to="/modal" className={css.package}>
+              Modal
+            </Link>
+          </strong>{' '}
+          - customizable, responsive, portal free modal component. Optional
+          animation state support when adding/removing from DOM.
+        </p>
+
+        <h3>Other</h3>
+        <p>
+          <strong>
+            <Link to="/recursive-data-lister" className={css.package}>
+              Recursive Data Lister
+            </Link>
+          </strong>{' '}
+          - component that recursively pretty prints nested lists or objects
+          with various options for html markup and styling.
+        </p>
+        <p>
+          <strong>
+            <Link to="/async-handler" className={css.package}>
+              Async Handler
+            </Link>
+          </strong>{' '}
+          (deprecated) - HOC that takes an async function and returns views for
+          loading, no-data and error states. It accepts an optional method to
+          check a cache before the async function is run.
+          <em>
+            {' '}
+            This package has been deprecated and will be archived in the near
+            future.{' '}
+            <a
+              href="https://github.com/TanStack/query"
+              target="_blank"
+              rel="noreferrer"
+            >
+              React Query
+            </a>{' '}
+            is a more feature rich implementation based on React hooks.
+          </em>
+        </p>
+      </>
     );
   }
 }

demos/frontend/src/components/Home/home.module.css

@@ -0,0 +1,4 @@
+a.package, a:link.package, a:visited.package, a:hover.package, a:active.package {
+  color: black;
+  text-decoration: none;
+}