new conf design — cta section (#1998)

* Unify paddings

* Add CtaCardSection

* Support thin stripes

Author: hasparus

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,7 +23,7 @@ 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">
@@ -41,7 +41,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 +139,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}

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

@@ -48,7 +48,7 @@ export function Navbar({ links, year }: NavbarProps): ReactElement {
         )}
       >
         <BackdropBlur />
-        <div className="flex h-[var(--navbar-h)] items-center justify-between gap-5 px-4 lg:px-10">
+        <div className="flex h-[var(--navbar-h)] items-center justify-between gap-5 px-4 md:px-6 2xl:px-10">
           <GraphQLConfLogoLink year={year} />
 
           <div className="mr-auto flex h-full flex-col justify-center whitespace-pre border-x border-blk/60 px-4 typography-menu dark:border-white/80 max-xl:hidden">

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

@@ -12,6 +12,9 @@ import { RegisterSection } from "./components/register-section"
 import { Sponsors } from "./components/sponsors"
 import { GraphQLFoundationCard } from "./components/graphql-foundation-card"
 import { MarqueeRows } from "./components/marquee-rows"
+import { CtaCardSection } from "./components/cta-card-section"
+import { Button } from "../_design-system/button"
+import { GET_TICKETS_LINK } from "./links"
 
 export const metadata: Metadata = {
   title: "GraphQLConf 2025 — Sept 08-10",
@@ -75,6 +78,14 @@ export default function Page() {
           <Venue />
           <GraphQLFoundationCard />
           <FAQ />
+          <CtaCardSection
+            title="Get your ticket"
+            description="Join three transformative days of expert insights and innovation to shape the next decade of APIs!"
+          >
+            <Button variant="primary" href={GET_TICKETS_LINK}>
+              Get tickets
+            </Button>
+          </CtaCardSection>
           <MarqueeRows
             variant="secondary"
             items={HERO_MARQUEE_ITEMS}

src/app/conf/2025/page.tsx

@@ -1,17 +1,28 @@
 import clsx from "clsx"
 
-const maskEven =
+const maskEvenWide =
   "repeating-linear-gradient(to right, transparent, transparent 12px, black 12px, black 24px)"
 
-const maskOdd =
+const maskOddWide =
   "repeating-linear-gradient(to right, black, black 12px, transparent 12px, transparent 24px)"
 
+const maskEvenThin =
+  "repeating-linear-gradient(to right, transparent, transparent 5.2px, black 5.2px, black 10.4px)"
+
+const maskOddThin =
+  "repeating-linear-gradient(to right, black, black 5.2px, transparent 5.2px, transparent 10.4px)"
+
 export interface StripesDecorationProps {
   evenClassName?: string
   oddClassName?: string
+  thin?: boolean
 }
 
 export function StripesDecoration(props: StripesDecorationProps) {
+  const [maskEven, maskOdd] = props.thin
+    ? [maskEvenThin, maskOddThin]
+    : [maskEvenWide, maskOddWide]
+
   return (
     <>
       {props.evenClassName && (