{"version":3,"sources":["webpack:///./src/pages/faqs.tsx","webpack:///./src/components/CTA.tsx","webpack:///./src/components/Accordion.tsx","webpack:///./src/components/FAQs.tsx","webpack:///./src/components/Header.tsx"],"names":["name","content","title","subtitle","button","CTA","styled","props","inverted","css","theme","colors","purple","dark","Container","div","Title","secondary","to","rest","Faq","darken","primary","open","Answer","Question","state","openAnswer","setState","render","this","answer","question","isHtml","onClick","dangerouslySetInnerHTML","__html","React","FAQContainer","yMargin","background","flushTop","FAQs","yPad","xPad","data","faqs","info","map","faq","key","transparentize"],"mappings":"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","file":"component---src-pages-faqs-tsx-9c6b0a491aec777bdc85.js","sourcesContent":["import { Box, Flex } from 'grid-styled'\nimport * as React from 'react'\nimport Layout from '../components/Layout'\nimport { Helmet } from 'react-helmet'\n\nimport CTA from '../components/CTA'\nimport Header from '../components/Header'\nimport FAQs from '../components/FAQs'\n\nexport default () => (\n  <Layout>\n    <Helmet>\n      <title>FAQs | Brisbane & Sunshine Coast’s Trusted Builders</title>\n      <meta\n        name=\"description\"\n        content=\"Find out everything you need to know about building your dream patio, deck, carport or room enclosure from Just Patios. Got a question that isn’t listed here? Just call us & we’re all ears. We also offer a free design & quote!\"\n      />\n    </Helmet>\n    <Header>\n      <h1>Frequently asked questions</h1>\n    </Header>\n    <FAQs />\n    <CTA\n      title=\"Looking for a builder?\"\n      subtitle=\"We’re here to help you.\"\n      button=\"Contact Us\"\n    />\n  </Layout>\n)\n","import * as React from 'react'\nimport styled, { css } from 'styled-components'\nimport { Button } from './Button'\nimport { Link } from 'gatsby'\n\ninterface ICTAProps {\n  inverted: boolean\n}\n\nconst CTA = styled<ICTAProps, any>('div')`\n  position: relative;\n  padding-top: 6rem;\n  padding-bottom: 6rem;\n\n  ${(props) =>\n    props.inverted &&\n    css`\n      background-color: ${props.theme.colors.purple};\n      h3 {\n        color: #fff;\n      }\n      button {\n        color: ${props.theme.colors.dark};\n      }\n      span {\n        color: rgba(255, 255, 255, 0.8) !important;\n      }\n    `};\n\n  @media (max-width: 939px) {\n    text-align: center;\n  }\n`\nconst Container = styled.div`\n  max-width: 1000px;\n  margin: 0 auto;\n\n  @media (min-width: 600px) {\n    padding-left: 2.5rem;\n    padding-right: 2.5rem;\n  }\n  @media (min-width: 940px) {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding-left: 3rem;\n    padding-right: 3rem;\n  }\n`\n\nexport const CTAContainer = Container\nexport const StyledCTA = CTA\n\nconst Title = styled.div`\n  margin-bottom: 1.5rem;\n  max-width: 620px;\n  > * {\n    line-height: 1.5;\n  }\n  .c-cta--secondary .c-cta__title > * {\n    color: #fff;\n  }\n  @media (min-width: 600px) {\n    margin-bottom: 2rem;\n  }\n  @media (min-width: 940px) {\n    margin: 0;\n  }\n  @media (max-width: 939px) {\n    margin-left: auto;\n    margin-right: auto;\n  }\n  span {\n    color: ${(props) => props.theme.colors.secondary};\n    font-weight: 400;\n  }\n`\n\ninterface Props {\n  title: string\n  subtitle: string\n  button: string\n  inverted?: boolean\n  to?: string\n}\n\nexport default ({ to, title, subtitle, button, inverted, ...rest }: Props) => (\n  <CTA inverted={inverted} {...rest}>\n    <Container>\n      <Title>\n        <h3>\n          {title}\n          <br />\n          <span>{subtitle}</span>\n        </h3>\n      </Title>\n      <Link to={to || '/contact-us#form'}>\n        <Button inverted={!inverted}>{button}</Button>\n      </Link>\n    </Container>\n  </CTA>\n)\n","import * as React from 'react'\nimport styled, { css } from 'styled-components'\nimport { darken } from 'polished'\n\ninterface IAccordionProps {\n  open: boolean\n}\n\nconst Faq = styled<IAccordionProps, any>('article')`\n  position: relative;\n  padding-left: 2rem;\n\n  & + article {\n    margin-top: 1rem;\n  }\n\n  @media (min-width: 940px) {\n    & + article {\n      margin-top: 1.5rem;\n    }\n  }\n\n  &:before,\n  &:after {\n    content: '';\n    position: absolute;\n    background-color: ${props => darken(0.05, props.theme.colors.primary)};\n    transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);\n  }\n  &:before {\n    top: 9px;\n    left: 0;\n    width: 12px;\n    height: 2px;\n  }\n  &:after {\n    top: 4px;\n    left: 5px;\n    height: 12px;\n    width: 2px;\n  }\n\n  ${props =>\n    props.open &&\n    css`\n      ${Answer} {\n        display: block;\n      }\n      &:after {\n        top: 9px;\n        height: 2px;\n      }\n    `};\n`\n\nconst Question = styled.button`\n  color: ${props => darken(0.05, props.theme.colors.primary)};\n  display: block;\n  width: 100%;\n  text-align: left;\n  font-size: 1.15em;\n\n  a {\n    text-decoration: underline;\n  }\n\n  @media (min-width: 940px) {\n    font-size: 1.25em;\n  }\n`\n\nconst Answer = styled.div`\n  margin-top: 0.75rem;\n  display: none;\n\n  @media (min-width: 940px) {\n    margin-top: 1rem;\n  }\n`\n\ninterface AccordionProps {\n  question: string\n  isHtml: boolean\n  answer: string\n}\n\ninterface State {\n  open: boolean\n}\n\nexport default class extends React.PureComponent<AccordionProps, State> {\n  state = {\n    open: false\n  }\n\n  openAnswer = () => this.setState({ open: !this.state.open })\n\n  render() {\n    const { answer, question, isHtml } = this.props\n\n    return (\n      <Faq open={this.state.open}>\n        <Question\n          onClick={this.openAnswer}\n          dangerouslySetInnerHTML={{ __html: question }}\n        />\n        <Answer>\n          {isHtml ? (\n            <div dangerouslySetInnerHTML={{ __html: answer }} />\n          ) : (\n            <p>{answer}</p>\n          )}\n        </Answer>\n      </Faq>\n    )\n  }\n}\n","import * as React from 'react'\nimport styled, { css } from 'styled-components'\nimport { xPad, yPad, yMargin } from '../utils/theme'\nimport Accordion from './Accordion'\nimport { darken } from 'polished'\n\ninterface IFAQContainerProps {\n  flushTop: boolean\n}\n\nexport const FAQContainer = styled<IFAQContainerProps, any>('div')`\n  background-color: #f9f8f7;\n  ${yMargin};\n  margin-bottom: 0 !important;\n\n  h3 i {\n    color: ${props => props.theme.colors.primary};\n    font-style: normal;\n  }\n\n  ${props =>\n    props.background &&\n    css`\n      /* background-image: url(${props.background}); */\n      background-color: #171717;\n      background-size: cover;\n      background-repeat: none;\n      background-position: center center;\n      h3,\n      button,\n      p {\n        color: #fff !important;\n      }\n    `};\n\n  ${props =>\n    props.flushTop &&\n    css`\n      margin-top: 0 !important;\n    `};\n`\n\nexport const FAQs = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  position: relative;\n  margin: 0 auto;\n  max-width: 1000px;\n\n  ${yPad};\n  ${xPad};\n  a {\n    text-decoration: underline;\n  }\n\n  h3 {\n    color: ${props => darken(0.4, props.theme.colors.primary)};\n    &:not(:first-child) {\n      padding-top: 2em;\n    }\n  }\n`\n\ninterface IFAQ {\n  title?: string\n  answer?: string\n  question?: string\n  isHtml?: boolea\n}\n\ninterface IFAQProps {\n  flushTop?: boolean\n  title: string\n  data: IFAQ[]\n}\n\nconst data = [\n  {\n    question:\n      '<p>Am I under any obligation in receiving a <a href=\"/on-site-quote/\">free quote?</a>',\n    answer:\n      'No, not at all. Our obligation free quotes are part of our service and are always completely free.'\n  },\n  {\n    question:\n      'Do you take care of <a href=\"/council-approval/\">council permits</a>, relaxations and plans?',\n    answer:\n      'Yes. Our certifier will arrange all documents required for the application including the final inspection.'\n  },\n  {\n    question: 'Do I receive a copy of my approved plans?',\n    answer:\n      'Yes. A copy is sent to the owner, the local council and Just Patios directly from our certifier for record keeping.'\n  },\n  {\n    question:\n      'What warranty do I get with my <a href=\"/patio-builders-brisbane/\">patio</a> or carport?',\n    answer:\n      'Depending on the product you choose to have installed, it can be as high as 15 years.'\n  },\n  {\n    question: 'If I go ahead with the quote how much deposit will I pay?',\n    answer: 'In most situations the deposit is 10% of the contract price.'\n  },\n  {\n    question: 'Do I need to arrange anything?',\n    answer:\n      'No. We will obtain all approvals, do all site preparations, complete construction and arrange for all inspections.'\n  },\n  {\n    question: 'How long will it take to get my patio built?',\n    answer:\n      'In most cases it will take between 2-8 weeks depending on the council approvals.'\n  },\n  {\n    question:\n      'Can I <a href=\"/patio-builders-brisbane/\">build my patio myself?</a>',\n    answer: `Yes. We can arrange all approvals and delivery of materials to install. Depending on the value of materials (over $11,000) you will require an owner-builder licence.`\n  },\n  {\n    question: 'Once my materials are delivered how long until installation?',\n    answer: `We only like materials to be on site for a minimal amount of time and we try to have your project under way within one week (depending on weather conditions).`\n  },\n  {\n    question: 'Do I need to be home during construction?',\n    answer: `No. As long as our builders have access to power and the job site.`\n  }\n]\n\nexport default ({ title, faqs, background, ...rest }: IFAQProps) => {\n  const info: IFAQ[] = faqs || data\n  return (\n    <FAQContainer background={background} {...rest}>\n      <FAQs>\n        <h3>{title}</h3>\n        {info.map(faq => {\n          if (faq.answer && faq.question) {\n            return (\n              <Accordion\n                answer={faq.answer}\n                key={faq.question}\n                question={faq.question}\n                isHtml={faq.isHtml}\n              />\n            )\n          }\n        })}\n      </FAQs>\n    </FAQContainer>\n  )\n}\n","import styled, { css } from 'styled-components'\nimport { transparentize } from 'polished'\n\nexport default styled('header')`\n  padding-top: 7rem;\n  text-align: center;\n  padding-left: 3rem;\n  padding-right: 3rem;\n  max-width: 1000px;\n  margin: 0 auto;\n\n  h3 {\n    background: #fff;\n    box-shadow: 0 8px 18px\n      ${props => transparentize(0.9, props.theme.colors.dark)};\n    border-radius: 4px;\n    padding: 2rem;\n  }\n\n  i {\n    color: ${props => props.theme.colors.primary};\n    font-style: normal;\n  }\n\n  /* img {\n    position: absolute;\n    top: 0;\n    left: -50%;\n    min-width: 200vw;\n    z-index: -1;\n\n    @media (max-width: 939px) {\n      min-width: 300vw;\n      left: -75%;\n    }\n\n    @media (max-width: 639px) {\n      min-width: 600vw;\n    }\n  } */\n\n  @media (min-width: 600px) {\n    padding-top: 9rem;\n  }\n  @media (min-width: 940px) {\n    padding-top: 12rem;\n  }\n  @media (min-width: 1180px) {\n    padding-top: 15rem;\n  }\n`\n"],"sourceRoot":""}