{"version":3,"file":"0bd7b2bf-c4c6733f16cee5220afd.js","mappings":"62IA0MA,UAtLiB,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,cACEC,IAAG,CACDC,EAAAA,GADC,kKAKFZ,EAASa,eAEZ,aAAGF,IAAG,CAAGG,EAAAA,GAAH,8EAAoCd,EAASe,cAEnD,eAAKJ,IAAG,CAAGK,EAAAA,GAAH,yDACN,aAAGC,KAAK,2BAAR,oCAIA,aAAGA,KAAK,eAAR,qCAQJ,uBACE,QAAC,EAAAC,EAAD,CACEC,UAAU,UACVC,eAAgB,cAFlB,MAIEd,MAAOP,EAAKsB,KAAKC,gBAAgBC,gBACjCC,IAAK,0CACLC,QAAQ,WAEV,eACEd,IAAG,6PAOP,eACEA,IAAG,8PAQT,QAAC,IAAD,CAAUZ,KAAMC,EAAS0B,cAGzB,2BACE,uBAEE,uBACE,QAAC,EAAAR,EAAD,OAEEZ,MAAON,EAAS2B,cAAcJ,gBAC9BC,IAAKxB,EAAS2B,cAAcC,aAIhC,uBAEE,uBACE,cAAIjB,IAAG,CAAGkB,EAAAA,GAAH,6BACJ7B,EAAS8B,oBAEZ,aAAGnB,IAAG,CAAGK,EAAAA,GAAH,8BACHhB,EAAS+B,iBAAiBA,mBAE7B,QAAC,KAAD,CAAYC,YAAY,8BACrBhC,EAASiC,gBAId,uBAGA,uBACE,cAAItB,IAAG,CAAGkB,EAAAA,GAAH,6BACJ7B,EAASkC,oBAEZ,aAAGvB,IAAG,CAAGK,EAAAA,GAAH,8BACHhB,EAASmC,iBAAiBA,mBAE7B,QAAC,KAAD,CAAYH,YAAY,wCACrBhC,EAASoC,mBAQpB,QAAC,IAAD,CAASC,QAASrC,EAASqC,QAASC,aAAa,IAGhDtC,EAASuC,yBACR,2BACE,uBAEE,uBACE,cAAI5B,IAAG,CAAGkB,EAAAA,GAAH,QAAkB7B,EAASwC,oBAGpC,sBACGxC,EAASuC,uBAAuBE,KAAI,SAACC,EAASC,GAAV,OACnC,qBAAgBC,IAAG,iBAAmBD,IACpC,QAAC,EAAAzB,EAAD,OAEEZ,MAAOoC,EAAQG,KAAKtB,gBACpBC,IAAKkB,EAAQG,KAAKjB,YAEpB,qBACGc,EAAQI,UACT,uBACGJ,EAAQK,WAGb,aAAGpC,IAAG,CAAGK,EAAAA,GAAH,QAAgB0B,EAAQtC,YAAYA,kBAG9C,uBACE,QAAC,KAAD,CAAY4B,YAAY,wCACrBhC,EAASoC,iBAKhB,uBACE,QAAC,EAAAlB,EAAD,OAEEZ,MAAON,EAASgD,cAAczB,gBAC9BC,IAAKxB,EAASgD,cAAcpB,eAOtC,QAAC,IAAD,CACEkB,SAAU9C,EAASiD,YACnBF,QAAS/C,EAASkD,QAAQA,QAC1BC,UAAWnD,EAASoD,aACpB9C,MAAON,EAASqD,SAChBC,kBAAkB,KAGpB,QAAC,IAAD,CACEC,OAAQvD,EAASwD,YACjBC,KAAMzD,EAAS0D,QAAQA,QACvBC,KAAM,CACJ,CAAEF,KAAM,gBAAiBzB,YAAa,8BACtC,CAAEyB,KAAM,cAAezB,YAAa,6BAEtC1B,MAAON,EAAS4D","sources":["webpack://staffy-website/./src/pages/hospitality/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  CopyLGStyle,\n} from '../../components/UIHospitality'\nimport Layout from '../../components/LayoutHospitality'\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-[#EFEFEF] bg-[#202C3A] overflow-hidden lg:(h-screen -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\n              css={[\n                HeaderXLStyle,\n                tw`text-[white] mb-[30px] lg:(-mt-40 mb-[20px])`,\n              ]}\n            >\n              {pageData.heroHeadline}\n            </h1>\n            <p css={[CopyLGStyle, tw`text-[white]`]}>{pageData.heroSubhead}</p>\n\n            <div css={[CopyStyle, tw`flex mb-[22px] mt-[52px]`]}>\n              <a href='/hospitality/find-talent' tw=\"px-[32px] py-[14px] border-[2px] bg-[#FF4D00] border-[#FF4D00] text-white bg-[#FF4D00] mr-[28px] font-bold\">\n                Hire hospitality workers\n              </a>\n\n              <a href=\"/find-talent\" tw=\"py-[14px] text-[#ffffff] font-bold\">\n                Hire healthcare workers\n              </a>\n\n            </div>\n\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 z-[1]\"\n              image={data.hand.childImageSharp.gatsbyImageData}\n              alt={'Hand holding phone with Staffy app open'}\n              loading=\"eager\"\n            />\n            <div\n              css={[\n                tw`bg-white block lg:hidden absolute w-[200vw] h-[100%] bottom-0 z-0`,\n                `transform: translateY(50%) rotate(-8deg)`,\n              ]}\n            />\n          </div>\n          {/* Bar */}\n          <div\n            css={[\n              tw`bg-white hidden lg:block absolute w-[200vw] h-[100%] bottom-0 z-0`,\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=\"bg-[#E9F1F3] lg:(pt-10 pb-20)\">\n        <div tw=\"flex flex-col lg:(py-0 grid grid-cols-[1fr repeat(12, calc(1024px/12)) 1fr] relative h-full max-w-screen-xl mx-auto)\">\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=\"/hospitality/start-earning\">\n                {pageData.section2Cta2}\n              </LinkButton>\n            </div>\n\n            <hr tw=\"border-[2px] border-[#FF4D00]\" />\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=\"/hospitality/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} hospitality={true} />\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 items-center)\">\n            {/* Headline */}\n            <div tw=\"order-1 mx-7 mt-16 mb-8 lg:(order-1 mx-0 mt-0 mb-0 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=\"lg:w-[180px]\">\n                <LinkButton destination=\"/hospitality/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\"\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        hospitalityRoute={true}\n      />\n\n      <CallToAction\n        header={pageData.ctaHeadline}\n        copy={pageData.ctaCopy.ctaCopy}\n        ctas={[\n          { copy: 'Start Earning', destination: '/hospitality/start-earning' },\n          { copy: 'Find Talent', destination: '/hospitality/find-talent' },\n        ]}\n        image={pageData.ctaImage}\n      />\n    </Layout>\n  )\n}\n\nexport default Homepage\n\nexport const pageQuery = graphql`\n  {\n    contentfulHomepage(\n      pageId: {\n        eq: \"Homepage\" \n      },\n      spaceId: {\n        eq: \"ufz0zh9i8v45\"\n      }\n      ) {\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  }\n`\n"],"names":["location","data","pageData","contentfulHomepage","title","metadataTitle","description","metadataDescription","image","metadataImage","file","url","undefined","css","HeaderXLStyle","heroHeadline","CopyLGStyle","heroSubhead","CopyStyle","href","G","objectFit","objectPosition","hand","childImageSharp","gatsbyImageData","alt","loading","featuredIn","section2Image","filename","HeaderStyle","section2Headline2","section2Subhead2","destination","section2Cta2","section2Headline1","section2Subhead1","section2Cta1","clients","hospitality","section3StaffyFeatures","section3Headline","map","feature","index","key","icon","headline","subhead","section3Image","faqHeadline","faqCopy","questions","faqQuestions","faqImage","hospitalityRoute","header","ctaHeadline","copy","ctaCopy","ctas","ctaImage"],"sourceRoot":""}