Add basic donation page

src/components/Donation.astro

@@ -0,0 +1,82 @@
+---
+const { lang } = Astro.props;
+
+import { getEntry } from "astro:content";
+
+const strings = await getEntry("strings", `${lang}/strings`);
+
+const github = "https://github.com/sponsors/FossifyOrg";
+const patreon = "https://www.patreon.com/naveen3singh";
+const paypal = "https://paypal.me/naveen3singh";
+const liberapay = "https://liberapay.com/naveensingh";
+const opencollective = "https://opencollective.com/fossify";
+const bitcoin = "bc1q5flmuh5f3canqza07cfekjn64p2aqvd2w7pnn3";
+const ethereum = "0x9354fC372BC3BdA58766a8a9Fabadf77A76CdE01";
+const monero =
+    "48FkVUcJ7AGeBMR4SC4J7QU5nAt6YNwKZWz6sGDT1s5haEY7reZtJr5CniXLaQzTzGAuZNoc83BQAcETHw1d3Lkn8AAf1XF";
+const tron = "TGi4VpD1D9A9ZvyP9d3aVowwzMSvev2hub";
+---
+
+<section class="wrapper">
+    <h1>{strings?.data.donation.title}</h1>
+    <p>{strings?.data.donation.description}</p>
+    <div class="support-list">
+        <p>
+            <strong>GitHub Sponsors:</strong>
+            <a href={github} target="_blank">{github}</a>
+        </p>
+        <p>
+            <strong>Patreon:</strong>
+            <a href={patreon} target="_blank">{patreon}</a>
+        </p>
+        <p>
+            <strong>PayPal:</strong>
+            <a href={paypal} target="_blank">{paypal}</a>
+        </p>
+        <p>
+            <strong>Liberapay:</strong>
+            <a href={liberapay} target="_blank">{liberapay}</a>
+        </p>
+        <p>
+            <strong>OpenCollective:</strong>
+            <a href={opencollective} target="_blank">{opencollective}</a>
+        </p>
+        <p><strong>Bitcoin:</strong> <code>{bitcoin}</code></p>
+        <p><strong>Ethereum:</strong><code>{ethereum}</code></p>
+        <p><strong>Monero:</strong> <code>{monero}</code></p>
+        <p><strong>Tron:</strong> <code>{tron}</code></p>
+    </div>
+</section>
+
+<style>
+    section > h1 {
+        text-align: center;
+        font-weight: 600;
+        color: var(--primary);
+        font-size: var(--fs-lg);
+    }
+
+    section > p {
+        text-align: center;
+        margin: 1rem 0;
+    }
+
+    .support-list a {
+        color: var(--primary);
+    }
+
+    .support-list p > strong {
+        font-weight: 600;
+    }
+
+    .support-list p {
+        margin: 0.75rem 0;
+    }
+
+    .support-list code {
+        background-color: var(--surface-container);
+        padding: 0.25rem 0.5rem;
+        border-radius: 0.25rem;
+        margin-right: 0.5rem;
+    }
+</style>

src/components/Hero.astro

@@ -7,18 +7,21 @@ const { lang } = Astro.props;
 import { getEntry } from "astro:content";
 import { Image } from "astro:assets";
 const strings = await getEntry("strings", `${lang}/strings`);
+
+import { getRelativeLocaleUrl } from "astro:i18n";
+
+const donateURL = getRelativeLocaleUrl(lang, "donate");
 ---
 
 <section>
   <div class="text">
     <h1>{strings?.data.hero.title}</h1>
     <p>{strings?.data.hero.subtitle}</p>
-    <button
-      ><a
-        href="https://github.com/FossifyOrg#support-fossify-heart"
-        target="_blank"><Icon name="github" /> {strings?.data.hero.donate}</a
-      ></button
-    >
+    <button>
+      <a href={donateURL}>
+        <Icon name="donation" /> {strings?.data.hero.donate}
+      </a>
+    </button>
   </div>
   <Image
     src={heroImage}

src/content/config.js

@@ -31,6 +31,10 @@ const strings = defineCollection({
         text: z.string()
       })
     }),
+    donation: z.object({
+      title: z.string(),
+      description: z.string(),
+    }),
     products: z.object({
       title: z.string(),
       description: z.string(),

src/content/strings/ar/strings.json

@@ -25,6 +25,10 @@
             "text": "بناء تطبيقات محمولة تحترم الخصوصية للجميع. يعيد Fossify إحياء إرث @SimpleMobileTools، ويصنع أدوات مفتوحة المصدر خالية من الإعلانات وسهلة الاستخدام. نمنح الأفراد والمجتمعات التكنولوجيا التي تحترم خصوصيتهم وتبسط الأمور."
         }
     },
+    "donation": {
+        "title": "Support Fossify ❤️",
+        "description": "If you'd like to support Fossify's development, consider making a donation using any of the following options."
+    },
     "products": {
         "title": "منتجاتنا",
         "description": "تعتبر تطبيقات Fossify مجموعة من التطبيقات المحمولة مدعومة من المجتمع، مفتوحة المصدر، وخالية من الإعلانات. فرع من @SimpleMobileTools الذي لم يعد مُحتفظ به، ونحن هنا لمواصلة التراث، وجلب التكنولوجيا البسيطة والخاصة إلى الجميع.",

src/content/strings/en/strings.json

@@ -25,6 +25,10 @@
             "text": "Building privacy-first mobile apps for everyone. Fossify revives the legacy of @SimpleMobileTools, crafting open-source tools that are ad-free and easy to use. We empower individuals and communities with technology that respects their privacy and keeps things simple."
         }
     },
+    "donation": {
+        "title": "Support Fossify ❤️",
+        "description": "If you'd like to support Fossify's development, consider making a donation using any of the following options."
+    },
     "products": {
         "title": "Our products",
         "description": "Fossify apps are a community-backed, open-source, and ad-free suite of mobile apps. A fork of the @SimpleMobileTools, which is no longer maintained, and we're here to continue the legacy, bringing simple and private tech to everyone.",
@@ -43,4 +47,4 @@
     "footer": {
         "copyright": "Copyright © 2025, All Rights Reserved"
     }
-}
+}

src/pages/donate.astro

@@ -1,16 +1,8 @@
 ---
-const redirectUrl = "https://github.com/FossifyOrg/#support-fossify-heart";
+import Layout from "../layouts/Layout.astro";
+import Donation from "../components/Donation.astro";
 ---
 
-<html lang="en">
-    <head>
-        <meta charset="utf-8" />
-        <title>Redirecting to Donation Page...</title>
-        <meta http-equiv="refresh" content={`0; url=${redirectUrl}`} />
-    </head>
-    <body>
-        <p>
-            If you are not redirected, please <a href={redirectUrl}>click here</a>.
-        </p>
-    </body>
-</html>
+<Layout title="Fossify | Donate" lang="en" dir="ltr">
+    <Donation lang="en" />
+</Layout>