{"version":3,"sources":["webpack:////Users/edgarbarrios/www/2019-ADAWARE-WEBSITE-v31/node_modules/react-icons-kit/entypo/play.js","webpack:///./src/containers/ContpaqiContabilidad/TiltShape/tiltShape.style.js","webpack:///./src/containers/ContpaqiContabilidad/TiltShape/index.js","webpack:///./src/containers/ContpaqiContabilidad/Banner/banner.style.js","webpack:///./src/containers/ContpaqiContabilidad/Banner/index.js","webpack:///./src/containers/ContpaqiContabilidad/UpdateScreen/updateScreen.style.js","webpack:///./src/containers/ContpaqiContabilidad/UpdateScreen/index.js","webpack:///./src/containers/ContpaqiContabilidad/Trial/index.js","webpack:///./src/pages/contpaqi-contabilidad.js","webpack:////Users/edgarbarrios/www/2019-ADAWARE-WEBSITE-v31/node_modules/react-icons-kit/md/ic_play_circle_filled.js"],"names":["Object","defineProperty","exports","value","play","ShapeWrapper","styled","div","TiltShape","className","color","addAllClasses","push","join","width","height","viewBox","id","data-name","transform","fill","Bubble","keyframes","BannerWrapper","section","themeGet","DiscountWrapper","DiscountLabel","VideoModal","PlayButton","VideoWrapper","BannerSection","row","contentWrapper","discountAmount","discountText","titles","description","imageWrapper","buttonWrapper","button","data","useStaticQuery","saasModernJson","PORTFOLIO_SHOWCASE","portfolioItem","featuredIn","view","title","description2","Youtube","CloseModalButton","Button","variant","onClick","closeModal","icon","ModalContent","src","frameBorder","handleVideoModal","openModal","config","disableDragging","default","x","y","component","componentProps","closeComponent","closeOnClickOutside","Container","Box","Text","content","Heading","ic_play_circle_filled","size","iconPosition","bottom","fluid","bannerImage","childImageSharp","alt","tabIndex","defaultProps","flexBox","flexWrap","alignItems","justifyContent","mb","fontSize","fontWeight","letterSpacing","lineHeight","textAlign","as","mr","fillButton","type","borderRadius","p","colors","minWidth","minHeight","mt","SectionWrapper","UpdateScreen","secTitleWrapper","secText","secHeading","subtitulo","renderTabBar","renderTabContent","animatedWithMargin","SCREENSHOTS","map","item","index","tab","key","Image","image","display","ml","maxWidth","TrialSection","sectionWrapper","textArea","imageArea","ImageOne","btnStyle","outlineBtnStyle","price","buttonLabel","featuredLink","love","trialdesc","VendorLogos","href","pt","pb","flexDirection","pl","pr","theme","saasModernTheme","top","innerZ","activeClass","Navbar","Banner","Trial","Footer"],"mappings":"4FAEAA,OAAOC,eAAeC,EAAS,aAAc,CAC3CC,OAAO,IAETD,EAAQE,UAAO,EAUfF,EAAQE,KATG,CACT,QAAW,YACX,SAAY,CAAC,CACX,KAAQ,OACR,QAAW,CACT,EAAK,oL,yUCUIC,EAnBMC,IAAOC,IAAV,kFAAGD,CAAH,uPCgCHE,EA/BG,SAAC,GAA0B,IAAxBC,EAAuB,EAAvBA,UAAWC,EAAY,EAAZA,MAExBC,EAAgB,CAAC,cAMvB,OAJIF,GACFE,EAAcC,KAAKH,GAInB,kBAAC,EAAD,CAAcA,UAAWE,EAAcE,KAAK,MAC1C,yBAAKC,MAAM,OAAOC,OAAO,MAAMC,QAAQ,gBACrC,8BACE,8BAAUC,GAAG,cACX,0BAAMH,MAAM,OAAOC,OAAO,UAG9B,uBAAGE,GAAG,QAAQC,YAAU,SACtB,0BACED,GAAG,cACHC,YAAU,cACVJ,MAAM,OACNC,OAAO,MACPI,UAAU,0CACVC,KAAMV,GAAS,a,YCvBrBW,EAASC,YAAH,4OAaCC,EAAgBjB,IAAOkB,QAAV,iFAAGlB,CAAH,shBAEJmB,YAAS,wBA0BlBC,EAAkBpB,IAAOC,IAAV,mFAAGD,CAAH,+BAIfqB,EAAgBrB,IAAOC,IAAV,iFAAGD,CAAH,sQAYbsB,EAAatB,IAAOC,IAAV,8EAAGD,CAAH,qYAYCmB,YAAS,iBAYpBI,EAAavB,IAAOC,IAAV,8EAAGD,CAAH,qsBAoCJe,GAKNS,EAAexB,IAAOC,IAAV,gFAAGD,CAAH,+Q,wBCjGnByB,EAAgB,SAAC,GAUhB,IATLC,EASI,EATJA,IACAC,EAQI,EARJA,eACAC,EAOI,EAPJA,eACAC,EAMI,EANJA,aACAC,EAKI,EALJA,OACAC,EAII,EAJJA,YACAC,EAGI,EAHJA,aACAC,EAEI,EAFJA,cACAC,EACI,EADJA,OAEMC,EAAOC,yBAAe,cAyB5B,EAKcD,EAAKE,eAAeC,mBAAmB,GAAGC,cAAc,GAJpEC,EADF,EACEA,WACAC,EAFF,EAEEA,KACAC,EAHF,EAGEA,MACAC,EAJF,EAIEA,aACAC,EALF,EAKEA,QAGIC,EAAmB,kBACvB,kBAACC,EAAA,EAAD,CACE3C,UAAU,gBACV4C,QAAQ,MACRC,QAAS,kBAAMC,eACfC,KAAM,uBAAG/C,UAAU,4BAIjBgD,EAAe,kBACnB,kBAAC3B,EAAD,KACE,4BACEkB,MAAM,QACNU,IAAKR,EACLS,YAAY,QAQZC,EAAmB,WACvBC,YAAU,CACRC,OAAQ,CACNrD,UAAW,cACXsD,iBAAiB,EACjBC,QAAS,CACPlD,MAAO,OACPC,OAAQ,OACRkD,EAAG,EACHC,EAAG,IAGPC,UAAWV,EACXW,eAAgB,GAChBC,eAAgBlB,EAChBmB,qBAAqB,KAIzB,OACE,kBAAC/C,EAAD,CAAeN,GAAG,kBAChB,kBAAC,EAAD,MACA,kBAACsD,EAAA,EAAD,KACE,kBAACC,EAAA,EAAQxC,EACP,kBAACwC,EAAA,EAAQvC,EACP,kBAACP,EAAD,KACE,kBAACC,EAAD,KACGmB,EACC,kBAAC2B,EAAA,EAAD,iBAAUvC,EAAV,CAA0BwC,QAAS5B,KAEjC,kBAAC2B,EAAA,EAAD,iBAAUvC,EAAV,CAA0BwC,QAAQ,wCAGtC,kBAACD,EAAA,EAAD,iBACMtC,EADN,CAEEuC,QAAS3B,OAIf,kBAAC4B,EAAA,EAAD,iBACMvC,EADN,CAEEsC,QAAS1B,KAEX,kBAACyB,EAAA,EAAD,iBACMpC,EADN,CAEEqC,QAASzB,KAEX,kBAACuB,EAAA,EAAQjC,EACP,kBAACa,EAAA,EAAD,iBACMZ,EADN,CAEEQ,MAAM,wBACNQ,KAAM,kBAAC,IAAD,CAAMA,KAAMoB,wBAAuBC,KAAM,KAC/CC,aAAa,OACbxB,QAASM,OAIf,kBAACY,EAAA,EAAQlC,EACP,kBAAC,IAAD,CAAMyC,QAAM,GACV,kBAACnD,EAAD,KACE,kBAAC,IAAD,CAAOoD,MAAOvC,EAAKwC,YAAYC,gBAAgBF,MAAOG,IAAI,sBAC1D,kBAACtD,EAAD,CAAYuD,SAAS,QAAQ9B,QAASM,GACpC,kBAAC,IAAD,CAAMJ,KAAMpD,OAAMyE,KAAM,aAwB1C9C,EAAcsD,aAAe,CAC3BrD,IAAK,CACHsD,SAAS,EACTC,SAAU,OACVC,WAAY,SACZC,eAAgB,UAElBxD,eAAgB,CACdnB,MAAO,CAAC,OAAQ,OAAQ,MAAO,MAAO,OACtC4E,GAAI,QAENpD,aAAc,CACZxB,MAAO,QAETsB,OAAQ,CACNuD,SAAU,CAAC,OAAQ,OAAQ,OAAQ,OAAQ,QAC3CC,WAAY,MACZlF,MAAO,OACPmF,cAAe,WACfH,GAAI,CAAC,OAAQ,OAAQ,OAAQ,OAAQ,QACrCI,WAAY,MACZC,UAAW,UAEb1D,YAAa,CACXsD,SAAU,CAAC,OAAQ,OAAQ,OAAQ,OAAQ,QAC3CC,WAAY,MACZlF,MAAO,OACPoF,WAAY,OACZJ,GAAI,IACJK,UAAW,UAEb7D,eAAgB,CACdyD,SAAU,CAAC,OAAQ,OAAQ,OAAQ,OAAQ,QAC3CC,WAAY,MACZlF,MAAO,UACPgF,GAAI,EACJM,GAAI,OACJC,GAAI,SAEN9D,aAAc,CACZwD,SAAU,CAAC,OAAQ,OAAQ,OAAQ,OAAQ,QAC3CC,WAAY,MACZlF,MAAO,OACPgF,GAAI,EACJM,GAAI,QAENE,WAAY,CACVC,KAAM,SACNR,SAAU,CAAC,OAAQ,QACnBC,WAAY,MACZQ,aAAc,MACdC,EAAG,CAAC,WAAY,YAChBC,OAAQ,kBACRC,SAAU,CAAC,OAAQ,SACnBxF,OAAQ,CAAC,OAAQ,QACjByF,UAAW,QAEbjE,cAAe,CACb+C,SAAS,EACTG,eAAgB,SAChBgB,GAAI,QAENjE,OAAQ,CACN2D,KAAM,SACNR,SAAU,CAAC,OAAQ,QACnBC,WAAY,MACZQ,aAAc,MACdC,EAAG,CAAC,WAAY,YAChB3F,MAAO,OACP4F,OAAQ,YACRvF,OAAQ,CAAC,OAAQ,QACjByF,UAAW,SAIAzE,Q,8EC9GA2E,EA/IQpG,IAAOkB,QAAV,wFAAGlB,CAAH,yvG,YCedqG,EAAe,SAAC,GAA8C,IAA5CC,EAA2C,EAA3CA,gBAAiBC,EAA0B,EAA1BA,QAASC,EAAiB,EAAjBA,WAChD,OACE,kBAAC,EAAD,CAAgB7F,GAAG,sBACjB,kBAACsD,EAAA,EAAD,KACE,kBAACC,EAAA,EAAQoC,EACP,kBAACnC,EAAA,EAAD,iBAAUoC,EAAV,CAAmBnC,QAAQ,2BAC3B,kBAACC,EAAA,EAAD,iBACMmC,EADN,CAEEpC,QAAS9B,IAAmB,GAAGC,cAAc,GAAGkE,cAGpD,kBAAC,IAAD,CACEC,aAAc,kBAAM,kBAAC,IAAD,OACpBC,iBAAkB,kBAAM,kBAAC,IAAD,CAAYC,oBAAkB,KACtDzG,UAAU,qBAET0G,IAAYC,KAAI,SAACC,EAAMC,GAAP,OACf,kBAAC,IAAD,CACEC,IACE,oCACE,kBAAC,IAAD,CAAM/D,KAAM6D,EAAK7D,KAAMqB,KAAM,KAC5BwC,EAAKrE,OAGVwE,IAAKF,EAAQ,GAEb,kBAACG,EAAA,EAAD,CAAO/D,IAAK2D,EAAKK,MAAOvC,IAAG,eAAgBmC,EAAQ,aAejEX,EAAatB,aAAe,CAC1BuB,gBAAiB,CACflB,GAAI,CAAC,OAAQ,SAEfmB,QAAS,CACPb,GAAI,OACJ2B,QAAS,QACT5B,UAAW,SACXJ,SAAU,OACVE,cAAe,SACfD,WAAY,MACZlF,MAAO,UACPgF,GAAI,QAENoB,WAAY,CACVf,UAAW,SACXJ,SAAU,CAAC,OAAQ,OAAQ,OAAQ,QACnCC,WAAY,MACZlF,MAAO,UACPmF,cAAe,WACfH,GAAI,IACJkC,GAAI,OACJ3B,GAAI,OACJH,WAAY,OACZhF,MAAO,QACP+G,SAAU,SAIClB,QC5ETmB,EAAe,SAAC,GAWf,IAVLC,EAUI,EAVJA,eACA/F,EASI,EATJA,IACAgB,EAQI,EARJA,MACAX,EAOI,EAPJA,YACA2F,EAMI,EANJA,SACAC,EAKI,EALJA,UACAC,EAII,EAJJA,SACAC,EAGI,EAHJA,SACAC,EAEI,EAFJA,gBACA7F,EACI,EADJA,cAEME,EAAOC,yBAAe,cAyB5B,EAMID,EAAKE,eAAeC,mBAAmB,GAAGC,cAAc,GAL1DwF,EADF,EACEA,MACAC,EAFF,EAEEA,YACAC,EAHF,EAGEA,aACAC,EAJF,EAIEA,KACAC,EALF,EAKEA,UAGF,OACE,kBAACjE,EAAA,EAAQuD,EACP,kBAACxD,EAAA,EAAD,KACE,kBAACC,EAAA,EAAQxC,EACP,kBAACwC,EAAA,EAAQyD,EACP,kBAAC,IAAD,eAAOjD,MAAOvC,EAAKiG,YAAYxD,gBAAgBF,MAAOG,IAAI,eAAmB+C,KAE/E,kBAAC1D,EAAA,EAAQwD,EACP,kBAACrD,EAAA,EAAD,iBACM3B,EADN,CAEE0B,QAAS,sBAAsB2D,EAAM,YAEvC,kBAAC5D,EAAA,EAAD,iBACMpC,EADN,CAEEqC,QAAS+D,KAEX,kBAACjE,EAAA,EAAQjC,EACP,uBAAGoG,KAAMJ,GACP,kBAACnF,EAAA,EAAD,eAAQJ,MAAOsF,GAAiBH,KAEjCK,EACC,uBAAGG,KAAMH,GACP,kBAACpF,EAAA,EAAD,eACEJ,MAAM,0BACNK,QAAQ,cACJ+E,KAIN,SAoBlBN,EAAazC,aAAe,CAC1B0C,eAAgB,CACd/B,GAAI,UACJvF,UAAW,gBACXmI,GAAI,CAAC,OAAQ,OAAQ,OAAQ,QAC7BC,GAAI,CAAC,MAAO,MAAO,MAAO,SAE5B7G,IAAK,CACHsD,SAAS,EACTC,SAAU,OACVuD,cAAe,SACftD,WAAY,UAEdwC,SAAU,CACRlH,MAAO,CAAC,MAAO,MAAO,MAAO,QAE/BmH,UAAW,CACTnH,MAAO,CAAC,MAAO,QAAS,SACxB4E,GAAI,CAAC,OAAQ,OAAQ,OAAQ,SAE/B1C,MAAO,CACL2C,SAAU,CAAC,OAAQ,OAAQ,OAAQ,OAAQ,QAC3CC,WAAY,MACZlF,MAAO,eACPmF,cAAe,WACfH,GAAI,OACJK,UAAW,SACXD,WAAY,QAEdzD,YAAa,CACXsD,SAAU,CAAC,OAAQ,OAAQ,OAAQ,OAAQ,QAC3CjF,MAAO,UACPoF,WAAY,MACZC,UAAW,SACXL,GAAI,CAAC,OAAQ,OAAQ,OAAQ,SAE/BwC,SAAU,CACRN,GAAI,OACJ3B,GAAI,QAEN1D,cAAe,CACb+C,SAAS,EACTG,eAAgB,UAElB0C,SAAU,CACR5B,SAAU,QACVZ,SAAU,CAAC,OAAQ,QACnBC,WAAY,MACZU,OAAQ,kBACRyC,GAAI,CAAC,OAAQ,QACbC,GAAI,CAAC,OAAQ,SAEfZ,gBAAiB,CACf7B,SAAU,QACVZ,SAAU,OACVC,WAAY,MACZlF,MAAO,UACP4F,OAAQ,cAIGwB,Q,oCCjJA,qBACb,OACE,kBAAC,IAAD,CAAemB,MAAOC,KACpB,kBAAC,WAAD,KACE,kBAAC,IAAD,CAAKlG,MAAM,qCACX,kBAAC,IAAD,MACA,kBAAC,IAAD,MACA,kBAAC,IAAD,MAGA,kBAAC,IAAD,KACE,kBAAC,IAAD,CAAQmG,IAAK,EAAGC,OAAQ,KAAMC,YAAY,qBACxC,kBAAC,IAAD,KACE,kBAACC,EAAA,EAAD,QAGJ,kBAACC,EAAD,MACA,kBAAC,EAAD,MAEA,kBAACC,EAAD,MACA,kBAACC,EAAA,EAAD,W,kCCvCVzJ,OAAOC,eAAeC,EAAS,aAAc,CAC3CC,OAAO,IAETD,EAAQ0E,2BAAwB,EAUhC1E,EAAQ0E,sBAToB,CAC1B,QAAW,YACX,SAAY,CAAC,CACX,KAAQ,OACR,QAAW,CACT,EAAK,kG","file":"component---src-pages-contpaqi-contabilidad-js-1cb27dbbf7a0c4530c4f.js","sourcesContent":["\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.play = void 0;\nvar play = {\n  \"viewBox\": \"0 0 20 20\",\n  \"children\": [{\n    \"name\": \"path\",\n    \"attribs\": {\n      \"d\": \"M15,10.001c0,0.299-0.305,0.514-0.305,0.514l-8.561,5.303C5.51,16.227,5,15.924,5,15.149V4.852\\r\\n\\tc0-0.777,0.51-1.078,1.135-0.67l8.561,5.305C14.695,9.487,15,9.702,15,10.001z\"\n    }\n  }]\n};\nexports.play = play;","import styled from 'styled-components';\n\nconst ShapeWrapper = styled.div`\n  position: absolute;\n  width: 100%;\n  bottom: 0;\n  left: 0;\n  z-index: 0;\n  pointer-events: none;\n\n  svg {\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n  & ~ div {\n    z-index: 1;\n    position: relative;\n  }\n`;\n\nexport default ShapeWrapper;\n","import React from 'react';\nimport ShapeWrapper from './tiltShape.style';\n\nconst TiltShape = ({ className, color }) => {\n  // Add all classs to an array\n  const addAllClasses = ['tilt_shape'];\n  // className prop checking\n  if (className) {\n    addAllClasses.push(className);\n  }\n\n  return (\n    <ShapeWrapper className={addAllClasses.join(' ')}>\n      <svg width=\"1920\" height=\"500\" viewBox=\"0 0 1920 500\">\n        <defs>\n          <clipPath id=\"clip-shape\">\n            <rect width=\"1920\" height=\"500\" />\n          </clipPath>\n        </defs>\n        <g id=\"shape\" data-name=\"Shape\">\n          <rect\n            id=\"Rectangle_1\"\n            data-name=\"Rectangle 1\"\n            width=\"2356\"\n            height=\"781\"\n            transform=\"translate(-136.868 401.948) rotate(-11)\"\n            fill={color || '#fff'}\n          />\n        </g>\n      </svg>\n    </ShapeWrapper>\n  );\n};\n\nexport default TiltShape;\n","import styled, { keyframes } from 'styled-components';\nimport { themeGet } from 'styled-system';\n\nconst Bubble = keyframes`\n  0% {\n\t\tbox-shadow: 0 0 0 3px rgba(255,65,108,0.3);\n\t\topacity: 1;\n\t\ttransform: scale3d(1, 1, 1);\n\t}\n\t100% {\n\t\tbox-shadow: 0 0 0 100px rgba(255,65,108,0);\n\t\topacity: 0;\n\t\ttransform: scale3d(1, 1, 1);\n\t}\n`;\n\nexport const BannerWrapper = styled.section`\n  padding: 150px 0 50px 0;\n  background-color: ${themeGet('colors.contabilidad')};\n  background-image: linear-gradient(\n    0grad, \n    rgba(0, 0, 0, 0) 70%, \n    rgba(0, 0, 0, 0.2) 90%\n  ),\n  linear-gradient(\n    125grad, \n    rgba(255,255,255,0.0) 0%,\n    rgba(255,255,255,0.1) 20%,\n    rgba(255,255,255,0) 20.1%\n  );\n  background-size: cover;\n  background-position: top center;\n  overflow: hidden;\n  @media (max-width: 575px) {\n    padding: 120px 0 0 0;\n  }\n\n  img {\n    max-width: 100%;\n    height: auto;\n    display: block;\n  }\n`;\n\nexport const DiscountWrapper = styled.div`\n  text-align: center;\n`;\n\nexport const DiscountLabel = styled.div`\n  font-family: 'Nanum Gothic', 'Open Sans', sans-serif;\n  display: inline-block;\n  border-radius: 4em;\n  padding: 9px 22px;\n  margin-bottom: 22px;\n  background-color: rgba(0, 0, 0, 0.15);\n  @media (max-width: 575px) {\n    padding: 7px 10px;\n  }\n`;\n\nexport const VideoModal = styled.div`\n  display: inline-block;\n  position: relative;\n  border-radius: 10px;\n  overflow: hidden;\n  width: 100%;\n  &:before {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    display: block;\n    background-color: ${themeGet('colors.black')};\n    opacity: 0.1;\n    pointer-events: none;\n  }\n\n  img {\n    max-width: 100%;\n    height: auto;\n    display: block;\n  }\n`;\n\nexport const PlayButton = styled.div`\n  width: 80px;\n  height: 80px;\n  border-radius: 50%;\n  background: #fff;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  color: #ff4553;\n  cursor: pointer;\n  outline: 0;\n  z-index: 2;\n  @media (max-width: 767px) {\n    width: 60px;\n    height: 60px;\n    svg {\n      width: 30px;\n    }\n  }\n  &:after {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    display: block;\n    pointer-events: none;\n    top: 0;\n    left: 0;\n    border-radius: inherit;\n  }\n  &:focus {\n    &:after {\n      animation: ${Bubble} 0.5s ease-out forwards;\n    }\n  }\n`;\n\nexport const VideoWrapper = styled.div`\n  max-width: calc(100% - 30px);\n  width: 900px;\n  position: relative;\n  &:before {\n    content: '';\n    display: block;\n    padding-top: 56.25%;\n  }\n  iframe {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n`;\n\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { useStaticQuery, graphql } from 'gatsby';\nimport Icon from 'react-icons-kit';\nimport Fade from 'react-reveal/Fade';\nimport { openModal, closeModal } from '@redq/reuse-modal';\nimport Box from 'reusecore/src/elements/Box';\nimport Text from 'reusecore/src/elements/Text';\nimport Heading from 'reusecore/src/elements/Heading';\nimport Button from 'reusecore/src/elements/Button';\nimport Image from 'gatsby-image';\nimport Container from 'common/src/components/UI/Container';\nimport TiltShape from '../TiltShape';\nimport {\n  BannerWrapper,\n  DiscountWrapper,\n  DiscountLabel,\n  VideoModal,\n  PlayButton,\n  VideoWrapper,\n} from './banner.style';\n\nimport { ic_play_circle_filled } from 'react-icons-kit/md/ic_play_circle_filled';\nimport { play } from 'react-icons-kit/entypo/play';\n\n\n\n\nconst BannerSection = ({\n  row,\n  contentWrapper,\n  discountAmount,\n  discountText,\n  titles,\n  description,\n  imageWrapper,\n  buttonWrapper,\n  button,\n}) => {\n  const data = useStaticQuery(graphql`\n    query {\n      bannerImage: file(\n        relativePath: { eq: \"image/contpaqiContabilidad/banner-image.png\" }\n      ) {\n        childImageSharp {\n          fluid(maxWidth: 1170, quality: 80) {\n            ...GatsbyImageSharpFluid_tracedSVG\n          }\n        }\n      }\n      saasModernJson {\n        PORTFOLIO_SHOWCASE {\n          portfolioItem {\n            featuredIn\n            view\n            title\n            description2\n            Youtube\n          }\n        }\n      }\n    }\n  `);\n\n  const { \n    featuredIn,\n    view,\n    title,\n    description2,\n    Youtube } = data.saasModernJson.PORTFOLIO_SHOWCASE[0].portfolioItem[0];\n\n  // close button for modal\n  const CloseModalButton = () => (\n    <Button\n      className=\"modalCloseBtn\"\n      variant=\"fab\"\n      onClick={() => closeModal()}\n      icon={<i className=\"flaticon-plus-symbol\" />}\n    />\n  );\n\n  const ModalContent = () => (\n    <VideoWrapper>\n      <iframe\n        title=\"Video\"\n        src={Youtube}\n        frameBorder=\"0\"\n      />\n    </VideoWrapper>\n  );\n\n  \n\n  // modal handler\n  const handleVideoModal = () => {\n    openModal({\n      config: {\n        className: 'video-modal',\n        disableDragging: true,\n        default: {\n          width: '100%',\n          height: '100%',\n          x: 0,\n          y: 0,\n        },\n      },\n      component: ModalContent,\n      componentProps: {},\n      closeComponent: CloseModalButton,\n      closeOnClickOutside: true,\n    });\n  };\n\n  return (\n    <BannerWrapper id=\"banner_section\">\n      <TiltShape />\n      <Container>\n        <Box {...row}>\n          <Box {...contentWrapper}>\n            <DiscountWrapper>\n              <DiscountLabel>\n                {featuredIn ? (\n                  <Text {...discountAmount} content={featuredIn} />\n                  ) : (\n                    <Text {...discountAmount} content='Soluciones para procesos contables' />\n                )}\n\n                <Text\n                  {...discountText}\n                  content={view}\n                />\n              </DiscountLabel>\n            </DiscountWrapper>\n            <Heading\n              {...titles}\n              content={title}\n            />\n            <Text\n              {...description}\n              content={description2}\n            />\n            <Box {...buttonWrapper}>\n              <Button \n                {...button}\n                title=\"DESCUBRE CÓMO TRABAJA\"\n                icon={<Icon icon={ic_play_circle_filled} size={30} />}\n                iconPosition=\"left\"\n                onClick={handleVideoModal}\n              />\n            </Box>\n          </Box>\n          <Box {...imageWrapper}>\n            <Fade bottom>\n              <VideoModal> \n                <Image fluid={data.bannerImage.childImageSharp.fluid} alt=\"ADAWARE, Asesores\" />\n                <PlayButton tabIndex=\"-1000\" onClick={handleVideoModal}>\n                  <Icon icon={play} size={40} />\n                </PlayButton>\n              </VideoModal>\n            </Fade>\n          </Box>\n        </Box>\n      </Container>\n    </BannerWrapper>\n  );\n};\n\nBannerSection.propTypes = {\n  row: PropTypes.object,\n  contentWrapper: PropTypes.object,\n  discountAmount: PropTypes.object,\n  discountText: PropTypes.object,\n  titles: PropTypes.object,\n  description: PropTypes.object,\n  imageWrapper: PropTypes.object,\n  buttonWrapper: PropTypes.object,\n  button: PropTypes.object,\n  fillButton: PropTypes.object,\n};\n\nBannerSection.defaultProps = {\n  row: {\n    flexBox: true,\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  contentWrapper: {\n    width: ['100%', '100%', '90%', '90%', '80%'],\n    mb: '40px',\n  },\n  imageWrapper: {\n    width: '100%',\n  },\n  titles: {\n    fontSize: ['24px', '32px', '40px', '42px', '46px'],\n    fontWeight: '700',\n    color: '#fff',\n    letterSpacing: '-0.025em',\n    mb: ['20px', '25px', '25px', '25px', '25px'],\n    lineHeight: '1.2',\n    textAlign: 'center',\n  },\n  description: {\n    fontSize: ['18px', '24px', '24px', '26px', '26px'],\n    fontWeight: '700',\n    color: '#fff',\n    lineHeight: '1.75',\n    mb: '0',\n    textAlign: 'center',\n  },\n  discountAmount: {\n    fontSize: ['13px', '14px', '14px', '14px', '14px'],\n    fontWeight: '700',\n    color: '#9fc3ed',\n    mb: 0,\n    as: 'span',\n    mr: '0.4em',\n  },\n  discountText: {\n    fontSize: ['13px', '14px', '14px', '14px', '14px'],\n    fontWeight: '700',\n    color: '#fff',\n    mb: 0,\n    as: 'span',\n  },\n  fillButton: {\n    type: 'button',\n    fontSize: ['13px', '14px'],\n    fontWeight: '600',\n    borderRadius: '4px',\n    p: ['0px 15px', '8px 22px'],\n    colors: 'secondaryWithBg',\n    minWidth: ['auto', '150px'],\n    height: ['40px', '46px'],\n    minHeight: 'auto',\n  },\n  buttonWrapper: {\n    flexBox: true,\n    justifyContent: 'center',\n    mt: '35px',\n  },\n  button: {\n    type: 'button',\n    fontSize: ['13px', '14px'],\n    fontWeight: '600',\n    borderRadius: '4px',\n    p: ['0px 15px', '8px 22px'],\n    color: '#fff',\n    colors: 'secondary',\n    height: ['40px', '46px'],\n    minHeight: 'auto',\n  },\n};\n\nexport default BannerSection;\n","import styled from 'styled-components';\n\nconst SectionWrapper = styled.section`\n  padding: 100px 0 40px 0;\n  @media (max-width: 990px) {\n    padding: 80px 0 40px 0;\n  }\n  @media (max-width: 575px) {\n    padding: 60px 0 20px 0;\n  }\n\n  @keyframes ScaleInUp {\n    from {\n      opacity: 0;\n      transform: translateY(30px) scale(0.97);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n  }\n\n  .update-screen-tab {\n    border: 0;\n    overflow: initial;\n    .rc-tabs-ink-bar {\n      display: none !important;\n    }\n    .rc-tabs-bar {\n      border: 0;\n    }\n    .rc-tabs-nav-container {\n      margin-bottom: 45px;\n      @media (max-width: 767px) {\n        margin-bottom: 30px;\n      }\n      &:after {\n        content: '';\n        position: absolute;\n        width: 100%;\n        height: 1px;\n        background: #e7e8eb;\n        display: block;\n        left: 0;\n        bottom: 0;\n        z-index: -1;\n      }\n      &:not(.rc-tabs-nav-container-scrolling) {\n        .rc-tabs-nav-scroll {\n          width: 100%;\n          text-align: center;\n          .rc-tabs-nav {\n            float: none;\n            display: block;\n            .rc-tabs-tab {\n              display: inline-block;\n              float: none;\n            }\n          }\n        }\n      }\n      .rc-tabs-tab {\n        font-size: 18px;\n        color: #6f7a87;\n        font-weight: 400;\n        min-width: 230px;\n        padding: 0 0 25px 0;\n        text-align: center;\n        margin-right: 0;\n        transition: 0.25s ease-in-out;\n        &:hover {\n          color: #f15a24;\n        }\n        &:after {\n          content: '';\n          position: absolute;\n          width: 100%;\n          height: 2px;\n          bottom: 0;\n          left: 0;\n          display: block;\n          @media (max-width: 767px) {\n            display: none;\n          }\n        }\n        &:after {\n          background: #f15a24;\n          transform: scaleX(0);\n          transform-origin: right center 0;\n          transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1) 0s;\n        }\n        &.rc-tabs-tab-active {\n          color: #f15a24;\n          &:after {\n            transform: scaleX(1);\n            transform-origin: left center 0;\n            transition: transform 0.35s cubic-bezier(0.43, 0.49, 0.51, 0.68);\n          }\n        }\n        > div {\n          margin-right: 8px;\n        }\n        @media (max-width: 1199px) {\n          font-size: 16px;\n          padding: 0 0 20px 0;\n          min-width: 170px;\n        }\n        @media (max-width: 990px) {\n          min-width: auto;\n          padding: 0 20px 15px 20px;\n        }\n        @media (max-width: 767px) {\n          font-size: 14px;\n          svg {\n            width: 20px;\n          }\n        }\n      }\n    }\n    .rc-tabs-content {\n      .rc-tabs-tabpane {\n        border-radius: 10px;\n        overflow: hidden;\n        box-shadow: 0px 5px 60px 0px rgba(27, 67, 111, 0.15);\n        &.rc-tabs-tabpane-active {\n          animation: 0.7s ScaleInUp;\n        }\n        > img {\n          max-width: 100%;\n          height: auto;\n          display: block;\n        }\n      }\n    }\n  }\n\n  .rc-tabs-tab-prev-icon,\n  .rc-tabs-tab-next-icon {\n    font-size: 20px;\n    color: #f15a24;\n    line-height: 1;\n    display: block;\n  }\n`;\n\nexport default SectionWrapper;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Icon from 'react-icons-kit';\nimport Tabs, { TabPane } from 'rc-tabs';\nimport TabContent from 'rc-tabs/lib/TabContent';\nimport ScrollableInkTabBar from 'rc-tabs/lib/ScrollableInkTabBar';\nimport 'rc-tabs/assets/index.css';\nimport Box from 'reusecore/src/elements/Box';\nimport Text from 'reusecore/src/elements/Text';\nimport Heading from 'reusecore/src/elements/Heading';\nimport Image from 'reusecore/src/elements/Image';\nimport Container from 'common/src/components/UI/Container';\n\nimport SectionWrapper from './updateScreen.style';\nimport { SCREENSHOTS, PORTFOLIO_SHOWCASE }  from 'common/src/data/SaasModern/index';\n\n\nconst UpdateScreen = ({ secTitleWrapper, secText, secHeading }) => {\n  return (\n    <SectionWrapper id=\"screenshot_section\">\n      <Container>\n        <Box {...secTitleWrapper}>\n          <Text {...secText} content=\"DESCUBRE CÓMO TRABAJA\" />\n          <Heading\n            {...secHeading}\n            content={PORTFOLIO_SHOWCASE[0].portfolioItem[0].subtitulo}\n          />\n        </Box>\n        <Tabs\n          renderTabBar={() => <ScrollableInkTabBar />}\n          renderTabContent={() => <TabContent animatedWithMargin />}\n          className=\"update-screen-tab\"\n        >\n          {SCREENSHOTS.map((item, index) => (\n            <TabPane\n              tab={\n                <>\n                  <Icon icon={item.icon} size={24} /> \n                  {item.title}\n                </>\n              }\n              key={index + 1}\n            >\n              <Image src={item.image} alt={`screenshot-${index + 1}`} />\n            </TabPane>\n          ))}\n        </Tabs>\n      </Container>\n    </SectionWrapper>\n  );\n};\n\nUpdateScreen.propTypes = {\n  secTitleWrapper: PropTypes.object,\n  secText: PropTypes.object,\n  secHeading: PropTypes.object,\n};\n\nUpdateScreen.defaultProps = {\n  secTitleWrapper: {\n    mb: ['60px', '80px'],\n  },\n  secText: {\n    as: 'span',\n    display: 'block',\n    textAlign: 'center',\n    fontSize: '14px',\n    letterSpacing: '0.15em',\n    fontWeight: '700',\n    color: '#f15a24',\n    mb: '12px',\n  },\n  secHeading: {\n    textAlign: 'center',\n    fontSize: ['20px', '24px', '36px', '36px'],\n    fontWeight: '700',\n    color: '#0f2137',\n    letterSpacing: '-0.025em',\n    mb: '0',\n    ml: 'auto',\n    mr: 'auto',\n    lineHeight: '1.12',\n    width: '540px',\n    maxWidth: '100%',\n  },\n};\n\nexport default UpdateScreen;\n","import React from 'react';\nimport { useStaticQuery, graphql } from 'gatsby';\nimport PropTypes from 'prop-types';\nimport Box from 'reusecore/src/elements/Box';\nimport Text from 'reusecore/src/elements/Text';\nimport Heading from 'reusecore/src/elements/Heading';\nimport Button from 'reusecore/src/elements/Button';\nimport Image from 'gatsby-image';\nimport Container from 'common/src/components/UI/Container';\n\n\nconst TrialSection = ({\n  sectionWrapper,\n  row,\n  title,\n  description,\n  textArea,\n  imageArea,\n  ImageOne,\n  btnStyle,\n  outlineBtnStyle,\n  buttonWrapper,\n}) => {\n  const data = useStaticQuery(graphql`\n    query {\n      VendorLogos: file(\n        relativePath: { eq: \"image/contpaqiContabilidad/vendor-logos-contabilidad.png\" }\n      ) {\n        childImageSharp {\n          fluid(maxWidth: 424, quality: 100) {\n            ...GatsbyImageSharpFluid_tracedSVG\n          }\n        }\n      }\n      saasModernJson {\n        PORTFOLIO_SHOWCASE {\n          portfolioItem {\n            price\n            buttonLabel\n            featuredLink\n            love\n            trialdesc\n          }\n        }\n      }\n    }\n  `);\n\n  const { \n    price,\n    buttonLabel,\n    featuredLink,\n    love,\n    trialdesc,\n  } = data.saasModernJson.PORTFOLIO_SHOWCASE[0].portfolioItem[0];\n\n  return (\n    <Box {...sectionWrapper}>\n      <Container>\n        <Box {...row}>\n          <Box {...imageArea}>\n            <Image fluid={data.VendorLogos.childImageSharp.fluid} alt=\"Vendor Logo\"  {...ImageOne} />\n          </Box>\n          <Box {...textArea}>\n            <Heading\n              {...title}\n              content={\"Cómpralo desde MXN \"+price+\" + IVA\"}\n            />\n            <Text\n              {...description}\n              content={trialdesc}\n            />\n            <Box {...buttonWrapper}>\n              <a href={featuredLink}>\n                <Button title={buttonLabel} {...btnStyle} />\n              </a>\n              {love ? (\n                <a href={love}>\n                  <Button\n                    title=\" Descarga ficha técnica\"\n                    variant=\"textButton\"\n                    {...outlineBtnStyle}\n                  />\n                </a>\n                ) : (\n                  ''\n              )}\n            </Box>\n          </Box>\n        </Box>\n      </Container>\n    </Box>\n  );\n};\n\nTrialSection.propTypes = {\n  sectionWrapper: PropTypes.object,\n  row: PropTypes.object,\n  title: PropTypes.object,\n  description: PropTypes.object,\n  button: PropTypes.object,\n  imageArea: PropTypes.object,\n  ImageOne: PropTypes.object,\n};\n\nTrialSection.defaultProps = {\n  sectionWrapper: {\n    as: 'section',\n    className: 'trial-section',\n    pt: ['20px', '40px', '60px', '80px'],\n    pb: ['0px', '0px', '0px', '80px'],\n  },\n  row: {\n    flexBox: true,\n    flexWrap: 'wrap',\n    flexDirection: 'column',\n    alignItems: 'center',\n  },\n  textArea: {\n    width: ['80%', '80%', '80%', '60%'],\n  },\n  imageArea: {\n    width: ['80%', '424px', '424px'],\n    mb: ['35px', '35px', '40px', '40px'],\n  },\n  title: {\n    fontSize: ['28px', '32px', '36px', '42px', '48px'],\n    fontWeight: '500',\n    color: 'headingColor',\n    letterSpacing: '-0.025em',\n    mb: '28px',\n    textAlign: 'center',\n    lineHeight: '1.25',\n  },\n  description: {\n    fontSize: ['15px', '15px', '16px', '16px', '16px'],\n    color: '#5c636c',\n    lineHeight: '2.1',\n    textAlign: 'center',\n    mb: ['35px', '35px', '40px', '60px'],\n  },\n  ImageOne: {\n    ml: 'auto',\n    mr: 'auto',\n  },\n  buttonWrapper: {\n    flexBox: true,\n    justifyContent: 'center',\n  },\n  btnStyle: {\n    minWidth: '156px',\n    fontSize: ['13px', '14px'],\n    fontWeight: '500',\n    colors: 'secondaryWithBg',\n    pl: ['15px', '30px'],\n    pr: ['15px', '30px'],\n  },\n  outlineBtnStyle: {\n    minWidth: '156px',\n    fontSize: '16px',\n    fontWeight: '500',\n    color: '#0f2137',\n    colors: 'secondary',\n  },\n};\n\nexport default TrialSection;\n","import React, { Fragment } from 'react';\nimport { ThemeProvider } from 'styled-components';\nimport { Modal } from '@redq/reuse-modal';\nimport Sticky from 'react-stickynode';\nimport { DrawerProvider } from 'common/src/contexts/DrawerContext';\nimport { saasModernTheme } from 'common/src/theme/saasModern';\nimport { ResetCSS } from 'common/src/assets/css/style';\nimport {\n  GlobalStyle,\n  ContentWrapper,\n} from '../containers/SaasModern/sassModern.style';\n\nimport Navbar from '../containers/SaasModern/Navbar';\nimport BannerSection from '../containers/ContpaqiContabilidad/Banner';\nimport UpdateScreen from '../containers/ContpaqiContabilidad/UpdateScreen';\nimport TrialSection from '../containers/ContpaqiContabilidad/Trial';\n\nimport Footer from '../containers/SaasModern/Footer';\nimport '@redq/reuse-modal/es/index.css';\nimport SEO from '../components/seo';\n\nexport default () => {\n  return (\n    <ThemeProvider theme={saasModernTheme}>\n      <Fragment>\n        <SEO title=\"CONTPAQi® Contabilidad - ADAWARE\" />\n        <Modal />\n        <ResetCSS />\n        <GlobalStyle />\n        {/* End of Home head section */}\n        {/* Start Home wrapper section */}\n        <ContentWrapper>\n          <Sticky top={0} innerZ={9999} activeClass=\"sticky-nav-active\">\n            <DrawerProvider>\n              <Navbar />\n            </DrawerProvider>\n          </Sticky>\n          <BannerSection />\n          <UpdateScreen />\n          \n          <TrialSection />\n          <Footer />\n        </ContentWrapper>\n        {/* End of agency wrapper section */}\n      </Fragment>\n    </ThemeProvider>\n  );\n};\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.ic_play_circle_filled = void 0;\nvar ic_play_circle_filled = {\n  \"viewBox\": \"0 0 24 24\",\n  \"children\": [{\n    \"name\": \"path\",\n    \"attribs\": {\n      \"d\": \"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z\"\n    }\n  }]\n};\nexports.ic_play_circle_filled = ic_play_circle_filled;"],"sourceRoot":""}