Add remaining marquee sections

Author: hasparus

…/components/marquee-under-hero/blur.webp …f/2025/components/marquee-rows/blur.webpsrc/app/conf/2025/components/marquee-under-hero/blur.webp renamed to src/app/conf/2025/components/marquee-rows/blur.webp src/app/conf/2025/components/marquee-under-hero/blur.webp renamed to src/app/conf/2025/components/marquee-rows/blur.webp

@@ -1,23 +1,46 @@
-import { Fragment } from "react"
+import { Fragment, ReactNode } from "react"
 
 import { Marquee } from "@/app/conf/_design-system/marquee"
 
 import CodeIcon from "../../pixelarticons/code.svg?svgr"
 
 import blurWave from "./blur.webp"
 import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
+import { clsx } from "clsx"
 
-const keywords = [
-  ["COMMUNITY", "DEVELOPER EXPERIENCE", "APIs", "TOOLS & LIBRARIES"],
-  ["OPEN SOURCE", "FEDERATION", "ECOSYSTEMS", "TRACING & OBSERVABILITY"],
-  ["BEST PRACTICES", "WORKSHOPS", "SCHEMAS", "SECURITY"],
-]
+export interface MarqueeRowsProps extends React.HTMLAttributes<HTMLDivElement> {
+  items: ReactNode[][]
+  variant: "primary" | "secondary"
+}
+
+export function MarqueeRows({
+  items,
+  className,
+  variant,
+  ...rest
+}: MarqueeRowsProps) {
+  const separator = (
+    <CodeIcon
+      className={clsx(
+        "size-8 md:size-10",
+        variant === "primary"
+          ? "text-pri-dark dark:text-pri-light"
+          : "text-pri-base",
+      )}
+    />
+  )
 
-export function MarqueeUnderHero() {
   return (
-    <section className="relative pt-4 font-mono text-xl/none text-pri-base max-sm:pb-1 sm:pt-6 md:space-y-2 md:pt-12 md:text-[56px]/none xl:pt-16">
-      <Stripes />
-      {keywords.map((row, i) => (
+    <section
+      className={clsx(
+        "relative font-mono text-xl/none md:text-[56px]/none",
+        variant === "primary" ? "text-pri-base" : "text-neu-900",
+        className,
+      )}
+      {...rest}
+    >
+      {variant === "primary" && <Stripes />}
+      {items.map((row, i) => (
         <Marquee
           key={i}
           gap={16}
@@ -26,13 +49,12 @@ export function MarqueeUnderHero() {
           className="relative *:select-none"
           reverse={i % 2 === 1}
           drag
+          separator={separator}
         >
-          {row.map((keyword, j) => (
-            <Fragment key={keyword}>
-              <span>{keyword}</span>
-              {j !== row.length - 1 && (
-                <CodeIcon className="size-8 text-pri-dark dark:text-pri-light md:size-10" />
-              )}
+          {row.map((item, j) => (
+            <Fragment key={j}>
+              {item}
+              {j !== row.length - 1 && separator}
             </Fragment>
           ))}
         </Marquee>

…/components/marquee-under-hero/index.tsx …f/2025/components/marquee-rows/index.tsxsrc/app/conf/2025/components/marquee-under-hero/index.tsx renamed to src/app/conf/2025/components/marquee-rows/index.tsx src/app/conf/2025/components/marquee-under-hero/index.tsx renamed to src/app/conf/2025/components/marquee-rows/index.tsx

@@ -11,17 +11,28 @@ import { GetYourTicket } from "./components/get-your-ticket"
 import { RegisterSection } from "./components/register-section"
 import { Sponsors } from "./components/sponsors"
 import { GraphQLFoundationCard } from "./components/graphql-foundation-card"
-import { MarqueeUnderHero } from "./components/marquee-under-hero"
+import { MarqueeRows } from "./components/marquee-rows"
+
 export const metadata: Metadata = {
   title: "GraphQLConf 2025 — Sept 08-10",
 }
 
+const HERO_MARQUEE_ITEMS = [
+  ["COMMUNITY", "DEVELOPER EXPERIENCE", "APIs", "TOOLS & LIBRARIES"],
+  ["OPEN SOURCE", "FEDERATION", "ECOSYSTEMS", "TRACING & OBSERVABILITY"],
+  ["BEST PRACTICES", "WORKSHOPS", "SCHEMAS", "SECURITY"],
+]
+
 export default function Page() {
   return (
-    <main className="gql-all-anchors-focusable antialiased">
+    <main className="gql-all-anchors-focusable">
       <Hero />
       <div className="gql-conf-container gql-conf-navbar-strip text-neu-900 before:bg-white/40 before:dark:bg-blk/30">
-        <MarqueeUnderHero />
+        <MarqueeRows
+          variant="primary"
+          className="pt-4 max-sm:pb-1 sm:pt-6 md:space-y-2 md:pt-12 xl:pt-16"
+          items={HERO_MARQUEE_ITEMS}
+        />
         <RegisterToday className="md:mb-8 md:mt-16" />
         <WhatToExpectSection className="md:mb-8 md:mt-24" />
         <TopMindsSection className="md:mb-8 md:mt-24" hasSpeakersPage={false} />
@@ -34,9 +45,33 @@ export default function Page() {
         <Sponsors heading="Thanks to our 2024 sponsors!" />
         <Sponsor />
         <CallForProposals />
+        <MarqueeRows
+          variant="secondary"
+          items={[
+            ["AMSTERDAM", "SEPTEMBER 2025", "THREE DAYS", "PAKHUIS DE ZWIJGER"],
+            [
+              "THREE DAYS",
+              "PAKHUIS DE ZWIJGER",
+              "NETHERLANDS",
+              "PIET HEINKADE 179",
+            ],
+            [
+              "NETHERLANDS",
+              "10 YEARS OF GRAPHQL",
+              "8-10 SEPTEMBER",
+              "AMSTERDAM",
+            ],
+          ]}
+          className="my-8 xl:mb-16 xl:mt-10 2xl:mb-24"
+        />
         <Venue />
         <GraphQLFoundationCard />
         <FAQ />
+        <MarqueeRows
+          variant="secondary"
+          items={HERO_MARQUEE_ITEMS}
+          className="my-8 xl:my-16"
+        />
       </div>
     </main>
   )

src/app/conf/2025/page.tsx

@@ -14,6 +14,7 @@ export interface MarqueeProps {
   reverse?: boolean
   className?: string
   drag?: boolean
+  separator?: React.ReactNode
 }
 
 export function Marquee({
@@ -25,6 +26,7 @@ export function Marquee({
   reverse = false,
   className,
   drag = false,
+  separator,
 }: MarqueeProps) {
   const [currentSpeed, setCurrentSpeed] = useState(speed)
   const [ref, { width, height }] = useMeasure()
@@ -130,7 +132,10 @@ export function Marquee({
         {...hoverProps}
       >
         {Array.from({ length: multiples }).map((_, i) => (
-          <Fragment key={i}>{children}</Fragment>
+          <Fragment key={i}>
+            {children}
+            {separator}
+          </Fragment>
         ))}
       </motion.div>
     </div>