Add CtaCardSection

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

@@ -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}