feat(website): give the plugin directory a closing section for building and submitting plugins (#6160)

The directory header now keeps only "Submit a plugin", next to the search
box. Building and submitting move into a "Build your own plugin" section at
the end of the page, with "Read the docs" and "Submit a plugin" buttons.
The docs link is labelled "Read the docs" because that is what it does.

The site footer gets top margin on every page; it sat too close to content.

packages/website/src/components/site-footer.tsx

@@ -16,7 +16,7 @@ export function SiteFooter({ width = "default" }: SiteFooterProps) {
   const widthClasses = WIDTH_CLASSES[width];
   const alternatives = getAlternativePages();
   return (
-    <footer className={`${widthClasses} mx-auto`}>
+    <footer className={`${widthClasses} mx-auto mt-12 md:mt-16`}>
       <div className="border-t border-white/10 pt-8 pb-4 grid grid-cols-2 sm:grid-cols-5 gap-8 text-sm">
         <div className="space-y-3">
           <p className="text-white/60 font-medium">Product</p>

packages/website/src/plugins/browse-page.tsx

@@ -31,8 +31,6 @@ const TAB_ON = `${TAB_BASE} border-white text-white`;
 const TAB_OFF = `${TAB_BASE} border-transparent text-muted-foreground hover:text-foreground`;
 const CLEAR_CLASS =
   "text-sm text-extra-muted-foreground transition-colors hover:text-muted-foreground";
-const CONTRIBUTE_CLASS =
-  "text-sm text-extra-muted-foreground transition-colors hover:text-muted-foreground";
 
 /** All plugins or one category: sidebar, Most installed / Newest tabs, and the card grid. */
 export function BrowsePage({
@@ -156,7 +154,7 @@ function CategoryNav({ plugins, query }: { plugins: Plugin[]; query: BrowseQuery
         ))}
         <div className="my-3 h-px bg-white/10" />
         <div className="flex flex-col gap-1.5 px-2.5">
-          <ContributeLinks className={CONTRIBUTE_CLASS} />
+          <ContributeLinks />
         </div>
       </nav>
       <nav aria-label="Categories" className="-mx-6 flex gap-2 overflow-x-auto px-6 pb-1 lg:hidden">

packages/website/src/plugins/contribute-links.tsx

@@ -1,17 +1,48 @@
-import { BUILD_URL, SUBMIT_URL } from "./links";
+import { DOCS_URL, SUBMIT_URL } from "./links";
 
-const LINK_CLASS = "text-sm text-muted-foreground transition-colors hover:text-foreground";
+const LINK_CLASS =
+  "text-sm text-extra-muted-foreground transition-colors hover:text-muted-foreground";
+const PRIMARY_BUTTON_CLASS =
+  "inline-flex items-center justify-center rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background transition-colors hover:bg-foreground/90";
+const SECONDARY_BUTTON_CLASS =
+  "inline-flex items-center justify-center rounded-lg border border-white/12 px-4 py-2 text-sm text-white transition-colors hover:bg-white/10";
 
-/** "Build a plugin" and "Submit a plugin", as two quiet links. */
-export function ContributeLinks({ className = LINK_CLASS }: { className?: string }) {
+/** "Read the docs" and "Submit a plugin", as two quiet links. */
+export function ContributeLinks() {
   return (
     <>
-      <a href={BUILD_URL} className={className}>
-        Build a plugin
+      <a href={DOCS_URL} className={LINK_CLASS}>
+        Read the docs
       </a>
-      <a href={SUBMIT_URL} className={className}>
+      <a href={SUBMIT_URL} className={LINK_CLASS}>
         Submit a plugin
       </a>
     </>
   );
 }
+
+/** Closing section of the directory: what a plugin can do, with Read the docs and Submit buttons. */
+export function ContributeSection() {
+  return (
+    <section
+      aria-labelledby="build-your-own"
+      className="mt-20 rounded-xl border border-white/10 bg-white/[0.03] px-6 py-8 sm:px-8"
+    >
+      <h2 id="build-your-own" className="text-lg font-medium">
+        Build your own plugin
+      </h2>
+      <p className="mt-2 max-w-lg text-sm text-muted-foreground">
+        Plugins add themes, workspace panels, slash commands, and agent hooks to Paseo. Write one
+        with the plugin docs, then submit it to get it listed here.
+      </p>
+      <div className="mt-6 flex flex-wrap gap-3">
+        <a href={DOCS_URL} className={PRIMARY_BUTTON_CLASS}>
+          Read the docs
+        </a>
+        <a href={SUBMIT_URL} className={SECONDARY_BUTTON_CLASS}>
+          Submit a plugin
+        </a>
+      </div>
+    </section>
+  );
+}

packages/website/src/plugins/links.ts

@@ -1,7 +1,7 @@
 import type { CategorySlug } from "./categories";
 import type { InstallWindow } from "./installs";
 
-export const BUILD_URL = "/docs/plugins";
+export const DOCS_URL = "/docs/plugins";
 export const SUBMIT_URL =
   "https://github.com/getpaseo/plugins/issues/new?template=submit-plugin.yml";
 

packages/website/src/routes/plugins/index.tsx

@@ -26,7 +26,7 @@ import {
   mostInstalled,
   newestFirst,
 } from "~/plugins";
-import { ContributeLinks } from "~/plugins/contribute-links";
+import { ContributeSection } from "~/plugins/contribute-links";
 import {
   type BrowseQuery,
   browseHref,
@@ -36,6 +36,7 @@ import {
   parseSearchTerm,
   parseSort,
   parseWindow,
+  SUBMIT_URL,
 } from "~/plugins/links";
 import { NewPluginCard, PluginRankRow } from "~/plugins/plugin-card";
 import { PluginSearch } from "~/plugins/plugin-search";
@@ -57,6 +58,7 @@ const CATEGORY_ICONS: Record<CategorySlug, LucideIcon> = {
   utils: Wrench,
 };
 
+const SUBMIT_CLASS = "text-sm text-muted-foreground transition-colors hover:text-foreground";
 const SEE_ALL_CLASS =
   "inline-flex items-center gap-0.5 text-sm text-muted-foreground transition-colors hover:text-foreground";
 
@@ -113,8 +115,10 @@ function PluginsPage() {
           </span>
         </h1>
         <div className="flex flex-wrap items-center gap-x-5 gap-y-3">
+          <a href={SUBMIT_URL} className={SUBMIT_CLASS}>
+            Submit a plugin
+          </a>
           <PluginSearch scope={searchScope} className="w-full sm:w-56" />
-          <ContributeLinks />
         </div>
       </div>
 
@@ -189,6 +193,8 @@ function PluginsPage() {
           ))}
         </div>
       </section>
+
+      <ContributeSection />
     </SiteShell>
   );
 }