[docs] Add job ad

docs/pages/company/technical-product-manager.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import TopLayoutCompany from 'docs/src/modules/components/TopLayoutCompany';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+
+const pageFilename = 'company/technical-product-manager';
+const requireRaw = require.context(
+  '!raw-loader!../../src/pages/company/careers',
+  false,
+  /technical-product-manager\.md$/,
+);
+
+export default function Page({ demos, docs }) {
+  return <TopLayoutCompany demos={demos} docs={docs} />;
+}
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/src/modules/components/AppTableOfContents.js

@@ -4,8 +4,9 @@ import PropTypes from 'prop-types';
 import throttle from 'lodash/throttle';
 import clsx from 'clsx';
 import { useSelector } from 'react-redux';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
+import NoSsr from '@material-ui/core/NoSsr';
 import { BANNER_HEIGHT } from 'docs/src/modules/constants';
 import Link from 'docs/src/modules/components/Link';
 import PageContext from 'docs/src/modules/components/PageContext';
@@ -20,12 +21,14 @@ const useStyles = makeStyles((theme) => ({
     position: 'sticky',
     height: `calc(100vh - 70px - ${BANNER_HEIGHT}px)`,
     overflowY: 'auto',
-    padding: theme.spacing(2, 2, 2, 0),
     display: 'none',
     [theme.breakpoints.up('sm')]: {
       display: 'block',
     },
   },
+  links: {
+    padding: theme.spacing(2, 2, 2, 0),
+  },
   contents: {
     marginTop: theme.spacing(2),
     paddingLeft: theme.spacing(1),
@@ -55,7 +58,8 @@ const useStyles = makeStyles((theme) => ({
   active: {},
   hiring: {
     color: theme.palette.text.secondary,
-    marginTop: theme.spacing(3),
+    overflow: 'hidden',
+    margin: theme.spacing(5, 0, 2.5),
     display: 'block',
     '& img': {
       display: 'block',
@@ -111,12 +115,11 @@ function useThrottledOnScroll(callback, delay) {
   }, [throttledCallback]);
 }
 
-// const timezone = (new Date().getTimezoneOffset() / 60) * -1;
-
 export default function AppTableOfContents(props) {
   const { items } = props;
   const classes = useStyles();
   const t = useSelector((state) => state.options.t);
+  const theme = useTheme();
 
   const itemsWithNodeRef = React.useRef([]);
   React.useEffect(() => {
@@ -218,7 +221,7 @@ export default function AppTableOfContents(props) {
   return (
     <nav className={classes.root} aria-label={t('pageTOC')}>
       {items.length > 0 ? (
-        <React.Fragment>
+        <div className={classes.links}>
           <Typography gutterBottom className={classes.contents}>
             {t('tableOfContents')}
           </Typography>
@@ -236,19 +239,28 @@ export default function AppTableOfContents(props) {
               </li>
             ))}
           </Typography>
-          {/**
-          <NoSsr>
-            {timezone >= 5 && timezone <= 6 ? null : (
-              <Link href="/company/lead-designer/" underline="none" className={classes.hiring}>
-                <img src="/static/hiring-toc.png" alt="" loading="lazy" width={159} height={119} />
-                {'We are hiring a Lead designer'}
-                <span className={classes.hiringLearn}>Learn more &rarr;</span>
-              </Link>
-            )}
-          </NoSsr>
-          */}
-        </React.Fragment>
+        </div>
       ) : null}
+      <NoSsr>
+        <Link href="/company/careers/" underline="none" className={classes.hiring}>
+          <img
+            src={`/static/hiring-toc-${theme.palette.type}.png`}
+            alt=""
+            loading="lazy"
+            width={175}
+            height={119}
+          />
+          {"We're hiring a "}
+          {
+            ['React engineer', 'Full-stack engineer', 'Product manager', 'Dev. Advocate'][
+              Math.round(Math.random() * 3)
+            ]
+          }
+          {' and more roles.'}
+          {/* eslint-disable-next-line material-ui/no-hardcoded-labels */}
+          <span className={classes.hiringLearn}>Learn more &rarr;</span>
+        </Link>
+      </NoSsr>
     </nav>
   );
 }

docs/src/pages/company/careers/careers.md

@@ -41,14 +41,20 @@ You are a [manager of one](https://signalvnoise.com/posts/1430-hire-managers-of-
 
 #### [React Engineer](/company/react-engineer/)
 
-You will support the advanced components team, build new ambitious enterprise features, work on strategic problems, and help grow the adoption of the free open-source tier (freemium/open-core business model).
+You will support the advanced components team, build new ambitious complex features, work on strategic problems, and help grow the adoption of the free open-source tier (freemium/open-core business model).
 
 ### Product
 
-#### [Technical Product Manager](/company/product-manager/)
+#### [Technical Product Manager](/company/technical-product-manager/)
 
 You will define and maintain the product roadmap for the advanced components, identify opportunities, define specs, and work with engineers to execute on the features.
-Experience as an engineer is essential for this role. You might need to work part-time developing too in the beginning.
+Experience as an engineer is essential for this role, as you will also contribute to development work in the beginning.
+
+#### [Product Manager](/company/product-manager/)
+
+You will initiate the exploration of a bold new product vertical.
+We are looking for an experienced and ambitious product manager who is ready to work in an entrepreneurial environment.
+You are a [manager of one](https://signalvnoise.com/posts/1430-hire-managers-of-one), you are curious, enjoy taking risks, and learning.
 
 #### [Developer Advocate](/company/developer-advocate/)
 

docs/src/pages/company/careers/developer-advocate.md

@@ -46,7 +46,7 @@ We are looking for a dedicated educator and experienced developer to join us as
 - You are passionate about helping other developers solve problems and have an educational mindset.
 - You have some formal or informal experience in teaching: training, tutoring, mentoring, etc.
 
-### What would be nice if you had, but isn't required
+### What it would be nice if you had, but isn't required
 
 - Experience working with open-source and/or with the open-source community.
 - Experience working with/editing video.

docs/src/pages/company/careers/full-stack-engineer.md

@@ -22,7 +22,7 @@ We need talented people to keep that going!
 
 Our mission is to make building UIs more accessible.
 The faster and simpler it is, and the broader the audience that can create custom UIs, the better.
-We believe that the best way to improve on these dimensions is to eliminate [80%](https://www.youtube.com/watch?v=GnO7D5UaDig&t=2451s) of the code that has to be written.
+We believe that the best way to improve on these dimensions is to eliminate [80%](https://www.youtube.com/watch?v=GnO7D5UaDig&t=2451s) of the code that has to be written: low-code.
 
 ### Why this is interesting
 
@@ -31,7 +31,7 @@ Our solution empowers React developers to build awesome applications – hundred
 But providing React components isn't enough.
 In our [last developer survey](/blog/2020-developer-survey-results/), we learned that the majority of our audience are full-stack developers.
 They are looking for ways to move faster.
-They are working on a couple of new projects every year, and where the integration between the UI and the data is key.
+They are working on a couple of new projects every year, and where the integration between the UI and the database is key.
 
 ## About the role
 
@@ -57,7 +57,7 @@ You are curious, you enjoy taking risks, and learning.
 - You can put a lot of thoughts into design, product roadmap, and the details of each feature. You won't only take a project and make it "functional."
 - You communicate your thoughts and decisions clearly and proactively, and engage with the rest of the team with an optimistic and first principles mindset.
 
-### What would be nice if you had, but isn't required
+### What it would be nice if you had, but isn't required
 
 - **You've maintained an active repository before.**
   Maybe you've helped maintain a popular open-source repository, or perhaps you've worked on internal repositories that saw contributions from multiple teams.

docs/src/pages/company/careers/product-manager.md

@@ -1,4 +1,4 @@
-# Technical Product Manager
+# Product Manager
 
 <p class="description">We are looking for a product manager to guide our roadmap and build a great product.</p>
 
@@ -19,16 +19,18 @@ See the [careers](/company/careers/) and [about us](https://next.material-ui.com
 Both our open-source community and our premium products are growing fast (x2-3 YoY).
 We need talented people to keep that going!
 
-The advanced components team (X) needs help to build its best features.
-We have started with the [data grid](/components/data-grid/) a year ago, but it's the beginning.
-Our users are continuously providing feedback on the most important [pains they face](https://github.com/mui-org/material-ui-x/issues?q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc).
+Our mission is to make building UIs more accessible.
+The faster and simpler it is, and the broader the audience that can create custom UIs, the better.
+We believe that the best way to improve on these dimensions is to eliminate [80%](https://www.youtube.com/watch?v=GnO7D5UaDig&t=2451s) of the code that has to be written: low-code.
 
 ### Why this is interesting
 
-Our solution is empowering React developers to build awesome applications. It should be easy, it shouldn't require any advanced technical skills. Hundreds of thousands of developers use Material-UI every month.
-We are the second most used UI library in the world, after Bootstrap.
+Our solution empowers React developers to build awesome applications – hundreds of thousands of developers use Material-UI every month.
 
-Our enterprise components portfolio is still small, with a million interesting and challenging problems to solve.
+But providing React components isn't enough.
+In our [last developer survey](/blog/2020-developer-survey-results/), we learned that the majority of our audience are full-stack developers.
+They are looking for ways to move faster.
+They are working on a couple of new projects every year, and where the integration between the UI and the database is key.
 
 ## About the role
 
@@ -38,30 +40,28 @@ You will be joining the advanced components team.
 
 - You will coordinate with the engineering to ensure that the product being delivered at each iteration solves the problem.
   This involves growing a deep understanding of our technical choices and constraints.
-- If time allows you to, you will assit the engineering team, and implement some of the items in the backlog. You might need to contribute part-time code in the beginning.
-- You will drive the revenue and community growth by owning KPIs.
-- You will grow and cultivate a deep understanding of the problems that developers have when they deal with enterprise applications. This means that you will observe and reach out to the community, run research interviews and share your insights with the team.
-- You will keep a close eye on feature requests, issues, and general improvements (mostly through GitHub issues and a bit Zendesk), to curate opportunities based on our strategy.
+- You will drive the growth of the product by owning KPIs.
+- You will grow and cultivate a deep understanding of the problems that developers have when they create simple applications (e.g. admins, prototypes). This means that you will observe and reach out to the community, run research interviews and share your insights with the team.
+- You will keep a close eye on feature requests, issues, and general improvements, to curate opportunities based on our strategy.
 - You will build a strategy for your product area and contribute to the overall product strategy, e.g. establishing a go-to-market strategy.
 - You will assess the impact of initiatives through telemetry data and qualitative feedback to help us develop our understanding further, and decide on the next steps.
 
 ## About you
 
 ### Skills you should have
 
-- +3 years prior experience working as a Front-end engineer, with React ideally.
-- +1 years experience as Product Manager or closely related roles such as Product Owner, Program Manager, or Solutions Architect.
+- 3+ years experience as Product Manager or closely related roles such as Product Owner, Program Manager, or Solutions Architect.
 - Able to switch between the big picture and detailed view multiple times a day.
 
-### What would be nice if you had, but isn't required
+### What it would be nice if you had, but isn't required
 
 - Experience building developer tools.
-- Experience working with open-source, and having interacted with open-source communities.
+- Experience working with open-source and having interacted with open-source communities.
 
 ## Compensation
 
 Competitive compensation of up to \$140,000 USD/year, depending on the profile. It could go higher for a person that can significantly push the mission forward. You can find the other perks & benefits in the [careers](/company/careers/#perks-amp-benefits) page.
 
 ## Apply
 
-[Apply for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=Technical%20Product%20Manager)
+[Apply for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=Product%20Manager)

docs/src/pages/company/careers/react-engineer.md

@@ -1,6 +1,6 @@
 # React Engineer
 
-<p class="description">We are looking for a React Engineer to support the advanced components team, build new ambitious enterprise features, and grow the open-source adoption.</p>
+<p class="description">We are looking for a React Engineer to support the advanced components team, build ambitious new features, and grow the open-source adoption.</p>
 
 ## Details of the Role
 

docs/src/pages/company/careers/technical-product-manager.md

@@ -0,0 +1,67 @@
+# Technical Product Manager
+
+<p class="description">We are looking for a technical product manager to guide our roadmap and build a great product.</p>
+
+## Details of the Role
+
+- Location: Remote (preference for UTC-5 to UTC+4).
+- Type of work: Contractor (full-time, convertible to an employee position in the future).
+- Start date: Immediately.
+- We're a remote company, we prefer asynchronous communication over meetings.
+- We work independently, the rest of us won't know what you're doing day-to-day unless you tell us.
+
+## About us
+
+See the [careers](/company/careers/) and [about us](https://next.material-ui.com/branding/about/) pages.
+
+### Why we're hiring
+
+Both our open-source community and our premium products are growing fast (x2-3 YoY).
+We need talented people to keep that going!
+
+The advanced components team (X) needs help to build its best features.
+We have started with the [data grid](/components/data-grid/) a year ago, but it's the beginning.
+Our users are continuously providing feedback on the most important [pains they face](https://github.com/mui-org/material-ui-x/issues?q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc).
+
+### Why this is interesting
+
+Our solution is empowering React developers to build awesome applications. It should be easy, it shouldn't require any advanced technical skills. Hundreds of thousands of developers use Material-UI every month.
+We are the second most used UI library in the world, after Bootstrap.
+
+Our enterprise components portfolio is still small, with a million interesting and challenging problems to solve.
+
+## About the role
+
+You will be joining the advanced components team.
+
+### What you'll do on a day-to-day basis
+
+- You will coordinate with the engineering to ensure that the product being delivered at each iteration solves the problem.
+  This involves growing a deep understanding of our technical choices and constraints.
+- If time allows you to, you will assist the engineering team and implement some of the items in the backlog, up to part-time.
+- You will drive the revenue and community growth by owning KPIs.
+- You will grow and cultivate a deep understanding of the problems that developers have when they deal with enterprise applications. This means that you will observe and reach out to the community, run research interviews and share your insights with the team.
+- You will keep a close eye on feature requests, issues, and general improvements (mostly through GitHub issues and occasionally Zendesk), to curate opportunities based on our strategy.
+- You will build a strategy for your product area and contribute to the overall product strategy, e.g. establishing a go-to-market strategy.
+- You will assess the impact of initiatives through telemetry data and qualitative feedback to help us develop our understanding further, and decide on the next steps.
+
+## About you
+
+### Skills you should have
+
+- 3+ years prior experience working as a Front-end engineer, with React ideally.
+- 1+ years experience as Product Manager or closely related roles such as Product Owner, Program Manager, or Solutions Architect.
+- Able to switch between the big picture and detailed view multiple times a day.
+
+### What it would be nice if you had, but isn't required
+
+- Experience building developer tools.
+- Experience working with open-source and having interacted with open-source communities.
+
+## Compensation
+
+Competitive compensation of up to \$140,000 USD/year, depending on the profile. It could go higher for a person that can significantly push the mission forward. You can find the other perks & benefits in the [careers](/company/careers/#perks-amp-benefits) page.
+
+## Apply
+
+[Apply for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=Technical%20Product%20Manager)