From 08c8577186369c8296e838f19bc47a4f7aa3fe38 Mon Sep 17 00:00:00 2001
From: mirkobrombin <brombin@mirko.pm>
Date: Sat, 7 Dec 2024 13:35:07 +0100
Subject: [PATCH] support for crypto donations

---
 src/pages/funding.astro | 1079 +++++++++++++++++++++------------------
 1 file changed, 596 insertions(+), 483 deletions(-)

diff --git a/src/pages/funding.astro b/src/pages/funding.astro
index 88ed010..e85d734 100644
--- a/src/pages/funding.astro
+++ b/src/pages/funding.astro
@@ -43,7 +43,7 @@ import { Icon } from "astro-icon/components";
         Developers.
       </p>
 
-      <div class="grid md:grid-cols-3 gap-6 mb-8">
+      <div class="grid md:grid-cols-4 gap-6 mb-8">
         <div
           class="bg-gray-900 text-white p-8 rounded-lg shadow-md text-center hover:shadow-lg transition-all relative top-0 hover:-top-1"
         >
@@ -105,419 +105,523 @@ import { Icon } from "astro-icon/components";
             >Donate via LiberaPay</a
           >
         </div>
-      </div>
-    </section>
-
-    <section
-      class="sticky top-18 z-10 bg-white dark:bg-gray-900 py-4 border-b border-gray-300 dark:border-gray-700"
-    >
-      <div
-        class="container mx-auto px-4 flex flex-col md:flex-row items-center justify-between gap-4"
-      >
-        <div class="flex flex-wrap items-center gap-2">
-          <button
-            class="filter-button bg-gray-200 dark:bg-gray-700 px-4 py-2 rounded-lg text-sm"
-            data-status="WIP"
-          >
-            WIP
-          </button>
-          <button
-            class="filter-button bg-gray-200 dark:bg-gray-700 px-4 py-2 rounded-lg text-sm"
-            data-status="DONE"
-          >
-            Done
-          </button>
-          <button
-            class="filter-button bg-gray-200 dark:bg-gray-700 px-4 py-2 rounded-lg text-sm"
-            data-status="ALPHA"
-          >
-            Alpha
-          </button>
-          <button
-            class="filter-button bg-gray-200 dark:bg-gray-700 px-4 py-2 rounded-lg text-sm"
-            data-status="NEXT"
-          >
-            Next
-          </button>
-          <button
-            class="filter-button bg-gray-200 dark:bg-gray-700 px-4 py-2 rounded-lg text-sm"
-            data-status="REJECTED"
-          >
-            Rejected
-          </button>
-        </div>
         <div
-          class="flex flex-col md:flex-row items-center gap-2 w-full md:w-auto"
+          class="bg-purple-500 dark:bg-purple-700 text-white p-8 rounded-lg shadow-md text-center hover:shadow-lg transition-all relative top-0 hover:-top-1"
         >
-          <input
-            type="text"
-            id="searchInput"
-            placeholder="Search tasks..."
-            class="bg-gray-100 dark:bg-gray-800 px-4 py-2 rounded-lg text-sm w-full md:w-72"
+          <Icon
+            name="material-symbols:currency-bitcoin"
+            class="w-8 h-8 mb-4 mx-auto"
           />
-          <button
-            id="resetButton"
-            class="bg-blue-500 text-white px-4 py-2 rounded-lg text-sm w-full md:w-auto"
+          <h3 class="text-2xl font-bold mb-2">Cryptocurrency</h3>
+          <span
+            class="bg-purple-700 text-white px-2 py-1 rounded-full text-sm inline-block mb-4"
+            >Bitcoin, Ethereum, and more</span
+          >
+          <a
+            class="mt-4 block bg-purple-800 text-white py-2 px-4 rounded-lg hover:bg-purple-700 transition-all cursor-pointer"
+            onclick="document.getElementById('cryptoModal').classList.remove('hidden')"
+            >View Addresses</a
           >
-            Reset Filters
-          </button>
         </div>
-      </div>
-    </section>
 
-    <section class="py-5">
-      <div class="grid md:grid-cols-3 gap-6">
         <div
-          class="task-card bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md transition-all relative flex flex-col"
-          data-status="DONE"
-          data-title="Library mode"
+          id="cryptoModal"
+          class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center hidden z-20"
         >
-          <div>
-            <span
-              class="bg-green-500 text-white px-2 py-1 rounded-full text-sm inline-block mb-4"
-              >[DONE]</span
-            >
-            <h3 class="text-2xl font-bold mb-2">Library mode</h3>
-            <p class="text-lg mb-4">
-              Allow users to add any program from any bottle in a library view
-              for easy access.
+          <div
+            class="bg-white dark:bg-gray-900 p-8 rounded-lg shadow-lg w-1/3 text-center overflow-y-auto max-h-[80vh]"
+          >
+            <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">
+              Cryptocurrency Addresses
+            </h2>
+            <p class="text-lg text-gray-700 dark:text-gray-300 mb-4">
+              You can donate using the following cryptocurrency addresses.
             </p>
