docs: change sponsor display to Open Collective

Author: soartec-lab

docs/src/pages/index.tsx

@@ -263,27 +263,85 @@ my-app
             <h3 className="text-2xl md:text-5xl mx-auto leading-tight font-extrabold tracking-tight   lg:leading-none mt-2">
               Thanks for the support, guys! 🍻
             </h3>
-            <div className="flex flex-wrap justify-center mt-8">
-              {sponsors.map((sponsor) => (
+
+            {/* Sponsors Section */}
+            <div className="mt-12">
+              <h4 className="text-lg font-semibold text-gray-700 mb-6">
+                Sponsors
+              </h4>
+              <div className="flex justify-center items-center">
+                <a
+                  href="https://opencollective.com/orval"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="opacity-60 hover:opacity-100 transition-opacity"
+                >
+                  <img
+                    className="h-40 w-auto grayscale hover:grayscale-0 transition-all"
+                    src="/images/orval-logo-horizontal.svg"
+                    alt="Sample Sponsor"
+                    title="Sample Sponsor"
+                  />
+                </a>
+              </div>
+            </div>
+
+            {/* Backers Section */}
+            <div className="mt-12">
+              <h4 className="text-lg font-semibold text-gray-700 mb-6">
+                Backers
+              </h4>
+              <div className="flex flex-wrap justify-center items-center gap-4">
+                <a
+                  href="https://opencollective.com/orval"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="opacity-60 hover:opacity-100 transition-opacity"
+                >
+                  <img
+                    className="h-20 w-20 rounded-full grayscale hover:grayscale-0 transition-all"
+                    src="/images/emblem.svg"
+                    alt="Sample Backer"
+                    title="Sample Backer"
+                  />
+                </a>
+                <a
+                  href="https://opencollective.com/orval"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="opacity-60 hover:opacity-100 transition-opacity"
+                >
+                  <img
+                    className="h-20 w-20 rounded-full grayscale hover:grayscale-0 transition-all"
+                    src="/images/emblem.svg"
+                    alt="Sample Backer"
+                    title="Sample Backer"
+                  />
+                </a>
                 <a
-                  key={sponsor.login}
+                  href="https://opencollective.com/orval"
                   target="_blank"
-                  href={`https://github.com/${sponsor.login}`}
+                  rel="noopener noreferrer"
+                  className="opacity-60 hover:opacity-100 transition-opacity"
                 >
                   <img
-                    className="w-10 h-10 m-1 rounded-full"
-                    src={sponsor.avatarUrl}
+                    className="h-20 w-20 rounded-full grayscale hover:grayscale-0 transition-all"
+                    src="/images/emblem.svg"
+                    alt="Sample Backer"
+                    title="Sample Backer"
                   />
                 </a>
-              ))}
+              </div>
             </div>
+
             <div className="inline-flex rounded-md shadow-sm mt-12">
               <a
-                href="https://github.com/sponsors/anymaniax"
+                href="https://opencollective.com/orval"
                 target="_blank"
+                rel="noopener noreferrer"
                 className="inline-flex items-center justify-center text-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-coral-default hover:bg-coral-light focus:outline-hidden focus:shadow-outline transition duration-150 ease-in-out"
               >
-                Become a sponsor
+                Support us on Open Collective
               </a>
             </div>
           </div>