{"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/ocus20.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","ProductOcus20","data","strapiProducts","subtitle","descriptionShort","description","imageAlt1","imagePack","features","scans","SEO","videoCodeOverview","videoCodeUnboxing","bookDemo","G","feature","data-box","icon","publicURL","name","desc","source","linkTarget","Boolean","scan","href","link","target","rel","getSrc","thumbNail","buttonText"],"mappings":"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","file":"component---src-pages-ocus-20-js-e5ef1944c7213fbd1ebf.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 ReactMarkdown from \"react-markdown\"\nimport { BgImage } from \"gbimage-bridge\"\nimport { graphql, Link } from \"gatsby\"\nimport { GatsbyImage, getSrc } from \"gatsby-plugin-image\";\n// import { Link } from \"gatsby\"\nimport TopMenu from \"../components/TopMenu\"\nimport BookDemo from \"../components/BookDemo\"\nimport Footer from \"../components/Footer\"\nimport {\n  MdZoomIn,\n} from \"react-icons/md\"\nimport Seo from \"../components/Seo\"\nimport Testimonial from \"../components/testimonials/Testimonial\"\n// import BookDemoButton from \"../components/BookDemoButton\"\nimport VideoButton from \"../components/VideoButton\"\n\n// import LayoutGeneric from \"../components/LayoutGeneric\"\n\nexport default function ProductOcus20({data}) {\n  // let [state, setState] = React.useState({ selectedFeature: 0 });\n\n  const { \n    image, title, subtitle, descriptionShort, description, \n    imageAlt1, imagePack, features, scans, SEO, \n    videoCodeOverview, videoCodeUnboxing, bookDemo\n  } = data.strapiProducts;\n  // console.log(data);\n\n  // function prodFeatureClick(num){\n  //   setState({ selectedFeature: num });\n  //   // console.log(num);\n  // }\n\n  return (\n    <div className=\"\">\n      <Seo \n      title={(SEO && SEO.title) ? SEO.title : title}\n      description={(SEO && SEO.description) ? SEO.description : descriptionShort}\n      />\n      <BgImage image={image.childImageSharp.gatsbyImageData} className=\"gs-bg-parallax\"></BgImage>\n      <TopMenu/>\n      <div className=\"gs-page\">\n\n        <div className=\"gs-bg-parallax__wrap\">\n\n          \n        <div className=\"gs-prod-hero\">\n            <div className=\"gs-prod-features\">\n              <div className=\"gs-sect__in gs-container\">\n                <div className=\"gs-prod-hero-columns\">\n                  <header className=\"gs-prod-header\">\n                      <h1 className=\"gs-header-msg--mark\">{title}</h1>\n                      <div className=\"gs-products-item__hr\"></div>\n                      <h3 className=\"fw300\">{subtitle}</h3>\n                    <p className=\"mb2\">{descriptionShort}</p>\n                    {/* <BookDemoButton className=\"mrb1\"/> */}\n                    <Link to=\"/book\" className=\"gs-button gs-color-contrast mr1 mb1\">\n                      Book a demo\n                    </Link>\n                    {\n                      videoCodeOverview && <VideoButton youtubeId={videoCodeOverview}>WATCH VIDEO</VideoButton>\n                    }\n                  </header>\n    \n                  <div className=\"gs-prod-features-device\">\n                    <div className=\"gs-prod-features-device__shadow gs-prod-features-device__shadow--20\"></div>\n                    <GatsbyImage\n                      image={imageAlt1.childImageSharp.gatsbyImageData}\n                      alt=\"Grundium Ocus\"\n                      className=\"gs-prod-features-device__pic\" />\n                    {/* <Image fluid={productImage.childImageSharp.fluid} alt=\"Grundium Ocus\" className=\"gs-prod-features-device__pic\"/> */}\n    \n                    {/* {\n                      productFeatures.map((feature) => {\n                        let classes = \"gs-prod-features-point gs-prod-features-point--\"+ feature.id + (state.selectedFeature === feature.id ? \" gs-prod-features-point--active\" : \"\");\n                        return <div  key={feature.id} className={classes} onClick={() => prodFeatureClick(feature.id)}>\n                        <MdAddCircle/>\n                        </div>\n                      })\n                    } */}\n                  </div>\n                </div>\n              <div className=\"gs-prod-features-list\">\n                {\n                  features.map((feature) => {\n                    // let classes = \"gs-prod-features-box\" + (state.selectedFeature === feature.id ? \" gs-prod-features-box--active\" : \"\");\n                    // console.log(feature, classes)\n                    return( \n                    // <div key={feature.id} className={classes} data-box={feature.id} onClick={() => prodFeatureClick(feature.id)}>\n                    <div key={feature.id} className=\"gs-prod-features-box\" data-box={feature.id}>\n                      <img src={feature.icon?.publicURL} className=\"gs-prod-features-box__icon\" alt={feature.name}></img>\n                      <div className=\"gs-prod-features-box__text\">\n                      <h3 className=\"gs-prod-features-box__title\">{feature.name}</h3>\n                        <p className=\"gs-features-item__caption\">{feature.desc}</p>\n                      </div>\n                    </div>\n                    )\n                  })\n                }\n              </div>\n            </div>\n          </div>\n\n          </div>\n\n        <section className=\"gs-prod-description gs-products-item\">\n          <div className=\"gs-sect__in gs-container ovh\">\n              <div className=\"gs-page-content\">\n              <ReactMarkdown source={description} linkTarget=\"_blank\"/>\n\n              {\n                Boolean(scans.length) && (\n                  <div className=\"gs-prod-scans mb2\">\n                    <h2>SCANNED REFERENCE IMAGES</h2>\n                    <div className=\"gs-prod-scans-list\">\n                      {\n                        scans.map((scan) => {\n                          // console.log(feature, classes)\n                          return (\n                            <div key={scan.id} className=\"gs-prod-scans-item tac\">\n                              <a href={scan.link} target=\"_blank\" rel=\"noreferrer\" className=\"gs-prod-scans-item__link\">\n                                <div className=\"gs-prod-scans-item__pic\">\n                                  <MdZoomIn className=\"gs-prod-scans-item__icon\" />\n                                  <img src={getSrc(scan.thumbNail)} className=\"gs-prod-scans-item__img\"  alt={scan.name}/>\n                                </div>\n                                <h4 className=\"gs-prod-scans-item__title fw300\">{scan.name}</h4>\n                              </a>\n                            </div>\n                          );\n                        })\n                      }\n                    </div>\n                  </div>\n                  )\n                }\n\n                <h2>SALES PACKAGE CONTENT</h2>\n                <div className=\"posr\">\n                {\n                  videoCodeUnboxing && <VideoButton youtubeId={videoCodeUnboxing} className=\"gs-video-button--abs\">UNBOXING</VideoButton>\n                }\n                <GatsbyImage image={imagePack.childImageSharp.gatsbyImageData} className=\"mb1\" alt=\"Sales package content\" />\n                <div className=\"tac\">The carry-on travel case sold separately</div>\n                </div>\n              </div>\n          </div>\n        </section>\n        <section className=\"gs-products-item gs-products-item--2\">\n          <div className=\"gs-sect__in gs-container ovh\">\n            <Testimonial selected={9}></Testimonial>\n          </div>\n        </section>\n\n        <BookDemo\n          title={bookDemo.title}\n          text={bookDemo.text}\n          cta={bookDemo.buttonText}\n        />\n\n        <Footer />\n\n        </div>\n        </div>\n      </div>\n  );\n}\n\nexport const query = graphql`\n  {\n    strapiProducts(slug: { eq: \"ocus20\" }) {\n      description\n      slug\n      subtitle\n      title\n      descriptionShort\n      SEO {\n        title\n        description\n      }\n      image {\n        childImageSharp {\n          gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED)\n        }\n      }\n      imageAlt1 {\n        childImageSharp {\n          gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED)\n        }\n      }\n      imagePack {\n        childImageSharp {\n          gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED)\n        }\n      }\n      videoCodeOverview\n      videoCodeUnboxing\n      features {\n        id\n        desc\n        name\n        icon {\n          publicURL\n        }\n      }\n      scans {\n        id\n        link\n        name\n        thumbNail {\n          childImageSharp {\n            gatsbyImageData(\n              width: 270\n              placeholder: BLURRED\n              layout: CONSTRAINED\n            )\n          }\n        }\n      }\n      bookDemo {\n        title\n        text\n        buttonText\n      }\n    }\n  }\n`\n// export const query = graphql`\n//   {\n//     strapiPageOcus {\n//       slug\n//       title\n//       subtitle\n//       productFeatures {\n//         id\n//         desc\n//         name\n//         icon {\n//           publicURL\n//         }\n//       }\n//       productImage {\n//         childImageSharp {\n//           fluid(maxWidth: 2000) {\n//             ...GatsbyImageSharpFluid\n//           }\n//         }\n//       }\n//       image {\n//         childImageSharp {\n//           fluid(maxWidth: 2000) {\n//             ...GatsbyImageSharpFluid\n//           }\n//         }\n//       }\n//       heroText\n//       content\n//     }\n//   }\n// `;\n"],"sourceRoot":""}