@pylonsync/create-pylon 0.11.0 → 0.11.3

package/templates/directory/app/(marketing)/directory-browse.tsx

@@ -3,10 +3,12 @@
 import React, { useEffect, useMemo, useState } from "react";
 import { db, callFn } from "@pylonsync/react";
 import { EnsureGuest } from "@pylonsync/client";
+import { ArrowUpRight, ChevronUp } from "lucide-react";
 import { siteConfig } from "@/lib/site.config";
+import { LINK } from "@/components/marketing";
 import { parseTags, type ListingRow } from "@/lib/directory";
 
-// The browse experience — the FTS showcase + the realtime heart of the template.
+// The browse island: search box, category rail, and the list.
 // `db.useSearch("Listing", …)` is a LIVE faceted full-text search: it re-runs
 // the moment the box changes AND whenever the Listing table is written, so the
 // vote counts tick up across every open tab the instant anyone upvotes (the
@@ -21,6 +23,8 @@ const SORTS: { label: string; value: [string, "asc" | "desc"] }[] = [
   { label: "Newest", value: ["createdAt", "desc"] },
 ];
 
+const MONO_SMALL = "font-mono text-[12px]";
+
 export function DirectoryBrowse() {
   return (
     <EnsureGuest fallback={<BrowseSkeleton />}>
@@ -60,87 +64,84 @@ function BrowseInner() {
     [categoryCounts],
   );
 
+  const facetLinks = (
+    <>
+      <FacetLink label="All" count={search.total} active={category === null} onClick={() => setCategory(null)} />
+      {categories.map((c) => (
+        <FacetLink
+          key={c}
+          label={c}
+          count={categoryCounts[c]}
+          active={category === c}
+          onClick={() => setCategory(category === c ? null : c)}
+        />
+      ))}
+    </>
+  );
+
   return (
     <div>
-      {/* Search bar */}
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
-        <div className="relative flex-1">
-          <SearchIcon />
-          <input
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            placeholder={siteConfig.hero.searchPlaceholder}
-            aria-label="Search the directory"
-            className="h-11 w-full rounded-full border border-zinc-300 bg-white pl-10 pr-4 text-[15px] text-zinc-900 outline-none transition placeholder:text-zinc-400 focus:border-brand focus:ring-2 focus:ring-brand/20"
-          />
-        </div>
-        <div className="flex items-center gap-1 rounded-full border border-zinc-200 bg-white p-1">
-          {SORTS.map((s, i) => (
-            <button
-              key={s.label}
-              type="button"
-              onClick={() => setSortIdx(i)}
-              className={
-                "rounded-full px-3 py-1.5 text-[13px] font-medium transition-colors " +
-                (i === sortIdx ? "bg-brand text-white" : "text-zinc-600 hover:text-zinc-900")
-              }
-            >
-              {s.label}
-            </button>
-          ))}
-        </div>
-      </div>
+      <input
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+        placeholder={siteConfig.intro.searchPlaceholder}
+        aria-label="Search the directory"
+        className="h-10 w-full border border-zinc-300 bg-white px-3 font-mono text-[13px] text-zinc-900 outline-none placeholder:text-zinc-400 focus:border-brand"
+      />
 
-      <div className="mt-6 grid gap-8 lg:grid-cols-[200px_1fr]">
-        {/* Facet sidebar — live counts per category from the search */}
-        <aside className="hidden lg:block">
-          <h3 className="font-mono text-[11px] uppercase tracking-[0.14em] text-zinc-400">Category</h3>
-          <ul className="mt-3 space-y-0.5">
-            <FacetItem
-              label="All"
-              count={search.total}
-              active={category === null}
-              onClick={() => setCategory(null)}
-            />
-            {categories.map((c) => (
-              <FacetItem
-                key={c}
-                label={c}
-                count={categoryCounts[c]}
-                active={category === c}
-                onClick={() => setCategory(category === c ? null : c)}
-              />
-            ))}
-          </ul>
+      <div className="mt-6 grid gap-8 lg:grid-cols-[180px_1fr]">
+        {/* Category rail. Live counts per category come from the search. On
+            narrow screens the same links run in a horizontal row. */}
+        <aside>
+          <p className="border-b border-zinc-200 pb-2 text-[12px] font-medium uppercase tracking-wide text-zinc-500">
+            Category
+          </p>
+          <ul className="mt-2 flex gap-x-4 gap-y-1 overflow-x-auto pb-1 lg:flex-col lg:overflow-visible">{facetLinks}</ul>
         </aside>
 
         {/* Results */}
         <div>
-          <div className="mb-3 flex items-center justify-between text-[13px] text-zinc-500">
-            <span>
-              <span className="font-medium text-zinc-900">{search.total}</span>{" "}
-              {search.total === 1 ? "tool" : "tools"}
+          <div className="flex items-center justify-between border-b border-zinc-200 pb-2 text-[13px] text-zinc-500">
+            <span className={MONO_SMALL}>
+              {search.total} {search.total === 1 ? "tool" : "tools"}
               {category ? <> in {category}</> : null}
-              {debounced ? <> matching “{debounced}”</> : null}
+              {debounced ? <> matching "{debounced}"</> : null}
+            </span>
+            <span className="flex items-center gap-3">
+              {SORTS.map((s, i) => (
+                <button
+                  key={s.label}
+                  type="button"
+                  onClick={() => setSortIdx(i)}
+                  aria-pressed={i === sortIdx}
+                  className={i === sortIdx ? "font-medium text-zinc-900" : "text-zinc-500 hover:text-zinc-900"}
+                >
+                  {s.label}
+                </button>
+              ))}
             </span>
-            {category ? (
-              <button type="button" onClick={() => setCategory(null)} className="text-brand hover:underline">
-                Clear filter
-              </button>
-            ) : null}
           </div>
 
           {search.loading && search.hits.length === 0 ? (
             <BrowseSkeleton bare />
           ) : search.hits.length === 0 ? (
-            <p className="rounded-xl border border-dashed border-zinc-300 px-6 py-12 text-center text-sm text-zinc-500">
-              No tools match. Try a different search — or{" "}
-              <a href="/submit" className="font-medium text-brand hover:underline">submit one</a>.
+            <p className="py-10 text-[14px] text-zinc-600">
+              No tools match.{" "}
+              {category ? (
+                <button type="button" onClick={() => setCategory(null)} className={LINK}>
+                  Clear the category filter
+                </button>
+              ) : (
+                <a href="/submit" className={LINK}>
+                  Submit one
+                </a>
+              )}
+              .
             </p>
           ) : (
-            <ul className="space-y-3">
+            <ul>
               {search.hits.map((l) => (
-                <ListingCard key={l.id} listing={l} />
+                <ListingRowItem key={l.id} listing={l} />
               ))}
             </ul>
           )}
@@ -150,7 +151,7 @@ function BrowseInner() {
   );
 }
 
-function FacetItem({
+function FacetLink({
   label,
   count,
   active,
@@ -162,67 +163,49 @@ function FacetItem({
   onClick: () => void;
 }) {
   return (
-    <li>
+    <li className="shrink-0">
       <button
         type="button"
         onClick={onClick}
+        aria-pressed={active}
         className={
-          "flex w-full items-center justify-between rounded-lg px-2.5 py-1.5 text-left text-[13.5px] transition-colors " +
-          (active ? "bg-brand-soft font-medium text-brand" : "text-zinc-600 hover:bg-zinc-100")
+          "flex w-full items-baseline gap-2 py-0.5 text-left text-[14px] lg:justify-between " +
+          (active ? "font-medium text-zinc-900" : "text-brand hover:underline")
         }
       >
         <span>{label}</span>
-        <span className="tabular-nums text-[12px] text-zinc-400">{count ?? 0}</span>
+        <span className={`${MONO_SMALL} text-zinc-400`}>{count ?? 0}</span>
       </button>
     </li>
   );
 }
 
-function ListingCard({ listing }: { listing: ListingRow }) {
+function ListingRowItem({ listing }: { listing: ListingRow }) {
   const tags = parseTags(listing.tags);
   return (
-    <li className="flex items-start gap-4 rounded-2xl border border-zinc-200 bg-white p-4 transition-shadow hover:shadow-sm">
+    <li className="grid grid-cols-[44px_1fr_20px] items-start gap-3 border-b border-zinc-200 py-3">
       <VoteButton listingId={listing.id} votes={listing.votes} />
-      <div className="min-w-0 flex-1">
-        <div className="flex flex-wrap items-center gap-2">
-          <a
-            href={listing.url}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-[15px] font-semibold text-zinc-900 hover:text-brand"
-          >
+      <div className="min-w-0">
+        <div className="flex flex-wrap items-baseline gap-x-2">
+          <a href={listing.url} target="_blank" rel="noopener noreferrer" className="text-[14px] font-semibold text-zinc-900 hover:text-brand">
             {listing.name}
           </a>
-          {listing.featured ? (
-            <span className="rounded-full bg-brand-soft px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-brand">
-              Featured
-            </span>
-          ) : null}
-          <span className="rounded-full bg-zinc-100 px-2 py-0.5 text-[11px] font-medium text-zinc-500">
-            {listing.category}
-          </span>
+          <span className={`${MONO_SMALL} text-zinc-400`}>{listing.category}</span>
+          {listing.featured ? <span className={`${MONO_SMALL} text-brand`}>featured</span> : null}
         </div>
-        <p className="mt-1 text-[14px] leading-relaxed text-zinc-600">{listing.tagline}</p>
+        <p className="mt-0.5 text-[14px] leading-snug text-zinc-600">{listing.tagline}</p>
         {tags.length > 0 ? (
-          <div className="mt-2 flex flex-wrap gap-1.5">
-            {tags.map((t) => (
-              <span key={t} className="rounded bg-zinc-50 px-1.5 py-0.5 text-[11px] text-zinc-400">
-                #{t}
-              </span>
-            ))}
-          </div>
+          <p className={`${MONO_SMALL} mt-1 text-zinc-400`}>{tags.join("  ")}</p>
         ) : null}
       </div>
       <a
         href={listing.url}
         target="_blank"
         rel="noopener noreferrer"
-        aria-label={`Visit ${listing.name}`}
-        className="mt-1 shrink-0 text-zinc-300 transition-colors hover:text-brand"
+        aria-label={`Open ${listing.name}`}
+        className="mt-0.5 text-zinc-400 hover:text-brand"
       >
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
-          <path d="M7 17 17 7M7 7h10v10" />
-        </svg>
+        <ArrowUpRight size={16} strokeWidth={1.75} aria-hidden />
       </a>
     </li>
   );
@@ -267,49 +250,28 @@ function VoteButton({ listingId, votes }: { listingId: string; votes: number })
       type="button"
       onClick={onVote}
       disabled={voted}
-      aria-label="Upvote"
+      aria-label={voted ? "Upvoted" : "Upvote"}
+      aria-pressed={voted}
       className={
-        "flex h-14 w-12 shrink-0 flex-col items-center justify-center rounded-xl border text-center transition-colors " +
-        (voted
-          ? "border-brand bg-brand-soft text-brand"
-          : "border-zinc-200 text-zinc-500 hover:border-brand hover:text-brand")
+        "flex w-11 flex-col items-center py-0.5 font-mono text-[13px] tabular-nums " +
+        (voted ? "text-brand" : "text-zinc-500 hover:text-brand")
       }
     >
-      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
-        <path d="m18 15-6-6-6 6" />
-      </svg>
-      <span className="text-[13px] font-semibold tabular-nums">{votes}</span>
+      <span>{votes}</span>
+      <ChevronUp size={14} strokeWidth={2} aria-hidden />
     </button>
   );
 }
 
-function SearchIcon() {
-  return (
-    <svg
-      className="pointer-events-none absolute left-3.5 top-1/2 size-4 -translate-y-1/2 text-zinc-400"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden
-    >
-      <circle cx="11" cy="11" r="8" />
-      <path d="m21 21-4.3-4.3" />
-    </svg>
-  );
-}
-
 function BrowseSkeleton({ bare }: { bare?: boolean }) {
   const list = (
-    <ul className="space-y-3">
+    <ul>
       {Array.from({ length: 6 }).map((_, i) => (
-        <li key={i} className="flex items-start gap-4 rounded-2xl border border-zinc-200 bg-white p-4">
-          <div className="h-14 w-12 animate-pulse rounded-xl bg-zinc-100" />
-          <div className="flex-1 space-y-2 py-1">
-            <div className="h-4 w-1/3 animate-pulse rounded bg-zinc-100" />
-            <div className="h-3 w-2/3 animate-pulse rounded bg-zinc-100" />
+        <li key={i} className="grid grid-cols-[44px_1fr_20px] gap-3 border-b border-zinc-200 py-3">
+          <div className="mx-auto h-8 w-6 animate-pulse bg-zinc-100" />
+          <div className="space-y-2 py-0.5">
+            <div className="h-3.5 w-1/3 animate-pulse bg-zinc-100" />
+            <div className="h-3 w-2/3 animate-pulse bg-zinc-100" />
           </div>
         </li>
       ))}
@@ -318,9 +280,9 @@ function BrowseSkeleton({ bare }: { bare?: boolean }) {
   if (bare) return list;
   return (
     <div>
-      <div className="h-11 w-full animate-pulse rounded-full bg-zinc-100" />
-      <div className="mt-6 grid gap-8 lg:grid-cols-[200px_1fr]">
-        <div className="hidden h-40 animate-pulse rounded-xl bg-zinc-100 lg:block" />
+      <div className="h-10 w-full animate-pulse border border-zinc-200 bg-zinc-50" />
+      <div className="mt-6 grid gap-8 lg:grid-cols-[180px_1fr]">
+        <div className="hidden h-40 animate-pulse bg-zinc-50 lg:block" />
         {list}
       </div>
     </div>

package/templates/directory/app/(marketing)/layout.tsx

@@ -1,71 +1,56 @@
 import React from "react";
 import { Link, type PageAuth } from "@pylonsync/react";
 import { siteConfig } from "@/lib/site.config";
+import { WRAP } from "@/components/marketing";
 
 // `(marketing)` is a ROUTE GROUP: the parens segment is stripped from every
 // URL (so `(marketing)/page.tsx` still serves `/`), and this layout wraps
-// only the pages inside the group — a slim nav up top and a footer below,
-// both driven by lib/site.config.ts. Routes outside the group (/login,
-// /dashboard) render bare in the root shell. `auth.user_id` is resolved
-// server-side from the session cookie before any HTML is sent, so the nav
-// shows "Dashboard" once the owner is signed in and "Sign in" otherwise —
-// no flash, no client fetch.
+// only the pages inside the group: a one-line nav and a footer, both driven by
+// lib/site.config.ts. Routes outside the group (/login, /dashboard) render bare
+// in the root shell. `auth.user_id` is resolved server-side from the session
+// cookie before any HTML is sent, so the nav shows "Dashboard" once the owner
+// is signed in and "Sign in" otherwise.
 interface LayoutProps {
   children: React.ReactNode;
   auth: PageAuth;
 }
 
+const NAV_LINK = "text-[14px] text-zinc-600 hover:text-zinc-900";
+
 export default function MarketingLayout({ children, auth }: LayoutProps) {
-  // A guest session (minted by <EnsureGuest> for the live counter) has a
-  // `guest_…` user id — that's an anonymous visitor, NOT the signed-in owner,
-  // so it shouldn't flip the nav to "Dashboard".
+  // A guest session (minted by <EnsureGuest> for the live search) has a
+  // `guest_…` user id. That is an anonymous visitor, not the signed-in owner.
   const signedIn = Boolean(auth?.user_id && !auth.user_id.startsWith("guest_"));
-  const { brand } = siteConfig;
+  const { brand, intro } = siteConfig;
 
   return (
     <>
-      <header className="sticky top-0 z-30 border-b border-zinc-200/70 bg-white/85 backdrop-blur">
-        <div className="mx-auto flex h-14 max-w-5xl items-center justify-between px-6">
-          <Link href="/" className="flex items-center gap-2">
-            <span className="flex size-6 items-center justify-center rounded-[7px] bg-zinc-900 text-[13px] font-bold text-white">
-              {brand.letter}
-            </span>
-            <span className="text-[15px] font-semibold tracking-tight text-zinc-900">
-              {brand.name}
-            </span>
+      <header className="border-b border-zinc-200 bg-white">
+        <div className={`${WRAP} flex h-12 items-center justify-between`}>
+          <Link href="/" className="text-[15px] font-semibold text-zinc-900">
+            {brand.name}
           </Link>
-          <nav className="flex items-center gap-1 sm:gap-2">
-            <a href="/#browse" className="hidden rounded-full px-3 py-1.5 text-[13px] font-medium text-zinc-600 transition-colors hover:text-zinc-900 sm:inline-flex">
+          <nav className="flex items-center gap-5">
+            <a href="/#browse" className={NAV_LINK}>
               Browse
             </a>
+            <Link href="/submit" className={NAV_LINK}>
+              {intro.ctaLabel}
+            </Link>
             {signedIn ? (
-              <Link
-                href="/dashboard"
-                className="inline-flex items-center rounded-full bg-zinc-900 px-3.5 py-1.5 text-[13px] font-medium text-white transition-colors hover:bg-zinc-700"
-              >
+              <Link href="/dashboard" className={NAV_LINK}>
                 Dashboard
               </Link>
             ) : (
-              <>
-                <Link
-                  href="/login"
-                  className="hidden rounded-full px-3 py-1.5 text-[13px] font-medium text-zinc-600 transition-colors hover:text-zinc-900 sm:inline-flex"
-                >
-                  Sign in
-                </Link>
-                <Link
-                  href="/submit"
-                  className="inline-flex items-center rounded-full bg-brand px-3.5 py-1.5 text-[13px] font-medium text-white transition-opacity hover:opacity-90"
-                >
-                  {siteConfig.hero.ctaLabel}
-                </Link>
-              </>
+              <Link href="/login" className={NAV_LINK}>
+                Sign in
+              </Link>
             )}
           </nav>
         </div>
       </header>
 
-      <main className="flex-1">{children}</main>
+      <main className="flex-1 bg-white">{children}</main>
 
       <SiteFooter />
     </>
@@ -75,57 +60,21 @@ export default function MarketingLayout({ children, auth }: LayoutProps) {
 function SiteFooter() {
   const { brand } = siteConfig;
   return (
-    <footer className="border-t border-zinc-200/70 bg-white">
-      <div className="mx-auto max-w-5xl px-6 py-12">
-        <div className="flex flex-col items-start justify-between gap-6 sm:flex-row">
-          <div className="max-w-sm">
-            <Link href="/" className="inline-flex items-center gap-2">
-              <span className="flex size-6 items-center justify-center rounded-[7px] bg-zinc-900 text-[13px] font-bold text-white">
-                {brand.letter}
-              </span>
-              <span className="text-[15px] font-semibold tracking-tight text-zinc-900">
-                {brand.name}
-              </span>
-            </Link>
-            <p className="mt-3 text-[13px] leading-relaxed text-zinc-500">
-              {brand.footerBlurb}
-            </p>
-          </div>
-          <div className="flex items-center gap-4">
-            {brand.socials.map((s) => (
-              <a
-                key={s.label}
-                href={s.href}
-                aria-label={s.label}
-                className="text-zinc-400 transition-colors hover:text-zinc-900"
-              >
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                  <path d={s.path} />
-                </svg>
-              </a>
-            ))}
-            <a
-              href={`mailto:${brand.email}`}
-              aria-label="Email"
-              className="text-zinc-400 transition-colors hover:text-zinc-900"
-            >
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                <rect x="3" y="5" width="18" height="14" rx="2" />
-                <path d="m3 7 9 6 9-6" />
-              </svg>
+    <footer className="border-t border-zinc-200 bg-white">
+      <div className={`${WRAP} flex flex-col gap-3 py-8 text-[13px] text-zinc-500 sm:flex-row sm:items-center sm:justify-between`}>
+        <p className="max-w-md">{brand.footerBlurb}</p>
+        <div className="flex items-center gap-4">
+          {brand.socials.map((s) => (
+            <a key={s.label} href={s.href} className="hover:text-zinc-900">
+              {s.label}
             </a>
-          </div>
-        </div>
-        <div className="mt-10 flex flex-col items-start justify-between gap-3 border-t border-zinc-200/70 pt-6 text-[12px] text-zinc-400 sm:flex-row sm:items-center">
-          <span>
+          ))}
+          <a href={`mailto:${brand.email}`} className="hover:text-zinc-900">
+            Email
+          </a>
+          <span className="font-mono text-[12px] text-zinc-400">
             © {new Date().getFullYear()} {brand.copyrightName}
           </span>
-          <span>
-            Built with{" "}
-            <a href="https://pylonsync.com" className="font-medium text-zinc-600 hover:text-zinc-900">
-              Pylon
-            </a>
-          </span>
         </div>
       </div>
     </footer>

package/templates/directory/app/(marketing)/not-found.tsx

@@ -1,23 +1,24 @@
 import React from "react";
 import { Link, type NotFoundProps } from "@pylonsync/react";
+import { LINK, WRAP } from "@/components/marketing";
 
 // `(marketing)/not-found.tsx` → rendered at HTTP 404 for any unmatched URL
 // (and when a page calls `response.notFound()`). It lives inside the
 // `(marketing)` group on purpose: a group segment adds no URL prefix, so this
-// is still the root 404 boundary, but it wraps in the marketing layout — a
+// is still the root 404 boundary, but it wraps in the marketing layout, so a
 // missing URL gets the site nav + footer instead of a bare page. Hydrated, so
 // the link is a client nav.
 export default function NotFound(_props: NotFoundProps) {
   return (
-    <div className="mx-auto flex min-h-[60vh] max-w-3xl flex-col items-center justify-center px-6 text-center">
-      <h1 className="text-3xl font-semibold tracking-tight">404</h1>
-      <p className="mt-2 text-zinc-500">We couldn&apos;t find that page.</p>
-      <Link
-        href="/"
-        className="mt-6 inline-flex h-10 items-center rounded-full bg-zinc-900 px-5 text-sm font-medium text-white transition-colors hover:bg-zinc-700"
-      >
-        Back home
-      </Link>
+    <div className={`${WRAP} py-20`}>
+      <p className="font-mono text-[12px] text-zinc-400">404</p>
+      <h1 className="font-display mt-2 text-[22px] text-zinc-900">Page not found</h1>
+      <p className="mt-2 text-[14px] text-zinc-600">
+        There is no page at this address.{" "}
+        <Link href="/" className={LINK}>
+          Back to the directory
+        </Link>
+      </p>
     </div>
   );
 }

package/templates/directory/app/(marketing)/page.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Link, type Metadata } from "@pylonsync/react";
+import { type Metadata } from "@pylonsync/react";
 import { WRAP } from "@/components/marketing";
 import { DirectoryBrowse } from "./directory-browse";
 import { siteConfig } from "@/lib/site.config";
@@ -10,41 +10,20 @@ export const metadata: Metadata = {
   openGraph: { title: siteConfig.seo.title, description: siteConfig.seo.description, type: "website" },
 };
 
-// `app/page.tsx` → `/`. Server-rendered hero + a client island (#browse) that
-// runs a LIVE faceted full-text search over the public Listing table. Copy
-// comes from siteConfig; the listings seed on first visit. Doesn't read `auth`,
-// so the public page stays cacheable.
+// `app/page.tsx` → `/`. A short server-rendered intro (brand name and one
+// line), then the client island (#browse): the search box, the category rail,
+// and the list, all driven by a LIVE faceted full-text search over the public
+// Listing table. Copy comes from siteConfig; the listings seed on first visit.
+// Doesn't read `auth`, so the public page stays cacheable.
 export default function LandingPage() {
-  const { hero, browse } = siteConfig;
+  const { brand, intro } = siteConfig;
   return (
-    <div className="bg-white text-zinc-900">
-      {/* HERO */}
-      <section className={`${WRAP} pt-16 pb-8 sm:pt-20`}>
-        <div className="max-w-2xl">
-          <p className="font-mono text-[11px] uppercase tracking-[0.16em] text-brand">{hero.tagline}</p>
-          <h1 className="mt-4 text-balance text-[2.5rem] font-semibold leading-[1.04] tracking-[-0.02em] sm:text-[3.25rem]">
-            {hero.headline}
-          </h1>
-          <p className="mt-5 text-[17px] leading-relaxed text-zinc-500">{hero.subcopy}</p>
-          <div className="mt-7 flex flex-wrap items-center gap-4">
-            <a href="#browse" className="inline-flex items-center rounded-full bg-brand px-5 py-2.5 text-sm font-medium text-white transition-opacity hover:opacity-90">
-              Browse the directory
-            </a>
-            <Link href="/submit" className="text-sm font-medium text-zinc-700 hover:text-zinc-900">
-              {hero.ctaLabel} →
-            </Link>
-          </div>
-        </div>
-      </section>
-
-      {/* BROWSE — live faceted search */}
-      <section id="browse" className={`${WRAP} pb-20 pt-4`}>
-        <div className="mb-6">
-          <p className="font-mono text-[11px] uppercase tracking-[0.14em] text-brand">{browse.eyebrow}</p>
-          <h2 className="mt-3 text-2xl font-semibold tracking-[-0.02em]">{browse.headline}</h2>
-        </div>
+    <div className={`${WRAP} pb-20 pt-8`}>
+      <h1 className="font-display text-[22px] leading-tight text-zinc-900">{brand.name}</h1>
+      <p className="mt-1 max-w-2xl text-[14px] leading-relaxed text-zinc-600">{intro.description}</p>
+      <div id="browse" className="mt-5">
         <DirectoryBrowse />
-      </section>
+      </div>
     </div>
   );
 }

package/templates/directory/app/(marketing)/submit/page.tsx

@@ -5,26 +5,25 @@ import { SubmitForm } from "../submit-form";
 import { siteConfig } from "@/lib/site.config";
 
 export const metadata: Metadata = {
-  title: `Submit a tool — ${siteConfig.brand.name}`,
+  title: `Submit a tool, ${siteConfig.brand.name}`,
   description: siteConfig.submit.subcopy,
 };
 
 // `app/submit/page.tsx` → `/submit`. Server-rendered shell; the form is a client
 // island that calls the public submitListing mutation. Submissions land in the
-// owner's moderation queue (the deny-all Submission table) — not the public
-// directory — until approved.
+// owner's moderation queue (the deny-all Submission table), not the public
+// directory, until approved.
 export default function SubmitPage() {
   const { submit } = siteConfig;
   return (
-    <section className={`${WRAP} py-16`}>
-      <div className="mx-auto max-w-2xl">
-        <p className="font-mono text-[11px] uppercase tracking-[0.16em] text-brand">{submit.eyebrow}</p>
-        <h1 className="mt-4 text-balance text-3xl font-semibold tracking-[-0.02em]">{submit.headline}</h1>
-        <p className="mt-4 text-[15px] leading-relaxed text-zinc-500">{submit.subcopy}</p>
-        <div className="mt-8">
+    <div className={`${WRAP} pb-20 pt-8`}>
+      <div className="max-w-xl">
+        <h1 className="font-display text-[22px] leading-tight text-zinc-900">{submit.headline}</h1>
+        <p className="mt-1 text-[14px] leading-relaxed text-zinc-600">{submit.subcopy}</p>
+        <div className="mt-6">
           <SubmitForm />
         </div>
       </div>
-    </section>
+    </div>
   );
 }