Merge branch 'new-conf-design---landing' into new-conf-design--cta-section

Author: hasparus

src/app/conf/2025/components/become-a-sponsor/index.tsx

@@ -7,9 +7,9 @@ import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
 
 export function BecomeASponsor() {
   return (
-    <section id="sponsors" className="relative">
+    <section id="sponsors" className="relative overflow-hidden">
       <Stripes />
-      <div className="gql-conf-container gql-conf-section xl:py-16 2xl:px-64">
+      <div className="gql-conf-container gql-conf-section xl:py-16">
         <header className="flex flex-col gap-x-48 gap-y-4 md:flex-row md:items-end md:justify-between">
           <div>
             <h2 className="typography-h2">Become a Sponsor</h2>

src/app/conf/2025/components/sponsors.tsx

@@ -43,7 +43,7 @@ const sponsorTiers: Tier[] = [
 
 export function Sponsors({ heading }: SponsorsProps) {
   return (
-    <section className="gql-conf-section mx-auto py-16 2xl:px-64">
+    <section className="gql-conf-section mx-auto py-16">
       <h1 className="typography-h2">{heading}</h1>
 
       <div className="mt-10 md:mt-16">

src/app/conf/2025/components/top-minds/index.tsx

@@ -3,14 +3,47 @@ import { HTMLAttributes } from "react"
 import Image from "next-image-export-optimizer"
 import type { StaticImageData } from "next/image"
 
-import elizabethStone from "./speakers/elizabeth-stone.webp"
-import kamilKisiela from "./speakers/kamil-kisiela.webp"
-import rajeevRajan from "./speakers/rajeev-rajan.webp"
-import tanmaiGopal from "./speakers/tanmai-gopal.webp"
-import uriGoldshtein from "./speakers/uri-goldshtein.webp"
 import TwitterIcon from "@/icons/twitter.svg"
 import { Button } from "@/app/conf/_design-system/button"
 import { BECOME_A_SPEAKER_LINK } from "../../links"
+import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
+
+const previousConfSpeakers = {
+  benjie: {
+    name: "Benjie Gillam",
+    title: "GraphQL TSC & Spec",
+    src: "https://avatars.sched.co/b/99/18743846/avatar.jpg.320x320px.jpg",
+    twitter: "benjie",
+    linkedin: "benjiegillam",
+  },
+  kewei: {
+    name: "Kewei Qu",
+    title: "Meta, Senior Staff Engineer",
+    src: "https://avatars.sched.co/9/1a/18743864/avatar.jpg.320x320px.jpg",
+    twitter: "kewei_qu",
+    linkedin: "keweiqu",
+  },
+  donna: {
+    name: "Donna Zhou",
+    title: "Atlassian, GraphQL Java",
+    src: "https://avatars.sched.co/0/1d/18743879/avatar.jpg.320x320px.jpg?e1f",
+    linkedin: "donnazhou",
+  },
+  uri: {
+    name: "Uri Goldshtein",
+    title: "The Guild, Founder",
+    src: "https://avatars.sched.co/8/2b/14900013/avatar.jpg.320x320px.jpg?9f1",
+    twitter: "UriGoldshtein",
+    linkedin: "urigo",
+  },
+  alessia: {
+    name: "Alessia Bellisario",
+    title: "Apollo, Staff Engineer",
+    src: "https://avatars.sched.co/a/c6/18743837/avatar.jpg.320x320px.jpg?847",
+    twitter: "alessbell",
+    linkedin: "alessiabellisario",
+  },
+}
 
 interface TopMindsSectionProps extends HTMLAttributes<HTMLElement> {
   hasSpeakersPage?: boolean
@@ -30,47 +63,33 @@ export default function TopMindsSection({
       {...rest}
     >
       <div className="flex grid-cols-2 flex-wrap [@media(444px<width<743px)]:grid [@media(width<=444px)]:flex-col [@media(width<=743px)]:justify-center [@media(width>=970px)]:*:border-b-0">
-        {/* todo: remaining socials */}
         <h3 className="mr-auto flex w-full grow text-pretty pb-6 pr-6 typography-h2 [@media(width>857px)]:basis-0">
           Meet the top industry minds
         </h3>
         <SpeakerCard
-          name="Uri Goldshtein"
-          title="The Guild — Founder"
-          src={uriGoldshtein}
-          linkedin="urigo"
-          twitter="UriGoldshtein"
+          {...previousConfSpeakers.benjie}
+          stripes="linear-gradient(80deg, hsl(var(--color-pri-base)) 0%, hsl(var(--color-pri-base)) 5%, transparent 40%, transparent)"
         />
         <SpeakerCard
-          name="Elizabeth Stone"
-          title="Netflix — CTO"
-          src={elizabethStone}
-          linkedin="elizabeth-stone-608a754"
+          {...previousConfSpeakers.kewei}
           className="[@media(width<=742px)]:border-l"
+          stripes="radial-gradient(circle at bottom right, hsl(var(--color-pri-base)) 0%, hsl(var(--color-pri-base)) 10%, transparent 40%, transparent)"
         />
         <div className="flex grow border-sec-dark [@media(width<970px)]:contents [@media(width>=970px)]:border-t [@media(width>=970px)]:*:border-t-0">
           <SpeakerCard
-            name="Kamil Kisiela"
-            title="The Guild — Developer"
-            src={kamilKisiela}
-            linkedin="kamilkisiela"
-            twitter="kamilkisiela"
+            {...previousConfSpeakers.donna}
             className="[@media(744px<=width<=970px)]:first-of-type:border-l-0"
+            stripes="radial-gradient(ellipse at top left, hsl(var(--color-pri-base)) 0%, hsl(var(--color-pri-base)) 5%, transparent 40%, transparent, transparent 85%, black 100%)"
           />
           <SpeakerCard
-            name="Rajeev Rajan"
-            title="Atlassian — CTO"
-            src={rajeevRajan}
-            linkedin="rajeev-rajan"
+            {...previousConfSpeakers.uri}
             className="[@media(639px<=width<=970px)]:border-l"
+            stripes="linear-gradient(-40deg, hsl(var(--color-pri-base)) 0%, hsl(var(--color-pri-base)) 5%, transparent 40%, transparent)"
           />
           <SpeakerCard
-            name="Tanmai Gopal"
-            title="Hasura — CEO & Co-Founder"
-            src={tanmaiGopal}
-            twitter="tanmaigo"
-            linkedin="tanmaig"
+            {...previousConfSpeakers.alessia}
             className="[@media(width<744px)]:border-l"
+            stripes="radial-gradient(circle at top left, transparent 0%, transparent 65%, black 90%)"
           />
           <div className="mt-6 flex shrink-0 basis-[content] items-end justify-stretch max-lg:w-full [@media(640px<=width<=855px)]:basis-[236px] [@media(width<=444px)]:*:w-full [@media(width>742px)]:justify-end [@media(width>742px)]:pl-6 [@media(width>855px)]:grow">
             {hasSpeakersPage ? (
@@ -96,13 +115,15 @@ function SpeakerCard({
   twitter,
   linkedin,
   className,
+  stripes,
 }: {
   name: string
   title: string
   src: string | StaticImageData
   twitter?: string
   linkedin?: string
   className?: string
+  stripes?: string
 }) {
   return (
     <article
@@ -111,13 +132,17 @@ function SpeakerCard({
         className,
       )}
     >
-      <Image
-        src={src}
-        alt=""
-        width={312}
-        height={312}
-        className="aspect-square size-[312px] w-full object-cover transition-transform sm:h-[236px]"
-      />
+      <div className="relative overflow-hidden">
+        <div className="absolute inset-0 z-[1] bg-sec-light opacity-90 mix-blend-multiply" />
+        <Image
+          src={src}
+          alt=""
+          width={312}
+          height={312}
+          className="aspect-square size-[312px] w-full object-cover saturate-[0.1] transition-transform sm:h-[236px]"
+        />
+        <Stripes mask={stripes} />
+      </div>
       <div className="flex flex-1 items-stretch border-t border-sec-dark">
         <div className="flex grow flex-col justify-center gap-1 p-3 sm:h-[80px]">
           <h4 className="typography-body-md">{name}</h4>
@@ -165,3 +190,18 @@ function LinkedInIcon(props: HTMLAttributes<SVGElement>) {
     </svg>
   )
 }
+
+function Stripes({ mask }: { mask?: string }) {
+  return (
+    <div
+      role="presentation"
+      className="pointer-events-none absolute inset-0 inset-y-[-20px]"
+      style={{
+        maskImage: mask,
+        WebkitMaskImage: mask,
+      }}
+    >
+      <StripesDecoration evenClassName="bg-gradient-to-b from-sec-darker to-sec-dark" />
+    </div>
+  )
+}

src/app/conf/2025/components/top-minds/speakers/elizabeth-stone.webp

@@ -6,15 +6,24 @@ export default function ResourcesPage() {
   return (
     <Resources
       components={{
-        // @ts-expect-error - not sure how to type this
-        a: props => {
-          const isExternal = props.href.startsWith("http")
+        a: (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
+          const isExternal = props.href?.startsWith("http")
           if (isExternal) {
             return <a {...props} target="_blank" rel="noopener noreferrer" />
           }
 
           return <a {...props} />
         },
+        h3: (props: React.HTMLAttributes<HTMLHeadingElement>) => {
+          return (
+            <h3
+              className="border-t border-neu-100 pt-2 text-pri-base typography-menu dark:border-neu-50 dark:text-pri-light"
+              {...props}
+            >
+              {props.children}
+            </h3>
+          )
+        },
       }}
     />
   )

src/app/conf/2025/components/top-minds/speakers/kamil-kisiela.webp

@@ -1,25 +1,23 @@
-import Resources from "./client-mdx"
-
-import { clsx } from "clsx"
 import { Metadata } from "next"
 
+import { NavbarPlaceholder } from "../components/navbar"
+
+import Resources from "./client-mdx"
+import "./prose.css"
+
 export const metadata: Metadata = {
   title: "Resources | 2025",
 }
 
 export default function ResourcesPage() {
   return (
-    <main>
-      <div
-        className={clsx(
-          "container my-10 flex flex-col md:my-20",
-          "prose max-w-screen-xl",
-          "text-white prose-headings:text-white prose-a:text-white prose-strong:text-white",
-          "prose-a:w-fit prose-a:transition-colors hover:prose-a:text-primary",
-        )}
-      >
-        <Resources />
-      </div>
-    </main>
+    <>
+      <NavbarPlaceholder className="top-0 bg-neu-0 before:bg-white/30 dark:bg-neu-0 dark:before:bg-blk/40" />
+      <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">
+          <Resources />
+        </div>
+      </main>
+    </>
   )
 }