update donate page to include information about sponsorship

Author: thilobillerbeck

core/src/pages/donate.astro

@@ -15,64 +15,97 @@ const sponsors = await getEntry('sponsors', 'info');
 
 <Layout title="Donate">
   <PageHeader text="Donate" />
-  <Container class="grid gap-8 px-12 py-16 md:grid-cols-2">
-    <div class="flex flex-col gap-4">
-      <h2 class="font-heading text-secondary-afghani-blue text-3xl font-bold">
-        Donate using Open Collective
-      </h2>
-      <p class="font-extralight">
-        NixOS Foundation is using
-        <a href="https://opencollective.com/">Open Collective</a>
-        to manage the finances so everyone can see where money comes from and where
-        money goes.
-      </p>
-      <p class="text-light-bold leading-relaxed font-extralight">
-        With Open Collective you can make a <strong>single</strong> or <strong
-          >recurring</strong
-        > contribution by credit card transfer.
-      </p>
-      <p class="leading-relaxed font-extralight">Thank you!</p>
-      <div class="flex flex-col justify-stretch gap-4 md:flex-row">
+  <Container class="grid gap-8 py-16 md:grid-cols-2">
+    <div class="bg-afghan flex flex-col gap-4">
+      <div
+        class="bg-secondary-afghani-blue-95 flex flex-col gap-2 rounded-2xl p-4"
+      >
+        <h2
+          class="font-heading text-secondary-afghani-blue text-3xl leading-none font-bold"
+        >
+          ... using Open Collective
+        </h2>
+        <p class="font-extralight">
+          NixOS Foundation is using
+          <a href="https://opencollective.com/">Open Collective</a>
+          to manage the finances so everyone can see where money comes from and where
+          money goes.
+        </p>
+        <p class="font-extralight">
+          With Open Collective you can make a <strong>single</strong> or <strong
+            >recurring</strong
+          > contribution by credit card transfer.
+        </p>
         <Button
           color="semidarkblue"
+          classList={['mt-1']}
           size="sm"
           href="https://opencollective.com/nixos#support"
         >
           Donate using Open Collective
         </Button>
       </div>
+      <div
+        class="bg-secondary-afghani-blue-95 flex flex-col gap-2 rounded-2xl p-4"
+      >
+        <h2
+          class="font-heading text-secondary-afghani-blue text-3xl leading-none font-bold"
+        >
+          ... by becoming a Sponsor
+        </h2>
+        <p class="font-extralight">
+          Help us keep NixOS and Nixpkgs sustainable by becoming a sponsor. Your
+          support helps us maintain the infrastructure, improve the project, and
+          organize events. We offer various sponsorship tiers, each with its own
+          set of benefits.
+        </p>
+        <Button
+          color="semidarkblue"
+          size="sm"
+          href="/sponsorship"
+          classList={['mt-1']}
+        >
+          Read more about sponsorship tiers
+        </Button>
+      </div>
     </div>
-    <div class="flex flex-col justify-center gap-4">
-      <h2 class="font-heading text-secondary-afghani-blue text-3xl font-bold">
-        Donate with SEPA bank transfer
-      </h2>
-      <p class="font-extralight">
-        The NixOS Foundation also accepts donations via SEPA bank transfer.
-        Please send payments to:
-      </p>
-      <pre
-        class="bg-secondary-afghani-blue-95 text-nix-blue-darker rounded-3xl p-8 font-mono font-bold whitespace-pre-line">
+    <div class="flex flex-col">
+      <div
+        class="bg-secondary-afghani-blue-95 flex flex-col gap-2 rounded-2xl p-4"
+      >
+        <h2
+          class="font-heading text-secondary-afghani-blue text-3xl leading-none font-bold"
+        >
+          ... using SEPA bank transfer
+        </h2>
+        <p class="font-extralight">
+          The NixOS Foundation also accepts donations via SEPA bank transfer.
+          Please send payments to:
+        </p>
+        <pre
+          class="bg-primary-white text-nix-blue-darker my-2 rounded-3xl p-8 font-mono font-bold whitespace-pre-line">
 Stichting NixOS Foundation, Utrecht, The Netherlands
 
 IBAN: NL13 BUNQ 2061 2530 32
 BIC:  BUNQNL2AXXX</pre>
-      <p class="text-primary-black-45 text-xs leading-relaxed font-extralight">
-        Please add your name and purpose (donation) in the description of the
-        transfer.
-        <i>
-          If you would like to support us with amounts above 2000 euro per year,
-          please contact us at
-          <a href="mailto:[email protected]">[email protected]</a>
-          , as this will have tax implications.
-        </i>
-      </p>
+        <p
+          class="text-primary-black-45 text-xs leading-relaxed font-extralight"
+        >
+          Please add your name and purpose (donation) in the description of the
+          transfer.
+          <i>
+            If you would like to support us with amounts above 2000 euro per
+            year, please contact us at
+            <a href="mailto:[email protected]">[email protected]</a>
+            , as this will have tax implications.
+          </i>
+        </p>
+      </div>
     </div>
   </Container>
   <Divider style="slope" mirrorX mirrorY />
-  <div
-    class="bg-secondary-afghani-blue-45 text-primary-white py-16 md:px-12 md:py-16"
-  >
-    <Container class="grid gap-8 md:grid-cols-2 md:px-12">
+  <div class="bg-secondary-afghani-blue-45 text-primary-white py-16 md:py-16">
+    <Container class="grid gap-8 md:grid-cols-2">
       <div class="flex flex-col gap-4">
         <img src="/images/donate/merch.svg" class="h-64 md:h-full" />
       </div>
@@ -96,13 +129,13 @@ BIC:  BUNQNL2AXXX</pre>
     </Container>
   </div>
   <Divider style="slope" mirrorX />
-  <Container class="grid px-12 pt-16">
+  <Container class="grid pt-16">
     <p class="text-primary-black-55 text-xl font-bold">
       The NixOS infrastructure, development and events are funded by its users
       and sponsors.
     </p>
   </Container>
-  <Container class="grid gap-8 px-12 pt-8 pb-20 md:grid-cols-2">
+  <Container class="grid gap-8 pt-8 pb-20 md:grid-cols-2">
     <div
       class="flex flex-col justify-center gap-4 leading-relaxed font-extralight"
     >
@@ -126,7 +159,7 @@ BIC:  BUNQNL2AXXX</pre>
   </Container>
   <Divider style="slope" mirrorY />
   <div class="bg-secondary-afghani-blue-45 text-primary-white py-16">
-    <Container class="grid gap-8 px-12 md:grid-cols-2">
+    <Container class="grid gap-8 md:grid-cols-2">
       <div class="flex flex-col justify-center">
         <div
           class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
@@ -161,7 +194,7 @@ BIC:  BUNQNL2AXXX</pre>
             >Jacquard programme</a
           >
           of the
-          <a href="http://www.nwo.nl/" class="text-primary-white!"
+          <a href="http://www.nwo.npx-l/" class="text-primary-white!"
             >Netherlands Organisation for Scientific Research</a
           >
           (NWO) and SERC. The first prototype of NixOS was developed by