Add RegisterSection

Author: hasparus

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

@@ -0,0 +1,80 @@
+import { Button } from "@/app/conf/_design-system/button"
+import { clsx } from "clsx"
+import { BECOME_A_SPEAKER_LINK } from "../../links"
+
+export interface RegisterSectionProps
+  extends React.HTMLAttributes<HTMLDivElement> {}
+
+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",
+        className,
+      )}
+      {...props}
+    >
+      <div>
+        <h2 className="typography-h2">Register</h2>
+        <p className="mt-6 typography-body-lg">
+          Join a diverse community of GraphQL developers, architects, and
+          enthusiasts while experiencing premium content and networking
+          opportunities in a vendor-neutral environment.
+        </p>
+        <p className="mt-6 typography-body-sm md:mt-16">
+          We never sell attendee lists or contact information, nor do we
+          authorize others to do so. If you receive an email claiming to sell an
+          attendee list for a Linux Foundation event, please forward it to
+          [email protected].
+        </p>
+      </div>
+      <div className="flex flex-col gap-6 md:gap-8">
+        <article className="border border-neu-400 p-6">
+          <h3 className="typography-h3">Speakers</h3>
+          <p className="mt-6 typography-body-lg">
+            You should have received a registration link in your acceptance
+            email. If you did not, please contact us for more details:
+            [email protected].
+          </p>
+          <Button
+            variant="primary"
+            className="mt-6"
+            href={BECOME_A_SPEAKER_LINK}
+          >
+            Become a speaker
+          </Button>
+        </article>
+        <article className="border border-neu-400 p-6">
+          <h3 className="typography-h3">Sponsors</h3>
+          <p className="mt-6 typography-body-lg">
+            A registration link was shared in an email to your company's
+            sponsorship contact. Please reach out to them if you need to
+            register as a Sponsor. For further questions, please email us:
+            [email protected].
+          </p>
+          <Button
+            variant="primary"
+            className="mt-6"
+            href="https://events.linuxfoundation.org/wp-content/uploads/2025/02/sponsor_GraphQLConf_2025_022025.pdf"
+          >
+            Become a sponsor
+          </Button>
+        </article>
+        <article className="border border-neu-400 p-6">
+          <h3 className="typography-h3">Media</h3>
+          <p className="mt-6 typography-body-lg">
+            If you are a member of the media interested in attending this event,
+            write us an email.
+          </p>
+          <Button
+            variant="primary"
+            className="mt-6"
+            href="mailto:[email protected]"
+          >
+            Contact us
+          </Button>
+        </article>
+      </div>
+    </section>
+  )
+}

src/app/conf/2025/page.tsx

@@ -12,6 +12,8 @@ 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"
+
 export const metadata: Metadata = {
   title: "GraphQLConf 2025 — Sept 08-10",
 }
@@ -20,13 +22,15 @@ export default function Page() {
   return (
     <main className="antialiased">
       <Hero />
-      <div className="gql-conf-container mx-auto text-neu-900">
+      <div className="gql-conf-container text-neu-900">
         <RegisterToday className="md:mb-8 md:mt-24" />
         <WhatToExpectSection className="md:mb-8 md:mt-24" />
         <TopMindsSection className="md:mb-8 md:mt-24" hasSpeakersPage={false} />
       </div>
       <GetYourTicket />
-
+      <div className="gql-conf-container text-neu-900">
+        <RegisterSection />
+      </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 />