{"version":3,"sources":["webpack:///./src/components/bottom-section/index.jsx","webpack:///./src/img/home-illustration-2.svg","webpack:///./src/img/home-illustration-1.svg","webpack:///./src/components/steps/index.jsx","webpack:///./src/pages/social-spy/index.jsx"],"names":["title1","title2","text1","text2","useTranslation","t","i18n","className","language","src","img1","img2","style","color","fontWeight","module","exports","text3","step1","step2","step3","SocialSpy","useContext","UserContext","user","useState","usernameValue","setUsernameValue","handleGo","navLink","trim","navigate","toLocaleLowerCase","title","description","icon4","width","height","position","top","left","icon1","icon3","icon2","type","placeholder","value","onChange","e","target","onKeyPress","key","maxLength","loop","right","onClick","playIcon"],"mappings":"qHAAA,yFAOe,gBAAqC,IAAnCA,EAAkC,EAAlCA,OAAQC,EAA0B,EAA1BA,OAAQC,EAAkB,EAAlBA,MAAOC,EAAW,EAAXA,MACtC,EAAkBC,2BAAXC,EAAP,EAAOA,EAAGC,EAAV,EAAUA,KAEV,OACE,yBAAKC,UAAU,yBACb,yBAAKA,UAAU,OACb,yBAAKA,UAAU,gCACb,wBAAIA,UAA6B,OAAlBD,EAAKE,SAAoB,aAAe,IAAKR,GAAM,GAAOK,EAAE,yBAC3E,yBAAKI,IAAKC,IAAMH,UAAU,mBACzBL,GACC,oCACE,uBAAGK,UAA6B,OAAlBD,EAAKE,SAAoB,aAAe,IAAKH,EAAE,cAC7D,uBAAGE,UAA6B,OAAlBD,EAAKE,SAAoB,aAAe,IAAKH,EAAE,gBAInE,yBAAKE,UAAU,gDACb,yBAAKE,IAAKC,QAGd,yBAAKH,UAAU,OACb,yBAAKA,UAAU,gDACb,yBAAKE,IAAKE,OAEZ,yBAAKJ,UAAU,gCACb,wBAAIA,UAA6B,OAAlBD,EAAKE,SAAoB,aAAe,IAAKP,GAAM,GAAOI,EAAE,2BAC3E,yBAAKI,IAAKE,IAAMJ,UAAU,mBACzBJ,GACC,uBAAGI,UAA6B,OAAlBD,EAAKE,SAAoB,aAAe,IACnDH,EAAE,aACH,0BAAMO,MAAO,CAACC,MAAO,OAAQC,WAAY,MAAOT,EAAE,QAFpD,IAEoEA,EAAE,mB,qBCrClFU,EAAOC,QAAU,IAA0B,mE,mBCA3CD,EAAOC,QAAU,kqK,yDCAjB,2DAMe,gBAA4B,IAA1Bd,EAAyB,EAAzBA,MAAOC,EAAkB,EAAlBA,MAAOc,EAAW,EAAXA,MAC7B,EAAkBb,2BAAXC,EAAP,EAAOA,EAAP,EAAUC,KACV,OACE,yBAAKC,UAAU,mBACb,yBAAKA,UAAU,cACb,yBAAKA,UAAU,QACb,0BAAMA,UAAU,SAASW,KACzB,2BAAIhB,GAAK,GAAOG,EAAE,YAEpB,yBAAKE,UAAU,QACb,0BAAMA,UAAU,SAASY,KACzB,2BAAIhB,GAAK,GAAOE,EAAE,YAEpB,yBAAKE,UAAU,QACb,0BAAMA,UAAU,SAASa,KACzB,2BACGH,GACC,oCACGZ,EAAE,UADL,IACgB,0BAAMO,MAAO,CAACC,MAAO,OAAQC,WAAY,MAAzC,IAAiDT,EAAE,OAAnD,KACbA,EAAE,iB,kCCzBnB,yOA8JegB,UA/IG,WAChB,MAAkBjB,2BAAXC,EAAP,EAAOA,EAAGC,EAAV,EAAUA,KAEV,GADegB,qBAAWC,KAAnBC,KACmCC,mBAAS,KAA5CC,EAAP,KAAsBC,EAAtB,KAaMC,EAAW,WACf,IAAMC,EAAUH,EAAcI,OAC9BC,oBAA8B,OAAlBzB,EAAKE,SAAoB,MAAQ,IAArC,IAA2CqB,EAAQG,oBAAnD,MAOV,OACE,kBAAC,IAAD,CAAQC,MAAO5B,EAAE,yBAA0B6B,YAAa7B,EAAE,gCACxD,yBAAKE,UAAU,oCACb,yBACEE,IAAK0B,IACLvB,MAAO,CAACwB,MAAO,OAAQC,OAAQ,OAAQC,SAAU,WAAYC,IAAK,MAAOC,KAAM,MAC/EjC,UAAU,sBAEZ,yBACEE,IAAKgC,IACL7B,MAAO,CAACwB,MAAO,OAAQC,OAAQ,OAAQC,SAAU,WAAYC,IAAK,KAAMC,KAAM,OAC9EjC,UAAU,sBAEZ,yBACEE,IAAKgC,IACL7B,MAAO,CAACwB,MAAO,OAAQC,OAAQ,OAAQC,SAAU,WAAYC,IAAK,OAAQC,KAAM,OAChFjC,UAAU,sBAEZ,yBACEE,IAAKiC,IACL9B,MAAO,CAACwB,MAAO,OAAQC,OAAQ,OAAQC,SAAU,WAAYC,IAAK,OAAQC,KAAM,OAChFjC,UAAU,sBAEZ,yBAAKE,IAAKiC,IAAO9B,MAAO,CAACwB,MAAO,OAAQC,OAAQ,OAAQC,SAAU,WAAYC,IAAK,OAAQC,KAAM,QACjG,yBACE/B,IAAKiC,IACL9B,MAAO,CAACwB,MAAO,OAAQC,OAAQ,OAAQC,SAAU,WAAYC,IAAK,MAAOC,KAAM,OAC/EjC,UAAU,sBAGZ,yBAAKE,IAAKgC,IAAO7B,MAAO,CAACwB,MAAO,OAAQC,OAAQ,OAAQC,SAAU,WAAYC,IAAK,OAAQC,KAAM,SACjG,yBAAK/B,IAAKkC,IAAO/B,MAAO,CAACwB,MAAO,OAAQC,OAAQ,OAAQC,SAAU,WAAYC,IAAK,OAAQC,KAAM,SACjG,yBACE/B,IAAKkC,IACL/B,MAAO,CAACwB,MAAO,OAAQC,OAAQ,OAAQC,SAAU,WAAYC,IAAK,MAAOC,KAAM,OAC/EjC,UAAU,sBAEZ,yBACEE,IAAK0B,IACLvB,MAAO,CAACwB,MAAO,OAAQC,OAAQ,OAAQC,SAAU,WAAYC,IAAK,MAAOC,KAAM,OAC/EjC,UAAU,sBAEZ,yBAAKE,IAAKiC,IAAO9B,MAAO,CAACwB,MAAO,OAAQC,OAAQ,OAAQC,SAAU,WAAYC,IAAK,KAAMC,KAAM,SAE/F,wBAAIjC,UAAU,cAAcF,EAAE,qBAC9B,wBAAIE,UAAU,sBAAsBF,EAAE,2BACtC,yBAAKE,UAAS,oCAAuD,OAAlBD,EAAKE,SAAoB,aAAe,KACzF,2BACED,UAAS,8BAAiD,OAAlBD,EAAKE,SAAoB,YAAc,IAC/EoC,KAAK,OACLC,YAAaxC,EAAE,wBACfyC,MAAOpB,EACPqB,SAxDW,SAAAC,GACnBrB,EAAiBqB,EAAEC,OAAOH,QAwDlBI,WAzEmB,SAAAF,GACb,UAAVA,EAAEG,KACJvB,KAwEMwB,UAAW,MAEb,yBACE3C,IAAK4C,IACLzC,MAAO,CACLwB,MAAO,OACPC,OAAQ,OACRC,SAAU,WACVC,IAAK,OACLC,KAAwB,OAAlBlC,EAAKE,SAAoB,GAAK,OACpC8C,MAAyB,OAAlBhD,EAAKE,SAAoB,OAAS,MAG7C,yBAAKD,UAAU,gCACb,4BAAQA,UAAS,oEAAuEgD,QAAS3B,GAC9F4B,QAKT,kBAAC,IAAD,CACEtD,MAAK,GAAKG,EAAE,wBACZF,MAAK,GAAKE,EAAE,wBACZY,MACE,oCACGZ,EAAE,wBADL,IAC8B,0BAAMO,MAAO,CAACC,MAAO,OAAQC,WAAY,MAAzC,IAAiDT,EAAE,OAAnD,KAD9B,IACkGA,EAAE,aAmBxG,kBAAC,IAAD,CACEL,OAAM,GAAKK,EAAE,gCACbJ,OAAM,GAAKI,EAAE,gCACbH,MACE,oCACE,uBAAGK,UAA6B,OAAlBD,EAAKE,SAAoB,aAAe,IAAKH,EAAE,wBAA7D,KACA,uBAAGE,UAA6B,OAAlBD,EAAKE,SAAoB,aAAe,IAAKH,EAAE,0BAGjEF,MACE,oCACE,uBAAGI,UAA6B,OAAlBD,EAAKE,SAAoB,aAAe,IAAKH,EAAE,yBAC7D,uBAAGE,UAA6B,OAAlBD,EAAKE,SAAoB,aAAe,IAAKH,EAAE","file":"component---src-pages-social-spy-index-jsx-097174ff7ed14adc1942.js","sourcesContent":["import React from 'react';\r\nimport {useTranslation} from 'gatsby-plugin-react-i18next';\r\n\r\nimport img1 from '../../img/home-illustration-1.svg';\r\nimport img2 from '../../img/home-illustration-2.svg';\r\nimport './styles.scss';\r\n\r\nexport default ({title1, title2, text1, text2}) => {\r\n  const {t, i18n} = useTranslation();\r\n\r\n  return (\r\n    <div className=\"home-bottom-container\">\r\n      <div className=\"row\">\r\n        <div className=\"col-12 col-lg-6 text-section\">\r\n          <h2 className={i18n.language === 'ar' ? 'text-right' : ''}>{title1 || `${t('bottom-section-title')}`}</h2>\r\n          <img src={img1} className=\"d-lg-none py-4\" />\r\n          {text1 || (\r\n            <>\r\n              <p className={i18n.language === 'ar' ? 'text-right' : ''}>{t('section-1')}</p>\r\n              <p className={i18n.language === 'ar' ? 'text-right' : ''}>{t('section-2')}</p>\r\n            </>\r\n          )}\r\n        </div>\r\n        <div className=\"col-12 col-lg-6 d-none d-lg-flex img-section\">\r\n          <img src={img1} />\r\n        </div>\r\n      </div>\r\n      <div className=\"row\">\r\n        <div className=\"col-12 col-lg-6 d-none d-lg-flex img-section\">\r\n          <img src={img2} />\r\n        </div>\r\n        <div className=\"col-12 col-lg-6 text-section\">\r\n          <h2 className={i18n.language === 'ar' ? 'text-right' : ''}>{title2 || `${t('bottom-section-title-2')}`}</h2>\r\n          <img src={img2} className=\"d-lg-none py-4\" />\r\n          {text2 || (\r\n            <p className={i18n.language === 'ar' ? 'text-right' : ''}>\r\n              {t('section-3')}\r\n              <span style={{color: '#fff', fontWeight: 700}}>{t('400')}</span> {t('section-4')}\r\n            </p>\r\n          )}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n","module.exports = __webpack_public_path__ + \"static/home-illustration-2-f848cbcf1bae8e75dfd8733d413e5773.svg\";","module.exports = \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTExIiBoZWlnaHQ9IjMxNCIgdmlld0JveD0iMCAwIDUxMSAzMTQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cmVjdCB3aWR0aD0iNTExIiBoZWlnaHQ9IjMxNCIgZmlsbD0iIzJEMkYzNCIvPg0KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIzM185ODIpIj4NCjxyZWN0IHdpZHRoPSIzNjAiIGhlaWdodD0iMjEwIiByeD0iMTIiIGZpbGw9InVybCgjcGFpbnQwX2xpbmVhcl8yMzNfOTgyKSIvPg0KPHJlY3QgeD0iMzIuMjQzMiIgeT0iLTQyLjg5ODkiIHdpZHRoPSIyOTUuNTQ3IiBoZWlnaHQ9IjE0Ni43ODgiIHJ4PSI5Ljg1MTU1IiBmaWxsPSIjMkQyRjM0IiBmaWxsLW9wYWNpdHk9IjAuNiIvPg0KPHJlY3QgeD0iMTE4Ljk2OCIgeT0iMTE0LjI5NSIgd2lkdGg9Ijc5Ljc5NzYiIGhlaWdodD0iNy44MjY3IiByeD0iMS45NzAzMSIgZmlsbD0iIzJDMzM0NyIvPg0KPHJlY3QgeD0iMTE4Ljk2OCIgeT0iMTI2LjAzNSIgd2lkdGg9IjQxLjM3NjUiIGhlaWdodD0iNy44MjY3IiByeD0iMS45NzAzMSIgZmlsbD0iIzJDMzM0NyIvPg0KPGVsbGlwc2UgY3g9Ijc5LjAzNzkiIGN5PSIxMTguMjQzIiByeD0iMjguMDc2OSIgcnk9IjI4LjU2OTUiIGZpbGw9IiMzRDQzN0EiIGZpbGwtb3BhY2l0eT0iMC43Ii8+DQo8L2c+DQo8ZyBjbGlwLXBhdGg9InVybCgjY2xpcDFfMjMzXzk4MikiPg0KPHJlY3QgeD0iMTQ5IiB5PSI4MCIgd2lkdGg9IjM2MiIgaGVpZ2h0PSIyMTAiIHJ4PSIxMiIgZmlsbD0idXJsKCNwYWludDFfbGluZWFyXzIzM185ODIpIi8+DQo8cmVjdCB4PSIyNzIuMDk4IiB5PSIxMjcuNzQzIiB3aWR0aD0iNzkuNzk3NiIgaGVpZ2h0PSI3LjgyNjciIHJ4PSIxLjk3MDMxIiBmaWxsPSIjMkIzNjUzIi8+DQo8cmVjdCB4PSIyNzIuMDk4IiB5PSIxMzkuNDgzIiB3aWR0aD0iNDEuMzc2NSIgaGVpZ2h0PSI3LjgyNjciIHJ4PSIxLjk3MDMxIiBmaWxsPSIjMkIzNjUzIi8+DQo8ZWxsaXBzZSBjeD0iMjI5LjAzOCIgY3k9IjEzNi43NDYiIHJ4PSIyOC4wNzY5IiByeT0iMjguNTY5NSIgZmlsbD0iIzJFMzAzNyIgZmlsbC1vcGFjaXR5PSIwLjgiLz4NCjxjaXJjbGUgY3g9IjIxNS4wODgiIGN5PSIxOTYuNjE4IiByPSIxNC4wODgxIiBmaWxsPSIjMkQyRjM0IiBmaWxsLW9wYWNpdHk9IjAuNiIvPg0KPGNpcmNsZSBjeD0iMjQ5LjUyNiIgY3k9IjE5Ni42MTgiIHI9IjE0LjA4ODEiIGZpbGw9IiMyRDJGMzQiIGZpbGwtb3BhY2l0eT0iMC42Ii8+DQo8Y2lyY2xlIGN4PSIyODMuOTYzIiBjeT0iMTk2LjYxOCIgcj0iMTQuMDg4MSIgZmlsbD0iIzJEMkYzNCIgZmlsbC1vcGFjaXR5PSIwLjYiLz4NCjxjaXJjbGUgY3g9IjMxOC40MDEiIGN5PSIxOTYuNjE4IiByPSIxNC4wODgxIiBmaWxsPSIjMkQyRjM0IiBmaWxsLW9wYWNpdHk9IjAuNiIvPg0KPGNpcmNsZSBjeD0iMzUyLjgzOSIgY3k9IjE5Ni42MTgiIHI9IjE0LjA4ODEiIGZpbGw9IiMyRDJGMzQiIGZpbGwtb3BhY2l0eT0iMC42Ii8+DQo8Y2lyY2xlIGN4PSIzODcuMjc2IiBjeT0iMTk2LjYxOCIgcj0iMTQuMDg4MSIgZmlsbD0iIzJEMkYzNCIgZmlsbC1vcGFjaXR5PSIwLjYiLz4NCjxyZWN0IHg9IjE5NC42MTQiIHk9IjIyNy45MjUiIHdpZHRoPSI4Ni4wOTQiIGhlaWdodD0iNzIuNzg4NSIgZmlsbD0iIzJEMkYzNCIgZmlsbC1vcGFjaXR5PSIwLjYiLz4NCjxyZWN0IHg9IjI5Mi40NDgiIHk9IjIyNy45MjUiIHdpZHRoPSI4Ni4wOTQiIGhlaWdodD0iNzIuNzg4NSIgZmlsbD0iIzJEMkYzNCIgZmlsbC1vcGFjaXR5PSIwLjYiLz4NCjxyZWN0IHg9IjM5MC4yODIiIHk9IjIyNy45MjUiIHdpZHRoPSI4Ni4wOTQiIGhlaWdodD0iNzIuNzg4NSIgZmlsbD0iIzJEMkYzNCIgZmlsbC1vcGFjaXR5PSIwLjYiLz4NCjwvZz4NCjxwYXRoIG9wYWNpdHk9IjAuOSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMjguOTI2IDE4OC45MzJDMTE3LjU2NSAyMDAuMjkzIDExNy41NjUgMjE4LjcxMyAxMjguOTI2IDIzMC4wNzVDMTQwLjI4NyAyNDEuNDM2IDE1OC43MDcgMjQxLjQzNiAxNzAuMDY4IDIzMC4wNzVDMTgxLjQyOSAyMTguNzEzIDE4MS40MjkgMjAwLjI5MyAxNzAuMDY4IDE4OC45MzJDMTU4LjcwNyAxNzcuNTcxIDE0MC4yODcgMTc3LjU3MSAxMjguOTI2IDE4OC45MzJaTTExNC4zOTggMjM1Ljc4MkMxMTQuODMzIDIzNS4zNDggMTE0Ljg4IDIzNC42NjEgMTE0LjUyNSAyMzQuMTU5QzEwMi43MjMgMjE3LjQ2MSAxMDQuMjk2IDE5NC4yMDEgMTE5LjI0NiAxNzkuMjUyQzEzNS45NTMgMTYyLjU0NCAxNjMuMDQxIDE2Mi41NDQgMTc5Ljc0OSAxNzkuMjUyQzE5Ni40NTYgMTk1Ljk1OSAxOTYuNDU2IDIyMy4wNDggMTc5Ljc0OSAyMzkuNzU1QzE2NC43MzcgMjU0Ljc2NyAxNDEuMzQ0IDI1Ni4yOTEgMTI0LjYzMSAyNDQuMzI2QzEyNC4xMyAyNDMuOTY2IDEyMy40MzggMjQ0LjAxMiAxMjMuMDAyIDI0NC40NDhMMTEzLjcgMjUzLjc0OUMxMTMuNjM1IDI1My44MTQgMTEzLjU3OCAyNTMuODg2IDExMy41MjkgMjUzLjk2NEwxMDYuODc2IDI2NC41MDVDMTA2LjgyNyAyNjQuNTgzIDEwNi43NjkgMjY0LjY1NSAxMDYuNzA0IDI2NC43Mkw4Mi4zMzg0IDI4OS4wODZDODEuODU1MyAyODkuNTY5IDgxLjA3MTkgMjg5LjU2OSA4MC41ODg4IDI4OS4wODZMNjkuNTkyNCAyNzguMDg5QzY5LjEwOTIgMjc3LjYwNiA2OS4xMDkyIDI3Ni44MjMgNjkuNTkyNCAyNzYuMzRMOTMuOTUxNiAyNTEuOThDOTQuMDIwOSAyNTEuOTExIDk0LjA5ODEgMjUxLjg1IDk0LjE4MTcgMjUxLjc5OUwxMDQuODQyIDI0NS4yODlDMTA0LjkyNiAyNDUuMjM4IDEwNS4wMDMgMjQ1LjE3OCAxMDUuMDcyIDI0NS4xMDhMMTE0LjM5OCAyMzUuNzgyWiIgZmlsbD0idXJsKCNwYWludDJfbGluZWFyXzIzM185ODIpIi8+DQo8ZGVmcz4NCjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl8yMzNfOTgyIiB4MT0iMTgwIiB5MT0iMCIgeDI9IjE4MCIgeTI9IjMxOS42NjciIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4NCjxzdG9wIHN0b3AtY29sb3I9IiM1NTU2QTAiIHN0b3Atb3BhY2l0eT0iMC41NCIvPg0KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMzEzMzM4IiBzdG9wLW9wYWNpdHk9IjAiLz4NCjwvbGluZWFyR3JhZGllbnQ+DQo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MV9saW5lYXJfMjMzXzk4MiIgeDE9IjMzMCIgeTE9IjgwIiB4Mj0iMzMwIiB5Mj0iMzk5LjY2NyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPg0KPHN0b3Agc3RvcC1jb2xvcj0iIzU1NTZBMCIgc3RvcC1vcGFjaXR5PSIwLjU0Ii8+DQo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMzMTMzMzgiIHN0b3Atb3BhY2l0eT0iMCIvPg0KPC9saW5lYXJHcmFkaWVudD4NCjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQyX2xpbmVhcl8yMzNfOTgyIiB4MT0iMTc5Ljc0OSIgeTE9IjE3OS4yNTIiIHgyPSIzMC42NzA1IiB5Mj0iMzI4LjMzIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+DQo8c3RvcCBzdG9wLWNvbG9yPSIjNzQ3NUM5IiBzdG9wLW9wYWNpdHk9IjAuNTQiLz4NCjxzdG9wIG9mZnNldD0iMC43MzYzMTYiIHN0b3AtY29sb3I9IiMzRjQxNjEiIHN0b3Atb3BhY2l0eT0iMC4yMTI0OTkiLz4NCjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzMxMzMzOCIgc3RvcC1vcGFjaXR5PSIwIi8+DQo8L2xpbmVhckdyYWRpZW50Pg0KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMzNfOTgyIj4NCjxyZWN0IHdpZHRoPSIzNjAiIGhlaWdodD0iMjEwIiByeD0iMTIiIGZpbGw9IndoaXRlIi8+DQo8L2NsaXBQYXRoPg0KPGNsaXBQYXRoIGlkPSJjbGlwMV8yMzNfOTgyIj4NCjxyZWN0IHg9IjE0OSIgeT0iODAiIHdpZHRoPSIzNjIiIGhlaWdodD0iMjEwIiByeD0iMTIiIGZpbGw9IndoaXRlIi8+DQo8L2NsaXBQYXRoPg0KPC9kZWZzPg0KPC9zdmc+DQo=\"","import React from 'react';\r\nimport {useTranslation} from 'gatsby-plugin-react-i18next';\r\n\r\nimport {step1, step2, step3} from '../../img/svg-icons';\r\nimport './styles.scss';\r\n\r\nexport default ({text1, text2, text3}) => {\r\n  const {t, i18n} = useTranslation();\r\n  return (\r\n    <div className=\"setps-container\">\r\n      <div className=\"steps-list\">\r\n        <div className=\"step\">\r\n          <span className=\"point\">{step1}</span>\r\n          <p>{text1 || `${t('Step-1')}`}</p>\r\n        </div>\r\n        <div className=\"step\">\r\n          <span className=\"point\">{step2}</span>\r\n          <p>{text2 || `${t('Step-2')}`}</p>\r\n        </div>\r\n        <div className=\"step\">\r\n          <span className=\"point\">{step3}</span>\r\n          <p>\r\n            {text3 || (\r\n              <>\r\n                {t('Step-3')} <span style={{color: '#fff', fontWeight: 700}}> {t('400')} </span>\r\n                {t('Step-4')}\r\n              </>\r\n            )}\r\n          </p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n","import React, {useContext, useState} from 'react';\r\nimport {useTranslation} from 'gatsby-plugin-react-i18next';\r\nimport Layout from '../../components/layout';\r\nimport Result from '../../components/result';\r\nimport loop from '../../img/icons/search-icon.svg';\r\nimport {navigate} from 'gatsby';\r\nimport icon1 from '../../img/icons/icon-1.svg';\r\nimport icon2 from '../../img/icons/icon-2.svg';\r\nimport icon3 from '../../img/icons/icon-3.svg';\r\nimport icon4 from '../../img/icons/icon-4.svg';\r\nimport {playIcon} from '../../img/svg-icons';\r\nimport Steps from '../../components/steps';\r\nimport BottomSection from '../../components/bottom-section';\r\nimport {UserContext} from '../../context/user-context';\r\n\r\nconst SocialSpy = () => {\r\n  const {t, i18n} = useTranslation();\r\n  const {user} = useContext(UserContext);\r\n  const [usernameValue, setUsernameValue] = useState('');\r\n\r\n  const handleCaptureOnEnter = e => {\r\n    if (e.key === 'Enter') {\r\n      handleGo();\r\n    }\r\n  };\r\n\r\n  const handleNewScanRequest = () => {\r\n    const navLink = usernameValue.trim();\r\n    navigate(`/${navLink.toLocaleLowerCase()}/`);\r\n  };\r\n\r\n  const handleGo = () => {\r\n    const navLink = usernameValue.trim();\r\n    navigate(`${i18n.language === 'ar' ? '/ar' : ''}/${navLink.toLocaleLowerCase()}/`);\r\n  };\r\n\r\n  const handleChange = e => {\r\n    setUsernameValue(e.target.value);\r\n  };\r\n\r\n  return (\r\n    <Layout title={t('social-spy-page-title')} description={t('social-spy-page-description')}>\r\n      <div className=\"search-wrapper position-relative\">\r\n        <img\r\n          src={icon4}\r\n          style={{width: '45px', height: 'auto', position: 'absolute', top: '25%', left: '6%'}}\r\n          className=\"d-none d-md-block\"\r\n        />\r\n        <img\r\n          src={icon1}\r\n          style={{width: '25px', height: 'auto', position: 'absolute', top: '0%', left: '12%'}}\r\n          className=\"d-none d-md-block\"\r\n        />\r\n        <img\r\n          src={icon1}\r\n          style={{width: '25px', height: 'auto', position: 'absolute', top: '-25%', left: '35%'}}\r\n          className=\"d-none d-md-block\"\r\n        />\r\n        <img\r\n          src={icon3}\r\n          style={{width: '70px', height: 'auto', position: 'absolute', top: '-20%', left: '18%'}}\r\n          className=\"d-none d-md-block\"\r\n        />\r\n        <img src={icon3} style={{width: '45px', height: 'auto', position: 'absolute', top: '-15%', left: '5%'}} />\r\n        <img\r\n          src={icon3}\r\n          style={{width: '70px', height: 'auto', position: 'absolute', top: '15%', left: '18%'}}\r\n          className=\"d-none d-smdblock\"\r\n        />\r\n\r\n        <img src={icon1} style={{width: '35px', height: 'auto', position: 'absolute', top: '-20%', left: '90%'}} />\r\n        <img src={icon2} style={{width: '35px', height: 'auto', position: 'absolute', top: '-30%', left: '65%'}} />\r\n        <img\r\n          src={icon2}\r\n          style={{width: '40px', height: 'auto', position: 'absolute', top: '30%', left: '75%'}}\r\n          className=\"d-none d-md-block\"\r\n        />\r\n        <img\r\n          src={icon4}\r\n          style={{width: '45px', height: 'auto', position: 'absolute', top: '25%', left: '88%'}}\r\n          className=\"d-none d-md-block\"\r\n        />\r\n        <img src={icon3} style={{width: '70px', height: 'auto', position: 'absolute', top: '5%', left: '80%'}} />\r\n\r\n        <h1 className=\"page-title\">{t('social-spy-title')}</h1>\r\n        <h2 className=\"page-subtitle mb-4\">{t('social-spy-description')}</h2>\r\n        <div className={`form-container field is-grouped ${i18n.language === 'ar' ? 'left-align' : ''}`}>\r\n          <input\r\n            className={`input is-rounded inputBar ${i18n.language === 'ar' ? 'typing-rl' : ''}`}\r\n            type=\"text\"\r\n            placeholder={t('nickname-or-username')}\r\n            value={usernameValue}\r\n            onChange={handleChange}\r\n            onKeyPress={handleCaptureOnEnter}\r\n            maxLength={320}\r\n          />\r\n          <img\r\n            src={loop}\r\n            style={{\r\n              width: '25px',\r\n              height: '25px',\r\n              position: 'absolute',\r\n              top: '15px',\r\n              left: i18n.language === 'ar' ? '' : '15px',\r\n              right: i18n.language === 'ar' ? '15px' : '',\r\n            }}\r\n          />\r\n          <div className=\"buttons is-block btn_capture\">\r\n            <button className={`button is-primary is-outlined is-medium is-rounded inputBarButton`} onClick={handleGo}>\r\n              {playIcon}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <Steps\r\n        text1={`${t('social-spy-section-1')}`}\r\n        text2={`${t('social-spy-section-2')}`}\r\n        text3={\r\n          <>\r\n            {t('social-spy-section-3')} <span style={{color: '#fff', fontWeight: 700}}> {t('400')} </span> {t('Step-4')}\r\n          </>\r\n        }\r\n      />\r\n      {/* {(user && user.package_data && user.package_data.name && user.package_data.name.toLowerCase() === 'free') ||\r\n      (user && !user.package_data) ? (\r\n        <>\r\n          <a href=\"https://ad.candidatechecker.io\" target=\"_top\" id=\"512104\">\r\n            <img src=\"//a.impactradius-go.com/display-ad/7452-512104\" border=\"0\" alt=\"\" width=\"728\" height=\"90\" />\r\n          </a>\r\n          <img\r\n            height=\"0\"\r\n            width=\"0\"\r\n            src=\"https://nordvpn.sjv.io/i/2559811/512104/7452\"\r\n            style={{position: 'absolute', visibility: 'hidden'}}\r\n            border=\"0\"\r\n          />\r\n        </>\r\n      ) : null} */}\r\n      <BottomSection\r\n        title1={`${t('social-spy-section-article-1')}`}\r\n        title2={`${t('social-spy-section-article-2')}`}\r\n        text1={\r\n          <>\r\n            <p className={i18n.language === 'ar' ? 'text-right' : ''}>{t('social-spy-section-5')} </p>\r\n            <p className={i18n.language === 'ar' ? 'text-right' : ''}>{t('social-spy-section-6')}</p>\r\n          </>\r\n        }\r\n        text2={\r\n          <>\r\n            <p className={i18n.language === 'ar' ? 'text-right' : ''}>{t('social-spy-section-7')}</p>\r\n            <p className={i18n.language === 'ar' ? 'text-right' : ''}>{t('social-spy-section-8')}</p>\r\n          </>\r\n        }\r\n      />\r\n    </Layout>\r\n  );\r\n};\r\n\r\nexport default SocialSpy;\r\n\r\nexport const query = graphql`\r\n  query($language: String!) {\r\n    locales: allLocale(filter: {language: {eq: $language}}) {\r\n      edges {\r\n        node {\r\n          ns\r\n          data\r\n          language\r\n        }\r\n      }\r\n    }\r\n  }\r\n`;\r\n"],"sourceRoot":""}