docs: restructure README sponsor section and add pink fund button to docs

Fold the sponsor call-to-action into the Contributing section as a
natural bullet point instead of a standalone heavy section. Remove
the large badge buttons. Keep star history chart under Contributing.

Add a pink "Fund Development" button component to the docs site nav
bar (left of Star on GitHub), matching the landing page style.
Remove the plain-text nav link that replaced the heart icon.

README.md

@@ -82,23 +82,7 @@ We welcome bug reports, feature ideas, and pull requests. See [CONTRIBUTING.md](
 - [Open an issue](https://github.com/snapotter-hq/snapotter/issues)
 - [Submit a PR](CONTRIBUTING.md#code-requires-cla)
 - [Join Discord](https://discord.gg/hr3s7HPUsr) for help and discussion
-
+- [Fund development](https://github.com/sponsors/snapotter-hq) to keep SnapOtter free for everyone
-## Support SnapOtter
-
-<p align="center">
-  If SnapOtter saves you time, money, or both, consider starring the repo or sponsoring the project.<br>
-  Stars help others discover SnapOtter. Sponsorships fund development and keep it free for everyone.
-</p>
-
-<p align="center">
-  <a href="https://github.com/snapotter-hq/SnapOtter/stargazers">
-    <img src="https://img.shields.io/github/stars/snapotter-hq/SnapOtter?style=for-the-badge&logo=github&color=yellow" alt="Star SnapOtter">
-  </a>
-  &nbsp;
-  <a href="https://github.com/sponsors/snapotter-hq">
-    <img src="https://img.shields.io/badge/Sponsor-pink?style=for-the-badge&logo=githubsponsors&logoColor=white" alt="Sponsor SnapOtter">
-  </a>
-</p>
 
 <p align="center">
   <a href="https://star-history.com/#snapotter-hq/SnapOtter&Date">

apps/docs/.vitepress/config.mts

@@ -78,10 +78,6 @@ export default defineConfig({
       { text: "Home", link: "/" },
       { text: "Guide", link: "/guide/getting-started" },
       { text: "API Reference", link: "/api/rest" },
-      {
-        text: "Fund Development",
-        link: "https://github.com/sponsors/snapotter-hq",
-      },
       {
         text: `v${pkg.version}`,
         link: "https://github.com/snapotter-hq/snapotter/releases",

apps/docs/.vitepress/theme/FundButton.vue

@@ -0,0 +1,14 @@
+<template>
+  <a
+    href="https://github.com/sponsors/snapotter-hq"
+    target="_blank"
+    rel="noopener"
+    class="fund-btn"
+    title="Fund Development"
+  >
+    <svg class="fund-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
+    </svg>
+    <span>Fund Development</span>
+  </a>
+</template>

apps/docs/.vitepress/theme/Layout.vue

@@ -1,6 +1,7 @@
 <script setup>
 import VPSwitchAppearance from "vitepress/dist/client/theme-default/components/VPSwitchAppearance.vue";
 import DefaultTheme from "vitepress/theme";
+import FundButton from "./FundButton.vue";
 import GitHubStars from "./GitHubStars.vue";
 
 const { Layout } = DefaultTheme;
@@ -11,6 +12,7 @@ const { Layout } = DefaultTheme;
     <template #nav-bar-content-after>
       <div class="nav-bar-right">
         <VPSwitchAppearance />
+        <FundButton />
         <GitHubStars />
       </div>
     </template>

apps/docs/.vitepress/theme/github-stars.css

@@ -111,9 +111,49 @@
   border-radius: 6px 0 0 6px;
 }
 
-/* Hide stars on small screens, keep toggle */
+/* Fund Development button */
+.fund-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 10px;
+  height: 30px;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 30px;
+  color: #db2777;
+  background: rgba(219, 39, 119, 0.08);
+  border: 1px solid rgba(219, 39, 119, 0.3);
+  border-radius: 6px;
+  text-decoration: none;
+  transition: border-color 0.25s, background 0.25s;
+  white-space: nowrap;
+}
+
+.fund-btn:hover {
+  background: rgba(219, 39, 119, 0.15);
+  border-color: rgba(219, 39, 119, 0.5);
+}
+
+.fund-icon {
+  flex-shrink: 0;
+}
+
+.dark .fund-btn {
+  color: #f472b6;
+  background: rgba(244, 114, 182, 0.08);
+  border-color: rgba(244, 114, 182, 0.25);
+}
+
+.dark .fund-btn:hover {
+  background: rgba(244, 114, 182, 0.15);
+  border-color: rgba(244, 114, 182, 0.4);
+}
+
+/* Hide stars and fund button on small screens, keep toggle */
 @media (max-width: 640px) {
-  .github-btn-wrapper {
+  .github-btn-wrapper,
+  .fund-btn {
     display: none;
   }
 }