{"version":3,"file":"component---src-templates-ambassador-overview-js-0bdffba829e1bf9bfa96.js","mappings":"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","sources":["webpack://stox/./src/components/shared/AmbassadorItem.js","webpack://stox/./src/templates/AmbassadorOverview.js"],"sourcesContent":["import React from 'react'\nimport styled from 'styled-components'\nimport { desktopVW, mobileVW } from '../../styles'\nimport theme from '../../styles/theme'\nimport { SiteLink } from './SiteLink'\nimport Image from 'gatsby-image'\n\nconst { colors, easeOut, breakPoints, fontFamily, headerHeight } = theme\n\nconst AmbassadorItem = ({ data }) => {\n  const { name, subTitle, seoImage: image, slug } = data ?? {}\n\n  return (\n    <Ambassador>\n      <ImageWrapper>\n        {image && <Img fluid={image.fluid} alt={image.title} />}\n      </ImageWrapper>\n      <Inner>\n        <div>\n          <Title>{name}</Title>\n          <p>{subTitle}</p>\n        </div>\n      </Inner>\n      <Link to={slug} />\n    </Ambassador>\n  )\n}\n\nconst Img = styled(Image)`\n  position: absolute !important;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  transition: 0.3s ease transform;\n`\n\nconst Ambassador = styled.div`\n  position: relative;\n  display: flex;\n  flex-flow: column;\n\n  @media screen and (min-width: ${breakPoints.desktop}) {\n    &:hover ${Img} {\n      transform: scale(1.05);\n    }\n  }\n`\n\nconst ImageWrapper = styled.div`\n  position: relative;\n  background: ${colors.lightGrey};\n  display: flex;\n  overflow: hidden;\n\n  &::before {\n    content: '';\n    width: 100%;\n    padding-top: 100%;\n  }\n`\n\nconst Inner = styled.div`\n  display: flex;\n  align-items: center;\n  font-size: ${mobileVW(14)};\n  color: ${colors.grey};\n  line-height: 1.5;\n  margin-top: ${mobileVW(16)};\n\n  &::after {\n    content: '+';\n    display: block;\n    margin-left: auto;\n    font-size: ${mobileVW(20)};\n  }\n\n  @media screen and (min-width: ${breakPoints.desktop}) {\n    font-size: ${desktopVW(14, 1440)};\n    margin-top: ${desktopVW(16, 1440)};\n\n    &::after {\n      font-size: ${desktopVW(20, 1440)};\n    }\n  }\n`\n\nconst Link = styled(SiteLink)`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n`\n\nconst Title = styled.h6`\n  font-size: ${mobileVW(20)};\n  color: ${colors.black};\n\n  @media screen and (min-width: ${breakPoints.desktop}) {\n    font-size: ${desktopVW(20, 1440)};\n  }\n`\n\nexport default AmbassadorItem\n","import { graphql } from 'gatsby'\nimport React, { useContext } from 'react'\nimport BreadCrumb from '../components/shared/BreadCrumb'\nimport { SiteLink } from '../components/shared/SiteLink'\nimport { LayoutContext } from '../contexts'\nimport { useGlobal } from '../hooks/useGlobal'\nimport { desktopVW, mobileVW } from '../styles'\nimport theme from '../styles/theme'\nimport styled from 'styled-components'\nimport AmbassadorItem from '../components/shared/AmbassadorItem'\nimport BlockRenderer from '../components/shared/BlockRenderer'\nimport SEO from '../components/SEO'\n\nconst { breakPoints, colors } = theme\n\nconst Ambassador = ({\n  data: {\n    contentfulPage: {\n      name,\n      subTitle,\n      seoTitle,\n      seoImage,\n      seoDescription,\n      componentBlocks,\n      layoutType,\n    },\n    ambassadorList: { ambassadors },\n    allTrustPilotSummary: {\n      nodes: [\n        {\n          score: { trustpilotStars },\n          totalNumberOfReviews,\n        },\n      ],\n    },\n  },\n  location,\n}) => {\n  const { node_locale } = useContext(LayoutContext)\n\n  const { layout: dictionary } = useGlobal(['layout'], node_locale)\n\n  const orderedAmbassadors = ambassadors.sort((a, b) => {\n    return a.ambassadorOrder - b.ambassadorOrder\n  })\n\n  return (\n    <>\n      <SEO\n        isPage\n        location={location}\n        title={seoTitle}\n        description={seoDescription}\n        image={seoImage?.file?.url}\n        noIndex={layoutType && layoutType.noIndex}\n        referrer={location.state?.referrer}\n      />\n      <Header>\n        <BreadCrumb>\n          {dictionary?.home && <SiteLink>{dictionary.home}</SiteLink>} / {name}\n        </BreadCrumb>\n      </Header>\n      <Inner>\n        <Title>{name}</Title>\n        {subTitle && <p>{subTitle}</p>}\n      </Inner>\n      <Wrapper>\n        {orderedAmbassadors.map((item) => (\n          <AmbassadorItem data={item} key={item.id} />\n        ))}\n      </Wrapper>\n      <div>\n        <BlockRenderer\n          blocks={componentBlocks}\n          rating={{ totalNumberOfReviews, trustpilotStars }}\n          location={location}\n        />\n      </div>\n    </>\n  )\n}\n\nconst Header = styled.div`\n  margin: ${mobileVW(10)} auto;\n  font-size: ${mobileVW(10)};\n  width: 90%;\n  color: ${colors.grey};\n\n  @media screen and (min-width: ${breakPoints.desktop}) {\n    max-width: ${desktopVW(1200, 1440)};\n    font-size: ${desktopVW(12, 1440)};\n    margin: ${desktopVW(40, 1440)} auto;\n  }\n`\n\nconst Inner = styled.div`\n  display: flex;\n  flex-flow: column;\n  text-align: center;\n  margin: 0 auto;\n  width: 90%;\n  color: ${colors.grey};\n  font-size: ${mobileVW(14)};\n  line-height: 1.618;\n\n  @media screen and (min-width: ${breakPoints.desktop}) {\n    max-width: ${desktopVW(1200, 1440)};\n    font-size: ${desktopVW(14, 1440)};\n  }\n`\n\nconst Title = styled.h1`\n  font-size: ${mobileVW(24)};\n  color: ${colors.black};\n\n  @media screen and (min-width: ${breakPoints.desktop}) {\n    font-size: ${desktopVW(46, 1440)};\n  }\n`\n\nconst Wrapper = styled.div`\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-gap: ${mobileVW(40)};\n  width: 90%;\n  margin: ${mobileVW(30)} auto;\n\n  @media screen and (min-width: ${breakPoints.desktop}) {\n    max-width: ${desktopVW(1200, 1440)};\n    grid-template-columns: repeat(3, 1fr);\n    grid-gap: ${desktopVW(20, 1440)};\n    margin-top: ${desktopVW(50, 1440)};\n  }\n`\n\nexport const pageQuery = graphql`\n  query AmbassadorOverview($id: String!, $node_locale: String!) {\n    contentfulPage(id: { eq: $id }) {\n      name\n      subTitle\n      seoTitle\n      seoDescription\n      template\n      seoImage {\n        file {\n          url\n        }\n      }\n      layoutType {\n        name\n        noIndex\n      }\n      componentBlocks {\n        ...pageBlocks\n      }\n    }\n\n    ambassadorList: allContentfulPage(\n      filter: {\n        template: { eq: \"Ambassador\" }\n        node_locale: { eq: $node_locale }\n      }\n    ) {\n      ambassadors: nodes {\n        ...ambassadorItem\n      }\n    }\n\n    allTrustPilotSummary {\n      ...pageRatings\n    }\n  }\n`\n\nexport default Ambassador\n"],"names":["colors","theme","breakPoints","Img","styled","Image","Ambassador","desktop","ImageWrapper","lightGrey","Inner","mobileVW","grey","desktopVW","Link","SiteLink","Title","black","data","name","subTitle","image","seoImage","slug","fluid","alt","title","to","Header","Wrapper","contentfulPage","seoTitle","seoDescription","componentBlocks","layoutType","ambassadors","ambassadorList","allTrustPilotSummary","nodes","trustpilotStars","score","totalNumberOfReviews","location","node_locale","useContext","LayoutContext","dictionary","useGlobal","layout","orderedAmbassadors","sort","a","b","ambassadorOrder","isPage","description","file","url","noIndex","referrer","state","home","map","item","key","id","blocks","rating"],"sourceRoot":""}