#2: Add a separate page for sponsors and donators

shalithasuranga · shalithasuranga · commit 409c58d4d226 · 2021-06-13T14:42:35.000+05:30
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -32,6 +32,11 @@ module.exports = {
           position: 'left',
           label: 'Shalitha Suranga',
         },
+        {
+          to: 'sponsors',
+          position: 'left',
+          label: 'Sponsors',
+        },
         {
           href: 'https://github.com/codezri',
           label: 'GitHub',
diff --git a/src/components/Sponsors.js b/src/components/Sponsors.js
@@ -0,0 +1,71 @@
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import styles from './Sponsors.module.css';
+
+const ProjectsList = [
+  {
+    name: 'MacStadium',
+    image: 'img/sponsors/macstadium.png',
+    description: (
+      <>
+      MacStadium is the only provider of enterprise-class cloud solutions for Mac and iOS app development.
+      They offered us a free remotely-accessed physical mac-mini for Neutralinojs-mac development.
+      </>
+    ),
+    link: 'https://www.macstadium.com'
+  }
+];
+
+const DonatorsList = ['Just Epic',
+        'Brian McGonagill',
+        'Brian',
+        'Mortarwork Studios'];
+
+function Sponsor({sponsor}) {
+  return (
+    <div className={clsx('col col--4', styles.sponsor, 'padding-vert--md')}>
+      <div className="text--center">
+        <img src={sponsor.image} alt={sponsor.name} />
+      </div>
+      <div className="text--center padding-horiz--md padding-vert--sm">
+        <h3>{sponsor.name}</h3>
+        <p>{sponsor.description}</p>
+        <Link
+          className="button button--secondary"
+          href={sponsor.link}>
+          Go to website
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+function Donator(props) {
+  return (
+    <li>{props.name}</li>
+  );
+}
+
+export default function Sponsors() {
+  return (
+    <section className={styles.sponsors}>
+      <div className="container">
+        <h1>Sponsors</h1>
+        <div className="row">
+          {ProjectsList.map((props, idx) => (
+            <Sponsor key={idx} sponsor={props} />
+          ))}
+        </div>
+        <h1 className="margin-top--lg">Monthly Donators</h1>
+        <div className="row">
+          <ul>
+            {DonatorsList.map((props, idx) => (
+              <Donator key={idx} name={props} />
+            ))}
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/Sponsors.module.css b/src/components/Sponsors.module.css
@@ -0,0 +1,15 @@
+/* stylelint-disable docusaurus/copyright-header */
+
+.sponsors {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.sponsors img {
+  height: 200px;
+  width: 200px;
+  border: solid 0.5em rgba(144, 144, 144, 0.25);
+  border-radius: 100%;
+}
diff --git a/src/pages/sponsors.js b/src/pages/sponsors.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import clsx from 'clsx';
+import Layout from '@theme/Layout';
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import styles from './index.module.css';
+import Sponsors from '../components/Sponsors';
+
+function SponsorsHeader() {
+  const {siteConfig} = useDocusaurusContext();
+  return (
+    <header className={clsx('hero hero--primary', styles.heroBanner)}>
+      <div className="container">
+        <h1 className="hero__title">{siteConfig.title} Sponsors</h1>
+        <p className="hero__subtitle">Organizations and individuals who support our works</p>
+      </div>
+    </header>
+  );
+}
+
+export default function Home() {
+  const {siteConfig} = useDocusaurusContext();
+  return (
+    <Layout
+      title={`${siteConfig.title} Sponsors`}
+      description={`Organizations and individuals around the world support ${siteConfig.title}. 
+      Get your name added here by sponsoring or making a recurring donation.`}>
+      <SponsorsHeader />
+      <main>
+        <Sponsors />
+      </main>
+      <div className={clsx('hero hero--primary', styles.heroBanner)}>
+        <div className="container">
+          <h1 className="hero__title">{`Support ${siteConfig.title}`}</h1>
+          <p className="hero__subtitle">
+            Would you like to support our works and get listed above?
+          </p>
+          <div className={styles.buttons}>
+            <Link
+              className={clsx(
+                'button button--secondary button--lg',
+                styles.getStarted,
+              )}
+              href="https://forms.gle/mTxB9gdKsdWPkwBQA">
+              Sponsor
+            </Link>
+            <Link
+              className={clsx(
+                'button button--secondary button--lg margin-left--sm',
+                styles.getStarted,
+              )}
+              href="https://www.patreon.com/shalithasuranga">
+              Donate
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+}
diff --git a/static/img/sponsors/macstadium.png b/static/img/sponsors/macstadium.png
