new conf design — sponsors

next.config.js

@@ -31,12 +31,38 @@ export default withLess(
         rule.test?.test?.(".svg"),
       )
 
-      fileLoaderRule.exclude = ALLOWED_SVG_REGEX
+      fileLoaderRule.exclude = /\.svg$/i
+
+      config.module.rules.push(
+        // All .svg from /icons/ and with ?svgr are going to be processed by @svgr/webpack
+        {
+          test: ALLOWED_SVG_REGEX,
+          use: ["@svgr/webpack"],
+        },
+        {
+          test: /\.svg$/i,
+          exclude: ALLOWED_SVG_REGEX,
+          resourceQuery: /svgr/,
+          use: [
+            {
+              loader: "@svgr/webpack",
+              options: {
+                dimensions: false, // **adds** viewBox.
+              },
+            },
+          ],
+        },
+        // Otherwise, we use the default file loader
+        {
+          ...fileLoaderRule,
+          test: /\.svg$/i,
+          exclude: ALLOWED_SVG_REGEX,
+          resourceQuery: {
+            not: [...fileLoaderRule.resourceQuery.not, /svgr/],
+          },
+        },
+      )
 
-      config.module.rules.push({
-        test: ALLOWED_SVG_REGEX,
-        use: ["@svgr/webpack"],
-      })
       return config
     },
     output: "export",

src/app/conf/2025/components/register-today/index.tsx

@@ -18,7 +18,7 @@ export function RegisterToday({ className }: RegisterTodayProps) {
         className,
       )}
     >
-      {/* todo: test if the placeholder works in deploy preview */}
+      {/* todo: placeholders work in preview, but they could use some improvement */}
       <NextImage
         src={speakerImage}
         alt="GraphQL Conference"

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

@@ -0,0 +1,99 @@
+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 { clsx } from "clsx"
+import { ChevronRight } from "../pixelarticons/chevron-right"
+
+interface Sponsor {
+  icon: React.FC<React.SVGProps<SVGElement>>
+  name: string
+  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 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 sponsorSilver: Sponsor[] = [
+  { icon: Stellate, name: "Stellate", link: "https://stellate.co" },
+  { icon: Tyk, name: "Tyk", link: "https://tyk.io/" },
+]
+
+export interface SponsorsProps {
+  heading?: string
+}
+
+interface Tier {
+  name: string
+  items: Sponsor[]
+}
+
+const sponsorTiers: Tier[] = [
+  {
+    name: "Diamond",
+    items: sponsorDiamond,
+  },
+  {
+    name: "Gold",
+    items: sponsorGold,
+  },
+  {
+    name: "Silver",
+    items: sponsorSilver,
+  },
+]
+
+export function Sponsors({ heading }: SponsorsProps) {
+  return (
+    <section className="gql-conf-section mx-auto w-fit max-w-full py-16">
+      <h1 className="typography-h2">{heading}</h1>
+
+      <div className="mt-10 md:mt-16">
+        {sponsorTiers.map(tier => (
+          <Tier key={tier.name} tier={tier} />
+        ))}
+      </div>
+    </section>
+  )
+}
+
+function Tier({ tier }: { tier: Tier }) {
+  return (
+    <div className="flex gap-x-12 gap-y-4 border-t border-neu-200 py-4 dark:border-neu-50 max-md:flex-col">
+      <h3 className="flex w-[80px] items-center gap-1 self-start whitespace-nowrap font-mono text-sm/none font-normal uppercase text-primary">
+        <ChevronRight className="shrink-0 translate-y-[-0.5px]" />
+        {tier.name}
+      </h3>
+      <div
+        className={clsx(
+          "grid justify-center gap-x-8 gap-y-4 md:grid-cols-2 xl:grid-cols-3",
+        )}
+      >
+        {tier.items.map(({ link, icon: Icon, name }, i) => (
+          <a
+            key={i}
+            href={link}
+            target="_blank"
+            rel="noreferrer"
+            title={name}
+            className="group flex h-24 w-72 items-center justify-center opacity-75 [--fill:hsl(var(--color-neu-700))] hover:bg-neu-500/10 hover:[--fill:hsl(var(--color-neu-800))] dark:opacity-90"
+          >
+            <Icon className="h-16 w-auto max-w-[80%] shrink-0 fill-[--fill] [&_path]:fill-[--fill]" />
+          </a>
+        ))}
+      </div>
+    </div>
+  )
+}

src/app/conf/2025/page.tsx

@@ -5,14 +5,14 @@ import { Sponsor } from "./sponsorship"
 import { Venue } from "./venue"
 import { FAQ } from "./faq"
 import { Register } from "./register"
-import { Sponsors } from "./sponsors"
 import { Speakers } from "./speakers"
 import { RegisterToday } from "./components/register-today"
 import { Hero } from "./components/hero"
 import WhatToExpectSection from "./components/what-to-expect"
 import TopMindsSection from "./components/top-minds"
 import { GetYourTicket } from "./components/get-your-ticket"
 import { RegisterSection } from "./components/register-section"
+import { Sponsors } from "./components/sponsors"
 
 export const metadata: Metadata = {
   title: "GraphQLConf 2025 — Sept 08-10",
@@ -30,11 +30,11 @@ export default function Page() {
       <GetYourTicket />
       <div className="gql-conf-container text-neu-900">
         <RegisterSection />
+        <Sponsors heading="Thanks to our 2024 sponsors!" />
       </div>
       <div className="container my-20 flex flex-col gap-20 md:my-32 md:gap-32 [.light_&_.text-white]:text-neu-900 [.light_&_[alt='Grafbase_logo']]:invert">
-        <Sponsors />
         <Sponsor />
-        <Speakers />
+        {/* <Speakers /> */}
         <Register />
         <Venue />
         <FAQ />

src/app/conf/2025/pixelarticons/chevron-right.tsx

@@ -0,0 +1,17 @@
+export function ChevronRight(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M6.66666 13.3332H5.33333V2.6665H6.66666V3.99984H7.99999V5.99984H9.33333V7.33317H10.6667V8.6665H9.33333V9.99984H7.99999V11.9998H6.66666V13.3332Z"
+      />
+    </svg>
+  )
+}

src/app/env.d.ts

@@ -6,3 +6,8 @@ declare module "*.mdx" {
   export default ReactComponent
   export const getStaticPaths: GetStaticPaths
 }
+
+declare module "*.svg?svgr" {
+  const content: React.FC<React.SVGProps<SVGElement>>
+  export default content
+}