{"version":3,"sources":["webpack:///./src/templates/process-of-a-mortgage.js"],"names":["ProcessOfAMortgagePageTemplate","image","title","description","footbuttonlink","footbuttontext","foottitle","steps","helmet","className","style","backgroundImage","childImageSharp","fluid","src","backgroundPosition","minHeight","Array","isArray","map","step","idx","key","href","imageInfo","alt","maxWidth","width","lineHeight","id","banner","display","height","justifyContent","alignItems","flexDirection","color","padding","content","body","ProcessOfAMortgagePage","frontmatter","data","markdownRemark","titleTemplate","name","ProcessOfAMortgagePageQuery"],"mappings":"4FAAA,2MAQaA,EAAiC,SAAC,GAAD,IAC5CC,EAD4C,EAC5CA,MACAC,EAF4C,EAE5CA,MACAC,EAH4C,EAG5CA,YACAC,EAJ4C,EAI5CA,eACAC,EAL4C,EAK5CA,eACAC,EAN4C,EAM5CA,UACAC,EAP4C,EAO5CA,MACAC,EAR4C,EAQ5CA,OAR4C,OAU5C,yBAAKC,UAAU,WACZD,GAAU,GACX,yBACEC,UAAU,0CACVC,MAAO,CACLC,gBAAgB,QACZV,EAAMW,gBAAkBX,EAAMW,gBAAgBC,MAAMC,IAAMb,GAD/C,IAGfc,mBAAmB,SACnBC,UAAW,MAGb,wBAAIP,UAAU,iDAAiDP,IAEjE,yBAAKO,UAAU,WACb,yBAAKA,UAAU,aACb,yBAAKA,UAAU,uBACZQ,MAAMC,QAAQX,GACXA,EAAMY,KAAI,SAACC,EAAMC,GAAP,OACR,yBAAKC,IAAQD,EAAL,QAAiBZ,UAAU,eACjC,uBAAGc,KAAI,SAAUF,EAAM,IACrB,kBAAC,IAAD,CACEG,UAAW,CACTvB,MAAOmB,EAAKnB,MACZwB,IAAI,SAASJ,EAAM,GAAhB,KAAsBD,EAAKlB,MAC9BQ,MAAO,CAAEgB,SAAU,IAAKC,MAAO,gBAMzC,QAKV,yBAAKlB,UAAU,WACb,yBAAKA,UAAU,+BACb,uBAAGC,MAAO,CAAEkB,WAAY,IAAMzB,KAGlC,yBAAKM,UAAU,WACb,yBAAKA,UAAU,sDACb,yBAAKA,UAAU,gBACb,0BAAMA,UAAU,eAAeH,IAEjC,yBAAKG,UAAU,eACb,uBAAGc,KAAMnB,EAAgBK,UAAU,qBAChCJ,MAKRY,MAAMC,QAAQX,GACXA,EAAMY,KAAI,SAACC,EAAMC,GAAP,OACR,6BAASQ,GAAE,QAASR,EAAM,GAAKC,IAAQD,EAAL,SAChC,yBACEZ,UAAU,0CACVC,MAAO,CACLC,gBAAgB,QACZS,EAAKU,OAAOlB,gBACVQ,EAAKU,OAAOlB,gBAAgBC,MAAMC,IAClCM,EAAKU,QAHI,IAKff,mBAAmB,WACnBC,UAAW,MAGb,yBAAKP,UAAU,WACb,yBACEC,MAAO,CACLqB,QAAS,OACTC,OAAQ,QACRJ,WAAY,IACZK,eAAgB,eAChBC,WAAY,OACZC,cAAe,WAGjB,wBACE1B,UAAU,8EACVC,MAAO,CACL0B,MAAO,QACPC,QAAS,WAJb,QAOQhB,EAAM,EAPd,KAOmBD,EAAKlB,OAExB,wBAAIO,UAAW,2BAIrB,yBAAKA,UAAU,WACb,yBAAKA,UAAU,aACb,yBAAKA,UAAU,WACb,yBAAKA,UAAU,eACb,kBAAC,IAAD,CACEe,UAAW,CACTvB,MAAOmB,EAAKnB,MACZwB,IAAI,SAASJ,EAAM,GAAhB,KAAsBD,EAAKlB,MAC9BQ,MAAO,CAAEgB,SAAU,IAAKC,MAAO,YAIrC,yBAAKlB,UAAU,eACb,6BACE,kBAAC,IAAD,CAAW6B,QAASlB,EAAKmB,gBAQvC,OA8COC,UAhCgB,SAAC,GAAc,IACpCC,EADmC,EAAXC,KACHC,eAArBF,YAER,OACE,kBAAC,IAAD,KACE,kBAACzC,EAAD,CACEC,MAAOwC,EAAYxC,MACnBC,MAAOuC,EAAYvC,MACnBC,YAAasC,EAAYtC,YACzBG,UAAWmC,EAAYnC,UACvBD,eAAgBoC,EAAYpC,eAC5BD,eAAgBqC,EAAYrC,eAC5BG,MAAOkC,EAAYlC,MACnBC,OACE,kBAAC,IAAD,CAAQoC,cAAa,uCACnB,wDACA,0BAAMC,KAAK,cAAcP,QAAO,+BAkBrC,IAAMQ,EAA2B","file":"component---src-templates-process-of-a-mortgage-js-6bc9cde19fc79a841c3d.js","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { graphql } from \"gatsby\";\nimport { Helmet } from \"react-helmet\";\nimport Layout from \"../components/Layout\";\nimport PreviewCompatibleImage from \"../components/PreviewCompatibleImage\";\nimport { MDContent } from \"../components/Content\";\n\nexport const ProcessOfAMortgagePageTemplate = ({\n  image,\n  title,\n  description,\n  footbuttonlink,\n  footbuttontext,\n  foottitle,\n  steps,\n  helmet,\n}) => (\n  <div className=\"content\">\n    {helmet || \"\"}\n    <div\n      className=\"full-width-image-container margin-top-0\"\n      style={{\n        backgroundImage: `url(${\n          !!image.childImageSharp ? image.childImageSharp.fluid.src : image\n        })`,\n        backgroundPosition: `center`,\n        minHeight: 450,\n      }}\n    >\n      <h2 className=\"has-text-weight-bold is-size-1 has-text-white\">{title}</h2>\n    </div>\n    <div className=\"section\">\n      <div className=\"container\">\n        <div className=\"columns is-centered\">\n          {Array.isArray(steps)\n            ? steps.map((step, idx) => (\n                <div key={`${idx}-step`} className=\"column is-2\">\n                  <a href={`#step${idx + 1}`}>\n                    <PreviewCompatibleImage\n                      imageInfo={{\n                        image: step.image,\n                        alt: `Step ${idx + 1}: ${step.title}`,\n                        style: { maxWidth: 250, width: \"100%\" },\n                      }}\n                    />\n                  </a>\n                </div>\n              ))\n            : null}\n        </div>\n      </div>\n    </div>\n\n    <div className=\"section\">\n      <div className=\"container has-text-centered\">\n        <p style={{ lineHeight: 2 }}>{description}</p>\n      </div>\n    </div>\n    <div className=\"section\">\n      <div className=\"columns is-centered is-vcentered has-text-centered\">\n        <div className=\"column is-4 \">\n          <span className=\"title is-3 \">{foottitle}</span>\n        </div>\n        <div className=\"column is-4\">\n          <a href={footbuttonlink} className=\"button is-primary\">\n            {footbuttontext}\n          </a>\n        </div>\n      </div>\n    </div>\n    {Array.isArray(steps)\n      ? steps.map((step, idx) => (\n          <section id={`step${idx + 1}`} key={`${idx}-step`}>\n            <div\n              className=\"full-width-image-container margin-top-0\"\n              style={{\n                backgroundImage: `url(${\n                  !!step.banner.childImageSharp\n                    ? step.banner.childImageSharp.fluid.src\n                    : step.banner\n                })`,\n                backgroundPosition: `top left`,\n                minHeight: 450,\n              }}\n            >\n              <div className=\"section\">\n                <div\n                  style={{\n                    display: \"flex\",\n                    height: \"150px\",\n                    lineHeight: \"1\",\n                    justifyContent: \"space-around\",\n                    alignItems: \"left\",\n                    flexDirection: \"column\",\n                  }}\n                >\n                  <h1\n                    className=\"has-text-weight-bold is-size-3-mobile is-size-2-tablet is-size-1-widescreen\"\n                    style={{\n                      color: \"white\",\n                      padding: \"0.25em\",\n                    }}\n                  >\n                    Step {idx + 1}: {step.title}\n                  </h1>\n                  <hr className={\"has-background-dark\"} />\n                </div>\n              </div>\n            </div>\n            <div className=\"section\">\n              <div className=\"container\">\n                <div className=\"columns\">\n                  <div className=\"column is-4\">\n                    <PreviewCompatibleImage\n                      imageInfo={{\n                        image: step.image,\n                        alt: `Step ${idx + 1}: ${step.title}`,\n                        style: { maxWidth: 300, width: \"100%\" },\n                      }}\n                    />\n                  </div>\n                  <div className=\"column is-8\">\n                    <div>\n                      <MDContent content={step.body} />\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </section>\n        ))\n      : null}\n  </div>\n);\n\nProcessOfAMortgagePageTemplate.propTypes = {\n  image: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),\n  title: PropTypes.string,\n  description: PropTypes.string,\n  foottitle: PropTypes.string,\n  footbuttontext: PropTypes.string,\n  footbuttonlink: PropTypes.string,\n  steps: PropTypes.array,\n};\n\nconst ProcessOfAMortgagePage = ({ data }) => {\n  const { frontmatter } = data.markdownRemark;\n\n  return (\n    <Layout>\n      <ProcessOfAMortgagePageTemplate\n        image={frontmatter.image}\n        title={frontmatter.title}\n        description={frontmatter.description}\n        foottitle={frontmatter.foottitle}\n        footbuttontext={frontmatter.footbuttontext}\n        footbuttonlink={frontmatter.footbuttonlink}\n        steps={frontmatter.steps}\n        helmet={\n          <Helmet titleTemplate={`Process Of A Mortgage | Get Started`}>\n            <title>{`Process Of A Mortgage`}</title>\n            <meta name=\"description\" content={`Process Of A Mortgage`} />\n          </Helmet>\n        }\n      />\n    </Layout>\n  );\n};\n\nProcessOfAMortgagePage.propTypes = {\n  data: PropTypes.shape({\n    markdownRemark: PropTypes.shape({\n      frontmatter: PropTypes.object,\n    }),\n  }),\n};\n\nexport default ProcessOfAMortgagePage;\n\nexport const ProcessOfAMortgagePageQuery = graphql`\n  query ProcessOfAMortgagePage($id: String!) {\n    markdownRemark(id: { eq: $id }) {\n      frontmatter {\n        title\n        image {\n          childImageSharp {\n            fluid(maxWidth: 2048, quality: 100) {\n              ...GatsbyImageSharpFluid\n            }\n          }\n        }\n        description\n        foottitle\n        footbuttontext\n        footbuttonlink\n        steps {\n          title\n          image {\n            childImageSharp {\n              fluid(maxWidth: 250, quality: 64) {\n                ...GatsbyImageSharpFluid\n              }\n            }\n          }\n          banner {\n            childImageSharp {\n              fluid(maxWidth: 2048, quality: 100) {\n                ...GatsbyImageSharpFluid\n              }\n            }\n          }\n          body\n        }\n      }\n    }\n  }\n`;\n"],"sourceRoot":""}