{"version":3,"sources":["webpack:///./img/sound-waves-brand-colors-flattened.svg","webpack:///./src/components/pages/home/images/first-user-photo.png","webpack:///./src/components/pages/home/images/second-user-photo.png","webpack:///./src/components/pages/home/images/third-user-photo.png","webpack:///./src/components/pages/home/images/users-standing-together.png","webpack:///./src/components/pages/home/testimonials/testimonials.tsx","webpack:///./src/components/pages/home/home.tsx"],"names":["module","exports","Testimonials","props","cards","currentSlide","setCurrentSlide","loaded","setLoaded","locale","rtl","sliderRef","instanceRef","initial","loop","slides","spacing","slider","track","details","rel","timeout","mouseOver","clearNextTimeout","clearTimeout","nextTimeout","setTimeout","next","on","container","addEventListener","length","className","id","ref","map","data","index","key","src","photo","alt","testimonial","name","current","Arrow","direction","onClick","event","stopPropagation","prev","disabled","Array","keys","idx","moveToIdx","width","height","viewBox","fill","xmlns","d","stroke","TESTIMONIALS_CARDS_DATA","HomePage","statsRef","account","setInitPhraseSet","actions","set","hasAccount","Boolean","location","hash","scrollIntoView","window","scrollBy","url","URL","href","phraseSetFromUrl","searchParams","get","delete","history","replaceState","toString","RecordButton","section","isAnon","START_RECORDING","BUTTON_USAGE","email","push","startRecording","sectionNumber","CREATE_ACCOUNT","link","document","createElement","click","createAnAccount","controls","vars","count","elems","b","appLink","target","APP_LINK"],"mappings":"6EAAAA,EAAOC,QAAU,IAA0B,wC,gECA3CD,EAAOC,QAAU,IAA0B,wC,oBCA3CD,EAAOC,QAAU,IAA0B,wC,oBCA3CD,EAAOC,QAAU,IAA0B,wC,oBCA3CD,EAAOC,QAAU,IAA0B,wC,yKCoB7B,SAAUC,EAAaC,GACnC,MAAM,MAAEC,GAAUD,GAEXE,EAAcC,GAAmB,mBAAS,IAC1CC,EAAQC,GAAa,oBAAS,IAC9BC,GAAU,cACXC,EAAM,YAAMD,IAEXE,EAAWC,GAAe,wBAC/B,CACEC,QAAS,EACTC,MAAM,EACNJ,MACAK,OAAQ,CACNC,QAAS,IAEX,aAAaC,GACXX,EAAgBW,EAAOC,MAAMC,QAAQC,MAEvC,UACEZ,GAAU,KAGd,CACES,IACE,IAAII,EACAC,GAAY,EAChB,SAASC,IACPC,aAAaH,GAEf,SAASI,IACPD,aAAaH,GACTC,IACJD,EAAUK,WAAW,KACnBT,EAAOU,QACN,MAELV,EAAOW,GAAG,UAAW,KACnBX,EAAOY,UAAUC,iBAAiB,YAAa,KAC7CR,GAAY,EACZC,MAEFN,EAAOY,UAAUC,iBAAiB,WAAY,KAC5CR,GAAY,EACZG,MAEFA,MAEFR,EAAOW,GAAG,cAAeL,GACzBN,EAAOW,GAAG,iBAAkBH,GAC5BR,EAAOW,GAAG,UAAWH,MAmB3B,OACE,gCACGrB,GAASA,EAAM2B,OAAS,GACvB,uBAAKC,UAAU,gBACb,gBAAC,IAAS,CAACC,GAAG,sBACZ,sBAAID,UAAU,wBAEhB,uBAAKA,UAAU,mCACb,uBAAKE,IAAKvB,EAAWqB,UAAU,qCAC5B5B,EAAM+B,IAAI,CAACC,EAAMC,IAChB,uBAAKL,UAAU,gDACb,uBACEM,IAAK,gBAAeD,EAAQ,GAC5BL,UAAU,qBACV,uBACEO,IAAKH,EAAKI,MACVR,UAAU,0BACVS,IAAK,eAAeJ,EAAQ,iBAE9B,uBAAKL,UAAU,kCACb,gBAAC,IAAS,CAACC,GAAIG,EAAKM,aAClB,qBAAGV,UAAU,mCAEf,gBAAC,IAAS,CAACC,GAAIG,EAAKO,MAClB,wBAAMX,UAAU,iCAO3BzB,GAAUK,EAAYgC,SACrB,uBAAKZ,UAAU,oCACb,gBAACa,EAAK,CACJC,UAAWpC,EAAM,QAAU,OAC3BqC,QAhDdC,I,MAEAA,EAAMC,kBACa,QAAnB,EAAArC,EAAYgC,eAAO,SAAEM,QA8CPC,SAA2B,IAAjB9C,IAGZ,uBAAK2B,UAAU,8BACZ,IACIoB,MACDxC,EAAYgC,QAAQ1B,MAAMC,QAAQJ,OAAOgB,QACzCsB,QACFlB,IAAImB,GAEF,0BACEhB,IAAKgB,EACLP,QAAS,K,MACY,QAAnB,EAAAnC,EAAYgC,eAAO,SAAEW,UAAUD,IAEjCtB,UACE,6BACC3B,IAAiBiD,EAAM,UAAY,QAM9C,gBAACT,EAAK,CACJC,UAAWpC,EAAM,OAAS,QAC1BqC,QAnEdC,I,MAEAA,EAAMC,kBACa,QAAnB,EAAArC,EAAYgC,eAAO,SAAEjB,QAiEPwB,SACE9C,IACAO,EAAYgC,QAAQ1B,MAAMC,QAAQJ,OAAOgB,OAAS,QAkBtE,SAASc,EAAM1C,GACb,MAAM,QAAE4C,EAAF,SAAWI,EAAX,UAAqBL,GAAc3C,EAEzC,OACE,uBACE4C,QAASA,EACTf,UAAW,SAASmB,EACpBK,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,MAAM,8BACS,SAAdd,GACC,wBACEe,EAAE,gCACFC,OAAO,UAAS,eACH,IAAG,iBACD,QAAO,kBACN,UAGL,UAAdhB,GACC,wBACEe,EAAE,+BACFC,OAAO,UAAS,eACH,IAAG,iBACD,QAAO,kBACN,W,4CC/K1B,MAIMC,EAAkD,CACtD,CACEvB,MANmB,EAAQ,KAO3BE,YAAa,sCACbC,KAAM,gCAER,CACEH,MAVoB,EAAQ,KAW5BE,YAAa,uCACbC,KAAM,iCAER,CACEH,MAdmB,EAAQ,KAe3BE,YAAa,sCACbC,KAAM,iCAII,SAAUqB,EAAS7D,GAC/B,MAAM8D,EAAW,iBAAuB,MAClCC,EAAU,cACVC,EAAmB,YAAU,IAAUC,QAAQC,KAE/CC,EAAaC,QAAQL,GAE3B,oBAAU,KACa,UAAjBM,SAASC,OACXR,EAASrB,QAAQ8B,gBAAe,GAChCC,OAAOC,SAAS,GAAI,MAGtB,MACMC,EAAM,IAAIC,IAAIH,OAAOH,SAASO,MAC9BC,EAAmBH,EAAII,aAAaC,IAFrB,cAGjBF,IACFb,EAAiBa,GACjBH,EAAII,aAAaE,OALE,cAMnBR,OAAOS,QAAQC,aAAa,GAAI,GAAIR,EAAIS,cAEzC,IAEH,MA2BMC,EAAe,EAAGC,aACtB,gBAAC,IAAS,CAACvD,GAAG,mBACZ,0BACED,UAAU,kBACVe,QACEuB,EACI,IArBYmB,KACtB,YACE,IAAYC,gBACZ,IAAiBC,aACjB,kCACEF,EAAS,UAAY,sBAAsBvB,EAAQ0B,sBAIvD,MAAM,QAAER,GAAYjF,EACpBiF,EAAQS,KAAK,WAWGC,EAAe,GACrB,IAlCaC,KACvB,YACE,IAAYC,eACZ,IAAiBL,aACjB,sDAAwDI,GAG1D,MAAME,EAAOC,SAASC,cAAc,KACpCF,EAAKlB,KAAO,YAAS,WACrBkB,EAAKG,SAyBWC,CAAgBb,MAMlC,OACE,uBAAKxD,UAAU,QACb,uBAAKA,UAAU,yBACb,uBAAKA,UAAU,2BACb,uBAAKA,UAAU,cACb,gBAAC,IAAS,CAACC,GAAG,sBACZ,sBAAID,UAAU,yBAGhB,gBAAC,IAAS,CAACC,GAAG,gCACZ,qBAAGD,UAAU,+BAGf,uBAAKA,UAAU,qBACb,gBAACuD,EAAY,CAACC,QAAS,MAI3B,uBAAKxD,UAAU,eACb,uBAAKA,UAAU,iBACb,gBAAC,IAAW,CACV6C,IAAI,8CACJyB,UAAQ,EACR9C,MAAM,OACNC,OAAO,UAIX,gBAAC,IAAS,CAACxB,GAAG,iBACZ,qBAAGD,UAAU,uBAKnB,uBAAKA,UAAU,iBACb,uBACEA,UAAU,aACVO,IAAK,EAAQ,KACbE,IAAI,kBAKV,uBAAKT,UAAU,2BACb,uBAAKA,UAAU,iBACb,uBAAKA,UAAU,cACb,uBAAKA,UAAU,iBACb,uBAAKA,UAAU,WACb,uBAAKA,UAAU,qBACb,gBAAC,IAAc,MAEf,gBAAC,IAAS,CAACC,GAAG,gBACZ,qBAAGD,UAAU,YAIjB,uBAAKA,UAAU,2BACb,sBAAIA,UAAU,kBACZ,0BACE,gBAAC,IAAS,CAACC,GAAG,kBACZ,wBAAMD,UAAU,mBAGpB,0BACE,gBAAC,IAAS,CAACC,GAAG,kBACZ,wBAAMD,UAAU,mBAGpB,0BACE,gBAAC,IAAS,CACRC,GAAG,iBACHsE,KAAM,CAAEC,MAAO,MACf,wBAAMxE,UAAU,mBAGpB,0BACE,gBAAC,IAAS,CAACC,GAAG,kBACZ,wBAAMD,UAAU,mBAGpB,0BACE,gBAAC,IAAS,CAACC,GAAG,iBAAiBwE,MAAO,CAAEC,EAAG,4BACzC,wBAAM1E,UAAU,sBAO1B,2BACE,uBAAKA,UAAU,qBACb,gBAAC,IAAU,MAEX,gBAAC,IAAS,CAACC,GAAG,6BACZ,qBAAGD,UAAU,YAIjB,uBAAKA,UAAU,2BACb,gBAAC,IAAS,CAACC,GAAG,8BACZ,qBAAGD,UAAU,kBAEf,gBAAC,IAAS,CAACC,GAAG,sBACZ,qBAAGD,UAAU,qBAMrB,uBAAKA,UAAU,qBACb,gBAACuD,EAAY,CAACC,QAAS,QAM/B,gBAACtF,EAAY,CAACE,MAAO2D,IAErB,uBACE7B,IAAK+B,EACLjC,UAAU,mDACV,uBAAKA,UAAU,yCACb,2BACE,uBAAKA,UAAU,mBACb,gBAAC,IAAS,CAACC,GAAG,oBACZ,sBAAID,UAAU,iBAIlB,uBAAKA,UAAU,2BACb,gBAAC,IAAS,CAACC,GAAG,yBACZ,qBAAGD,UAAU,kBAGf,gBAAC,IAAS,CACRC,GAAG,2BACHwE,MAAO,CACLE,QACE,qBACEC,OAAO,SACPxF,IAAI,sBACJ2D,KAAM,IAAK8B,aAIjB,qBAAG7E,UAAU,wBAGf,gBAAC,IAAS,CAACC,GAAG,yBACZ,qBAAGD,UAAU,wBAGf,gBAAC,IAAS,CAACC,GAAG,gCACZ,qBAAGD,UAAU,wBAGf,gBAAC,IAAS,CAACC,GAAG,uBAAuBwE,MAAO,CAAEC,EAAG,4BAC/C,qBAAG1E,UAAU,mBAIjB,uBAAKA,UAAU,qBACb,gBAACuD,EAAY,CAACC,QAAS,MAI3B,uBAAKxD,UAAU,iBACb,uBACEO,IAAK,EAAQ,KACbE,IAAI,8BAKV,uBAAKT,UAAU,2BACb,gBAAC,IAAS,CAACC,GAAG,iCACZ,2BAEF,gBAAC,IAAS,CAACA,GAAG,iBACZ,qBACED,UAAU,WACV4E,OAAO,SACP7B,KAAM,UAAU","file":"6.js?id=65b8232d307a59820327","sourcesContent":["module.exports = __webpack_public_path__ + \"400bdb8dbdbf8d97a5f0e9d20ff2eae1.svg\";","module.exports = __webpack_public_path__ + \"80069d3b5ef6a05f44bdeab127831015.png\";","module.exports = __webpack_public_path__ + \"0443be5afe00d31d4c4774fc763be39c.png\";","module.exports = __webpack_public_path__ + \"4bb005cfaf2d8cfe921b878ded6431c5.png\";","module.exports = __webpack_public_path__ + \"06bbd98de00d3f91d565477bee3b30ca.png\";","import * as React from 'react';\nimport { Localized } from '@fluent/react';\nimport { useState } from 'react';\nimport { useKeenSlider } from 'keen-slider/react';\n\nimport { isRTL, useLocale } from '../../../locale-helpers';\n\nimport './testimonials.css';\nimport 'keen-slider/keen-slider.min.css';\n\nexport interface TestimonialsCardData {\n  photo: string;\n  testimonial: string;\n  name: string;\n}\n\ninterface TestimonialsProps {\n  cards: TestimonialsCardData[];\n}\n\nexport default function Testimonials(props: TestimonialsProps) {\n  const { cards } = props;\n\n  const [currentSlide, setCurrentSlide] = useState(0);\n  const [loaded, setLoaded] = useState(false);\n  const [locale] = useLocale();\n  const rtl = isRTL(locale);\n\n  const [sliderRef, instanceRef] = useKeenSlider<HTMLDivElement>(\n    {\n      initial: 0,\n      loop: true,\n      rtl,\n      slides: {\n        spacing: 20,\n      },\n      slideChanged(slider) {\n        setCurrentSlide(slider.track.details.rel);\n      },\n      created() {\n        setLoaded(true);\n      },\n    },\n    [\n      slider => {\n        let timeout: ReturnType<typeof setTimeout>;\n        let mouseOver = false;\n        function clearNextTimeout() {\n          clearTimeout(timeout);\n        }\n        function nextTimeout() {\n          clearTimeout(timeout);\n          if (mouseOver) return;\n          timeout = setTimeout(() => {\n            slider.next();\n          }, 5000);\n        }\n        slider.on('created', () => {\n          slider.container.addEventListener('mouseover', () => {\n            mouseOver = true;\n            clearNextTimeout();\n          });\n          slider.container.addEventListener('mouseout', () => {\n            mouseOver = false;\n            nextTimeout();\n          });\n          nextTimeout();\n        });\n        slider.on('dragStarted', clearNextTimeout);\n        slider.on('animationEnded', nextTimeout);\n        slider.on('updated', nextTimeout);\n      },\n    ]\n  );\n\n  const prevArrowClick = (\n    event: React.MouseEvent<SVGSVGElement, MouseEvent>\n  ) => {\n    event.stopPropagation();\n    instanceRef.current?.prev();\n  };\n\n  const nextArrowClick = (\n    event: React.MouseEvent<SVGSVGElement, MouseEvent>\n  ) => {\n    event.stopPropagation();\n    instanceRef.current?.next();\n  };\n\n  return (\n    <>\n      {cards && cards.length > 0 && (\n        <div className=\"testimonials\">\n          <Localized id=\"testimonials-title\">\n            <h1 className=\"testimonials-title\" />\n          </Localized>\n          <div className=\"testimonials-carousel-container\">\n            <div ref={sliderRef} className=\"keen-slider testimonials-carousel\">\n              {cards.map((data, index) => (\n                <div className=\"keen-slider__slide testimonials-card-wrapper\">\n                  <div\n                    key={`testimonial-${index + 1}`}\n                    className=\"testimonials-card\">\n                    <img\n                      src={data.photo}\n                      className=\"testimonials-card-photo\"\n                      alt={`testimonial-${index + 1}-user-photo`}\n                    />\n                    <div className=\"testimonials-card-data-wrapper\">\n                      <Localized id={data.testimonial}>\n                        <p className=\"testimonials-card-testimonial\" />\n                      </Localized>\n                      <Localized id={data.name}>\n                        <span className=\"testimonials-card-user\" />\n                      </Localized>\n                    </div>\n                  </div>\n                </div>\n              ))}\n            </div>\n            {loaded && instanceRef.current && (\n              <div className=\"testimonials-carousel-controller\">\n                <Arrow\n                  direction={rtl ? 'right' : 'left'}\n                  onClick={prevArrowClick}\n                  disabled={currentSlide === 0}\n                />\n\n                <div className=\"testimonials-carousel-dots\">\n                  {[\n                    ...Array(\n                      instanceRef.current.track.details.slides.length\n                    ).keys(),\n                  ].map(idx => {\n                    return (\n                      <button\n                        key={idx}\n                        onClick={() => {\n                          instanceRef.current?.moveToIdx(idx);\n                        }}\n                        className={\n                          'testimonials-carousel-dot' +\n                          (currentSlide === idx ? ' active' : '')\n                        }></button>\n                    );\n                  })}\n                </div>\n\n                <Arrow\n                  direction={rtl ? 'left' : 'right'}\n                  onClick={nextArrowClick}\n                  disabled={\n                    currentSlide ===\n                    instanceRef.current.track.details.slides.length - 1\n                  }\n                />\n              </div>\n            )}\n          </div>\n        </div>\n      )}\n    </>\n  );\n}\n\ninterface ArrowProps {\n  onClick: (e: React.MouseEvent<SVGSVGElement, MouseEvent>) => any;\n  disabled: boolean;\n  direction: 'left' | 'right';\n}\n\nfunction Arrow(props: ArrowProps) {\n  const { onClick, disabled, direction } = props;\n\n  return (\n    <svg\n      onClick={onClick}\n      className={`arrow ${disabled}`}\n      width=\"20\"\n      height=\"34\"\n      viewBox=\"0 0 20 34\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\">\n      {direction === 'left' && (\n        <path\n          d=\"M17.25 2.5L2.75 17L17.25 31.5\"\n          stroke=\"#2F84D3\"\n          stroke-width=\"5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      )}\n      {direction === 'right' && (\n        <path\n          d=\"M2.75 31.5L17.25 17L2.75 2.5\"\n          stroke=\"#2F84D3\"\n          stroke-width=\"5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      )}\n    </svg>\n  );\n}\n","import { Localized } from '@fluent/react';\nimport { authPath } from '../../../utility';\nimport ReactPlayer from 'react-player';\nimport * as React from 'react';\nimport { useEffect, useRef } from 'react';\nimport { MicrophoneIcon, PeopleIcon } from '../../ui/icons';\n\nimport URLS from '../../../urls';\nimport Testimonials, {\n  TestimonialsCardData,\n} from './testimonials/testimonials';\n\nimport { useAccount, useAction } from '../../../hooks/store-hooks';\nimport {\n  trackGoogleAnalyticsEvent,\n  EVENT_CATEGORIES,\n  EVENT_NAMES,\n} from '../../../services/ga-event-tracker';\n\nimport './home.css';\nimport { RECORDINGS_GOAL, SUPPORT_EMAIL } from '../../../constants';\nimport { PhraseSet } from '../../../stores/phrase_set';\n\nconst FirstUserPhoto = require('./images/first-user-photo.png');\nconst SecondUserPhoto = require('./images/second-user-photo.png');\nconst ThirdUserPhoto = require('./images/third-user-photo.png');\n\nconst TESTIMONIALS_CARDS_DATA: TestimonialsCardData[] = [\n  {\n    photo: FirstUserPhoto,\n    testimonial: 'testimonials-first-user-testimonial',\n    name: 'testimonials-first-user-name',\n  },\n  {\n    photo: SecondUserPhoto,\n    testimonial: 'testimonials-second-user-testimonial',\n    name: 'testimonials-second-user-name',\n  },\n  {\n    photo: ThirdUserPhoto,\n    testimonial: 'testimonials-third-user-testimonial',\n    name: 'testimonials-third-user-name',\n  },\n];\n\nexport default function HomePage(props: { history: any }) {\n  const statsRef = useRef<HTMLDivElement>(null);\n  const account = useAccount();\n  const setInitPhraseSet = useAction(PhraseSet.actions.set);\n\n  const hasAccount = Boolean(account);\n\n  useEffect(() => {\n    if (location.hash == '#stats') {\n      statsRef.current.scrollIntoView(true);\n      window.scrollBy(0, -130);\n    }\n\n    const phraseSetKey = 'phrase_set';\n    const url = new URL(window.location.href);\n    const phraseSetFromUrl = url.searchParams.get(phraseSetKey);\n    if (phraseSetFromUrl) {\n      setInitPhraseSet(phraseSetFromUrl);\n      url.searchParams.delete(phraseSetKey);\n      window.history.replaceState({}, '', url.toString());\n    }\n  }, []);\n\n  const createAnAccount = (sectionNumber: number) => {\n    trackGoogleAnalyticsEvent(\n      EVENT_NAMES.CREATE_ACCOUNT,\n      EVENT_CATEGORIES.BUTTON_USAGE,\n      'Create account button click on Home page, section #' + sectionNumber\n    );\n\n    const link = document.createElement('a');\n    link.href = authPath('/signup');\n    link.click();\n  };\n\n  const startRecording = (isAnon: boolean) => {\n    trackGoogleAnalyticsEvent(\n      EVENT_NAMES.START_RECORDING,\n      EVENT_CATEGORIES.BUTTON_USAGE,\n      `Start recording button clicked ${\n        isAnon ? 'by anon' : `by registered user ${account.email}`\n      } on Home page`\n    );\n\n    const { history } = props;\n    history.push('/speak');\n  };\n\n  // Same call to action everywhere: record. Signed-in visitors go straight to\n  // the recording screen, everyone else signs up first.\n  const RecordButton = ({ section }: { section: number }) => (\n    <Localized id=\"start-recording\">\n      <button\n        className=\"btn btn-primary\"\n        onClick={\n          hasAccount\n            ? () => startRecording(false)\n            : () => createAnAccount(section)\n        }\n      />\n    </Localized>\n  );\n\n  return (\n    <div className=\"home\">\n      <div className=\"first-section-wrapper\">\n        <div className=\"first-section-container\">\n          <div className=\"first-item\">\n            <Localized id=\"record-your-speech\">\n              <h1 className=\"first-section-title\" />\n            </Localized>\n\n            <Localized id=\"experience-customized-speech\">\n              <p className=\"first-section-description\" />\n            </Localized>\n\n            <div className=\"buttons-container\">\n              <RecordButton section={1} />\n            </div>\n          </div>\n\n          <div className=\"second-item\">\n            <div className=\"video-wrapper\">\n              <ReactPlayer\n                url=\"https://www.youtube.com/watch?v=o_Dlnm61WMs\"\n                controls\n                width=\"100%\"\n                height=\"100%\"\n              />\n            </div>\n\n            <Localized id=\"michael-using\">\n              <p className=\"img-description\" />\n            </Localized>\n          </div>\n        </div>\n\n        <div className=\"img-container\">\n          <img\n            className=\"sound-wave\"\n            src={require('../../../../img/sound-waves-brand-colors-flattened.svg')}\n            alt=\"Sound waves\"\n          />\n        </div>\n      </div>\n\n      <div className=\"third-section-container\">\n        <div className=\"third-section\">\n          <div className=\"modal-info\">\n            <div className=\"icons-section\">\n              <div className=\"section\">\n                <div className=\"icon-section mb-8\">\n                  <MicrophoneIcon />\n\n                  <Localized id=\"how-it-works\">\n                    <p className=\"title\" />\n                  </Localized>\n                </div>\n\n                <div className=\"home-subtitle-container\">\n                  <ol className=\"list-container\">\n                    <li>\n                      <Localized id=\"how-it-works-1\">\n                        <span className=\"regular-text\" />\n                      </Localized>\n                    </li>\n                    <li>\n                      <Localized id=\"how-it-works-2\">\n                        <span className=\"regular-text\" />\n                      </Localized>\n                    </li>\n                    <li>\n                      <Localized\n                        id=\"how-it-works-3\"\n                        vars={{ count: RECORDINGS_GOAL }}>\n                        <span className=\"regular-text\" />\n                      </Localized>\n                    </li>\n                    <li>\n                      <Localized id=\"how-it-works-4\">\n                        <span className=\"regular-text\" />\n                      </Localized>\n                    </li>\n                    <li>\n                      <Localized id=\"how-it-works-5\" elems={{ b: <b /> }}>\n                        <span className=\"regular-text\" />\n                      </Localized>\n                    </li>\n                  </ol>\n                </div>\n              </div>\n\n              <div>\n                <div className=\"icon-section mb-8\">\n                  <PeopleIcon />\n\n                  <Localized id=\"participants-who-complete\">\n                    <p className=\"title\" />\n                  </Localized>\n                </div>\n\n                <div className=\"home-subtitle-container\">\n                  <Localized id=\"any-native-english-speaker\">\n                    <p className=\"regular-text\" />\n                  </Localized>\n                  <Localized id=\"participation-list\">\n                    <p className=\"regular-text\" />\n                  </Localized>\n                </div>\n              </div>\n            </div>\n\n            <div className=\"buttons-container\">\n              <RecordButton section={2} />\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <Testimonials cards={TESTIMONIALS_CARDS_DATA} />\n\n      <div\n        ref={statsRef}\n        className=\"second-section-container dirty-white-background\">\n        <div className=\"second-section dirty-white-background\">\n          <div>\n            <div className=\"title-container\">\n              <Localized id=\"project-ensemble\">\n                <h2 className=\"home-title\" />\n              </Localized>\n            </div>\n\n            <div className=\"home-subtitle-container\">\n              <Localized id=\"ensemble-is-community\">\n                <p className=\"regular-text\" />\n              </Localized>\n\n              <Localized\n                id=\"the-current-voiceitt-app\"\n                elems={{\n                  appLink: (\n                    <a\n                      target=\"_blank\"\n                      rel=\"noopener noreferrer\"\n                      href={URLS.APP_LINK}\n                    />\n                  ),\n                }}>\n                <p className=\"regular-text mb-32\" />\n              </Localized>\n\n              <Localized id=\"our-vision-is-empower\">\n                <p className=\"regular-text mb-32\" />\n              </Localized>\n\n              <Localized id=\"collecting-hebrew-recordings\">\n                <p className=\"regular-text mb-32\" />\n              </Localized>\n\n              <Localized id=\"your-voice-has-power\" elems={{ b: <b /> }}>\n                <p className=\"regular-text\" />\n              </Localized>\n            </div>\n\n            <div className=\"buttons-container\">\n              <RecordButton section={3} />\n            </div>\n          </div>\n\n          <div className=\"img-container\">\n            <img\n              src={require('./images/users-standing-together.png')}\n              alt=\"Users standing together\"\n            />\n          </div>\n        </div>\n\n        <div className=\"join-ensemble-container\">\n          <Localized id=\"unsure-about-joining-ensemble\">\n            <p />\n          </Localized>\n          <Localized id=\"support-email\">\n            <a\n              className=\"reach-us\"\n              target=\"_blank\"\n              href={`mailto:${SUPPORT_EMAIL}`}\n            />\n          </Localized>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"sourceRoot":""}