add jobs (#105)

.gitignore

@@ -5,5 +5,7 @@ node_modules
 .vercel
 yarn-error.log
 .env.local
+.env
 robots.txt
-sitemap.xml
+sitemap.xml
+

@types/index.d.ts

@@ -0,0 +1,4 @@
+declare module "*.gql" {
+  const content: any;
+  export default content;
+}

components/primitives/code.tsx

@@ -0,0 +1,38 @@
+import Highlight, { defaultProps } from "prism-react-renderer";
+import theme from "prism-react-renderer/themes/vsDark";
+
+const Code = ({ language, value, children, className, ...rest }) => {
+  if (className && className.startsWith("language-")) {
+    language = className.replace("language-", "");
+  }
+
+  return (
+    <Highlight
+      {...defaultProps}
+      {...rest}
+      code={value ?? children}
+      language={language}
+      theme={theme}>
+      {({ tokens, getLineProps, getTokenProps }) => (
+        <pre className="codeblock-pre-container">
+          {tokens.map((line, i) => {
+            // Workaround for MDX rendering trailing lines on everything
+            const lastLine = i === tokens.length - 1;
+            return (
+              <div key={i} {...getLineProps({ line, key: i })}>
+                {line.map((token, key) => {
+                  if (lastLine && token.empty) {
+                    return null;
+                  }
+                  return <span key={key} {...getTokenProps({ token, key })} />;
+                })}
+              </div>
+            );
+          })}
+        </pre>
+      )}
+    </Highlight>
+  );
+};
+
+export default Code;

components/primitives/head.tsx

@@ -7,6 +7,7 @@ export type MetaType = {
   siteName?: string;
   image?: string;
   twitterUsername?: string;
+  canonical?: string;
 };
 
 const defaultMeta: MetaType = {
@@ -48,6 +49,7 @@ const Head = ({ meta = {} }: HeadProps) => {
       <meta name="twitter:title" content={meta.title} />
       <meta name="twitter:site" content={meta.twitterUsername} />
       <meta name="twitter:image" content={`${meta.image}`} />
+      {meta?.canonical && <link rel="canonical" href={meta.canonical} />}
     </NextHead>
   );
 };

components/primitives/markdown/index.tsx

@@ -193,9 +193,35 @@ export const getStyles: any = () => {
       marginBottom: "0",
     },
 
+    h1: {
+      fontSize: ["40px", "48px"],
+      mb: "32px",
+      "&:not(:first-of-type)": {
+        mt: "72px",
+      },
+    },
+
+    h2: {
+      fontSize: ["24px", "32px"],
+      mb: "24px",
+      "&:not(:first-of-type)": {
+        mt: "40px",
+      },
+    },
+
+    h3: {
+      fontSize: ["18px", "24px"],
+      mb: "18px",
+      "&:not(:first-of-type)": {
+        mt: "48px",
+      },
+    },
+
     "h1, h2, h3, h4, h5, h6": {
+      fontWeight: "bold",
+      fontFamily: "special",
+      textRendering: "optimizeLegibility",
       marginTop: "24px",
-      fontWeight: "600",
       lineHeight: "1.25",
     },
 
@@ -303,6 +329,7 @@ export const getStyles: any = () => {
 };
 
 const Markdown = ({ children }) => {
+  console.log(children);
   return (
     <Box
       sx={{

components/sections/about/who-is-building.tsx

@@ -3,6 +3,7 @@ import { jsx, Heading, Link as A } from "theme-ui";
 import SectionLayout from "components/layouts/section";
 import { FiArrowUpRight } from "react-icons/fi";
 import Slider from "components/primitives/slider";
+import Link from "next/link";
 
 const images = [
   {
@@ -84,15 +85,14 @@ const WhoIsBuildingSection = ({
       ))}
     </Slider>
     <Heading variant="heading.5">
-      {text}{" "}
-      <A
-        href="https://angel.co/company/livepeer/jobs"
-        target="_blank"
-        rel="noopener noreferrer"
-        variant="accent"
-        sx={{ variant: "layout.flexCenter", display: "inline-flex" }}>
-        {ctaText2} <FiArrowUpRight />
-      </A>
+      Interested in Joining Livepeer, Inc.?{" "}
+      <Link href="/jobs" passHref>
+        <A
+          variant="accent"
+          sx={{ variant: "layout.flexCenter", display: "inline-flex" }}>
+          View its open positions <FiArrowUpRight />
+        </A>
+      </Link>
     </Heading>
   </SectionLayout>
 );

components/sections/footer/index.tsx

@@ -13,6 +13,7 @@ type Prefooter =
   | {
       type: "subscribe";
     }
+  | { type: "jobs"; cta?: { label: string; href: string; asPath?: string } }
   | { type: "faqs"; cta?: { label: string; href: string; asPath?: string } };
 
 export type FooterProps = {
@@ -101,6 +102,21 @@ const Footer = ({
         },
       ],
     },
+    {
+      title: t("nav-about-livepeer"),
+      items: [
+        { label: t("nav-about"), href: "/about" },
+        { label: "Jobs", href: "/jobs" },
+        {
+          label: t("nav-privacy-policy"),
+          href: "/privacy-policy",
+        },
+        {
+          label: t("nav-contact"),
+          href: "mailto:[email protected]",
+        },
+      ],
+    },
   ];
   return (
     <Box as="footer" bg={isDark ? "text" : "background"}>
@@ -122,10 +138,13 @@ const Footer = ({
               "minmax(auto, 184px)",
               null,
               null,
-              "repeat(4, minmax(auto, 184px))",
+              "repeat(5, minmax(auto, 184px))",
             ]}
             gap={[5, null, null, 0]}
-            sx={{ justifyContent: ["center", null, null, "space-between"] }}>
+            sx={{
+              mb: 5,
+              justifyContent: ["center", null, null, "space-between"],
+            }}>
             {lists.map((list) => (
               <FooterList key={`footer-list-${list.title}`} {...list} />
             ))}

components/sections/footer/prefooter-jobs-banner.tsx

@@ -0,0 +1,70 @@
+import { Container, Heading, Text, Box, Link as A } from "theme-ui";
+import PrefooterSvg from "components/svgs/prefooter";
+import Link from "next/link";
+
+const PrefooterJobsBanner = ({
+  cta = { label: "View Open Positions", href: "/jobs" },
+}: {
+  cta?: { label: string; href: string; asPath?: string };
+}) => (
+  <Box sx={{ px: 3, pt: [4, "80px"], pb: "80px", mb: [0, "80px"] }}>
+    <Container
+      sx={{
+        bg: "text",
+        py: [4, 5],
+        px: [4, null, null, "96px"],
+        position: "relative",
+        overflow: "hidden",
+        borderRadius: "lg",
+        boxShadow: "magical",
+      }}>
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: ["center", null, null, "flex-start"],
+          mx: ["auto", null, null, 0],
+          zIndex: "general",
+          position: "relative",
+        }}>
+        <Heading
+          variant="heading.3"
+          sx={{
+            textAlign: ["center", null, null, "left"],
+            color: "background",
+            maxWidth: "xl",
+          }}>
+          Join us.
+          <br />
+          From anywhere.
+        </Heading>
+        <Text
+          variant="normal"
+          sx={{
+            mt: "18px",
+            mb: "40px",
+            textAlign: ["center", null, null, "left"],
+            color: "lightGray",
+            maxWidth: "30ch",
+          }}>
+          Help us build the world's open video infrastructure.
+        </Text>
+        <Link href={cta.href} as={cta.asPath} passHref>
+          <A variant="buttons.primary">{cta.label}</A>
+        </Link>
+      </Box>
+      <Box
+        sx={{
+          position: "absolute",
+          right: "-336px",
+          top: ["unset", null, null, "50%"],
+          bottom: ["-232px", "-190px", null, "unset"],
+          transform: ["none", null, null, "translateY(-50%)"],
+        }}>
+        <PrefooterSvg fill="primary" />
+      </Box>
+    </Container>
+  </Box>
+);
+
+export default PrefooterJobsBanner;

components/sections/team/index.tsx

@@ -0,0 +1,28 @@
+import { Container, Grid } from "@theme-ui/components";
+import TeamMember from "./member";
+
+const TeamSection = ({ teamMembers }) => {
+  return (
+    <Container>
+      <Grid
+        columns={[1, 2, 3, null, 4]}
+        gap={3}
+        sx={{ maxWidth: 1200, textAlign: "center", margin: "0 auto" }}>
+        {teamMembers.map((t, i) => (
+          <TeamMember
+            key={i}
+            fullname={t.fullname}
+            role={t.role}
+            image={t.image}
+            twitter={t.twitter}
+            linkedin={t.linkedin}
+            github={t.github}
+            medium={t.medium}
+          />
+        ))}
+      </Grid>
+    </Container>
+  );
+};
+
+export default TeamSection;