new landing — trusted by

src/app/(development)/workroom/page.tsx

@@ -33,7 +33,7 @@ export default function WorkroomPage() {
   }
 
   return (
-    <main className="gql-conf-section gql-conf-container [&>p]:pt-8 [&>p]:font-mono [&>p]:text-sm [&>p]:text-neu-600">
+    <main className="gql-section gql-container [&>p]:pt-8 [&>p]:font-mono [&>p]:text-sm [&>p]:text-neu-600">
       <p>SpeakerOpengraphImage</p>
       <SpeakerOpengraphImage
         speaker={enisdenjo}

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

@@ -65,7 +65,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 xl:mb-16 xl:mt-8">
+        <div className="gql-container gql-section xl:mb-16 xl:mt-8">
           <ServerComponentMarkdown
             markdown={markdown}
             extractToc

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

@@ -9,7 +9,7 @@ export function BecomeASponsor() {
   return (
     <section id="sponsors" className="relative overflow-hidden">
       <Stripes />
-      <div className="gql-conf-container gql-conf-section xl:py-16">
+      <div className="gql-container gql-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/call-for-proposals.tsx

@@ -329,7 +329,7 @@ export function CallForProposals() {
     <section
       id="speakers"
       // todo: the part with `dark:` here is temporary until we have a dark mode version of this section
-      className="gql-conf-section gql-conf-container dark:text-neu-0"
+      className="gql-section gql-container dark:text-neu-0"
     >
       <div className="flex *:basis-1/2 max-lg:flex-col">
         <div className="border-sec-dark bg-sec-light p-4 lg:border-r lg:p-8 xl:p-16">

src/app/conf/2025/components/cta-card-section/index.tsx

@@ -17,7 +17,7 @@ export function CtaCardSection({
   ...rest
 }: CtaCardSectionProps) {
   return (
-    <div className="gql-conf-section">
+    <div className="gql-section">
       <section
         className="relative overflow-hidden bg-gradient-to-r from-pri-dark to-pri-base p-6 dark:from-pri-darker dark:to-pri-dark sm:p-16"
         {...rest}

src/app/conf/2025/components/get-your-ticket/index.tsx

@@ -15,7 +15,7 @@ export function GetYourTicket({ className }: { className?: string }) {
       )}
     >
       <Stripes />
-      <div className="gql-conf-container gql-conf-section relative">
+      <div className="gql-container gql-section relative">
         <header className="flex flex-wrap justify-between gap-6 md:items-end">
           <h2 className="typography-h2 whitespace-pre text-white">
             Get your ticket

src/app/conf/2025/components/graphql-foundation-card.tsx

@@ -4,7 +4,7 @@ import FoundationWordmark from "../assets/graphql-foundation-wordmark.svg?svgr"
 
 export function GraphQLFoundationCard({ className }: { className?: string }) {
   return (
-    <section className={clsx("gql-conf-section", className)}>
+    <section className={clsx("gql-section", className)}>
       <div className="flex divide-neu-300 border border-neu-300 bg-neu-100 dark:divide-neu-100 dark:border-neu-100 dark:bg-neu-50 max-md:flex-col max-md:divide-y md:divide-x">
         <div className="flex items-center justify-center px-8 py-10 lg:px-16 lg:py-24">
           <FoundationWordmark className="h-[68px] text-rhodamine dark:text-current lg:h-[100px] [&_g]:fill-current" />

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

@@ -38,7 +38,7 @@ export function Hero(props: HeroProps) {
     >
       <article className="relative">
         {props.stripes || <HeroStripes />}
-        <div className="gql-conf-container mx-auto flex max-w-full flex-col gap-12 overflow-hidden p-4 pt-6 sm:p-8 sm:pt-12 md:gap-12 md:bg-left md:p-12 lg:px-24 lg:pb-16 lg:pt-24">
+        <div className="gql-container mx-auto flex max-w-full flex-col gap-12 overflow-hidden p-4 pt-6 sm:p-8 sm:pt-12 md:gap-12 md:bg-left md:p-12 lg:px-24 lg:pb-16 lg:pt-24">
           <div className="flex gap-10 max-md:flex-col md:justify-between">
             {props.pageName ? (
               <div>

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

@@ -9,7 +9,7 @@ export function RegisterSection({ className, ...props }: RegisterSectionProps) {
   return (
     <section
       className={clsx(
-        "gql-conf-section flex gap-x-12 gap-y-10 py-8 max-md:flex-col sm:py-12 md:py-24 xl:gap-x-24",
+        "gql-section flex gap-x-12 gap-y-10 py-8 max-md:flex-col sm:py-12 md:py-24 xl:gap-x-24",
         className,
       )}
       {...props}

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

@@ -14,7 +14,7 @@ export function RegisterToday({ className }: RegisterTodayProps) {
   return (
     <section
       className={clsx(
-        "gql-conf-section flex gap-10 max-lg:flex-col-reverse",
+        "gql-section flex gap-10 max-lg:flex-col-reverse",
         className,
       )}
     >

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

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

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

@@ -52,7 +52,7 @@ export function Testimonials({ className, ...rest }: TestimonialsProps) {
   return (
     <section
       className={clsx(
-        "gql-conf-container py-8 max-md:px-4 md:pb-16 md:pt-24 md:[mask-image:linear-gradient(to_right,transparent,black_5%,black_95%,transparent)]",
+        "gql-container py-8 max-md:px-4 md:pb-16 md:pt-24 md:[mask-image:linear-gradient(to_right,transparent,black_5%,black_95%,transparent)]",
         className,
       )}
       {...rest}

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

@@ -71,7 +71,7 @@ export default function TopMindsSection({
   return (
     <section
       className={clsx(
-        "gql-conf-section flex justify-center max-md:flex-col [@media(767px<width<807px)]:px-6 [@media(807px<=width<858px)]:px-12",
+        "gql-section flex justify-center max-md:flex-col [@media(767px<width<807px)]:px-6 [@media(807px<=width<858px)]:px-12",
         className,
       )}
       {...rest}

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

@@ -17,7 +17,7 @@ export function Venue(props: VenueProps) {
         backgroundBlendMode: "overlay, normal",
       }}
       className={clsx(
-        "gql-conf-section relative bg-[linear-gradient(0deg,hsl(var(--color-sec-light))_0%,hsl(var(--color-sec-light))_100%),var(--photo)] dark:bg-[linear-gradient(180deg,#344303_0%,#344303_120%),var(--photo)] md:bg-cover",
+        "gql-section relative bg-[linear-gradient(0deg,hsl(var(--color-sec-light))_0%,hsl(var(--color-sec-light))_100%),var(--photo)] dark:bg-[linear-gradient(180deg,#344303_0%,#344303_120%),var(--photo)] md:bg-cover",
         props.className,
       )}
     >

src/app/conf/2025/components/what-to-expect.tsx

@@ -11,7 +11,7 @@ export default function WhatToExpectSection({
 }: WhatToExpectSectionProps) {
   return (
     <section
-      className={clsx("gql-conf-section flex gap-6 max-md:flex-col", className)}
+      className={clsx("gql-section flex gap-6 max-md:flex-col", className)}
       {...rest}
     >
       <h3 className="typography-h2 md:flex-1">What to expect</h3>

src/app/conf/2025/faq.tsx

@@ -203,7 +203,7 @@ export function FAQ({ className }: { className?: string }) {
     <section
       id="faq"
       className={clsx(
-        "gql-conf-section flex gap-10 max-lg:flex-col xl:gap-24 xl:py-16 2xl:gap-36",
+        "gql-section flex gap-10 max-lg:flex-col xl:gap-24 xl:py-16 2xl:gap-36",
         className,
       )}
     >

src/app/conf/2025/page.tsx

@@ -33,7 +33,7 @@ export default function Page() {
           Get your tickets
         </Button>
       </Hero>
-      <div className="gql-conf-container gql-conf-navbar-strip text-neu-900 before:bg-white/40 before:dark:bg-blk/30">
+      <div className="gql-container gql-conf-navbar-strip text-neu-900 before:bg-white/40 before:dark:bg-blk/30">
         <MarqueeRows
           variant="primary"
           className="pt-4 max-sm:pb-1 sm:pt-6 md:space-y-2 md:pt-12 xl:pt-16"
@@ -47,12 +47,12 @@ export default function Page() {
         <GetYourTicket />
       </div>
       <div className="gql-conf-navbar-strip text-neu-900 before:bg-white/50 before:dark:bg-blk/30">
-        <div className="gql-conf-container">
+        <div className="gql-container">
           <RegisterSection />
           <Sponsors heading="Sponsors" />
         </div>
         <BecomeASponsor />
-        <div className="gql-conf-container">
+        <div className="gql-container">
           <CallForProposals />
           <MarqueeRows
             variant="secondary"

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

@@ -36,7 +36,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 xl:mb-16 xl:mt-8">
+        <div className="gql-container gql-section gql-prose xl:mb-16 xl:mt-8">
           <Resources />
         </div>
       </main>

src/app/conf/2025/schedule/[id]/page.tsx

@@ -79,8 +79,8 @@ export default function SessionPage({ params }: SessionProps) {
       <NavbarPlaceholder className="top-0 bg-neu-50 before:bg-neu-50/40 dark:bg-neu-0 dark:before:bg-blk/30" />
       <main className="gql-all-anchors-focusable gql-conf-navbar-strip text-neu-900 before:bg-neu-50/40 before:dark:bg-blk/30">
         <div className="bg-neu-50 dark:bg-neu-0">
-          <div className="gql-conf-container">
-            <div className="gql-conf-section !py-0 max-xs:px-0">
+          <div className="gql-container">
+            <div className="gql-section !py-0 max-xs:px-0">
               <div className="border-neu-200 pt-8 dark:border-neu-100 xs:border-x 2xl:pt-16">
                 <SessionHeader
                   event={session}
@@ -136,7 +136,7 @@ export default function SessionPage({ params }: SessionProps) {
         </div>
 
         <div className="border-t border-neu-200 bg-neu-0 py-8 dark:border-neu-100 xl:py-16">
-          <div className="gql-conf-container">
+          <div className="gql-container">
             <CtaCardSection
               title="Get your ticket"
               description="Join three transformative days of expert insights and innovation to shape the next decade of APIs!"

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

@@ -33,7 +33,7 @@ export default function SchedulePage() {
           </Button>
         </div>
       </Hero>
-      <div className="gql-conf-container gql-conf-section 2xl:!px-24">
+      <div className="gql-container gql-section 2xl:!px-24">
         <ScheduleList
           eventsColors={eventsColors}
           year={year}
@@ -42,7 +42,7 @@ export default function SchedulePage() {
         />
       </div>
       <div className="gql-conf-navbar-strip border-t border-neu-200 bg-neu-0 py-8 text-neu-900 before:bg-white/40 dark:border-neu-100 before:dark:bg-blk/30 xl:py-16">
-        <div className="gql-conf-container">
+        <div className="gql-container">
           <FAQ />
 
           <CtaCardSection

src/app/conf/2025/speakers/[id]/page.tsx

@@ -59,8 +59,8 @@ export default function SpeakerPage({ params }: SpeakerProps) {
       <NavbarPlaceholder className="top-0 bg-neu-50 before:bg-neu-50/40 dark:bg-neu-0 dark:before:bg-blk/30" />
       <main className="gql-all-anchors-focusable gql-conf-navbar-strip text-neu-900 before:bg-neu-50/40 before:dark:bg-blk/30">
         <div className="bg-neu-50 dark:bg-neu-0">
-          <div className="gql-conf-container">
-            <div className="gql-conf-section !py-0 max-xs:px-0">
+          <div className="gql-container">
+            <div className="gql-section !py-0 max-xs:px-0">
               <div className="border-neu-200 dark:border-neu-100 xs:border-x">
                 <SpeakerHeader
                   speaker={speaker}
@@ -113,7 +113,7 @@ export default function SpeakerPage({ params }: SpeakerProps) {
         </div>
 
         <div className="border-t border-neu-200 bg-neu-0 py-8 dark:border-neu-100 xl:py-16">
-          <div className="gql-conf-container">
+          <div className="gql-container">
             <CtaCardSection
               title="Get your ticket"
               description="Join three transformative days of expert insights and innovation to shape the next decade of APIs!"

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

@@ -29,7 +29,7 @@ export default function Page() {
 
       {/* <NavbarPlaceholder className="top-0 bg-neu-50 before:bg-white/40 dark:bg-neu-0 dark:before:bg-blk/30" /> */}
       {/* <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">
+      <div className="gql-container gql-section">
         <div className="grid lg:grid-cols-2 lg:gap-5 max-lg:[&>:not(:first-child)]:border-t-0">
           {speakers.map(speaker => (
             <SpeakerCard key={speaker.username} speaker={speaker} year="2025" />
@@ -38,7 +38,7 @@ export default function Page() {
       </div>
 
       <div className="gql-conf-navbar-strip border-t border-neu-200 bg-neu-0 py-8 text-neu-900 before:bg-white/40 dark:border-neu-100 before:dark:bg-blk/30 xl:py-16">
-        <div className="gql-conf-container">
+        <div className="gql-container">
           <FAQ />
 
           <CtaCardSection

src/components/index-page/hero.tsx

@@ -8,7 +8,7 @@ import logoBlurred from "./hero/logo-blurred.png"
 export function Hero() {
   return (
     <div className="relative bg-neu-50 dark:bg-neu-0">
-      <div className="gql-conf-container flex flex-col-reverse lg:grid lg:grid-cols-2">
+      <div className="gql-container flex flex-col-reverse lg:grid lg:grid-cols-2">
         <div className="flex max-w-4xl flex-col justify-center gap-4 p-4 lg:min-h-[800px] xl:gap-8 xl:py-24 xl:pl-24 xl:pr-10">
           <h1 className="typography-h1 max-w-3xl text-neu-900">
             The query language for modern APIs

src/components/index-page/index.tsx

@@ -1,4 +1,5 @@
 import { Hero } from "./hero"
+import { TrustedBy } from "./trusted-by"
 import { PredictableResults } from "./predictable-results"
 import { SingleRequest } from "./single-request"
 import { TypeSystem } from "./type-system"
@@ -12,6 +13,7 @@ export function IndexPage() {
   return (
     <div className="index">
       <Hero />
+      <TrustedBy />
       <HowItWorks />
       <section className="conf-block container flex max-w-3xl flex-col items-center text-center">
         <h2>A query language for your API</h2>