-            <div class="flex items-center space-x-2 mb-4">
-              <span class="w-full bg-gray-300 rounded">
-                <span class="block bg-green-500 h-2 rounded" style="width: 100%"
-                ></span>
-              </span>
+            <div class="flex flex-col gap-4">
+              <div>
+                <h3 class="text-xl font-bold mb-2">
+                  Ethereum (ETH) <Icon
+                    name="material-symbols:check-circle"
+                    class="w-6 h-6 inline-block"
+                    title="Suggested"
+                  />
+                </h3>
+                <p class="text-gray-700 dark:text-gray-300">Network: ERC20</p>
+                <code
+                  class="text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-800 px-4 py-2 rounded-md block overflow-x-auto"
+                >
+                  0xef6a653c63db31403f507bca277f719d2f3d44f8
+                </code>
+              </div>
+
+              <hr class="border-gray-300 dark:border-gray-700 my-4" />
+
+              <div>
+                <h3 class="text-xl font-bold mb-2">Bitcoin (BTC)</h3>
+                <p class="text-gray-700 dark:text-gray-300">
+                  Network: BTC(SegWit)à
+                </p>
+                <code
+                  class="text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-800 px-4 py-2 rounded-md block overflow-x-auto"
+                >
+                  bc1q2svx64v90hyyd7jt8xamvqm9vc5248l5rgzwpm
+                </code>
+              </div>
+
+              <hr class="border-gray-300 dark:border-gray-700 my-4" />
+
+              <div>
+                <h3 class="text-xl font-bold mb-2">Litecoin (LTC)</h3>
+                <p class="text-gray-700 dark:text-gray-300">Network: LTC</p>
+                <code
+                  class="text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-800 px-4 py-2 rounded-md block overflow-x-auto"
+                >
+                  LWqpd2411CQTuWD15bcPP7bfAw3wmYHScm
+                </code>
+              </div>
+
+              <hr class="border-gray-300 dark:border-gray-700 my-4" />
+
+              <div>
+                <h3 class="text-xl font-bold mb-2">Ripple (XRP)</h3>
+                <p class="text-gray-700 dark:text-gray-300">Network: XRP</p>
+                <code
+                  class="text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-800 px-4 py-2 rounded-md block overflow-x-auto"
+                >
+                  rNxp4h8apvRis6mJf9Sh8C6iRxfrDWN7AV
+                </code>
+                <div
+                  class="bg-red-500 text-white px-2 py-1 rounded-md text-sm block mt-6"
+                >
+                  <p>The following MEMO is required: 420078619.</p>
+                  <p>If you can't add the MEMO, coins will be lost.</p>
+                </div>
+              </div>
+              <button
+                id="closeCryptoModal"
+                class="bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600 transition-all"
+                >Close</button
+              >
             </div>
           </div>
-          <div class="mt-auto">
-            <a
-              href="https://usebottles.com/posts/2022-08-28-release-2022.8.28"
-              class="flex items-center justify-center bg-white text-gray-800 border border-gray-300 py-2 px-4 rounded-lg hover:bg-gray-100 transition-all dark:bg-gray-700 dark:text-white dark:border-gray-700 dark:hover:bg-gray-800"
-            >
-              <Icon
-                name="material-symbols:menu-book-outline"
-                class="w-5 h-5 mr-2"
-              />
-              README
-            </a>
-          </div>
         </div>
+      </div>
+
+      <section
+        class="sticky top-18 z-10 bg-white dark:bg-gray-900 py-4 border-b border-gray-300 dark:border-gray-700"
+      >
         <div
-          class="task-card bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md transition-all relative flex flex-col"
-          data-status="ALPHA"
-          data-title="Per-bottle sandbox"
+          class="container mx-auto px-4 flex flex-col md:flex-row items-center justify-between gap-4"
         >
-          <div>
-            <span
-              class="bg-yellow-500 text-white px-2 py-1 rounded-full text-sm inline-block mb-4"
-              >[ALPHA]</span
+          <div class="flex flex-wrap items-center gap-2">
+            <button
+              class="filter-button bg-gray-200 dark:bg-gray-700 px-4 py-2 rounded-lg text-sm"
+              data-status="WIP"
             >
-            <h3 class="text-2xl font-bold mb-2">Per-bottle sandbox</h3>
-            <p class="text-lg mb-4">
-              Experimental feature for wrapping each bottle with a sandbox to
-              limit permissions.
-            </p>
-            <div class="flex items-center space-x-2 mb-4">
-              <span class="w-full bg-gray-300 rounded">
-                <span class="block bg-yellow-500 h-2 rounded" style="width: 80%"
-                ></span>
-              </span>
-              <Icon
-                name="material-symbols:info-outline"
-                class="w-6 h-6 cursor-pointer"
-                onclick="document.getElementById('infoModal').classList.remove('hidden'); document.getElementById('infoModalText').innerText = 'Estimated time: 1 week of work based on average hourly cost.'"
-              />
-            </div>
-          </div>
-          <div class="mt-auto">
-            <a
-              href="https://github.com/bottlesdevs/Bottles/issues/1158"
-              class="flex items-center justify-center bg-white text-gray-800 border border-gray-300 py-2 px-4 rounded-lg hover:bg-gray-100 transition-all dark:bg-gray-700 dark:text-white dark:border-gray-700 dark:hover:bg-gray-800"
+              WIP
+            </button>
+            <button
+              class="filter-button bg-gray-200 dark:bg-gray-700 px-4 py-2 rounded-lg text-sm"
+              data-status="DONE"
             >
