updates sponsorship page with latest packages and statistics (#8)

* updates sponsorship page with latest packages and statistics

* restore things lost in the paste

* fix broke ass countup

* pacify linter

* dynamic year

* animation and intrigue

* cruft

* Apply suggestions from code review

Co-authored-by: Robbie Wagner <rwwagner90@gmail.com>

* adds text balance to the headline

* fix code rabbit nit

* restore product IDs to ad reads

* hookup new products

* fix readme

* updates alignment, adds link to contact page, adds param to sponsor for frequency

---------

Co-authored-by: Robbie Wagner <rwwagner90@gmail.com>

Author: argyleink

.env.example

@@ -2,6 +2,10 @@
 POLAR_ACCESS_TOKEN=your_polar_access_token_here
 POLAR_30SEC_PRODUCT_ID=your_30sec_product_id_here
 POLAR_60SEC_PRODUCT_ID=your_60sec_product_id_here
+POLAR_BOTTLEDROP_PRODUCT_ID=your_bottledrop_product_id_here
+POLAR_CRATE_PRODUCT_ID=your_crate_product_id_here
+POLAR_FULLBARREL_PRODUCT_ID=your_fullbarrel_product_id_here
+POLAR_LABEL_PRODUCT_ID=your_label_product_id_here
 POLAR_SUCCESS_URL=https://whiskey.fm/sponsor/success
 
 # Optional: Set to "sandbox" for testing, "production" for live (defaults to production)

README.md

@@ -177,15 +177,21 @@ This site uses Polar.sh for sponsor checkout. To set it up:
 1. **Get your Polar credentials:**
    - Log in to your [Polar dashboard](https://polar.sh)
    - Go to Settings → API to get your access token
-   - Create two products for your sponsorship packages (30-second and 60-second ads)
+   - Create two products for your sponsorship packages (30-second and 60-second
+     ads)
    - Note the product IDs from each product's page
 
-2. **Configure environment variables:**
-   Create a `.env` file in the root directory with:
+2. **Configure environment variables:** Create a `.env` file in the root
+   directory with:
+
    ```env
    POLAR_ACCESS_TOKEN=your_polar_access_token_here
    POLAR_30SEC_PRODUCT_ID=your_30sec_product_id_here
    POLAR_60SEC_PRODUCT_ID=your_60sec_product_id_here
+   POLAR_BOTTLEDROP_PRODUCT_ID=your_bottledrop_product_id_here
+   POLAR_CRATE_PRODUCT_ID=your_crate_product_id_here
+   POLAR_FULLBARREL_PRODUCT_ID=your_fullbarrel_product_id_here
+   POLAR_LABEL_PRODUCT_ID=your_label_product_id_here
    POLAR_SUCCESS_URL=https://whiskey.fm/sponsor/success
    ```
 
@@ -201,6 +207,7 @@ This site uses Polar.sh for sponsor checkout. To set it up:
    - Test with a real payment to confirm everything works
 
 The integration uses the `@polar-sh/astro` package which provides:
+
 - Server-side checkout session creation at `/api/checkout`
 - Automatic tax compliance through Polar's Merchant of Record service
 - Support for multiple products and dynamic pricing

src/components/AdPackageCard.astro

@@ -4,36 +4,43 @@ export interface Props {
   heading: string;
   price: string;
   productId: string;
+  period?: string;
 }
 
-const { bullets, heading, price, productId } = Astro.props;
+const { bullets, heading, price, productId, period = 'per episode' } = Astro.props;
 ---
 
-<div class="dark:bg-dark-background relative z-10 mb-6 rounded-lg bg-white p-1">
+<div
+  class="dark:bg-dark-background relative z-10 mb-6 grid grid-rows-[auto_1fr] rounded-lg bg-white p-1"
+>
   <h2
-    class="bg-light-card text-light-text-heading dark:bg-dark-card px-5 py-4 font-bold lg:py-6 dark:text-white"
+    class="bg-light-card text-light-text-heading dark:bg-dark-card px-5 py-4 text-xl font-bold lg:py-6 dark:text-white"
   >
     {heading}
   </h2>
 
-  <ul class="list-disc px-8">
+  <ul class="flex flex-1 flex-col px-8">
     {
       bullets.map((bullet) => {
-        return <li class="dark:border-dark-border border-b py-6">{bullet}</li>;
+        return (
+          <li class="dark:border-dark-border border-b py-6 text-balance">
+            {bullet}
+          </li>
+        );
       })
     }
 
     <h3
-      class="text-light-text-heading mt-8 mb-12 px-5 text-4xl font-bold tabular-nums dark:text-white"
+      class="text-light-text-heading mt-8 mb-12 flex-1 content-end px-5 text-4xl font-bold tabular-nums dark:text-white"
     >
       {price}
       <span
         class="text-light-text-body dark:text-dark-text-body text-3xl font-light"
       >
         /
       </span>
-      <span class="text-light-text-body dark:text-dark-text-body text-2xl">
-        per episode
+      <span class="text-light-text-body dark:text-dark-text-body text-lg">
+        {period}
       </span>
     </h3>
 
@@ -47,4 +54,4 @@ const { bullets, heading, price, productId } = Astro.props;
       </a>
     </div>
   </ul>
-</div>
+</div>