Add stream of consciousness live activity ticker

app/(marketing)/page.tsx

@@ -17,6 +17,7 @@ import { HowItWorks } from "./_sections/how-it-works";
 import { WalletsTokens } from "@/components/sections/wallets-token";
 import { AnimatedBackground } from "@/components/ui/animated-background";
 import Navbar from "./_components/navbar";
+import { LiveTicker } from "@/app/components/LiveTicker";
 import KpiStrip from "./_sections/kpi-strip";
 import { CTA } from "./_sections/cta";
 import { useParallax } from "@/hooks/use-parallax";
@@ -34,6 +35,7 @@ export default function MarketingRoute() {
       </div>
       <AnimatedBackground />
       <Navbar />
+      <LiveTicker />
       <Hero />
       <KpiStrip />
       <Features />

app/components/LiveTicker.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+
+interface TickerEvent {
+  id: string;
+  text: string;
+  timestamp: string;
+}
+
+const mockEvents: TickerEvent[] = [
+  { id: "1", text: "User 0x4F... placed 500 XLM on 'ETH > $4K'", timestamp: "1m ago" },
+  { id: "2", text: "New Market created: US Elections 2028", timestamp: "3m ago" },
+  { id: "3", text: "Market 'Super Bowl LIX' resolved to 'Chiefs'", timestamp: "5m ago" },
+  { id: "4", text: "User 0xA1... claimed 1,200 XLM reward", timestamp: "12m ago" },
+  { id: "5", text: "Dispute opened on 'SpaceX Mars Mission'", timestamp: "15m ago" },
+  { id: "6", text: "User 0x9B... predicted Yes on 'Stellar Protocol 22'", timestamp: "18m ago" },
+];
+
+export function LiveTicker() {
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setPrefersReducedMotion(mediaQuery.matches);
+
+    const handler = (e: MediaQueryListEvent) => setPrefersReducedMotion(e.matches);
+
+    if (typeof mediaQuery.addEventListener === 'function') {
+      mediaQuery.addEventListener("change", handler);
+      return () => mediaQuery.removeEventListener("change", handler);
+    } else {
+      mediaQuery.addListener(handler);
+      return () => mediaQuery.removeListener(handler);
+    }
+  }, []);
+
+  if (prefersReducedMotion) {
+    return (
+      <div 
+        className="w-full bg-primary/5 border-b border-primary/10 py-2 px-4 flex items-center justify-center overflow-hidden"
+        role="region"
+        aria-label="Recent Market Activity"
+      >
+        <div className="text-sm text-muted-foreground flex items-center gap-2">
+          <span className="relative flex h-2 w-2">
+            <span className="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
+          </span>
+          <span className="font-semibold text-foreground">Live Activity:</span>
+          <span>{mockEvents[0].text}</span>
+          <span className="text-xs opacity-60 ml-1">({mockEvents[0].timestamp})</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div 
+      className="w-full bg-primary/5 border-b border-primary/10 py-2 flex items-center overflow-hidden whitespace-nowrap relative"
+      aria-hidden="true" 
+      data-testid="live-ticker-marquee"
+    >
+      {/* Gradient edges for smooth fade out */}
+      <div className="absolute left-0 top-0 bottom-0 w-8 bg-gradient-to-r from-background to-transparent z-10"></div>
+      <div className="absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-background to-transparent z-10"></div>
+
+      <div className="flex animate-marquee hover:[animation-play-state:paused]">
+        {mockEvents.map((event) => (
+          <div key={event.id} className="flex items-center gap-2 text-sm text-muted-foreground pr-8">
+            <span className="relative flex h-2 w-2">
+              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
+              <span className="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
+            </span>
+            <span>{event.text}</span>
+            <span className="text-xs opacity-60">{event.timestamp}</span>
+          </div>
+        ))}
+      </div>
+      <div className="flex animate-marquee hover:[animation-play-state:paused]" aria-hidden="true">
+        {mockEvents.map((event) => (
+          <div key={`dup-${event.id}`} className="flex items-center gap-2 text-sm text-muted-foreground pr-8">
+            <span className="relative flex h-2 w-2">
+              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
+              <span className="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
+            </span>
+            <span>{event.text}</span>
+            <span className="text-xs opacity-60">{event.timestamp}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

app/components/__tests__/LiveTicker.test.tsx

@@ -0,0 +1,59 @@
+import { render, screen } from "@testing-library/react";
+import { LiveTicker } from "../LiveTicker";
+import "@testing-library/jest-dom";
+
+const setReducedMotion = (matches: boolean) => {
+  window.matchMedia = jest.fn().mockImplementation((query: string) => ({
+    matches: query === "(prefers-reduced-motion: reduce)" ? matches : false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  }));
+};
+
+describe("LiveTicker", () => {
+  beforeEach(() => {
+    setReducedMotion(false);
+  });
+
+  describe("Normal Motion", () => {
+    it("renders the continuous marquee container when reduced motion is disabled", () => {
+      render(<LiveTicker />);
+
+      const tickerContainer = screen.getByTestId("live-ticker-marquee");
+      expect(tickerContainer).toBeInTheDocument();
+      expect(tickerContainer).toHaveAttribute("aria-hidden", "true");
+
+      const marqueeElements = document.querySelectorAll(".animate-marquee");
+      expect(marqueeElements.length).toBeGreaterThanOrEqual(2);
+    });
+
+    it("displays the mock events", () => {
+      render(<LiveTicker />);
+      const events = screen.getAllByText(/User 0x4F\.\.\. placed 500 XLM/i);
+      expect(events.length).toBeGreaterThanOrEqual(1);
+    });
+  });
+
+  describe("Reduced Motion", () => {
+    it("falls back to a static accessible region when reduced motion is enabled", () => {
+      setReducedMotion(true);
+      render(<LiveTicker />);
+
+      expect(screen.queryByTestId("live-ticker-marquee")).not.toBeInTheDocument();
+
+      const region = screen.getByRole("region", { name: "Recent Market Activity" });
+      expect(region).toBeInTheDocument();
+
+      const eventText = screen.getByText(/User 0x4F\.\.\. placed 500 XLM/i);
+      expect(eventText).toBeInTheDocument();
+
+      const staticLabel = screen.getByText(/Live Activity:/i);
+      expect(staticLabel).toBeInTheDocument();
+    });
+  });
+});

components/disputes/shared/CountdownTimer.tsx

@@ -6,13 +6,15 @@ import { cn } from '@/lib/utils';
 interface CountdownTimerProps {
   deadline: Date;
   label?: string;
+
 }
 
 interface TimeLeft {
   days: number;
   hours: number;
   minutes: number;
   seconds: number;
+
 }
 
 function computeTimeLeft(deadline: Date): TimeLeft | null {
@@ -55,6 +57,7 @@ function buildAnnouncement(t: TimeLeft): string {
 
   if (parts.length === 0) return 'Less than one second remaining';
   return `${parts.join(', ')} remaining`;
+
 }
 
 /**
@@ -119,6 +122,7 @@ export function CountdownTimer({ deadline, label }: CountdownTimerProps) {
   const [expired, setExpired] = useState<boolean>(() => {
     if (!isValidDate(deadline)) return false;
     return deadline.getTime() <= Date.now();
+
   });
 
   // The string the aria-live region currently shows. Updates only at coarse
@@ -210,9 +214,12 @@ export function CountdownTimer({ deadline, label }: CountdownTimerProps) {
       >
         {visibleLabel}
       </span>
-      <span className="sr-only" aria-live="polite" aria-atomic="true">
-        {announcement}
-      </span>
+      {/* Avoid duplicate text and unnecessary live region updates when reduced motion is preferred */}
+      {!prefersReducedMotion && (
+        <span className="sr-only" aria-live="polite" aria-atomic="true">
+          {announcement}
+        </span>
+      )}
     </div>
   );
 }

components/disputes/shared/__tests__/CountdownTimer.test.tsx

@@ -200,6 +200,7 @@ describe('CountdownTimer', () => {
       const liveRegion = container.querySelector('[aria-live="polite"]');
       expect(liveRegion?.textContent).toBe('Deadline passed');
     });
+
   });
 
   describe('reduced motion', () => {
@@ -222,6 +223,7 @@ describe('CountdownTimer', () => {
       const countdownEl = screen.getByText(/seconds remaining/);
       expect(countdownEl).toHaveClass('text-destructive');
       expect(countdownEl).not.toHaveClass('animate-pulse');
+
     });
   });
 });

tailwind.config.ts

@@ -124,11 +124,16 @@ const config: Config = {
   				to: {
   					height: '0'
   				}
+  			},
+  			'marquee': {
+  				from: { transform: 'translateX(0)' },
+  				to: { transform: 'translateX(-100%)' }
   			}
   		},
   		animation: {
   			'accordion-down': 'accordion-down 0.2s ease-out',
-  			'accordion-up': 'accordion-up 0.2s ease-out'
+  			'accordion-up': 'accordion-up 0.2s ease-out',
+  			'marquee': 'marquee 30s linear infinite'
   		}
   	}
   },