{"version":3,"file":"component---src-pages-index-tsx-64172f94619f8313b33e.js","mappings":"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","sources":["webpack://garage51/./src/components/SlideButton.tsx","webpack://garage51/./node_modules/react-div-100vh/dist/esm/index.js","webpack://garage51/./src/pages/index.tsx","webpack://garage51/./src/images/icons/Icn_Mail.svg"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { colors, fonts } from \"./Styles\"\nimport MailIcon from \"../images/icons/Icn_Mail.svg\"\nimport Modal from \"./Modal\"\nimport ContactForm, { ThanksModal } from \"./modals/ContactForm\"\nimport useIntersectionObserver from \"../util/use-intersection-observer\"\nimport { useTranslation } from \"gatsby-plugin-react-i18next\"\n\nconst SlideButton: React.FC<{\n  href?: string\n  shouldAppear?: boolean\n  onClick?: (e: React.MouseEvent<any, MouseEvent>) => void\n  className?: string\n}> = ({ onClick, href, className, children }) => {\n  const { t } = useTranslation()\n  return (\n    <>\n      <Button onClick={e => onClick?.(e)} className={className}>\n        <span>{t(\"Jetzt anfragen\")}</span>\n        <div className=\"addon\">\n          <MailIcon />\n        </div>\n      </Button>\n    </>\n  )\n}\n\nexport const SlideButtonInner: React.FC<{ hideExtras?: boolean }> = ({\n  hideExtras = false,\n}) => {\n  const [showModal, setShowModal] = useState(false)\n  const fromElement = useRef<HTMLElement | null>(null)\n  const [showCTA, setShowCTA] = useState(false)\n  const containerRef = useRef<HTMLDivElement>(null)\n  const entry = useIntersectionObserver(containerRef, {\n    freezeOnceVisible: true,\n    threshold: 0.9,\n  })\n\n  useEffect(() => {\n    if (!entry?.isIntersecting) return\n    setShowCTA(true)\n  }, [entry])\n\n  const [wasSent, setWasSent] = useState(false)\n\n  return (\n    <SlideButtonInnerContainer {...{ hideExtras, showCTA }} ref={containerRef}>\n      <SlideButton\n        onClick={e => {\n          fromElement.current = e.target as HTMLElement\n          setShowModal(true)\n        }}\n        className={`${showModal ? \"animate\" : \"\"}`}\n      ></SlideButton>\n\n      <Modal\n        onClose={() => setShowModal(false)}\n        isShown={showModal}\n        showBackdrop\n        fromElement={fromElement}\n      >\n        <ContactForm\n          onClose={() => setShowModal(false)}\n          onSent={() => {\n            setShowModal(false)\n            setWasSent(true)\n          }}\n        />\n      </Modal>\n\n      <ThanksModal isShown={wasSent} onClose={() => setWasSent(false)} />\n    </SlideButtonInnerContainer>\n  )\n}\n\nconst SlideButtonInnerContainer = styled.div`\n  //\n`\n\nconst Button = styled.a`\n  font-family: ${fonts.bold};\n  display: flex;\n  justify-items: space-between;\n  align-items: stretch;\n  margin-top: 2em;\n  background-color: ${colors.primary};\n  padding: 0;\n  overflow: hidden;\n  cursor: pointer;\n  width: fit-content;\n  font-size: 1.625rem;\n\n  span {\n    padding: 1.2em 2em 1.1em 1.2em;\n    width: max-content;\n    color: #000000;\n  }\n\n  div {\n    padding-right: 1.5em;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: all ease-in-out 0.3s;\n  }\n\n  :hover div,\n  &.animate div {\n    // transform: translateX(74px)\n    margin-left: 100vw;\n  }\n\n  svg {\n    width: 1.5em;\n  }\n`\nexport default SlideButton\n","var __assign = this && this.__assign || function () {\n  __assign = Object.assign || function (t) {\n    for (var s, i = 1, n = arguments.length; i < n; i++) {\n      s = arguments[i];\n\n      for (var p in s) {\n        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\n      }\n    }\n\n    return t;\n  };\n\n  return __assign.apply(this, arguments);\n};\n\nvar __rest = this && this.__rest || function (s, e) {\n  var t = {};\n\n  for (var p in s) {\n    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];\n  }\n\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];\n  }\n  return t;\n};\n\nimport React, { forwardRef, useState, useEffect } from 'react';\nvar warned = false;\nvar Div100vh = forwardRef(function (_a, ref) {\n  var style = _a.style,\n      other = __rest(_a, [\"style\"]);\n\n  var height = use100vh(); // TODO: warn only in development\n\n  if (!warned && (style === null || style === void 0 ? void 0 : style.height)) {\n    warned = true;\n    console.warn('<Div100vh /> overrides the height property of the style prop');\n  }\n\n  var styleWithRealHeight = __assign(__assign({}, style), {\n    height: height ? height + \"px\" : '100vh'\n  });\n\n  return React.createElement(\"div\", __assign({\n    ref: ref,\n    style: styleWithRealHeight\n  }, other));\n});\nDiv100vh.displayName = 'Div100vh';\nexport default Div100vh;\nexport function use100vh() {\n  var _a = useState(measureHeight),\n      height = _a[0],\n      setHeight = _a[1];\n\n  var wasRenderedOnClientAtLeastOnce = useWasRenderedOnClientAtLeastOnce();\n  useEffect(function () {\n    if (!wasRenderedOnClientAtLeastOnce) return;\n\n    function setMeasuredHeight() {\n      var measuredHeight = measureHeight();\n      setHeight(measuredHeight);\n    }\n\n    window.addEventListener('resize', setMeasuredHeight);\n    return function () {\n      return window.removeEventListener('resize', setMeasuredHeight);\n    };\n  }, [wasRenderedOnClientAtLeastOnce]);\n  return wasRenderedOnClientAtLeastOnce ? height : null;\n}\nexport function measureHeight() {\n  if (!isClient()) return null;\n  return window.innerHeight;\n} // Once we ended up on the client, the first render must look the same as on\n// the server so hydration happens without problems. _Then_ we immediately\n// schedule a subsequent update and return the height measured on the client.\n// It's not needed for CSR-only apps, but is critical for SSR.\n\nfunction useWasRenderedOnClientAtLeastOnce() {\n  var _a = useState(false),\n      wasRenderedOnClientAtLeastOnce = _a[0],\n      setWasRenderedOnClientAtLeastOnce = _a[1];\n\n  useEffect(function () {\n    if (isClient()) {\n      setWasRenderedOnClientAtLeastOnce(true);\n    }\n  }, []);\n  return wasRenderedOnClientAtLeastOnce;\n}\n\nfunction isClient() {\n  return typeof window !== 'undefined' && typeof document !== 'undefined';\n}","import React, { useState } from \"react\"\nimport styled, { css, createGlobalStyle } from \"styled-components\"\nimport { colors, bp, fonts, layout } from \"../components/Styles\"\nimport { Swiper, SwiperSlide } from \"swiper/react\"\nimport { SlideButtonInner } from \"../components/SlideButton\"\nimport Footer from \"../components/Footer\"\nimport { graphql } from \"gatsby\"\nimport \"swiper/css\"\nimport \"swiper/css/effect-fade\"\nimport \"swiper/css/pagination\"\nimport \"swiper/css/navigation\"\nimport BackgroundImage from \"gatsby-background-image\"\nimport { asBg } from \"../util/image\"\nimport Div100vh from \"react-div-100vh\"\nimport FadeInSection from \"../util/fade-in-section\"\nimport { useTranslation } from \"gatsby-plugin-react-i18next\"\n\nconst GlobalStyle = createGlobalStyle`\n  body {\n    overflow: hidden;\n  }\n`\n\nconst SlideContainer = styled(BackgroundImage)`\n  height: 100%;\n  width: 100%;\n  position: relative;\n  overflow: hidden;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: cover;\n`\n\nconst Slides = styled.div`\n  position: relative;\n  height: calc(100% - 7.8rem);\n\n  ${bp(\"mobile\")`\n    height:100%;\n  `}\n  .mySwiper {\n    width: 100%;\n    height: 100%;\n  }\n\n  .swiper-wrapper .mySwiperSlide {\n    background: ${colors.backgroundDarker};\n  }\n\n  .gatsby-image-wrapper {\n    width: 100%;\n    height: 100%;\n    img {\n      object-position: left;\n    }\n  }\n\n  .swiper-pagination {\n    text-align: start;\n    width: ${layout.width};\n    max-width: ${layout.maxWidth};\n    bottom: 5rem;\n    right: 0;\n    margin: 0 auto;\n\n    ${bp(\"mobile\")`\n      max-width: calc(100% - 10rem);\n      text-align: center;\n      display: flex;\n      justify-content: space-between;\n      bottom: 4em;\n    `}\n\n    > span {\n      border: 3px solid ${colors.primary};\n      width: 1.6rem;\n      height: 1.6rem;\n      background: transparent;\n      opacity: 1;\n      margin-left: 0 !important;\n      margin-right: 5rem !important;\n      ${bp(\"mobile\")`\n      margin-right: 0 !important;\n  `}\n    }\n    .swiper-pagination-bullet-active {\n      border-color: transparent;\n      background: ${colors.white};\n    }\n  }\n  .swiperFooter .swiper-pagination {\n    text-align: end;\n    width: auto;\n    max-width: fit-content;\n    bottom: auto;\n    right: 0;\n    margin: auto;\n\n    > .swiper-pagination-bullet-active {\n      background: ${colors.blue};\n    }\n\n    ${bp(\"mobile\")`\n        margin-right: 1rem;\n        display: block;\n    `}\n  }\n  .footerSlide {\n    background: ${colors.white};\n  }\n`\nconst Title = styled.h3`\n  font-size: calc(25vh - 8.625rem);\n  ${bp(\"portrait\")`\n  font-size: calc(22vw - 14rem);\n  `}\n  text-transform: uppercase;\n  &.slidePrimaryColor {\n    color: ${colors.slidePrimary};\n    > span {\n      color: ${colors.slideBlue};\n    }\n  }\n  &.slideSecondryColor {\n    color: ${colors.slideSecondry};\n  }\n  &.slideBlueColor {\n    color: ${colors.slideBlue};\n    > span {\n      color: ${colors.slidePrimary};\n    }\n  }\n  ${bp(\"mobile\")`\n  font-size: calc(12vw - 1em);\n`}\n  ${bp(\"hdpi\")`\n  font-size: 13.5rem;\n`}\n`\nconst SlidOverlay = styled.div<{\n  isShown?: boolean\n}>`\n  width: ${layout.width};\n  max-width: ${layout.maxWidth};\n  margin: 0 auto;\n  position: absolute;\n  top: 6rem;\n  left: 0;\n  right: 0;\n  ${bp(\"mobile\")`\n    padding-top: 9em;\n    max-width: ${layout.maxWidthMobile};\n    `}\n`\n\nconst Text = styled.p`\n  width: 79rem;\n  font-size: 1.688rem;\n  color: #fff;\n  position: relative;\n  top: 2rem;\n  ${bp(\"mobile\")`\n    width: 100%;\n    `}\n`\nconst Start: React.FC<{ data: any }> = ({ data }) => {\n  const { innovativeSlide, mailSlide } = data\n\n  const [pagination, setPagination] = useState(true)\n\n  const { t } = useTranslation()\n  const [isActive, setActive] = useState(false)\n  return (\n    <Div100vh>\n      <GlobalStyle />\n      <Slides>\n        <Swiper\n          direction={\"horizontal\"}\n          passiveListeners={false}\n          touchReleaseOnEdges\n          pagination={pagination}\n          mousewheel={true}\n          className=\"mySwiper\"\n          effect=\"creative\"\n          creativeEffect={{\n            prev: {\n              shadow: true,\n              translate: [\"-20%\", 0, -1],\n            },\n            next: {\n              translate: [\"100%\", 0, 0],\n            },\n          }}\n        >\n          <SwiperSlide className=\"mySwiperSlide\">\n            <SlideContainer {...asBg(innovativeSlide)}>\n              <SlidOverlay>\n                <FadeInSection speed={0.5}>\n                  <Title className=\"slidePrimaryColor\">\n                    {t(\"Innovative Software\")}\n                  </Title>\n                  <Title className=\"slideSecondryColor\">\n                    {t(\"Fördert Wachstum.\")}\n                    <br />\n                    {t(\"Schafft Lösungen.\")}\n                    <br />\n                    {t(\"Macht zukunftssicher.\")}\n                  </Title>\n                </FadeInSection>\n              </SlidOverlay>\n            </SlideContainer>\n          </SwiperSlide>\n          <SwiperSlide className=\"mySwiperSlide\">\n            <SlidOverlay>\n              <FadeInSection speed={0.5}>\n                <Title className=\"slidePrimaryColor\">\n                  {t(\"Digitalisierung\")}\n                </Title>\n                <Title className=\"slideBlueColor\">\n                  {t(\"Wartet auf kein\")}\n                  <br />\n                  {t(\"Unternehmen\")}\n                </Title>\n                <Text>\n                  {t(\n                    \"Von den 30 Dax-Gründungsunternehmen hat sich nur die Hälfte bis heute gehalten. Weiterhin waren 33 Unternehmen nicht in der Lage, gemeinsam mit den Anforderungen ihrer Kunden zu wachsen.\"\n                  )}\n                </Text>\n              </FadeInSection>\n            </SlidOverlay>\n          </SwiperSlide>\n          <SwiperSlide className=\"mySwiperSlide\">\n            <SlidOverlay>\n              <FadeInSection speed={0.5}>\n                <Title className=\"slideBlueColor\">\n                  {t(\"Was ist\")} <span>{t(\"die richtige\")}</span>\n                </Title>\n                <Title className=\"slidePrimaryColor\">{t(\"Technologie?\")}</Title>\n                <Text>\n                  {t(\n                    \"Digitale Technologie kann komplex sein und es ist schwierig die richtige Wahl zu treffen und die besten Möglichkeiten zu nutzen. Angesichts der rasanten Entwicklung und den sich ändernden Kundenbedürfnissen, gibt es kaum ein Unternehmen, das seine Produkte und Dienstleistungen nicht den digitalen Anforderungen anpassen muss.\"\n                  )}\n                </Text>\n              </FadeInSection>\n            </SlidOverlay>\n          </SwiperSlide>\n          <SwiperSlide className=\"mySwiperSlide\">\n            <SlidOverlay>\n              <FadeInSection speed={0.5}>\n                <Title className=\"slideBlueColor\">\n                  {t(\"Individuelle\")}\n                  <br />\n                  {t(\"Herausforderungen\")}\n                </Title>\n                <Title className=\"slidePrimaryColor\">\n                  {t(\"Gemeinsam lösen\")}\n                </Title>\n                <Text>\n                  {t(\n                    \"Der Dialog mit unseren Kunden ermöglicht es uns, neue Lösungsansätze zu entwickeln: Ihre Expertise bildet die Basis der digitalen Transformation. Ihre Anforderungen lenken die Konzeption, Entwicklung und Bereitstellung von Technologien. Dabei liegt für uns der Fokus auf einer kosteneffektiven Skalierung, um Ihr Unternehmenswachstum nachhaltig zu fördern.\"\n                  )}\n                </Text>\n              </FadeInSection>\n            </SlidOverlay>\n          </SwiperSlide>\n          <SwiperSlide className=\"mySwiperSlide\">\n            <Swiper\n              direction={\"vertical\"}\n              touchReleaseOnEdges\n              pagination={false}\n              mousewheel={{ forceToAxis: false }}\n              nested={true}\n              className=\"mySwiper swiperFooter\"\n              effect=\"fade\"\n              fadeEffect={{\n                crossFade: true,\n              }}\n              onActiveIndexChange={i => setPagination(!pagination)}\n            >\n              <SwiperSlide>\n                <SlideContainer {...asBg(mailSlide)}>\n                  <SlidOverlay>\n                    <FadeInSection speed={0.5}>\n                      <Title className=\"slideSecondryColor\">\n                        {t(\"Jetzt ist die Zeit\")}\n                        <br />\n                        {t(\"für eine\")}\n                      </Title>\n                      <Title className=\"slidePrimaryColor\">\n                        {t(\"Digitale Lösung\")}\n                      </Title>\n                      <SlideButtonInner />\n                    </FadeInSection>\n                  </SlidOverlay>\n                </SlideContainer>\n              </SwiperSlide>\n              <SwiperSlide className=\"footerSlide\">\n                <Footer />\n              </SwiperSlide>\n            </Swiper>\n          </SwiperSlide>\n        </Swiper>\n      </Slides>\n    </Div100vh>\n  )\n}\n\nexport default Start\n\nexport const query = graphql`\n  query ($language: String!) {\n    locales: allLocale(\n      filter: { ns: { in: [\"common\", \"index\"] }, language: { eq: $language } }\n    ) {\n      edges {\n        node {\n          ns\n          data\n          language\n        }\n      }\n    }\n    innovativeSlide: file(relativePath: { eq: \"slides/Slide_1.jpg\" }) {\n      childImageSharp {\n        gatsbyImageData(width: 1920, height: 1080)\n      }\n    }\n\n    mailSlide: file(relativePath: { eq: \"slides/Slide_5.jpg\" }) {\n      childImageSharp {\n        gatsbyImageData(width: 1920, height: 1080)\n      }\n    }\n  }\n`\n","var React = require('react');\n\nfunction IcnMail (props) {\n    return React.createElement(\"svg\",props,React.createElement(\"g\",{\"id\":\"Icn_Mail\",\"transform\":\"translate(-549.27 -802.786)\"},[React.createElement(\"rect\",{\"id\":\"Rechteck_9\",\"data-name\":\"Rechteck 9\",\"width\":\"58.83\",\"height\":\"36.537\",\"transform\":\"translate(550.27 803.786)\",\"fill\":\"none\",\"stroke\":\"#000\",\"strokeWidth\":\"1\",\"key\":0}),React.createElement(\"rect\",{\"id\":\"Rechteck_10\",\"data-name\":\"Rechteck 10\",\"width\":\"58.83\",\"height\":\"36.537\",\"transform\":\"translate(550.27 803.786)\",\"fill\":\"none\",\"stroke\":\"#000\",\"strokeWidth\":\"1\",\"strokeDasharray\":\"9\",\"key\":1}),React.createElement(\"rect\",{\"id\":\"Rechteck_11\",\"data-name\":\"Rechteck 11\",\"width\":\"58.83\",\"height\":\"36.537\",\"transform\":\"translate(550.27 803.786)\",\"fill\":\"none\",\"stroke\":\"#000\",\"strokeWidth\":\"2\",\"strokeDasharray\":\"9 9\",\"key\":2}),React.createElement(\"path\",{\"id\":\"Pfad_1\",\"data-name\":\"Pfad 1\",\"d\":\"M400.183,579.138,429.6,598.49l29.416-19.351\",\"transform\":\"translate(150.087 224.648)\",\"fill\":\"none\",\"stroke\":\"#000\",\"strokeWidth\":\"1\",\"key\":3}),React.createElement(\"path\",{\"id\":\"Pfad_2\",\"data-name\":\"Pfad 2\",\"d\":\"M400.183,579.138,429.6,598.49l29.416-19.351\",\"transform\":\"translate(150.087 224.648)\",\"fill\":\"none\",\"stroke\":\"#000\",\"strokeWidth\":\"2\",\"strokeDasharray\":\"9 6.5\",\"key\":4})]));\n}\n\nIcnMail.defaultProps = {\"width\":\"60.83\",\"height\":\"38.537\",\"viewBox\":\"0 0 60.83 38.537\"};\n\nmodule.exports = IcnMail;\n\nIcnMail.default = IcnMail;\n"],"names":["SlideButton","onClick","className","href","t","children","useTranslation","Button","e","SlideButtonInner","hideExtras","useState","showModal","setShowModal","fromElement","useRef","showCTA","setShowCTA","containerRef","entry","useIntersectionObserver","freezeOnceVisible","threshold","useEffect","isIntersecting","wasSent","setWasSent","SlideButtonInnerContainer","ref","current","target","Modal","onClose","isShown","showBackdrop","ContactForm","onSent","styled","fonts","colors","__assign","Object","assign","s","i","n","arguments","length","p","prototype","hasOwnProperty","call","apply","this","__rest","indexOf","getOwnPropertySymbols","propertyIsEnumerable","warned","Div100vh","forwardRef","_a","style","other","height","measureHeight","setHeight","wasRenderedOnClientAtLeastOnce","setWasRenderedOnClientAtLeastOnce","isClient","useWasRenderedOnClientAtLeastOnce","window","addEventListener","setMeasuredHeight","removeEventListener","measuredHeight","use100vh","console","warn","styleWithRealHeight","displayName","innerHeight","document","GlobalStyle","createGlobalStyle","SlideContainer","BackgroundImage","Slides","bp","layout","Title","SlidOverlay","Text","data","innovativeSlide","mailSlide","pagination","setPagination","direction","passiveListeners","touchReleaseOnEdges","mousewheel","effect","creativeEffect","prev","shadow","translate","next","asBg","speed","forceToAxis","nested","fadeEffect","crossFade","onActiveIndexChange","Footer","React","IcnMail","props","createElement","defaultProps","module","exports","default"],"sourceRoot":""}