TampaDevs / bayhacks.dev

Other
0 stars 0 forks source link

Sponsor Logos and Purchase Buttons #11

Open chtzvt opened 1 year ago

chtzvt commented 1 year ago

OK! We're hitting the gas on getting sponsorships for the event sorted out.

Part of that necessitates a couple of things:

Sponsor Logos

First, we'll need a mechanism to show a sponsor's logo on the site. This is one of our sponsor perks.

From an implementation standpoint, I'd recommend taking a similar approach to what we've implemented on the Tampa Devs main site. For that, we actually maintain a json file containing the information about each sponsor (name, logo, tier, etc), and use this to display their logos across the site.

This is used by our static site generator to create the sponsor logo marquee on the home page (source) and [about page]() (source).

image image

In the case of the Bayhacks site, I won't mandate a particular visual representation (though you're welcome to re-use as much of the markup from the main Tampa Devs website as you'd like). The important thing is that we differentiate sponsors based on their tiers, show the logos legibly/respectably, and ensure that each logo is also a clickable link to their home page.

Sponsorship Promo Links

We can replace the existing sponsor links on the site, either with a link to the sponsor guide or with the Stripe checkout buttons below (which correspond to the clickable links in the guide itself):

image

Silver sponsorship buy button:

<script async
  src="https://js.stripe.com/v3/buy-button.js">
</script>

<stripe-buy-button
  buy-button-id="buy_btn_1NiiVwInNg1aBaFlotN084uT"
  publishable-key="pk_live_51LvWcLInNg1aBaFlvPnr14KI5GY34IxheBKo4gDzX8LiVPTcM3AngWm30sKrnk1vAlxbPC6PaSG6KQa90Ihycqqj00hb2kkmJs"
>
</stripe-buy-button>

Bronze sponsorship buy button:

<script async
  src="https://js.stripe.com/v3/buy-button.js">
</script>

<stripe-buy-button
  buy-button-id="buy_btn_1NiiZuInNg1aBaFlfVJ8YPDo"
  publishable-key="pk_live_51LvWcLInNg1aBaFlvPnr14KI5GY34IxheBKo4gDzX8LiVPTcM3AngWm30sKrnk1vAlxbPC6PaSG6KQa90Ihycqqj00hb2kkmJs"
>
</stripe-buy-button>