-              <Icon
-                name="material-symbols:menu-book-outline"
-                class="w-5 h-5 mr-2"
-              />
-              README
-            </a>
-          </div>
-        </div>
-        <div
-          class="task-card bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md transition-all relative flex flex-col"
-          data-status="REJECTED"
-          data-title="Layered bottles"
-        >
-          <div>
-            <span
-              class="bg-red-500 text-white px-2 py-1 rounded-full text-sm inline-block mb-4"
-              >[REJECTED]</span
+              Done
+            </button>
+            <button
+              class="filter-button bg-gray-200 dark:bg-gray-700 px-4 py-2 rounded-lg text-sm"
+              data-status="ALPHA"
             >
-            <h3 class="text-2xl font-bold mb-2">Layered bottles</h3>
-            <p class="text-lg mb-4">
-              Our solution for multiple environments in one bottle. Planned for
-              Bottles Next. Please refer to the Bottles Next task for more
-              details.
-            </p>
-            <div class="flex items-center space-x-2 mb-4">
-              <span class="w-full bg-gray-300 rounded">
-                <span class="block bg-red-300 h-2 rounded" style="width: 0%"
-                ></span>
-              </span>
-              <Icon
-                name="material-symbols:info-outline"
-                class="w-6 h-6 cursor-pointer"
-                onclick="document.getElementById('infoModal').classList.remove('hidden'); document.getElementById('infoModalText').innerText = 'This feature is planned for Bottles Next. Read the Bottles Next task for more information.'"
-              />
-            </div>
+              Alpha
+            </button>
+            <button
+              class="filter-button bg-gray-200 dark:bg-gray-700 px-4 py-2 rounded-lg text-sm"
+              data-status="NEXT"
+            >
+              Next
+            </button>
+            <button
+              class="filter-button bg-gray-200 dark:bg-gray-700 px-4 py-2 rounded-lg text-sm"
+              data-status="REJECTED"
+            >
+              Rejected
+            </button>
           </div>
-          <div class="mt-auto">
-            <a
-              href="https://github.com/bottlesdevs/Bottles/issues/510"
-              class="flex items-center justify-center bg-white text-gray-800 border border-gray-300 py-2 px-4 rounded-lg hover:bg-gray-100 transition-all dark:bg-gray-700 dark:text-white dark:border-gray-700 dark:hover:bg-gray-800"
+          <div
+            class="flex flex-col md:flex-row items-center gap-2 w-full md:w-auto"
+          >
+            <input
+              type="text"
+              id="searchInput"
+              placeholder="Search tasks..."
+              class="bg-gray-100 dark:bg-gray-800 px-4 py-2 rounded-lg text-sm w-full md:w-72"
+            />
+            <button
+              id="resetButton"
+              class="bg-blue-500 text-white px-4 py-2 rounded-lg text-sm w-full md:w-auto"
             >
-              <Icon
-                name="material-symbols:menu-book-outline"
-                class="w-5 h-5 mr-2"
-              />
-              README
-            </a>
+              Reset Filters
+            </button>
           </div>
         </div>
-        <div
-          class="task-card bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md transition-all relative flex flex-col"
-          data-status="WIP"
-          data-title="Integration of UMU"
-        >
-          <div>
-            <span
-              class="bg-blue-500 text-white px-2 py-1 rounded-full text-sm inline-block mb-4"
-              >[WIP]</span
-            >
-            <h3 class="text-2xl font-bold mb-2">Integration of UMU</h3>
-            <p class="text-lg mb-4">
-              Integration of UMU to enhance the gaming compatibility in Bottles.
-              For more information, check the <a
-                href="https://github.com/Open-Wine-Components/umu-launcher"
-                class="text-blue-600 dark:text-blue-400 underline"
-                >UMU GitHub page</a
-              >.
-            </p>
-            <div class="flex items-center space-x-2 mb-4">
-              <span class="w-full bg-gray-300 rounded">
-                <span class="block bg-blue-500 h-2 rounded" style="width: 10%"
-                ></span>
-              </span>
-              <Icon
-                name="material-symbols:info-outline"
-                class="w-6 h-6 cursor-pointer"
-                onclick="document.getElementById('infoModal').classList.remove('hidden'); document.getElementById('infoModalText').innerText = 'Estimated time: 4 weeks of work based on average hourly cost.'"
-              />
+      </section>
+
+      <section class="py-5">
+        <div class="grid md:grid-cols-3 gap-6">
+          <div
+            class="task-card bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md transition-all relative flex flex-col"
+            data-status="DONE"
+            data-title="Library mode"
+          >
+            <div>
+              <span
+                class="bg-green-500 text-white px-2 py-1 rounded-full text-sm inline-block mb-4"
+                >[DONE]</span
+              >
+              <h3 class="text-2xl font-bold mb-2">Library mode</h3>
+              <p class="text-lg mb-4">
+                Allow users to add any program from any bottle in a library view
+                for easy access.
+              </p>
+              <div class="flex items-center space-x-2 mb-4">
+                <span class="w-full bg-gray-300 rounded">
+                  <span
+                    class="block bg-green-500 h-2 rounded"
+                    style="width: 100%"></span>
+                </span>
+              </div>
+            </div>
+            <div class="mt-auto">
+              <a
+                href="https://usebottles.com/posts/2022-08-28-release-2022.8.28"
+                class="flex items-center justify-center bg-white text-gray-800 border border-gray-300 py-2 px-4 rounded-lg hover:bg-gray-100 transition-all dark:bg-gray-700 dark:text-white dark:border-gray-700 dark:hover:bg-gray-800"
+              >
+                <Icon
+                  name="material-symbols:menu-book-outline"
+                  class="w-5 h-5 mr-2"
+                />
+                README
+              </a>
             </div>
           </div>
