Add partners section

src/components/partners-marquee/partners-marquee.tsx

@@ -0,0 +1,48 @@
+import { Marquee } from "../ui/marquee";
+
+export function PartnersMarquee() {
+  const partners = [
+    {
+      name: "Conductor Orchestra",
+      logo: "https://t3.ftcdn.net/jpg/05/71/43/76/360_F_571437617_ZNppyF5qpbJn9dYifhjWEQkgjbZNBXP9.jpg",
+    },
+    {
+      name: "Chicago Symphony Orchestra",
+      logo: "https://upload.wikimedia.org/wikipedia/commons/1/1f/Wiki-CSO_logo2024_stacked-whitebg.png",
+    },
+    {
+      name: "Toronto Symphony Orchestra",
+      logo: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSfThsC3B2BGCKjnyr_IMiJmp-0jI9I9blZrw&s",
+    },
+    {
+      name: "Los Angeles Chamber Orchestra",
+      logo: "https://admin.itsnicethat.com/images/TOHFR2DIydoDTaGM6NbfVRFZfJU=/168760/format-webp%7Cwidth-2880/5d947a047fa44cbd2200fd0f.jpg",
+    },
+    {
+      name: "Richmond Symphony Orchestra",
+      logo: "https://richmondsymphony.org/wp-content/uploads/2021/07/rso-logo-2023.png",
+    },
+  ];
+
+  return (
+    <div className="relative flex w-full flex-col items-center justify-center overflow-hidden">
+      <Marquee>
+        {partners.map((partner) => (
+          <div
+            key={partner.name}
+            className="flex flex-col items-center justify-center p-4 bg-white border-2 border-gray-300 rounded-lg shadow-md"
+          >
+            <img
+              src={partner.logo}
+              alt={`${partner.name} logo`}
+              className="max-h-24"
+            />
+            <p>{partner.name}</p>
+          </div>
+        ))}
+      </Marquee>
+      <div className="from-background pointer-events-none absolute inset-y-0 left-0 w-4 bg-linear-to-r"></div>
+      <div className="from-background pointer-events-none absolute inset-y-0 right-0 w-4 bg-linear-to-l"></div>
+    </div>
+  );
+}