MotirBuilding in public
MOTIR · moooon
onMotir
You’re viewing a public project. Anyone can view it — no account needed. Sign in to submit, upvote, or comment on requests.View-only — you can’t edit work items
MOTIR-422

6.13.1 Design — the project square: the fully-public marketing-site page (hero + cards), search, category/tag filters, sort/rank tabs, the SEO/GEO scaffolding

Done
Description

Estimate: 50m

Type: design (THE design gate — produced FIRST; the UI code subtask here — 6.13.6 — depends on this card and is blocked until it lands). Produce the surface design assets under motir-core/design/project-square/, composing ONLY shipped components/ui/* primitives + --el-* colour tokens + [data-display-style] shape tokens (NO Tier-0 --color-*, no hand-rolled spacing/radius), mirroring 7.0.1’s multi-panel design-card shape.

The surfaces to draw (every panel — the multi-panel rule, mistake #31):

  • Panel 1 — the public page (marketing-site chrome + hero + gallery). A standalone, fully-public web page: the marketing-site top bar (Motir logo + minimal nav + sign-in/CTA) and footer (an SEO link surface with topic landing links) — NOT the app shell. The SEO hero: a real <h1>, a descriptive lede (human + crawler), the search, and a "no sign-up required" trust line. Then the grid of project cards: each card draws the project name, its org (the cross-org context — the owning org is shown), the description (truncated), and the three public stat signals from 6.12.6 (viewers / upvotes / recent activity) with their glyphs. NO per-card "Public" pill (every project here is public by definition). Draw the card hover/focus state and the whole-card click affordance (a real <a href> to the 6.12.4 public view). The grid is paginated / lazy (the at-scale rule — NOT load-all; draw the "load more" / next-page affordance + the page-boundary skeleton). Mirror the GitHub-Trending / GitLab-Explore card row.
  • Panel 2 — the sort / rank tabs. The Trending / Popular / Recent (New) tab control (the GitLab-Explore-tabs shape), with one-line copy for each ("Trending = surging now", "Popular = most-upvoted overall", "New = recently made public"). For Trending, draw the recency-window selector (the GitHub daily / weekly / monthly bucket) if shown. Draw which rank is the DEFAULT landing tab.
  • Panel 3 — the search bar + the category / tag filters. The search input (placeholder copy: search public projects by name / description) and the category / tag filter (a chip/facet row or a picker) — the GitHub-Topics / GitLab-Topics browse axis. Draw the active-filter state (selected tag chip + clear), and how search + tag + the rank tab COMPOSE (all three active at once). Draw the categories-browse view (topics listed with their project counts).
  • Panel 4 — the SEO + GEO scaffolding. The page is fully public + server-rendered + crawlable. Draw the head <title> / <meta description> / canonical / OpenGraph / Twitter, the JSON-LD structured data (CollectionPage › ItemList of SoftwareApplication + BreadcrumbList), the semantic HTML outline (one <h1>, <h2> sections, each card an <article> with an <h3>, topic browse in a <nav>), the real indexable URLs / sitemap (each rank / search / topic / page) + per-topic landing pages (/explore/topic/<slug>), and the GEO answer-engine framing (a citable lead + FAQ). State it is reached from the marketing site, NOT the app left-nav.
  • Panel 5 — empty / loading / error / no-results states. The empty square (no public projects yet), the paginated loading skeleton, the fetch-error state, and the no-search-results / no-projects-in-this-category state (each with the right recovery copy — "clear filters", "browse all").

Write design/project-square/design-notes.md naming every primitive composed (e.g. the card surface, Pill for the stat / tag tone, the tab control, the search Combobox/input, the EmptyState/ErrorState family, the skeleton/loader), the EXACT copy for each tab + each stat label + each search/filter placeholder + each empty/error state, the per---el-* colour role for every element (use the palette, not grey-only — finding #54; e.g. the upvote accent, the per-rank tab tone, the tag-chip tints), and a "primitives composed (no hand-rolling)" checklist. It MUST state, in writing, that the square shows ONLY public projects, that the org is shown on each card (the cross-org context), and that each card links to the 6.12.4 public view.

Acceptance criteria

  • design/project-square/*.mock.html renders the five panels above, referencing ONLY --el-* + [data-display-style] tokens (no Tier-0 --color-*, no hand-rolled spacing/radius) + shipped components/ui/*.
  • The card draws name + ORG + description + the three 6.12.6 stats (viewers / upvotes / activity) with NO "Public" pill, and a whole-card <a href> to the 6.12.4 view; the gallery is drawn paginated / lazy (not load-all).
  • The Trending / Popular / Recent tabs are drawn (with the default tab + any recency-window selector), the search bar + category/tag filter are drawn composing with the active tab, and the categories-by-count browse view is drawn.
  • The page is drawn as a standalone fully-public marketing-site page (top bar + footer, SEO hero), NOT an app-shell route / no left-nav entry; the SEO + GEO scaffolding (head meta/OpenGraph, JSON-LD, semantic outline, sitemap/topic landing pages, GEO framing) is drawn.
  • design-notes.md names every primitive + copy + per-element --el-* role, and states the fully-public (no-auth) + public-only + org-on-card + no-"Public"-pill + links-to-6.12.4 invariants; AA contrast holds for the stat / tab / tag-chip tints.

Context refs

  • scripts/plan-seed/data/story-7.0.ts § 7.0.1 — the multi-panel design-card shape to mirror.
  • scripts/plan-seed/data/story-6.12.ts § 6.12.1 — the public-view + public-roadmap design the cards link INTO (the projection to stay consistent with; NB the square itself is now ANONYMOUS, while 6.12.4 is still account-required — see the header revision + the 6.12 finding).
  • GitHub Trending (https://github.com/trending) + Explore (https://github.com/explore) — the card row (owner/repo, language, description, stats) + the Topics/Collections browse being mirrored.
  • GitLab Explore Projects (https://gitlab.com/explore/projects/trending) — the Trending / Most-starred / All TABS + sort + Topic filter + name search shape.
  • motir-core/components/ui/*, app/globals.css (the --el-* + [data-display-style] token layers), motir-core/CLAUDE.md § colour + shape tokens; Pill (the stat/tag tone primitive).