Merge branch 'source' into new-conf-design--speakers

Author: hasparus

src/app/conf/2025/components/call-for-proposals.tsx

@@ -382,6 +382,7 @@ export function CallForProposals() {
           >
             {tabsInOrder.map((tab, i) => (
               <TabButton
+                key={tab}
                 tab={tab}
                 tabIndex={i === 0 ? 0 : -1}
                 activeTab={activeTab}

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

@@ -0,0 +1,65 @@
+import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
+
+import logoMask from "./logo-mask.webp"
+
+export interface CtaCardSectionProps extends React.HTMLAttributes<HTMLElement> {
+  title: string
+  description: string
+  children: React.ReactNode
+}
+
+export function CtaCardSection({
+  className,
+  title: heading,
+  description,
+  children,
+  ...rest
+}: CtaCardSectionProps) {
+  return (
+    <div className="gql-conf-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}
+      >
+        <div className="relative z-10 flex flex-col gap-10 sm:items-start [@media(max-width:420px)]:text-center">
+          <div className="flex flex-col gap-6">
+            <h2 className="text-neu-0 typography-d1 dark:text-neu-900">
+              {heading}
+            </h2>
+            <p className="max-w-[555px] text-pretty text-neu-50 typography-body-lg dark:text-neu-800">
+              {description}
+            </p>
+          </div>
+
+          {children}
+        </div>
+
+        <div
+          role="presentation"
+          // prettier-ignore
+          className="
+              pointer-events-none absolute
+              sm:bottom-[-277px] inset-0 sm:left-1/3 xl:left-1/2 sm:top-[-107px] xl:right-[-391px]
+              [--start:hsl(var(--color-sec-base))]
+              [--end:hsl(var(--color-sec-lighter))]
+              dark:[--start:hsl(var(--color-sec-dark))]
+              dark:[--end:hsl(var(--color-sec-base))]
+
+              [mask-size:cover]
+              max-sm:[mask-position:center] max-sm:opacity-50
+              sm:[mask-size:1117px]
+            "
+          style={{
+            maskImage: `url(${logoMask.src})`,
+            maskRepeat: "no-repeat",
+          }}
+        >
+          <StripesDecoration
+            thin
+            oddClassName="bg-[linear-gradient(180deg,var(--start)_0%,var(--end)_100%)]"
+          />
+        </div>
+      </section>
+    </div>
+  )
+}

src/app/conf/2025/components/cta-card-section/logo-mask.webp

@@ -23,13 +23,15 @@ export function Footer({
   return (
     <footer className="gql-all-anchors-focusable relative !bg-neu-100 text-neu-900 typography-menu dark:!bg-neu-0 max-md:px-0 max-md:pt-0">
       <Stripes />
-      <div className="flex flex-wrap justify-between gap-4 px-6 py-4 max-md:w-full lg:py-10">
+      <div className="flex flex-wrap justify-between gap-4 p-4 max-md:w-full md:px-6 lg:py-10 2xl:px-10">
         {logo}
-        <div className="flex gap-x-4 gap-y-2 typography-body-lg">
-          <p className="flex items-center gap-2">
+        <div className="flex gap-x-4 typography-body-lg max-sm:grid max-sm:grid-cols-2 max-sm:items-start max-sm:text-lg sm:gap-y-2">
+          <p className="flex items-center whitespace-pre">
             <time dateTime="2025-09-08">September 08</time>
             <span>-</span>
-            <time dateTime="2025-09-10">10, 2025</time>
+            <time dateTime="2025-09-10">
+              10<span className="max-sm:hidden">, 2025</span>
+            </time>
           </p>
           <address className="not-italic">Amsterdam, Netherlands</address>
         </div>
@@ -41,7 +43,7 @@ export function Footer({
           </li>
         ))}
       </ul>
-      <div className="relative flex justify-between gap-10 px-6 py-4 text-sm max-lg:flex-col">
+      <div className="relative flex justify-between gap-10 p-4 text-sm max-lg:flex-col md:px-6 2xl:px-10">
         <div className="flex flex-col font-light max-md:gap-5">
           <p>
             Copyright © {new Date().getFullYear()} The GraphQL Foundation. All
@@ -139,7 +141,7 @@ function FooterBox({ box }: { box: FooterLink | FooterLink[] }) {
       href={href}
       title={disabled ? "Coming soon" : undefined}
       className={clsx(
-        "gql-focus-visible relative block h-full p-6",
+        "gql-focus-visible relative block h-full p-4 pb-8 md:p-6 2xl:px-10",
         disabled ? "pointer-events-none" : "underline-offset-4 hover:underline",
       )}
       tabIndex={disabled ? -1 : undefined}