{"version":3,"sources":["webpack://grundium-ltd-website/./src/components/BookDemo.js","webpack://grundium-ltd-website/./src/components/VideoButton.js","webpack://grundium-ltd-website/./src/components/testimonials/Testimonial.js","webpack://grundium-ltd-website/./src/pages/scanners.js"],"names":["props","title","text","cta","className","to","Modal","React","modalIsOpen","setModalIsOpen","type","onClick","children","style","marginBottom","isOpen","onRequestClose","contentLabel","overlayClassName","src","youtubeId","frameBorder","allow","allowFullScreen","testimonials","useStaticQuery","allStrapiTestimonials","nodes","id","res","i","length","strapiId","getIndexByStrapiId","selected","randomInteger","activeItem","setActiveItem","filter","item","index","map","testimonial","key","classNames","quotesImg","alt","image","authorImage","childImageSharp","gatsbyImageData","authorName","authorCompany","authorPosition","PageScanners","data","page","strapiPageScanners","info","subtitle","products","allStrapiProducts","bookDemo","seo","description","undefined","heroImage","source","introText","escapeHtml","features","feature","data-sal","icon","publicURL","name","product","slug","data-sal-duration","G","imageAlt2","descriptionShort","videoCodeOverview","buttonText","desc"],"mappings":"yJAuBA,IAnBiB,SAACA,GAAW,IAEpBC,EAAoBD,EAApBC,MAAOC,EAAaF,EAAbE,KAAMC,EAAOH,EAAPG,IAEpB,OAAO,2BAASC,UAAU,4BAClB,0BAAQA,UAAU,sBAChB,sBAAIA,UAAU,IAAIH,GAAS,oBAC3B,qBAAGG,UAAU,OACZF,GAAQ,ucAGT,gBAAC,KAAD,CAAMG,GAAG,QAAQD,UAAU,+BACvBD,GAAO,sB,4ECPvBG,kBAAoB,cA6CpB,IA3CoB,SAACN,GAAW,IAAD,EACOO,YAAe,GAA9CC,EADwB,KACXC,EADW,KAE7B,OACA,uBAAKL,UAAWJ,EAAMI,WAA4B,SAAfJ,EAAMU,KAAkB,MAAQ,SAEhD,SAAfV,EAAMU,MAAmB,0BACzBN,UAAU,uBACVO,QAAS,kBAAIF,GAAe,KAC1BT,EAAMY,UAGO,SAAfZ,EAAMU,MAAmB,0BACvBN,UAAU,8BACVO,QAAS,kBAAIF,GAAe,KAC3B,4BAAOT,EAAMY,UAHS,IAGQ,gBAAC,MAAD,CAAcC,MAAO,CAACC,cAAe,MAExE,gBAAC,IAAD,CACEC,OAAQP,EACRQ,eAAgB,kBAAIP,GAAe,IACnCQ,aAAa,gBACbb,UAAU,mBACVc,iBAAiB,kCAEjB,uBAAKd,UAAU,sBACb,0BACAe,IAAK,iCAAiCnB,EAAMoB,UAC5CnB,MAAM,gBACNoB,YAAY,IACZC,MAAM,2FACNC,iBAAe,IAEf,0BAAQnB,UAAU,kBAAkBO,QAAS,kBAAIF,GAAe,KAC9D,gBAAC,MAAD,Y,qHC4DV,IA1FoB,SAACT,GAAW,IAEIwB,GAC9BC,QAAe,aADjBC,sBAAyBC,MAFE,EA4BKpB,WAElC,SAA4BqB,GAE1B,IADA,IAAIC,EAAM,EACDC,EAAE,EAAGA,EAAEN,EAAaO,OAAQD,IACnC,GAAIN,EAAaM,GAAGE,WAAaJ,EAAI,CACnCC,EAAMC,EACN,MAGJ,OAAOD,EAVwCI,CAAmBjC,EAAMkC,YAAaC,QAAc,EAAGX,EAAaO,OAAO,IAAvHK,EA5BwB,KA4BZC,EA5BY,KAmD7B,OACE,uBAAKjC,UAAW,+BAAiCJ,EAAMI,UAAYJ,EAAMI,UAAY,KAEhFoB,EAAac,QAAO,SAACC,EAAMC,GAAP,OAAgBA,IAAUJ,KAAYK,KAAI,SAACC,GAC9D,OACE,2BAASC,IAAKD,EAAYd,GAAIxB,UAAWwC,IAAW,uBAAwB,yBAGxE,uBAAKxC,UAAU,6BACb,uBAAKA,UAAU,kCACf,uBAAKA,UAAU,oCAAmC,uBAAKe,IAAK0B,IAAWC,IAAI,YACxEJ,EAAYxC,MAEf,uBAAKE,UAAU,qCACX,gBAAC,KAAD,CAASuC,IAAKD,EAAYd,GAAImB,MAAOL,EAAYM,YAAYC,gBAAgBC,gBAAiB9C,UAAU,oCAExG,uBAAKA,UAAU,qCACb,uBAAKA,UAAU,oCACb,wBAAMA,UAAU,0CAAhB,MACA,yBAAIsC,EAAYS,aAElB,uBAAK/C,UAAU,gCACb,4BAAOsC,EAAYU,eADrB,IAGE,2BAAOV,EAAYW,uBAQrC,gBAAC,MAAD,CAAgBjD,UAAU,6CAA6CO,QArC7E,WACE0B,EAAcD,EAAaA,EAAa,EAAIZ,EAAaO,OAAS,MAqC9D,gBAAC,MAAD,CAAgB3B,UAAWwC,IAAW,6CAA8C,qCAAsCjC,QA3ChI,WACE0B,EAAcD,EAAaZ,EAAaO,OAAS,EAAIK,EAAa,EAAI,S,0MC1C3D,SAASkB,EAAT,GAA+B,IAARC,EAAO,EAAPA,KAC9BC,EAAOD,EAAKE,mBADyB,EAERD,EAAKE,KAAhCX,EAFmC,EAEnCA,MAAO9C,EAF4B,EAE5BA,MAAO0D,EAFqB,EAErBA,SAChBC,EAAWL,EAAKM,kBAAkBlC,MAClCmC,EAAWN,EAAKM,SAGtB,OACE,uBAAK1D,UAAU,IACf,gBAAC,IAAD,CACEH,MAAQuD,EAAKO,KAAOP,EAAKO,IAAI9D,MAASuD,EAAKO,IAAI9D,MAAQuD,EAAKvD,MAC5D+D,YAAcR,EAAKO,KAAOP,EAAKO,IAAIC,YAAeR,EAAKO,IAAIC,iBAAcC,IAEvE,gBAAC,KAAD,CAASlB,MAAOA,EAAME,gBAAgBC,gBAAiB9C,UAAU,mBACjE,gBAAC,IAAD,MAEA,uBAAKA,UAAU,iCACf,gBAAC,KAAD,CAAS2C,MAAOS,EAAKU,UAAUjB,gBAAgBC,gBAAiBrC,MAAO,CAAC,eAAkB,UAAW,mBAAsB,gBAAiB,gBAAmB,YAC3J,uBAAKT,UAAU,qDACb,uBAAKA,UAAU,gBACb,0BAAQA,UAAU,sBACd,sBAAIA,UAAU,4BAA6BH,GAC3C,uBAAKG,UAAU,6BACf,sBAAIA,UAAU,SAAUuD,QAOpC,2BAASvD,UAAU,0DACjB,uBAAKA,UAAU,8CACb,0BAAQA,UAAU,WAClB,gBAAC,IAAD,CAAe+D,OAAQX,EAAKY,UAAWC,YAAY,KAEnD,sBAAIjE,UAAU,cAAcS,MAAO,CAAE,iBAAkB,OAErD2C,EAAKc,SAAS7B,KAAI,SAAC8B,EAASzC,GAC1B,OACE,sBAAIa,IAAK4B,EAAQ3C,GAAIxB,UAAW,iEAAiE0B,EAAE,GAAI0C,WAAS,YAChH,uBACIrD,IAAKoD,EAAQE,KAAKC,UAClB5B,IAAKyB,EAAQI,KACbvE,UAAU,oBACVoE,WAAS,YAEX,0BAAKD,EAAQI,aAYzB,2BAASvE,UAAU,4CACb,uBAAKA,UAAU,gCACf,0BAAQA,UAAU,WACZ,sBAAIA,UAAU,QAAd,mBACA,uBAAKA,UAAU,8BAErB,uBAAKA,UAAU,uBAEbwD,EAASnB,KAAI,SAACmC,GACZ,OACE,uBAAKjC,IAAKiC,EAAQhD,GAAIxB,UAAU,uCAC9B,gBAAC,KAAD,CAAMC,GAAI,IAAIuE,EAAQC,KACpBzE,UAAU,8CACVoE,WAAS,UAAUM,oBAAkB,QAErC,gBAAC,EAAAC,EAAD,CACEhC,MAAO6B,EAAQI,UAAU/B,gBAAgBC,gBACzCJ,IAAK8B,EAAQ3E,MACbG,UAAU,2BAEd,uBACEA,UAAU,+BACVoE,WAAS,WACTM,oBAAkB,QAElB,sBAAI1E,UAAU,2BACXwE,EAAQ3E,OAEX,uBAAKG,UAAU,yBACf,qBAAGA,UAAU,OACVwE,EAAQK,kBAEX,uBAAK7E,UAAU,4BACb,gBAAC,KAAD,CAAMC,GAAI,IAAIuE,EAAQC,KAAMzE,UAAU,uCAAtC,cAIEwE,EAAQM,mBAAqB,gBAAC,IAAD,CAAa9D,UAAWwD,EAAQM,mBAAhC,wBAc7C,2BAAS9E,UAAU,oBACjB,gBAAC,IAAD,CACEH,MAAO6D,EAAS7D,MAChBC,KAAM4D,EAAS5D,KACfC,IAAK2D,EAASqB,cAItB,2BAAS/E,UAAU,eACjB,uBAAKA,UAAU,wBACb,uBAAKA,UAAU,4BACf,sBAAIA,UAAU,qCAAqCS,MAAO,CAAE,iBAAkB,OAE5E2C,EAAKc,SAAS7B,KAAI,SAAC8B,EAASzC,GAC1B,OACE,sBAAIa,IAAK4B,EAAQ3C,GAAIxB,UAAW,iEAAiE0B,EAAE,GAAI0C,WAAS,YAC9G,0BAAKD,EAAQI,MACb,qBAAGvE,UAAU,6BACVmE,EAAQa,YAQnB,2BAAShF,UAAU,2CACjB,uBAAKA,UAAU,gCACb,gBAAC,IAAD,CAAa8B,SAAU,EAAG9B,UAAU,gBAGxC,gBAAC,IAAD","file":"component---src-pages-scanners-js-899f2beda49c4f43c9cc.js","sourcesContent":["import { Link } from \"gatsby\"\nimport React from \"react\"\n// import BookDemoButton from \"./BookDemoButton\"\n\nconst BookDemo = (props) => {\n\n  const {title, text, cta} = props;\n\n  return <section className=\"gs-sect__in gs-container\">\n          <header className=\"gs-sect-header tac\">\n            <h2 className=\"\">{title || \"Book a live demo\"}</h2>\n            <p className=\"mb2\">\n            {text || \"See the OCUS® portable digital microscope scanner in action – request your free personal online live demo now. A Grundium expert will contact you personally to schedule a suitable 30-minute demo time for you. In the demo we will answer all your questions about which Ocus® scanner fits your needs best, we will talk pricing, share stories about how others are using the scanners, and help you fast forward the digital pathology experience in your lab.\"}\n            </p>\n            {/* <BookDemoButton/> */}\n            <Link to=\"/book\" className=\"gs-button gs-color-contrast\">\n              { cta || \"Book your demo\" }\n            </Link>\n          </header>\n        </section>\n\n}\n\nexport default BookDemo\n","import React from \"react\"\nimport \"./VideoButton.css\"\n// import ModalOverlay from \"./ModalOverlay\"\nimport {\n  FaPlayCircle,\n  FaWindowClose\n} from \"react-icons/fa\"\nimport Modal from 'react-modal';\n\nModal.setAppElement('#___gatsby');\n\nconst VideoButton = (props) => {\n  let [modalIsOpen, setModalIsOpen] = React.useState(false);\n  return (\n  <div className={props.className + (props.type === \"wrap\" ? \" db\" : \" dib\")}>\n    {\n      props.type === \"wrap\" && <button\n      className=\"gs-video-button-wrap\"\n      onClick={()=>setModalIsOpen(true)}\n      >{props.children}</button>\n    }\n    {\n      props.type !== \"wrap\" && <button\n        className=\"gs-button gs-color-contrast\"\n        onClick={()=>setModalIsOpen(true)}\n        ><span>{props.children}</span> <FaPlayCircle style={{marginBottom: -1}} /></button>\n    }\n    <Modal\n      isOpen={modalIsOpen}\n      onRequestClose={()=>setModalIsOpen(false)}\n      contentLabel=\"Product video\"\n      className=\"gs-modal-content\"\n      overlayClassName=\"gs-modal gs-modal--transparent\"\n    >\n      <div className=\"gs-video-container\">\n        <iframe\n        src={\"https://www.youtube.com/embed/\"+props.youtubeId} \n        title=\"Product video\"\n        frameBorder=\"0\" \n        allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" \n        allowFullScreen>\n        </iframe>\n        <button className=\"gs-video__close\" onClick={()=>setModalIsOpen(false)}>\n          <FaWindowClose />\n        </button>\n      </div>\n    </Modal>\n    {/* <ModalOverlay active={overlayActive} onClose={()=>setOverlayActive(false)}>\n      TEST\n    </ModalOverlay> */}\n  </div>\n  )\n}\n\nexport default VideoButton\n","import \"./testimonials.css\"\nimport React from \"react\"\n// import Image from \"gatsby-image\"\nimport quotesImg from \"../../assets/img/quotes.svg\"\nimport { BgImage } from \"gbimage-bridge\"\n// import { Link } from \"gatsby\"\nimport { graphql, useStaticQuery } from \"gatsby\"\n// import SocialLinks from \"../constants/socialLinks\"\n// ...GatsbyImageSharpFluid\nimport classNames from \"classnames\";\nimport { IoIosArrowBack } from \"react-icons/io\"\nimport { randomInteger } from \"../../utils/utils\"\n\nconst Testimonial = (props) => {\n  const {\n    allStrapiTestimonials: { nodes: testimonials },\n  } = useStaticQuery(graphql`\n    {\n      allStrapiTestimonials {\n        nodes {\n          id\n          strapiId\n          text\n          authorName\n          authorImage {\n            childImageSharp {\n              gatsbyImageData(\n                width: 400\n                layout: CONSTRAINED\n                placeholder: BLURRED\n              )\n            }\n          }\n          authorPosition\n          authorCompany\n          authorCompanyUrl\n        }\n      }\n    }\n  `)\n\n  let [activeItem, setActiveItem] = React.useState(getIndexByStrapiId(props.selected) || randomInteger(0, testimonials.length-1));\n\n  function getIndexByStrapiId(id) {\n    let res = 0;\n    for (let i=0; i<testimonials.length; i++){\n      if (testimonials[i].strapiId === id) {\n        res = i; \n        break;\n      }\n    }\n    return res;\n  }\n\n  function testimonialsScrollRight() {\n    setActiveItem(activeItem < testimonials.length - 1 ? activeItem + 1 : 0);\n    // newsListRef.current.scrollBy(400, 0);\n  }\n\n  function testimonialsScrollLeft() {\n    setActiveItem(activeItem ? activeItem - 1 : testimonials.length - 1);\n    // newsListRef.current.scrollBy(-400, 0);\n  }\n\n  return (\n    <div className={\"gs-testimonials-list clean \" + (props.className ? props.className : \"\") }>\n\n        {testimonials.filter((item, index)=> index === activeItem).map((testimonial)=>{\n          return (\n            <article key={testimonial.id} className={classNames(\"gs-testimonials-item\", \"gs-animate--fadeInUp\")}>\n            {/* <BackgroundImage key={testimonial.id} fluid={testimonial.authorImage.childImageSharp.fluid} className=\"gs-testimonials-item__pic\">\n            </BackgroundImage> */}\n                <div className=\"gs-testimonials-item-text\">\n                  <div className=\"gs-testimonials-item-quote mb2\">\n                  <div className=\"gs-testimonials-item-quote__icon\"><img src={quotesImg} alt=\"Quotes\"/></div>\n                    {testimonial.text}\n                  </div>\n                  <div className=\"gs-testimonials-item-author fw300\">\n                      <BgImage key={testimonial.id} image={testimonial.authorImage.childImageSharp.gatsbyImageData} className=\"gs-testimonials-item-author-pic\">\n                      </BgImage>\n                      <div className=\"gs-testimonials-item-author__text\">\n                        <div className=\"gs-testimonials-item-author-name\">\n                          <span className=\"gs-testimonials-item-author-name__dash\">&mdash;&nbsp;</span>\n                          <b>{testimonial.authorName}</b>\n                        </div>\n                        <div className=\"gs-testimonials-item-company\">\n                          <span>{testimonial.authorCompany}</span>\n                          &nbsp;\n                          <br />{testimonial.authorPosition}\n                        </div>\n                      </div>\n                  </div>\n                </div>\n            </article>\n          );\n        })}\n        <IoIosArrowBack className=\"gs-testimonials-list-arrow gs-color-yellow\" onClick={testimonialsScrollLeft}/>\n        <IoIosArrowBack className={classNames(\"gs-testimonials-list-arrow gs-color-yellow\", \"gs-testimonials-list-arrow--right\")} onClick={testimonialsScrollRight}/>\n    </div>\n  );\n\n}\n\nexport default Testimonial\n","import React from \"react\"\nimport { Link } from \"gatsby\"\nimport { graphql } from \"gatsby\"\nimport { BgImage } from \"gbimage-bridge\"\nimport ReactMarkdown from \"react-markdown\"\nimport { GatsbyImage } from \"gatsby-plugin-image\";\nimport TopMenu from \"../components/TopMenu\"\nimport BookDemo from \"../components/BookDemo\"\nimport Footer from \"../components/Footer\"\nimport Seo from \"../components/Seo\"\nimport Testimonial from \"../components/testimonials/Testimonial\"\nimport VideoButton from \"../components/VideoButton\"\n\nexport default function PageScanners({data}) {\n  const page = data.strapiPageScanners;\n  const { image, title, subtitle } = page.info;\n  const products = data.allStrapiProducts.nodes;\n  const bookDemo = page.bookDemo;\n  // console.warn(page);\n\n  return (\n    <div className=\"\">\n    <Seo \n      title={(page.seo && page.seo.title) ? page.seo.title : page.title}\n      description={(page.seo && page.seo.description) ? page.seo.description : undefined }\n      />\n        <BgImage image={image.childImageSharp.gatsbyImageData} className=\"gs-bg-parallax\"></BgImage>\n        <TopMenu />\n\n        <div className=\"gs-page-hero gs-scanners-hero\">\n        <BgImage image={page.heroImage.childImageSharp.gatsbyImageData} style={{\"backgroundSize\": \"contain\", \"backgroundPosition\": \"center center\", \"backgroundColor\": \"#000000\" }}>\n            <div className=\"gs-page-hero__in gs-sect__in gs-scanners-hero__in\">\n              <div className=\"gs-container\">\n                <header className=\"gs-page-header tac\">\n                    <h1 className=\"gs-header-msg--mark mb05\">{ title }</h1>\n                    <div className=\"gs-products-item__hr dib\"></div>\n                    <h5 className=\"fw300\">{ subtitle }</h5>\n                </header>\n              </div>\n            </div>\n          </BgImage>\n          </div>\n\n        <section className=\"gs-solution gs-color-contrast gs-products-item gs-bg-1\">\n          <div className=\"gs-sect__in gs-container gs-container--900\">\n            <header className=\"tac mb3\">\n            <ReactMarkdown source={page.introText} escapeHtml={false}/>\n            </header>            \n            <ul className=\"gs-features\" style={{ \"--sal-duration\": \"1s\" }}>\n            {\n              page.features.map((feature, i)=>{\n                return (\n                  <li key={feature.id} className={\"gs-scanners-features-item gs-features-item gs-features-item--\"+(i+1)} data-sal=\"slide-up\">\n                  <img\n                      src={feature.icon.publicURL}\n                      alt={feature.name}\n                      className=\"gs-features__icon\"\n                      data-sal=\"zoom-in\"\n                    />\n                    <h4>{feature.name}</h4>\n                    {/* <p className=\"gs-features-item__caption\">\n                      {feature.desc}\n                    </p> */}\n                  </li>\n                )\n              })\n            }\n            </ul>\n            </div>\n        </section>\n\n        <section className=\"gs-section-angular gs-section-angular--2\">\n              <div className=\"gs-sect__in gs-container ovh\">\n              <header className=\"tac mb4\">\n                    <h2 className=\"mb05\">THE OCUS SERIES</h2>\n                    <div className=\"gs-products-item__hr dib\"></div>\n              </header>\n              <div className=\"gs-product-list jcc\">\n              {\n                products.map((product)=>{\n                  return (\n                    <div key={product.id} className=\"gs-product gs-product--vertical tac\">\n                      <Link to={\"/\"+product.slug}\n                        className=\"gs-product-pic gs-products-item-pic mb2 tac\"\n                        data-sal=\"zoom-in\" data-sal-duration=\"1000\"\n                      >\n                        <GatsbyImage\n                          image={product.imageAlt2.childImageSharp.gatsbyImageData}\n                          alt={product.title}\n                          className=\"gs-products-item__img\" />\n                      </Link>\n                      <div\n                        className=\"gs-products-item-content tac\"\n                        data-sal=\"slide-up\" \n                        data-sal-duration=\"1000\"\n                      >\n                        <h3 className=\"gs-products-item__title\">\n                          {product.title}\n                        </h3>\n                        <div className=\"gs-products-item__hr\"></div>\n                        <p className=\"mb3\">\n                          {product.descriptionShort}\n                        </p>\n                        <div className=\"gs-products-item-actions\">\n                          <Link to={\"/\"+product.slug} className=\"gs-button gs-color-contrast mr1 mb1\">\n                            Learn more\n                          </Link>\n                          {\n                            product.videoCodeOverview && <VideoButton youtubeId={product.videoCodeOverview}>WATCH VIDEO</VideoButton>\n                          }\n                        </div>\n                      </div>\n                    </div>\n                  );\n                })\n              }\n\n              </div>\n                \n              </div>\n            </section>\n\n            <article className=\"gs-products-item\">\n              <BookDemo\n                title={bookDemo.title}\n                text={bookDemo.text}\n                cta={bookDemo.buttonText}\n              />\n            </article>\n\n        <section className=\"gs-products\">\n          <div className=\"gs-bg-parallax__wrap\">\n            <div className=\"gs-sect__in gs-container\">\n            <ul className=\"gs-features gs-scanner-features--2\" style={{ \"--sal-duration\": \"1s\" }}>\n            {\n              page.features.map((feature, i)=>{\n                return (\n                  <li key={feature.id} className={\"gs-scanners-features-item gs-features-item gs-features-item--\"+(i+1)} data-sal=\"slide-up\">\n                    <h4>{feature.name}</h4>\n                    <p className=\"gs-features-item__caption\">\n                      {feature.desc}\n                    </p>\n                  </li>\n                )\n              })\n            }\n            </ul>\n            </div>\n            <article className=\"gs-products-item gs-products-item--last\">\n              <div className=\"gs-sect__in gs-container ovh\">\n                <Testimonial selected={7} className=\"clean mb2\"></Testimonial>\n              </div>\n            </article>\n            <Footer/>\n          </div>\n        </section>\n      </div>\n  );\n}\n\nexport const query = graphql`\n  {\n    allStrapiProducts(filter: { active: { eq: true } }) {\n      nodes {\n        id\n        imageAlt2 {\n          childImageSharp {\n            gatsbyImageData(\n              width: 600\n              layout: CONSTRAINED\n              placeholder: BLURRED\n            )\n          }\n        }\n        subtitle\n        slug\n        title\n        descriptionShort\n        videoCodeOverview\n      }\n    }\n    strapiPageScanners {\n      id\n      seo {\n        title\n        description\n      }\n      info {\n        title\n        subtitle\n        slug\n        image {\n          childImageSharp {\n            gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED)\n          }\n        }\n      }\n      introText\n      heroImage {\n        childImageSharp {\n          gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED)\n        }\n      }\n      features {\n        id\n        desc\n        name\n        icon {\n          publicURL\n        }\n      }\n      bookDemo {\n        title\n        text\n        buttonText\n      }\n    }\n  }\n`"],"sourceRoot":""}