first commit

src/components/WorkTogetherSlider.jsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+export default function WorkTogetherSlider() {
+  const ticker = "Let's 👋 Work Together · Let's 👋 Work Together ·";
+
+  return (
+    <section
+      className="max-w-full"
+      aria-labelledby="work-together-slider-heading"
+    >
+      <h2 id="work-together-slider-heading" className="sr-only">
+        Work Together Call-to-Action
+      </h2>
+
+      {/* Full-width clickable viewport */}
+      <Link
+        to="/contact"
+        className="group block"
+        aria-label="Contact me — Let's work together"
+      >
+        <div
+          className="relative h-16 overflow-hidden rounded-lg bg-[var(--card)]
+                     border border-[var(--border)] text-[var(--text)]
+                     focus:outline-none focus-visible:ring focus-visible:ring-blue-500"
+          tabIndex={-1}
+          aria-hidden="true" /* hide animated content; static label below */
+        >
+          {/* Absolutely positioned track so it can't expand layout width */}
+          <div className="marquee absolute inset-0 flex items-center will-change-transform group-hover:[animation-play-state:paused] group-focus-within:[animation-play-state:paused]">
+            <p className="px-4 text-3xl shrink-0">{ticker}</p>
+            {/* duplicate for seamless loop */}
+            <p className="px-4 text-3xl shrink-0" aria-hidden="true">
+              {ticker}
+            </p>
+          </div>
+        </div>
+
+        {/* Static equivalent for screen readers */}
+        <span className="sr-only">Let’s work together — contact me</span>
+      </Link>
+
+      {/* Local styles for the marquee */}
+      <style>{`
+        @keyframes marquee-x {
+          0% { transform: translateX(0); }
+          100% { transform: translateX(-50%); } /* slides past the first copy */
+        }
+        .marquee {
+          animation: marquee-x 18s linear infinite;
+          white-space: nowrap;
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .marquee { animation: none !important; transform: none !important; }
+        }
+      `}</style>
+    </section>
+  );
+}