{"version":3,"sources":["webpack:///./src/components/CustomerStories/CustomerStoriesCard.tsx","webpack:///./src/pages/customer-stories.tsx"],"names":["CustomerStoriesCard","customerStory","featureimage","acfTestimonial","logo","localFile","childImageSharp","fluid","trimmedDescription","description","length","substring","Card","to","slug","LogoContainer","style","width","maxHeight","imgStyle","TitleContainer","title","DescriptionContainer","styled","Link","theme","brand","blue","props","color","div","h5","p","CardContainer","breakpoints","sm","md","CustomerStories","data","wpPage","pageContext","allWpTestimonial","renderedBlocks","LazyBlocksFactory","lazy_data","Layout","map","v","MainGrid","nodes","i","key"],"mappings":"yNASaA,EAA8D,SAAH,GAElE,IADJC,EAAa,EAAbA,cAEMC,EACJD,EAAcE,eAAeC,KAAKC,UAAUC,gBAAgBC,MAIxDC,EACJP,EAAcE,eAAeM,YAAYC,OAF5B,IAGTT,EAAcE,eAAeM,YAAYE,UAAU,EAAGD,KACtD,MACAT,EAAcE,eAAeM,YACnC,OACE,kBAACG,EAAI,CAACC,GAAI,qBAAuBZ,EAAca,MAC7C,kBAACC,EAAa,KACZ,kBAAC,IAAG,CACFR,MAAOL,EACPc,MAAO,CAAEC,MAAO,OAAQC,UAAW,IACnCC,SAAU,CAAEF,MAAO,OAAQC,UAAW,OAG1C,kBAACE,EAAc,KAAEnB,EAAcoB,OAC/B,kBAACC,EAAoB,KAAEd,KAKvBI,EAAOW,YAAOC,QAAK,+EAAZD,CAAY,4sBAKCE,IAAMC,MAAMC,MA4Bd,SAACC,GAAK,OAAKA,EAAMC,SAanCd,EAAgBQ,IAAOO,IAAG,wFAAVP,CAAU,4EAO1BH,EAAiBG,IAAOQ,GAAE,yFAATR,CAAS,wFAS1BD,EAAuBC,IAAOS,EAAC,+FAART,CAAQ,4DC9D/BU,EAAgBV,IAAOO,IAAG,sFAAVP,CAAU,oWAUT,SAACK,GAAK,OAAKA,EAAMH,MAAMS,YAAYC,MAKnC,SAACP,GAAK,OAAKA,EAAMH,MAAMS,YAAYE,MAQ3CC,UAhDS,SAAH,GAAqC,IAA/BC,EAAI,EAAJA,KACjBC,GADkC,EAAXC,YACMF,EAA7BC,QAAQE,EAAqBH,EAArBG,iBAGVC,EAAiBC,YAAkBJ,EAAOK,UAAWL,EAAOlB,OAClE,OACE,kBAACwB,EAAA,EAAM,KACJH,EAAeI,KAAI,SAACC,GAAC,OAAKA,KAE3B,kBAACC,EAAA,EAAQ,KACP,kBAACf,EAAa,KACXQ,EAAiBQ,MAAMH,KAAI,SAACC,EAAGG,GAC9B,OACE,kBAAC,EAAmB,CAClBC,IAAK,uBAAyBD,EAC9BjD,cAAe8C","file":"component---src-pages-customer-stories-tsx-35e76a9ececac21f9716.js","sourcesContent":["import React from 'react'\nimport Img from 'gatsby-image'\nimport styled from 'styled-components'\nimport { Link } from 'gatsby'\nimport theme from '../styling/theme'\ninterface CustomerStoriesCardInterface {\n customerStory: any\n}\n\nexport const CustomerStoriesCard: React.FC = ({\n customerStory,\n}) => {\n const featureimage =\n customerStory.acfTestimonial.logo.localFile.childImageSharp.fluid\n\n // var string = \"this is a string\";\n const length = 130\n const trimmedDescription =\n customerStory.acfTestimonial.description.length > length\n ? customerStory.acfTestimonial.description.substring(0, length - 3) +\n '...'\n : customerStory.acfTestimonial.description\n return (\n \n \n \n \n {customerStory.title}\n {trimmedDescription}\n \n )\n}\n\nconst Card = styled(Link)`\n transition: all 0.2s;\n width: 100%;\n position: relative;\n background-color: #fafafa;\n border-top: 3px solid ${theme.brand.blue};\n border-left: 1px solid #fafafa;\n border-bottom: 1px solid #fafafa;\n border-right: 1px solid #fafafa;\n text-decoration: none;\n font-family: Montserrat;\n min-height: 340px;\n &:hover {\n -webkit-box-shadow: 0px 0px 16px -2px rgba(0, 0, 0, 0.25);\n -moz-box-shadow: 0px 0px 16px -2px rgba(0, 0, 0, 0.25);\n box-shadow: 0px 0px 16px -2px rgba(0, 0, 0, 0.25);\n /* border-left: 1px solid ${(props) => props.color};\n border-bottom: 1px solid ${(props) => props.color};\n border-right: 1px solid ${(props) => props.color}; */\n text-decoration: none;\n }\n &:hover > #HoverBar {\n width: 100%;\n }\n @media screen and (min-width: 1024px) {\n max-width: 46rem;\n padding-bottom: 40px;\n }\n\n &::after {\n content: '';\n width: 0px;\n height: 5px;\n background-color: ${(props) => props.color};\n position: absolute;\n left: 0px;\n top: -2px;\n right: 0;\n transition: all 0.3s ease;\n }\n\n &:hover::after {\n width: calc(100% + 1px);\n }\n`\n\nconst LogoContainer = styled.div`\n /* max-height: 50px; */\n overflow: hidden;\n padding-left: 30px;\n padding-right: 30px;\n padding-top: 40px;\n`\nconst TitleContainer = styled.h5`\n /* max-height: 50px; */\n padding-left: 30px;\n padding-right: 30px;\n padding-top: 30px;\n color: black;\n font-weight: 700;\n`\n\nconst DescriptionContainer = styled.p`\n /* max-height: 50px; */\n padding-left: 30px;\n padding-right: 30px;\n padding-top: 20px;\n`\n","import React from 'react'\nimport Layout from '../components/Layout'\nimport { graphql } from 'gatsby'\nimport { LazyBlocksFactory } from '../components/LazyBlocksFactory/LazyBlocksFactory'\nimport MainGrid from '../components/styling/MainGrid'\nimport { CustomerStoriesCard } from '../components/CustomerStories/CustomerStoriesCard'\nimport styled from 'styled-components'\ninterface Props {\n data: any\n pageContext: any\n}\n\nconst CustomerStories = ({ data, pageContext }: Props) => {\n const { wpPage, allWpTestimonial } = data\n\n // const lazyBlocks = parse(wpPage.lazy_data)\n const renderedBlocks = LazyBlocksFactory(wpPage.lazy_data, wpPage.title)\n return (\n \n {renderedBlocks.map((v) => v)}\n\n \n \n {allWpTestimonial.nodes.map((v, i) => {\n return (\n \n )\n })}\n \n \n \n )\n}\n\nconst CardContainer = styled.div`\n cursor: pointer;\n width: 100%;\n margin: 0 auto;\n padding-top: 28px;\n display: grid;\n grid-template-columns: 1fr;\n grid-row-gap: 20px;\n grid-column-gap: 30px;\n\n @media (min-width: ${(props) => props.theme.breakpoints.sm}) {\n grid-template-columns: repeat(2, 1fr);\n grid-row-gap: 20px;\n grid-column-gap: 20px;\n }\n @media (min-width: ${(props) => props.theme.breakpoints.md}) {\n grid-template-columns: repeat(3, 1fr);\n padding-top: 50px;\n grid-row-gap: 30px;\n grid-column-gap: 30px;\n }\n`\n\nexport default CustomerStories\n\nexport const pageQuery = graphql`\n query customerStories {\n wpPage(title: { eq: \"Customer Stories\" }) {\n id\n lazy_data\n title\n }\n allWpTestimonial {\n nodes {\n title\n slug\n acfTestimonial {\n description\n logo {\n localFile {\n childImageSharp {\n fluid(maxWidth: 1080, toFormat: WEBP) {\n ...GatsbyImageSharpFluid\n }\n }\n }\n }\n }\n }\n }\n }\n`\n"],"sourceRoot":""}