doc: sponsors

docs/intro.mdx

@@ -6,6 +6,7 @@ hide_title: true
 ---
 
 import { TopBanners } from "@site/src/components/TopBanners";
+import { SponsorList } from "@site/src/components/SponsorList";
 
 <TopBanners />
 
@@ -147,3 +148,9 @@ docker run --rm --volume /var/run/docker.sock:/var/run/docker.sock containrrr/wa
 In the last part of the command, replace `open-webui` with your container name if it is different.
 
 Continue with the full [getting started guide](/getting-started).
+
+## Sponsors 🙌
+
+We are incredibly grateful for the generous support of our sponsors. Their contributions help us to maintain and improve our project, ensuring we can continue to deliver quality work to our community. Thank you!
+
+<SponsorList />

src/components/SponsorList.js

@@ -0,0 +1,21 @@
+import { Sponsor } from "@site/src/components/Sponsors/Sponsor";
+
+export const SponsorList = () => {
+  const sponsors = [
+    {
+      imgSrc: "/sponsors/sponsor.png",
+      url: "https://openwebui.com",
+      name: "Open WebUI",
+      description:
+        "On a mission to build the best open-source AI user interface.",
+    },
+  ];
+
+  return (
+    <div className=" flex gap-5 flex-wrap items-center justify-center">
+      {sponsors.map((sponsor) => (
+        <Sponsor sponsor={sponsor} />
+      ))}
+    </div>
+  );
+};

src/components/Sponsors/Sponsor.js

@@ -0,0 +1,32 @@
+export const Sponsor = ({ sponsor }) => {
+  return (
+    <>
+      <div className="flex flex-col mb-2 ">
+        <div className="text-[0.6rem] text-gray-500 dark:text-gray-400 font-bold underline mb-1.5">
+          <a href={sponsor.url} target="_blank">
+            {sponsor.name}
+          </a>
+        </div>
+
+        <a a href={sponsor.url} target="_blank">
+          <div className="flex w-32 md:w-48 gap-2.5 items-start">
+            <div className=" basis-1/2">
+              <img
+                className="rounded-xl "
+                loading="lazy"
+                alt={sponsor.name}
+                src={sponsor.imgSrc}
+              />
+            </div>
+
+            <div className=" basis-1/2 flex">
+              <div className=" text-[0.6rem] text-gray-500 dark:text-gray-400 font-bold  line-clamp-4 md:line-clamp-5 no-underline">
+                {sponsor.description}
+              </div>
+            </div>
+          </div>
+        </a>
+      </div>
+    </>
+  );
+};