{"version":3,"file":"sections-miqroaware-WhyChoose-2ecea78aa44da6fdcc11.js","mappings":"6MAuFA,UAvEmC,SAAC,GAAc,EAAbA,QAAc,IACjD,GAAwCC,EAAAA,EAAAA,WAAS,GAA1CC,EAAP,KAAqBC,EAArB,KAEMC,GAAaC,EAAAA,EAAAA,QAAO,MAEpBC,GAAUC,EAAAA,EAAAA,GAAS,WAAY,WAAY,WAAY,YAuB7D,OArBAC,EAAAA,EAAAA,YAAU,WACN,IAAMC,EAAKC,EAAAA,GAAAA,SAAc,CACvBC,cAAe,CACbC,QAASR,EAAWS,QACpBC,MAAOR,KAWX,OAPAG,EAAGM,GAAG,kBAAmB,CACvBC,SAAU,GACVC,QAAS,GACTC,QAAS,GACR,GACHT,EAAGU,KAAKhB,EAAiB,EAAC,GAAO,GAE1B,WACLM,EAAGW,UAGN,IAGD,gBAACC,EAAD,CAASC,IAAKlB,GACZ,gBAACmB,EAAD,KACE,gBAACC,EAAD,KACE,gBAAC,UAAD,CACEC,UAAW,CACT,iBAAM,cACN,kBAAM,gDACN,iBAAM,YAERC,UAAU,kBACVC,QAAQpB,EAAAA,EAAAA,GAAS,UAAW,UAAW,UAAW,UAClDK,QAASV,MAIf,gBAAC0B,EAAD,KACE,gBAACC,EAAD,CAAMH,UAAU,kBACd,gBAACI,EAAD,WACA,gBAACC,EAAD,KACE,gBAACC,EAAD,2BACA,gBAACC,EAAD,qIAGJ,gBAACJ,EAAD,CAAMH,UAAU,kBACd,gBAACI,EAAD,WACA,gBAACC,EAAD,KACE,gBAACC,EAAD,yBACA,gBAACC,EAAD,6TAGJ,gBAACJ,EAAD,CAAMH,UAAU,kBACd,gBAACI,EAAD,WACA,gBAACC,EAAD,KACE,gBAACC,EAAD,4BACA,gBAACC,EAAD,2MAUZ,IAAMZ,EAAUa,EAAAA,QAAAA,QAAAA,WAAH,6DAAGA,CAAH,gPAMTC,EAAAA,GAAAA,OAOAA,EAAAA,GAAAA,QAQEZ,EAAOW,EAAAA,QAAAA,IAAAA,WAAH,0DAAGA,CAAH,wQAGgBE,EAAAA,EAAAA,iBAMtBD,EAAAA,GAAAA,OAOAA,EAAAA,GAAAA,QAQEX,EAAQU,EAAAA,QAAAA,GAAAA,WAAH,2DAAGA,CAAH,sEACAE,EAAAA,EAAAA,gBAIPC,EAAAA,EAAAA,gBAEAF,EAAAA,GAAAA,OACEE,EAAAA,EAAAA,eAGFF,EAAAA,GAAAA,OACEE,EAAAA,EAAAA,gBAIAT,EAAQM,EAAAA,QAAAA,IAAAA,WAAH,2DAAGA,CAAH,0GAOPC,EAAAA,GAAAA,OAIAA,EAAAA,GAAAA,QAKEN,EAAOK,EAAAA,QAAAA,IAAAA,WAAH,0DAAGA,CAAH,2NACgBE,EAAAA,EAAAA,MAStBD,EAAAA,GAAAA,OAKAA,EAAAA,GAAAA,QAMEL,EAASI,EAAAA,QAAAA,KAAAA,WAAH,4DAAGA,CAAH,6HACDE,EAAAA,EAAAA,cAGPC,EAAAA,EAAAA,iBAGAF,EAAAA,GAAAA,OACEE,EAAAA,EAAAA,gBAIFF,EAAAA,GAAAA,OACEE,EAAAA,EAAAA,iBAKAL,EAAWE,EAAAA,QAAAA,GAAAA,WAAH,8DAAGA,CAAH,yJACHE,EAAAA,EAAAA,gBAEPC,EAAAA,EAAAA,kBAIAF,EAAAA,GAAAA,OACEE,EAAAA,EAAAA,iBAKFF,EAAAA,GAAAA,OACEE,EAAAA,EAAAA,kBAOAJ,EAAOC,EAAAA,QAAAA,EAAAA,WAAH,0DAAGA,CAAH,4EACCE,EAAAA,EAAAA,gBAEPC,EAAAA,EAAAA,iBAGAF,EAAAA,GAAAA,OACEE,EAAAA,EAAAA,gBAIFF,EAAAA,GAAAA,OACEE,EAAAA,EAAAA,iBAKAN,EAAUG,EAAAA,QAAAA,IAAAA,WAAH,6DAAGA,CAAH,mFAGTC,EAAAA,GAAAA","sources":["webpack://miqrotech-marketing/./src/sections/miqroaware/WhyChoose.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState} from 'react'\nimport styled from 'styled-components'\nimport gsap from 'gsap/gsap-core'\n\nimport media from '@styles/media'\nimport text from '@styles/text'\nimport colors from '@styles/colors'\n\nimport TextAnimation from '@components/TextAnimation'\n\nimport useMedia from '@hooks/useMedia'\n\ntype props = {\n  loading: boolean\n}\n\nconst WhyChoose: React.FC<props> = ({loading}) => {\n  const [titleTrigger, setTitleTrigger] = useState(false)\n\n  const wrapperRef = useRef(null)\n\n  const tlStart = useMedia(\"top-=30%\", \"top-=30%\", \"top-=30%\", \"top-=30%\")\n\n  useEffect(() => {\n      const tl = gsap.timeline({\n        scrollTrigger: {\n          trigger: wrapperRef.current,\n          start: tlStart\n        }\n      })\n  \n      tl.to('.whychoose-item', {\n        duration: 0.5,\n        stagger: 0.3,\n        opacity: 1\n      }, 0)\n      tl.call(setTitleTrigger, [true], 0)\n\n      return () => {\n        tl.kill()\n      }\n    \n  }, [])\n\n  return (\n    <Wrapper ref={wrapperRef}>\n      <Left>\n        <Title>\n          <TextAnimation\n            textArray={[\n              () => \"Why choose\",\n              () => <>mIQroAware&trade;</>,\n              () => \"system?\"\n            ]}\n            className=\"whychoose-title\"\n            height={useMedia('4.861vw', '4.861vw', '8.383vw', '12.8vw')}\n            trigger={titleTrigger}\n          />\n        </Title>\n      </Left>\n      <Right>\n        <Item className=\"whychoose-item\">\n          <Number>01</Number>\n          <Content>\n            <SubTitle>Ease of use system</SubTitle>\n            <Text>From non-invasive installation to user-friendly custom analytics dashboarding, pipeline monitoring has never been simpler.</Text>\n          </Content>\n        </Item>\n        <Item className=\"whychoose-item\">\n          <Number>02</Number>\n          <Content>\n            <SubTitle>Smarter solution</SubTitle>\n            <Text>Our system blends Internet of Things (IoT), sensor, and Artificial Intelligence (AI) technology to monitor the 7 most important parameters of your pipeline health at a rate of up to 42 times per second, with instant advanced analytics reporting. By maximizing your information, you can optimize operations.</Text>\n          </Content>\n        </Item>\n        <Item className=\"whychoose-item\">\n          <Number>03</Number>\n          <Content>\n            <SubTitle>Exceptional service</SubTitle>\n            <Text>We take pride in our customer support team. Our service engineers are accessible and ready to work with you to find the optimal solution for your pipeline. Your success is our primary goal.</Text>\n          </Content>\n        </Item>\n      </Right>\n    </Wrapper>\n  )\n}\n\nexport default WhyChoose\n\nconst Wrapper = styled.section`\n  display: flex;\n\n  padding-top: 12.083vw;\n  padding-left: 3.472vw;\n\n  ${media.tablet} {\n    flex-direction: column;\n    padding-top: 9.94vw;\n    padding-left: 5.988vw;\n    padding-right: 5.988vw;\n  }\n\n  ${media.mobile} {\n    flex-direction: column;\n    padding-top: 46.667vw;\n    padding-left: 6.667vw;\n    padding-right: 6.667vw;\n  }\n`\n\nconst Left = styled.div`\n  display: flex;\n  flex-direction: column;\n  border-top: 1px solid ${colors.culturedWhite100};\n\n  width: 38.056vw;\n  padding-top: 2.083vw;\n  margin-right: 8.958vw;\n\n  ${media.tablet} {\n    width: 100%;\n    padding-top: 3.593vw;\n    margin-right: 0;\n    margin-bottom: 14.012vw;\n  }\n\n  ${media.mobile} {\n    width: 100%;\n    padding-top: 8vw…\n    margin-right: 0;\n    margin-bottom: 48.8vw;\n  }\n`\n\nconst Title = styled.h2`\n  color: ${colors.culturedWhite60};\n  display: flex;\n  flex-direction: column;\n\n  ${text.desktopLHeading}\n\n  ${media.tablet} {\n    ${text.tabletLHeading}\n  }\n\n  ${media.mobile} {\n    ${text.mobileSHeading}\n  }\n`\n\nconst Right = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  width: 41.667vw;\n\n  ${media.tablet} {\n    width: 100%;\n  }\n\n  ${media.mobile} {\n    width: 100%;\n  }\n`\n\nconst Item = styled.div`\n  border-top: 1px solid ${colors.white};\n  width: 100%;\n  display: flex;\n  align-items: flex-start;\n  opacity: 0;\n\n  padding-top: 2.083vw;\n  padding-bottom: 5.208vw;\n\n  ${media.tablet} {\n    padding-top: 3.593vw;\n    padding-bottom: 5.988vw;\n  }\n  \n  ${media.mobile} {\n    padding-top: 8vw;\n    padding-bottom: 16vw;\n  }\n`\n\nconst Number = styled.span`\n  color: ${colors.darkOrange100};\n  transform: rotate(90deg);\n\n  ${text.desktopXSHeading}\n  margin-right: 1.944vw;\n\n  ${media.tablet} {\n    ${text.tabletXSHeading}\n    margin-right: 3.353vw;\n  }\n\n  ${media.mobile} {\n    ${text.mobileXSHeading}\n    margin-right: 14.667vw;\n  }\n`\n\nconst SubTitle = styled.h3`\n  color: ${colors.culturedWhite60};\n\n  ${text.desktopXXSHeading}\n  margin-right: 4.306vw;\n  width: 10.417vw;\n\n  ${media.tablet} {\n    ${text.tabletXXSHeading}\n    margin-right: 19.88vw;\n    width: 17.964vw;\n  }\n\n  ${media.mobile} {\n    ${text.mobileXXSHeading}\n    margin-right: 0;\n    margin-bottom: 8vw;\n    width: 40vw;\n  }\n`\n\nconst Text = styled.p`\n  color: ${colors.culturedWhite60};\n\n  ${text.desktopBodyCopy1}\n  width: 22.5vw;\n\n  ${media.tablet} {\n    ${text.tabletBodyCopy1}\n    width: 39.281vw;\n  }\n\n  ${media.mobile} {\n    ${text.mobileBodyCopy1}\n    width: 100%;\n  }\n`\n\nconst Content = styled.div`\n  display: flex;\n  \n  ${media.mobile} {\n    flex-direction: column;\n    algin-items: flex-start;\n    width: 63.467vw…\n  }\n`"],"names":["loading","useState","titleTrigger","setTitleTrigger","wrapperRef","useRef","tlStart","useMedia","useEffect","tl","gsap","scrollTrigger","trigger","current","start","to","duration","stagger","opacity","call","kill","Wrapper","ref","Left","Title","textArray","className","height","Right","Item","Number","Content","SubTitle","Text","styled","media","colors","text"],"sourceRoot":""}