feat: new pages

src/components/Button/Button.module.scss

@@ -18,6 +18,11 @@
     outline: 2px dashed currentColor;
     outline-offset: 0.25em;
   }
+
+  &[disabled] {
+    background: silver;
+    pointer-events: none;
+  }
 }
 
 .content {

src/components/Grid/Grid.module.scss

@@ -5,7 +5,7 @@
 @include grid.gutter('', functions.spacing(2));
 @include grid.flex;
 @include grid.valign(middle);
-@include grid.widths('', 2);
+@include grid.widths('', 3);
 
 @include mixins.mq(breakpoints.$tablet-landscape) {
   @include grid.widths('tablet-landscape', 3);

src/layouts/Home/index.jsx

@@ -9,15 +9,16 @@ import cardVariants from '~components/Card/Card.module.scss'
 import PageContainer from '~components/PageContainer'
 import Section from '~components/Section'
 import config from '~config'
+import image from '~images/avatar.jpg'
 
 import styles from './index.module.scss'
 
 const { fullName, shortName, logo, socialLinks, url } = config
 
 const sections = [
-  // { heading: 'Portfolio', href: '/portfolio', variant: 'primary' },
-  { heading: 'College work', href: '/college', variant: 'secondary' }
-  // { heading: 'Commisions', href: '/commisions', variant: 'tertiary' }
+  { heading: 'Portfolio', href: '/portfolio', variant: 'primary', image },
+  { heading: 'College work', href: '/college', variant: 'secondary', image },
+  { heading: 'Commisions', href: '/commisions', variant: 'tertiary', image }
 ]
 
 const HomeLayout = ({ meta }) => (
@@ -55,7 +56,7 @@ const HomeLayout = ({ meta }) => (
     </Section>
     <Section size="desktopMedium">
       <Grid flex className={styles.spaced}>
-        {sections.map(({ heading, href, variant, src }) => (
+        {sections.map(({ heading, href, variant, image }) => (
           <Grid.Item
             key={href}
             sizes="tablet-landscape-one-third"
@@ -64,7 +65,7 @@ const HomeLayout = ({ meta }) => (
             <Card
               href={href}
               heading={<Button variant={variant}>{heading}</Button>}
-              image={{ src, priority: true, ratio: '4:3' }}
+              image={{ src: image, priority: true, ratio: '4:3' }}
               className={cardVariants[variant]}
             />
           </Grid.Item>

src/pages/commisions.jsx

@@ -0,0 +1,70 @@
+import { Button, Card, Grid, Prose, VisuallyHidden } from '@newhighsco/chipset'
+import { object, string } from 'prop-types'
+import React from 'react'
+import urlJoin from 'url-join'
+
+import cardVariants from '~components/Card/Card.module.scss'
+import PageContainer from '~components/PageContainer'
+import Section from '~components/Section'
+import config from '~config'
+import image from '~images/avatar.jpg'
+
+const { url } = config
+
+const options = [
+  { name: 'Sketches', description: 'Description', image, disabled: true },
+  { name: 'Thigh Up', description: 'Description', href: '/', image },
+  { name: 'Glam Sheet', description: 'Description', href: '/', image }
+]
+
+const CommisionsPage = ({ meta, variant = 'tertiary' }) => (
+  <PageContainer meta={meta} variant={variant}>
+    <VisuallyHidden>
+      <h1>Comissions</h1>
+    </VisuallyHidden>
+    <Section size="desktopMedium">
+      <Grid>
+        {options.map(({ name, description, href, image, disabled }, index) => (
+          <Grid.Item
+            key={name}
+            style={{ marginTop: index !== 0 ? '1em' : undefined }}
+          >
+            <Grid valign="middle">
+              <Grid.Item sizes="one-third">
+                <Card
+                  href={href}
+                  heading={
+                    <Button disabled={disabled} variant={variant}>
+                      {disabled ? 'Not accepting requests' : 'Contact'}
+                    </Button>
+                  }
+                  image={{ src: image, ratio: '16:9' }}
+                  className={cardVariants[variant]}
+                />
+              </Grid.Item>
+              <Grid.Item sizes="two-thirds">
+                <Prose>
+                  <h2>{name}</h2>
+                  <p>{description}</p>
+                </Prose>
+              </Grid.Item>
+            </Grid>
+          </Grid.Item>
+        ))}
+      </Grid>
+    </Section>
+  </PageContainer>
+)
+
+export const getStaticProps = async () => ({
+  props: {
+    meta: { canonical: urlJoin(url, '/commisions') }
+  }
+})
+
+CommisionsPage.propTypes = {
+  variant: string,
+  meta: object
+}
+
+export default CommisionsPage

src/pages/portfolio.jsx

@@ -0,0 +1,28 @@
+import { Prose } from '@newhighsco/chipset'
+import { object } from 'prop-types'
+import React from 'react'
+import urlJoin from 'url-join'
+
+import PageContainer from '~components/PageContainer'
+import config from '~config'
+
+const { url } = config
+
+const PortfolioPage = ({ meta }) => (
+  <PageContainer meta={meta} variant="primary">
+    <Prose align="center">
+      <h1>Portfolio</h1>
+      <p>Coming soon</p>
+    </Prose>
+  </PageContainer>
+)
+
+export const getStaticProps = async () => ({
+  props: { meta: { canonical: urlJoin(url, '/portfolio') } }
+})
+
+PortfolioPage.propTypes = {
+  meta: object
+}
+
+export default PortfolioPage