docs: add Special Sponsor program (home band, /sponsor page, READMEs)

apps/docs/build/markdown.ts

@@ -153,7 +153,7 @@ export function applyMarkdownPlugins (md: MarkdownIt, highlighter: DocsHighlight
   registerExampleContainer('gn-example', 'DocsGenesisExample')
 
   // Sponsor container: ::: sponsor ... :::
-  // Renders the standing $1,500/mo Premier sponsor pitch
+  // Renders the $2,000/mo Primary Sponsor teaser (full pitch lives at /sponsor)
   md.use(Container, 'sponsor', {
     render (tokens: MarkdownToken[], index: number) {
       if (tokens[index].nesting === 1) return '<DocsSponsor />\n'

apps/docs/src/components.d.ts

@@ -156,6 +156,7 @@ declare module 'vue' {
     DocsSkeleton: typeof import('./components/docs/DocsSkeleton.vue')['default']
     DocsSkillToggle: typeof import('./components/docs/meta/DocsSkillToggle.vue')['default']
     DocsSponsor: typeof import('./components/docs/DocsSponsor.vue')['default']
+    DocsSponsorSlot: typeof import('./components/docs/DocsSponsorSlot.vue')['default']
     DocsTimeline: typeof import('./components/docs/DocsTimeline.vue')['default']
     DocsToc: typeof import('./components/docs/DocsToc.vue')['default']
     HomeAiFirst: typeof import('./components/home/HomeAiFirst.vue')['default']
@@ -168,11 +169,11 @@ declare module 'vue' {
     HomeEcosystem: typeof import('./components/home/HomeEcosystem.vue')['default']
     HomeFoundation: typeof import('./components/home/HomeFoundation.vue')['default']
     HomeHero: typeof import('./components/home/HomeHero.vue')['default']
+    HomePrimarySponsor: typeof import('./components/home/HomePrimarySponsor.vue')['default']
+    HomeSpecialSponsor: typeof import('./components/home/HomeSpecialSponsor.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    ServicesContactCard: typeof import('./components/services/ServicesContactCard.vue')['default']
     ServicesProjectTiers: typeof import('./components/services/ServicesProjectTiers.vue')['default']
-    ServicesSponsorBand: typeof import('./components/services/ServicesSponsorBand.vue')['default']
     ServicesSupportTiers: typeof import('./components/services/ServicesSupportTiers.vue')['default']
     SkillCard: typeof import('./components/skillz/SkillCard.vue')['default']
     SkillCardDeck: typeof import('./components/skillz/SkillCardDeck.vue')['default']
@@ -185,5 +186,9 @@ declare module 'vue' {
     SkillPrerequisites: typeof import('./components/skillz/SkillPrerequisites.vue')['default']
     SkillzResume: typeof import('./components/skillz/SkillzResume.vue')['default']
     SkillzTour: typeof import('./components/skillz/SkillzTour.vue')['default']
+    SponsorComparison: typeof import('./components/sponsor/SponsorComparison.vue')['default']
+    SponsorCta: typeof import('./components/sponsor/SponsorCta.vue')['default']
+    SponsorHero: typeof import('./components/sponsor/SponsorHero.vue')['default']
+    SponsorIncluded: typeof import('./components/sponsor/SponsorIncluded.vue')['default']
   }
 }

apps/docs/src/components/docs/DocsMermaid.vue

@@ -582,6 +582,74 @@
     fill: var(--v0-on-primary) !important;
   }
 
+  /* Mindmap styling */
+  .docs-mermaid .mindmap-node > rect,
+  .docs-mermaid .mindmap-node > polygon,
+  .docs-mermaid .mindmap-node > circle,
+  .docs-mermaid .mindmap-node > ellipse,
+  .docs-mermaid .mindmap-node > path {
+    fill: var(--v0-surface) !important;
+    stroke: var(--v0-divider) !important;
+  }
+
+  .docs-mermaid .mindmap-node > rect {
+    rx: 8px;
+    ry: 8px;
+  }
+
+  /* Override mermaid's per-branch color rotation (.section-0, .section-1, ...) */
+  .docs-mermaid g[class*="section-"] > rect,
+  .docs-mermaid g[class*="section-"] > polygon,
+  .docs-mermaid g[class*="section-"] > circle,
+  .docs-mermaid g[class*="section-"] > ellipse,
+  .docs-mermaid g[class*="section-"] > path {
+    fill: var(--v0-surface) !important;
+    stroke: var(--v0-divider) !important;
+  }
+
+  .docs-mermaid g[class*="section-"] > rect {
+    rx: 8px;
+    ry: 8px;
+  }
+
+  /* Mindmap root node — primary-colored hub */
+  .docs-mermaid .mindmap-node.section--1 > circle,
+  .docs-mermaid .mindmap-node:has(> circle) > circle {
+    fill: var(--v0-primary) !important;
+    stroke: var(--v0-primary) !important;
+  }
+
+  /* Mermaid sizes foreignObject for the original label measurement;
+     bold text + browser rendering can push descenders past the right edge */
+  .docs-mermaid .mindmap-node foreignObject,
+  .docs-mermaid .mindmap-node foreignObject > div {
+    overflow: visible !important;
+  }
+
+  .docs-mermaid .mindmap-node.section--1 text,
+  .docs-mermaid .mindmap-node.section--1 .nodeLabel,
+  .docs-mermaid .mindmap-node:has(> circle) text,
+  .docs-mermaid .mindmap-node:has(> circle) .nodeLabel {
+    font-weight: 600 !important;
+    fill: var(--v0-on-primary) !important;
+    color: var(--v0-on-primary) !important;
+  }
+
+  .docs-mermaid .mindmap-node text,
+  .docs-mermaid .mindmap-node .nodeLabel,
+  .docs-mermaid g[class*="section-"] text,
+  .docs-mermaid g[class*="section-"] .nodeLabel {
+    fill: var(--v0-on-surface) !important;
+    color: var(--v0-on-surface) !important;
+  }
+
+  .docs-mermaid .edge,
+  .docs-mermaid path[class*="edge-"] {
+    stroke: var(--v0-primary) !important;
+    stroke-width: 1.5px !important;
+    fill: none !important;
+  }
+
   /* Semantic node classes (use with classDef in mermaid) */
   .docs-mermaid .node.primary rect,
   .docs-mermaid .node.primary polygon {

apps/docs/src/components/docs/DocsSponsor.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-  // Constants
-  import { GITHUB_SPONSORS_ECOSYSTEM } from '@/constants/services'
+  import { PRIMARY_SPONSOR, PRIMARY_SPONSOR_PRICE } from '@/constants/sponsor'
+
+  const isOpen = PRIMARY_SPONSOR === null
 </script>
 
 <template>
-  <section class="relative my-10 px-5 py-4 sm:px-6 sm:py-5 rounded-xl border border-divider bg-surface overflow-hidden">
+  <section v-if="isOpen" class="relative my-10 px-5 py-4 sm:px-6 sm:py-5 rounded-xl border border-divider bg-surface overflow-hidden">
     <AppDotGrid :coverage="40" origin="bottom right" />
 
     <div class="relative z-10 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
@@ -20,26 +21,24 @@
           Sponsor
         </div>
 
-        <h3 class="text-xl font-bold mb-2">Your logo across the Vuetify ecosystem</h3>
+        <h3 class="text-xl font-bold mb-2">Fund Vuetify0, get your logo on the docs</h3>
 
         <p class="text-sm text-on-surface-variant max-w-prose">
-          For companies that want their brand in front of the entire Vuetify community. Logo and link rendered across every site in the ecosystem — docs, playground, bin, link, snips, and beyond — and a direct contribution to every open source project I maintain.
+          For companies whose product is built on Vuetify0. Logo across the docs, every page, and the README. One sponsor at a time.
         </p>
       </div>
 
       <div class="flex flex-col items-center gap-3 sm:items-end">
         <div class="flex items-baseline gap-1">
-          <span class="text-3xl font-bold">$1,500</span>
+          <span class="text-3xl font-bold">${{ PRIMARY_SPONSOR_PRICE.toLocaleString() }}</span>
           <span class="text-sm text-on-surface-variant">/mo</span>
         </div>
 
-        <a
+        <router-link
           class="inline-flex items-center gap-1.5 px-5 py-2.5 rounded-lg bg-primary text-on-primary font-semibold hover:opacity-90 transition-opacity whitespace-nowrap"
-          :href="GITHUB_SPONSORS_ECOSYSTEM"
-          rel="noopener"
-          target="_blank"
+          to="/sponsor"
         >
-          Become a sponsor
+          Learn more
           <svg
             aria-hidden="true"
             fill="currentColor"
@@ -48,9 +47,9 @@
             width="14"
             xmlns="http://www.w3.org/2000/svg"
           >
-            <path d="M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2v7zM14 3v2h3.59L7.76 14.83l1.41 1.41L19 6.41V10h2V3h-7z" />
+            <path d="M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03 0 1.42.39.39 1.02.39 1.41 0l6.59-6.59a.996.996 0 0 0 0-1.41l-6.58-6.6a.996.996 0 1 0-1.41 1.41L16.17 11H5c-.55 0-1 .45-1 1s.45 1 1 1z" />
           </svg>
-        </a>
+        </router-link>
       </div>
     </div>
   </section>

apps/docs/src/components/docs/DocsSponsorSlot.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+  import { PRIMARY_SPONSOR } from '@/constants/sponsor'
+
+  // Utilities
+  import { toRef } from 'vue'
+  import { useRoute } from 'vue-router'
+
+  const route = useRoute()
+  const sponsor = PRIMARY_SPONSOR
+  const onSponsorPage = toRef(() => route.path === '/sponsor')
+</script>
+
+<template>
+  <div v-if="sponsor" class="mt-3 p-3 rounded-lg border border-divider bg-surface">
+    <p class="text-xs uppercase tracking-wide text-on-surface-variant mb-2">SPONSORED BY</p>
+
+    <a
+      class="block transition-opacity hover:opacity-85"
+      :href="sponsor.url"
+      rel="noopener"
+      target="_blank"
+    >
+      <img
+        :alt="sponsor.name"
+        class="max-h-12 w-full object-contain"
+        :src="sponsor.logo"
+      >
+    </a>
+
+    <a
+      class="block mt-2 text-xs text-on-surface-variant hover:text-primary hover:underline transition-colors truncate"
+      :href="sponsor.url"
+      rel="noopener"
+      target="_blank"
+    >
+      {{ sponsor.name }} →
+    </a>
+  </div>
+
+  <router-link
+    v-else
+    class="block mt-3 p-3 rounded-lg border border-dashed hover:border-primary hover:text-primary transition-colors"
+    :class="onSponsorPage ? 'border-primary text-primary' : 'border-divider text-on-surface-variant'"
+    to="/sponsor"
+  >
+    <p class="text-xs font-semibold flex items-center gap-1">
+      <AppIcon icon="vuetify-0" size=".75rem" />
+      Your logo here
+    </p>
+
+    <p class="text-xs mt-1">Become the Primary Sponsor →</p>
+  </router-link>
+</template>

apps/docs/src/components/docs/DocsToc.vue

@@ -2,6 +2,9 @@
   // Components
   import { Discovery } from '@/components/discovery'
 
+  // Context
+  import DocsSponsorSlot from './DocsSponsorSlot.vue'
+
   // Composables
   import { useAsk } from '@/composables/useAsk'
   import { useSettings } from '@/composables/useSettings'
@@ -89,5 +92,7 @@
         </li>
       </ul>
     </nav>
+
+    <DocsSponsorSlot />
   </Discovery.Activator>
 </template>

apps/docs/src/components/home/HomeHero.vue

@@ -49,7 +49,7 @@
 </script>
 
 <template>
-  <section class="home-hero relative text-center py-24 md:py-32 lg:py-40">
+  <section class="home-hero relative text-center py-16 md:py-20 lg:py-24">
 
     <img
       alt="Vuetify0 Logo"
@@ -71,7 +71,7 @@
       Headless, composable-first components for Vue with AI-integrated docs, published benchmarks, and the backing of Vuetify.
     </p>
 
-    <div class="relative flex flex-col items-center gap-6 mb-16">
+    <div class="relative flex flex-col items-center gap-6 mb-10">
       <div class="grid grid-cols-2 md:flex gap-4 justify-center">
         <router-link
           class="home-hero-cta-primary px-8 py-3.5 bg-primary text-on-primary rounded-xl font-semibold text-lg text-center whitespace-nowrap transition-all duration-150"

apps/docs/src/components/home/HomePrimarySponsor.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+  import { PRIMARY_SPONSOR } from '@/constants/sponsor'
+
+  const sponsor = PRIMARY_SPONSOR
+</script>
+
+<template>
+  <aside aria-label="Sponsorship" class="home-primary-sponsor relative w-screen ml-[calc(50%-50vw)] border-y border-divider overflow-hidden">
+    <AppDotGrid :coverage="0" origin="top right" />
+
+    <div v-if="sponsor" class="relative mx-auto max-w-[900px] px-4 py-4 flex flex-col sm:flex-row items-center justify-between gap-3">
+      <p class="section-overline">PROUDLY SPONSORED BY</p>
+
+      <a
+        class="transition-opacity hover:opacity-85"
+        :href="sponsor.url"
+        rel="noopener"
+        target="_blank"
+      >
+        <img
+          :alt="sponsor.name"
+          class="h-8"
+          :src="sponsor.logo"
+        >
+      </a>
+    </div>
+
+    <AppLink v-else class="relative block hover:bg-surface-tint transition-colors" no-suffix to="/sponsor">
+      <div class="mx-auto max-w-[900px] px-4 py-4 text-center">
+        <p>
+          <span class="section-overline">PRIMARY SPONSOR</span>
+          <span class="ml-2 text-on-surface-variant">·</span>
+          <span class="ml-2 text-sm">This spot is available</span>
+        </p>
+      </div>
+    </AppLink>
+  </aside>
+</template>

apps/docs/src/components/home/HomeSpecialSponsor.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+  import { SPECIAL_SPONSOR } from '@/constants/sponsor'
+
+  const sponsor = SPECIAL_SPONSOR
+</script>
+
+<template>
+  <aside aria-label="Sponsorship" class="home-special-sponsor relative w-screen ml-[calc(50%-50vw)] border-y border-divider overflow-hidden">
+    <AppDotGrid :coverage="0" origin="top right" />
+
+    <div v-if="sponsor" class="relative mx-auto max-w-[900px] px-4 py-4 flex flex-col sm:flex-row items-center justify-between gap-3">
+      <p class="section-overline">PROUDLY SPONSORED BY</p>
+
+      <a
+        class="transition-opacity hover:opacity-85"
+        :href="sponsor.url"
+        rel="noopener"
+        target="_blank"
+      >
+        <img
+          :alt="sponsor.name"
+          class="h-8"
+          :src="sponsor.logo"
+        >
+      </a>
+    </div>
+
+    <AppLink v-else class="relative block hover:bg-surface-tint transition-colors" no-suffix to="/sponsor">
+      <div class="mx-auto max-w-[900px] px-4 py-4 text-center">
+        <p>
+          <span class="section-overline">PRIMARY SPONSOR</span>
+          <span class="ml-2 text-on-surface-variant">·</span>
+          <span class="ml-2 text-sm">This spot is available</span>
+        </p>
+      </div>
+    </AppLink>
+  </aside>
+</template>