{"version":3,"sources":["webpack:///./src/components/UseCases/UseCaseCard.tsx","webpack:///./src/pages/use-cases.tsx"],"names":["UseCaseCard","useCase","Card","to","slug","TextContainer","TitleContainer","title","DescriptionContainer","use_cases_fields","description","ArrowContainer","Arrow","src","arr","alt","styled","Link","theme","brand","blue","props","color","div","h5","p","img","CardContainer","breakpoints","sm","md","UseCases","data","wpPage","pageContext","allWpUseCase","renderedBlocks","LazyBlocksFactory","lazy_data","Layout","map","v","MainGrid","nodes","i","key"],"mappings":"yNAcaA,EAAsD,SAAH,GAE1D,IADJC,EAAO,EAAPA,QAWA,OACE,kBAACC,EAAI,CAACC,GAAI,cAAgBF,EAAQG,MAChC,kBAACC,EAAa,KACV,kBAACC,EAAc,KAAEL,EAAQM,OACzB,kBAACC,EAAoB,KAAEP,EAAQQ,iBAAiBC,cAEpD,kBAACC,EAAc,KACb,kBAACC,EAAK,CAACC,IAAKC,IAAKC,IAAI,kBAMvBb,EAAOc,YAAOC,QAAK,uEAAZD,CAAY,6wBAKCE,IAAMC,MAAMC,MA+Bd,SAACC,GAAK,OAAKA,EAAMC,SAanCjB,EAAgBW,IAAOO,IAAG,gFAAVP,CAAU,MAI1BV,EAAiBU,IAAOQ,GAAE,iFAATR,CAAS,wFAS1BR,EAAuBQ,IAAOS,EAAC,uFAART,CAAQ,4DAM/BJ,EAAQI,IAAOU,IAAG,wEAAVV,CAAU,6BAKlBL,EAAiBK,IAAOO,IAAG,iFAAVP,CAAU,wFCzE3BW,EAAgBX,IAAOO,IAAG,8EAAVP,CAAU,oWAUT,SAACK,GAAK,OAAKA,EAAMH,MAAMU,YAAYC,MAKnC,SAACR,GAAK,OAAKA,EAAMH,MAAMU,YAAYE,MAQ3CC,UAlDE,SAAH,GAAqC,IAA/BC,EAAI,EAAJA,KACVC,GAD2B,EAAXC,YACSF,EAAzBC,QAAQE,EAAiBH,EAAjBG,aAGVC,EAAiBC,YAAkBJ,EAAOK,UAAWL,EAAO1B,OAElE,OACE,kBAACgC,EAAA,EAAM,KACLH,EAAeI,KAAI,SAACC,GAAC,OAAKA,KAE1B,kBAACC,EAAA,EAAQ,KACP,kBAACf,EAAa,KAEXQ,EAAaQ,MAAMH,KAAI,SAACC,EAAGG,GAC1B,OACE,kBAAC,EAAW,CACVC,IAAK,iBAAmBD,EACxB3C,QAASwC","file":"component---src-pages-use-cases-tsx-93feae2f1e384b68c050.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'\nimport arr from '../../images/link-arrow.svg'\n\n\n\ninterface CustomerStoriesCardInterface {\n \n useCase: any\n}\n\nexport const UseCaseCard: React.FC = ({\n useCase,\n}) => {\n \n\n // var string = \"this is a string\";\n const length = 130\n// const trimmedDescription =\n// useCase.acfTestimonial.description.length > length\n// ? useCase.acfTestimonial.description.substring(0, length - 3) +\n// '...'\n// : customerStory.acfTestimonial.description\n return (\n \n \n {useCase.title}\n {useCase.use_cases_fields.description} \n \n \n \n \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 display: flex;\n flex-direction: column;\n justify-content: space-between;\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 TextContainer = styled.div`\n \n \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`\nconst Arrow = styled.img`\n width: 48px;\n height: 20px;\n \n`\nconst ArrowContainer = styled.div`\n width:100%;\n padding: 0 30px;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\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 {UseCaseCard} from '../components/UseCases/UseCaseCard'\nimport styled from 'styled-components'\ninterface Props {\n data: any\n pageContext: any\n}\n\nconst UseCases = ({ data, pageContext }: Props) => {\n const { wpPage, allWpUseCase } = data\n\n // const lazyBlocks = parse(wpPage.lazy_data)\n const renderedBlocks = LazyBlocksFactory(wpPage.lazy_data, wpPage.title)\n\n return (\n \n {renderedBlocks.map((v) => v)}\n\n \n \n\n {allWpUseCase.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 UseCases\n\nexport const pageQuery = graphql`\n query useCases {\n wpPage(title: { eq: \"Use Cases\" }) {\n id\n title\n lazy_data\n }\n allWpUseCase {\n nodes {\n title\n slug\n use_cases_fields{\n description\n }\n }\n }\n }\n`\n"],"sourceRoot":""}