first commit

src/components/partners.tsx

@@ -0,0 +1,45 @@
+import { Reveal } from "@/components/reveal";
+
+const partners = Array.from({ length: 6 }, (_, i) => ({
+  id: i,
+  name: "Company Name",
+  tagline: "Partnership placeholder",
+}));
+
+function PartnerIcon() {
+  return (
+    <svg viewBox="0 0 24 24" className="size-7 shrink-0 fill-current" aria-hidden>
+      <rect x="3" y="3" width="7" height="7" rx="1.5" transform="rotate(12 6.5 6.5)" />
+      <rect x="14" y="3" width="7" height="7" rx="1.5" transform="rotate(-12 17.5 6.5)" />
+      <rect x="3" y="14" width="7" height="7" rx="1.5" />
+      <rect x="14" y="14" width="7" height="7" rx="1.5" transform="rotate(20 17.5 17.5)" />
+    </svg>
+  );
+}
+
+export function Partners() {
+  return (
+    <section aria-label="Partners" className="relative py-10 lg:py-14">
+      <Reveal className="overflow-hidden [mask-image:linear-gradient(90deg,transparent,#000_8%,#000_92%,transparent)]">
+        {/* List rendered twice so translating -50% loops seamlessly */}
+        <div className="flex w-max animate-marquee hover:[animation-play-state:paused]">
+          {[0, 1].map((copy) => (
+            <ul key={copy} aria-hidden={copy === 1} className="flex shrink-0">
+              {partners.map((p) => (
+                <li className="group flex items-center gap-3 px-8 transition-opacity duration-300 sm:px-12" key={p.id}>
+                  <span className="text-foreground/70 transition-colors duration-300 group-hover:text-accent">
+                    <PartnerIcon />
+                  </span>
+                  <div className="leading-tight">
+                    <p className="text-sm font-semibold text-foreground">{p.name}</p>
+                    <p className="text-sm text-muted">{p.tagline}</p>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          ))}
+        </div>
+      </Reveal>
+    </section>
+  );
+}