{"version":3,"file":"component---src-pages-users-tsx-58dfc930a3ab02fe1f3c.js","mappings":"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","sources":["webpack://stamper-new-website/./src/components/motion-background/MotionBackground.tsx","webpack://stamper-new-website/./src/components/card/Card.tsx","webpack://stamper-new-website/./src/components/text-slider/Slide.tsx","webpack://stamper-new-website/./src/components/dot/Dot.tsx","webpack://stamper-new-website/./src/components/text-slider/TextSlider.tsx","webpack://stamper-new-website/./src/components/fade-slider/Slide.tsx","webpack://stamper-new-website/./src/components/fade-slider/slides.ts","webpack://stamper-new-website/./src/components/fade-slider/FadeSlider.tsx","webpack://stamper-new-website/./src/pages-config/user-config.ts","webpack://stamper-new-website/./src/pages/users.tsx","webpack://stamper-new-website/./src/images/card-container-bg.svg","webpack://stamper-new-website/./src/images/icons/user-grid-1.svg","webpack://stamper-new-website/./src/images/icons/user-grid-2.svg","webpack://stamper-new-website/./src/images/icons/user-grid-3.svg"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport { motion, useMotionValue, MotionProps } from \"framer-motion\";\n\nimport UserGrid1 from \"../../images/icons/user-grid-1.svg\";\nimport UserGrid2 from \"../../images/icons/user-grid-2.svg\";\nimport UserGrid3 from \"../../images/icons/user-grid-3.svg\";\n\ntype Props = {\n  variant: number;\n};\n\nconst BackgroundContainer = styled(motion.div)<MotionProps>`\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n`;\n\nconst Container = styled.div`\n  position: relative;\n  min-width: ${(props) => (props.theme.screens.md ? \"100%\" : \"560px\")};\n  text-align: center;\n`;\n\nconst MotionBackground: React.FC<Props> = ({ variant = 0, children }) => {\n  const x = useMotionValue(0);\n  const y = useMotionValue(0);\n\n  const wrapperRef = React.useRef(null);\n\n  const handleMouse = (event: React.MouseEvent) => {\n    if (!wrapperRef.current) return;\n    const {\n      left,\n      top,\n      width,\n      height,\n    } = wrapperRef.current.getBoundingClientRect();\n    x.set((left + 0.5 * width - event.clientX) / 15);\n    y.set((top + 0.5 * height - event.clientY) / 15);\n  };\n\n  const renderBackground = () => {\n    switch (variant) {\n      case 1:\n        return <UserGrid2 />;\n      case 2:\n        return <UserGrid3 />;\n      default:\n        return <UserGrid1 />;\n    }\n  };\n\n  return (\n    <Container ref={wrapperRef} onMouseMove={handleMouse}>\n      <BackgroundContainer initial={{ x: 0, y: 0 }} x={x} y={y}>\n        {renderBackground()}\n      </BackgroundContainer>\n      {children}\n    </Container>\n  );\n};\n\nexport { MotionBackground };\n","import styled from \"styled-components\";\n\nconst Card = styled.div`\n  /* min-height: 250px; */\n  /* padding: 15px; */\n  padding: ${(props) => props.theme.screens.md ? '60px 15px' : '15px'};\n  min-height: ${(props) => props.theme.screens.md ? '0' : '250px'};\n  background: #ffffff;\n  box-shadow: 0px 15px 35px rgba(0, 70, 245, 0.1);\n  border-radius: 30px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-family: \"Poppins\", sans-serif;\n`;\n\nconst CardTitle = styled.h6`\n  margin: 0 0 6px 0;\n  padding: 0;\n  font-weight: 700;\n  font-size: 42px;\n  line-height: 63px;\n  text-align: center;\n  color: #0147f5;\n`;\n\nconst CardText = styled.p`\n  margin: 0;\n  padding: 0;\n  font-weight: 400;\n  font-size: 20px;\n  line-height: 30px;\n  text-align: center;\n  color: #001331;\n`;\n\nexport { Card, CardTitle, CardText };\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { motion, AnimatePresence } from \"framer-motion\";\n\nimport { Slide as Props } from \"./types\";\n\nconst SlideTitle = styled.div`\n  margin-bottom: 8px;\n  font-family: Poppins, sans-serif;\n  font-weight: 400;\n  font-size: 36px;\n  line-height: 50px;\n  color: #709be7;\n`;\n\nconst SlideSubtitle = styled.div`\n  margin-bottom: 8px;\n  font-family: Poppins, sans-serif;\n  font-weight: 700;\n  font-size: 22px;\n  line-height: 33px;\n  color: #ffffff;\n`;\n\nconst SlideText = styled.p`\n  margin: 0;\n  padding: 0;\n  font-family: Nunito, sans-serif;\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 22px;\n  color: #7d9ae4;\n`;\n\nconst Slide: React.FC<Props> = ({ title, subtitle, text }) => (\n  <motion.div\n    initial={{ opacity: 0 }}\n    animate={{ opacity: 1 }}\n    exit={{ opacity: 0 }}\n    transition={{\n      x: { type: \"spring\", stiffness: 300, damping: 30 },\n      opacity: { duration: 0.3 },\n    }}\n  >\n    <SlideTitle>{title}</SlideTitle>\n    <SlideSubtitle>{subtitle}</SlideSubtitle>\n    <SlideText>{text}</SlideText>\n  </motion.div>\n);\n\nexport default Slide;\n","import styled, { css } from \"styled-components\";\n\nconst Dot = styled.div<{ isActive: boolean }>`\n  display: inline-block;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background-color: #fff;\n  border: 2px solid transparent;\n  cursor: pointer;\n\n  ${(props) =>\n    props.isActive &&\n    css`\n      border-color: #709be7;\n      background-color: transparent;\n    `};\n`;\nexport { Dot };\n","import React from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { layout, LayoutProps } from \"styled-system\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { useStaticQuery, graphql } from \"gatsby\";\nimport Img from \"gatsby-image\";\n\nimport Slide from \"./Slide\";\nimport { Dot } from \"../dot\";\nimport { SliderNav } from \"../slider-nav\";\n// import { Rotate } from \"../rotate\";\n\nimport { Slide as SlideType, Direction } from \"./types\";\n\nconst Navigation = styled.div`\n  display: flex;\n  flex-wrap: no-wrap;\n  align-items: center;\n  column-gap: 9px;\n  margin-top: 50px;\n`;\n\nconst Container = styled.div`\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-direction: ${(props) => (props.theme.screens.md ? \"column\" : \"row\")};\n`;\n\nconst Header = styled.h4`\n  font-family: Poppins, sans-serif;\n  font-weight: 400;\n  font-size: 36px;\n  line-height: 50px;\n  color: #709be7;\n\n  strong {\n    font-weight: 700;\n    color: #fff;\n  }\n`;\n\nconst HeaderContainer = styled.div`\n  margin-bottom: 120px;\n  ${(props) =>\n    props.theme.screens.md &&\n    css`\n      display: none;\n    `};\n`;\n\nconst Buttons = styled.div`\n  display: flex;\n  align-items: center;\n  column-gap: 10px;\n`;\n\nconst WrapperSection = styled.div<LayoutProps>`\n  display: flex;\n  flex-direction: column;\n\n  ${layout};\n\n  &:first-child {\n    ${(props) =>\n      props.theme.screens.md &&\n      css`\n        order: 20;\n        margin-top: 40px;\n      `};\n  }\n`;\n\nconst ImageContainer = styled(motion.div)`\n  flex-shrink: 0;\n`;\n\ntype Props = {\n  slides: SlideType[];\n  currentSlide?: number;\n};\n\nconst TextSlider: React.FC<Props> = ({ slides, currentSlide = 0 }) => {\n  const [activeSlide, setActiveSlide] = React.useState(currentSlide);\n\n  const { allFile } = useStaticQuery(graphql`\n    query {\n      allFile(\n        filter: { extension: { eq: \"png\" }, name: { regex: \"/slider-step/\" } }\n      ) {\n        edges {\n          node {\n            childImageSharp {\n              fixed(width: 265, height: 480) {\n                ...GatsbyImageSharpFixed_withWebp\n              }\n            }\n          }\n        }\n      }\n    }\n  `);\n\n  // console.log(query);\n\n  // const dots = [];\n  // for (let idx = 0; idx < slides.length; idx++) {\n  //   const isActive = idx === activeSlide;\n  //   dots.push(\n  //     <Dot\n  //       isActive={isActive}\n  //       onClick={() => (isActive ? null : setActiveSlide(idx))}\n  //     ></Dot>\n  //   );\n  // }\n\n  const handleClick = (direction: Direction) => {\n    if (direction === \"prev\") {\n      if (activeSlide === 0) return;\n      setActiveSlide(activeSlide - 1);\n    }\n\n    if (direction === \"next\") {\n      if (activeSlide === slides.length - 1) return;\n      setActiveSlide(activeSlide + 1);\n    }\n  };\n\n  return (\n    <Container>\n      <WrapperSection>\n        <HeaderContainer>\n          <Header>\n            <strong>To tylko</strong>\n            <br />3 kroki!\n          </Header>\n        </HeaderContainer>\n        <Buttons>\n          <SliderNav onClick={() => handleClick(\"prev\")} />\n          <SliderNav direction=\"right\" onClick={() => handleClick(\"next\")} />\n        </Buttons>\n      </WrapperSection>\n      <ImageContainer\n        key={activeSlide}\n        initial={{ opacity: 0 }}\n        animate={{ opacity: 1 }}\n        exit={{ opacity: 0 }}\n        transition={{\n          x: { type: \"spring\", stiffness: 300, damping: 30 },\n          opacity: { duration: 0.3 },\n        }}\n      >\n        <Img fixed={allFile.edges[activeSlide].node.childImageSharp.fixed} />\n      </ImageContainer>\n      <WrapperSection maxWidth={410}>\n        <AnimatePresence exitBeforeEnter>\n          <Slide key={slides[activeSlide].title} {...slides[activeSlide]} />\n        </AnimatePresence>\n        {/* {slides.map((slide) => <Slide key={slide.title} {...slide} />)} */}\n\n        {/* <Navigation>{dots}</Navigation> */}\n        <Navigation>\n          {slides.map((_slide, idx) => (\n            <Dot\n              isActive={idx === activeSlide}\n              onClick={() => (idx === activeSlide ? null : setActiveSlide(idx))}\n            />\n          ))}\n        </Navigation>\n      </WrapperSection>\n    </Container>\n  );\n};\n\nexport { TextSlider };\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { motion, AnimatePresence } from \"framer-motion\";\n\nimport { Slide as Props } from \"./types\";\n\nconst SlideTitle = styled.div`\n  margin-bottom: 8px;\n  font-family: Poppins, sans-serif;\n  font-weight: 700;\n  font-size: 22px;\n  line-height: 34px;\n  color: #fff;\n`;\n\nconst SlideText = styled.p`\n  margin: 0;\n  padding: 0;\n  font-family: Nunito, sans-serif;\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 22px;\n  color: #7d9ae4;\n`;\n\nconst Slide: React.FC<Props> = ({ title, text }) => (\n  <motion.div\n    initial={{ opacity: 0 }}\n    animate={{ opacity: 1 }}\n    exit={{ opacity: 0 }}\n    transition={{\n      x: { type: \"spring\", stiffness: 300, damping: 30 },\n      opacity: { duration: 0.3 },\n    }}\n  >\n    <SlideTitle>{title}</SlideTitle>\n    <SlideText>{text}</SlideText>\n  </motion.div>\n);\n\nexport default Slide;\n","export const slides = [\n  {\n    title: \"1. Wybierz nagrodę\",\n    text: 'Wejdź w sekcję \"nagrody\" i wybierz nagrodę, którą chcesz odebrać.',\n  },\n  {\n    title: \"2. Odbierz nagrodę w lokalu\",\n    text: 'Wybierz \"odbieram stacjonarnie\" jeżeli dobierasz nagrode w lokalu. Personel pokażę Ci zieloną kartę z kodem QR. Zeskanuj kod QR z karty, nagroda zostanie odebrana.',\n  },  \n  {\n    title: \"4. Odbierz nagrodę online\",\n    text: 'Wybierz \"odbierz online\" jeżeli dobierasz nagrode podczas zamówienia online. Na ekranie w aplikacji pojawi się kod, który należy wpisać podczas składania zamówienia w sklepie internetowy.',\n  },\n];","import React from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { layout, LayoutProps } from \"styled-system\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { useStaticQuery, graphql } from \"gatsby\";\nimport Img from \"gatsby-image\";\n\nimport Slide from \"./Slide\";\nimport { Dot } from \"../dot\";\nimport { SliderNav } from \"../slider-nav\";\n// import { Rotate } from \"../rotate\";\n\nimport { Direction } from \"./types\";\n\nimport { slides } from \"./slides\";\n\nconst Navigation = styled.div`\n  display: flex;\n  flex-wrap: no-wrap;\n  align-items: center;\n  column-gap: 9px;\n  /* margin-top: 140px; */\n  margin-top: ${(props) => (props.theme.screens.md ? \"40px\" : \"140px\")};\n`;\n\nconst Container = styled.div`\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  column-gap: 42px;\n\n  flex-direction: ${(props) => (props.theme.screens.md ? \"column\" : \"row\")};\n`;\n\nconst Header = styled.h4`\n  font-family: Poppins, sans-serif;\n  font-weight: 400;\n  font-size: 36px;\n  line-height: 50px;\n  color: #709be7;\n\n  strong {\n    font-weight: 700;\n    color: #fff;\n  }\n`;\n\nconst HeaderContainer = styled.div`\n  margin-bottom: 120px;\n`;\n\nconst Buttons = styled.div`\n  display: flex;\n  align-items: center;\n  column-gap: 10px;\n  margin-bottom: 54px;\n\n  ${(props) =>\n    props.theme.screens.md &&\n    css`\n      margin-top: 54px;\n      margin-bottom: 0;\n      justify-content: center;\n      order: 10;\n    `};\n`;\n\nconst WrapperSection = styled.div<LayoutProps>`\n  display: flex;\n  flex-direction: column;\n\n  ${layout};\n`;\n\nconst ImageContainer = styled.div`\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n\n  ${(props) =>\n    props.theme.screens.md &&\n    css`\n      width: 100%;\n    `};\n`;\n\nconst Image = styled(motion.div)<{ isActive: boolean }>`\n  filter: ${({ isActive }) => (isActive ? \"blur(0)\" : \"blur(5px)\")};\n\n  ${(props) =>\n    props.theme.screens.md &&\n    css`\n      min-width: 0;\n    `};\n`;\n\nconst variants = {\n  active: {\n    scale: 1,\n    // filter: \"blur(0)\",\n  },\n  inactive: {\n    scale: 0.8,\n    // filter: \"blur(5px)\",\n  },\n};\n\nconst FadeSlider: React.FC = () => {\n  const [activeSlide, setActiveSlide] = React.useState(0);\n\n  const {\n    allFile: { edges },\n  } = useStaticQuery(graphql`\n    query {\n      allFile(\n        filter: {\n          extension: { eq: \"png\" }\n          relativePath: { regex: \"/fade-slider/\" }\n        }\n      ) {\n        edges {\n          node {\n            childImageSharp {\n              fixed(width: 245, height: 444) {\n                ...GatsbyImageSharpFixed_withWebp\n                width\n                height\n              }\n            }\n          }\n        }\n      }\n    }\n  `);\n\n  // const dots = [];\n  // for (let idx = 0; idx < slides.length; idx++) {\n  //   const isActive = idx === activeSlide;\n  //   dots.push(\n  //     <Dot\n  //       isActive={isActive}\n  //       onClick={() => (isActive ? null : setActiveSlide(idx))}\n  //     ></Dot>\n  //   );\n  // }\n\n  const handleClick = (direction: Direction) => {\n    if (direction === \"prev\") {\n      if (activeSlide === 0) return;\n      setActiveSlide(activeSlide - 1);\n    }\n\n    if (direction === \"next\") {\n      if (activeSlide === edges.length - 1) return;\n      setActiveSlide(activeSlide + 1);\n    }\n  };\n\n  return (\n    <Container>\n      <ImageContainer>\n        {edges.map(\n          (\n            {\n              node: {\n                childImageSharp: { fixed },\n              },\n            }: any,\n            idx: number\n          ) => (\n            <Image\n              key={fixed.src}\n              variants={variants}\n              animate={idx === activeSlide ? \"active\" : \"inactive\"}\n              isActive={idx === activeSlide}\n            >\n              <Img fixed={fixed} />\n            </Image>\n          )\n        )}\n      </ImageContainer>\n      <WrapperSection maxWidth={410}>\n        <Buttons>\n          <SliderNav onClick={() => handleClick(\"prev\")} />\n          <SliderNav direction=\"right\" onClick={() => handleClick(\"next\")} />\n        </Buttons>\n        <AnimatePresence exitBeforeEnter>\n          <Slide key={slides[activeSlide].title} {...slides[activeSlide]} />\n        </AnimatePresence>\n        {/* <Navigation>{dots}</Navigation> */}\n        <Navigation>\n          {slides.map((_slide, idx) => (\n            <Dot\n              isActive={idx === activeSlide}\n              onClick={() => (idx === activeSlide ? null : setActiveSlide(idx))}\n            />\n          ))}\n        </Navigation>\n      </WrapperSection>\n    </Container>\n  );\n\n  // return (\n  //   <Container>\n  //     <WrapperSection>\n  //       <HeaderContainer>\n  //         <Header>\n  //           <strong>To tylko</strong>\n  //           <br />3 kroki!\n  //         </Header>\n  //       </HeaderContainer>\n  //       <Buttons>\n  //         <SliderNav onClick={() => handleClick(\"prev\")} />\n  //         <Rotate>\n  //           <SliderNav onClick={() => handleClick(\"next\")} />\n  //         </Rotate>\n  //       </Buttons>\n  //     </WrapperSection>\n  //     <ImageContainer>\n  //       <Img fixed={file.childImageSharp.fixed} />\n  //     </ImageContainer>\n  //     <WrapperSection maxWidth={410}>\n  //       <AnimatePresence exitBeforeEnter>\n  //         <Slide key={slides[activeSlide].title} {...slides[activeSlide]} />\n  //       </AnimatePresence>\n  //       {/* {slides.map((slide) => <Slide key={slide.title} {...slide} />)} */}\n\n  //       <Navigation>{dots}</Navigation>\n  //     </WrapperSection>\n  //   </Container>\n  // );\n};\n\nexport { FadeSlider };\n","export const slides = [\n  {\n    title: \"Krok 1\",\n    subtitle: \"Włącz skaner\",\n    text:\n      \"Włącz skaner w aplikacji. Wybierz ikonę 'Skanuj' aby uruchomiść skaner.\",\n  },\n  {\n    title: \"Krok 2\",\n    subtitle: \"Zeskanuj kod QR\",\n    text:\n      \"Jeżeli kupujesz na miejscu, personel pokaże Ci niebieską kartę z kodem QR, natomiast jeżeli zamawiasz online to do Twojego zamówienia dołączona będzie niebieska karta StampCardGo z kodem QR. Zeskanuj kod QR z karty udostępnionej przez personel lub dołączonej do zamówienia.\",\n  },\n  {\n    title: \"Krok 3\",\n    subtitle: \"Pieczątka została dodana\",\n    text:\n      \"Po zeskanowaniu kodu QR na ekranie pojawi się komunikat 'Pieczątka została dodana'. Pieczątka została dodana do Twojej karty lojalnościowej w aplikacji.\",\n  },\n];\n","import React from \"react\";\nimport { graphql, useStaticQuery } from \"gatsby\";\nimport Img from \"gatsby-image\";\nimport styled, { css, createGlobalStyle } from \"styled-components\";\nimport { motion } from \"framer-motion\";\nimport { RouteComponentProps } from \"@reach/router\";\nimport ReactPlayer from \"react-player/youtube\";\nimport \"@fontsource/poppins/400.css\";\nimport \"@fontsource/poppins/700.css\";\nimport \"@fontsource/nunito/400.css\";\nimport \"@fontsource/nunito/600.css\";\nimport \"@fontsource/nunito/700.css\";\n\nimport { Layout } from \"../components/layout\";\nimport { SEO } from \"../components/seo\";\n\nimport { Container } from \"../components/container\";\nimport { Headline, Bold } from \"../components/headline\";\nimport { Description } from \"../components/description\";\nimport { Button, IconContainer } from \"../components/button\";\nimport { Card, CardTitle, CardText } from \"../components/card\";\nimport {\n  ContentGrid,\n  Title,\n  TitleBold,\n  TextContainer as ContentGridTextContainer,\n  Description as ContentGridDescription,\n} from \"../components/content-grid\";\nimport { Newsletter } from \"../components/newsletter\";\nimport { TextSlider } from \"../components/text-slider\";\nimport { FadeSlider } from \"../components/fade-slider\";\nimport { SectionHeader, SectionSubtitle } from \"../components/section-header\";\nimport { Menu, MenuContainer } from \"../components/menu\";\nimport { MobileMenu } from \"../components/mobile-menu\";\nimport { Hero } from \"../components/hero\";\nimport { Map } from \"../components/map\";\n\nimport { CircleButton } from \"../components/circle-button\";\nimport { Checkbox } from \"../components/checkbox\";\nimport { MotionBackground } from \"../components/motion-background\";\n\nimport Android from \"../images/icons/android-icon.svg\";\nimport Apple from \"../images/icons/apple-icon.svg\";\n\nimport CardContainerBg from \"../images/card-container-bg.svg\";\n\n// import Bg from '../images/user-main-bg.svg';\n\nimport SectionImage from \"../images/user-section-image.jpg\";\nimport SliderBg from \"../images/slider-section-bg.svg\";\nimport SliderBgSmall from \"../images/slider-section-bg-small.svg\";\nimport UserGrid1 from \"../images/user-grid-1.svg\";\nimport UserGrid2 from \"../images/user-grid-2.svg\";\nimport UserGrid3 from \"../images/user-grid-3.svg\";\nimport MerchantVideoPoster from \"../images/merchant-video-poster.png\";\n\nimport { slides } from \"../pages-config/user-config\";\n\nconst GlobalStyles = createGlobalStyle`\n  body {\n    background-color: #F8FAFF;\n  }\n`;\n\nconst HeadlineContainer = styled.div`\n  margin-bottom: 20px;\n`;\n\nconst DescriptionContainer = styled.div`\n  margin-bottom: 40px;\n`;\n\nconst ButtonsContainer = styled.div`\n  display: flex;\n  gap: 20px;\n  flex-direction: ${(props) => (props.theme.screens.md ? \"column\" : \"row\")};\n  align-items: ${(props) => (props.theme.screens.md ? \"stretch\" : \"center\")};\n\n  ${(props) =>\n    props.theme.screens.md &&\n    css`\n      ${Button} {\n        justify-content: center;\n      }\n    `};\n`;\n\nconst MainSection = styled.section`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-direction: ${(props) => (props.theme.screens.md ? \"column\" : \"row\")};\n  padding-top: ${(props) => (props.theme.screens.md ? \"126px\" : \"0\")};\n`;\n\nconst TextContainer = styled.div`\n  flex-basis: ${(props) => (props.theme.screens.md ? \"100%\" : \"480px\")};\n  margin-right: ${(props) => (props.theme.screens.md ? \"0\" : \"150px\")};\n`;\n\nconst SectionBackground = styled.section`\n  position: relative;\n  margin-top: -150px;\n  z-index: -1;\n  padding-top: 350px;\n  padding-bottom: 234px;\n  background-image: linear-gradient(\n      180deg,\n      rgba(196, 196, 196, 0) 0%,\n      #000000 100%\n    ),\n    url(${SectionImage});\n  background-repeat: no-repeat, no-repeat;\n  background-position: 0 0, 50%;\n  background-size: 100%, cover;\n  margin-left: auto;\n  margin-right: auto;\n  max-width: 1920px;\n\n  /* &:before {\n    content: '';\n    width: 100%;\n    height: 150px;\n    display: block;\n    background-color: #fff;\n    position: absolute;\n    bottom: 0;\n  } */\n`;\n\nconst SectionTitle = styled.h5`\n  margin: 0;\n  font-family: Poppins, sans-serif;\n  font-weight: 700;\n  line-height: 50px;\n  text-align: center;\n  color: #fff;\n\n  font-size: ${(props) => (props.theme.screens.md ? \"28px\" : \"36px\")};\n`;\n\nconst SectionDescription = styled.p`\n  margin: 0;\n  font-family: Poppins, sans-serif;\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 24px;\n  text-align: center;\n`;\n\nconst CardContainer = styled.div`\n  display: flex;\n  gap: 30px 40px;\n  ${Card} {\n    flex: 1;\n  }\n\n  flex-direction: ${(props) => (props.theme.screens.md ? \"column\" : \"row\")};\n`;\n\nconst CardHolder = styled.div`\n  position: relative;\n  /* margin-bottom: 200px; */\n  margin-bottom: ${(props) => (props.theme.screens.md ? \"0\" : \"200px\")};\n  margin-left: auto;\n  margin-right: auto;\n  max-width: 1920px;\n\n  &:before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    top: -100px;\n    left: 0;\n    right: 0;\n    height: 100px;\n    background: url(${CardContainerBg}) 0 0 no-repeat;\n    background-size: cover;\n  }\n`;\n\nconst CardPosition = styled.div`\n  /* position: absolute; */\n  position: ${(props) => (props.theme.screens.md ? \"static\" : \"absolute\")};\n  top: 0;\n  left: 0;\n  right: 0;\n  /* transform: translate(0px, -60%); */\n  transform: ${(props) =>\n    props.theme.screens.md ? \"translate(0px, -150px)\" : \"translate(0px, -60%)\"};\n`;\n\nconst SliderSection = styled.div`\n  /* background: url(${SliderBg}) 0 0 no-repeat; */\n  background: ${(props) =>\n    props.theme.screens.md\n      ? `url(${SliderBgSmall}) 0 0 no-repeat`\n      : `url(${SliderBg}) 0 0 no-repeat`};\n  background-size: cover;\n  padding: 164px 0 126px 0;\n  /* min-height: 1692px; */\n  min-height: ${(props) => (props.theme.screens.md ? \"1880px\" : \"1692px\")};\n  position: relative;\n  margin-left: auto;\n  margin-right: auto;\n  max-width: 1920px;\n\n  &:after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    z-index: -1;\n    width: 100%;\n    height: 126px;\n    background-color: #fff;\n  }\n`;\n\nconst SectionWhite = styled.div`\n  background-color: #fff;\n  margin-left: auto;\n  margin-right: auto;\n  max-width: 1920px;\n`;\n\nconst UserPage: React.FC<RouteComponentProps> = ({ location = {} }) => {\n  const path = location.pathname;\n\n  const query = useStaticQuery(graphql`\n    query {\n      mainImage: file(name: { eq: \"user-main\" }) {\n        childImageSharp {\n          fixed(width: 474, pngQuality: 90, webpQuality: 90) {\n            ...GatsbyImageSharpFixed_withWebp\n          }\n        }\n      }\n      userGrid: allFile(\n        filter: { extension: { eq: \"png\" }, name: { regex: \"/user-grid/\" } }\n      ) {\n        edges {\n          node {\n            childImageSharp {\n              fixed(width: 560, height: 560, pngQuality: 90, webpQuality: 90) {\n                ...GatsbyImageSharpFixed_withWebp\n              }\n            }\n            name\n          }\n        }\n      }\n    }\n  `);\n\n  console.log(query);\n\n  return (\n    <>\n      <GlobalStyles />\n      <Layout>\n        <SEO title=\"Stamper - dla użytkowników\"/>\n        <Hero>\n          <Container>\n            <MenuContainer>\n              <Menu />\n            </MenuContainer>\n          </Container>\n          <MobileMenu />\n          <Container>\n            <MainSection>\n              <TextContainer>\n                <HeadlineContainer>\n                  <Headline>\n                    <Bold>Zbieraj pieczątki,</Bold>\n                    <br />\n                    odbieraj nagrody\n                  </Headline>\n                </HeadlineContainer>\n                <DescriptionContainer>\n                  <Description>\n                    Przenieś się w świat, gdzie papierowe karty lojalnościowe\n                    nie zalegają Ci w portfelu, a do wzięcia udziału w promocji\n                    dzieli Cię tylko kilka kliknięć. Witaj w świecie aplikacji\n                    Stamper!\n                  </Description>\n                </DescriptionContainer>\n                <ButtonsContainer>\n                  <Button variant=\"primary\" onClick={()=>{window.open('https://play.google.com/store/apps/details?id=com.getstamper.app')}}>\n                    Pobierz aplikację{\" \"}\n                    <IconContainer>\n                      <Android />\n                    </IconContainer>\n                  </Button>\n                  <Button variant=\"primary\" onClick={()=>{window.open('https://apps.apple.com/gb/app/stamper/id1467621267')}}>\n                    Pobierz aplikację{\" \"}\n                    <IconContainer>\n                      <Apple />\n                    </IconContainer>\n                  </Button>\n                </ButtonsContainer>\n              </TextContainer>\n              <Img fixed={query.mainImage.childImageSharp.fixed} alt=\"\" />\n            </MainSection>\n          </Container>\n        </Hero>\n        <SectionBackground>\n          <SectionTitle>Korzystaj jak inni</SectionTitle>\n          <SectionDescription>\n            Co miesiąc użytkownicy odbierają nowe nagrody\n            <br />i korzystają z okazji! Już ponad:{\" \"}\n          </SectionDescription>\n        </SectionBackground>\n        <CardHolder>\n          <CardPosition>\n            <Container>\n              <CardContainer>\n                <Card>\n                  <div>\n                    <CardTitle>3 000</CardTitle>\n                    <CardText>osób odebrało nagrody w aplikacji</CardText>\n                  </div>\n                </Card>\n                <Card>\n                  <div>\n                    <CardTitle>100 000zł</CardTitle>\n                    <CardText>były warte odebrane nagrody</CardText>\n                  </div>\n                </Card>\n                <Card>\n                  <div>\n                    <CardTitle>350</CardTitle>\n                    <CardText>lokali dołączyło do Stampera</CardText>\n                  </div>\n                </Card>\n              </CardContainer>\n            </Container>\n          </CardPosition>\n        </CardHolder>\n        <Container>\n          <ContentGrid>\n            <ContentGridTextContainer>\n              <Title>\n                <TitleBold>Nie przegapisz</TitleBold>\n                <br />\n                żadnej okazji\n              </Title>\n              <ContentGridDescription>\n                Już nigdy nie przepadną Ci nagrody. Gdy wypełnisz kartę\n                określoną ilością pieczątek - automatycznie dostaniesz\n                powiadomienie, że nagroda czeka na Ciebie do odebrania! Wybierając się na\n                miasto w łatwy sposób sprawdzisz gdzie zahaczyć by odebrać\n                benefity, dzięki sprytnej opcji \"okolica\".\n              </ContentGridDescription>\n            </ContentGridTextContainer>\n            <MotionBackground variant={0}>\n              <Img\n                fixed={query.userGrid.edges[0].node.childImageSharp.fixed}\n                alt=\"stamper, aplikacja mobilna z programem lojalnościowym, mapa lokali\"\n              />\n            </MotionBackground>\n          </ContentGrid>\n          <ContentGrid>\n            <MotionBackground variant={1}>\n              <Img\n                fixed={query.userGrid.edges[1].node.childImageSharp.fixed}\n                alt=\"stamper, aplikacja mobilna z programem lojalnościowym, portfel kart\"\n              />\n            </MotionBackground>\n            <ContentGridTextContainer>\n              <Title>\n                <TitleBold>Koniec z zapomnianymi</TitleBold>\n                <br />\n                kartami\n              </Title>\n              <ContentGridDescription>\n                Łatwo dodawaj karty do wirtualnego portfela, by zawsze mieć je\n                pod ręką. Zbieraj karty - skanuj pieczątki i śledź swoje\n                promocje. Stamper mówi \"stop!\" niewykorzystanym kartom\n                lojalnościowym. Łap smartfon, po zakupie skanuj kod QR od\n                sprzedawcy lub z karty StampCardGo i korzystaj z nagród bez limitu!\n              </ContentGridDescription>\n            </ContentGridTextContainer>\n          </ContentGrid>\n          <ContentGrid>\n            <ContentGridTextContainer>\n              <Title>\n                <TitleBold>Jak to działa</TitleBold>\n              </Title>\n              <ContentGridDescription>\n                Aplikacja Stamper działa do zarówno zamówień czy usług na\n                miejscu, jak i zamówień na wynos. Niezależnie od tego jak i co\n                zamawiasz, zawsze zostaniesz nagrodzony.\n              </ContentGridDescription>\n            </ContentGridTextContainer>\n            <MotionBackground variant={2}>\n              <ReactPlayer\n                url=\"https://youtu.be/MhtitC4vwNA\"\n                light={MerchantVideoPoster}\n                playIcon={<CircleButton />}\n                style={{\n                  position: \"relative\",\n                  zIndex: 1,\n                }}\n                width={457}\n                height={257}\n              />\n            </MotionBackground>\n          </ContentGrid>\n        </Container>\n        <SliderSection>\n          <Container>\n            <SectionHeader color=\"#fff\" marginBottom={75}>\n              <strong>Dodawanie pieczątek:</strong>\n            </SectionHeader>\n            <TextSlider slides={slides} />\n          </Container>\n          <Container>\n            <SectionHeader color=\"#fff\" marginTop={118} marginBottom={28}>\n              <strong>Odbieranie nagrody</strong>\n            </SectionHeader>\n            <FadeSlider />\n          </Container>\n        </SliderSection>\n        <SectionWhite>\n          <SectionHeader paddingTop={86} marginBottom={15}>\n            <strong>Gdzie możesz korzystać</strong> ze Stampera?\n          </SectionHeader>\n          <SectionSubtitle paddingBottom={67}>\n            Sprawdź, które miejsca oferują programy lojalnościowe w aplikacji{\" \"}\n          </SectionSubtitle>\n        </SectionWhite>\n        <Map />\n        <Newsletter />\n      </Layout>\n    </>\n  );\n};\n\nexport default UserPage;\n","export default \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI5ODAiIHZpZXdCb3g9IjAgMCAxOTIwIDk4MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5MjYgOTc5LjVIMFYwQzAgMCAzNDMuOTQxIDAuMzM2NjcgNTcxLjUgNDkuOTM2NkM3OTkuMDU5IDk5LjUzNjYgMTAwOS41IDk5LjYwODYgMTMyOCA1OS41ODA3QzE2NDYuNSAxOS41NTI3IDE5MjYgMTAuODgxMyAxOTI2IDEwLjg4MTNWOTc5LjVaIiBmaWxsPSIjRjhGQUZGIi8+Cjwvc3ZnPgo=\"","var React = require('react');\n\nfunction UserGrid1 (props) {\n    return React.createElement(\"svg\",props,React.createElement(\"path\",{\"opacity\":\"0.15\",\"fillRule\":\"evenodd\",\"clipRule\":\"evenodd\",\"d\":\"M489.591 556.562C536.99 518.857 468.588 431.859 461.199 365.858C454.257 303.851 485.404 242.581 448.266 187.429C405.292 123.611 332.444 71.6215 261.152 68.781C191.334 65.9992 141.887 119.34 106.855 173.826C77.9702 218.75 72.7305 277.853 89.7598 335.347C103.848 382.911 147.332 415.906 187.979 447.716C221.138 473.666 257.938 483.153 296.328 497.007C362.698 520.959 441.045 595.179 489.591 556.562Z\",\"fill\":\"#709BE7\"}));\n}\n\nUserGrid1.defaultProps = {\"width\":\"658\",\"height\":\"658\",\"viewBox\":\"0 0 658 658\",\"fill\":\"none\"};\n\nmodule.exports = UserGrid1;\n\nUserGrid1.default = UserGrid1;\n","var React = require('react');\n\nfunction UserGrid2 (props) {\n    return React.createElement(\"svg\",props,React.createElement(\"path\",{\"opacity\":\"0.15\",\"fillRule\":\"evenodd\",\"clipRule\":\"evenodd\",\"d\":\"M300.507 560.066C245.552 564.594 201.306 523.822 157.425 490.431C123.4 464.539 94.9619 433.822 81.3432 393.293C67.4256 351.875 72.4072 309.737 82.4151 267.205C97.4849 203.16 91.1742 114.51 152.53 90.7564C213.583 67.1205 262.279 147.422 321.887 174.495C388.472 204.737 484.616 190.274 516.525 256.078C549.175 323.41 506.227 404.26 462.881 465.259C425.14 518.37 365.442 554.715 300.507 560.066Z\",\"fill\":\"#709BE7\"}));\n}\n\nUserGrid2.defaultProps = {\"width\":\"587\",\"height\":\"613\",\"viewBox\":\"0 0 587 613\",\"fill\":\"none\"};\n\nmodule.exports = UserGrid2;\n\nUserGrid2.default = UserGrid2;\n","var React = require('react');\n\nfunction UserGrid3 (props) {\n    return React.createElement(\"svg\",props,React.createElement(\"path\",{\"opacity\":\"0.15\",\"fillRule\":\"evenodd\",\"clipRule\":\"evenodd\",\"d\":\"M95.5773 130.664C65.1287 183.021 160.479 239.198 191.357 297.997C220.366 353.238 213.625 421.639 268.272 459.516C331.507 503.344 418.271 525.292 485.717 502.021C551.769 479.23 578.44 411.563 591.268 348.07C601.844 295.718 585.238 238.754 548.473 191.385C518.057 152.198 465.553 137.269 416.123 122.413C375.799 110.293 338.067 114.833 297.268 115.884C226.732 117.699 126.763 77.041 95.5773 130.664Z\",\"fill\":\"#709BE7\"}));\n}\n\nUserGrid3.defaultProps = {\"width\":\"657\",\"height\":\"569\",\"viewBox\":\"0 0 657 569\",\"fill\":\"none\"};\n\nmodule.exports = UserGrid3;\n\nUserGrid3.default = UserGrid3;\n"],"names":["BackgroundContainer","styled","motion","Container","props","theme","screens","md","MotionBackground","variant","children","x","useMotionValue","y","wrapperRef","React","ref","onMouseMove","event","current","getBoundingClientRect","left","top","width","height","set","clientX","clientY","initial","renderBackground","Card","CardTitle","CardText","SlideTitle","SlideSubtitle","SlideText","title","subtitle","text","opacity","animate","exit","transition","type","stiffness","damping","duration","Dot","isActive","css","Navigation","Header","HeaderContainer","Buttons","WrapperSection","layout","ImageContainer","TextSlider","slides","currentSlide","activeSlide","setActiveSlide","allFile","useStaticQuery","handleClick","direction","length","onClick","key","fixed","edges","node","childImageSharp","maxWidth","exitBeforeEnter","map","_slide","idx","Image","variants","active","scale","inactive","FadeSlider","src","GlobalStyles","createGlobalStyle","HeadlineContainer","DescriptionContainer","ButtonsContainer","Button","MainSection","TextContainer","SectionBackground","SectionImage","SectionTitle","SectionDescription","CardContainer","CardHolder","CardPosition","SliderSection","SliderBgSmall","SliderBg","SectionWhite","location","query","pathname","console","log","window","open","mainImage","alt","userGrid","url","light","MerchantVideoPoster","playIcon","style","position","zIndex","color","marginBottom","marginTop","paddingTop","paddingBottom","UserGrid1","createElement","defaultProps","module","exports","default","UserGrid2","UserGrid3"],"sourceRoot":""}