Add HeroConfCard

Author: hasparus

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

@@ -10,6 +10,7 @@ import "../resources/prose.css"
 import { Hero, HeroStripes } from "../components/hero"
 
 import markdown from "./code-of-conduct.mdx?raw"
+import { HeroConfCard } from "../components/hero/hero-conf-card"
 
 export const metadata: Metadata = {
   title: "Code of Conduct | GraphQLConf 2025",
@@ -30,6 +31,7 @@ export default function ResourcesPage() {
             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%)]"
           />
         }
+        secondColumn={<HeroConfCard />}
       >
         <Button
           href="https://events.linuxfoundation.org/about/code-of-conduct/"

src/app/conf/2025/components/hero/hero-conf-card.tsx

@@ -0,0 +1,46 @@
+import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
+
+import GraphQLFoundationWordmark from "../../assets/graphql-foundation-wordmark.svg?svgr"
+import logoMask from "../cta-card-section/logo-mask.webp"
+import { HeroDateAndLocation } from "."
+
+export function HeroConfCard() {
+  return (
+    <div className="relative w-[590px] overflow-hidden border border-white bg-white/[0.24] p-8 backdrop-blur-xl">
+      <div
+        role="presentation"
+        className="pointer-events-none absolute inset-0 -right-8 -top-16 [--end:rgba(255,204,239,0.2)] [--start:#FF99DF]"
+        style={{
+          maskImage: `url(${logoMask.src})`,
+          maskRepeat: "no-repeat",
+          maskPosition: "33px -22px",
+          maskSize: "743px",
+        }}
+      >
+        <StripesDecoration
+          stripeWidth="8px"
+          oddClassName="bg-[linear-gradient(180deg,var(--start)_0%,var(--end)_100%)]"
+        />
+      </div>
+
+      <div className="relative z-10 space-y-8">
+        <h2 className="text-[48px] font-normal leading-[1.2] text-neu-900">
+          GraphQLConf
+          <br />
+          2025
+        </h2>
+
+        <div className="flex h-min items-center gap-4">
+          <span className="typography-body-sm whitespace-pre">hosted by</span>
+          <GraphQLFoundationWordmark
+            width={128}
+            height={34.877}
+            className="[&_path]:fill-pri-base"
+          />
+        </div>
+
+        <HeroDateAndLocation className="[&_svg]:text-pri-base" />
+      </div>
+    </div>
+  )
+}

src/app/conf/2025/components/hero/index.tsx

@@ -19,6 +19,7 @@ export type HeroProps = {
   bottom?: React.ReactNode
   colorScheme?: "primary" | "neutral"
   stripes?: ReactNode
+  secondColumn?: ReactNode
 } & (
   | { year: string | number; subtitle?: never }
   | { year?: never; subtitle: string }
@@ -62,18 +63,20 @@ export function Hero(props: HeroProps) {
                 </span>
               </h1>
             )}
-            <div className="flex h-min items-center gap-4">
-              <span className="typography-body-sm whitespace-pre">
-                hosted by
-              </span>
-              <GraphQLFoundationWordmark
-                width={128}
-                height={34.877}
-                className={
-                  colorScheme === "neutral" ? "[&_path]:fill-primary" : ""
-                }
-              />
-            </div>
+            {props.secondColumn || (
+              <div className="flex h-min items-center gap-4">
+                <span className="typography-body-sm whitespace-pre">
+                  hosted by
+                </span>
+                <GraphQLFoundationWordmark
+                  width={128}
+                  height={34.877}
+                  className={
+                    colorScheme === "neutral" ? "[&_path]:fill-primary" : ""
+                  }
+                />
+              </div>
+            )}
           </div>
 
           <div className="flex flex-col gap-8">{props.children}</div>
@@ -84,14 +87,24 @@ export function Hero(props: HeroProps) {
   )
 }
 
-export function HeroDateAndLocation() {
+export function HeroDateAndLocation(
+  props: React.HTMLAttributes<HTMLDivElement>,
+) {
   return (
-    <div className="typography-body-md flex flex-col gap-4 md:flex-row md:gap-6">
+    <div
+      {...props}
+      className={clsx(
+        "typography-body-md flex flex-col gap-4 md:flex-row md:gap-6",
+        props.className,
+      )}
+    >
       <div className="flex items-center gap-2">
         <CalendarIcon className="size-5 sm:size-6" />
-        <time dateTime="2025-09-08">September 08</time>
-        <span>-</span>
-        <time dateTime="2025-09-10">10, 2025</time>
+        <span>
+          <time dateTime="2025-09-08">September 08</time>
+          <span>-</span>
+          <time dateTime="2025-09-10">10, 2025</time>
+        </span>
       </div>
       <div className="flex items-center gap-2">
         <PinIcon className="size-5 sm:size-6" />