From bb52ec0cc1eec42a9183adaddb0fe5b882ed7051 Mon Sep 17 00:00:00 2001
From: Razze <razzeee@gmail.com>
Date: Fri, 1 Nov 2024 17:27:52 +0100
Subject: [PATCH] Restyle donations page

---
 frontend/pages/donate.tsx                     | 61 ++++++++++++++++++-
 .../src/components/payment/DonationInput.tsx  |  4 +-
 2 files changed, 61 insertions(+), 4 deletions(-)

diff --git a/frontend/pages/donate.tsx b/frontend/pages/donate.tsx
index 4b5169ea4..f99903be2 100644
--- a/frontend/pages/donate.tsx
+++ b/frontend/pages/donate.tsx
@@ -1,10 +1,11 @@
 import { GetStaticProps } from "next"
-import { useTranslation } from "next-i18next"
+import { Trans, useTranslation } from "next-i18next"
 import { serverSideTranslations } from "next-i18next/serverSideTranslations"
 import { NextSeo } from "next-seo"
 import LoginGuard from "../src/components/login/LoginGuard"
 import DonationInput from "../src/components/payment/DonationInput"
 import { Permission, UserInfo } from "src/codegen"
+import clsx from "clsx"
 
 export default function Donate() {
   const { t } = useTranslation()
@@ -26,7 +27,63 @@ export default function Donate() {
           <h1 className="pt-12 text-4xl font-extrabold">
             {t("donate-to", { project: "Flathub" })}
           </h1>
-          <DonationInput org="org.flathub.Flathub" />
+          <div
+            className={clsx(
+              "grid grid-cols-1 gap-x-8 gap-y-5 lg:mx-0 lg:max-w-none lg:grid-cols-3",
+            )}
+          >
+            <div className="col-span-1 lg:col-span-2 mx-0 mt-5 rounded-xl bg-flathub-white p-5 dark:bg-flathub-arsenic">
+              <p className="prose dark:prose-invert">
+                <Trans i18nKey={"common:donate-flatpak-description"}>
+                  <ul>
+                    <li>
+                      🌐 <strong>Flathub welcomes your donations</strong>: Your
+                      support helps maintain the app repository for Flatpak
+                      applications and keeps its vital infrastructure in top
+                      shape
+                    </li>
+                    <li>
+                      💰 <strong>Where your funds go</strong>:
+                      <ul>
+                        <li>
+                          🌐 <strong>Infrastructure</strong>: Keep the platform
+                          running smoothly
+                        </li>
+                        <li>
+                          💻 <strong>Hosting services</strong>: Cover the costs
+                          of keeping everything online and accessible
+                        </li>
+                        <li>
+                          📦 <strong>Software development</strong>: Cover the
+                          costs of developing Flathub and related tools
+                        </li>
+                        <li>
+                          🚀 <strong>Development</strong>: Support ongoing
+                          development of Flatpak technology, enhancing its
+                          features and expanding its reach
+                        </li>
+                        <li>
+                          🔧 <strong>Portal development</strong>: Support the
+                          creation and improvement of portals, which provide
+                          secure, easy access to system services for Flatpak
+                          apps
+                        </li>
+                      </ul>
+                    </li>
+                    <li>
+                      🌟 <strong>Your impact</strong>: Every contribution helps
+                      create a robust and diverse ecosystem of apps for all
+                      Linux users
+                    </li>
+                  </ul>
+                  <p>
+                    <strong>Your support makes a difference!</strong> 🙌
+                  </p>
+                </Trans>
+              </p>
+            </div>
+            <DonationInput org="org.flathub.Flathub" />
+          </div>
         </LoginGuard>
       </div>
     </>
diff --git a/frontend/src/components/payment/DonationInput.tsx b/frontend/src/components/payment/DonationInput.tsx
index 1e034fb7a..c1ff60fd4 100644
--- a/frontend/src/components/payment/DonationInput.tsx
+++ b/frontend/src/components/payment/DonationInput.tsx
@@ -85,13 +85,13 @@ const DonationInput: FunctionComponent<Props> = ({ org }) => {
 
   return (
     <form
-      className="mx-0 my-5 flex flex-col gap-5 rounded-xl bg-flathub-white p-5 dark:bg-flathub-arsenic"
+      className="mx-0 mt-5 flex flex-col gap-5 rounded-xl bg-flathub-white p-5 dark:bg-flathub-arsenic h-min"
       onSubmit={handleSubmit}
     >
       <h4 className="m-0 text-base font-normal">
         {t("select-donation-amount")}
       </h4>
-      <div className="grid grid-cols-2 lg:grid-cols-4 items-center justify-center gap-5">
+      <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4 items-center justify-center gap-3">
         {presets}
       </div>
       <div className="pt-5">