{"version":3,"file":"d676735c-f40dfad5d9be60f0bfc0.js","mappings":"6pIAmMA,UA9KiB,SAAC,GAAwB,IAAtBA,EAAqB,EAArBA,SAAUC,EAAW,EAAXA,KACtBC,EAAWD,EAAKE,mBAEtB,OACE,QAAC,IAAD,CAAQH,SAAUA,IAChB,QAAC,IAAD,CACEI,MAAOF,EAASG,eAAiB,OACjCC,YAAaJ,EAASK,oBACtBC,MACEN,EAASO,cAAT,SACaP,EAASO,cAAcC,KAAKC,SACrCC,KAIR,2BACE,uBAEE,uBACE,cAAIC,IAAG,CAAGC,EAAAA,GAAH,0EACJZ,EAASa,eAGZ,aAAGF,IAAG,CAAGG,EAAAA,GAAH,QAAkBd,EAASe,cAEjC,eAAKJ,IAAG,CAAGK,EAAAA,GAAH,yDACN,aAAGC,KAAK,eAAR,mCAIA,aAAGA,KAAK,2BAAR,sCAOJ,uBACE,QAAC,EAAAC,EAAD,CACEC,UAAU,UACVC,eAAgB,cAFlB,MAIEd,MAAOP,EAAKsB,UAAUC,gBAAgBC,gBACtCC,IAAK,6CAEP,eACEb,IAAG,8PAMP,eACEA,IAAG,+PAQT,QAAC,IAAD,CAAUZ,KAAMC,EAASyB,cAGzB,2BACE,uBAEE,uBACE,QAAC,EAAAP,EAAD,OAEEZ,MAAON,EAAS0B,cAAcH,gBAC9BC,IAAKxB,EAAS0B,cAAcC,aAIhC,uBAEE,uBACE,cAAIhB,IAAG,CAAGiB,EAAAA,GAAH,6BACJ5B,EAAS6B,oBAEZ,aAAGlB,IAAG,CAAGK,EAAAA,GAAH,8BACHhB,EAAS8B,iBAAiBA,mBAE7B,QAAC,KAAD,CAAYC,YAAY,kBACrB/B,EAASgC,gBAId,uBAGA,uBACE,cAAIrB,IAAG,CAAGiB,EAAAA,GAAH,6BACJ5B,EAASiC,oBAEZ,aAAGtB,IAAG,CAAGK,EAAAA,GAAH,8BACHhB,EAASkC,iBAAiBA,mBAE7B,QAAC,KAAD,CAAYH,YAAY,4BACrB/B,EAASmC,mBAQpB,QAAC,IAAD,CAASC,QAASpC,EAASoC,UAG1BpC,EAASqC,yBACR,2BACE,uBAEE,uBACE,cAAI1B,IAAG,CAAGiB,EAAAA,GAAH,QAAkB5B,EAASsC,oBAGpC,sBACGtC,EAASqC,uBAAuBE,KAAI,SAACC,EAASC,GAAV,OACnC,qBAAgBC,IAAG,iBAAmBD,IACpC,QAAC,EAAAvB,EAAD,OAEEZ,MAAOkC,EAAQG,KAAKpB,gBACpBC,IAAKgB,EAAQG,KAAKhB,YAEpB,qBACGa,EAAQI,UACT,uBACGJ,EAAQK,WAGb,aAAGlC,IAAG,CAAGK,EAAAA,GAAH,QAAgBwB,EAAQpC,YAAYA,kBAG9C,uBACE,QAAC,KAAD,CAAY2B,YAAY,4BACrB/B,EAASmC,iBAKhB,uBACE,QAAC,EAAAjB,EAAD,OAEEZ,MAAON,EAAS8C,cAAcvB,gBAC9BC,IAAKxB,EAAS8C,cAAcnB,eAOtC,QAAC,IAAD,CACEiB,SAAU5C,EAAS+C,YACnBF,QAAS7C,EAASgD,QAAQA,QAC1BC,UAAWjD,EAASkD,aACpB5C,MAAON,EAASmD,YAGlB,QAAC,IAAD,CACEC,OAAQpD,EAASqD,YACjBC,KAAMtD,EAASuD,QAAQA,QACvBC,KAAM,CACJ,CAAEF,KAAM,gBAAiBvB,YAAa,kBACtC,CAAEuB,KAAM,cAAevB,YAAa,iBAEtCzB,MAAON,EAASyD","sources":["webpack://staffy-website/./src/pages/index.js"],"sourcesContent":["import React from 'react'\nimport { graphql } from 'gatsby'\nimport tw from 'twin.macro'\nimport { GatsbyImage } from 'gatsby-plugin-image'\n\n// Components\nimport {\n  HeaderStyle,\n  CopyStyle,\n  LinkButton,\n  HeaderXLStyle,\n  HeaderTextStyle,\n  CopyLGStyle,\n} from '../components/UI'\nimport Layout from '../components/Layout'\nimport Featured from '../components/Featured'\nimport Clients from '../components/Clients'\nimport FrequentlyAskedQuestions from '../components/FrequentlyAskedQuestions'\nimport CallToAction from '../components/CallToAction'\nimport Seo from '../components/Seo'\n\nconst Homepage = ({ location, data }) => {\n  const pageData = data.contentfulHomepage\n\n  return (\n    <Layout location={location}>\n      <Seo\n        title={pageData.metadataTitle || 'Home'}\n        description={pageData.metadataDescription}\n        image={\n          pageData.metadataImage\n            ? `https:${pageData.metadataImage.file.url}`\n            : undefined\n        }\n      />\n      {/* Hero */}\n      <section tw=\"text-[#202C3A] overflow-hidden lg:(-mt-20 pt-20)\">\n        <div tw=\"flex flex-col lg:(grid grid-cols-[1fr repeat(12, calc(1024px/12)) 1fr] relative h-full)\">\n          {/* Content */}\n          <div tw=\"m-7 lg:(m-0 col-start-2 col-span-6) flex flex-col justify-center\">\n            <h1 css={[HeaderTextStyle, tw`mb-[30px] lg:(mb-[20px])`]}>\n              {pageData.heroHeadline}\n            </h1>\n\n            <p css={[CopyLGStyle]}>{pageData.heroSubhead}</p>\n\n            <div css={[CopyStyle, tw`flex mb-[22px] mt-[52px]`]}>\n              <a href='/find-talent' tw=\"px-[32px] py-[14px] border-[2px] bg-[#FF4D00] border-[#FF4D00] text-white bg-[#FF4D00] mr-[28px] font-bold\">\n                Hire healthcare workers\n              </a>\n\n              <a href=\"/hospitality/find-talent\" tw=\"py-[14px] text-[#1f2c3a] font-bold\">\n                Hire hospitality workers\n              </a>\n\n            </div>\n          </div>\n          {/* Image */}\n          <div tw=\"relative lg:(col-start-7 col-span-9 absolute h-full)\">\n            <GatsbyImage\n              objectFit=\"contain\"\n              objectPosition={'left bottom'}\n              tw=\"w-full h-full\"\n              image={data.heroImage.childImageSharp.gatsbyImageData}\n              alt={'Hand holding phone with Staffy app open'}\n            />\n            <div\n              css={[\n                tw`block lg:hidden absolute w-[200vw] h-[100%] bottom-0 z-[-1] bg-[#E9F1F3]`,\n                `transform: translateY(50%) rotate(-8deg)`,\n              ]}\n            />\n          </div>\n          <div\n            css={[\n              tw`hidden lg:block absolute w-[200vw] h-[100%] bottom-0 z-[-1] bg-[#E9F1F3]`,\n              `transform: translateY(50%) rotate(-8deg)`,\n            ]}\n          />\n        </div>\n      </section>\n\n      <Featured data={pageData.featuredIn} />\n\n      {/* Employers and Workers */}\n      <section tw=\"max-w-screen-xl mx-auto\">\n        <div tw=\"flex flex-col lg:(mx-0 py-0 grid grid-cols-[1fr repeat(12, calc(1024px/12)) 1fr] relative h-full mt-10 mb-20)\">\n          {/* Image */}\n          <div tw=\"lg:(col-span-6)\">\n            <GatsbyImage\n              tw=\"w-full h-full object-cover\"\n              image={pageData.section2Image.gatsbyImageData}\n              alt={pageData.section2Image.filename}\n            />\n          </div>\n          {/* Copy */}\n          <div tw=\"mx-7 py-14 lg:(mx-0 py-0 col-start-8 col-span-5 flex flex-col justify-center)\">\n            {/* Workers */}\n            <div tw=\"mb-12 lg:mb-[72px]\">\n              <h2 css={[HeaderStyle, tw`mb-6`]}>\n                {pageData.section2Headline2}\n              </h2>\n              <p css={[CopyStyle, tw`mb-5`]}>\n                {pageData.section2Subhead2.section2Subhead2}\n              </p>\n              <LinkButton destination=\"/start-earning\">\n                {pageData.section2Cta2}\n              </LinkButton>\n            </div>\n\n            <hr tw=\"border-[2px] border-[#E9F1F3]\" />\n\n            {/* Employers */}\n            <div tw=\"mt-12 lg:mt-[72px]\">\n              <h2 css={[HeaderStyle, tw`mb-6`]}>\n                {pageData.section2Headline1}\n              </h2>\n              <p css={[CopyStyle, tw`mb-5`]}>\n                {pageData.section2Subhead1.section2Subhead1}\n              </p>\n              <LinkButton destination=\"/find-talent#book-a-demo\">\n                {pageData.section2Cta1}\n              </LinkButton>\n            </div>\n          </div>\n        </div>\n      </section>\n\n      {/* Clients */}\n      <Clients clients={pageData.clients} />\n\n      {/* What makes us different */}\n      {pageData.section3StaffyFeatures && (\n        <section tw=\"max-w-screen-xl mx-auto\">\n          <div tw=\"flex flex-col lg:(py-16 grid grid-cols-[1fr repeat(12, calc(1024px/12)) 1fr] relative h-full)\">\n            {/* Headline */}\n            <div tw=\"order-1 mx-7 mt-16 mb-8 lg:(order-1 mx-0 mt-0 mb-16 col-start-2 col-span-12 text-center)\">\n              <h2 css={[HeaderStyle]}>{pageData.section3Headline}</h2>\n            </div>\n            {/* Features */}\n            <div tw=\"order-3 mx-7 py-16 lg:(order-2 mx-0 col-start-2 col-span-5 flex flex-col justify-center)\">\n              {pageData.section3StaffyFeatures.map((feature, index) => (\n                <div tw=\"mb-12\" key={`staff-feature-${index}`}>\n                  <GatsbyImage\n                    tw=\"mb-4 w-10 lg:mb-2\"\n                    image={feature.icon.gatsbyImageData}\n                    alt={feature.icon.filename}\n                  />\n                  <h3 tw=\"text-[#FF4D00] font-bold text-3xl mb-3.5 lg:(mb-5 text-5xl)\">\n                    {feature.headline}\n                    <span tw=\"block text-2xl font-semibold\">\n                      {feature.subhead}\n                    </span>\n                  </h3>\n                  <p css={[CopyStyle]}>{feature.description.description}</p>\n                </div>\n              ))}\n              <div tw=\"\">\n                <LinkButton destination=\"/find-talent#book-a-demo\">\n                  {pageData.section2Cta1}\n                </LinkButton>\n              </div>\n            </div>\n            {/* Image */}\n            <div tw=\"order-2 lg:(order-3 col-start-8 col-span-7)\">\n              <GatsbyImage\n                tw=\"w-full h-full object-cover\"\n                image={pageData.section3Image.gatsbyImageData}\n                alt={pageData.section3Image.filename}\n              />\n            </div>\n          </div>\n        </section>\n      )}\n\n      <FrequentlyAskedQuestions\n        headline={pageData.faqHeadline}\n        subhead={pageData.faqCopy.faqCopy}\n        questions={pageData.faqQuestions}\n        image={pageData.faqImage}\n      />\n\n      <CallToAction\n        header={pageData.ctaHeadline}\n        copy={pageData.ctaCopy.ctaCopy}\n        ctas={[\n          { copy: 'Start Earning', destination: '/start-earning' },\n          { copy: 'Find Talent', destination: '/find-talent' },\n        ]}\n        image={pageData.ctaImage}\n      />\n    </Layout>\n  )\n}\n\nexport default Homepage\n\nexport const pageQuery = graphql`\n  {\n    contentfulHomepage(pageId: { eq: \"Homepage\" }) {\n      heroHeadline\n      heroSubhead\n      featuredIn {\n        name\n        logo {\n          gatsbyImageData(layout: CONSTRAINED, placeholder: NONE, width: 200)\n        }\n      }\n      section2Image {\n        filename\n        gatsbyImageData(\n          layout: CONSTRAINED\n          placeholder: DOMINANT_COLOR\n          width: 1024\n          quality: 80\n        )\n      }\n      section2Headline1\n      section2Subhead1 {\n        section2Subhead1\n      }\n      section2Cta1\n      section2Headline2\n      section2Subhead2 {\n        section2Subhead2\n      }\n      section2Cta2\n      clients {\n        name\n        logo {\n          gatsbyImageData(\n            layout: CONSTRAINED\n            placeholder: DOMINANT_COLOR\n            width: 300\n            quality: 100\n          )\n        }\n      }\n      section3Headline\n      section3StaffyFeatures {\n        icon {\n          filename\n          gatsbyImageData(\n            layout: CONSTRAINED\n            placeholder: DOMINANT_COLOR\n            width: 80\n            quality: 100\n          )\n        }\n        headline\n        subhead\n        description {\n          description\n        }\n      }\n      section3Image {\n        filename\n        gatsbyImageData(\n          layout: CONSTRAINED\n          placeholder: DOMINANT_COLOR\n          width: 1024\n          quality: 80\n        )\n      }\n      faqImage {\n        filename\n        gatsbyImageData(\n          layout: CONSTRAINED\n          placeholder: DOMINANT_COLOR\n          width: 1024\n          quality: 80\n        )\n      }\n      faqHeadline\n      faqCopy {\n        faqCopy\n      }\n      faqQuestions {\n        question\n        answer {\n          raw\n        }\n      }\n      ctaHeadline\n      ctaCopy {\n        ctaCopy\n      }\n      ctaImage {\n        filename\n        gatsbyImageData(\n          layout: CONSTRAINED\n          placeholder: DOMINANT_COLOR\n          width: 1024\n          quality: 80\n        )\n      }\n      metadataTitle\n      metadataDescription\n      metadataImage {\n        file {\n          url\n        }\n      }\n    }\n    hand: file(relativePath: { eq: \"homepage-hand.png\" }) {\n      childImageSharp {\n        gatsbyImageData(\n          width: 1024\n          placeholder: NONE\n          quality: 80\n          transformOptions: { cropFocus: SOUTHWEST, fit: CONTAIN }\n        )\n      }\n    }\n    heroImage: file(relativePath: { eq: \"new-logo-hero-image.png\" }) {\n      childImageSharp {\n        gatsbyImageData(\n          width: 1024\n          placeholder: NONE\n          quality: 80\n          transformOptions: { cropFocus: SOUTHWEST, fit: CONTAIN }\n        )\n      }\n    }\n  }\n`\n"],"names":["location","data","pageData","contentfulHomepage","title","metadataTitle","description","metadataDescription","image","metadataImage","file","url","undefined","css","HeaderTextStyle","heroHeadline","CopyLGStyle","heroSubhead","CopyStyle","href","G","objectFit","objectPosition","heroImage","childImageSharp","gatsbyImageData","alt","featuredIn","section2Image","filename","HeaderStyle","section2Headline2","section2Subhead2","destination","section2Cta2","section2Headline1","section2Subhead1","section2Cta1","clients","section3StaffyFeatures","section3Headline","map","feature","index","key","icon","headline","subhead","section3Image","faqHeadline","faqCopy","questions","faqQuestions","faqImage","header","ctaHeadline","copy","ctaCopy","ctas","ctaImage"],"sourceRoot":""}