Add a Hero to Resources page

Author: hasparus

src/app/conf/2025/code-of-conduct/page.tsx

@@ -39,7 +39,7 @@ export default function ResourcesPage() {
         </Button>
       </Hero>
       <main className="gql-all-anchors-focusable gql-conf-navbar-strip text-neu-900 before:bg-white/40 before:dark:bg-blk/30">
-        <div className="gql-conf-container gql-conf-section gql-prose">
+        <div className="gql-conf-container gql-conf-section gql-prose xl:mb-16 xl:mt-8">
           <ServerComponentMarkdown
             markdown={markdown}
             components={{

src/app/conf/2025/resources/page.tsx

@@ -1,6 +1,9 @@
 import { Metadata } from "next"
 
+import { Button } from "@/app/conf/_design-system/button"
+
 import { NavbarPlaceholder } from "../components/navbar"
+import { Hero, HeroStripes } from "../components/hero"
 
 import Resources from "./client-mdx"
 import "./prose.css"
@@ -12,9 +15,28 @@ export const metadata: Metadata = {
 export default function ResourcesPage() {
   return (
     <>
-      <NavbarPlaceholder className="top-0 bg-neu-0 before:bg-white/30 dark:bg-neu-0 dark:before:bg-blk/40" />
+      <NavbarPlaceholder className="top-0 bg-neu-100 before:bg-white/30 dark:bg-[#181A12] dark:before:bg-blk/40" />
+      <Hero
+        pageName="Resources"
+        year="2025"
+        colorScheme="neutral"
+        stripes={
+          <HeroStripes
+            className="-scale-x-100 dark:data-[loaded=true]:opacity-80"
+            evenClassName="bg-[linear-gradient(180deg,hsl(var(--color-sec-light))_0%,hsl(319deg_100%_90%_/_0.2)_100%)] dark:bg-[linear-gradient(180deg,hsl(var(--color-sec-dark))_0%,hsl(var(--color-neu-100))_100%)]"
+            oddClassName="bg-[linear-gradient(180deg,hsl(319deg_100%_90%_/_0.2)_0%,hsl(var(--color-sec-base))_100%)] dark:bg-[linear-gradient(180deg,hsl(var(--color-sec-dark))_0%,hsl(var(--color-neu-0))_100%)]"
+          />
+        }
+      >
+        <Button
+          href="mailto:[email protected]"
+          className="w-fit"
+        >
+          Talk to us
+        </Button>
+      </Hero>
       <main className="gql-all-anchors-focusable gql-conf-navbar-strip text-neu-900 before:bg-white/40 before:dark:bg-blk/30">
-        <div className="gql-conf-container gql-conf-section gql-prose">
+        <div className="gql-conf-container gql-conf-section gql-prose xl:mb-16 xl:mt-8">
           <Resources />
         </div>
       </main>

src/app/conf/2025/resources/prose.css

@@ -4,7 +4,7 @@
   --grid-col-content: 1;
 
   @apply xl:[--grid-col-content:3];
-  @apply typography-body-md grid grid-cols-1 gap-6 xl:my-12 xl:grid-cols-[auto_1fr_var(--prose-width)_1fr];
+  @apply typography-body-md grid grid-cols-1 gap-6 xl:grid-cols-[auto_1fr_var(--prose-width)_1fr];
 
   & > * {
     grid-column: var(--grid-col-content);

src/app/conf/2025/resources/resources.mdx

@@ -1,5 +1,3 @@
-# GraphQLConf 2025 Resource Hub 
-
 <aside className='gql-sticky-aside w-fit row-span-8 -mt-1 sm:max-xl:grid-cols-2 sm:max-xl:grid sm:max-xl:bg-neu-100 dark:sm:max-xl:bg-neu-50/50 sm:max-xl:p-4'>
   {toc.map(({value, id, depth}) => <a key={id} data-depth={depth} className='block raw hover:bg-neu-100 dark:hover:bg-neu-50 py-2 p-4 max-xl:-ml-4 hover:text-neu-900 text-neu-800 typography-menu xl:data-[depth=2]:text-lg data-[depth=2]:font-semibold' style={{
     paddingLeft: (depth - 2) * 16 + 16,