Design QA changes

src/app/conf/2025/components/testimonials/index.tsx

@@ -75,10 +75,11 @@ export function TestimonialsList({
   return (
     <div
       className={clsx(
-        "flex w-full flex-row gap-10 overflow-x-auto px-4 py-6 lg:mt-16 lg:py-16",
+        "nextra-scrollbar relative flex w-full flex-row gap-10 overflow-x-auto px-4 py-6 [scroll-snap-type:x_mandatory] lg:mt-16 lg:py-16",
         className,
       )}
     >
+      <div className="scroll-start-x scroll-start-x-[20%] [@media(width<=1840px)]:hidden" />
       {testimonials.map((testimonial, i) => (
         <div
           key={i}

src/components/footer/index.tsx

@@ -116,7 +116,7 @@ export function Footer() {
     <footer className="relative !bg-neu-100 text-neu-900 dark:!bg-neu-0 max-md:px-0 max-md:pt-0">
       <Stripes />
 
-      <div className="mx-auto max-w-[120rem] border-neu-400 dark:border-neu-100 3xl:border-x">
+      <div className="mx-auto max-w-[120rem] border-neu-400 dark:border-neu-100 3xl:border-x 3xl:dark:border-t">
         <div className="flex flex-wrap justify-between gap-4 p-4 max-md:w-full md:p-6 2xl:px-10">
           <NextLink href="/" className="nextra-logo flex items-center">
             <GraphQLWordmarkLogo className="h-6" title="GraphQL" />

src/components/index-page/use-cases/index.tsx

@@ -139,7 +139,9 @@ export function UseCases({
                   id={`graphql-use-case-${i}`}
                   className={clsx(
                     "relative h-full flex-1 p-8 lg:p-12 xl:p-16",
-                    selectedIndex === i ? "border-b border-sec-dark" : "hidden",
+                    selectedIndex === i
+                      ? "border-sec-dark max-lg:border-b"
+                      : "hidden",
                   )}
                 >
                   <div className="relative z-10 my-auto max-h-[528px] max-w-2xl">

tailwind.config.ts

@@ -201,6 +201,7 @@ const config: Config = {
       })
     }),
     tailwindMediaHover(),
+    scrollStartPlugin(),
     browserPlugin,
   ],
   darkMode: ["class", 'html[class~="dark"]'],
@@ -214,3 +215,82 @@ function tailwindMediaHover() {
     addVariant("hover-none", "@media (hover: none)")
   })
 }
+
+function scrollStartPlugin() {
+  return plugin(({ addBase, matchUtilities, theme }) => {
+    addBase({
+      "@keyframes --scroll-start-snap-y": {
+        to: { width: "0" },
+      },
+      "@keyframes --scroll-start-snap-x": {
+        to: { height: "0" },
+      },
+    })
+
+    addBase({
+      ".scroll-start-y": {
+        position: "absolute",
+        width: "1px",
+        top: "var(--scroll-start-y)",
+        containerType: "size",
+        visibility: "hidden",
+        animation: "--scroll-start-snap-y 0.01s both",
+      },
+      ".scroll-start-y::before": {
+        content: '""',
+        height: "1px",
+        display: "block",
+      },
+      "@container (width: 1px)": {
+        ".scroll-start-y::before": {
+          scrollSnapAlign: "start",
+        },
+      },
+    })
+
+    addBase({
+      ".scroll-start-x": {
+        position: "absolute",
+        height: "1px",
+        left: "var(--scroll-start-x)",
+        containerType: "size",
+        visibility: "hidden",
+        animation: "--scroll-start-snap-x 0.01s both",
+      },
+      ".scroll-start-x::before": {
+        content: '""',
+        width: "1px",
+        display: "block",
+      },
+      "@container (height: 1px)": {
+        ".scroll-start-x::before": {
+          scrollSnapAlign: "start",
+        },
+      },
+    })
+
+    matchUtilities(
+      {
+        "scroll-start-y": value => ({
+          "--scroll-start-y": value,
+        }),
+      },
+      {
+        values: theme("spacing"),
+        type: ["length", "percentage"],
+      },
+    )
+
+    matchUtilities(
+      {
+        "scroll-start-x": value => ({
+          "--scroll-start-x": value,
+        }),
+      },
+      {
+        values: theme("spacing"),
+        type: ["length", "percentage"],
+      },
+    )
+  })
+}