diff --git a/app/page.tsx b/app/page.tsx index 0c9a915..270956d 100644 --- a/app/page.tsx +++ b/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() {
-
+
-

- Home -

+

An open standard for audio package management

+

+ Built on principles from modern software package managers, our specification simplifies the management and + distribution of audio plugins, presets, and projects. +

+ + +
+
+ Open Audio Stack diagram +
+

Registry

+

Database of package metadata and files with an API for read access.

+ +
+
+

Manager

+

Uses Registry API to search, view, download and install packages.

+ +
+
); diff --git a/app/theme.ts b/app/theme.ts index 4ff4cf8..b29fb80 100644 --- a/app/theme.ts +++ b/app/theme.ts @@ -128,6 +128,14 @@ const theme = createTheme({ color: '#fff', }, }, + outlined: { + borderColor: '#000', + color: '#000', + '&:hover': { + backgroundColor: '#f8f8f8', + color: '#000', + }, + }, }, }, }, diff --git a/components/editor.tsx b/components/editor.tsx index ed7efca..adc84b7 100644 --- a/components/editor.tsx +++ b/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) => { - diff --git a/public/images/open-audio-stack-diagram.svg b/public/images/open-audio-stack-diagram.svg new file mode 100644 index 0000000..7857bef --- /dev/null +++ b/public/images/open-audio-stack-diagram.svg @@ -0,0 +1,65 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/owlplug-logo.svg b/public/images/owlplug-logo.svg new file mode 100644 index 0000000..c88b2db --- /dev/null +++ b/public/images/owlplug-logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/images/studiorack-logo.svg b/public/images/studiorack-logo.svg new file mode 100644 index 0000000..f2d4e4c --- /dev/null +++ b/public/images/studiorack-logo.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/styles/components/editor.module.css b/styles/components/editor.module.css index 1e45f36..003c2ab 100644 --- a/styles/components/editor.module.css +++ b/styles/components/editor.module.css @@ -14,6 +14,6 @@ .buttons { display: flex; - gap: 12px; + gap: 1rem; justify-content: flex-end; } diff --git a/styles/page.module.css b/styles/page.module.css index c15050e..b462303 100644 --- a/styles/page.module.css +++ b/styles/page.module.css @@ -10,6 +10,40 @@ padding: 2rem; } +.cardDiagram { + position: relative; +} + +.cardDiagram h3 { + font-size: 1.25rem; + margin-bottom: 0.25rem; +} + +.cardDiagram p { + font-size: 1rem; + line-height: 1.25em; + margin-bottom: 0.25rem; +} + +.cardDiagram .caption { + position: absolute; + left: 30rem; + width: 12rem; +} + +.cardDiagram .captionRegistry { + top: 10rem; +} + +.cardDiagram .captionManager { + top: 24rem; +} + +.card h1 { + font-size: 2rem; + line-height: 1.25em; +} + .card h4 { margin-bottom: 0.5rem; } @@ -33,6 +67,37 @@ margin-bottom: 1rem; } +.button { + margin-right: 1rem !important; +} + +.buttonOutlined img { + filter: invert(1); +} + +.footer { + background-color: #f8f8f8; + display: flex; + justify-content: center; +} + +.footerInner { + padding: 2rem 4rem; + width: 80%; +} + +.footer p { + font-size: 0.75rem; + font-weight: 500; + margin-bottom: 0.2rem; +} + +.footer .logos { + align-items: center; + display: flex; + gap: 1rem; +} + @media (min-width: 64rem) { .mainColumns { display: flex; @@ -43,4 +108,22 @@ padding-top: 7rem; width: 33.33%; } + + .mainHome { + align-items: center; + justify-content: center; + min-height: calc(100vh - 117px); + } + + .mainHome .card { + width: 40%; + } + + .mainHome .captionRegistry { + top: 15rem; + } + + .mainHome .captionManager { + top: 29rem; + } }