Refactor Sponsor component to SponsorSection

docs/src/components/home/Sponsor.tsx → docs/src/components/home/SponsorSection.tsx

@@ -1,32 +1,19 @@
+import { Section } from './Section';
 import React from 'react';
 import { sponsors } from '../../data/sponsors';
 
-export const Sponsor = ({ logo, url }) => {
+const Sponsor = ({ logo, url }) => {
   return (
     <a href={url} target={'_blank'}>
       <img src={logo} height={64} />
     </a>
   );
 };
 
-export const SponsorList = () => {
+const SponsorList = () => {
   return (
     <>
-      <ul
-        className={'list-none flex flex-row items-center gap-8 sm:gap-16 p-0'}
-      >
-        <a
-          href={'https://opencollective.com/mobx#sponsor'}
-          className={
-            'bg-slate-300 hover:bg-blue-300 rounded-lg items-center flex flex-col px-4 py-2 hover:no-underline'
-          }
-        >
-          <div className={'text-5xl'}>+</div>
-          <div className={'text-sm sm:text-xl text-nowrap'}>
-            Become a sponsor
-          </div>
-        </a>
-
+      <ul className={'list-none flex flex-wrap items-center gap-8 p-0'}>
         {sponsors
           .filter((x) => x.active)
           .map((s) => (
@@ -53,3 +40,24 @@ export const SponsorList = () => {
     </>
   );
 };
+
+export function SponsorSection() {
+  return (
+    <Section className={'bg-slate-100'} title={'Sponsors'}>
+      <a
+        href="https://opencollective.com/mobx/donate"
+        target="_blank"
+        className={'w-64 block'}
+      >
+        <img src="https://opencollective.com/mobx/donate/[email protected]?color=blue" />
+      </a>
+
+      <div className={'text-xl my-8'}>
+        We are very thankful to our sponsors to make us part of their{' '}
+        <i>Open Source Software (OSS)</i> program.
+      </div>
+
+      <SponsorList />
+    </Section>
+  );
+}

docs/src/pages/index.tsx

@@ -1,12 +1,12 @@
 import book from '../images/book.png';
-import { SponsorList } from '../components/home/Sponsor';
 import { TestimonialList } from '../components/home/Testimonial';
 import React from 'react';
 import Layout from '@theme/Layout';
 import { Section } from '../components/home/Section';
 import { NutshellSection } from '../components/home/NutshellSection';
 import { HeroSection } from '../components/home/HeroSection';
 import { BadgesSection } from '../components/home/BadgesSection';
+import { SponsorSection } from '../components/home/SponsorSection';
 
 export default function () {
   return (
@@ -21,19 +21,6 @@ export default function () {
   );
 }
 
-function SponsorSection() {
-  return (
-    <Section className={'bg-slate-100'} title={'Sponsors'}>
-      <div className={'text-xl mb-8'}>
-        We are very thankful to our sponsors to make us part of their{' '}
-        <i>Open Source Software (OSS)</i> program.
-      </div>
-
-      <SponsorList />
-    </Section>
-  );
-}
-
 function TestimonialSection() {
   return (
     <Section