Add a footer to speakers page

Author: hasparus

src/app/conf/2025/components/speaker-card.tsx

@@ -23,18 +23,18 @@ export function SpeakerCard({
   className,
   speaker,
   year,
-  showSocials = true,
+  showSocials = false,
   ...props
 }: SpeakerCardProps) {
   return (
     <article
       className={clsx(
-        "group relative flex flex-col overflow-hidden border border-neu-200 bg-neu-0 [container-type:inline-size] dark:border-neu-100",
+        "group relative overflow-hidden border border-neu-200 bg-neu-0 @container dark:border-neu-100",
         className,
       )}
       {...props}
     >
-      <div className="flex gap-6 p-6">
+      <div className="flex h-full flex-col gap-4 p-4 @[420px]:flex-row md:gap-6 md:p-6">
         {showSocials && (
           <SpeakerLinks speaker={speaker} className="absolute right-6 top-6" />
         )}

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

@@ -69,7 +69,6 @@ export default function SessionPage({ params }: SessionProps) {
   return (
     <>
       <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="bg-neu-50 dark:bg-neu-0">
           <div className="gql-conf-container">

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

@@ -1,9 +1,13 @@
 import { Metadata } from "next"
 import { speakers } from "../_data"
-import { Speaker } from "@/app/conf/_components/speakers/speaker"
 import { Hero } from "../components/hero"
 import { Button } from "../../_design-system/button"
 import { GET_TICKETS_LINK } from "../links"
+import { SpeakerCard } from "../components/speaker-card"
+import { CtaCardSection } from "../components/cta-card-section"
+import { HERO_MARQUEE_ITEMS } from "../utils"
+import { MarqueeRows } from "../components/marquee-rows"
+import { FAQ } from "../faq"
 
 export const metadata: Metadata = {
   title: "Speakers",
@@ -23,12 +27,32 @@ export default function Page() {
         </div>
       </Hero>
 
-      <div className="bg-white">
-        <section className="conf-block container flex flex-wrap justify-center gap-8 lg:justify-between">
+      {/* <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="grid lg:grid-cols-2 lg:gap-5 max-lg:[&>:not(:first-child)]:border-t-0">
           {speakers.map(speaker => (
-            <Speaker key={speaker.username} {...speaker} year="2024" />
+            <SpeakerCard key={speaker.username} speaker={speaker} year="2025" />
           ))}
-        </section>
+        </div>
+      </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">
+          <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>
+          <div className="py-8">
+            <MarqueeRows variant="secondary" items={HERO_MARQUEE_ITEMS} />
+          </div>
+        </div>
       </div>
     </main>
   )