Improve donate Call To Action (#10777)

* add a 'donate' page to the site

* remove offer to pay expenses

* remove suggested amount from repo CTAs

.github/ISSUE_TEMPLATE/1_Bug_report.yml

@@ -41,4 +41,4 @@ body:
     attributes:
       value: |
         ## :heart: Love Shields?
-        Please consider donating $10 to sustain our activities: [https://opencollective.com/shields](https://opencollective.com/shields)
+        Please consider donating to sustain our activities: [https://opencollective.com/shields](https://opencollective.com/shields)

.github/ISSUE_TEMPLATE/2_Failing_service_test.md

@@ -28,5 +28,5 @@ labels: 'keep-service-tests-green'
 
 <!--- Optional: only if you have suggestions on a fix/reason for the bug -->
 
-<!-- Love Shields? Please consider donating $10 to sustain our activities:
+<!-- Love Shields? Please consider donating to sustain our activities:
 👉  https://opencollective.com/shields -->

.github/ISSUE_TEMPLATE/3_Badge_request.yml

@@ -59,4 +59,4 @@ body:
     attributes:
       value: |
         ## :heart: Love Shields?
-        Please consider donating $10 to sustain our activities: [https://opencollective.com/shields](https://opencollective.com/shields)
+        Please consider donating to sustain our activities: [https://opencollective.com/shields](https://opencollective.com/shields)

.github/ISSUE_TEMPLATE/4_Feature_request.md

@@ -7,5 +7,5 @@ about: Ideas for other new features or improvements
 
 <!-- A clear and concise description of the new feature. -->
 
-<!-- Love Shields? Please consider donating $10 to sustain our activities:
+<!-- Love Shields? Please consider donating to sustain our activities:
 👉  https://opencollective.com/shields -->

CONTRIBUTING.md

@@ -8,10 +8,7 @@ financial contributions, issues, and pull requests!
 ### Financial contributions
 
 We welcome financial contributions in full transparency on our
-[open collective](https://opencollective.com/shields). Anyone can file an
-expense. If the expense makes sense for the development of the community, it
-will be "merged" into the ledger of our open collective by the core
-contributors and the person who filed the expense will be reimbursed.
+[open collective](https://opencollective.com/shields).
 
 ### Contributing code
 
@@ -90,7 +87,7 @@ encourage you to contribute logos there. Please review their
 
 Feel free to star the repository. This will help increase the visibility of the project, therefore attracting more users and contributors to Shields!
 
-We're also asking for [one-time \$10 donations](https://opencollective.com/shields) from developers who use and love Shields, please spread the word!
+We're also asking for [donations](https://opencollective.com/shields) from developers who use and love Shields, please spread the word!
 
 ## Getting help
 

frontend/docusaurus.config.cjs

@@ -77,6 +77,7 @@ const config = {
             label: 'Documentation',
             position: 'left',
           },
+          { to: '/donate', label: 'Donate', position: 'left' },
           { to: '/community', label: 'Community', position: 'left' },
           { to: '/blog', label: 'Blog', position: 'left' },
           {

frontend/src/components/homepage-features.js

@@ -68,15 +68,7 @@ const FeatureList = [
     title: 'Love Shields?',
     description: (
       <>
-        Please consider{' '}
-        <a
-          href="https://opencollective.com/shields"
-          rel="noreferrer"
-          target="_blank"
-        >
-          donating
-        </a>{' '}
-        to sustain our activities
+        Please consider <a href="/donate">donating</a> to sustain our activities
       </>
     ),
   },

frontend/src/css/custom.css

@@ -30,3 +30,13 @@ html[data-theme="dark"] .docusaurus-highlight-code-line {
 .opencollective-image {
   color-scheme: initial;
 }
+
+.flex-column-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.align-bottom {
+  margin-top: auto;
+}

frontend/src/pages/donate.md

@@ -0,0 +1,68 @@
+# Donate
+
+You can donate to Shields.io via [OpenCollective](https://opencollective.com/shields).
+
+## How the money is spent
+
+Shields.io is a non-profit project run by unpaid volunteers. We use your donations to pay for our hosting costs.
+
+Shields badges are everywhere. Shields badges appear on GitHub, NPM, PyPI, Ruby Gems, Rust Crates... If people build software there, shields badges are on it. Our userbase scales with the size of the software development community as a whole. This means we serve a lot of traffic. While the majority of image impressions are served from downstream proxies, we serve over 1.6 billion requests per month from our own infrastructure and transfer over 3Tb of outbound bandwidth each month.
+
+Those are big numbers, and servers cost money. So does bandwidth. We cover our hosting costs with donations from the community.
+
+## Donation tiers
+
+While we accept donations of any size, we do have some suggested tiers.
+
+<section>
+  <div className="container">
+    <div className="row">
+      <div className="col col--6">
+        <div className="padding-horiz--md padding-vert--lg flex-column-container">
+          <h3>Sponsor</h3>
+          <p>Recommended for **companies**: With a monthly donation of $35, you can help to sustain our activities. Your company logo and a link to your website will feature at the top of our [community page](https://shields.io/community).</p>
+          <p class="align-bottom"><a href="https://opencollective.com/shields/contribute/sponsor-2412/checkout" class="button button--primary button--medium">Become a Sponsor</a></p>
+        </div>
+      </div>
+
+      <div className="col col--6">
+        <div className="padding-horiz--md padding-vert--lg flex-column-container">
+          <h3>Monthly Backer</h3>
+          <p>Recommended for **individuals**: With a monthly donation of $3, you can help to sustain our activities on an ongoing basis.</p>
+          <p class="align-bottom"><a href="https://opencollective.com/shields/contribute/monthly-backer-2988/checkout" class="button button--primary button--medium">Become a Monthly Backer</a></p>
+        </div>
+      </div>
+
+      <div className="col col--6">
+        <div className="padding-horiz--md padding-vert--lg flex-column-container">
+          <h3>Backer</h3>
+          <p>If you would prefer not to commit to a monthly donation, but you think shields.io has provided some value [over the last 10+ years](https://github.com/badges/shields/discussions/8867), consider making a one-time donation of $10.</p>
+          <p class="align-bottom"><a href="https://opencollective.com/shields/contribute/backer-2411/checkout" class="button button--secondary button--medium">Become a Backer</a></p>
+        </div>
+      </div>
+
+      <div className="col col--6">
+        <div className="padding-horiz--md padding-vert--lg flex-column-container">
+          <h3>Something Else</h3>
+          <p>Make a custom one-time or recurring donation of any amount.</p>
+          <p class="align-bottom"><a href="https://opencollective.com/shields/donate" class="button button--secondary button--medium">Make a custom Donation</a></p>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</section>
+
+## FAQ
+
+### Can I donate using another platform?
+
+Currently we only accept donations via [OpenCollective](https://opencollective.com/shields). OpenCollective should be convenient for most users as it allows you to donate using credit card, bank transfer, or PayPal and is available in most countries.
+
+### I donated as a sponsor. How do I change my company logo or URL?
+
+We pull the logo and URL from your Open Collective profile. You can update these at any time from within Open Collective and those changes will be reflected on the community page within 24 hours.
+
+### Can I see exactly how the money is being used?
+
+Using OpenCollective means our finances are completely transparent. All transactions are publicly visible on https://opencollective.com/shields