Add homepage explaining the project

app/page.tsx

@@ -2,6 +2,9 @@
 import styles from '../styles/page.module.css';
 import { usePathname } from 'next/navigation';
 import Header from '../components/header';
+import { Button } from '@mui/material';
+import Image from 'next/image';
+import Link from 'next/link';
 
 export default function Home() {
   const pathname = usePathname();
@@ -10,13 +13,67 @@ export default function Home() {
     <div className={styles.page}>
       <Header pathname={pathname} />
       <main className={styles.section} id="main-content" tabIndex={-1}>
-        <section className={styles.mainColumns} aria-labelledby="form-title">
+        <section className={`${styles.mainColumns} ${styles.mainHome}`} aria-labelledby="form-title">
           <div className={styles.card}>
-            <h1 className={styles.hidden} id="form-title">
-              Home
-            </h1>
+            <h1 id="form-title">An open standard for audio package management</h1>
+            <p>
+              Built on principles from modern software package managers, our specification simplifies the management and
+              distribution of audio plugins, presets, and projects.
+            </p>
+            <Button className={styles.button} variant="contained" href="/plugin">
+              Add a package
+            </Button>
+            <Button
+              className={`${styles.button} ${styles.buttonOutlined}`}
+              variant="outlined"
+              href="https://open-audio-stack.github.io/open-audio-stack-registry/"
+              target="_blank"
+              endIcon={<Image src="/icons/external.svg" alt="" width={12} height={12} />}
+            >
+              View the registry
+            </Button>
+          </div>
+          <div className={`${styles.card} ${styles.cardDiagram}`}>
+            <img src="/images/open-audio-stack-diagram.svg" alt="Open Audio Stack diagram" className={styles.image} />
+            <div className={`${styles.caption} ${styles.captionRegistry}`}>
+              <h3>Registry</h3>
+              <p>Database of package metadata and files with an API for read access.</p>
+              <Button
+                variant="contained"
+                href="https://github.com/open-audio-stack/open-audio-stack-registry/blob/main/specification.md"
+                target="_blank"
+                endIcon={<Image src="/icons/external.svg" alt="" width={12} height={12} />}
+              >
+                View docs
+              </Button>
+            </div>
+            <div className={`${styles.caption} ${styles.captionManager}`}>
+              <h3>Manager</h3>
+              <p>Uses Registry API to search, view, download and install packages.</p>
+              <Button
+                variant="contained"
+                href="https://github.com/open-audio-stack/open-audio-stack-core/blob/main/specification.md"
+                target="_blank"
+                endIcon={<Image src="/icons/external.svg" alt="" width={12} height={12} />}
+              >
+                View docs
+              </Button>
+            </div>
           </div>
         </section>
+        <footer className={styles.footer}>
+          <div className={styles.footerInner}>
+            <p>INTEGRATED WITH</p>
+            <div className={styles.logos}>
+              <Link href="https://studiorack.github.io/studiorack-site/" target="_blank">
+                <Image src="/images/studiorack-logo.svg" alt="StudioRack logo" width={155} height={19} />
+              </Link>
+              <Link href="https://owlplug.com" target="_blank">
+                <Image src="/images/owlplug-logo.svg" alt="OwlPlug logo" width={99} height={27} />
+              </Link>
+            </div>
+          </div>
+        </footer>
       </main>
     </div>
   );

app/theme.ts

@@ -128,6 +128,14 @@ const theme = createTheme({
             color: '#fff',
           },
         },
+        outlined: {
+          borderColor: '#000',
+          color: '#000',
+          '&:hover': {
+            backgroundColor: '#f8f8f8',
+            color: '#000',
+          },
+        },
       },
     },
   },

components/editor.tsx

@@ -5,6 +5,7 @@ import { packageJsToYaml, packageYamlToJs, PackageVersion, RegistryType } from '
 import { Dispatch, SetStateAction, useEffect, useState, useRef } from 'react';
 import { Button } from '@mui/material';
 import styles from '../styles/components/editor.module.css';
+import Image from 'next/image';
 
 type EditorProps = {
   form: PackageVersion;
@@ -108,7 +109,12 @@ const Editor = ({ form, pkgType, setForm, version }: EditorProps) => {
         <Button variant="outlined" onClick={() => handleDownload(form)}>
           Download
         </Button>
-        <Button variant="contained" color="inherit" onClick={() => handleSubmitViaGitHub(pkgType, form, version)}>
+        <Button
+          variant="contained"
+          color="inherit"
+          onClick={() => handleSubmitViaGitHub(pkgType, form, version)}
+          endIcon={<Image src="/icons/external.svg" alt="" width={12} height={12} />}
+        >
           Submit via GitHub
         </Button>
       </div>