diff --git a/src/app/conf/2024/venue.tsx b/src/app/conf/2024/venue.tsx
index 866884669e..53ed935baa 100644
--- a/src/app/conf/2024/venue.tsx
+++ b/src/app/conf/2024/venue.tsx
@@ -1,4 +1,4 @@
-import { TrainIcon, AroundIcon, ParkingIcon, BusIcon } from "@/icons"
+import { TrainIcon, AroundIcon, ParkingIcon } from "@/icons"
 import NextImage from "next-image-export-optimizer"
 import cityViewImage from "./sf-city-view.jpeg"
 
diff --git a/src/app/conf/2025/components/call-for-proposals.tsx b/src/app/conf/2025/components/call-for-proposals.tsx
index a09fadc171..a0fe219db6 100644
--- a/src/app/conf/2025/components/call-for-proposals.tsx
+++ b/src/app/conf/2025/components/call-for-proposals.tsx
@@ -1,10 +1,11 @@
 "use client"
-import clsx from "clsx"
 
-import { useState, useEffect, ReactNode, Fragment } from "react"
+import clsx from "clsx"
+import { useState, useEffect, Fragment } from "react"
 import Link from "next/link"
-import { Button } from "../../_design-system/button"
-import ArrowDownIcon from "../pixelarticons/arrow-down.svg?svgr"
+
+import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
+import { Button } from "@/app/conf/_design-system/button"
 
 function DatesTab() {
   return (
diff --git a/src/app/conf/2025/components/cta-card-section/index.tsx b/src/app/conf/2025/components/cta-card-section/index.tsx
index 612ce2508a..8dc44dc9c0 100644
--- a/src/app/conf/2025/components/cta-card-section/index.tsx
+++ b/src/app/conf/2025/components/cta-card-section/index.tsx
@@ -55,7 +55,7 @@ export function CtaCardSection({
           }}
         >
           <StripesDecoration
-            thin
+            stripeWidth="5.2px"
             oddClassName="bg-[linear-gradient(180deg,var(--start)_0%,var(--end)_100%)]"
           />
         </div>
diff --git a/src/app/conf/2025/components/hero/index.tsx b/src/app/conf/2025/components/hero/index.tsx
index 5cac0ba2a3..aab17fa7e9 100644
--- a/src/app/conf/2025/components/hero/index.tsx
+++ b/src/app/conf/2025/components/hero/index.tsx
@@ -1,9 +1,9 @@
 import Image from "next-image-export-optimizer"
 
 import { Button } from "../../../_design-system/button"
-import { CalendarIcon } from "../../pixelarticons/calendar-icon"
+import { CalendarIcon } from "../../../_design-system/pixelarticons/calendar-icon"
 import { GET_TICKETS_LINK } from "../../links"
-import { PinIcon } from "../../pixelarticons/pin-icon"
+import { PinIcon } from "../../../_design-system/pixelarticons/pin-icon"
 import graphqlFoundationWordmarkSvg from "../../assets/graphql-foundation-wordmark.svg"
 
 import { ImageLoaded } from "../image-loaded"
diff --git a/src/app/conf/2025/components/marquee-rows/index.tsx b/src/app/conf/2025/components/marquee-rows/index.tsx
index 5706113f3f..38906c5fe5 100644
--- a/src/app/conf/2025/components/marquee-rows/index.tsx
+++ b/src/app/conf/2025/components/marquee-rows/index.tsx
@@ -1,12 +1,11 @@
+import { clsx } from "clsx"
 import { Fragment, ReactNode } from "react"
 
 import { Marquee } from "@/app/conf/_design-system/marquee"
-
-import CodeIcon from "../../pixelarticons/code.svg?svgr"
+import CodeIcon from "@/app/conf/_design-system/pixelarticons/code.svg?svgr"
+import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
 
 import blurWave from "./blur.webp"
-import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
-import { clsx } from "clsx"
 
 export interface MarqueeRowsProps extends React.HTMLAttributes<HTMLDivElement> {
   items: ReactNode[][]
diff --git a/src/app/conf/2025/components/navbar.tsx b/src/app/conf/2025/components/navbar.tsx
index 2edbacc0a0..a2b36ae5d0 100644
--- a/src/app/conf/2025/components/navbar.tsx
+++ b/src/app/conf/2025/components/navbar.tsx
@@ -1,14 +1,13 @@
 "use client"
 
 import { ReactElement, useCallback, useEffect, useState } from "react"
-import NextLink from "next/link"
 import { clsx } from "clsx"
 import { usePathname } from "next/navigation"
 
 import { Badge } from "../../_components/badge"
 
-import MenuIcon from "../pixelarticons/menu.svg?svgr"
-import CloseIcon from "../pixelarticons/close.svg?svgr"
+import MenuIcon from "@/app/conf/_design-system/pixelarticons/menu.svg?svgr"
+import CloseIcon from "@/app/conf/_design-system/pixelarticons/close.svg?svgr"
 import { GraphQLConfLogoLink } from "./graphql-conf-logo-link"
 import { Anchor } from "../../_design-system/anchor"
 
diff --git a/src/app/conf/2025/components/sponsors.tsx b/src/app/conf/2025/components/sponsors.tsx
index 8d0f29a685..b23c152cba 100644
--- a/src/app/conf/2025/components/sponsors.tsx
+++ b/src/app/conf/2025/components/sponsors.tsx
@@ -1,7 +1,7 @@
 import Grafbase from "public/img/conf/Sponsors/Grafbase.svg?svgr"
 
 import { clsx } from "clsx"
-import { ChevronRight } from "../pixelarticons/chevron-right"
+import { ChevronRight } from "../../_design-system/pixelarticons/chevron-right"
 
 interface Sponsor {
   icon: React.FC<React.SVGProps<SVGElement>>
diff --git a/src/app/conf/2025/components/testimonials/index.tsx b/src/app/conf/2025/components/testimonials/index.tsx
new file mode 100644
index 0000000000..fd99cfb115
--- /dev/null
+++ b/src/app/conf/2025/components/testimonials/index.tsx
@@ -0,0 +1,138 @@
+import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
+import { clsx } from "clsx"
+import Image from "next-image-export-optimizer"
+
+import maskBlur from "./mask.webp"
+
+export interface TestimonialsProps extends React.HTMLAttributes<HTMLElement> {}
+
+interface Testimonial {
+  quote: string
+  author: {
+    name: string
+    role: string
+    avatar: string
+  }
+}
+
+const testimonials: Testimonial[] = [
+  {
+    quote:
+      "GraphQL has transformed how we build and scale our APIs at Netflix. By allowing our teams to fetch exactly the data they need, we've improved performance, reduced API complexity, and accelerated development cycles.",
+    author: {
+      name: "Saihajpreet Singh",
+      role: "The Guild",
+      avatar: "https://avatars.githubusercontent.com/u/44710980?v=4",
+    },
+  },
+  {
+    quote:
+      "GraphQL has transformed how we build and scale our APIs at Netflix. By allowing our teams to fetch exactly the data they need, we've improved performance, reduced API complexity, and accelerated development cycles.",
+    author: {
+      name: "Saihajpreet Singh",
+      role: "The Guild",
+      avatar: "https://avatars.githubusercontent.com/u/44710980?v=4",
+    },
+  },
+  {
+    quote:
+      "GraphQL has transformed how we build and scale our APIs at Netflix. By allowing our teams to fetch exactly the data they need, we've improved performance, reduced API complexity, and accelerated development cycles.",
+    author: {
+      name: "Saihajpreet Singh",
+      role: "The Guild",
+      avatar: "https://avatars.githubusercontent.com/u/44710980?v=4",
+    },
+  },
+]
+
+export function Testimonials({ className, ...rest }: TestimonialsProps) {
+  return (
+    <section
+      className={clsx(
+        "gql-conf-container py-8 max-md:px-4 md:pb-16 md:pt-24 md:[mask-image:linear-gradient(to_right,transparent,black_5%,black_95%,transparent)]",
+        className,
+      )}
+      {...rest}
+    >
+      <h2 className="text-center text-neu-800 typography-h2">
+        How was the previous edition?
+      </h2>
+      <div className="flex w-full snap-x snap-mandatory flex-row gap-10 overflow-x-auto px-4 py-6 lg:mt-16 lg:py-16">
+        {testimonials.map((testimonial, i) => (
+          <div
+            key={i}
+            className="flex shrink-0 snap-start flex-row-reverse items-center gap-6 max-md:flex-col md:px-10"
+          >
+            <div>
+              <p className="max-w-[calc(100vw-32px)] typography-body-lg max-md:text-center md:max-w-[544px] xl:text-2xl">
+                {testimonial.quote}
+              </p>
+              <AuthorNameAndRole
+                author={testimonial.author}
+                className="mt-4 max-md:hidden"
+              />
+            </div>
+            <TestimonialAuthor author={testimonial.author} />
+          </div>
+        ))}
+      </div>
+    </section>
+  )
+}
+
+function TestimonialAuthor({ author }: { author: Testimonial["author"] }) {
+  return (
+    <div className="relative flex shrink-0 flex-col items-center justify-center whitespace-pre md:px-6 lg:h-full lg:px-8">
+      <div className="relative bg-neu-500 dark:bg-neu-200">
+        <Image
+          src={author.avatar}
+          alt={author.name}
+          width={128}
+          height={128}
+          className="size-16 xl:size-32"
+        />
+        <div className="absolute inset-0 z-[1] bg-pri-base mix-blend-plus-lighter" />
+        <Stripes />
+      </div>
+      <AuthorNameAndRole author={author} className="contents md:hidden" />
+    </div>
+  )
+}
+
+function AuthorNameAndRole({
+  author,
+  className,
+}: {
+  author: Testimonial["author"]
+  className?: string
+}) {
+  return (
+    <div className={className}>
+      <div className="mt-3 typography-body-sm">{author.name}</div>
+      <div className="text-neu-700 typography-body-xs">{author.role}</div>
+    </div>
+  )
+}
+
+function Stripes() {
+  const mask = `url(${maskBlur.src})`
+  return (
+    <div
+      role="presentation"
+      className="pointer-events-none absolute inset-0"
+      style={{
+        maskImage: mask,
+        WebkitMaskImage: mask,
+        maskSize: "cover",
+        WebkitMaskSize: "cover",
+        maskPosition: "left",
+        WebkitMaskPosition: "left",
+      }}
+    >
+      <StripesDecoration
+        evenClassName="bg-gradient-to-b from-pri-light/0 to-pri-lighter/25"
+        stripeWidth="8px"
+      />
+    </div>
+  )
+}
diff --git a/src/app/conf/2025/components/testimonials/mask.webp b/src/app/conf/2025/components/testimonials/mask.webp
new file mode 100644
index 0000000000..31dba9802a
Binary files /dev/null and b/src/app/conf/2025/components/testimonials/mask.webp differ
diff --git a/src/app/conf/2025/components/venue/index.tsx b/src/app/conf/2025/components/venue/index.tsx
new file mode 100644
index 0000000000..e35c13cd54
--- /dev/null
+++ b/src/app/conf/2025/components/venue/index.tsx
@@ -0,0 +1,152 @@
+import { clsx } from "clsx"
+
+import { Button } from "@/app/conf/_design-system/button"
+import { Accordion } from "@/app/conf/_design-system/accordion"
+
+import locationPhoto from "./location-photo.webp"
+
+export interface VenueProps extends React.HTMLAttributes<HTMLElement> {}
+
+export function Venue(props: VenueProps) {
+  return (
+    <section
+      {...props}
+      style={{
+        ...({ "--photo": `url(${locationPhoto.src})` } as {}),
+        ...props.style,
+        backgroundBlendMode: "overlay, normal",
+      }}
+      className={clsx(
+        "gql-conf-section relative bg-[linear-gradient(0deg,hsl(var(--color-sec-light))_0%,hsl(var(--color-sec-light))_100%),var(--photo)] dark:bg-[linear-gradient(180deg,#344303_0%,#344303_120%),var(--photo)] md:bg-cover",
+        props.className,
+      )}
+    >
+      <div className="relative flex gap-x-12 gap-y-10 bg-white/10 p-4 dark:bg-blk/10 max-lg:flex-col lg:p-16 xl:*:flex-1">
+        <div
+          className="absolute inset-0 backdrop-blur-3xl"
+          style={{
+            maskImage:
+              "radial-gradient(circle at center, #fff 65%, rgb(255 0 0/.8) 99%)",
+            WebkitMaskImage:
+              "radial-gradient(circle at center, #fff 65%, rgb(255 0 0/.8) 99%)",
+          }}
+        />
+        <article className="relative flex shrink-0 flex-col gap-6 max-xl:max-w-[476px]">
+          <h2 className="typography-h2">
+            A place of innovation &&nbsp;creation
+          </h2>
+          <p className="typography-body-lg">
+            A former warehouse, located in an industrial area near the Amsterdam
+            city centre, changed into a place of culture & business.
+          </p>
+          <div className="flex-1" />
+          <p className="typography-body-lg">
+            Pakhuis De Zwijger <br />
+            Piet Heinkade 179, 1019 HC <br />
+            Amsterdam, Netherlands
+          </p>
+          <Button href="https://maps.app.goo.gl/W7nX1NejhWw9PqxF7">
+            Google Maps
+          </Button>
+        </article>
+        <div className="relative flex-1">
+          <h3 className="mb-6 typography-h3">How to get to the venue?</h3>
+          <Accordion
+            className="[&_svg]:fill-neu-900"
+            items={[
+              {
+                title: "Public Transportation",
+                description: (
+                  <>
+                    Take tram 26 from Amsterdam Central Station to the
+                    "Kattenburgerstraat" stop.
+                    <br />
+                    The venue is in front of the tram stop.
+                  </>
+                ),
+              },
+              {
+                title: "Airport Information",
+                description:
+                  "Amsterdam Airport Schiphol is about 20 km from the venue. Take a direct train to Amsterdam Central Station, then follow the public transportation instructions.",
+              },
+              {
+                title: "Parking at venue",
+                description: (
+                  <>
+                    Limited parking is available at the venue. We recommend
+                    using public transportation when possible. Learn more about
+                    parking at{" "}
+                    <a
+                      className="typography-link"
+                      href="https://dezwijger.nl/about-us-en/contact"
+                      target="_blank"
+                    >
+                      Pakhuis de Zwijger
+                    </a>
+                    . If&nbsp;you require an accessible parking spot, park at
+                    Vriesseveem 4 or Withoedenveem 16 where you can park if you
+                    have a Disability Parking Card.
+                  </>
+                ),
+              },
+            ]}
+          />
+          <h3 className="my-6 typography-h3">Where to stay?</h3>
+          <Accordion
+            className="[&_svg]:fill-neu-900"
+            items={[
+              {
+                title: "Mövenpick Hotel Amsterdam City Centre",
+                link: "https://movenpick.accor.com/en/europe/netherlands/amsterdam/hotel-amsterdam.html?utm_source=google&utm_medium=local&utm_campaign=hotel-MHR-Amsterdam-city-center&y_source=1_MTUzNjI2OTgtNzE1LWxvY2F0aW9uLndlYnNpdGU%3D",
+                description: (
+                  <>
+                    Piet Heinkade 11
+                    <br />
+                    1019 BR Amsterdam, Netherlands
+                    <br />
+                    Phone:{" "}
+                    <a className="typography-link" href="tel:+31 20 519 1200">
+                      +31 20 519 1200
+                    </a>
+                  </>
+                ),
+              },
+              {
+                title: "Inntel Hotels Amsterdam Landmark",
+                link: "https://www.inntelhotelsamsterdamlandmark.nl/",
+                description: (
+                  <>
+                    VOC-kade 600
+                    <br />
+                    1018 LG Amsterdam, Netherlands
+                    <br />
+                    Phone:{" "}
+                    <a className="typography-link" href="tel:+31 20 227 2550">
+                      +31 20 227 2550
+                    </a>
+                  </>
+                ),
+              },
+              {
+                title: "DoubleTree by Hilton Amsterdam Central Station",
+                link: "https://www.hilton.com/en/hotels/amscsdi-doubletree-amsterdam-centraal-station/?SEO_id=GMB-EMEA-DI-AMSCSDI",
+                description: (
+                  <>
+                    Oosterdoksstraat 4 <br />
+                    1011 DK Amsterdam, Netherlands
+                    <br />
+                    Phone:{" "}
+                    <a className="typography-link" href="tel:+31 20 530 0800">
+                      +31 20 530 0800
+                    </a>
+                  </>
+                ),
+              },
+            ]}
+          />
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/src/app/conf/2025/components/venue/location-photo.webp b/src/app/conf/2025/components/venue/location-photo.webp
new file mode 100644
index 0000000000..5bb3e21f34
Binary files /dev/null and b/src/app/conf/2025/components/venue/location-photo.webp differ
diff --git a/src/app/conf/2025/faq.tsx b/src/app/conf/2025/faq.tsx
index 115c5a4145..917c3000dc 100644
--- a/src/app/conf/2025/faq.tsx
+++ b/src/app/conf/2025/faq.tsx
@@ -1,5 +1,6 @@
 import clsx from "clsx"
-import ArrowDown from "./pixelarticons/arrow-down.svg?svgr"
+
+import ArrowDown from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
 
 const FAQS = [
   {
diff --git a/src/app/conf/2025/page.tsx b/src/app/conf/2025/page.tsx
index 8e2371b46e..a9ce171f57 100644
--- a/src/app/conf/2025/page.tsx
+++ b/src/app/conf/2025/page.tsx
@@ -1,6 +1,6 @@
 import { Metadata } from "next"
 import { BecomeASponsor } from "./components/become-a-sponsor"
-import { Venue } from "./venue"
+import { Venue } from "./components/venue"
 import { FAQ } from "./faq"
 import { CallForProposals } from "./components/call-for-proposals"
 import { RegisterToday } from "./components/register-today"
@@ -16,6 +16,7 @@ import { CtaCardSection } from "./components/cta-card-section"
 import { Button } from "../_design-system/button"
 import { GET_TICKETS_LINK } from "./links"
 import { GalleryStrip } from "./components/gallery-strip"
+import { Testimonials } from "./components/testimonials"
 
 export const metadata: Metadata = {
   title: "GraphQLConf 2025 — Sept 08-10",
@@ -78,6 +79,7 @@ export default function Page() {
           />
           <Venue />
           <GalleryStrip />
+          <Testimonials />
           <GraphQLFoundationCard />
           <FAQ />
           <CtaCardSection
diff --git a/src/app/conf/2025/venue.tsx b/src/app/conf/2025/venue.tsx
deleted file mode 100644
index 99cd595692..0000000000
--- a/src/app/conf/2025/venue.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import {
-  BusFront,
-  ExternalLink,
-  SquareParking,
-  TicketsPlane,
-} from "lucide-react"
-import Link from "next/link"
-
-const HOTELS = [
-  {
-    name: "Mövenpick Hotel Amsterdam City Centre",
-    link: "https://movenpick.accor.com/en/europe/netherlands/amsterdam/hotel-amsterdam.html?utm_source=google&utm_medium=local&utm_campaign=hotel-MHR-Amsterdam-city-center&y_source=1_MTUzNjI2OTgtNzE1LWxvY2F0aW9uLndlYnNpdGU%3D",
-    description: `Piet Heinkade 11\n1019 BR Amsterdam, Netherlands\nPhone: <a class="typography-link" href="tel:+31 20 519 1200">+31 20 519 1200</a>`,
-  },
-  {
-    name: "Inntel Hotels Amsterdam Landmark",
-    link: "https://www.inntelhotelsamsterdamlandmark.nl/",
-    description: `VOC-kade 600\n1018 LG Amsterdam, Netherlands\nPhone: <a class="typography-link" href="tel:+31 20 227 2550">+31 20 227 2550</a>`,
-  },
-  {
-    name: "DoubleTree by Hilton Amsterdam Central Station",
-    link: "https://www.hilton.com/en/hotels/amscsdi-doubletree-amsterdam-centraal-station/?SEO_id=GMB-EMEA-DI-AMSCSDI",
-    description: `Oosterdoksstraat 4 \n1011 DK Amsterdam, Netherlands\nPhone: <a class="typography-link" href="tel:+31 20 530 0800">+31 20 530 0800</a>`,
-  },
-]
-
-const HOW_TO_GET_TO_VENUE = [
-  {
-    title: "Public Transportation",
-    description:
-      'Take tram 26 from Amsterdam Central Station to the "Kattenburgerstraat" stop. The venue is in front of the tram stop.',
-    icon: <BusFront size={16} />,
-  },
-  {
-    title: "Airport Information",
-    description:
-      "Amsterdam Airport Schiphol is about 20 km from the venue. Take a direct train to Amsterdam Central Station, then follow the public transportation instructions.",
-    icon: <TicketsPlane size={16} />,
-  },
-  {
-    title: "Parking at venue",
-    description: `Limited parking is available at the venue. We recommend using public transportation when possible. Learn more about parking at <a class="typography-link" href="https://dezwijger.nl/about-us-en/contact" target="_blank">Pakhuis de Zwijger</a>. If you require an accessible parking spot, park at Vriesseveem 4 or Withoedenveem 16 where you can park if you have a Disability Parking Card.`,
-    icon: <SquareParking size={16} />,
-  },
-]
-
-export function Venue() {
-  return (
-    <section className="gql-conf-section">
-      <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
-        <div className="typography-body-md">
-          <h2 className="mb-4 typography-h2">Venue</h2>
-          <address className="not-italic">
-            <Link
-              className="typography-link"
-              target="_blank"
-              href="https://dezwijger.nl/"
-            >
-              Pakhuis De Zwijger
-            </Link>
-            <br /> Piet Heinkade 179, 1019 HC <br />
-            Amsterdam, Netherlands
-          </address>
-          <div className="mt-6 flex flex-col gap-4">
-            <h3 className="mb-4 typography-body-lg">
-              How to get to the venue?
-            </h3>
-            {HOW_TO_GET_TO_VENUE.map(({ title, description, icon }) => (
-              <div key={title}>
-                <div className="flex flex-row items-center gap-4">
-                  <div className="bg-neu-100 p-1">{icon}</div>
-                  <h5 className="text-neu-800 typography-body-md">{title}</h5>
-                </div>
-                <p
-                  className="ml-9 max-w-lg text-pretty pl-1 typography-body-sm"
-                  dangerouslySetInnerHTML={{
-                    __html: description,
-                  }}
-                />
-              </div>
-            ))}
-          </div>
-        </div>
-
-        <div>
-          <h2 className="mb-4 typography-h2">Hotel Information</h2>
-          <p className="typography-body-md">
-            The Linux Foundation has not contracted rooms at these properties
-            and cannot guarantee rates or availability.
-          </p>
-          <div className="mt-10 flex flex-col gap-4">
-            {HOTELS.map(hotel => (
-              <address className="not-italic" key={hotel.name}>
-                <strong className="font-normal typography-body-md">
-                  <a
-                    className="flex items-center gap-1 hover:underline"
-                    target="_blank"
-                    rel="noreferrer"
-                    href={hotel.link}
-                  >
-                    {hotel.name}
-                    <ExternalLink size={14} />
-                  </a>
-                </strong>
-                <span
-                  className="whitespace-pre-wrap typography-body-sm"
-                  dangerouslySetInnerHTML={{ __html: hotel.description }}
-                />
-              </address>
-            ))}
-          </div>
-        </div>
-      </div>
-    </section>
-  )
-}
diff --git a/src/app/conf/_design-system/accordion.tsx b/src/app/conf/_design-system/accordion.tsx
new file mode 100644
index 0000000000..180be81fd7
--- /dev/null
+++ b/src/app/conf/_design-system/accordion.tsx
@@ -0,0 +1,69 @@
+"use client"
+
+import clsx from "clsx"
+
+import ArrowDown from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
+import ExternalLink from "@/app/conf/_design-system/pixelarticons/external-link.svg?svgr"
+
+import { Anchor } from "./anchor"
+
+export interface AccordionItem {
+  title: string
+  description: React.ReactNode
+  link?: string
+}
+
+export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
+  items: AccordionItem[]
+  multiple?: boolean
+}
+
+export function Accordion({
+  items,
+  multiple = false,
+  className,
+  ...rest
+}: AccordionProps) {
+  return (
+    <div className={clsx("grow space-y-4", className)} {...rest}>
+      {items.map((item, index) => (
+        <details
+          open={index === 0}
+          key={index}
+          className="group/q w-full border border-sec-darker @container dark:border-sec-dark"
+          onClick={event => {
+            if (!multiple) {
+              const allDetails =
+                event.currentTarget.parentElement?.querySelectorAll("details")
+              if (allDetails) {
+                allDetails.forEach(details => {
+                  if (details !== event.currentTarget) {
+                    details.open = false
+                  }
+                })
+              }
+            }
+          }}
+        >
+          <summary className="flex cursor-pointer list-none items-center justify-between gap-2 border-sec-darker p-2 px-3 focus:outline-none group-open/q:border-b dark:border-sec-dark [&::-webkit-details-marker]:hidden">
+            <span className="select-none typography-body-lg">{item.title}</span>
+            <ArrowDown className="size-10 shrink-0 text-sec-darker group-open/q:rotate-180" />
+          </summary>
+          <div className="flex items-start p-3">
+            <div className="text-pretty typography-body-md">
+              {item.description}
+            </div>
+            {item.link && (
+              <Anchor
+                href={item.link}
+                className="ml-auto p-2 hover:bg-neu-800/10"
+              >
+                <ExternalLink className="size-6" />
+              </Anchor>
+            )}
+          </div>
+        </details>
+      ))}
+    </div>
+  )
+}
diff --git a/src/app/conf/2025/pixelarticons/arrow-down.svg b/src/app/conf/_design-system/pixelarticons/arrow-down.svg
similarity index 100%
rename from src/app/conf/2025/pixelarticons/arrow-down.svg
rename to src/app/conf/_design-system/pixelarticons/arrow-down.svg
diff --git a/src/app/conf/2025/pixelarticons/calendar-icon.tsx b/src/app/conf/_design-system/pixelarticons/calendar-icon.tsx
similarity index 100%
rename from src/app/conf/2025/pixelarticons/calendar-icon.tsx
rename to src/app/conf/_design-system/pixelarticons/calendar-icon.tsx
diff --git a/src/app/conf/2025/pixelarticons/chevron-right.tsx b/src/app/conf/_design-system/pixelarticons/chevron-right.tsx
similarity index 100%
rename from src/app/conf/2025/pixelarticons/chevron-right.tsx
rename to src/app/conf/_design-system/pixelarticons/chevron-right.tsx
diff --git a/src/app/conf/2025/pixelarticons/close.svg b/src/app/conf/_design-system/pixelarticons/close.svg
similarity index 100%
rename from src/app/conf/2025/pixelarticons/close.svg
rename to src/app/conf/_design-system/pixelarticons/close.svg
diff --git a/src/app/conf/2025/pixelarticons/code.svg b/src/app/conf/_design-system/pixelarticons/code.svg
similarity index 100%
rename from src/app/conf/2025/pixelarticons/code.svg
rename to src/app/conf/_design-system/pixelarticons/code.svg
diff --git a/src/app/conf/_design-system/pixelarticons/external-link.svg b/src/app/conf/_design-system/pixelarticons/external-link.svg
new file mode 100644
index 0000000000..f049b87933
--- /dev/null
+++ b/src/app/conf/_design-system/pixelarticons/external-link.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+  <path
+    d="M11 7H5V19H17V13H19V21H3V5H11V7ZM11 15H9V13H11V15ZM13 13H11V11H13V13ZM15 11H13V9H15V11ZM21 11H19V7H17V5H13V3H21V11ZM17 9H15V7H17V9Z"
+  />
+</svg>
diff --git a/src/app/conf/2025/pixelarticons/menu.svg b/src/app/conf/_design-system/pixelarticons/menu.svg
similarity index 100%
rename from src/app/conf/2025/pixelarticons/menu.svg
rename to src/app/conf/_design-system/pixelarticons/menu.svg
diff --git a/src/app/conf/2025/pixelarticons/pin-icon.tsx b/src/app/conf/_design-system/pixelarticons/pin-icon.tsx
similarity index 100%
rename from src/app/conf/2025/pixelarticons/pin-icon.tsx
rename to src/app/conf/_design-system/pixelarticons/pin-icon.tsx
diff --git a/src/app/conf/_design-system/stripes-decoration.tsx b/src/app/conf/_design-system/stripes-decoration.tsx
index c4ac506fd9..8d03825612 100644
--- a/src/app/conf/_design-system/stripes-decoration.tsx
+++ b/src/app/conf/_design-system/stripes-decoration.tsx
@@ -1,43 +1,39 @@
 import clsx from "clsx"
 
-const maskEvenWide =
-  "repeating-linear-gradient(to right, transparent, transparent 12px, black 12px, black 24px)"
+const maskEven =
+  "repeating-linear-gradient(to right, transparent, transparent var(--stripe-width), black var(--stripe-width), black calc(var(--stripe-width) * 2))"
 
-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)"
+const maskOdd =
+  "repeating-linear-gradient(to right, black, black var(--stripe-width), transparent var(--stripe-width), transparent calc(var(--stripe-width) * 2))"
 
 export interface StripesDecorationProps {
   evenClassName?: string
   oddClassName?: string
-  thin?: boolean
+  stripeWidth?: string
 }
 
-export function StripesDecoration(props: StripesDecorationProps) {
-  const [maskEven, maskOdd] = props.thin
-    ? [maskEvenThin, maskOddThin]
-    : [maskEvenWide, maskOddWide]
-
+export function StripesDecoration({
+  stripeWidth = "12px",
+  evenClassName,
+  oddClassName,
+}: StripesDecorationProps) {
   return (
     <>
-      {props.evenClassName && (
+      {evenClassName && (
         <div
-          className={clsx("absolute inset-0", props.evenClassName)}
+          className={clsx("absolute inset-0", evenClassName)}
           style={{
+            ...({ "--stripe-width": stripeWidth } as React.CSSProperties),
             maskImage: maskEven,
             WebkitMaskImage: maskEven,
           }}
         />
       )}
-      {props.oddClassName && (
+      {oddClassName && (
         <div
-          className={clsx("absolute inset-0", props.oddClassName)}
+          className={clsx("absolute inset-0", oddClassName)}
           style={{
+            ...({ "--stripe-width": stripeWidth } as React.CSSProperties),
             maskImage: maskOdd,
             WebkitMaskImage: maskOdd,
           }}