-          <div class="mt-auto">
-            <a
-              href="https://usebottles.com/posts/2024-09-24-umu-next/"
-              class="flex items-center justify-center bg-white text-gray-800 border border-gray-300 py-2 px-4 rounded-lg hover:bg-gray-100 transition-all dark:bg-gray-700 dark:text-white dark:border-gray-700 dark:hover:bg-gray-800"
-            >
-              <Icon
-                name="material-symbols:menu-book-outline"
-                class="w-5 h-5 mr-2"
-              />
-              README
-            </a>
+          <div
+            class="task-card bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md transition-all relative flex flex-col"
+            data-status="ALPHA"
+            data-title="Per-bottle sandbox"
+          >
+            <div>
+              <span
+                class="bg-yellow-500 text-white px-2 py-1 rounded-full text-sm inline-block mb-4"
+                >[ALPHA]</span
+              >
+              <h3 class="text-2xl font-bold mb-2">Per-bottle sandbox</h3>
+              <p class="text-lg mb-4">
+                Experimental feature for wrapping each bottle with a sandbox to
+                limit permissions.
+              </p>
+              <div class="flex items-center space-x-2 mb-4">
+                <span class="w-full bg-gray-300 rounded">
+                  <span
+                    class="block bg-yellow-500 h-2 rounded"
+                    style="width: 80%"></span>
+                </span>
+                <Icon
+                  name="material-symbols:info-outline"
+                  class="w-6 h-6 cursor-pointer"
+                  onclick="document.getElementById('infoModal').classList.remove('hidden'); document.getElementById('infoModalText').innerText = 'Estimated time: 1 week of work based on average hourly cost.'"
+                />
+              </div>
+            </div>
+            <div class="mt-auto">
+              <a
+                href="https://github.com/bottlesdevs/Bottles/issues/1158"
+                class="flex items-center justify-center bg-white text-gray-800 border border-gray-300 py-2 px-4 rounded-lg hover:bg-gray-100 transition-all dark:bg-gray-700 dark:text-white dark:border-gray-700 dark:hover:bg-gray-800"
+              >
+                <Icon
+                  name="material-symbols:menu-book-outline"
+                  class="w-5 h-5 mr-2"
+                />
+                README
+              </a>
+            </div>
           </div>
-        </div>
-        <div
-          class="task-card bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md transition-all relative flex flex-col"
-          data-status="NEXT"
-          data-title="Bottles Next"
-        >
-          <div>
-            <span
-              class="bg-purple-500 text-white px-2 py-1 rounded-full text-sm inline-block mb-4"
-              >[NEXT]</span
-            >
-            <h3 class="text-2xl font-bold mb-2">Bottles Next</h3>
-            <p class="text-lg mb-4">
-              A complete redesign of Bottles to overcome current limitations and
-              provide a consistent user experience across Linux and macOS. We
-              need funds, contributors, and companies to provide infrastructure
-              support.
-              <br /><br />
-              Additionally, we are experimenting with two technologies developed
-              by the same developer of Bottles to determine the best candidate for
-              Bottles Next:
-              <ul class="list-disc list-inside mt-2">
-                <li>
-                  <strong>vnt (50% progress, 2 months estimated work):</strong>
-                  <a
-                    href="https://github.com/mirkobrombin/vnt"
-                    class="text-blue-600 dark:text-blue-400 underline"
-                    >GitHub repository</a
-                  >.
-                </li>
-                <li>
-                  <strong>rfw (20% progress, 4 months estimated work):</strong>
-                  <a
-                    href="https://github.com/rfwlab/rfw"
-                    class="text-blue-600 dark:text-blue-400 underline"
-                    >GitHub repository</a
-                  >.
-                </li>
-              </ul>
-            </p>
-            <div class="flex items-center space-x-2 mb-4">
-              <span class="w-full bg-gray-300 rounded">
-                <span class="block bg-purple-500 h-2 rounded" style="width: 10%"
-                ></span>
-              </span>
-              <Icon
-                name="material-symbols:info-outline"
-                class="w-6 h-6 cursor-pointer"
-                onclick="document.getElementById('infoModal').classList.remove('hidden'); document.getElementById('infoModalText').innerText = 'We are looking for funds, contributors, and companies to provide infrastructure support.'"
-              />
+          <div
+            class="task-card bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md transition-all relative flex flex-col"
+            data-status="REJECTED"
+            data-title="Layered bottles"
+          >
+            <div>
+              <span
+                class="bg-red-500 text-white px-2 py-1 rounded-full text-sm inline-block mb-4"
+                >[REJECTED]</span
+              >
+              <h3 class="text-2xl font-bold mb-2">Layered bottles</h3>
+              <p class="text-lg mb-4">
+                Our solution for multiple environments in one bottle. Planned
+                for Bottles Next. Please refer to the Bottles Next task for more
+                details.
+              </p>
+              <div class="flex items-center space-x-2 mb-4">
+                <span class="w-full bg-gray-300 rounded">
+                  <span class="block bg-red-300 h-2 rounded" style="width: 0%"
+                  ></span>
+                </span>
+                <Icon
+                  name="material-symbols:info-outline"
+                  class="w-6 h-6 cursor-pointer"
+                  onclick="document.getElementById('infoModal').classList.remove('hidden'); document.getElementById('infoModalText').innerText = 'This feature is planned for Bottles Next. Read the Bottles Next task for more information.'"
+                />
+              </div>
+            </div>
+            <div class="mt-auto">
+              <a
+                href="https://github.com/bottlesdevs/Bottles/issues/510"
+                class="flex items-center justify-center bg-white text-gray-800 border border-gray-300 py-2 px-4 rounded-lg hover:bg-gray-100 transition-all dark:bg-gray-700 dark:text-white dark:border-gray-700 dark:hover:bg-gray-800"
+              >
+                <Icon
+                  name="material-symbols:menu-book-outline"
+                  class="w-5 h-5 mr-2"
+                />
+                README
+              </a>
             </div>
           </div>
