{"version":3,"sources":["webpack:///../common/src/assets/image/productos/banner-image.png","webpack:///./src/containers/Productos/BlogSection/blogSection.style.js","webpack:///./src/containers/Productos/BlogSection/index.js","webpack:///./src/containers/Productos/Banner/banner.style.js","webpack:///./src/containers/Productos/Banner/index.js","webpack:///./src/pages/productos.js","webpack:///../common/src/components/FeatureBlock/featureBlock.style.js","webpack:///../common/src/components/FeatureBlock/index.js"],"names":["module","exports","BlogSectionWrapper","styled","section","BlogSection","row","sectionHeader","sectionTitle","sectionSubTitle","blogTitle","blogMeta","id","Container","Box","Text","content","Heading","className","PRODUCTOS","map","post","index","FeatureBlock","key","icon","Image","src","thumbnail_url","alt","title","to","postLink","description","date","defaultProps","mb","as","display","textAlign","fontSize","letterSpacing","fontWeight","color","flexBox","flexWrap","ml","mr","lineHeight","Bubble","keyframes","BannerWrapper","div","BannerSection","contentWrapper","imageWrapper","bottom","BannerImage","alignItems","justifyContent","width","theme","saasModernTheme","top","innerZ","activeClass","Navbar","Banner","Footer","FeatureBlockWrapper","height","flexDirection","position","space","borders","borderColor","boxShadow","borderRadius","overflow","IconWrapper","ContentWrapper","ButtonWrapper","button","iconPosition","additionalContent","wrapperStyle","iconStyle","contentStyle","btnWrapperStyle","props","addAllClasses","push","Icon","join"],"mappings":"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","file":"component---src-pages-productos-js-d7a5ab1081557663a582.js","sourcesContent":["module.exports = __webpack_public_path__ + \"static/banner-image-68bcff7f055493f4b41cf77c9b68ac23.png\";","import styled from 'styled-components';\n\nconst BlogSectionWrapper = styled.section`\n  padding: 80px 0;\n  overflow: hidden;\n  @media (max-width: 990px) {\n    padding: 60px 0;\n  }\n  @media (max-width: 767px) {\n    padding: 40px 0;\n  }\n\n  .feature__block {\n    &.blog__post {\n      border-radius: 5px;\n      overflow: hidden;\n      position: relative;\n      width: calc(100% / 3 - 24px);\n      height: 450px;\n      margin: 0 12px;\n      transition: all 0.3s ease;\n      @media only screen and (max-width: 1200px) {\n        height: 400px;\n      }\n      @media only screen and (max-width: 991px) {\n        width: calc(100% / 2 - 24px);\n        margin-bottom: 24px;\n        &:first-child {\n          width: 100%;\n        }\n      }\n      @media only screen and (max-width: 767px) {\n        width: calc(100% - 24px);\n      }\n      .icon__wrapper {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        img {\n          width: 100%;\n          height: 100%;\n          object-fit: cover;\n        }\n      }\n      .content__wrapper {\n        opacity: 0;\n        visibility: hidden;\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        padding: 25px;\n        display: flex;\n        flex-direction: column;\n        justify-content: flex-end;\n        background-color: rgba(0, 0, 0, 0.9);\n        background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));\n        transition: all 0.3s ease;\n        a {\n          font-size: 24px;\n          color: white;\n          font-weight: 700;\n          text-decoration: underline;\n          transform: translateY(50px);\n          transition: all 0.3s ease;\n        }\n        p {\n          transform: translateY(50px);\n          transition: all 0.35s ease;\n        }\n      }\n\n      &:hover {\n        .content__wrapper {\n          opacity: 1;\n          visibility: visible;\n          a {\n            transform: translateY(0);\n          }\n          p {\n            transform: translateY(0);\n          }\n        }\n      }\n      &:first-child {\n        .content__wrapper {\n          @media (max-width: 990px) {\n            opacity: 1;\n            visibility: visible;\n            a {\n              transform: translateY(0);\n            }\n            p {\n              transform: translateY(0);\n            }\n          }\n        }\n      }\n    }\n  }\n`;\n\nexport default BlogSectionWrapper;\n","import React from 'react';\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 { Link } from 'gatsby';\nimport Image from 'reusecore/src/elements/Image';\nimport FeatureBlock from 'common/src/components/FeatureBlock';\nimport Container from 'common/src/components/UI/Container';\nimport BlogSectionWrapper from './blogSection.style';\nimport { PRODUCTOS } from 'common/src/data/SaasModern';\n\nconst BlogSection = ({\n  row,\n  sectionHeader,\n  sectionTitle,\n  sectionSubTitle,\n  blogTitle,\n  blogMeta,\n}) => {\n  return (\n    <BlogSectionWrapper id=\"blogSection\">\n      <Container>\n        <Box {...sectionHeader}>\n          <Text content=\"PRODUCTOS\" {...sectionSubTitle} />\n          <Heading\n            content=\"Conoce la gama de productos que solucionan los problemas de nuestros clientes\"\n            {...sectionTitle}\n          />\n        </Box>\n        <Box className=\"row\" {...row}>\n          {PRODUCTOS.map((post, index) => (\n            <FeatureBlock\n              key={`post_key-${index}`}\n              id={`post_id-${post.id}`}\n              className=\"blog__post\"\n              icon={\n                <Image\n                  src={post.thumbnail_url}\n                  alt={`Blog Image ${post.id}`}\n                  className=\"blog__image\"\n                />\n              }\n              title={\n                <Link to={post.postLink} {...blogTitle}>\n                  {post.title}\n                </Link>\n              }\n              description={<Text content={post.date} {...blogMeta} />}\n            />\n          ))}\n        </Box>\n      </Container>\n    </BlogSectionWrapper>\n  );\n};\n\n// BlogSection style props\nBlogSection.propTypes = {\n  sectionHeader: PropTypes.object,\n  row: PropTypes.object,\n  col: PropTypes.object,\n  sectionTitle: PropTypes.object,\n  sectionSubTitle: PropTypes.object,\n  blogTitle: PropTypes.object,\n  blogMeta: PropTypes.object,\n};\n\n// BlogSection default style\nBlogSection.defaultProps = {\n  // section header default style\n  sectionHeader: {\n    mb: ['40px', '56px'],\n  },\n  // sub section default style\n  sectionSubTitle: {\n    as: 'span',\n    display: 'block',\n    textAlign: 'center',\n    fontSize: '14px',\n    letterSpacing: '0.15em',\n    fontWeight: '700',\n    color: '#f15a24',\n    mb: '10px',\n  },\n  // section title default style\n  sectionTitle: {\n    textAlign: 'center',\n    fontSize: ['20px', '24px'],\n    fontWeight: '400',\n    color: '#302b4e',\n    letterSpacing: '-0.025em',\n    mb: '0',\n  },\n  // Blog post row default style\n  row: {\n    flexBox: true,\n    flexWrap: 'wrap',\n    ml: '-12px',\n    mr: '-12px',\n    color: '#fff',\n  },\n  // Blog post title default style\n  blogTitle: {\n    fontSize: ['24px', '36px'],\n    fontWeight: '700',\n    color: '#fff',\n    lineHeight: '1.5',\n    mb: '10px',\n    letterSpacing: '-0.020em',\n  },\n  // Blog post description default style\n  blogMeta: {\n    fontSize: '16px',\n    lineHeight: '1',\n    color: 'rgba(255, 255, 255, 0.5)',\n    mb: 0,\n  },\n};\n\nexport default BlogSection;\n","import styled, { keyframes } from 'styled-components';\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 0 0;\n  background-image: linear-gradient(\n    35deg,\n    rgb(3, 56, 117) 0%, \n    rgb(15, 100, 135) 100%\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  .banner-shape {\n    z-index: 2;\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(255, 255, 255, 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  &:before {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    display: block;\n    background: linear-gradient(\n      -139deg,\n      rgb(255, 65, 108) 0%,\n      rgb(255, 75, 43) 100%\n    );\n    opacity: 0.2;\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","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Fade from 'react-reveal/Fade';\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 { BannerWrapper } from './banner.style';\nimport BannerImage from 'common/src/assets/image/productos/banner-image.png';\n\n\n\nconst BannerSection = ({\n  row,\n  contentWrapper,\n  title,\n  description,\n  imageWrapper,\n}) => {\n  return (\n    <BannerWrapper id=\"banner_section\">\n      <Container>\n        <Box {...row}>\n          <Box {...contentWrapper}>\n            <Heading\n              {...title}\n              content=\"Adelante, eres bienvenido.\"\n            />\n            <Text\n              {...description}\n              content=\"Da un vistazo a los productos que hemos seleccionado cuidadosamente como los mejores en el área administrativa, contable y seguridad TI. \n              \"\n            />\n          </Box>\n          <Box {...imageWrapper}>\n            <Fade bottom>\n              <Image src={BannerImage} alt=\"Imagen de Productos que ofrecemos en ADAWARE\" />\n            </Fade>\n          </Box>\n        </Box>\n      </Container>\n    </BannerWrapper>\n  );\n};\n\nBannerSection.propTypes = {\n  row: PropTypes.object,\n  contentWrapper: PropTypes.object,\n  title: PropTypes.object,\n  description: PropTypes.object,\n  imageWrapper: 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%', '80%', '55%', '50%'],\n    mb: '40px',\n  },\n  title: {\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: ['15px', '16px', '16px', '16px', '16px'],\n    color: '#fff',\n    lineHeight: '1.75',\n    mb: '0',\n    textAlign: 'center',\n  },\n};\n\nexport default BannerSection;\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 BlogSection from '../containers/Productos/BlogSection';\nimport Navbar from '../containers/SaasModern/Navbar';\nimport BannerSection from '../containers/Productos/Banner';\n\n\nimport Footer from '../containers/SaasModern/Footer';\nimport SEO from '../components/seo';\n\nexport default () => {\n  return (\n    <ThemeProvider theme={saasModernTheme}>\n      <Fragment>\n        <SEO title=\"ADAWARE - Productos Administrativos, Contables, Seguridad TI\" />\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\n          <BannerSection />\n          <BlogSection />\n\n          <Footer />\n        </ContentWrapper>\n        {/* End of agency wrapper section */}\n      </Fragment>\n    </ThemeProvider>\n  );\n};\n","import styled from 'styled-components';\r\nimport {\r\n  color,\r\n  width,\r\n  height,\r\n  display,\r\n  space,\r\n  borders,\r\n  borderColor,\r\n  boxShadow,\r\n  borderRadius,\r\n  flexWrap,\r\n  alignItems,\r\n  justifyContent,\r\n  flexDirection,\r\n  position,\r\n  overflow,\r\n  fontSize,\r\n  textAlign,\r\n} from 'styled-system';\r\n\r\n// FeatureBlock wrapper style\r\nconst FeatureBlockWrapper = styled.div`\r\n  &.icon_left {\r\n    display: flex;\r\n    .icon__wrapper{\r\n      flex-shrink: 0;\r\n    }\r\n  }\r\n  &.icon_right {\r\n    display: flex;\r\n    flex-direction: row-reverse;\r\n    .content__wrapper {\r\n      text-align: right;\r\n    }\r\n    .icon__wrapper{\r\n      flex-shrink: 0;\r\n    }\r\n  }\r\n\r\n  /* styled system prop support */\r\n  ${display}\r\n  ${width}\r\n  ${height}\r\n  ${flexWrap}\r\n  ${flexDirection}\r\n  ${alignItems}\r\n  ${justifyContent}\r\n  ${position}\r\n  ${color}\r\n  ${space}\r\n  ${borders}\r\n  ${borderColor}\r\n  ${boxShadow}\r\n  ${borderRadius}\r\n  ${overflow}\r\n`;\r\n\r\n// Icon wrapper style\r\nconst IconWrapper = styled.div`\r\n  ${display}\r\n  ${width}\r\n  ${height}\r\n  ${alignItems}\r\n  ${justifyContent}\r\n  ${position}\r\n  ${color}\r\n  ${space}\r\n  ${borders}\r\n  ${borderColor}\r\n  ${boxShadow}\r\n  ${borderRadius}\r\n  ${overflow}\r\n  ${fontSize}\r\n`;\r\n\r\n// Content wrapper style\r\nconst ContentWrapper = styled.div`\r\n  ${width}\r\n  ${space}\r\n  ${textAlign}\r\n`;\r\n\r\n// Button wrapper style\r\nconst ButtonWrapper = styled.div`\r\n  ${display}\r\n  ${space}\r\n  ${alignItems}\r\n  ${flexDirection}\r\n  ${justifyContent}\r\n`;\r\n\r\nexport { IconWrapper, ContentWrapper, ButtonWrapper };\r\nexport default FeatureBlockWrapper;\r\n","import React, { Fragment } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport FeatureBlockWrapper, {\r\n  IconWrapper,\r\n  ContentWrapper,\r\n  ButtonWrapper,\r\n} from './featureBlock.style';\r\n\r\nconst FeatureBlock = ({\r\n  className,\r\n  icon,\r\n  title,\r\n  button,\r\n  description,\r\n  iconPosition,\r\n  additionalContent,\r\n  wrapperStyle,\r\n  iconStyle,\r\n  contentStyle,\r\n  btnWrapperStyle,\r\n  ...props\r\n}) => {\r\n  // Add all classs to an array\r\n  const addAllClasses = ['feature__block'];\r\n\r\n  // Add icon position class\r\n  if (iconPosition) {\r\n    addAllClasses.push(`icon_${iconPosition}`);\r\n  }\r\n\r\n  // className prop checking\r\n  if (className) {\r\n    addAllClasses.push(className);\r\n  }\r\n\r\n  // check icon value and add\r\n  const Icon = icon && (\r\n    <IconWrapper className=\"icon__wrapper\" {...iconStyle}>\r\n      {icon}\r\n    </IconWrapper>\r\n  );\r\n\r\n  return (\r\n    <FeatureBlockWrapper\r\n      className={addAllClasses.join(' ')}\r\n      {...wrapperStyle}\r\n      {...props}\r\n    >\r\n      {Icon}\r\n\r\n      {title || description || button ? (\r\n        <Fragment>\r\n          <ContentWrapper className=\"content__wrapper\" {...contentStyle}>\r\n            {title}\r\n            {description}\r\n            {button && (\r\n              <ButtonWrapper className=\"button__wrapper\" {...btnWrapperStyle}>\r\n                {button}\r\n              </ButtonWrapper>\r\n            )}\r\n          </ContentWrapper>\r\n          {additionalContent}\r\n        </Fragment>\r\n      ) : (\r\n        ''\r\n      )}\r\n    </FeatureBlockWrapper>\r\n  );\r\n};\r\n\r\nFeatureBlock.propTypes = {\r\n  /** ClassName of the FeatureBlock */\r\n  className: PropTypes.string,\r\n\r\n  /** title prop contain a react component. You can use our Heading component from reusecore */\r\n  title: PropTypes.element,\r\n\r\n  /** description prop contain a react component. You can use our Text component from reusecore */\r\n  description: PropTypes.element,\r\n\r\n  /** button prop contain a react component. You can use our Button component from reusecore */\r\n  button: PropTypes.element,\r\n\r\n  /** Set icon position of the FeatureBlock */\r\n  iconPosition: PropTypes.oneOf(['top', 'left', 'right']),\r\n\r\n  /** wrapperStyle prop contain these style system props:  display, flexWrap, width, height, alignItems,\r\n   * justifyContent, position, overflow, space, color, borders, borderColor, boxShadow and borderRadius. */\r\n  wrapperStyle: PropTypes.object,\r\n\r\n  /** iconStyle prop contain these style system props: display, width, height, alignItems, justifyContent,\r\n   * position, space, fontSize, color, borders, overflow, borderColor, boxShadow and borderRadius. */\r\n  iconStyle: PropTypes.object,\r\n\r\n  /** contentStyle prop contain these style system props: width, textAlign and space. */\r\n  contentStyle: PropTypes.object,\r\n\r\n  /** btnWrapperStyle prop contain these style system props: display, space, alignItems,\r\n   * flexDirection and justifyContent. */\r\n  btnWrapperStyle: PropTypes.object,\r\n};\r\n\r\nFeatureBlock.defaultProps = {\r\n  iconPosition: 'top',\r\n};\r\n\r\nexport default FeatureBlock;\r\n"],"sourceRoot":""}