first commit

examples/cms-payload/components/Hero/HighImpact/index.module.scss

@@ -0,0 +1,49 @@
+@import "../../../css/queries";
+
+.hero {
+  padding-top: calc(var(--base) * 3);
+
+  @include mid-break {
+    padding-top: var(--base);
+  }
+}
+
+.media {
+  margin-top: calc(var(--base) * 3);
+  width: calc(100% + var(--gutter-h));
+  position: relative;
+
+  @include mid-break {
+    margin-top: var(--base);
+    margin-left: calc(var(--gutter-h) * -1);
+    width: calc(100% + var(--gutter-h) * 2);
+  }
+}
+
+.links {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  position: absolute;
+  background: white;
+  padding: 0 48px 24px 0;
+
+  li {
+    margin-right: 12px;
+  }
+
+  @include mid-break {
+    position: static;
+    padding: 0 var(--gutter-h);
+    display: block;
+
+    li {
+      margin-right: 0;
+
+      > * {
+        width: 100%;
+      }
+    }
+  }
+}

examples/cms-payload/components/Hero/HighImpact/index.tsx

@@ -0,0 +1,39 @@
+import { Cell, Grid } from "@faceless-ui/css-grid";
+import React from "react";
+import { Page } from "../../../payload-types";
+import { Gutter } from "../../Gutter";
+import { CMSLink } from "../../Link";
+import { Media } from "../../Media";
+import RichText from "../../RichText";
+
+import classes from "./index.module.scss";
+
+export const HighImpactHero: React.FC<Page["hero"]> = ({
+  richText,
+  media,
+  links,
+}) => {
+  return (
+    <Gutter className={classes.hero}>
+      <Grid>
+        <Cell cols={10} colsM={4}>
+          <RichText content={richText} />
+        </Cell>
+      </Grid>
+      <div className={classes.media}>
+        {Array.isArray(links) && links.length > 0 && (
+          <ul className={classes.links}>
+            {links.map(({ link }, i) => {
+              return (
+                <li key={i}>
+                  <CMSLink {...link} />
+                </li>
+              );
+            })}
+          </ul>
+        )}
+        {typeof media === "object" && <Media resource={media} />}
+      </div>
+    </Gutter>
+  );
+};

examples/cms-payload/components/Hero/LowImpact/index.module.scss

@@ -0,0 +1,7 @@
+@use "../../../css/type.scss" as *;
+
+.richText {
+  h1 {
+    @extend %h2;
+  }
+}

examples/cms-payload/components/Hero/LowImpact/index.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Cell, Grid } from "@faceless-ui/css-grid";
+import { Page } from "../../../payload-types";
+import { Gutter } from "../../Gutter";
+import RichText from "../../RichText";
+import { VerticalPadding } from "../../VerticalPadding";
+
+import classes from "./index.module.scss";
+
+export const LowImpactHero: React.FC<Page["hero"]> = ({ richText }) => {
+  return (
+    <Gutter>
+      <Grid>
+        <Cell cols={8} colsL={10}>
+          <VerticalPadding>
+            <RichText className={classes.richText} content={richText} />
+          </VerticalPadding>
+        </Cell>
+      </Grid>
+    </Gutter>
+  );
+};

examples/cms-payload/components/Hero/MediumImpact/index.module.scss

@@ -0,0 +1,66 @@
+@use "../../../css/common.scss" as *;
+
+.hero {
+  padding-top: calc(var(--base) * 3);
+
+  @include mid-break {
+    padding-top: var(--base);
+  }
+}
+
+.richText {
+  position: relative;
+
+  h1 {
+    @extend %h2;
+  }
+
+  &::after {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 100vw;
+    left: calc(var(--gutter-h) * -1);
+    height: 200px;
+    background: linear-gradient(to bottom, var(--color-base-100), transparent);
+    top: calc(100% + (var(--base) * 2));
+    right: 0;
+
+    @include mid-break {
+      display: none;
+    }
+  }
+}
+
+.links {
+  position: relative;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  margin-top: calc(var(--base) * 4);
+
+  li {
+    margin-right: 12px;
+  }
+
+  @include mid-break {
+    display: block;
+    margin-top: var(--base);
+
+    li {
+      margin-right: 0;
+    }
+  }
+}
+
+.link {
+  @include mid-break {
+    width: 100%;
+  }
+}
+
+.media {
+  position: relative;
+  width: calc(100% + var(--gutter-h));
+}

examples/cms-payload/components/Hero/MediumImpact/index.tsx

@@ -0,0 +1,39 @@
+import { Cell, Grid } from "@faceless-ui/css-grid";
+import React from "react";
+import { Page } from "../../../payload-types";
+import { Gutter } from "../../Gutter";
+import { CMSLink } from "../../Link";
+import { Media } from "../../Media";
+import RichText from "../../RichText";
+
+import classes from "./index.module.scss";
+
+export const MediumImpactHero: React.FC<Page["hero"]> = (props) => {
+  const { richText, media, links } = props;
+
+  return (
+    <Gutter className={classes.hero}>
+      <Grid>
+        <Cell cols={5} colsM={4}>
+          <RichText className={classes.richText} content={richText} />
+          {Array.isArray(links) && (
+            <ul className={classes.links}>
+              {links.map(({ link }, i) => {
+                return (
+                  <li key={i}>
+                    <CMSLink className={classes.link} {...link} />
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+        </Cell>
+        <Cell cols={7} colsM={4}>
+          {typeof media === "object" && (
+            <Media className={classes.media} resource={media} />
+          )}
+        </Cell>
+      </Grid>
+    </Gutter>
+  );
+};

examples/cms-payload/components/Hero/index.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import React from "react";
+import { Page } from "../../payload-types";
+import { HighImpactHero } from "./HighImpact";
+import { MediumImpactHero } from "./MediumImpact";
+import { LowImpactHero } from "./LowImpact";
+
+const heroes = {
+  highImpact: HighImpactHero,
+  mediumImpact: MediumImpactHero,
+  lowImpact: LowImpactHero,
+};
+
+export const Hero: React.FC<Page["hero"]> = (props) => {
+  const { type } = props;
+  const HeroToRender = heroes[type];
+
+  if (!HeroToRender) return null;
+  return <HeroToRender {...props} />;
+};