-          <div class="mt-auto">
-            <a
-              href="https://usebottles.com/posts/2023-10-05-bottles-next-a-new-chapter/"
-              class="flex items-center justify-center bg-white text-gray-800 border border-gray-300 py-2 px-4 rounded-lg hover:bg-gray-100 transition-all dark:bg-gray-700 dark:text-white dark:border-gray-700 dark:hover:bg-gray-800"
-            >
-              <Icon
-                name="material-symbols:menu-book-outline"
-                class="w-5 h-5 mr-2"
-              />
-              README
-            </a>
+          <div
+            class="task-card bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md transition-all relative flex flex-col"
+            data-status="WIP"
+            data-title="Integration of UMU"
+          >
+            <div>
+              <span
+                class="bg-blue-500 text-white px-2 py-1 rounded-full text-sm inline-block mb-4"
+                >[WIP]</span
+              >
+              <h3 class="text-2xl font-bold mb-2">Integration of UMU</h3>
+              <p class="text-lg mb-4">
+                Integration of UMU to enhance the gaming compatibility in
+                Bottles. For more information, check the <a
+                  href="https://github.com/Open-Wine-Components/umu-launcher"
+                  class="text-blue-600 dark:text-blue-400 underline"
+                  >UMU GitHub page</a
+                >.
+              </p>
+              <div class="flex items-center space-x-2 mb-4">
+                <span class="w-full bg-gray-300 rounded">
+                  <span class="block bg-blue-500 h-2 rounded" style="width: 10%"
+                  ></span>
+                </span>
+                <Icon
+                  name="material-symbols:info-outline"
+                  class="w-6 h-6 cursor-pointer"
+                  onclick="document.getElementById('infoModal').classList.remove('hidden'); document.getElementById('infoModalText').innerText = 'Estimated time: 4 weeks of work based on average hourly cost.'"
+                />
+              </div>
+            </div>
+            <div class="mt-auto">
+              <a
+                href="https://usebottles.com/posts/2024-09-24-umu-next/"
+                class="flex items-center justify-center bg-white text-gray-800 border border-gray-300 py-2 px-4 rounded-lg hover:bg-gray-100 transition-all dark:bg-gray-700 dark:text-white dark:border-gray-700 dark:hover:bg-gray-800"
+              >
+                <Icon
+                  name="material-symbols:menu-book-outline"
+                  class="w-5 h-5 mr-2"
+                />
+                README
+              </a>
+            </div>
+          </div>
+          <div
+            class="task-card bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md transition-all relative flex flex-col"
+            data-status="NEXT"
+            data-title="Bottles Next"
+          >
+            <div>
+              <span
+                class="bg-purple-500 text-white px-2 py-1 rounded-full text-sm inline-block mb-4"
+                >[NEXT]</span
+              >
+              <h3 class="text-2xl font-bold mb-2">Bottles Next</h3>
+              <p class="text-lg mb-4">
+                A complete redesign of Bottles to overcome current limitations
+                and provide a consistent user experience across Linux and macOS.
+                We need funds, contributors, and companies to provide
+                infrastructure support.
+                <br /><br />
+                Additionally, we are experimenting with two technologies developed
+                by the same developer of Bottles to determine the best candidate
+                for Bottles Next:
+                <ul class="list-disc list-inside mt-2">
+                  <li>
+                    <strong>vnt (50% progress, 2 months estimated work):</strong
+                    >
+                    <a
+                      href="https://github.com/mirkobrombin/vnt"
+                      class="text-blue-600 dark:text-blue-400 underline"
+                      >GitHub repository</a
+                    >.
+                  </li>
+                  <li>
+                    <strong>rfw (20% progress, 4 months estimated work):</strong
+                    >
+                    <a
+                      href="https://github.com/rfwlab/rfw"
+                      class="text-blue-600 dark:text-blue-400 underline"
+                      >GitHub repository</a
+                    >.
+                  </li>
+                </ul>
+              </p>
+              <div class="flex items-center space-x-2 mb-4">
+                <span class="w-full bg-gray-300 rounded">
+                  <span
+                    class="block bg-purple-500 h-2 rounded"
+                    style="width: 10%"></span>
+                </span>
+                <Icon
+                  name="material-symbols:info-outline"
+                  class="w-6 h-6 cursor-pointer"
+                  onclick="document.getElementById('infoModal').classList.remove('hidden'); document.getElementById('infoModalText').innerText = 'We are looking for funds, contributors, and companies to provide infrastructure support.'"
+                />
+              </div>
+            </div>
+            <div class="mt-auto">
+              <a
+                href="https://usebottles.com/posts/2023-10-05-bottles-next-a-new-chapter/"
+                class="flex items-center justify-center bg-white text-gray-800 border border-gray-300 py-2 px-4 rounded-lg hover:bg-gray-100 transition-all dark:bg-gray-700 dark:text-white dark:border-gray-700 dark:hover:bg-gray-800"
+              >
+                <Icon
+                  name="material-symbols:menu-book-outline"
+                  class="w-5 h-5 mr-2"
+                />
+                README
+              </a>
+            </div>
           </div>
         </div>
