{"version":3,"file":"static/js/303.3ce687a9.chunk.js","mappings":"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","sources":["components/Services.jsx"],"sourcesContent":["import React, { useState } from \"react\";\r\nimport { isMobile } from \"react-device-detect\";\r\nimport Box from \"@mui/material/Box\";\r\nimport Typography from \"@mui/material/Typography\";\r\nimport Modal from \"@mui/material/Modal\";\r\nimport QRCode from \"qrcode.react\";\r\nimport { Fade } from \"react-awesome-reveal\";\r\n\r\nconst style = {\r\n  position: \"absolute\",\r\n  top: \"50%\",\r\n  left: \"50%\",\r\n  transform: \"translate(-50%, -50%)\",\r\n  width: 400,\r\n  bgcolor: \"background.paper\",\r\n  border: \"0px solid #000\",\r\n  boxShadow: 24,\r\n  p: 4,\r\n};\r\n\r\nconst Services = () => {\r\n  const [open, setOpen] = useState(false);\r\n  const [qrValue, setQrValue] = useState(1);\r\n  const [url, setUrl] = useState(\"\");\r\n  const handleOpen = (props) => {\r\n    setQrValue(props.id);\r\n    setUrl(`https://vamverse.com/model/${qrValue}`);\r\n    setOpen(true);\r\n  };\r\n\r\n  const handleClose = () => setOpen(false);\r\n\r\n  const data = [\r\n    {\r\n      id: 1,\r\n      model: \"model1.glb\",\r\n      ios: \"\",\r\n      tagline: \"SERVICES\",\r\n      placement: \"floor\",\r\n      title: \"Get AR for your pre-built website\",\r\n      des: \"Get started with AR on your website with our AR solution, you can showcase your products, services, or offerings in an engaging and interactive manner. With AR, you can provide a more realistic view of your offerings and create a better customer experience.. Our integration procedures are easy to follow, and our developers offer 24-hour integration support.\",\r\n      disclaimer: \"\",\r\n    },\r\n    {\r\n      id: 2,\r\n      model: \"model2.glb\",\r\n      ios: \"model2.usdz\",\r\n      tagline: \"SERVICES\",\r\n      placement: \"wall\",\r\n      title: \"Get your AR ready website\",\r\n      des: \"A complete web development solution is available to our clients, from design to integration of augmented reality. Our team of expert developers will work with you to discover your business goals and create a unique plan to fulfill them. With our expertise in web development, we will create a website that not only looks great but functions the way it should. A solid web foundation will keep your website online, secure, and easy to navigate.\",\r\n      disclaimer: \"Place this photo frame on wall\",\r\n    },\r\n    {\r\n      id: 3,\r\n      model: \"model3.glb\",\r\n      ios: \"model3.usdz\",\r\n      placement: \"floor\",\r\n      tagline: \"SERVICES\",\r\n      title: \"Get the 360* view of your product.\",\r\n      des: \"Let your customers view the products in 360* for better understanding. With our AI automated solution, you can create 3D models of your products and integrate them easily. Additionally, our support team is available 24x7 to assist during integration\",\r\n      disclaimer: \"\",\r\n    },\r\n  ];\r\n\r\n  return (\r\n    <>\r\n      <div id=\"services\">\r\n\r\n        {data.map((item) => {\r\n          return (\r\n            <div key={item.id * Math.random()}>\r\n              <div className=\"w-full bg-white text-gray-600  px-4 mt-[50px]\" key={item.id}>\r\n                <div\r\n                  className=\"max-w-[1240px] mx-auto grid md:grid-cols-2 gap-12\"\r\n                  key={item.id}\r\n                >\r\n                  <div>\r\n                    <model-viewer\r\n                      key={item.id}\r\n                      src={item.model}\r\n                      ios-src={item.ios}\r\n                      alt=\"A monitor\"\r\n                      reveal=\"auto\"\r\n                      loading=\"eager\"\r\n                      interaction-prompt-style=\"basic\"\r\n                      ar\r\n                      ar-placement={item.placement}\r\n                      ar-scale=\"fixed\"\r\n                      ar-modes=\"webxr scene-viewer quick-look\"\r\n                      camera-controls\r\n                      quick-look-browsers=\"safari chrome\"\r\n                      environment-image=\"neutral\"\r\n                      shadow-intensity=\"0\"\r\n                    />\r\n                    <Fade direction=\"down\" triggerOnce={true}>\r\n                      <p className=\"flex items-center mx-auto justify-center text-gray-500 \">\r\n                        {item.disclaimer}\r\n                      </p>\r\n                    </Fade>\r\n                  </div>\r\n\r\n                  <div className=\"flex flex-col justify-center\">\r\n                    <p className=\"text-gray-600 font-bold \">{item.tagline}</p>\r\n                    <h1 className=\"md:text-4xl text-gray-600 boutUSsm:text-3xl text-2xl font-bold py-2\">\r\n                      {item.title}\r\n                    </h1>\r\n\r\n                    <Fade direction=\"up\" delay={0e3} triggerOnce={true}>\r\n                      <p className=\"mt-4\">{item.des} </p>\r\n                      {isMobile ? (\r\n                        \"\"\r\n                      ) : (\r\n                        <button\r\n                          className=\"bg-slate-300 text-gray-600 w-[200px] rounded-md font-semibold my-6 mx-auto md:mx-0 py-3\"\r\n                          onClick={() => handleOpen(item)}\r\n                        >\r\n                          Try Now\r\n                        </button>\r\n                      )}{\" \"}\r\n                    </Fade>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          );\r\n        })}\r\n\r\n        <Modal\r\n          open={open}\r\n          onClose={handleClose}\r\n          aria-labelledby=\"modal-modal-title\"\r\n          aria-describedby=\"modal-modal-description\"\r\n        >\r\n          <Box sx={style}>\r\n            <Typography\r\n              id=\"modal-modal-title\"\r\n              variant=\"h6\"\r\n              component=\"h2\"\r\n              sx={{ fontWeight: \"bold\" }}\r\n              className=\"text-gray-600 font-semibold\"\r\n            >\r\n              View in AR\r\n            </Typography>\r\n            <Typography className=\"text-gray-600 font-semibold\" id=\"modal-modal-description\" sx={{ mt: 2 }}>\r\n              Scan the QR code below with your mobile device to open our product\r\n              example using augmented reality on the web.\r\n            </Typography>\r\n\r\n            <QRCode\r\n              id=\"qr-gen\"\r\n              value={url}\r\n              size={290}\r\n              level={\"H\"}\r\n              includeMargin={true}\r\n            />\r\n            <Typography className=\"text-gray-600 font-semibold\" sx={{ fontSize: \"12px\"}}>\r\n              iOS 11+, iPadOS 11+ or Android with ARCore 1.9+ required\r\n            </Typography>\r\n          </Box>\r\n        </Modal>\r\n      </div>\r\n    </>\r\n  );\r\n};\r\n\r\nexport default Services;\r\n"],"names":["style","position","top","left","transform","width","bgcolor","border","boxShadow","p","_useState","useState","_useState2","_slicedToArray","open","setOpen","_useState3","_useState4","qrValue","setQrValue","_useState5","_useState6","url","setUrl","_jsx","_Fragment","children","_jsxs","id","model","ios","tagline","placement","title","des","disclaimer","map","item","className","src","alt","reveal","loading","ar","Fade","direction","triggerOnce","delay","isMobile","onClick","concat","Math","random","Modal","onClose","Box","sx","Typography","variant","component","fontWeight","mt","QRCode","value","size","level","includeMargin","fontSize"],"sourceRoot":""}