sponsor: Add an introduction.

src/app/constants.ts

@@ -20,6 +20,9 @@ export const changelogUrl =
 /** URL to main Pybricks website. */
 export const pybricksWebsiteUrl = 'https://pybricks.com';
 
+/** URL to Pybricks team page. */
+export const pybricksTeamUrl = 'https://pybricks.com/about/#the-pybricks-team';
+
 /** URL to Pybricks support site. */
 export const pybricksSupportUrl = 'https://github.com/pybricks/support/discussions';
 

src/sponsor/SponsorDialog.tsx

@@ -5,6 +5,7 @@ import { AnchorButton, Classes, Dialog, Intent } from '@blueprintjs/core';
 import classNames from 'classnames';
 import React from 'react';
 import { useDispatch } from 'react-redux';
+import { pybricksTeamUrl } from '../app/constants';
 import { useSelector } from '../reducers';
 import ExternalLinkIcon from '../utils/ExternalLinkIcon';
 import patreonLogo from './Digital-Patreon-Logo_White.png';
@@ -27,6 +28,30 @@ const SponsorDialog: React.VoidFunctionComponent = () => {
             icon="heart"
         >
             <div className={classNames(Classes.DIALOG_BODY, Classes.RUNNING_TEXT)}>
+                <h4>{i18n.translate('whoAreWe.heading')}</h4>
+                <p>
+                    {i18n.translate('whoAreWe.team')}{' '}
+                    <a href={pybricksTeamUrl} target="_blank" rel="noreferrer">
+                        {i18n.translate('whoAreWe.learnMore')}
+                    </a>
+                    <ExternalLinkIcon />
+                </p>
+
+                <p>{i18n.translate('whoAreWe.mission')}</p>
+                <h4>{i18n.translate('whyDonate.heading')}</h4>
+                <p>{i18n.translate('whyDonate.body')}</p>
+                <p>
+                    <ul>
+                        <li>{i18n.translate('donateReason.keepPybricksFree')}</li>
+                        <li>{i18n.translate('donateReason.supportNewHubs')}</li>
+                        <li>{i18n.translate('donateReason.writeDocs')}</li>
+                        <li>{i18n.translate('donateReason.exploreFeatures')}</li>
+                        <li>{i18n.translate('donateReason.supportOthers')}</li>
+                    </ul>
+                </p>
+                <h4>{i18n.translate('donateOptions.heading')}</h4>
+                <p>{i18n.translate('donateOptions.options')}</p>
+                <p>{i18n.translate('donateOptions.thanks')}</p>
                 <p>
                     <AnchorButton
                         large={true}

src/sponsor/translations/en.json

@@ -1,3 +1,25 @@
 {
-    "title": "Sponsor {pybricks}"
+    "title": "Sponsor {pybricks}",
+    "whoAreWe": {
+        "heading": "Who are we?",
+        "team": "Pybricks is run by a small team, supported by a community of open source coding enthusiasts from all around the world.",
+        "learnMore": "Learn more.",
+        "mission": "Our mission is to make robotics fun and accessible and teach a million people how to code. And you can help!"
+    },
+    "whyDonate": {
+        "heading": "Why donate?",
+        "body": "Donations help us to:"
+    },
+    "donateReason": {
+        "keepPybricksFree": "Keep Pybricks free for everyone.",
+        "supportNewHubs": "Support Pybricks on new hubs, motors and sensors.",
+        "writeDocs": "Create documentation and tutorials.",
+        "exploreFeatures": "Explore big new features like multi-tasking or block-based coding.",
+        "supportOthers": "Support projects that Pybricks builds on, like MicroPython."
+    },
+    "donateOptions": {
+        "heading": "How to donate",
+        "options": "You can use the links below for a one-time or monthly donation.",
+        "thanks": "Thank you, we really appreciate it!"
+    }
 }