-      </div>
-    </section>
-
-    <section class="py-5">
-      <h2 class="text-3xl font-bold mb-4 text-gray-900 dark:text-white">
-        Thanks to them who made a donation or became our GitHub sponsor ❤️!
-      </h2>
-      <div class="flex flex-wrap mb-8 mt-8 gap-4" id="github">
-        <!-- JS will inject people here -->
-      </div>
+      </section>
+
+      <section class="py-5">
+        <h2 class="text-3xl font-bold mb-4 text-gray-900 dark:text-white">
+          Thanks to them who made a donation or became our GitHub sponsor ❤️!
+        </h2>
+        <div class="flex flex-wrap mb-8 mt-8 gap-4" id="github">
+          <!-- JS will inject people here -->
+        </div>
 
-      <h3 class="text-2xl font-bold mb-4 text-gray-900 dark:text-white">
-        Other platforms
-      </h3>
-      <div class="flex flex-wrap mb-8 gap-4" id="other">
-        <!-- JS will inject people here -->
-      </div>
+        <h3 class="text-2xl font-bold mb-4 text-gray-900 dark:text-white">
+          Other platforms
+        </h3>
+        <div class="flex flex-wrap mb-8 gap-4" id="other">
+          <!-- JS will inject people here -->
+        </div>
 
-      <p class="text-center text-gray-800 dark:text-gray-300">
-        - Thanks from the Bottles Developers.
-      </p>
+        <p class="text-center text-gray-800 dark:text-gray-300">
+          - Thanks from the Bottles Developers.
+        </p>
+      </section>
     </section>
-  </div>
 
-  <div
-    id="donationModal"
-    class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center hidden z-20"
-  >
     <div
-      class="bg-white dark:bg-gray-900 p-8 rounded-lg shadow-lg w-1/3 text-center"
+      id="donationModal"
+      class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center hidden z-20"
     >
-      <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">
-        Thank You!
-      </h2>
-      <p class="text-lg text-gray-700 dark:text-gray-300 mb-4">
-        We sincerely appreciate your donation. Your support helps us keep
-        Bottles growing and improving.
-      </p>
-      <button
-        id="closeModal"
-        class="bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600 transition-all"
-        >Close</button
+      <div
+        class="bg-white dark:bg-gray-900 p-8 rounded-lg shadow-lg w-1/3 text-center"
       >
+        <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">
+          Thank You!
+        </h2>
+        <p class="text-lg text-gray-700 dark:text-gray-300 mb-4">
+          We sincerely appreciate your donation. Your support helps us keep
+          Bottles growing and improving.
+        </p>
+        <button
+          id="closeModal"
+          class="bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600 transition-all"
+          >Close</button
+        >
+      </div>
     </div>
-  </div>
 
-  <div
-    id="infoModal"
-    class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center hidden z-20"
-  >
     <div
-      class="bg-white dark:bg-gray-900 p-8 rounded-lg shadow-lg w-1/3 text-center"
+      id="infoModal"
+      class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center hidden z-20"
     >
-      <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">
-        Progress Information
-      </h2>
-      <p
-        id="infoModalText"
-        class="text-lg text-gray-700 dark:text-gray-300 mb-4"
-      >
-        Progress is calculated based on the completion status of each task.
-      </p>
-      <button
-        id="closeInfoModal"
-        class="bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600 transition-all"
-        >Close</button
+      <div
+        class="bg-white dark:bg-gray-900 p-8 rounded-lg shadow-lg w-1/3 text-center"
       >
+        <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">
+          Progress Information
+        </h2>
+        <p
+          id="infoModalText"
+          class="text-lg text-gray-700 dark:text-gray-300 mb-4"
+        >
+          Progress is calculated based on the completion status of each task.
+        </p>
+        <button
+          id="closeInfoModal"
+          class="bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600 transition-all"
+          >Close</button
+        >
+      </div>
     </div>
   </div>
-</Layout>
 
