{"version":3,"sources":["webpack:///./src/components/modules/alert/alert.js","webpack:///./src/templates/home/home.js","webpack:///./src/images/since1992.jpg","webpack:///./src/images/icon-campaign-3.png","webpack:///./src/images/icon-campaign-2.png","webpack:///./src/images/icon-campaign-4.png","webpack:///./src/images/crossed-arm.png","webpack:///./src/images/icon-campaign-5.png","webpack:///./src/components/modules/hero-banner/hero-banner-campaign.js"],"names":["Alert","title","description","button","props","dangerouslySetInnerHTML","__html","children","className","role","label","href","aria-label","ariaLabel","data","wagtail","page","seoTitle","canonicalUrl","alert","ctaButtonText","ctaButtonUrl","ctaDescription","ctaHeader","ctaButtonAriaLabel","ctaImage","findValueById","body","blocks","id","find","block","rawValue","hasFeedbackForm","canonical","map","paragraph","link","linkLabel","linkAriaLabel","key","module","exports","HeroBannerCampaign","subtitle","backgroundImage","callToAction","useStaticQuery","hero","useState","counter","setCounter","pause","useEffect","interval","setInterval","clearInterval","chatboxV2","length","style","borderRadius","fontFamily","fontSize","color","src","Since1992","alt","width","marginTop","border","display","justifyContent","alignItems","textDecoration","backgroundColor","textAlign","box","index","position","CrossedArm","Tick","Coins","ArrowRight","padding","marginRight","marginBottom","TableIcon"],"mappings":"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","file":"component---src-templates-home-home-js-653796e764166167d174.js","sourcesContent":["import React from \"react\"\n\nimport PropTypes from \"prop-types\"\n\nimport \"./alert.scss\"\n\nexport const Alert = ({ title, description, button }) => {\n  const props =\n    typeof description === \"string\"\n      ? { dangerouslySetInnerHTML: { __html: description } }\n      : { children: description }\n\n  return (\n    <div className=\"alert alert-warning p-3 p-sm-4\" role=\"alert\">\n      <h2 className=\"alert-heading mb-2 h4 mb-sm-3\">{title}</h2>\n      <p className=\"mb-0\" {...props} />\n      {button && button.label && (\n        <a\n          className=\"btn btn-secondary mt-3 d-inline-block\"\n          href={button.href}\n          aria-label={button.ariaLabel}\n        >\n          {button.label}\n        </a>\n      )}\n    </div>\n  )\n}\n\nAlert.propTypes = {\n  title: PropTypes.string,\n  description: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),\n  button: PropTypes.shape({\n    href: PropTypes.string,\n    label: PropTypes.string,\n    ariaLabel: PropTypes.string,\n  }),\n}\n","import React from \"react\"\n\nimport { graphql } from \"gatsby\"\n\nimport { Wrapper } from \"../../components/base/wrapper/wrapper\"\nimport { SEO } from \"../../components/base/seo/seo\"\nimport { HeroBanner } from \"../../components/modules/hero-banner/hero-banner\"\nimport { HeroBannerCampaign } from \"../../components/modules/hero-banner/hero-banner-campaign\"\nimport { Alert } from \"../../components/modules/alert/alert\"\nimport { CardGrid } from \"../../components/layout/card-grid/card-grid\"\n\nexport default ({ data }) => {\n  const {\n    seoTitle,\n    description,\n    canonicalUrl,\n    ctaButtonText,\n    ctaButtonUrl,\n    ctaDescription,\n    ctaHeader,\n    ctaButtonAriaLabel,\n    ctaImage,\n    alert,\n    body,\n  } = data.wagtail.page\n\n  const findValueById = (blocks, id) =>\n    blocks.find(block => block.id === id).rawValue\n\n  return (\n    <Wrapper hasFeedbackForm={true}>\n      <SEO\n        title={seoTitle}\n        description={description}\n        canonical={canonicalUrl}\n      />\n\n      {alert.map(({ blocks }) => {\n        const title = findValueById(blocks, \"title\")\n        const paragraph = findValueById(blocks, \"paragraph\")\n        const link = findValueById(blocks, \"link\")\n        const linkLabel = findValueById(blocks, \"label\")\n        const linkAriaLabel = findValueById(blocks, \"aria_label\")\n\n        return (\n          <Alert\n            key={title}\n            title={title}\n            description={paragraph}\n            button={{\n              href: link,\n              label: linkLabel,\n              ariaLabel: linkAriaLabel,\n            }}\n          />\n        )\n      })}\n\n      {/* <HeroBanner\n        title={ctaHeader}\n        description={ctaDescription}\n        backgroundImage={ctaImage}\n        callToAction={{\n          href: ctaButtonUrl,\n          label: ctaButtonText,\n          ariaLabel: ctaButtonAriaLabel,\n        }}\n      /> */}\n      <HeroBannerCampaign />\n\n      {/* <CardGrid body={body} /> */}\n    </Wrapper>\n  )\n}\n\nexport const query = graphql`\n  query($slug: String) {\n    wagtail {\n      page(slug: $slug) {\n        ... on HomePage {\n          seoTitle\n          description\n          canonicalUrl\n          ctaButtonText\n          ctaButtonUrl\n          ctaDescription\n          ctaHeader\n          ctaButtonAriaLabel\n          ctaImage {\n            src\n            imageFile {\n              childImageSharp {\n                fluid {\n                  ...GatsbyImageSharpFluid\n                }\n              }\n            }\n          }\n          alert {\n            ... on StructBlock {\n              field\n              blocks {\n                ... on CharBlock {\n                  id\n                  rawValue\n                }\n                ... on URLBlock {\n                  id\n                  rawValue\n                }\n              }\n            }\n          }\n          body {\n            ... on StructBlock {\n              blocks {\n                ... on ChoiceBlock {\n                  rawValue\n                }\n                ... on StreamBlock {\n                  blocks {\n                    ... on StructBlock {\n                      field\n                      blocks {\n                        field\n                        blockType\n                        ... on CharBlock {\n                          field\n                          value\n                        }\n                        ... on RichTextBlock {\n                          rawValue\n                          field\n                        }\n                        ... on BooleanBlock {\n                          rawValue\n                          field\n                        }\n                        ... on ChoiceBlock {\n                          value\n                          field\n                        }\n                      }\n                    }\n                  }\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n`\n","module.exports = __webpack_public_path__ + \"static/since1992-0c1328301f2fec8bbe92add82fd05d48.jpg\";","module.exports = __webpack_public_path__ + \"static/icon-campaign-3-10f83c2c60607fde925821f9aab372be.png\";","module.exports = __webpack_public_path__ + \"static/icon-campaign-2-c0cfec2cb60e545a91c9132208e67537.png\";","module.exports = __webpack_public_path__ + \"static/icon-campaign-4-df571a889479971d7ca8085203df7df1.png\";","module.exports = __webpack_public_path__ + \"static/crossed-arm-1720a983c445554d41b97c4db24539fe.png\";","module.exports = __webpack_public_path__ + \"static/icon-campaign-5-9af4c18aa5d34fb02065234f244ec6db.png\";","import React, { useState, useEffect } from \"react\"\n\nimport PropTypes from \"prop-types\"\nimport { useStaticQuery, graphql } from \"gatsby\"\nimport BackgroundImage from \"gatsby-background-image-es5\"\nimport CrossedArm from \"../../../images/crossed-arm.png\"\nimport Since1992 from \"../../../images/since1992.jpg\"\nimport TableIcon from \"../../../images/icon-campaign-2.png\"\nimport Tick from \"../../../images/icon-campaign-3.png\"\nimport Coins from \"../../../images/icon-campaign-4.png\"\nimport ArrowRight from \"../../../images/icon-campaign-5.png\"\nimport \"./hero-banner-campaign.scss\"\n\nexport const HeroBannerCampaign = ({\n  title,\n  subtitle,\n  description,\n  backgroundImage,\n  callToAction,\n}) => {\n  const { hero } = useStaticQuery(\n    graphql`\n      query {\n        hero: file(relativePath: { eq: \"section-page-banner-short.png\" }) {\n          childImageSharp {\n            fluid(quality: 100, maxWidth: 1000) {\n              ...GatsbyImageSharpFluid\n            }\n          }\n        }\n      }\n    `\n  )\n\n  const [counter, setCounter] = useState(1);\n  const [pause, setPause] = useState(false);\n  const handleNext = () => {\n    if (counter !== chatboxV2.length) {\n      setCounter(counter + 1);\n    } else {\n      setCounter(1);\n    }\n  };\n\n  useEffect(() => {\n    let interval = setInterval(() => {\n      if (!pause) {\n        handleNext();\n      } else {\n        clearInterval(interval);\n      }\n    }, 8000);\n    return () => clearInterval(interval);\n  });\n\n  const chatboxV2 = [\n    {\n      title: \"I can only be very grateful that your services are out there and available to people like myself.\",\n      subtitle: \"Business Debtline caller, 2023\"\n    },\n    {\n      title: \"Your service from start to finish has been amazing and the peace of mind it gave me allowed me to focus on getting debt free which I have now achieved.\",\n      subtitle: \"Business Debtline caller, 2023\"\n    },\n    {\n      title: \"Business Debtline were thorough, informative, explained all options clearly to me, non judgmental, and made me feel there were solutions to my issues.\",\n      subtitle: \"Business Debtline caller, 2023\"\n    },\n    {\n      title: \"I appreciated the patience and knowledge shown and shared with me.  I would highly recommend Business Debtline to anyone experiencing financial difficulties.\",\n      subtitle: \"Business Debtline caller, 2023\"\n    },\n    {\n      title: \"Business Debtline gave me a way out to sort something I didn't feel in control of - I feel very grateful.\",\n      subtitle: \"Business Debtline caller, 2023\"\n    },\n    {\n      title: \"Contact with Business Debtline helped me to take back control of my finances.  I'm working my way towards being debt free.  I sleep much better at night.\",\n      subtitle: \"Business Debtline caller, 2023\"\n    },\n  ];\n\n  return (\n<>\n<div className=\"row\">\n        <div className=\"col-12 col-lg-12\">\n          <div className=\"row d-flex h-100\">\n            <div className=\"col-md-8 col-12 mb-4\">\n              <div className=\"card green-border\" style={{ borderRadius : \"20px\" }}>\n                <div className=\"card-body d-sm-flex flex-sm-column justify-content-sm-between\">\n                  <div className=\"card-body-content\">\n                    <h2 className=\"h4 mb-3\" style={{ fontFamily: \"FilsonProBold\", fontSize: \"1.5em\", color: \"#001430\" }}>We are Business Debtline - and we can help</h2>\n                    <div className=\"break-down\" >\n                      <div className=\"icon-break-down\">\n                        <img src={Since1992} alt=\"Since1992\" width=\"100%\"/>\n                      </div>\n                      <div className=\"\" >\n                      <p>Business Debtline is a registered charity. Our advisers provide free, impartial, expert debt advice to small business owners and the self-employed across England, Wales and Scotland.</p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div className=\"row d-flex\" style={{ marginTop: \"20px\"}}>\n                <div className=\"col-md-12 col-12 mb-4\">\n                  <div className=\"card green-border\" style={{ border : \"4px solid #573085\", borderRadius: \"20px\" }}>\n                    <div className=\"card-body d-sm-flex flex-sm-column justify-content-sm-between align-center\">\n                      <div className=\"card-body-content justify-content-sm-between break-down\">\n                       <div className=\"click-here\" style={{ display: \"flex\", justifyContent:\"center\", alignItems: \"center\" }} >\n                        <a className=\"lead btn-lg d-inline-block hover-effect-btn\"\n                          href=\"https://mybudget.businessdebtline.org/\"\n                          role=\"button\"\n                          style={{ fontFamily: \"FilsonProRegular\", textDecoration: \"none\", color: \"#FFFFFF\", borderRadius: \"15px\", backgroundColor:\"#573085\",  textAlign: \"center\", width: \"100%\"  }}\n                        >\n                          Register/sign in\n                        </a>\n                        </div> \n                        <h2 className=\"h4 side-register\" style={{ fontFamily: \"FilsonProBold\", fontSize: \"1.5em\", color: \"#001430\",  marginTop: \"8px\" }}>Use My Budget now or sign back in to your account.</h2>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div className=\"col-md-4 col-12 mb-4 d-flex\">\n              {\n                chatboxV2.map((box, index) => (\n                  <div key={index} className={counter - 1 === index ? \"show-campaign\" : \"not-show-campaign\"} style={{ borderRadius: \"11px\", position: \"relative\" }} >\n                    <div className=\"p-0 hero-banner-campaign bubble2\" style={{ position: \"relative\" }}>\n                      <div className=\"p-3\" style={{ backgroundColor: \"#0c376b\", width: \"100%\", borderRadius: \"20px\" }}>\n                        <p className=\"campaign2-title\">{box.title}</p>\n                        <div className=\"sub-bubble2\" >\n                          <div style={{ fontFamily: \"Filsonsoft\" }}>{box.subtitle}</div>\n                        </div>\n                      </div>\n                    </div>\n\n                    <div className=\"sub-bubble-mobile-wrapper\">\n                      <div className=\"wrap-sub-bubble-small\">\n                        <div className=\"sub-bubble-mobile2\">\n                          <h2 style={{ color: \"#FFFFFF\", fontFamily: \"Filsonsoft\" }}>{box.subtitle}</h2>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n\n                ))\n              }\n            </div>\n          </div>\n        </div>\n\n        <div className=\"col-12 col-lg-12\">\n          <div className=\"row d-flex h-100\">\n            <div className=\"col-md-4 col-12 mb-4 d-flex\">\n              <div className=\"card image-mobile\" style={{ borderRadius : \"20px\" }}>             \n                <img className=\"image-cropped-transform\" src={CrossedArm} alt=\"crossed-arm\" />               \n              </div>\n            </div>\n            <div className=\"col-md-8 col-12 mb-4 d-flex\">\n              <div className=\"card green-border\" style={{ borderRadius : \"20px\" }}>\n                <div className=\"card-body d-sm-flex flex-sm-column justify-content-sm-between\">\n                  <div className=\"card-body-content\">\n                    <h2 className=\"h4 mb-3\" style={{ fontFamily: \"FilsonProBold\", fontSize: \"1.5em\", color: \"#001430\" }}>Get started today</h2>                    \n                      <p>My Budget is designed by our experts especially for self-employed people and small business owners.</p>\n                      <p>Doing a budget is a positive and important step to start dealing with your debts.</p>                                  \n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div className=\"row\">\n        <div className=\"col-12 col-lg-12\">\n          <div className=\"row d-flex h-100\">\n            <div className=\"col-md-8 col-12 mb-4\">\n              <div className=\"card green-border\" style={{ border : \"4px solid #573085\", borderRadius : \"20px\" }}>\n                <div className=\"card-body d-sm-flex flex-sm-column justify-content-sm-between\">\n                  <div className=\"card-body-content\">\n                    <h2 className=\"h4 mb-3\" style={{ fontFamily: \"FilsonProBold\", fontSize: \"1.5em\", color: \"#001430\" }}>Using My Budget</h2>\n                    <div className=\"no-break-down\" >\n                      <div className=\"icon-no-break-down\">\n                        <img src={Tick} alt=\"Tick\" width=\"100%\"/>\n                      </div>\n                      <div className=\"icon-no-break-down\">\n                        <img src={Coins} alt=\"Coins\" width=\"100%\"/>\n                      </div>\n                      <div className=\"icon-no-break-down\">\n                        <img src={ArrowRight} alt=\"ArrowRight\" width=\"100%\"/>\n                      </div>\n                    </div>\n                    <p>Dealing with business debts can be complicated, but you don't need to do this alone.</p>\n                    <p>We help over 37,000 people and business in different circumstances every year.</p>\n                    <p>Creating a budget using our tool before you speak with us is the best way to prepare for a call. Our advisers will use the information in the budget to explain your options.</p>\n                    <p>You will get your own personalised budget and you can securely save your information and go back to it as many times as you want to.</p>\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div className=\"col-md-4 col-12 mb-4 d-flex\" >\n              <div className=\"card\" style={{ backgroundColor: \"#f2f2f2\", borderRadius: \"20px\", width: \"100%\"}} >\n              <div className=\"card-body break-down d-sm-flex flex-sm-column justify-content-sm-between\" >\n                <div className=\"card-body-content wrap-subtext-mobile\">\n                  <div className=\"different-situation\" style={{ fontFamily: \"FilsonProRegular\"}}>Everyone has a different situation. If you're struggling with debt, <span style={{ fontFamily: \"FilsonProBold\", }}>start using our My Budget tool</span> now or <span style={{ fontFamily: \"FilsonProBold\", }}>sign back in to update your account.</span></div>\n                </div>\n                <div className=\"be-center\">\n                  <a\n                    className=\"lead btn-lg d-inline-block hover-effect-btn\"\n                    href=\"https://mybudget.businessdebtline.org/\"\n                    role=\"button\"\n                    style={{ fontFamily: \"FilsonProRegular\", textDecoration:\"none\", borderRadius: \"15px\",  backgroundColor:\"#573085\", color:\"#FFFFFF\", width: \"100%\", textAlign:\"center\" }}\n                  >\n                   Register/sign in\n                  </a>\n                </div>\n              </div>\n            </div>\n            </div>\n          </div>\n        </div>\n      \n\n\n        <div className=\"col-12 col-lg-12\">\n          <div className=\"row d-flex h-100\">\n            <div className=\"col-md-6 col-12 mb-4 d-flex\">\n              <div className=\"card green-border\" style={{ borderRadius : \"20px\" }} >\n                <div className=\"card-body d-sm-flex flex-sm-column justify-content-sm-between p-3\">\n                <div className=\"card-body-content \">\n                  <h2 className=\"h4 mb-3\" style={{ fontFamily: \"FilsonProBold\", fontSize: \"1.5em\", color: \"#001430\" }}>Speaking to an adviser</h2>\n                    <ul className=\"purple-bullet\">\n                      <li>Once you've given us as much information as you can, you're ready to call our advisers. Don't worry if there are any gaps, our advisers can still help you.</li>\n                      <li><strong>Call us on 0800 197 6026 Monday to Friday 9am-8pm or webchat with an adviser Monday to Friday 9am-5pm</strong></li>\n                    </ul>\n                </div>\n                <div className=\"break-down\">             \n                <a\n                    className=\"lead btn-blue btn-lg d-inline-block\"\n                    href=\"tel:0800 197 6026\"\n                    role=\"button\"\n                    style={{ fontFamily: \"FilsonProRegular\", color: \"#FFFFFF\", textDecoration:\"none\", borderRadius: \"15px\", padding: \".5rem 2rem\", marginRight: \"20px\", marginBottom: \"10px\" }}\n                  >\n                    Call us\n                  </a>\n\n                  <a\n                    className=\"lead btn-blue btn-lg d-inline-block\"\n                    href=\"https://www.businessdebtline.org/#webchat\"\n                    role=\"button\"\n                    style={{ fontFamily: \"FilsonProRegular\", color: \"#FFFFFF\", textDecoration:\"none\", borderRadius: \"15px\", padding: \".5rem 2rem\", marginBottom: \"10px\" }}\n                  >\n                    Webchat\n                  </a>\n                  </div> \n                </div>  \n              </div>\n            </div>\n            <div className=\"col-md-6 col-12 mb-4\">\n            <div className=\"card green-border\" style={{ borderRadius : \"20px\" }}>\n                <div className=\"card-body d-sm-flex flex-sm-column justify-content-sm-between p-3\">\n                  <div className=\"card-body-content\">\n                  <h2 className=\"h4 mb-3\" style={{ fontFamily: \"FilsonProBold\", fontSize: \"1.5em\", color: \"#001430\" }}>Dealing with your debts can give you a fresh start</h2>\n                  <div className=\"break-down\" >\n                      <div className=\"icon-bottom\" >\n                        <img src={TableIcon} alt=\"star\" width=\"100%\" />\n                      </div>\n                      <div>\n                        <p>Visiting our website is an important first step to dealing with your finances.</p>\n                        <p>Around 19 million people in the UK could benefit from debt advice. Often it may seem difficult to deal with and we know that it can sometimes feel overwhelming.</p>\n                        <p>Our advisers are trained to find the best solutions for everyone so call us today.</p>\n                      </div>\n\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n</>\n  )\n}\n\nHeroBannerCampaign.propTypes = {\n  title: PropTypes.string,\n  subtitle: PropTypes.string,\n  backgroundImageUrl: PropTypes.string,\n  description: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n  callToAction: PropTypes.shape({\n    href: PropTypes.string,\n    ariaLabel: PropTypes.string,\n    label: PropTypes.string,\n  }),\n}"],"sourceRoot":""}