diff --git a/gatsby-config.js b/gatsby-config.js index 65bed1f..35b90e2 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -33,6 +33,7 @@ module.exports = { schemas: { // all the schemas here test: require("./src/schemas/test.json"), + faq: require("./src/schemas/faq.json"), product_page: require("./src/schemas/product_page.json"), product: require("./src/schemas/product.json"), Process: require("./src/schemas/process.json"), @@ -49,9 +50,9 @@ module.exports = { resolve: "gatsby-plugin-react-svg", options: { rule: { - include: /vectors/ // See below to configure properly - } - } - } + include: /vectors/, // See below to configure properly + }, + }, + }, ], } diff --git a/package-lock.json b/package-lock.json index da83241..a60e5a0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1135,6 +1135,97 @@ "to-fast-properties": "^2.0.0" } }, + "@emotion/babel-plugin": { + "version": "11.3.0", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.3.0.tgz", + "integrity": "sha512-UZKwBV2rADuhRp+ZOGgNWg2eYgbzKzQXfQPtJbu/PLy8onurxlNCLvxMQEvlr1/GudguPI5IU9qIY1+2z1M5bA==", + "requires": { + "@babel/helper-module-imports": "^7.12.13", + "@babel/plugin-syntax-jsx": "^7.12.13", + "@babel/runtime": "^7.13.10", + "@emotion/hash": "^0.8.0", + "@emotion/memoize": "^0.7.5", + "@emotion/serialize": "^1.0.2", + "babel-plugin-macros": "^2.6.1", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^4.0.0", + "find-root": "^1.1.0", + "source-map": "^0.5.7", + "stylis": "^4.0.3" + }, + "dependencies": { + "@babel/helper-module-imports": { + "version": "7.13.12", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.13.12.tgz", + "integrity": "sha512-4cVvR2/1B693IuOvSI20xqqa/+bl7lqAMR59R4iu39R9aOX8/JoYY1sFaNvUMyMBGnHdwvJgUrzNLoUZxXypxA==", + "requires": { + "@babel/types": "^7.13.12" + } + }, + "@babel/helper-plugin-utils": { + "version": "7.13.0", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.13.0.tgz", + "integrity": "sha512-ZPafIPSwzUlAoWT8DKs1W2VyF2gOWthGd5NGFMsBcMMol+ZhK+EQY/e6V96poa6PA/Bh+C9plWN0hXO1uB8AfQ==" + }, + "@babel/helper-validator-identifier": { + "version": "7.14.0", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz", + "integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A==" + }, + "@babel/plugin-syntax-jsx": { + "version": "7.12.13", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.12.13.tgz", + "integrity": "sha512-d4HM23Q1K7oq/SLNmG6mRt85l2csmQ0cHRaxRXjKW0YFdEXqlZ5kzFQKH5Uc3rDJECgu+yCRgPkG04Mm98R/1g==", + "requires": { + "@babel/helper-plugin-utils": "^7.12.13" + } + }, + "@babel/runtime": { + "version": "7.14.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.0.tgz", + "integrity": "sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + }, + "@babel/types": { + "version": "7.14.1", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.1.tgz", + "integrity": "sha512-S13Qe85fzLs3gYRUnrpyeIrBJIMYv33qSTg1qoBwiG6nPKwUWAD9odSzWhEedpwOIzSEI6gbdQIWEMiCI42iBA==", + "requires": { + "@babel/helper-validator-identifier": "^7.14.0", + "to-fast-properties": "^2.0.0" + } + }, + "@emotion/memoize": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz", + "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==" + }, + "escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==" + } + } + }, + "@emotion/cache": { + "version": "11.4.0", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.4.0.tgz", + "integrity": "sha512-Zx70bjE7LErRO9OaZrhf22Qye1y4F7iDl+ITjet0J+i+B88PrAOBkKvaAWhxsZf72tDLajwCgfCjJ2dvH77C3g==", + "requires": { + "@emotion/memoize": "^0.7.4", + "@emotion/sheet": "^1.0.0", + "@emotion/utils": "^1.0.0", + "@emotion/weak-memoize": "^0.2.5", + "stylis": "^4.0.3" + } + }, + "@emotion/hash": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", + "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==" + }, "@emotion/is-prop-valid": { "version": "0.8.8", "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", @@ -1148,6 +1239,77 @@ "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" }, + "@emotion/react": { + "version": "11.4.0", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.4.0.tgz", + "integrity": "sha512-4XklWsl9BdtatLoJpSjusXhpKv9YVteYKh9hPKP1Sxl+mswEFoUe0WtmtWjxEjkA51DQ2QRMCNOvKcSlCQ7ivg==", + "requires": { + "@babel/runtime": "^7.13.10", + "@emotion/cache": "^11.4.0", + "@emotion/serialize": "^1.0.2", + "@emotion/sheet": "^1.0.1", + "@emotion/utils": "^1.0.0", + "@emotion/weak-memoize": "^0.2.5", + "hoist-non-react-statics": "^3.3.1" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.14.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.0.tgz", + "integrity": "sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + } + } + }, + "@emotion/serialize": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz", + "integrity": "sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==", + "requires": { + "@emotion/hash": "^0.8.0", + "@emotion/memoize": "^0.7.4", + "@emotion/unitless": "^0.7.5", + "@emotion/utils": "^1.0.0", + "csstype": "^3.0.2" + } + }, + "@emotion/sheet": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.0.1.tgz", + "integrity": "sha512-GbIvVMe4U+Zc+929N1V7nW6YYJtidj31lidSmdYcWozwoBIObXBnaJkKNDjZrLm9Nc0BR+ZyHNaRZxqNZbof5g==" + }, + "@emotion/styled": { + "version": "11.3.0", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.3.0.tgz", + "integrity": "sha512-fUoLcN3BfMiLlRhJ8CuPUMEyKkLEoM+n+UyAbnqGEsCd5IzKQ7VQFLtzpJOaCD2/VR2+1hXQTnSZXVJeiTNltA==", + "requires": { + "@babel/runtime": "^7.13.10", + "@emotion/babel-plugin": "^11.3.0", + "@emotion/is-prop-valid": "^1.1.0", + "@emotion/serialize": "^1.0.2", + "@emotion/utils": "^1.0.0" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.14.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.0.tgz", + "integrity": "sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + }, + "@emotion/is-prop-valid": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.0.tgz", + "integrity": "sha512-9RkilvXAufQHsSsjQ3PIzSns+pxuX4EW8EbGeSPjZMHuMx6z/MOzb9LpqNieQX4F3mre3NWS2+X3JNRHTQztUQ==", + "requires": { + "@emotion/memoize": "^0.7.4" + } + } + } + }, "@emotion/stylis": { "version": "0.8.5", "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", @@ -1158,6 +1320,16 @@ "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" }, + "@emotion/utils": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz", + "integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==" + }, + "@emotion/weak-memoize": { + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz", + "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==" + }, "@endemolshinegroup/cosmiconfig-typescript-loader": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/@endemolshinegroup/cosmiconfig-typescript-loader/-/cosmiconfig-typescript-loader-3.0.2.tgz", @@ -6859,6 +7031,11 @@ } } }, + "find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==" + }, "find-up": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz", @@ -16890,6 +17067,11 @@ } } }, + "stylis": { + "version": "4.0.10", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.10.tgz", + "integrity": "sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg==" + }, "subscriptions-transport-ws": { "version": "0.9.18", "resolved": "https://registry.npmjs.org/subscriptions-transport-ws/-/subscriptions-transport-ws-0.9.18.tgz", diff --git a/package.json b/package.json index 6052d68..483ef5e 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,8 @@ "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1" }, "dependencies": { + "@emotion/react": "^11.4.0", + "@emotion/styled": "^11.3.0", "@walltowall/gatsby-source-prismic-schemas": "^1.1.0", "gatsby": "^2.26.1", "gatsby-background-image": "^1.5.0", diff --git a/src/components/contact/contact-styles.js b/src/components/contact/contact-styles.js index d5767b0..63dcbea 100644 --- a/src/components/contact/contact-styles.js +++ b/src/components/contact/contact-styles.js @@ -1,12 +1,12 @@ -import styled from "styled-components" +import styled from "@emotion/styled" import colors from "../../style/colors" import dimensions from "../../style/dimensions" - import { fontSizes } from "../../style/type-styles" import { layoutPaddingDesktop, layoutPaddingMobile, } from "../../style/variables" + export const ContactContainer = styled.div` min-height: 100vh; ` @@ -16,7 +16,6 @@ export const ContactForm = styled.div` width: 100%; @media (min-width: ${dimensions.maxwidthTablet}px) { width: 36vw; - } color: ${colors.blue900}; input { @@ -49,7 +48,7 @@ export const ContactSection = styled.div` export const ContactDescription = styled.div` margin-bottom: 64px; ` -export const ContactButton = styled.button` +export const ContactButton = styled.a` font-size: 16px; padding-right: 60px; padding-left: 60px; @@ -60,6 +59,11 @@ export const ContactButton = styled.button` color: ${colors.white900}; border: none; + transition: all 0.1s ease-in-out; + + &:hover { + box-shadow: 0 0 46px -9px ${colors.orange900}; + } ` export const ContactImageSection = styled.div` @@ -72,7 +76,6 @@ export const ContactImageSection = styled.div` object-fit: cover; } - @media (max-width: ${dimensions.maxwidthTablet}px) { margin-right: -${layoutPaddingMobile}; @@ -83,9 +86,7 @@ export const ContactImageSection = styled.div` height: 263px; object-fit: cover; } - } - ` export const SpecificContactInfo = styled.div` @@ -108,7 +109,4 @@ export const AddressSection = styled.div` margin-bottom: 110px; ` -export const UseCaseSection = styled.div` - - -` \ No newline at end of file +export const UseCaseSection = styled.div`` diff --git a/src/components/faq/faq-contact/FAQContact.js b/src/components/faq/faq-contact/FAQContact.js new file mode 100644 index 0000000..79ae096 --- /dev/null +++ b/src/components/faq/faq-contact/FAQContact.js @@ -0,0 +1,18 @@ +import React from "react" +import { ContactButton } from "../../contact/contact-styles" +import { Banner, CTABackground, CTATitle } from "./FAQContact.styles" +export const FAQContact = ({ + imageUrl, + ctaTitle, + ctaLabel, + ctaDestination, +}) => ( + <> + + + {ctaTitle} + {ctaLabel} + + + +) diff --git a/src/components/faq/faq-contact/FAQContact.styles.js b/src/components/faq/faq-contact/FAQContact.styles.js new file mode 100644 index 0000000..1edc9be --- /dev/null +++ b/src/components/faq/faq-contact/FAQContact.styles.js @@ -0,0 +1,41 @@ +import styled from "@emotion/styled" +import colors from "../../../style/colors" +import dimensions from "../../../style/dimensions" +import { H3 } from "../../../style/type-styles" +import { + layoutPaddingDesktop, + layoutPaddingMobile, +} from "../../../style/variables" + +export const Banner = styled.div` + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + background-image: url(${props => props.imageUrl}); + width: 100vw; + padding: 40px 60px; + margin: -${layoutPaddingDesktop}; + height: 70vh; + + @media (max-width: ${dimensions.maxwidthMobile}px) { + height: 40vh; + margin: -${layoutPaddingMobile}; + } +` + +export const CTABackground = styled.div` + width: 100%; + height: 100%; + + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + background-color: ${colors.white900}; +` + +export const CTATitle = styled(H3)` + color: ${colors.blue900}; +` diff --git a/src/components/faq/faq-question/FAQQuestion.js b/src/components/faq/faq-question/FAQQuestion.js new file mode 100644 index 0000000..ce407dd --- /dev/null +++ b/src/components/faq/faq-question/FAQQuestion.js @@ -0,0 +1,34 @@ +import React, { useState } from "react" +import CloseIcon from "../../../vectors/close.svg" +import OpenIcon from "../../../vectors/open.svg" +import { + FAQAnswer, + FAQQuestionTitle, + ToggleContainer, +} from "./FAQQuestion.styles" + +export const FAQQuestion = ({ questionText, answerText }) => { + const [isOpen, setOpen] = useState(false) + + return ( + <> + + {questionText} + {isOpen ? ( + setOpen(false)} + role="button" + aria-label="Close FAQ question" + /> + ) : ( + setOpen(true)} + role="button" + aria-label="Expand FAQ question" + /> + )} + + {isOpen && {answerText}} + + ) +} diff --git a/src/components/faq/faq-question/FAQQuestion.styles.js b/src/components/faq/faq-question/FAQQuestion.styles.js new file mode 100644 index 0000000..d65db58 --- /dev/null +++ b/src/components/faq/faq-question/FAQQuestion.styles.js @@ -0,0 +1,23 @@ +import styled from "@emotion/styled" +import colors from "../../../style/colors" +import { Body, H4 } from "../../../style/type-styles" + +export const ToggleContainer = styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; +` + +export const FAQQuestionTitle = styled(H4)` + color: ${colors.blue900}; + margin: 0; +` + +export const FAQAnswer = styled(Body)` + color: ${colors.blue900}; + padding-left: 24px; + width: 90%; + line-height: 32px; +` diff --git a/src/components/faq/faq.js b/src/components/faq/faq.js new file mode 100644 index 0000000..04d493f --- /dev/null +++ b/src/components/faq/faq.js @@ -0,0 +1,74 @@ +import React from "react" +import { H3 } from "../../style/type-styles" +import { FAQContact } from "./faq-contact/FAQContact" +import { FAQQuestion } from "./faq-question/FAQQuestion" +import { + FAQContainer, + FAQQuestionsContainer, + FAQWrapper, + TopicContainer, + TopicFAQSection, +} from "./faq.styles" +import { TopicsPicker } from "./topics-picker/TopicsPicker" + +const FAQPage = ({ data }) => { + const { + main_section_heading, + topics_section_heading, + cta_button_destination, + cta_button_text, + cta_heading, + ctabackground, + frequently_asked_question, + individual_topic, + } = data + + const [selectedTopic, setSelected] = React.useState() + + return ( + +

{main_section_heading}

+ + + ({ + ...t, + label: t.topic_heading, + id: t.topic_heading + i, + selected: t.topic_heading === selectedTopic, + questions: frequently_asked_question.filter( + faq => faq.topic === t.topic_heading + ), + }))} + onTopicPicked={t => + setSelected( + t.topic_heading === selectedTopic ? undefined : t.topic_heading + ) + } + /> + + + + {frequently_asked_question + .filter(fq => (selectedTopic ? fq.topic === selectedTopic : true)) + .map(fq => ( + + + + ))} + + + + + ) +} + +export default FAQPage diff --git a/src/components/faq/faq.styles.js b/src/components/faq/faq.styles.js new file mode 100644 index 0000000..a057e0d --- /dev/null +++ b/src/components/faq/faq.styles.js @@ -0,0 +1,35 @@ +import styled from "@emotion/styled" +import dimensions from "../../style/dimensions" + +export const FAQContainer = styled.div` + padding-top: 12vh; +` +export const TopicFAQSection = styled.section` + display: flex; + flex-direction: row; + justify-content: space-between; + @media (max-width: ${dimensions.maxwidthDesktop}px) { + flex-direction: column-reverse; + } + margin-bottom: 20vh; + @media (max-width: ${dimensions.maxwidthMobile}px) { + margin-bottom: 10vh; + } +` + +export const TopicContainer = styled.div` + flex: 4; +` + +export const FAQQuestionsContainer = styled.div` + display: flex; + flex-direction: column; + flex: 6; + @media (max-width: ${dimensions.maxwidthDesktop}px) { + display: none; + } +` + +export const FAQWrapper = styled.div` + margin-bottom: 20px; +` diff --git a/src/components/faq/topics-picker/TopicsPicker.js b/src/components/faq/topics-picker/TopicsPicker.js new file mode 100644 index 0000000..db231e6 --- /dev/null +++ b/src/components/faq/topics-picker/TopicsPicker.js @@ -0,0 +1,44 @@ +import React, { useState } from "react" +import { FAQQuestion } from "../faq-question/FAQQuestion" +import { + TopicBox, + TopicFAQContainer, + TopicsContainer, +} from "./TopicsPicker.styles" + +export const TopicsPicker = ({ topics, onTopicPicked }) => { + const [openTopics, setOpen] = useState([]) + const onTopicSelected = topic => { + const { label } = topic + onTopicPicked(topic) + setOpen(prev => + prev.includes(label) ? prev.filter(t => t !== label) : [...prev, label] + ) + } + + return ( + + {topics.map(t => ( + + onTopicSelected(t)} + selected={t.selected} + > + {t.label} + + {openTopics.includes(t.label) && + t.questions.map(fq => ( + + + + ))} + + ))} + + ) +} diff --git a/src/components/faq/topics-picker/TopicsPicker.styles.js b/src/components/faq/topics-picker/TopicsPicker.styles.js new file mode 100644 index 0000000..9c1c834 --- /dev/null +++ b/src/components/faq/topics-picker/TopicsPicker.styles.js @@ -0,0 +1,59 @@ +import { css } from "@emotion/react" +import styled from "@emotion/styled" +import colors from "../../../style/colors" +import dimensions from "../../../style/dimensions" + +export const TopicsContainer = styled.div` + display: flex; + flex-direction: row; + flex-wrap: wrap; +` + +const SelectedBox = css` + border: 3px solid ${colors.orange900}; + background-color: ${colors.orange900_transparent}; +` + +export const TopicBox = styled.div` + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + margin: 10px; + flex: 50%; + max-width: 40%; + aspect-ratio: 4/3; + font-weight: bolder; + + cursor: pointer; + border: 2px solid ${colors.orange900}; + background-color: transparent; + transition: all 0.1s ease-in-out; + color: ${colors.orange900}; + text-transform: uppercase; + + ${props => props.selected && SelectedBox}; + + &:hover { + ${SelectedBox}; + } + + @media (max-width: ${dimensions.maxwidthDesktop}px) { + flex: 100%; + max-width: 100%; + height: 100px; + } + @media (max-width: ${dimensions.maxwidthDesktop}px) { + width: 100%; + } +` + +export const TopicFAQContainer = styled.div` + flex: 100%; + max-width: 100%; + margin: 10px; + display: none; + @media (max-width: ${dimensions.maxwidthDesktop}px) { + display: initial; + } +` diff --git a/src/components/layout.js b/src/components/layout.js index 0d2e5b4..2117e43 100644 --- a/src/components/layout.js +++ b/src/components/layout.js @@ -1,16 +1,16 @@ import React from "react" import styled from "styled-components" -import "../style/typography.scss" -import "../style/global.scss" -import dimensions from "../style/dimensions" -import { layoutPaddingDesktop, layoutPaddingMobile } from "../style/variables" import Footer from "../components/footer/footer" import Header from "../components/header/header" +import dimensions from "../style/dimensions" +import "../style/global.scss" +import "../style/typography.scss" +import { layoutPaddingDesktop, layoutPaddingMobile } from "../style/variables" const LayoutContainer = styled.div`` const LayoutBody = styled.div` @media (min-width: ${dimensions.maxwidthTablet}px) { - padding: 0 ${layoutPaddingDesktop} ${layoutPaddingDesktop};s + padding: 0 ${layoutPaddingDesktop} ${layoutPaddingDesktop}; } @media (max-width: ${dimensions.maxwidthTablet}px) { diff --git a/src/components/solutions/solutions-styles.js b/src/components/solutions/solutions-styles.js index 92fa828..0a42ce2 100644 --- a/src/components/solutions/solutions-styles.js +++ b/src/components/solutions/solutions-styles.js @@ -1,4 +1,4 @@ -import styled from "styled-components" +import styled from '@emotion/styled' import colors from "../../style/colors" import dimensions from "../../style/dimensions" import { diff --git a/src/pages/faq.js b/src/pages/faq.js new file mode 100644 index 0000000..178ba2d --- /dev/null +++ b/src/pages/faq.js @@ -0,0 +1,39 @@ +import { graphql } from "gatsby" +import React from "react" +import FAQPage from "../components/faq/faq" +import Layout from "../components/layout" + +export default function FAQ({ data }) { + return ( + + + + ) +} + +export const query = graphql` + query FAQQuery { + prismicFaqPage(data: {}) { + data { + main_section_heading + topics_section_heading + ctabackground { + url + } + cta_heading + cta_button_text + cta_button_destination { + url + } + frequently_asked_question { + question + answer + topic + } + individual_topic { + topic_heading + } + } + } + } +` diff --git a/src/schemas/faq.json b/src/schemas/faq.json new file mode 100644 index 0000000..246d048 --- /dev/null +++ b/src/schemas/faq.json @@ -0,0 +1,96 @@ +{ + "Main": {}, + "Top Questions": { + "main_section_heading": { + "type": "Text", + "config": { + "label": "Main Section Heading" + } + }, + "frequently_asked_question": { + "type": "Group", + "config": { + "fields": { + "question": { + "type": "Text", + "config": { + "label": "Question" + } + }, + "answer": { + "type": "Text", + "config": { + "label": "Answer" + } + }, + "topic": { + "type": "Text", + "config": { + "label": "topic", + "placeholder": "The topic this question answer pair is associated with" + } + } + }, + "label": "Frequently Asked Question" + } + } + }, + "Topics": { + "topics_section_heading": { + "type": "Text", + "config": { + "label": "Topics Section Heading" + } + }, + "individual_topic": { + "type": "Group", + "config": { + "fields": { + "topic_image": { + "type": "Image", + "config": { + "constraint": {}, + "thumbnails": [], + "label": "Topic Image" + } + }, + "topic_heading": { + "type": "Text", + "config": { + "label": "Topic Heading" + } + } + }, + "label": "Individual Topic" + } + } + }, + "Call To Action": { + "ctabackground": { + "type": "Image", + "config": { + "constraint": {}, + "thumbnails": [], + "label": "ctaBackground" + } + }, + "cta_heading": { + "type": "Text", + "config": { + "label": "CTA Heading" + } + }, + "cta_button_text": { + "type": "Text", + "config": { + "label": "CTA Button Text" + } + }, + "cta_button_destination": { + "type": "Link", + "config": { + "label": "CTA Button Destination" + } + } + } +} diff --git a/src/schemas/use_case.json b/src/schemas/use_case.json index 2433881..ee6af57 100644 --- a/src/schemas/use_case.json +++ b/src/schemas/use_case.json @@ -53,6 +53,12 @@ "label": "Overview Description" } }, + "image_one_alt": { + "type": "Text", + "config": { + "label": "Image One Alt" + } + }, "overview_image_one": { "type": "Image", "config": { @@ -61,6 +67,12 @@ "label": "Overview Image One" } }, + "image_two_alt": { + "type": "Text", + "config": { + "label": "Image Two Alt" + } + }, "overview_image_two": { "type": "Image", "config": { diff --git a/src/style/type-styles.js b/src/style/type-styles.js index 00762ba..8a8e277 100644 --- a/src/style/type-styles.js +++ b/src/style/type-styles.js @@ -1,9 +1,10 @@ -import styled from "styled-components" +import styled from "@emotion/styled" const minSize = { h1: 50, h2: 30, h3: 20, + h4: 20, p: 16, nav: 16, sub1: 25, @@ -22,6 +23,7 @@ const fontSizes = { h1: `calc(${minSize.h1}px + (64 - ${minSize.h1}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`, h2: `calc(${minSize.h2}px + (48 - ${minSize.h2}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`, h3: `calc(${minSize.h3}px + (32 - ${minSize.h3}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`, + h4: `calc(${minSize.h4}px + (22 - ${minSize.h4}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`, p: `calc(${minSize.p}px + (24 - ${minSize.p}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`, NavText: `calc(${minSize.nav}px + (24 - ${minSize.nav}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`, Sub1: `calc(${minSize.sub1}px + (36 - ${minSize.sub1}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`, @@ -43,6 +45,11 @@ const H3 = styled.h3` font-weight: bold; ` +const H4 = styled.h4` + font-size: ${fontSizes.h4}; + font-weight: bold; +` + const P = styled.p` font-size: ${fontSizes.p}; ` @@ -60,4 +67,4 @@ const Body = styled.div` font-size: ${fontSizes.body}; ` -export { H1, H2, H3, P, NavText, Sub1, Body } +export { H1, H2, H3, H4, P, NavText, Sub1, Body, fontSizes } diff --git a/src/templates/use-case-styles.js b/src/templates/use-case-styles.js new file mode 100644 index 0000000..1b05c02 --- /dev/null +++ b/src/templates/use-case-styles.js @@ -0,0 +1,186 @@ +import styled from "styled-components" +import dimensions from "../style/dimensions" +import { layoutPaddingDesktop, layoutPaddingMobile } from "../style/variables" +import colors from "../style/colors" + +export const UseCaseContainer = styled.div`` + +export const UseCaseIntro = styled.div` + @media (min-width: ${dimensions.maxwidthTablet}px) { + display: flex; + padding-top: 248px; + } +` + +export const IntroImages = styled.div` + position: relative; +` + +export const ImageOne = styled.div` + margin-bottom: 52px; + img { + width: 100%; + height: 329px; + object-fit: cover; + margin-top: 170px; + } + + @media (min-width: ${dimensions.maxwidthTablet}px) { + img { + width: 42vw; + height: 358px; + object-fit: cover; + margin-top: 0px; + } + } +` + +export const WhySection = styled.div`` + +export const IntroTextSection = styled.div` + @media (min-width: ${dimensions.maxwidthTablet}px) { + margin-left: 83px; + } +` + +export const IntroHeader = styled.div` + color: ${colors.blue900}; +` + +export const ImageTwo = styled.div` + img { + display: none; + } + @media (min-width: ${dimensions.maxwidthTablet}px) { + img { + display: inherit; + width: 25vw; + height: 480px; + object-fit: cover; + float: right; + } + } +` + +export const IntroDescription = styled.div` + margin-bottom: 37px; + color: ${colors.black900}; +` + +export const MobileImage = styled.div` + img { + width: 100%; + height: 437px; + object-fit: cover; + } + + @media (min-width: ${dimensions.maxwidthTablet}px) { + img { + display: none; + } + } +` + +export const WhyHeader = styled.div` + width: 100%; + text-align: center; + margin-top: 118px; + margin-bottom: 88px; + + color: ${colors.blue900}; + + @media (min-width: ${dimensions.maxwidthTablet}px) { + margin-top: 152px; + margin-bottom: 0px; + } +` + +export const Reasons = styled.div` + @media (min-width: ${dimensions.maxwidthTablet}px) { + display: flex; + justify-content: space-around; + margin-top: 85px; + } +` + +export const SpecificReason = styled.div` + margin-top: 58px; +` + +export const SpecificImage = styled.div` + display: flex; + justify-content: center; + align-content: center; +` + +export const SpecificReasonHeading = styled.div` + text-align: center; + + color: ${colors.blue900}; + + @media (min-width: ${dimensions.maxwidthTablet}px) { + } +` + +export const SpecificReasonDescription = styled.div` + color: ${colors.black900}; + @media (min-width: ${dimensions.maxwidthTablet}px) { + width: 21vw; + } +` + +export const WhyCTA = styled.div` + margin-top: 104px; + display: flex; + justify-content: center; + + a { + background-color: ${colors.orange900}; + text-transform: uppercase; + color: ${colors.white900}; + padding-left: 48px; + font-size: 16px; + padding-right: 48px; + padding-top: 16px; + padding-bottom: 16px; + text-decoration: none; + } +` + +export const DemoVideoSection = styled.div` +margin-top: 75px; +margin-bottom: 75px; + +@media (min-width: ${dimensions.maxwidthTablet}px) { + margin-top: 192px; + margin-bottom: 192px; + justify-content: center; + display: flex; +} + + + +` + +export const DemoVideo = styled.div` + +iframe { + width: 72vw; + height: 562px; +} + +@media (max-width: ${dimensions.maxwidthTablet}px) { + iframe { + width: 100%; + height: 173px; + } +} + +` + + +export const DemoHeading = styled.div` + +color: ${colors.blue900}; + +` diff --git a/src/templates/use_case.js b/src/templates/use_case.js index bf01c63..9777907 100644 --- a/src/templates/use_case.js +++ b/src/templates/use_case.js @@ -1,19 +1,136 @@ import React from "react" import { graphql } from "gatsby" +import { + UseCaseContainer, + UseCaseIntro, + IntroImages, + ImageOne, + ImageTwo, + IntroTextSection, + IntroHeader, + IntroDescription, + MobileImage, + WhySection, + WhyHeader, + Reasons, + SpecificReason, + SpecificImage, + SpecificReasonHeading, + SpecificReasonDescription, + WhyCTA, + DemoVideoSection, + DemoHeading, + DemoVideo, +} from "./use-case-styles" +import Layout from "../components/layout" + +import { H1, H2, H3, Body } from "../style/type-styles" export default function Product({ data }) { const use_case = data.allPrismicUseCase.edges[0].node - return

{use_case.data.preview_title}

+ return ( + + + + + + {use_case.data.image_one_alt} + + + + {use_case.data.image_two_alt} + + + + + +

{use_case.data.overview_heading}

+ + {use_case.data.overview_description.raw.map((paragraph, id) => { + return ( + + {paragraph.text} + + ) + })} + + + + Use Case Demo Secondary Image + + + + + +

{use_case.data.reasons_main_heading}

+ + + + {use_case.data.specific_reason.map((reason, id) => { + return ( + + + {`Reason + + +

{reason.specific_reason_heading}

+ + + {reason.specific_reason_description} + + + ) + })} + + + + + {use_case.data.cta_button_text} + + + + + +
+ +

{use_case.data.demo_heading}

+ + + + + +
+ + + + ) } export const query = graphql` query($uid: String!) { allPrismicUseCase(filter: { uid: { eq: $uid } }) { - edges { - node { - uid - data { + edges { + node { + uid + data { preview_title preview_image { url @@ -27,6 +144,8 @@ export const query = graphql` } reasons_main_heading preview_description + image_one_alt + image_two_alt overview_image_two { url } @@ -49,8 +168,8 @@ export const query = graphql` url } } + } } } } - } ` diff --git a/src/vectors/close.svg b/src/vectors/close.svg new file mode 100644 index 0000000..c3cf8cd --- /dev/null +++ b/src/vectors/close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/vectors/open.svg b/src/vectors/open.svg new file mode 100644 index 0000000..733b2d2 --- /dev/null +++ b/src/vectors/open.svg @@ -0,0 +1,5 @@ + + + + +