Tweaking the sponsorship page content and buttons.

Author: mrbiggred

docs/sponsors/index.md

@@ -2,18 +2,18 @@
 hide:
   - toc
 ---
-# Contribute
+# Sponsors
 
 <div class="wdc-sponsors-page" markdown>
-  <p class="lead">Like the Weekly Dev Chat and want to help?</p>
+  <p class="lead">The Weekly Dev Chat is powered by community members like you!</p>
   <section class="support">
     <div class="support-card">
       <h3>Show Up</h3>
       <p>Attending events is the best way to support the Weekly Dev Chat.  Bring your curiousity and be willing to share your knowledge and learn from others.</p>
     </div>
     <div class="support-card">
       <h3>Spread the Word</h3>
-      <p>Invite people who follow our values to our events.  Everyone and anyone is welcome kind, supportive, and respectful of others.</p>
+      <p>Invite others who follow our values to an event.  Everyone and anyone is welcome kind, supportive, and respectful of others.</p>
     </div>
     <div class="support-card">
       <h3>Sponsor</h3>
@@ -22,21 +22,19 @@ hide:
   </section>
 
   <section class="become-sponsor">
+    <div class="eyebrow"><span class="dot"></span> Want on this page?</div>
     <div class="become-inner">
       <div>
-        <div class="eyebrow"><span class="dot"></span> Want on this page?</div>
-        <h3>Contribute to Weekly Dev Chat</h3>
-        <p>Any amount helps cover streaming, hosting, IRL events, and </p>
+        <h3>Thank you to our Current and Past Sponsors!</h3>
+        <p>Email us if you have any questions or would like to make non-financial contributions.</p>
       </div>
       <div class="become-ctas">
-        <a class="btn primary" href="https://github.com/sponsors/saturdaymp" target="_blank" rel="noopener">Sponsor on GitHub</a>
-        <a class="btn ghost" href="mailto:chris.cumming@saturdaymp.com">Email Chris</a>
+        <a class="btn primary" href="https://buy.stripe.com/dRmaEY4HJ2xUgcG8PdfIs01">Sponsor</a>
+        <a class="btn primary" href="mailto:chris@weeklydevchat.com">Email</a>
       </div>
     </div>
   </section>
 
-  Thanks to our current and past supporters!
-
   {% for year in sponsors.years.keys() | sort(reverse=true) %}
   {% set ids = (sponsors.years[year].corporate or []) + (sponsors.years[year].individual or []) %}
   <section class="year-group" data-year="{{ year }}">
@@ -84,3 +82,7 @@ hide:
   {% endfor %}
 
 </div>
+
+<script async
+  src="https://js.stripe.com/v3/buy-button.js">
+</script>

docs/stylesheets/sponsors.css

@@ -27,7 +27,7 @@
   grid-template-columns: repeat(3, 1fr);
   gap: 16px;
   padding: 20px 0;
-  margin: 16px 0 40px;
+  margin: 16px 0 20px;
   border-bottom: 1px solid var(--line);
 }
 .wdc-sponsors-page .support-card {
@@ -219,7 +219,7 @@
 
 /* Become a sponsor CTA */
 .wdc-sponsors-page .become-sponsor {
-  margin: 40px 0;
+  margin: 20px 0;
   padding: 40px;
   border-radius: var(--radius);
   background: linear-gradient(135deg, var(--teal-dark), var(--teal));
@@ -258,6 +258,7 @@
   height: 7px;
   border-radius: 50%;
   background: var(--blue);
+  border: 1px solid #fff;
   box-shadow: 0 0 0 3px rgba(68, 138, 255, 0.3);
 }
 .wdc-sponsors-page .become-sponsor h3 {
@@ -282,18 +283,19 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 12px 20px;
-  border-radius: 10px;
+  padding: 12px 48px;
+  border-radius: 12px;
+  border: 2px solid rgba(255, 255, 255, 0.9);
   font-weight: 500;
-  font-size: 14px;
+  font-size: 17px;
   text-decoration: none;
   white-space: nowrap;
-  transition: background 0.15s;
+  transition: background 0.15s, border-color 0.15s;
 }
 .wdc-sponsors-page .btn.primary { background: var(--blue); color: #fff; }
-.wdc-sponsors-page .btn.primary:hover { background: #2979ff; }
-.wdc-sponsors-page .btn.ghost { background: rgba(255, 255, 255, 0.15); color: #fff; }
-.wdc-sponsors-page .btn.ghost:hover { background: rgba(255, 255, 255, 0.25); }
+.wdc-sponsors-page .btn.primary:hover { background: #2979ff; border-color: #fff; }
+.wdc-sponsors-page .btn.ghost { background: rgba(255, 255, 255, 0.25); color: #fff; }
+.wdc-sponsors-page .btn.ghost:hover { background: rgba(255, 255, 255, 0.35); border-color: #fff; }
 
 @media (max-width: 900px) {
   .wdc-sponsors-page .support { grid-template-columns: 1fr; }