mobile partners

Author: tannerlinsley

AGENTS.md

@@ -156,34 +156,41 @@ Since `listRoles` is wrapped in `createServerFn`, TanStack Start will properly h
 
 ## Development & Build Commands
 
-### Use `build` for Testing Build Output
+### Don't Build After Every Change
 
-**The `dev` command does not end - it runs indefinitely in watch mode.**
+**Do not run builds after every change, especially for visual changes.**
 
-When agents need to test build output or verify that the project builds successfully, use the `build` command instead of `dev`. The `build` command will complete and exit, making it suitable for automated testing and verification.
+This is a visual website, not a library. Assume changes work unless the user reports otherwise. Running builds after every change wastes time and context.
 
-### Testing Limitations
+### Debugging Visual Issues
 
-**Agents cannot run end-to-end tests without a headless browser.**
+When the user reports something doesn't work or look right:
 
-This is a TanStack Start application that requires a browser environment to fully test. Agents can:
+1. Use the Playwright MCP to view the page and debug visually
+2. Use builds (`pnpm build`) only when investigating build/bundler issues
+3. Use TypeScript compilation (`pnpm tsc --noEmit`) for type errors
 
-- ✅ Run TypeScript compilation (`pnpm tsc --noEmit`) to check for type errors
-- ✅ Run the build command (`pnpm build`) to verify the project builds successfully
-- ✅ Inspect build output and generated files
+### Use `build` for Build-Specific Issues
 
-Agents cannot:
+**The `dev` command does not end, it runs indefinitely in watch mode.**
 
-- ❌ Start the dev server and interact with the application (no headless browser)
-- ❌ Test UI functionality or user interactions
-- ❌ Verify runtime behavior in the browser
-- ❌ Test API endpoints that require browser context
+Only use `build` when:
 
-For runtime testing and verification, developers should:
+- Investigating bundler or build-time errors
+- Verifying production output
+- The user specifically asks to verify the build
 
-1. Review the code changes
-2. Start the dev server manually (`pnpm dev`)
-3. Test the functionality in a browser
+### Testing with Playwright
+
+**Use the Playwright MCP for visual debugging and verification.**
+
+When debugging issues or verifying visual changes work correctly:
+
+- Navigate to the relevant page using Playwright
+- Take snapshots or screenshots to verify the UI
+- Interact with elements to test functionality
+
+This is the preferred method for verifying visual changes since this is a visual site.
 
 ## UI Style Guide 2026
 

src/components/DocsLayout.tsx

@@ -19,6 +19,102 @@ import { FrameworkSelect, useCurrentFramework } from './FrameworkSelect'
 import { VersionSelect } from './VersionSelect'
 import { Card } from './Card'
 
+// Mobile partners strip - inline in the docs toggle bar
+function MobilePartnersStrip({
+  partners,
+  onLabelClick,
+}: {
+  partners: Array<{
+    name: string
+    href: string
+    image: Parameters<typeof PartnerImage>[0]['config']
+  }>
+  onLabelClick?: () => void
+}) {
+  const innerRef = React.useRef<HTMLDivElement>(null)
+  const [isHovered, setIsHovered] = React.useState(false)
+
+  React.useEffect(() => {
+    const inner = innerRef.current
+    if (!inner) return
+
+    let animationId: number
+    let timeoutId: ReturnType<typeof setTimeout>
+    let scrollPosition = 0
+    const scrollSpeed = 0.08 // pixels per frame - very slow
+    const startDelay = 4000 // wait 4 seconds before starting
+
+    const animate = () => {
+      if (!isHovered && inner) {
+        scrollPosition += scrollSpeed
+        // Reset when we've scrolled past the first set
+        if (scrollPosition >= inner.scrollWidth / 2) {
+          scrollPosition = 0
+        }
+        inner.style.transform = `translateX(${-scrollPosition}px)`
+      }
+      animationId = requestAnimationFrame(animate)
+    }
+
+    timeoutId = setTimeout(() => {
+      animationId = requestAnimationFrame(animate)
+    }, startDelay)
+
+    return () => {
+      clearTimeout(timeoutId)
+      cancelAnimationFrame(animationId)
+    }
+  }, [isHovered])
+
+  return (
+    <div
+      className="flex-1 flex items-center gap-2 min-w-0"
+      onClick={(e) => e.preventDefault()}
+    >
+      <button
+        type="button"
+        className="text-[9px] uppercase tracking-wide font-medium text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 shrink-0"
+        onClick={(e) => {
+          e.stopPropagation()
+          onLabelClick?.()
+        }}
+      >
+        Partners
+      </button>
+      <div
+        className="relative flex-1 overflow-hidden min-w-0"
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        onTouchStart={() => setIsHovered(true)}
+        onTouchEnd={() => setIsHovered(false)}
+      >
+        <div className="overflow-hidden">
+          <div
+            ref={innerRef}
+            className="flex items-center gap-4 w-max py-1 will-change-transform"
+          >
+            {/* Duplicate partners for seamless loop */}
+            {[...partners, ...partners].map((partner, i) => (
+              <a
+                key={`${partner.name}-${i}`}
+                href={partner.href}
+                target="_blank"
+                rel="noreferrer"
+                className="shrink-0 flex items-center opacity-50 hover:opacity-100 transition-opacity"
+                onClick={(e) => e.stopPropagation()}
+              >
+                <div className="h-4 flex items-center [&_img]:h-full [&_img]:w-auto [&_div]:h-full">
+                  <PartnerImage config={partner.image} alt={partner.name} />
+                </div>
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
 // Component for the collapsed menu strip showing box indicators
 // Minimap style: boxes with flex height filling available vertical space
 function DocsMenuStrip({
@@ -496,11 +592,21 @@ export function DocsLayout({
         id="docs-details"
         className="border-b border-gray-500/20"
       >
-        <summary className="py-2 px-4 flex gap-2 items-center justify-between">
-          <div className="flex-1 flex gap-4 items-center">
+        <summary className="py-2 px-4 flex gap-2 items-center">
+          <div className="flex gap-2 items-center shrink-0 pr-2">
             <Menu className="cursor-pointer" />
-            Documentation
+            Docs
           </div>
+          <div className="w-px h-6 bg-gray-300 dark:bg-gray-600 shrink-0" />
+          <MobilePartnersStrip
+            partners={activePartners}
+            onLabelClick={() => {
+              const details = detailsRef.current as HTMLDetailsElement | null
+              if (details) {
+                details.open = !details.open
+              }
+            }}
+          />
         </summary>
         <div className="flex flex-col gap-4 p-4 overflow-y-auto border-t border-gray-500/20 bg-white/20 text-lg dark:bg-black/20">
           <div className="flex flex-col gap-1">

src/components/TrustedByMarquee.tsx

@@ -36,6 +36,10 @@ export function TrustedByMarquee({
         Trusted in Production by
       </div>
       <div className="relative w-full">
+        {/* Left fade */}
+        <div className="absolute left-0 top-0 bottom-0 w-16 bg-gradient-to-r from-white dark:from-black to-transparent z-10 pointer-events-none" />
+        {/* Right fade */}
+        <div className="absolute right-0 top-0 bottom-0 w-16 bg-gradient-to-l from-white dark:from-black to-transparent z-10 pointer-events-none" />
         <div
           className="flex gap-8 items-center whitespace-nowrap will-change-transform animate-[marquee_linear_infinite]"
           style={{