final touches.

content/pages/store/index.md

@@ -0,0 +1,5 @@
+## Nothing Here Yet
+
+We don't have anything for you yet, but we're in the process of creating some great stuff!
+
+Sign up and we'll send you an email once the store is ready to go.

src/components/About/About.js

@@ -38,6 +38,7 @@ const Image = styled(Img)`
     height: auto;
     border-radius: 0.25rem;
     grid-area: image;
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
 `
 
 const Description = styled.div`

src/hooks/index.js

@@ -1,6 +1,7 @@
 export {default as useTags} from "./useTags"
 export {default as useAbout} from "./useAbout"
 export {default as usePosts} from "./usePosts"
+export {default as useStore} from "./useStore"
 export {default as useEpisode} from "./useEpisode"
 export {default as useEpisodes} from "./useEpisodes"
 export {default as usePlaylist} from "./usePlaylist"

src/hooks/useStore.js

@@ -0,0 +1,22 @@
+import {useStaticQuery, graphql} from "gatsby"
+
+const useStore = () => {
+    const query = graphql`
+        {
+            file(absolutePath: {regex: "/content/pages/store/"}) {
+                childImageSharp {
+                    fluid(maxWidth: 600) {
+                        ...GatsbyImageSharpFluid
+                    }
+                }
+            }
+        }
+    `
+
+    const data = useStaticQuery(query)
+    const store = data.file.childImageSharp
+
+    return store
+}
+
+export default useStore

src/pages/playlists.js

@@ -17,7 +17,7 @@ const PlaylistsPage = () => {
     const playlists = usePlaylists()
 
     return (
-        <Container>
+        <Container centered>
             <SEO title="Playlists" />
 
             <StyledPlaylistsPage>

src/pages/store.js

@@ -1,19 +1,43 @@
+import Img from "gatsby-image"
+import {navigate} from "gatsby"
 import React, {useState} from "react"
 import styled from "styled-components"
+import {useStore} from "../hooks"
 import {post} from "../utils/fetch"
 import {SEO} from "../components/SEO"
 import Container from "../styles/Container"
 import {STORE_NOTIFICATIONS} from "../utils/convertkit"
-import {navigate} from "gatsby"
 
-const Item = styled.li`
-    list-style: none;
+const Box = styled.div`
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    max-width: 46.875rem;
+    margin-top: 2rem;
+    box-sizing: content-box;
+    line-height: 1.5;
+
+    @media (max-width: 40.625rem) {
+        grid-template-columns: 1fr;
+        max-width: 30rem;
+    }
+`
+
+const Image = styled(Img)`
+    border-radius: 0.25rem;
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+`
+
+const Right = styled.div`
+    display: grid;
+    grid-template-rows: repeat(2, auto);
+    padding: 2rem;
+    gap: 1rem;
+    align-content: center;
 `
 
 const Form = styled.form`
     display: grid;
     gap: 0.5rem;
-    margin-top: 1rem;
     width: 100%;
     max-width: 21.875rem;
     justify-self: center;
@@ -48,6 +72,7 @@ const Button = styled.button`
 `
 
 const StorePage = () => {
+    const {fluid} = useStore()
     const [email, setEmail] = useState("")
     const [loading, setLoading] = useState(false)
 
@@ -76,27 +101,37 @@ const StorePage = () => {
 
             <h1>Store</h1>
 
-            <p>
-                We don&apos;t have anything for you yet, but we&apos;re in the
-                process of creating some great stuff!
-            </p>
-
-            <ul>
-                <Item>Hats</Item>
-                <Item>Shirts</Item>
-                <Item>Koozies</Item>
-                <Item>Stickers</Item>
-            </ul>
-
-            <p>
-                Sign up and we&apos;ll send you an email once the store is ready
-                to go.
-            </p>
-
-            <Form onSubmit={onSubmit}>
-                <Input type="email" value={email} onChange={onChange} />
-                <Button disabled={loading}>NOTIFY ME</Button>
-            </Form>
+            <Box>
+                <Image fluid={fluid} />
+
+                <Right>
+                    <div>
+                        <h2>Nothing Here Yet</h2>
+
+                        <p>
+                            We don&apos;t have anything for you yet, but
+                            we&apos;re in the process of creating some great
+                            stuff!
+                        </p>
+
+                        <p>
+                            Sign up and we&apos;ll send you an email once the
+                            store is ready to go.
+                        </p>
+                    </div>
+
+                    <Form onSubmit={onSubmit}>
+                        <Input
+                            type="email"
+                            value={email}
+                            onChange={onChange}
+                            required
+                        />
+
+                        <Button disabled={loading}>NOTIFY ME</Button>
+                    </Form>
+                </Right>
+            </Box>
         </Container>
     )
 }

src/pages/thanks.js

@@ -20,7 +20,7 @@ const ThanksPage = () => {
 
             <div>
                 <p>
-                    Please check your email inbox and confirm it&apos;s really
+                    Please check your email inbox to confirm it&apos;s really
                     you.
                 </p>