diff --git a/content/pages/store/images/jorts.jpg b/content/pages/store/images/jorts.jpg new file mode 100644 index 0000000..1d3f94b Binary files /dev/null and b/content/pages/store/images/jorts.jpg differ diff --git a/content/pages/store/index.md b/content/pages/store/index.md new file mode 100644 index 0000000..71e9eb3 --- /dev/null +++ b/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. diff --git a/src/components/About/About.js b/src/components/About/About.js index eee182d..8d92475 100644 --- a/src/components/About/About.js +++ b/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` diff --git a/src/hooks/index.js b/src/hooks/index.js index 9d56e6b..9adfef9 100644 --- a/src/hooks/index.js +++ b/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" diff --git a/src/hooks/useStore.js b/src/hooks/useStore.js new file mode 100644 index 0000000..86d923b --- /dev/null +++ b/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 diff --git a/src/pages/playlists.js b/src/pages/playlists.js index d8d5b0b..9e41501 100644 --- a/src/pages/playlists.js +++ b/src/pages/playlists.js @@ -17,7 +17,7 @@ const PlaylistsPage = () => { const playlists = usePlaylists() return ( - + diff --git a/src/pages/store.js b/src/pages/store.js index aca6303..73e045e 100644 --- a/src/pages/store.js +++ b/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 = () => {

Store

-

- We don't have anything for you yet, but we're in the - process of creating some great stuff! -

- -
    - Hats - Shirts - Koozies - Stickers -
- -

- Sign up and we'll send you an email once the store is ready - to go. -

- -
- - -
+ + + + +
+

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. +

+
+ +
+ + + +
+
+
) } diff --git a/src/pages/thanks.js b/src/pages/thanks.js index 49121be..82f1df9 100644 --- a/src/pages/thanks.js +++ b/src/pages/thanks.js @@ -20,7 +20,7 @@ const ThanksPage = () => {

- Please check your email inbox and confirm it's really + Please check your email inbox to confirm it's really you.