doc: add generous sponsor Marblism (#330)

* doc: add generous sponsor Marblism

* remove unused code

* fix build error

Author: jiashengguo

src/components/Sponsorship.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+export default function Sponsorship(): JSX.Element {
+    return (
+        <div className="flex justify-center w-full">
+            <div className="flex flex-col text-center xl:w-3/4">
+                <h2 className="text-2xl md:text-3xl lg:text-4xl pb-20">Our Generous Sponsors</h2>
+                <div className="flex flex-auto justify-center">
+                    <Sponsor src="/img/logo/marblism-logo.png" name="Marblism" website="https://www.marblism.com/" />
+                </div>
+            </div>
+        </div>
+    );
+}
+
+function Sponsor({ src, name, website }: { src: string; name: string; website: string }): JSX.Element {
+    const alt = src.split('/').pop()?.split('.')[0] ?? 'logo';
+    return (
+        <a href={website} target="_blank" className="no-underline">
+            <img src={src} className="h-40 object-contain" alt={alt} />
+            <h2>{name}</h2>
+        </a>
+    );
+}

src/pages/index.tsx

@@ -10,6 +10,7 @@ import { description } from '../lib/content';
 import styles from './index.module.css';
 import FrameworkIntegration from '../components/FrameworkIntegration';
 import VOC from '../components/VOCFlat';
+import Sponsorship from '../components/Sponsorship';
 
 function Header() {
     return (
@@ -79,6 +80,29 @@ function Section({ children, className }: { children: React.ReactNode; className
     );
 }
 
+function Logo({
+    src,
+    darkSrc,
+    darkModeBrightness,
+}: {
+    src: string;
+    darkSrc?: string;
+    darkModeBrightness?: number;
+}): JSX.Element {
+    const alt = src.split('/').pop()?.split('.')[0] ?? 'logo';
+    return (
+        <>
+            <img src={src} className="h-12 object-contain block dark:hidden" alt={alt} />
+            <img
+                src={darkSrc ?? src}
+                className="h-12 object-contain hidden dark:block"
+                style={darkModeBrightness ? { filter: `brightness(${darkModeBrightness})` } : {}}
+                alt={alt}
+            />
+        </>
+    );
+}
+
 export default function Home(): JSX.Element {
     const { siteConfig } = useDocusaurusContext();
     return (
@@ -105,6 +129,9 @@ export default function Home(): JSX.Element {
                 </Section> */}
 
                 <Section className="bg-slate-50">
+                    <Sponsorship />
+                </Section>
+                <Section>
                     <VOC />
 
                     <div className="flex justify-center w-full mt-32">