{"version":3,"sources":["webpack:///./src/components/pages/Jobs/index.jsx","webpack:///./src/components/ImageSlider.jsx","webpack:///./src/pages/jobs.js","webpack:///./src/styles/StyledSustainStat.jsx"],"names":["styled","div","pageMargins","remCalc","section","StyledJobs","color","header","jobs","color_3","color_2","color_1","location","data","useStaticQuery","Hero","bgImage","bg","animationData","mobileAnimationData","mobileColors","pathname","headerColor","LetterAnimation","duration","delay","initDelay","className","data-scroll","data-scroll-speed","CircleAndText","image","jobs1","List","device","Item","scrollElementClass","Line","StyledStats","align","fluid","jobs2","childImageSharp","jobs3","StyledSustainStat","Video","url","caption","poster","NextPage","page","title","path","colorKey","typography","type","primary","social_value"],"mappings":"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","file":"component---src-pages-jobs-js-6c0c9803144fe73fefaa.js","sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { useStaticQuery, grapqhl } from \"gatsby\"\nimport Img from \"gatsby-image\"\nimport { remCalc, pageMargins } from \"../../../styles/utils.js\"\nconst StyledJobs = styled.div`\n  width: 100%;\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  justify-content: space-between;\n\n  & .jobs_image-stat {\n    padding-top: 5rem;\n    padding-bottom: 5rem;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    ${pageMargins};\n    /* &:not(.no-image) {\n    } */\n\n    & h4 {\n      font-size: 2.5rem;\n      line-height: ${remCalc(50)};\n      width: 40%;\n    }\n    & h3 {\n      font-size: ${remCalc(56)};\n      line-height: ${remCalc(68)};\n      width: 30%;\n    }\n    p {\n      font-size: ${remCalc(30)};\n      line-height: ${remCalc(40)};\n      width: 50%;\n    }\n    .jobs_image-pattern {\n      width: 30vw;\n      height: 34vw;\n      background: black;\n    }\n  }\n`\n\nconst Jobs = () => {\n  const data = useStaticQuery(graphql`\n    query {\n      pattern: file(relativePath: { eq: \"jobs-stat-pattern.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 400) {\n            ...GatsbyImageSharpFluid\n          }\n        }\n      }\n    }\n  `)\n  return (\n    <StyledJobs className=\"full-width\" data-scroll>\n      <div className=\"jobs_image-stat\">\n        <div className=\"jobs_image-pattern\" data-scroll data-scroll-speed=\"1\">\n          <Img fluid={data.pattern.childImageSharp.fluid} />\n        </div>\n\n        <h4>\n          Landsec's ten-year contribution to the economy through property\n          development.\n        </h4>\n      </div>\n      <div className=\"jobs_image-stat\">\n        <h4>\n          Number of jobs created in construction through Landsec's development\n          activities over the last decade.\n        </h4>\n        <div className=\"jobs_image-pattern\" data-scroll data-scroll-speed=\"1\">\n          <Img fluid={data.pattern.childImageSharp.fluid} />\n        </div>\n      </div>\n      <div className=\"jobs_image-stat no-image\">\n        <h3>We don’t just build and rent out buildings</h3>\n        <p className=\"jobs_image-para\">\n          We create destinations for business of all sizes from start ups to\n          international conglomerates – to inspire workforces, increase\n          productivity and drive optimal performance.\n        </p>\n      </div>\n    </StyledJobs>\n  )\n}\n\nexport default Jobs\n","import React, { useEffect, useRef } from \"react\"\nimport styled from \"styled-components\"\nimport { useGesture, useWheel } from \"react-use-gesture\"\nimport { useSpring, animated, interpolate } from \"react-spring\"\nimport { trans } from \"../../lib/helperFunctions\"\nconst StyledSlider = styled.section`\n  &.tiles {\n    height: 36vw;\n    position: relative;\n    overflow: hidden;\n  }\n\n  &.tiles--oneline {\n    min-height: 400px;\n    margin: 2vh 0;\n  }\n  .tiles__wrap {\n    width: 150%;\n    height: 40vh;\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate3d(-50%, -50%, 0);\n  }\n  .tiles__line {\n    display: flex;\n    height: 100%;\n  }\n  .tiles--oneline .tiles__line {\n    height: 100%;\n  }\n  .tiles__line-img {\n    flex: none;\n    margin: 2vw;\n    background-size: cover;\n    background-position: 50% 50%;\n    margin: 0 1vw;\n    width: calc(25% - 1vw * 2);\n    height: 100%;\n  }\n`\n\nconst ImageSlider = () => {\n  return (\n    <div className=\"slider_container full-width \">\n      <StyledSlider className=\"full-width tiles tiles--oneline\" id=\"grid2\">\n        <div className=\"tiles__wrap\">\n          <div\n            className=\"tiles__line\"\n            data-scroll\n            data-scroll-speed=\"-2\"\n            data-scroll-direction=\"horizontal\"\n          >\n            <div\n              className=\"tiles__line-img\"\n              style={{ backgroundColor: \"black\" }}\n            ></div>\n            <div\n              className=\"tiles__line-img\"\n              style={{ backgroundColor: \"black\" }}\n            ></div>\n            <div\n              className=\"tiles__line-img\"\n              style={{ backgroundColor: \"black\" }}\n            ></div>\n            <div\n              className=\"tiles__line-img\"\n              style={{ backgroundColor: \"black\" }}\n            ></div>\n          </div>\n        </div>\n      </StyledSlider>\n      <StyledSlider className=\"tiles full-width tiles--oneline\" id=\"grid3\">\n        <div className=\"tiles__wrap\">\n          <div\n            className=\"tiles__line\"\n            data-scroll\n            data-scroll-speed=\"2\"\n            data-scroll-direction=\"horizontal\"\n          >\n            <div\n              className=\"tiles__line-img\"\n              style={{ backgroundColor: \"black\" }}\n            ></div>\n            <div\n              className=\"tiles__line-img\"\n              style={{ backgroundColor: \"black\" }}\n            ></div>\n            <div\n              className=\"tiles__line-img\"\n              style={{ backgroundColor: \"black\" }}\n            ></div>\n            <div\n              className=\"tiles__line-img\"\n              style={{ backgroundColor: \"black\" }}\n            ></div>\n          </div>\n        </div>\n      </StyledSlider>\n    </div>\n  )\n}\n\nexport default ImageSlider\n","import React, { useRef, useEffect, useCallback } from \"react\"\nimport Layout from \"../layouts\"\nimport styled from \"styled-components\"\nimport { useStaticQuery, graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\nimport { color } from \"../styles/variables\"\nimport Hero from \"../components/Hero\"\nimport LetterAnimation from \"../animations/LetterAnimation\"\nimport { PageContainer } from \"../styles/global\"\nimport NextPage from \"../components/NextPage\"\nimport CircleAndText from \"../components/CircleAndText\"\nimport JobsContainer from \"../components/pages/Jobs\"\nimport ImageSlider from \"../components/ImageSlider\"\nimport animationData from \"../animations/DESKTOP_MOBILE/06-Jobs.json\"\nimport mobileAnimationData from \"../animations/DESKTOP_MOBILE/06-Jobs_MOBILE.json\"\nimport List from \"../components/List\"\nimport Item from \"../components/List/Item\"\nimport Arrow from \"../images/svgs/Explore\"\nimport StyledStats from \"../styles/StyledStats\"\nimport Line from \"../components/Line\"\nimport Video from \"../components/Video\"\nimport StyledSustainStat from \"../styles/StyledSustainStat\"\n\nconst StyledJobs = styled.div`\n  /* padding-top: 7rem; */\n  @media only screen and (max-width: 1024px) {\n    padding-top: 3rem;\n  }\n  @media only screen and (max-width: 640px) {\n    padding-top: 0rem;\n  }\n  & a {\n    color: black;\n  }\n  & .jobs_red {\n    color: ${color.header.jobs.color_3};\n  }\n  & .jobs_blue {\n    color: ${color.header.jobs.color_2};\n  }\n  & .jobs_light-blue {\n    color: ${color.header.jobs.color_1};\n  }\n  & .stats_image {\n    transform: translate(0);\n  }\n`\n\nconst jobs = ({ location }) => {\n  const data = useStaticQuery(graphql`\n    query {\n      jobs1: file(relativePath: { eq: \"jobs-1.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 500) {\n            ...GatsbyImageSharpFluid\n          }\n        }\n      }\n      jobs2: file(relativePath: { eq: \"jobs-2.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 500) {\n            ...GatsbyImageSharpFluid\n          }\n        }\n      }\n      jobs3: file(relativePath: { eq: \"jobs-3.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 500) {\n            ...GatsbyImageSharpFluid\n          }\n        }\n      }\n      jobs4: file(relativePath: { eq: \"jobs-4.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 500) {\n            ...GatsbyImageSharpFluid\n          }\n        }\n      }\n      bgImage: file(relativePath: { eq: \"jobs-header.jpg\" }) {\n        childImageSharp {\n          fluid(maxWidth: 1500) {\n            ...GatsbyImageSharpFluid\n          }\n        }\n      }\n      poster: file(relativePath: { eq: \"jobs-video-poster.jpg\" }) {\n        childImageSharp {\n          fluid(maxWidth: 1500) {\n            ...GatsbyImageSharpFluid\n          }\n        }\n      }\n    }\n  `)\n\n  return (\n    <Layout location={location}>\n      <Hero\n        bgImage={data.bgImage}\n        bg=\"black\"\n        animationData={animationData}\n        mobileAnimationData={mobileAnimationData}\n        mobileColors={color.header.jobs}\n        location={location.pathname}\n        headerColor=\"#A52E5A\"\n      >\n        <LetterAnimation duration={0.7} delay={0.017} initDelay={0.5}>\n          <h1\n            className=\"hero_title text-animated\"\n            data-scroll\n            data-scroll-speed=\"2\"\n          >\n            <span className=\"line-inner\">Jobs</span>\n          </h1>\n        </LetterAnimation>\n      </Hero>\n      <PageContainer>\n        <CircleAndText image={data.jobs1}>\n          <div\n            data-scroll\n            data-scroll-speed=\"1\"\n            className=\"circle-text_container first-section\"\n          >\n            <p data-scroll data-scroll-speed=\"1\">We create, support and deliver jobs right across the UK. Whether we’re directly employing staff at our Head Office or in our destinations, or we’re working with a partner to ensure the presence of specialists in construction, security or customer service, we ensure that the people who work with us are valued, treated fairly and have access to long-term, sustainable, employment.</p>\n            <List device=\"desktop\">\n              <Item scrollElementClass=\"job-creation\">\n                <p>Job creation</p>\n                <Arrow />\n              </Item>\n              <Item scrollElementClass=\"community-employment\">\n                <p>Community employment</p>\n                <Arrow />\n              </Item>\n              <Item scrollElementClass=\"prison-employment\">\n                <p>Employment after prison</p>\n                <Arrow />\n              </Item>\n            </List>\n          </div>\n          <List device=\"tablet\">\n            <Item scrollElementClass=\"job-creation\">\n              <p>Job creation</p>\n              <Arrow />\n            </Item>\n            <Item scrollElementClass=\"community-employment\">\n              <p>Community employment</p>\n              <Arrow />\n            </Item>\n            <Item scrollElementClass=\"prison-employment\">\n              <p>Employment after prison</p>\n              <Arrow />\n            </Item>\n          </List>\n          <Line />\n        </CircleAndText>\n        <StyledJobs>\n          <StyledStats\n            align=\"flex-start\"\n            className=\"headline-stats jobs_stats p-bottom-0 job-creation\"\n          >\n            <div className=\"stat_item stat_item--aligned\">\n              <div className=\"stat_item__inner\">\n                <div className=\"stat_title\">\n                  <h3 className=\"jobs_red\">128,000 +</h3>\n                </div>\n                <div className=\"stat_para\">\n                  <p>\n                    Number of jobs across our workplace, retail and leisure\n                    destinations.\n                  </p>\n                </div>\n              </div>\n              <div className=\"stat_item__inner\">\n                <div className=\"stat_title\">\n                  <h3 className=\"jobs_red\">44,914</h3>\n                </div>\n                <div className=\"stat_para\">\n                  <p>\n                    Number of jobs created in construction through Landsec's\n                    development activities over the last decade.\n                  </p>\n                </div>\n              </div>\n             </div>\n            <div className=\"stat_item jobs_image stats_image\">\n              <Img fluid={data.jobs2.childImageSharp.fluid} />\n            </div>\n          </StyledStats>\n          <StyledStats\n            align=\"flex-start\"\n            className=\"headline-stats jobs_stats p-top-0\"\n          >\n            <div className=\"stat_item jobs_image stats_image\">\n              <Img fluid={data.jobs3.childImageSharp.fluid} />\n            </div>\n            <div className=\"stat_item stat_item--aligned\">\n              <div className=\"stat_item__inner\">\n                <div className=\"stat_title\">\n                  <h3 className=\"jobs_red\">£60.2m</h3>\n                </div>\n                <div className=\"stat_para\">\n                  <p>\n                    The estimated economic contribution of Landsec's employees per\n                    year.\n                  </p>\n                </div>\n              </div>\n              <div className=\"stat_item__inner\">\n                <div className=\"stat_title\">\n                  <h3 className=\"jobs_red\">£12.7m</h3>\n                </div>\n                <div className=\"stat_para\">\n                  <p>\n                    Landsec’s annual employment tax contribution for the last tax\n                    year.\n                  </p>\n                </div>\n              </div>\n            </div>\n            <Line />\n          </StyledStats>\n          <div className=\"page_title-subtitle grid-wrapper community-employment section-padding\">\n            <div className=\"title red\">\n              <h2 className=\"jobs_light-blue\">Community employment</h2>\n            </div>\n            <div className=\"subtitle\">Our community employment programme is helping address socio-economic challenges that affect people living in our communities. Working closely with our industry partners and customers, we continue to fill significant skills gaps in construction, facilities management and customer service, supporting some of the most excluded groups in our society to find employment. These include people experiencing homelessness, young people, and prison leavers.\n            </div>\n            <Line />\n          </div>\n          <StyledSustainStat className=\"no-margin-b prison-employment\">\n            <div className=\"social-stats_text prison\">\n              <h2 className=\"jobs_blue\">Employment after prison</h2>\n            </div>\n            <div className=\"social-stats_container\">\n              <div className=\"social_stats-row\">\n                <div className=\"social-stats_item\">\n                  <h2 className=\"sustain_stat-title jobs_light-blue\">121</h2>\n                  <p>People supported into work through our community employment programme in 2020/2021</p>\n                </div>\n              </div>\n            </div>\n          </StyledSustainStat>\n          <Video\n            url=\"https://www.youtube.com/watch?v=ymJ5CDaJdfg&feature=emb_logo\"\n            caption=\"Onu's story of employment following prison.\"\n            poster={data.poster.childImageSharp.fluid}\n          />\n          <div className=\"page_title-subtitle grid-wrapper community-employment section-padding\">\n            <div className=\"title red\">\n              <h3 className=\"jobs_red\">Inspiring the next generation</h3>\n            </div>\n            <div className=\"subtitle\">\n              <p>This year, we’ve continued our commitment to helping young people from diverse backgrounds enter careers in property, in particular those who face barriers and risk becoming disengaged, running our education programmes. Our aim is to provide role models for students, alongside transferable skills, industry insights and career opportunities.</p>\n            </div>\n          </div>\n          <StyledSustainStat className=\"no-margin-b\">\n            <div className=\"social-stats_text coaching\">\n              <p>In London, we ran two Circl reverse coaching programmes, where over 30 Landsec employees coached – and were coached by – young people from diverse and under-represented backgrounds. Evidence shows this can increase a young person’s chance of reaching their potential through employment, education or training. Circl not only supports young people in becoming future leaders through regular coaching by industry professionals, it also helps our workforce develop their own managerial and leadership skills.</p>\n            </div>\n            <div className=\"social-stats_container\">\n              <div className=\"social_stats-row\">\n                <div className=\"social-stats_item\">\n                  <h2 className=\"sustain_stat-title red\">75%</h2>\n                  <p>of participants interested in a career at Landsec</p>\n                </div>\n                <div className=\"social-stats_item\">\n                  <h2 className=\"sustain_stat-title red\">1,248</h2>\n                  <p>hours of coaching training</p>\n                </div>\n                <Line />\n              </div>\n              <div className=\"social_stats-row\">\n                <div className=\"social-stats_item\">\n                  <h2 className=\"sustain_stat-title red\">88%</h2>\n                  <p>of Landsec employees involved say they now feel confident using coaching skills</p>\n                </div>\n                <div className=\"social-stats_item\">\n                  <h2 className=\"sustain_stat-title red\">87%</h2>\n                  <p>of young participants felt Circl helped them develop useful leadership skills</p>\n                </div>\n              </div>\n            </div>\n          </StyledSustainStat>\n          <NextPage\n            page={{\n              title: \"Environmental sustainability\",\n              path: \"sustainability\",\n            }}\n            colorKey=\"sustain\"\n          />\n        </StyledJobs>\n      </PageContainer>\n    </Layout>\n  )\n}\n\nexport default jobs\n","import styled from \"styled-components\"\nimport { pageMargins, remCalc } from \"./utils\"\nimport { typography, color } from \"../styles/variables\"\n\nconst StyledSustainStat = styled.div`\n  width: 100%;\n  display: grid;\n  grid-template-columns: repeat(12, 1fr);\n  gap: 1.25rem;\n  font-family: ${typography.type.primary};\n  ${pageMargins};\n  margin-bottom: ${remCalc(62)};\n  &.no-margin-b {\n    margin-bottom: 0;\n  }\n  & .social-stats_text {\n    grid-column: 1/5;\n    position: relative;\n    margin-top: 3rem;\n    & h2 {\n      @media only screen and (max-width: 1024px) and (min-width: 640px) {\n        font-size: 40px;\n      }\n      @media only screen and (max-width: 640px) {\n        font-size: 32px;\n      }\n      @media only screen and (min-width: 1024px) {\n        font-size: 3rem;\n      }\n      @media only screen and (min-width: 1440px) {\n        font-size: ${remCalc(60)};\n      }\n    }\n    & p {\n      font-size: 1.25rem;\n      line-height: ${remCalc(30)};\n    }\n    @media only screen and (max-width: 1024px) {\n      grid-column: 1/13;\n    }\n  }\n\n  & .social-stats_container {\n    grid-column: 5/13;\n    width: 100%;\n    position: relative;\n    display: flex;\n    flex-wrap: wrap;\n    align-items: flex-start;\n    justify-content: space-between;\n    & .social_stats-row {\n      width: 100%;\n      display: flex;\n      flex-wrap: wrap;\n      align-items: flex-start;\n      justify-content: space-between;\n      position: relative;\n    }\n    & .social-stats_item {\n      width: 50%;\n      position: relative;\n      display: flex;\n      align-items: flex-start;\n      justify-content: space-between;\n      flex-direction: column;\n      margin: 3rem 0;\n      @media only screen and (max-width: 640px) {\n        align-items: center;\n      }\n      & .sustain_stat-title {\n        font-size: ${remCalc(72)};\n        line-height: ${remCalc(86)};\n        letter-spacing: 0.1px;\n        text-align: left;\n\n        &.orange {\n          color: ${color.header.social_value.color_3};\n        }\n        &.blue {\n          color: ${color.header.social_value.color_2};\n        }\n        &.red {\n          color: ${color.header.jobs.color_3}\n        }\n        @media only screen and (min-width: 1024px) {\n          width: ${remCalc(262)};\n          margin: 0 auto;\n        }\n      }\n      & svg {\n        @media only screen and (min-width: 1024px) {\n          width: 100%;\n          margin: 0 auto;\n        }\n      }\n      & p {\n        font-size: 1.25rem;\n        line-height: ${remCalc(30)};\n        width: 80%;\n\n        &:not(.large-para) {\n          margin-top: 1.5rem;\n        }\n        @media only screen and (min-width: 1024px) {\n          width: ${remCalc(262)};\n          margin: 0 auto;\n        }\n      }\n      & .large-para {\n        font-size: 1.5rem;\n        line-height: ${remCalc(33)};\n      }\n      @media only screen and (max-width: 640px) {\n        width: 100%;\n      }\n    }\n    @media only screen and (max-width: 1024px) {\n      grid-column: 1/13;\n    }\n  }\n`\n\nexport default StyledSustainStat\n"],"sourceRoot":""}