new conf design — current sponsors

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

@@ -0,0 +1,125 @@
+import clsx from "clsx"
+
+import { Button } from "../../../_design-system/button"
+
+import blurBlob from "./blur-blob.webp"
+import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
+
+export function BecomeASponsor() {
+  return (
+    <section id="sponsors" className="relative">
+      <Stripes />
+      <div className="gql-conf-container gql-conf-section xl:py-16 2xl:px-64">
+        <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>
+            <p className="mt-6 text-pretty typography-body-lg">
+              Connect with the global GraphQL community and showcase your brand
+              to industry leaders and decision-makers.
+            </p>
+          </div>
+          <Button
+            variant="primary"
+            href="https://events.linuxfoundation.org/sponsor-GraphQLConf-25?utm_source=graphql_conf_2025&utm_medium=website&utm_campaign=sponsor_section"
+            target="_blank"
+            rel="noreferrer"
+            className="shrink-0"
+          >
+            Download the Prospectus
+          </Button>
+        </header>
+        <dl className="relative z-10 mt-10 border border-neu-300 md:backdrop-blur-[6.4px] xl:mt-16">
+          <DefinitionListItem
+            term="Brand Visibility"
+            definition="Showcase your brand to thousands of GraphQL enthusiasts and decision-makers."
+          />
+          <DefinitionListItem
+            term="Lead Generation"
+            definition="Connect with potential customers and partners in the GraphQL ecosystem."
+          />
+          <DefinitionListItem
+            term="Thought Leadership"
+            definition="Position your company as a leader in the GraphQL space."
+          />
+          <DefinitionListItem
+            term="Talent Acquisition"
+            definition="Meet and recruit top GraphQL developers and engineers."
+          />
+          <DefinitionListItem
+            term="Product Feedback"
+            definition="Gather valuable feedback from the GraphQL community."
+          />
+          <DefinitionListItem
+            term="Community Impact"
+            definition="Support and shape the future of GraphQL technology."
+          />
+        </dl>
+      </div>
+    </section>
+  )
+}
+
+function DefinitionListItem({
+  className,
+  term,
+  definition,
+}: {
+  className?: string
+  term: string
+  definition: string
+}) {
+  return (
+    <div
+      className={clsx(
+        className,
+        "flex border-b border-neu-300 last:border-b-0 max-sm:flex-col",
+      )}
+    >
+      <dt className="flex min-w-[320px] shrink-0 items-center whitespace-pre border-b border-neu-300 p-4 typography-body-lg max-sm:w-full sm:border-b-0 sm:border-r">
+        {term}
+      </dt>
+      <dd className="flex items-center p-4 typography-body-md">{definition}</dd>
+    </div>
+  )
+}
+
+function Stripes() {
+  return (
+    <div
+      role="presentation"
+      // prettier-ignore
+      // false positive
+      // eslint-disable-next-line tailwindcss/no-contradicting-classname
+      className="pointer-events-none absolute inset-0
+        [--start-1:hsl(var(--color-sec-lighter))]
+        [--end-1:hsl(hsl(320deg_100%_96%/.8)]
+        dark:[--start-1:hsl(var(--color-sec-lighter))]
+        dark:[--end-1:hsl(var(--color-pri-lighter)/.2)]
+
+        [--start-2:#FFEAF8]
+        [--end-2:hsl(var(--color-neu-0))]
+        dark:[--start-2:rgba(255,204,239,.1)]
+        dark:[--end-2:hsl(var(--color-pri-lighter)/.4)]
+
+        translate-y-12
+
+        [mask-size:120%]
+        3xl:[mask-size:2000px] 2xl:opacity-50
+        max-md:[mask-size:600%] max-md:opacity-50
+      "
+      style={{
+        maskImage: `url(${blurBlob.src})`,
+        WebkitMaskImage: `url(${blurBlob.src})`,
+        maskPosition: "center",
+        WebkitMaskPosition: "center",
+        maskRepeat: "no-repeat",
+        WebkitMaskRepeat: "no-repeat",
+      }}
+    >
+      <StripesDecoration
+        evenClassName="bg-[linear-gradient(180deg,var(--start-1)_-200%,var(--end-1)_100%)]"
+        oddClassName="bg-[linear-gradient(180deg,var(--start-2)_0%,var(--end-2)_100%)]"
+      />
+    </div>
+  )
+}

src/app/conf/2025/components/marquee-rows/index.tsx

@@ -33,7 +33,7 @@ export function MarqueeRows({
   return (
     <section
       className={clsx(
-        "relative font-mono text-xl/none md:text-[56px]/none",
+        "relative font-mono text-xl/none md:text-[56px]/none 3xl:[mask-image:linear-gradient(to_right,transparent,black_5%,black_95%,transparent)]",
         variant === "primary" ? "text-pri-base" : "text-neu-900",
         className,
       )}

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

@@ -1,10 +1,4 @@
-import Stellate from "public/img/conf/Sponsors/Stellate.svg?svgr"
-import Hasura from "public/img/conf/Sponsors/Hasura.svg?svgr"
-import TheGuild from "public/img/conf/Sponsors/TheGuild.svg?svgr"
-import Apollo from "public/img/conf/Sponsors/Apollo.svg?svgr"
-import Tyk from "public/img/conf/Sponsors/Tyk.svg?svgr"
-import IBM from "public/img/conf/Sponsors/IBM.svg?svgr"
-import Graphweaver from "public/img/conf/Sponsors/Graphweaver.svg?svgr"
+import Grafbase from "public/img/conf/Sponsors/Grafbase.svg?svgr"
 
 import { clsx } from "clsx"
 import { ChevronRight } from "../pixelarticons/chevron-right"
@@ -15,20 +9,12 @@ interface Sponsor {
   link: string
 }
 
-const sponsorDiamond: Sponsor[] = [
-  { icon: TheGuild, name: "The Guild", link: "https://the-guild.dev" },
-  { icon: IBM, name: "IBM", link: "https://www.ibm.com/products/api-connect" },
-]
+const sponsorDiamond: Sponsor[] = []
 
-const sponsorGold: Sponsor[] = [
-  { icon: Apollo, name: "Apollo", link: "https://www.apollographql.com/" },
-  { icon: Graphweaver, name: "Graphweaver", link: "https://graphweaver.com" },
-  { icon: Hasura, name: "Hasura", link: "https://hasura.io" },
-]
+const sponsorGold: Sponsor[] = []
 
 const sponsorSilver: Sponsor[] = [
-  { icon: Stellate, name: "Stellate", link: "https://stellate.co" },
-  { icon: Tyk, name: "Tyk", link: "https://tyk.io/" },
+  { icon: Grafbase, name: "Grafbase", link: "https://grafbase.com/" },
 ]
 
 export interface SponsorsProps {
@@ -57,13 +43,13 @@ const sponsorTiers: Tier[] = [
 
 export function Sponsors({ heading }: SponsorsProps) {
   return (
-    <section className="gql-conf-section mx-auto w-fit max-w-full py-16">
+    <section className="gql-conf-section mx-auto py-16 2xl:px-64">
       <h1 className="typography-h2">{heading}</h1>
 
       <div className="mt-10 md:mt-16">
-        {sponsorTiers.map(tier => (
-          <Tier key={tier.name} tier={tier} />
-        ))}
+        {sponsorTiers.map(
+          tier => tier.items.length > 0 && <Tier key={tier.name} tier={tier} />,
+        )}
       </div>
     </section>
   )
@@ -78,7 +64,7 @@ function Tier({ tier }: { tier: Tier }) {
       </h3>
       <div
         className={clsx(
-          "grid justify-center gap-x-8 gap-y-4 md:grid-cols-2 xl:grid-cols-3",
+          "grid justify-center gap-x-8 gap-y-4 sm:grid-cols-2 xl:grid-cols-3",
         )}
       >
         {tier.items.map(({ link, icon: Icon, name }, i) => (

src/app/conf/2025/page.tsx

@@ -1,5 +1,5 @@
 import { Metadata } from "next"
-import { Sponsor } from "./sponsorship"
+import { BecomeASponsor } from "./components/become-a-sponsor"
 import { Venue } from "./venue"
 import { FAQ } from "./faq"
 import { CallForProposals } from "./components/call-for-proposals"
@@ -40,38 +40,47 @@ export default function Page() {
       <div className="gql-conf-navbar-strip before:bg-white/40 before:dark:bg-pri-dark/[0.45]">
         <GetYourTicket />
       </div>
-      <div className="gql-conf-container gql-conf-navbar-strip text-neu-900 before:bg-white/50 before:dark:bg-blk/30">
-        <RegisterSection />
-        <Sponsors heading="Thanks to our 2024 sponsors!" />
-        <Sponsor />
-        <CallForProposals />
-        <MarqueeRows
-          variant="secondary"
-          items={[
-            ["AMSTERDAM", "SEPTEMBER 2025", "THREE DAYS", "PAKHUIS DE ZWIJGER"],
-            [
-              "THREE DAYS",
-              "PAKHUIS DE ZWIJGER",
-              "NETHERLANDS",
-              "PIET HEINKADE 179",
-            ],
-            [
-              "NETHERLANDS",
-              "10 YEARS OF GRAPHQL",
-              "8-10 SEPTEMBER",
-              "AMSTERDAM",
-            ],
-          ]}
-          className="my-8 xl:mb-16 xl:mt-10 2xl:mb-24"
-        />
-        <Venue />
-        <GraphQLFoundationCard />
-        <FAQ />
-        <MarqueeRows
-          variant="secondary"
-          items={HERO_MARQUEE_ITEMS}
-          className="my-8 xl:my-16"
-        />
+      <div className="gql-conf-navbar-strip text-neu-900 before:bg-white/50 before:dark:bg-blk/30">
+        <div className="gql-conf-container">
+          <RegisterSection />
+          <Sponsors heading="Sponsors" />
+        </div>
+        <BecomeASponsor />
+        <div className="gql-conf-container">
+          <CallForProposals />
+          <MarqueeRows
+            variant="secondary"
+            items={[
+              [
+                "AMSTERDAM",
+                "SEPTEMBER 2025",
+                "THREE DAYS",
+                "PAKHUIS DE ZWIJGER",
+              ],
+              [
+                "THREE DAYS",
+                "PAKHUIS DE ZWIJGER",
+                "NETHERLANDS",
+                "PIET HEINKADE 179",
+              ],
+              [
+                "NETHERLANDS",
+                "10 YEARS OF GRAPHQL",
+                "8-10 SEPTEMBER",
+                "AMSTERDAM",
+              ],
+            ]}
+            className="my-8 xl:mb-16 xl:mt-10 2xl:mb-24"
+          />
+          <Venue />
+          <GraphQLFoundationCard />
+          <FAQ />
+          <MarqueeRows
+            variant="secondary"
+            items={HERO_MARQUEE_ITEMS}
+            className="my-8 xl:my-16"
+          />
+        </div>
       </div>
     </main>
   )