-<script>
-  interface Sponsor {
-    username: string;
-    avatar: string;
-  }
-
-  interface PeopleList {
-    github: Sponsor[];
-    other: string[];
-  }
-
-  class Donations {
-    domSelector: string;
-    list: PeopleList;
-
-    constructor(domSelector: string, list: PeopleList) {
-      this.domSelector = domSelector;
-      this.list = list;
-      this.renderPeople();
+  <script>
+    interface Sponsor {
+      username: string;
+      avatar: string;
     }
 
-    async renderPeople(): Promise<void> {
-      const githubPeople = await this.getGitHubSponsors();
-      const otherPeople = this.list.other;
-      this.addSection("#github", githubPeople, true);
-      this.addSection("#other", otherPeople);
+    interface PeopleList {
+      github: Sponsor[];
+      other: string[];
     }
 
-    addSection(
-      sectionDOM: string,
-      personList: Sponsor[] | string[],
-      hasPic: boolean = false
-    ) {
-      let sectionHtml = ``;
-      personList.forEach((person) => {
-        if (typeof person === "string") {
-          sectionHtml += this.getPersonMarkup(person, hasPic);
-        } else {
-          sectionHtml += this.getPersonMarkup(
-            person.username,
-            hasPic,
-            person.avatar
-          );
-        }
-      });
-      document
-        .querySelector(sectionDOM)
-        ?.insertAdjacentHTML("beforeend", sectionHtml);
-    }
+    class Donations {
+      domSelector: string;
+      list: PeopleList;
+
+      constructor(domSelector: string, list: PeopleList) {
+        this.domSelector = domSelector;
+        this.list = list;
+        this.renderPeople();
+      }
+
+      async renderPeople(): Promise<void> {
+        const githubPeople = await this.getGitHubSponsors();
+        const otherPeople = this.list.other;
+        this.addSection("#github", githubPeople, true);
+        this.addSection("#other", otherPeople);
+      }
+
+      addSection(
+        sectionDOM: string,
+        personList: Sponsor[] | string[],
+        hasPic: boolean = false
+      ) {
+        let sectionHtml = ``;
+        personList.forEach((person) => {
+          if (typeof person === "string") {
+            sectionHtml += this.getPersonMarkup(person, hasPic);
+          } else {
+            sectionHtml += this.getPersonMarkup(
+              person.username,
+              hasPic,
+              person.avatar
+            );
+          }
+        });
+        document
+          .querySelector(sectionDOM)
+          ?.insertAdjacentHTML("beforeend", sectionHtml);
+      }
 
-    getPersonMarkup(
-      person: string,
-      hasPic: boolean,
-      avatarUrl: string = ""
-    ): string {
-      return `<div class="flex items-center space-x-2">
+      getPersonMarkup(
+        person: string,
+        hasPic: boolean,
+        avatarUrl: string = ""
+      ): string {
+        return `<div class="flex items-center space-x-2">
           ${
             hasPic
               ? `<img src="${avatarUrl}" alt="${person}" class="w-12 h-12 rounded-full">`
@@ -525,104 +629,145 @@ import { Icon } from "astro-icon/components";
           }
           <span class="bg-gray-100 dark:bg-gray-800 px-4 py-2 rounded-lg text-center">${person}</span>
         </div>`;
-    }
+      }
 
-    async getGitHubSponsors(): Promise<Sponsor[]> {
-      try {
-        const response = await fetch(
-          "https://ghs.vercel.app/v2/sponsors/bottlesdevs"
-        );
-        const data = await response.json();
-        const allSponsors = [
-          ...data.sponsors.current,
-          ...data.sponsors.past,
-        ].map((sponsor: { username: string; avatar: string }) => ({
-          username: sponsor.username,
-          avatar: sponsor.avatar,
-        }));
-        return allSponsors;
-      } catch (error) {
-        console.error("Error fetching GitHub sponsors:", error);
-        return [];
+      async getGitHubSponsors(): Promise<Sponsor[]> {
+        try {
+          const response = await fetch(
+            "https://ghs.vercel.app/v2/sponsors/bottlesdevs"
+          );
+          const data = await response.json();
+          const allSponsors = [
+            ...data.sponsors.current,
+            ...data.sponsors.past,
+          ].map((sponsor: { username: string; avatar: string }) => ({
+            username: sponsor.username,
+            avatar: sponsor.avatar,
+          }));
+          return allSponsors;
+        } catch (error) {
+          console.error("Error fetching GitHub sponsors:", error);
+          return [];
+        }
       }
     }
-  }
-
-  const people: PeopleList = {
-    github: [],
-    other: [
-      "Christopher (kit) Eubanks",
-      "Black_file",
-      "Chris",
-      "Robin Lee",
-      "Andrew Ego",
-      "Sonny Piers",
-      "Dan G",
-      "Caleb Woodbine",
-      "Robert Krisztian Sandor",
-      "+ All the anonymous donations",
-    ],
-  };
-
-  document.addEventListener("DOMContentLoaded", () => {
-    new Donations("#people", people);
-
-    const urlParams = new URLSearchParams(window.location.search);
-    if (urlParams.has("thankyou")) {
-      document.getElementById("donationModal")?.classList.remove("hidden");
-    }
-
-    document.getElementById("closeModal")?.addEventListener("click", () => {
-      document.getElementById("donationModal")?.classList.add("hidden");
-    });
 
-    document.getElementById("closeInfoModal")?.addEventListener("click", () => {
-      document.getElementById("infoModal")?.classList.add("hidden");
-    });
+    const people: PeopleList = {
+      github: [],
+      other: [
+        "Christopher (kit) Eubanks",
+        "Black_file",
+        "Chris",
+        "Robin Lee",
+        "Andrew Ego",
+        "Sonny Piers",
+        "Dan G",
+        "Caleb Woodbine",
+        "Robert Krisztian Sandor",
+        "+ All the anonymous donations",
+      ],
+    };
+
+    document.addEventListener("DOMContentLoaded", () => {
+      new Donations("#people", people);
+
+      const urlParams = new URLSearchParams(window.location.search);
+      if (urlParams.has("thankyou")) {
+        document.getElementById("donationModal")?.classList.remove("hidden");
+      }
 
-    const filterButtons = document.querySelectorAll(".filter-button");
-    const searchInput = document.getElementById("searchInput");
-    const resetButton = document.getElementById("resetButton");
-    const taskCards = document.querySelectorAll(".task-card");
+      document.getElementById("closeModal")?.addEventListener("click", () => {
+        document.getElementById("donationModal")?.classList.add("hidden");
+      });
 
-    let currentStatusFilter = "";
-    let currentSearchQuery = "";
+      document
+        .getElementById("closeCryptoModal")
+        ?.addEventListener("click", () => {
+          document.getElementById("cryptoModal")?.classList.add("hidden");
+        });
 
-    function updateTasksDisplay() {
-      taskCards.forEach((card) => {
-        const cardStatus = card.getAttribute("data-status");
-        // @ts-ignore
-        const title = card.getAttribute("data-title").toLowerCase();
-        // @ts-ignore
-        const description = card.querySelector("p").textContent.toLowerCase();
-        let matchesStatus = true;
-        let matchesSearch = true;
+      document
+        .getElementById("closeInfoModal")
+        ?.addEventListener("click", () => {
+          document.getElementById("infoModal")?.classList.add("hidden");
+        });
 
-        if (currentStatusFilter !== "") {
-          matchesStatus = cardStatus === currentStatusFilter;
-        }
+      const filterButtons = document.querySelectorAll(".filter-button");
+      const searchInput = document.getElementById("searchInput");
+      const resetButton = document.getElementById("resetButton");
+      const taskCards = document.querySelectorAll(".task-card");
 
-        if (currentSearchQuery !== "") {
-          matchesSearch =
-            title.includes(currentSearchQuery) ||
-            description.includes(currentSearchQuery);
-        }
+      let currentStatusFilter = "";
+      let currentSearchQuery = "";
 
-        if (matchesStatus && matchesSearch) {
+      function updateTasksDisplay() {
+        taskCards.forEach((card) => {
+          const cardStatus = card.getAttribute("data-status");
           // @ts-ignore
-          card.style.display = "";
-        } else {
+          const title = card.getAttribute("data-title").toLowerCase();
           // @ts-ignore
-          card.style.display = "none";
-        }
+          const description = card.querySelector("p").textContent.toLowerCase();
+          let matchesStatus = true;
+          let matchesSearch = true;
+
+          if (currentStatusFilter !== "") {
+            matchesStatus = cardStatus === currentStatusFilter;
+          }
+
+          if (currentSearchQuery !== "") {
+            matchesSearch =
+              title.includes(currentSearchQuery) ||
+              description.includes(currentSearchQuery);
+          }
+
+          if (matchesStatus && matchesSearch) {
+            // @ts-ignore
+            card.style.display = "";
+          } else {
+            // @ts-ignore
+            card.style.display = "none";
+          }
+        });
+      }
+
+      filterButtons.forEach((button) => {
+        button.addEventListener("click", () => {
+          const status = button.getAttribute("data-status");
+          // @ts-ignore
+          currentStatusFilter = status;
+          filterButtons.forEach((btn) => {
+            btn.classList.remove("active", "bg-blue-500", "text-white");
+            btn.classList.add(
+              "bg-gray-200",
+              "dark:bg-gray-700",
+              "text-black",
+              "dark:text-white"
+            );
+          });
+          button.classList.add("active", "bg-blue-500", "text-white");
+          button.classList.remove(
+            "bg-gray-200",
+            "dark:bg-gray-700",
+            "text-black",
+            "dark:text-white"
+          );
+          updateTasksDisplay();
+        });
+      });
+
+      // @ts-ignore
+      searchInput.addEventListener("input", () => {
+        // @ts-ignore
+        currentSearchQuery = searchInput.value.toLowerCase();
+        updateTasksDisplay();
       });
-    }
 
-    filterButtons.forEach((button) => {
-      button.addEventListener("click", () => {
-        const status = button.getAttribute("data-status");
+      // @ts-ignore
+      resetButton.addEventListener("click", () => {
+        currentStatusFilter = "";
+        currentSearchQuery = "";
         // @ts-ignore
-        currentStatusFilter = status;
+        searchInput.value = "";
         filterButtons.forEach((btn) => {
           btn.classList.remove("active", "bg-blue-500", "text-white");
           btn.classList.add(
@@ -632,40 +777,8 @@ import { Icon } from "astro-icon/components";
             "dark:text-white"
           );
         });
-        button.classList.add("active", "bg-blue-500", "text-white");
-        button.classList.remove(
-          "bg-gray-200",
-          "dark:bg-gray-700",
-          "text-black",
-          "dark:text-white"
-        );
         updateTasksDisplay();
       });
     });
-
-    // @ts-ignore
-    searchInput.addEventListener("input", () => {
-      // @ts-ignore
-      currentSearchQuery = searchInput.value.toLowerCase();
-      updateTasksDisplay();
-    });
-
-    // @ts-ignore
-    resetButton.addEventListener("click", () => {
-      currentStatusFilter = "";
-      currentSearchQuery = "";
-      // @ts-ignore
-      searchInput.value = "";
-      filterButtons.forEach((btn) => {
-        btn.classList.remove("active", "bg-blue-500", "text-white");
-        btn.classList.add(
-          "bg-gray-200",
-          "dark:bg-gray-700",
-          "text-black",
-          "dark:text-white"
-        );
-      });
-      updateTasksDisplay();
-    });
-  });
-</script>
+  </script>
+</Layout>