{"version":3,"file":"component---src-pages-expertise-tsx-4975c79141889c04a882.js","mappings":"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","sources":["webpack://garage51/./src/components/Cards.tsx","webpack://garage51/./src/pages/expertise.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { Content, SwipeContainer } from \"./layout-components\"\nimport { bp, colors, fonts } from \"./Styles\"\nimport { useBreakpoint } from \"gatsby-plugin-breakpoints\"\nimport { useLottie, Lottie } from \"react-lottie-hook\"\nimport useComponentSize from \"@rehooks/component-size\"\nimport { ParallaxProvider, Parallax } from \"react-scroll-parallax\"\nimport FadeInSection from \"../util/fade-in-section\"\n\nconst CardContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: 110rem;\n  max-width: 100%;\n  align-items: center;\n  margin-right: auto;\n  margin-left: auto;\n`\n\nexport const ImageCard = styled.div`\n  flex: 0 0 auto;\n  height: 24.3rem;\n  background-color: ${colors.blue};\n  width: 17rem;\n  box-shadow: 0px 0px 20px #00000030;\n  display: flex;\n  flex-direction: column;\n  margin: 1.5rem;\n\n  ${bp(\"hdpi\")`\n  margin: 2.5rem;\n  `}\n\n  ${bp(\"ldpi\")`\n  margin: 2rem 3rem;\n  `}\n  & p {\n    color: ${colors.primary};\n  }\n  > .lottie-container {\n    margin: 1rem 1rem 0 1rem;\n    height: 13rem;\n    width: calc(100% - 2rem);\n\n    > .lottie-sizer {\n      width: 100%;\n      height: 100%;\n    }\n  }\n\n  > :last-child {\n    margin-top: auto;\n    line-height: 2.25rem;\n    font-size: 1.22rem;\n    padding: 1.4rem;\n    padding-bottom: 1.5rem;\n  }\n\n  ${bp(\"mobile\")`\n    height: 27rem;\n    width: 18.9rem;\n    margin: 25px;\n    position: relative;\n    ::after {\n      content: \"\";\n      position: absolute;\n      top: 0;\n      left: -25px;\n      right: -25px;\n      bottom: 0;\n    }\n\n  > :first-child {\n    margin-top: 2rem;\n    height: 15rem;\n  }\n\n    > :last-child {\n      padding: 1.1rem;\n      padding-bottom: 1.4rem;\n      font-size: 1.45rem;\n      line-height: 2.4rem;\n    }\n  `}\n`\n\nconst CardContainerInner = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n\n  ${bp(\"ldpi\")`\n    width: 80rem;\n    max-width: 100%;\n    flex-wrap: wrap;\n  `}\n`\n\nconst CardsContainerOuter = styled.div`\n  margin-top: -6rem;\n  transform: translateY(7rem);\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  position: relative;\n  z-index: 1;\n  background: linear-gradient(0deg, ${colors.primary} 40%, rgb(0 0 0 / 0%) 40%);\n  padding-bottom: 5em;\n\n  > div ${Content} {\n    > h2 {\n      margin-bottom: 5.1rem;\n      margin-top: 10.4rem;\n      max-width: 100%;\n      line-height: 4.3rem;\n      font-size: 4.3rem;\n      font-family: ${fonts.bold};\n      color: ${colors.primary};\n\n      ${bp(\"mobile\")`\n        display: none;\n        `}\n    }\n  }\n\n  ${bp(\"mobile\")`\n    background: linear-gradient(\n      0deg, ${colors.primary} 60%, rgb(0 0 0 / 0%) 40%);\n    margin-top: 0;\n    margin-bottom: 12rem;\n    transform: translateY(8rem);\n  `}\n\n  .expertise {\n    p {\n      font-family: ${fonts.bold};\n      margin-top: 0;\n    }\n    ${ImageCard} {\n      height: 20rem;\n      .lottie-container {\n        height: 9rem;\n      }\n    }\n  }\n`\n\ninterface CardItem {\n  animation: any\n  label: string\n}\n\nconst CardInner: React.FC<{\n  item: CardItem\n  isSlider?: boolean\n  isPlaying?: boolean\n}> = ({ item, isSlider, isPlaying }) => {\n  const { animation, label } = item\n  const lottieSizerRef = useRef<HTMLDivElement>(null)\n  const { width, height } = useComponentSize(lottieSizerRef)\n\n  const [lottieRef, , controls] = useLottie({\n    loop: true,\n    autoplay: false,\n    animationData: animation,\n    rendererSettings: {\n      preserveAspectRatio: \"xMidYMid\",\n    },\n  })\n\n  useEffect(() => {\n    if (isSlider && !isPlaying) controls.goToAndStop(0)\n    if (isSlider && isPlaying) controls.play()\n  }, [isPlaying, isSlider])\n\n  return (\n    <ImageCard\n      onMouseEnter={() => controls.play()}\n      onMouseLeave={() => controls.goToAndStop(0)}\n    >\n      <div className=\"lottie-container\">\n        <div className=\"lottie-sizer\" ref={lottieSizerRef}>\n          <Lottie {...{ width, height, lottieRef }} />\n        </div>\n      </div>\n\n      <p>{label}</p>\n    </ImageCard>\n  )\n}\n\nconst Cards: React.FC<{\n  items: CardItem[]\n  title?: string\n  className?: string\n  id?: string\n}> = ({ items, title, className, id }) => {\n  const breaks = useBreakpoint()\n  const [activeSlide, setActiveSlide] = useState(0)\n\n  const isSlider =\n    breaks.mobile &&\n    (items.length > 3 ||\n      (items.length === 3 && breaks.widthMax710) ||\n      breaks.widthMax420)\n\n  const children = items.map((item, key) => {\n    const isPlaying = key === activeSlide\n    return <CardInner {...{ item, key, isSlider, isPlaying }} />\n  })\n\n  return (\n    <ParallaxProvider>\n      <CardsContainerOuter id={id}>\n        <FadeInSection speed={0.1}>\n          <Parallax y={[20, -10]}>\n            {title && (\n              <Content>\n                <h2>{title}</h2>\n              </Content>\n            )}\n\n            {isSlider && (\n              <SwipeContainer\n                {...{ className }}\n                onSwitchActive={s => setActiveSlide(s)}\n                center\n              >\n                {children}\n              </SwipeContainer>\n            )}\n\n            {!isSlider && (\n              <CardContainer>\n                <CardContainerInner {...{ id, className }}>\n                  {children}\n                </CardContainerInner>\n              </CardContainer>\n            )}\n          </Parallax>\n        </FadeInSection>\n      </CardsContainerOuter>\n    </ParallaxProvider>\n  )\n}\n\nexport default Cards\n","import React from \"react\"\nimport InfoMenu from \"../components/InfoMenu\"\nimport Cards from \"../components/Cards\"\nimport {\n  Container,\n  HeadlineContainer,\n  HeroHeader,\n  StickyContentContainer,\n  StickyContent,\n  TextBlock,\n  Spacing,\n  MinSpacing,\n  BackgroundContainer,\n  TextSegment,\n  SmSpacing,\n} from \"../components/layout-components\"\nimport { graphql } from \"gatsby\"\nimport { asBg } from \"../util/image\"\nimport { StaticImage } from \"gatsby-plugin-image\"\nimport { useTranslation } from \"gatsby-plugin-react-i18next\"\nimport { Helmet } from \"react-helmet\"\nimport Footer from \"../components/Footer\"\nimport ApiIcon from \"../lottie/Expertise/Icn_CustomAPI.json\"\nimport Authentifizierung from \"../lottie/Expertise/Icn_Authentifizierung.json\"\nimport OAuth2 from \"../lottie/Expertise/Icn_OAuth2.json\"\nimport Websocket from \"../lottie/Expertise/Icn_WebSocket.json\"\nimport ZeroDowntime from \"../lottie/Expertise/Icn_ZeroDowntime.json\"\nimport SchemaFirst from \"../lottie/Expertise/Icn_SchemaFirst.json\"\nimport Datenbanken from \"../lottie/Expertise/Icn_Datenbanken.json\"\nimport Kompetenzen from \"../lottie/Expertise/Icn_Kompetenzen.json\"\nimport KomponentenVernetzen from \"../lottie/Expertise/Icn_KomponentenVernetzen.json\"\nimport SSLVerschluesselung from \"../lottie/Expertise/Icn_SSLVerschluesselung.json\"\nimport TypscriptReactClient from \"../lottie/Expertise/Icn_TypscriptReactClient.json\"\n\nconst Expertise: React.FC<{ data: any }> = ({ data }) => {\n  const { headerBackground } = data\n\n  const { t } = useTranslation()\n\n  return (\n    <Container>\n      <Helmet>\n        <title>Garage51 | {t(\"Expertise\")}</title>\n      </Helmet>\n\n      <HeroHeader {...asBg(headerBackground)}>\n        <HeadlineContainer align=\"left\">\n          <h1>\n            <span className=\"subHeadline\">{t(\"Unser\")} </span>\n            {t(\"Stack\")}.\n            <br />\n            <span className=\"subHeadline\">{t(\"Ihre\")} </span>\n            {t(\"Lösung\")}.\n          </h1>\n        </HeadlineContainer>\n      </HeroHeader>\n\n      <TextBlock align=\"left\" margin=\"0\">\n        <div>\n          <p>\n            {t(\n              \"Ob es sich um eine Website oder eine App handelt, um interne Tools, Cloudanwendungen oder um komplexe Systeme mit Redundanzen zur Steuerung von Industrieparks, unser Team aus erstklassigen Webentwicklern und Softwareingenieuren kann eine auf Ihre Bedürfnisse zugeschnittene Lösung erstellen.\"\n            )}\n          </p>\n          <p>\n            {t(\n              \"Das Entwicklungsteam arbeitet nach methodischen Praktiken und agilen Prinzipien, um sicherzustellen, dass Ihr digitales Produkt schnell und ohne Qualitätseinbußen geliefert wird.\"\n            )}\n          </p>\n        </div>\n      </TextBlock>\n\n      <MinSpacing />\n\n      <StickyContentContainer align=\"left\" id=\"Technologien\">\n        <TextSegment\n          align=\"left\"\n          width=\"45rem\"\n          colorTheme=\"primary\"\n          headline={t(\"Technologien\")}\n          text={t(\n            \"Dabei legen wir großen Wert auf das sinnvolle Einsetzen von neusten Technologien. Altbekanntes und scheinbar Verlässliches ist im Prozess einer digitalen Transformation kein Vorteil. Ältere Systeme und die Maxime „Never change a running system“ führen meistens zu hohen Kosten für Instandhaltungen und Anpassungen an neue Bedürfnisse.\"\n          )}\n          secondText={t(\n            \"Wir wählen die Technologien und unser Stack so, dass wir jederzeit auf etwaige Kurswechsel oder Strategieanpassungen reagieren können, ohne wertvolle Zeit zu verlieren.\"\n          )}\n        ></TextSegment>\n        <StickyContent align=\"left\" width=\"49rem\">\n          <StaticImage src=\"../images/technologien.jpg\" alt=\"\" />\n        </StickyContent>\n      </StickyContentContainer>\n\n      <MinSpacing />\n\n      <Cards\n        id=\"modern-architecture\"\n        className=\"expertise\"\n        title={t(\"Moderne Architektur-Standards\")}\n        items={[\n          {\n            animation: SchemaFirst,\n            label: t(\"Schema-First Design auf Backend- und API-Ebene\"),\n          },\n          {\n            animation: SSLVerschluesselung,\n            label: t(\"Automatische SSL-Verschlüsselung für jedes Produkt\"),\n          },\n          {\n            animation: Kompetenzen,\n            label: t(\"Kompetenzen in TypeScript, Go, Kotlin und Swift\"),\n          },\n          {\n            animation: KomponentenVernetzen,\n            label: t(\"GraphQL, REST und gRPC zur Vernetzung von Komponenten\"),\n          },\n          {\n            animation: Datenbanken,\n            label: t(\"Dokumenten- und SQL-Datenbanken\"),\n          },\n          {\n            animation: TypscriptReactClient,\n            label: t(\"Typescript-basierte React Clients\"),\n          },\n        ]}\n      />\n\n      <SmSpacing />\n\n      <InfoMenu\n        id=\"integration\"\n        marginBefore=\"medium\"\n        marginAfter=\"medium\"\n        header=\"Integration und DevOps\"\n        items={[\n          {\n            label: t(\"Zero-Downtime\"),\n            text: t(\"Upgrades und Deployment neuer Features\"),\n            anim: ZeroDowntime,\n          },\n          {\n            label: t(\"Websocket Integration\"),\n            text: t(\n              \"Integration von Websockets, Hooks und Direktanbindung externer APIs\"\n            ),\n            anim: Websocket,\n          },\n          {\n            label: t(\"Granulare & Custom APIs\"),\n            text: t(\n              \"Granulare APIs über GraphQL und Custom REST APIs auf Anfrage\"\n            ),\n            anim: ApiIcon,\n          },\n          {\n            label: t(\"Authentifizierung\"),\n            text: t(\"Zentrale Authentifizierung von Nutzern über JWTs\"),\n            anim: Authentifizierung,\n          },\n          {\n            label: t(\"OAuth2 Flows\"),\n            text: t(\"Verschiedene OAuth2 Flows zur einfachen Anbindung\"),\n            anim: OAuth2,\n          },\n        ]}\n      />\n\n      <MinSpacing />\n\n      <StickyContentContainer align=\"right\" id=\"Sicherheit\">\n        <TextSegment\n          align=\"left\"\n          width=\"45rem\"\n          colorTheme=\"primary\"\n          headline={t(\"Sicherheit und Datenschutz\")}\n          text={t(\n            \"Ein für unsere Kunden und uns sehr wichtiger Aspekt ist die Sicherheit. Aus diesem Grund setzen wir auf native Entwicklungen. Zum einen im Hinblick auf die Stabilität der teilweise hochkomplexen Systeme und in Bezug auf die neusten Datenschutzbestimmungen. Durch nativ entwickelte Anwendungen können wir Stabilität und reibungslose Updatezyklen gewährleisten.\"\n          )}\n          secondText={t(\n            \"Unser Team besetzen wir nur durch ausgebildete und erfahrene Entwickler. Zum Thema Datenschutz arbeiten wir mit eigenen Anwälten oder mit Anwälten unserer Kunden zusammen.\"\n          )}\n        ></TextSegment>\n        <StickyContent align=\"right\" width=\"49rem\">\n          <StaticImage src=\"../images/datenschutz.jpg\" alt=\"\" />\n        </StickyContent>\n      </StickyContentContainer>\n\n      <Spacing />\n\n      <BackgroundContainer>\n        <StickyContentContainer align=\"leftTop\" id=\"Komplettbetreuung\">\n          <TextSegment\n            width=\"45rem\"\n            align=\"leftTop\"\n            headline={t(\"DSGVO und Ihre Daten\")}\n            list={[\n              t(\"PII-freies Logging im gesamten System\"),\n              t(\n                \"DSGVO-konforme Speicherung von Nutzerdaten auf Deutschen Servern\"\n              ),\n              t(\n                \"Einheitliche, anonymisierte IDs für jeden Nutzer, mit denen eine systemweite Löschung durchgeführt werden kann\"\n              ),\n              t(\"Anonymisierung von Daten und Ressourcen\"),\n              t(\n                \"Keine Speicherung von Nutzerdaten bei Drittanbietern oder externen Services\"\n              ),\n              t(\"Ausführliches Auditing und Logs für alle Einheiten im System\"),\n            ]}\n          ></TextSegment>\n          <StickyContent align=\"leftTop\" width=\"49rem\">\n            <StaticImage src=\"../images/dsgvo.jpg\" alt=\"dsgvo\" />\n          </StickyContent>\n        </StickyContentContainer>\n      </BackgroundContainer>\n      <Footer />\n    </Container>\n  )\n}\n\nexport default Expertise\n\nexport const query = graphql`\n  query ($language: String!) {\n    locales: allLocale(\n      filter: {\n        ns: { in: [\"common\", \"expertise\"] }\n        language: { eq: $language }\n      }\n    ) {\n      edges {\n        node {\n          ns\n          data\n          language\n        }\n      }\n    }\n\n    headerBackground: file(\n      relativePath: { eq: \"background/Expertise_Header.jpg\" }\n    ) {\n      childImageSharp {\n        gatsbyImageData(width: 1920, height: 1080)\n      }\n    }\n  }\n`\n"],"names":["CardContainer","styled","ImageCard","colors","bp","CardContainerInner","CardsContainerOuter","Content","fonts","CardInner","item","isSlider","isPlaying","animation","label","lottieSizerRef","useRef","useComponentSize","width","height","useLottie","loop","autoplay","animationData","rendererSettings","preserveAspectRatio","lottieRef","controls","useEffect","goToAndStop","play","onMouseEnter","onMouseLeave","className","ref","items","title","id","breaks","useBreakpoint","useState","activeSlide","setActiveSlide","mobile","length","widthMax710","widthMax420","children","map","key","speed","y","onSwitchActive","s","center","headerBackground","data","t","useTranslation","Helmet","asBg","align","margin","colorTheme","headline","text","secondText","S","src","alt","SchemaFirst","SSLVerschluesselung","Kompetenzen","KomponentenVernetzen","Datenbanken","TypscriptReactClient","InfoMenu","marginBefore","marginAfter","header","anim","ZeroDowntime","Websocket","ApiIcon","Authentifizierung","OAuth2","list","Footer"],"sourceRoot":""}