{"version":3,"file":"component---src-pages-problems-we-solve-js-4acdca6c705c0742dcbc.js","mappings":"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","sources":["webpack://x-rd-secdev-website/./src/containers/SecD3v/RegisterForm/registerForm.style.js","webpack://x-rd-secdev-website/./src/containers/SecD3v/RegisterForm/index.js","webpack://x-rd-secdev-website/./src/containers/SecD3v/ProblemsWeSolve/Banner/banner.style.js","webpack://x-rd-secdev-website/./src/containers/SecD3v/ProblemsWeSolve/Banner/index.js","webpack://x-rd-secdev-website/./src/containers/SecD3v/ProblemsWeSolve/Section/section.style.js","webpack://x-rd-secdev-website/./src/containers/SecD3v/ProblemsWeSolve/Section/index.js","webpack://x-rd-secdev-website/./src/pages/problems-we-solve.js","webpack://x-rd-secdev-website/./src/common/assets/image/secD3v/banner-bg-alternate.svg"],"sourcesContent":["import styled from \"styled-components\";\n\nconst RegisterFormArea = styled.section`\n  background-color: #3b3f53;\n\n  padding-bottom: 50px;\n  padding-top: 50px;\n  @media (max-width: 1600px) {\n  }\n  @media (max-width: 768px) {\n    padding-bottom: 0;\n    padding-top: 80px;\n  }\n  @media (max-width: 375px) {\n    padding-top: 40px;\n    padding-bottom: 255px;\n  }\n\n  .blockTitleForm {\n    max-width: 100%;\n    padding-left: 40px;\n    padding-right: 40px;\n    display: flex;\n    justify-content: center;\n    align-items: center; /* <---- NEW    */\n\n    @media (max-width: 1600px) {\n      // margin-bottom: 40px;\n    }\n    h2 {\n      text-align: center;\n      font-weight: bold;\n      font-size: 36px;\n      line-height: 1.31;\n      letter-spacing: -0.5px;\n      color: #252525;\n      text-align: left;\n      margin: 0;\n      margin-bottom: 19px;\n      @media (max-width: 1600px) {\n        font-size: 30px;\n        line-height: 1.3;\n        max-width: 468px;\n      }\n      @media (max-width: 768px) {\n        font-size: 28px;\n      }\n      @media (max-width: 375px) {\n        font-size: 22px;\n      }\n    }\n    p {\n      margin: 0;\n      font-weight: normal;\n      font-size: 16px;\n      line-height: 2;\n      color: #252525;\n      text-align: left;\n      @media (max-width: 768px) {\n        font-size: 15px;\n      }\n    }\n  }\n\n  .blockTitle {\n    max-width: 100%;\n    padding-top:20px\n    padding-bottom: 20px;\n    padding-left: 40px;\n    padding-right: 40px;\n    display: flex;\n    justify-content: center;\n    align-items: center; /* <---- NEW    */\n\n    @media (max-width: 1600px) {\n      // margin-bottom: 40px;\n    }\n    h2 {\n      text-align: center;\n      font-weight: bold;\n      font-size: 36px;\n      line-height: 1.31;\n      letter-spacing: -0.5px;\n      color: #252525;\n      text-align: left;\n      margin: 0;\n      margin-bottom: 19px;\n      @media (max-width: 1600px) {\n        font-size: 30px;\n        line-height: 1.3;\n        max-width: 468px;\n      }\n      @media (max-width: 768px) {\n        font-size: 28px;\n      }\n      @media (max-width: 375px) {\n        font-size: 22px;\n      }\n    }\n    p {\n      margin: 0;\n      font-weight: normal;\n      font-size: 16px;\n      line-height: 2;\n      color: #252525;\n      text-align: left;\n      @media (max-width: 768px) {\n        font-size: 15px;\n      }\n    }\n  }\n  .postWrap {\n    display: flex;\n    flex-wrap: wrap;\n    margin-top: 65px;\n    @media (max-width: 768px) {\n      justify-content: center;\n    }\n  }\n\n  .grid-container {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(20%, 1fr));\n    gap: 20px;\n  }\n\n  .grid-item {\n    background-color: #ffffff;\n    border-radius: 12px;\n    border: 4px solid rgba(25, 177, 178, 0.25);\n    padding: 10px;\n    text-align: center;\n  }\n\n  /* Define styles for different screen sizes */\n  @media screen and (max-width: 768px) {\n    .grid-container {\n      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n    }\n  }\n\n  @media screen and (max-width: 480px) {\n    .grid-container {\n      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));\n    }\n  }\n\n  .post {\n    flex: 0 0 25%;\n    text-align: center;\n    padding: 10px;\n    @media (max-width: 768px) {\n      flex: 0 0 28%;\n      margin-bottom: 50px;\n    }\n    @media (max-width: 425px) {\n      flex: 1 1 50%;\n    }\n    img {\n      margin-left: auto;\n      margin-right: auto;\n    }\n    h3 {\n      font-weight: bold;\n      font-size: 17px;\n      line-height: 1.8;\n      text-align: left;\n      color: #252525;\n      margin: 0;\n      margin-top: 30px;\n      @media (max-width: 1600px) {\n        font-size: 16px;\n        margin: 20px;\n      }\n    }\n    &:hover {\n      .feature-image-box-inner {\n        transform: translateY(-5px);\n        &:before {\n          opacity: 1;\n          transform: translateY(5px);\n        }\n      }\n    }\n  }\n  .feature-image-box {\n    text-align: left;\n  }\n  .feature-image-box-inner {\n    transition: all 0.4s ease;\n    display: inline-flex;\n    &:before {\n      pointer-events: none;\n      position: absolute;\n      z-index: -1;\n      content: \"\";\n      top: 100%;\n      left: 5%;\n      height: 10px;\n      width: 90%;\n      opacity: 0;\n      background: radial-gradient(\n        ellipse at center,\n        rgba(132, 159, 184, 0.35) 0%,\n        rgba(0, 0, 0, 0) 80%\n      );\n      transition-duration: 0.3s;\n      transition-property: transform, opacity;\n    }\n  }\n\n  .feature-text-box {\n    font-size: 14px;\n    color: #777777;\n    text-align: left;\n  }\n  .benefits-icon {\n    width: 70px;\n    margin-top: 15px;\n    text-align: left;\n  }\n  .customOverlay {\n    background: rgba(36, 123, 160, 0.7);\n  }\n`;\n\nexport const Row = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n`;\n\nexport const Col = styled.div`\n  flex: 0 0 50%;\n  max-width: 50%;\n  @media (max-width: 667px) {\n    flex: 0 0 100%;\n    max-width: 100%;\n  }\n`;\n\nexport const Form = styled.form`\n  background-color: #f3f3f3;\n  border-top-right-radius: 10px;\n  border-top-left-radius: 10px;\n  display: flex;\n  flex-wrap: wrap;\n  .rowContents {\n  }\n`;\n\nexport default RegisterFormArea;\n","import Box from \"../../../common/components/Box\";\nimport Heading from \"../../../common/components/Heading\";\nimport Text from \"../../../common/components/Text\";\nimport Container from \"../../../common/components/UI/Container\";\nimport { REGISTER_FORM_DATA } from \"../../../common/data/SecD3v\";\nimport React, { useState } from \"react\";\nimport RegisterFormArea from \"./registerForm.style\";\nimport { Row, Col, Form } from \"./registerForm.style\";\nimport Register from \"../Register\";\n\nconst RegisterForm = () => {\n  const { blockTitle } = REGISTER_FORM_DATA;\n  return (\n    <RegisterFormArea id=\"register-form\">\n      <Container>\n        <Form>\n          <Row className=\"rowContents\">\n            <Col className=\"blockTitle\">\n              <Row>\n                <Heading as=\"h2\" content={blockTitle.MainTitle} />\n                <Text as=\"p\" content={blockTitle.text} />\n              </Row>\n            </Col>\n            <Col className=\"blockTitleForm\">\n              <Register />\n            </Col>\n          </Row>\n        </Form>\n      </Container>\n    </RegisterFormArea>\n  );\n};\n\nexport default RegisterForm;\n","import themeGet from \"@styled-system/theme-get\";\nimport BannerBg from \"../../../../common/assets/image/secD3v/banner-bg-alternate.svg\";\nimport styled from \"styled-components\";\nconst BannerArea = styled.section`\n  padding-top: 270px;\n  padding-bottom: 305px;\n  position: relative;\n  @media (max-width: 1600px) {\n    padding-top: 210px;\n    padding-bottom: 178px;\n  }\n  @media (max-width: 1024px) {\n    padding-top: 150px;\n    padding-bottom: 180px;\n    background-position: center center;\n  }\n  @media (max-width: 768px) {\n    padding-top: 110px;\n    padding-bottom: 140px;\n  }\n  @media (min-width: 768px) {\n    background-image: url(${BannerBg});\n    background-repeat: no-repeat;\n    background-size: cover;\n    background-position: bottom center;\n  }\n  @media (max-width: 767px) {\n    padding-bottom: 0px;\n    background-image: url(${BannerBg});\n    background-repeat: no-repeat;\n    background-size: cover;\n    background-position: bottom center;\n  }\n\n  @media (max-width: 574px) {\n    padding-bottom: 35px;\n    background-image: url(${BannerBg});\n    background-repeat: no-repeat;\n    background-size: cover;\n    background-position: bottom center;\n  }\n\n  .Container {\n    display: flex;\n    position: relative;\n    z-index: 10;\n    @media (max-width: 768px) {\n      margin-top: 25px;\n    }\n  }\n  h2 {\n    font-weight: 500;\n    font-size: 62px;\n    line-height: 1.21;\n    letter-spacing: -2px;\n    color: #ffffff;\n    margin-bottom: 20px;\n    @media (max-width: 1600px) {\n      font-size: 40px;\n      max-width: 414px;\n    }\n    @media (max-width: 768px) {\n      font-size: 35px;\n      margin-left: auto;\n      margin-right: auto;\n      text-align: center;\n      max-width: 421px;\n    }\n    @media (max-width: 574px) {\n      font-size: 30px;\n      max-width: 100%;\n      line-height: 40px;\n      letter-spacing: normal;\n    }\n  }\n  p {\n    font-weight: normal;\n    font-size: 18px;\n    line-height: 2.11;\n    letter-spacing: -0.3px;\n    color: #ffffff;\n    margin-bottom: 50px;\n    max-width: 515px;\n    opacity: 0.8;\n    @media (max-width: 1600px) {\n      font-size: 16px;\n      max-width: 466px;\n    }\n    @media (max-width: 1024px) {\n      max-width: 400px;\n    }\n    @media (max-width: 768px) {\n      max-width: 440px;\n      margin-left: auto;\n      text-align: center;\n      margin-right: auto;\n    }\n  }\n  .ButtonWrap {\n    display: flex;\n    margin-top: 35px;\n    align-items: center;\n    @media (max-width: 1600px) {\n      margin-top: 20px;\n    }\n    @media (max-width: 768px) {\n      justify-content: center;\n    }\n    @media (max-width: 575px) {\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      text-align: center;\n    }\n    span {\n      font-weight: 500;\n      font-size: 15px;\n      color: #ffffff;\n      opacity: 0.6;\n      line-height: 1;\n      margin-bottom: 0;\n      margin-left: 25px;\n      @media (max-width: 1600px) {\n        font-size: 14px;\n      }\n      @media (max-width: 768px) {\n        margin-left: 15px;\n      }\n      @media (max-width: 575px) {\n        margin-left: 0;\n        margin-top: 10px;\n      }\n    }\n  }\n  .Button {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 8px;\n    margin-bottom: 50px;\n    font-weight: bold;\n    font-size: 16px;\n    text-align: center;\n    line-height: 1;\n    color: #23374d;\n    padding: 21px 29px;\n    background-color: white;\n    cursor: pointer;\n    border: 0;\n    transition: all 500ms ease;\n    &:hover {\n      background-color: #ffffff;\n      color: rgb(255, 128, 48);\n      i {\n        transform: translateX(2px);\n      }\n    }\n    i {\n      margin-left: 10px;\n      position: relative;\n      top: 1px;\n      transition: transform 0.4s ease;\n    }\n    @media (max-width: 1600px) {\n      font-size: 14px;\n      padding: 16px 23px;\n      margin-bottom: 60px;\n    }\n    @media (max-width: 575px) {\n      width: 100%;\n    }\n  }\n  .bannerImage {\n    width: 80%;\n    position: absolute;\n    right: 0;\n    display: flex;\n    align-items: center;\n    @media (min-width: 2001px) {\n      margin-right: -80px;\n      max-width: 50%;\n      top: 150px;\n      img {\n        transform: scale(0.85);\n        transform-origin: right center;\n      }\n    }\n    @media (max-width: 2000px) {\n      margin-right: 100px;\n      max-width: 100%;\n      top: -50px;\n      img {\n        transform: scale(0.55);\n        transform-origin: right center;\n      }\n    }\n    @media (max-width: 1600px) {\n      margin-right: 60px;\n      max-width: 100%;\n      top: 0px;\n      img {\n        transform: scale(0.55);\n        transform-origin: right center;\n      }\n    }\n    @media (max-width: 1300px) {\n      margin-right: 100px;\n      top: 0px;\n      max-width: 100%;\n    }\n    @media (max-width: 1024px) {\n      top: 10px;\n      margin-right: 10px;\n\n      max-width: 85%;\n      img {\n        transform: scale(0.6);\n        transform-origin: right center;\n      }\n    }\n    @media (max-width: 768px) {\n      display: none;\n    }\n    @media (max-width: 575px) {\n      display: none;\n    }\n  }\n`;\n\nexport default BannerArea;\n\nexport const Col = styled.div`\n  flex: 0 0 50%;\n  max-width: 50%;\n  @media (max-width: 768px) {\n    flex: 0 0 100%;\n    max-width: 100%;\n  }\n`;\n\nexport const TypewriterWrapper = styled.div`\n  font-weight: 500;\n  font-size: 48px;\n  line-height: 1.21;\n  -webkit-letter-spacing: -2px;\n  -moz-letter-spacing: -2px;\n  -ms-letter-spacing: -2px;\n  letter-spacing: -2px;\n  color: #ffffff;\n  height: 80px;\n  margin-bottom: 100px;\n  @media (max-width: 1600px) {\n    font-size: 40px;\n    max-width: 414px;\n  }\n`;\n","import Box from \"../../../../common/components/Box\";\nimport Heading from \"../../../../common/components/Heading\";\nimport Text from \"../../../../common/components/Text\";\nimport Container from \"../../../../common/components/UI/Container\";\nimport { BANNER_PROBLEM_SOLVE_DATA } from \"../../../../common/data/SecD3v\";\nimport { Link } from \"gatsby\";\nimport React, { useState } from \"react\";\nimport { Icon } from \"react-icons-kit\";\nimport { androidArrowForward } from \"react-icons-kit/ionicons/androidArrowForward\";\nimport Typewriter from \"typewriter-effect\";\nimport \"react-responsive-modal/styles.css\";\nimport { Modal } from \"react-responsive-modal\";\nimport RegistrationForm from \"../../../../containers/SecD3v/Register\";\nimport BannerArea, { Col, TypewriterWrapper } from \"./banner.style\";\nconst Banner = () => {\n  const { title, text, button, image, tagline } = BANNER_PROBLEM_SOLVE_DATA;\n  const [open, setOpen] = useState(false);\n  const onOpenModal = () => setOpen(true);\n  const onCloseModal = () => setOpen(false);\n  return (\n    <BannerArea id=\"banner_section\">\n      <Container className=\"Container\">\n        <Col>\n          {/* <Heading as=\"h2\" content={title} /> */}\n          <TypewriterWrapper>\n            <Typewriter\n              options={{\n                strings: title,\n                autoStart: true,\n                loop: false,\n              }}\n            />\n          </TypewriterWrapper>\n          <Text as=\"p\" content={text} />\n          <Box className=\"ButtonWrap\">\n            <Link className=\"Button\" to={button.link}>\n              {button.label}\n              <Icon size={18} icon={androidArrowForward} />\n            </Link>\n            {/* <button className=\"Button\" onClick={onOpenModal}>\n              {button.label}\n            </button> */}\n            <Modal open={open} onClose={onCloseModal} center>\n              <RegistrationForm />\n            </Modal>\n          </Box>\n        </Col>\n      </Container>\n      <Box className=\"bannerImage\">\n        {image.map(({ src }, index) => (\n          <img src={src} alt=\"\" key={`banner-image-key-${index}`} />\n        ))}\n      </Box>\n    </BannerArea>\n  );\n};\n\nexport default Banner;\n","import styled from \"styled-components\";\n\nconst SectionArea = styled.section`\n  padding-bottom: 120px;\n  padding-top: 120px;\n  @media (max-width: 1600px) {\n  }\n  @media (max-width: 768px) {\n    padding-bottom: 0;\n    padding-top: 80px;\n  }\n  @media (max-width: 375px) {\n    padding-top: 40px;\n    padding-bottom: 255px;\n  }\n  .blockTitle {\n    text-align: center;\n    max-width: 577px;\n    margin-left: auto;\n    margin-right: auto;\n    margin-bottom: 70px;\n    @media (max-width: 1600px) {\n      margin-bottom: 40px;\n    }\n    h2 {\n      text-align: center;\n      font-weight: bold;\n      font-size: 36px;\n      line-height: 1.31;\n      letter-spacing: -0.5px;\n      color: #ff8030;\n      margin: 0;\n      margin-bottom: 60px;\n      @media (max-width: 1600px) {\n        font-size: 30px;\n        line-height: 1.3;\n        max-width: 468px;\n        margin-left: auto;\n        margin-right: auto;\n      }\n      @media (max-width: 768px) {\n        font-size: 28px;\n      }\n      @media (max-width: 375px) {\n        font-size: 22px;\n      }\n    }\n    p {\n      margin: 0;\n      font-weight: normal;\n      font-size: 16px;\n      line-height: 2;\n      color: #132636;\n      @media (max-width: 768px) {\n        font-size: 15px;\n      }\n    }\n  }\n  .postWrap {\n    display: flex;\n    flex-wrap: wrap;\n    margin-top: 65px;\n    @media (max-width: 768px) {\n      justify-content: center;\n    }\n  }\n\n  .grid-container {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));\n    gap: 20px;\n  }\n\n  .grid-item {\n    background-color: #ffffff;\n    border-radius: 12px;\n    border: 3px solid #3b3f53;\n    padding: 10px;\n    text-align: center;\n  }\n\n  /* Define styles for different screen sizes */\n  @media screen and (max-width: 768px) {\n    .grid-container {\n      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n    }\n  }\n\n  @media screen and (max-width: 480px) {\n    .grid-container {\n      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));\n    }\n  }\n\n  .post {\n    flex: 0 0 25%;\n    text-align: center;\n    padding: 10px;\n    @media (max-width: 768px) {\n      flex: 0 0 28%;\n      margin-bottom: 50px;\n    }\n    @media (max-width: 425px) {\n      flex: 1 1 50%;\n    }\n    img {\n      margin-left: auto;\n      margin-right: auto;\n    }\n    h3 {\n      font-weight: bold;\n      font-size: 17px;\n      line-height: 1.8;\n      text-align: left;\n      color: #252525;\n      margin: 0;\n      margin-top: 15px;\n      @media (max-width: 1600px) {\n        font-size: 16px;\n        margin-bottom: 15px;\n      }\n    }\n    &:hover {\n      .feature-image-box-inner {\n        transform: translateY(-5px);\n        &:before {\n          opacity: 1;\n          transform: translateY(5px);\n        }\n      }\n    }\n  }\n  .feature-image-box {\n    text-align: left;\n  }\n  .feature-image-box-inner {\n    transition: all 0.4s ease;\n    display: inline-flex;\n    &:before {\n      pointer-events: none;\n      position: absolute;\n      z-index: -1;\n      content: \"\";\n      top: 100%;\n      left: 5%;\n      height: 10px;\n      width: 90%;\n      opacity: 0;\n      background: radial-gradient(\n        ellipse at center,\n        rgba(132, 159, 184, 0.35) 0%,\n        rgba(0, 0, 0, 0) 80%\n      );\n      transition-duration: 0.3s;\n      transition-property: transform, opacity;\n    }\n  }\n\n  .feature-text-box {\n    margin-bottom: 15px;\n    font-size: 14px;\n    color: #777777;\n    text-align: left;\n  }\n  .benefits-icon {\n    width: 70px;\n    margin-top: 15px;\n    text-align: left;\n  }\n  .customOverlay {\n    background: rgba(36, 123, 160, 0.7);\n  }\n  .customModal {\n    background: #b2dbbf;\n    max-width: 500px;\n    width: 100%;\n  }\n`;\n\nexport default SectionArea;\n","import Box from \"../../../../common/components/Box\";\nimport Heading from \"../../../../common/components/Heading\";\nimport Container from \"../../../../common/components/UI/Container\";\nimport { PROBLEMS_WE_SOLVE_DATA } from \"../../../../common/data/SecD3v\";\nimport React, { useState } from \"react\";\nimport KeyBenefitsArea from \"./section.style\";\n\nconst SectionArea = () => {\n  const { blockTitle, post } = PROBLEMS_WE_SOLVE_DATA;\n  const { MainTitle, title } = blockTitle;\n\n  const [open, setOpen] = useState(false);\n  const onOpenModal = () => functionA();\n  const onCloseModal = () => setOpen(false);\n\n  const [benefitValue, setBenefitValue] = useState(\"\");\n\n  const retrieveBenefits = (title, description) => {\n    setBenefitValue({ title, description });\n    setOpen(true);\n  };\n\n  return (\n    <KeyBenefitsArea id=\"problems-we-solve\">\n      <Container>\n        <Box className=\"blockTitle\">\n          <Heading as=\"h2\" content={MainTitle} />\n          {/* <Text as=\"p\" content={text} /> */}\n        </Box>\n        <Box className=\"grid-container\">\n          {post?.map(({ icon, title, description }, index) => (\n            <div class=\"grid-item\">\n              <Box className=\"post\" key={`feature-post-key-${index}`}>\n                <div className=\"feature-image-box\">\n                  <div className=\"feature-image-box-inner\">\n                    <img className=\"benefits-icon\" src={icon} alt={title} />\n                  </div>\n                </div>\n                <strong>\n                  <Heading as=\"h3\" content={title} />\n                </strong>\n                <div className=\"feature-text-box\">{description}</div>\n              </Box>\n            </div>\n          ))}\n        </Box>\n      </Container>\n    </KeyBenefitsArea>\n  );\n};\n\nexport default SectionArea;\n","import Sticky from \"react-stickynode\";\nimport Navbar from \"../containers/SecD3v/Navbar\";\nimport { DrawerProvider } from \"../common/contexts/DrawerContext\";\nimport SEO from \"../components/SEO\";\nimport Banner from \"../containers/SecD3v/ProblemsWeSolve/Banner\";\nimport Section from \"../containers/SecD3v/ProblemsWeSolve/Section\";\nimport Footer from \"../containers/SecD3v/Footer\";\nimport React from \"react\";\nimport RegisterForm from \"../containers/SecD3v/RegisterForm\";\n\nconst SecD3v = () => {\n  return (\n    <>\n      <Sticky top={0} innerZ={9999} activeClass=\"sticky-nav-active\">\n        <DrawerProvider>\n          <Navbar />\n        </DrawerProvider>\n      </Sticky>\n      <SEO title=\"Home\" />\n      <Banner />\n      <Section />\n      <Footer />\n    </>\n  );\n};\n\nexport default SecD3v;\n","export default \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTkxOS45IDkxMiI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOnVybCgjbGluZWFyLWdyYWRpZW50KTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2Utd2lkdGg6MHB4O308L3N0eWxlPjxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyLWdyYWRpZW50IiB4MT0iLTUxNy4xIiB5MT0iLTY2LjQiIHgyPSI2MzguNiIgeTI9IjU3Ny4xIiBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDEwNzkgMjQyLjUpIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agb2Zmc2V0PSIuMyIgc3RvcC1jb2xvcj0iIzNiM2Y1MyIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI2ZmYTgyZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxnIGlkPSJMYXllcl8xLTIiPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTAsMHY3OTUuNWw5MzgsMTE1YzE2LjEsMiwzMi4zLDIsNDguNCwwbDkzMy41LTExNC4yVjBIMFoiLz48L2c+PC9zdmc+\""],"names":["RegisterFormArea","styled","section","withConfig","displayName","componentId","Row","div","Col","Form","form","RegisterForm","blockTitle","REGISTER_FORM_DATA","React","id","Container","className","Heading","as","content","MainTitle","Text","text","Register","BannerBg","TypewriterWrapper","Banner","title","button","image","tagline","BANNER_PROBLEM_SOLVE_DATA","open","setOpen","useState","BannerArea","Typewriter","options","strings","autoStart","loop","Box","Link","to","link","label","Icon","size","icon","androidArrowForward","Modal","onClose","onCloseModal","center","RegistrationForm","map","_ref","index","src","alt","key","SectionArea","post","PROBLEMS_WE_SOLVE_DATA","benefitValue","setBenefitValue","KeyBenefitsArea","description","class","SecD3v","Sticky","top","innerZ","activeClass","DrawerProvider","Navbar","SEO","Section","Footer"],"sourceRoot":""}