Skip to content

Redesign template detail pages around new Contentful fields (WEB3-28) - #80

Merged
marlonmisra merged 8 commits into
mainfrom
claude/cool-pasteur-p87fx7
Oct 20, 2026
Merged

marlonmisra merged 8 commits into
mainfrom
claude/cool-pasteur-p87fx7

Conversation

@vexche

@vexche vexche commented Oct 19, 2026 •

Copy link
Copy Markdown
Collaborator

Summary

Rebuilds every /templates/[slug] page to the client project tracker design handoff. Sections in order: hero, proof strip, definition, benefits, how it works, works with, FAQ, final CTA.

Where each section's content comes from (all from the partnerApps / Apps entry):

Section Source When empty
H1 Marketing Headline (new), one tone Name
Hero lead Hero Description (new) Subtitle
Hero / benefits shots Image List (Desktop) [0] / [1], plus Image List (mobile) below md. Each frame takes the image's own aspect ratio and the shot is contained, never cropped. Alt text comes from the asset's Description Alt falls back to "{name} screenshot"; no image gives a placeholder frame, or benefits cards that run full width
"What is a/an {name}?" Definition Body (new); the question uses the template's name Section hidden
Benefits Marketing App Overview, read by a fixed layout: one Heading 2, then 2–4 Heading 3 + paragraph cards Overview renders whole (and the build logs a warning); hidden if there's no overview
Works with Relative Apps (existing) Listed templates in the same category, by rank
FAQ, "Questions about this {SEO keyword}" FAQ (existing) + SEO Keyword (new) Section hidden
Final CTA heading Final CTA Heading (new) "Start with the {name} template"
<title>, og/twitter title, social card SEO Title (new) + " | Assembly" "{Name} Template"
Meta / og / twitter description SEO Meta Description (new) Hero Description, then the committed long description, never the gallery subtitle; set to null if none, so the root layout's description isn't inherited

Hardcoded on every page, as the handoff specifies:

  • The hero's "Start for free. No credit card required." line.
  • The final CTA lead: "Start from this template for free and make it yours in minutes. No credit card required."
  • The proof strip: G2 4.7, Capterra 4.8, and six customer marks, each with "{Customer} logo" text.
  • All three How it works panels.

CTA: "Use this template" reuses TemplateAuthCta, so signed-in visitors keep production's behaviour: "Add app to workspace" for a template with an app id, "Open Assembly" for one without. Both variants are in the markup, and the pre-paint auth script sets display: none on the one that doesn't apply.

Also:

  • The gallery card is extracted into TemplateCard and reused by the Works with row. The gallery itself is visually unchanged.
  • /templates?category=trackers opens the gallery already filtered, so the breadcrumb lands on the right category.
  • Adds BreadcrumbList, SoftwareApplication (no rating markup) and FAQPage (in the order the faq field sets) JSON-LD.
  • Moves the G2 and Capterra marks out of the /customers page into a shared component.
  • ogImageFor alt text now reads "{title} | Assembly" instead of using an em dash. This also applies to the proposal and embed cards.
  • Review scores corrected everywhere to G2 4.7, Capterra 4.8: the /customers hero badges (their aria-labels lose the em dash too), the /solutions FAQ answer in solutions.frozen.ts, and llm-info.ts.

Contentful (already published):

  • The seven new fields, plus size limits on FAQ (8) and Relative Apps (4).
  • The Client project tracker entry is filled in: the new fields, 6 FAQ entries, 4 Relative Apps, and Marketing App Overview in the benefits layout.
  • Alt text set on its desktop and mobile screenshots.
  • Until this merges, production renders the old layout and shows the rewritten App Overview whole, as headings and paragraphs.

Linear

WEB3-28

Testing

  • tsc --noEmit passes. eslint is clean on every changed file; the two remaining repo issues are in untouched files (use-auth.ts, ghost.ts) and also fail on main.
  • npm test passes: 33 tests, including the benefits parser and copy-fallback tests (the definition names the template, the FAQ uses the keyword, the meta description never falls back to the subtitle).
  • npm run build couldn't finish in the sandbox, because it can't resolve copilot-blog.ghost.io. Vercel's build is the check.
  • Rendered locally against a fixture matching the live entry. Title "Free Project Tracker Template for Clients | Assembly"; social card alt the same; definition "What is a client project tracker?"; FAQ "Questions about this project tracker template"; proof line "Rated 4.7 on G2 and 4.8 on Capterra". Three CTA pairs, each with one variant hidden. Image frames at 2880 / 1620 with object-contain. FAQPage, BreadcrumbList and SoftwareApplication JSON-LD present.
  • Preview: https://assembly-studio-website-git-claude-cool-past-797abe-assemblycom.vercel.app/templates/client-project-tracker
  • Screenshot or Loom: to add

🤖 Generated with Claude Code

https://claude.ai/code/session_01Q5EaLBeuhHauS18ES6U7uK

Rebuilds /templates/[slug] to the client project tracker handoff: hero,
proof strip, definition, benefits, how it works, works with, FAQ and a
final CTA. Per-template copy comes from the new Apps fields (Marketing
Headline, Hero Description, SEO Keyword, Definition Body, Final CTA
Heading, SEO Title, SEO Meta Description) plus the existing FAQ and
Relative Apps fields; each section hides or falls back when its field is
empty, so unfilled templates still render whole.

- Benefits are read from the Marketing App Overview by a fixed layout
  (H2, then 2-4 H3 + paragraph cards); anything else renders whole and
  logs a warning.
- Definition and FAQ headings are built from the SEO keyword.
- Gallery card extracted into TemplateCard and reused by Works with.
- /templates honours ?category= so the breadcrumb lands filtered.
- BreadcrumbList, SoftwareApplication and FAQPage JSON-LD.
- G2/Capterra marks moved to a shared component.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Q5EaLBeuhHauS18ES6U7uK
@vexche
vexche requested a review from nastyaeremina as a code owner October 19, 2026 18:33
@vercel

vercel Bot commented Oct 19, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
assembly-studio-website Ready Ready Preview Oct 19, 2026 8:33pm UTC

Request Review

@linear-code

linear-code Bot commented Oct 19, 2026

Copy link
Copy Markdown

WEB3-28

@greptile-apps

greptile-apps Bot commented Oct 19, 2026 •

Copy link
Copy Markdown

RetriggerView in GreptileConfidence Score: 5/5

[Medium impact] The PR appears safe to merge, with two non-blocking fixes for search descriptions and screen-reader text.

Findings

  1. P2 Missing descriptions inherit homepage copy ▶
  2. P2 Advertai's name is read twice ▶

Summary

Rebuilds template detail pages around Contentful copy, screenshots, related templates, and FAQs.

  • Template pages now guide visitors from a screenshot to a clear next step.
  • Template pages suggest related apps and link back to a pre-filtered gallery.
  • Template pages use matching search copy and describe their content to search engines.

Reviews (3) · Last reviewed commit: "Template page review fixes: copy rules, ..." · Reviewed by Greptile

Comment thread src/components/templates/detail/template-shot.tsx Outdated
Comment thread src/app/templates/[slug]/page.tsx Outdated
Image List (mobile) holds full phone screens (1320x2868). In the desktop
frame's 16:10 they showed only the top sliver, so a frame holding a mobile
shot switches to 4:5 below md and crops from the top.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Q5EaLBeuhHauS18ES6U7uK
- The fallback <img> keeps the desktop srcSet, so a phone viewing a
  template with no mobile shot still picks a small width.
- Benefits only split into two columns when the second screenshot exists;
  otherwise the cards take the full width, four across from lg.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Q5EaLBeuhHauS18ES6U7uK

vexche commented Oct 19, 2026

Copy link
Copy Markdown
Collaborator Author

@greptileai please re-review: e1e0ebd addresses both findings from the first review (the fallback srcSet on the template shot, and the benefits grid when there's no second screenshot).


Generated by Claude Code

greptile-apps[bot]
greptile-apps Bot previously approved these changes Oct 19, 2026
…B3-28)

- Definition H2 names the template ("What is a client project tracker?");
  only the FAQ heading uses the SEO keyword ("Questions about this ...").
- Meta description falls back SEO Meta Description -> Hero Description ->
  committed long description, never the gallery subtitle; with none, the
  tag is omitted.
- Social card prints the SEO title; its alt reads "{title} | Assembly".
- Screenshot alt falls back to "{name} screenshot"; customer logos carry
  "{Customer} logo" as real text.
- Screenshots take their own aspect ratio and are contained, not cropped.
- "Use this template" keeps production's signed-in behaviour (Add app to
  workspace / Open Assembly) by reusing TemplateAuthCta.
- "Free plan that never expires" -> "Start for free. No credit card required."

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Q5EaLBeuhHauS18ES6U7uK

vexche commented Oct 19, 2026

Copy link
Copy Markdown
Collaborator Author

@greptileai please review ff8c755: review fixes for the copy rules, alt text, uncropped screenshots and the auth-aware CTA.


Generated by Claude Code

Comment thread src/app/templates/[slug]/page.tsx Outdated
Comment thread src/components/templates/detail/template-proof.tsx
greptile-apps[bot]
greptile-apps Bot previously approved these changes Oct 19, 2026
- A template with no description sets description: null, so it doesn't
  inherit the root layout's homepage description.
- The drawn customer marks are aria-hidden; the sr-only "{Customer} logo"
  text is the link's one name (Advertai's SVG labelled itself too).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Q5EaLBeuhHauS18ES6U7uK
The rating line is now built from the same RATINGS array as the badges,
so the two can't drift apart.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Q5EaLBeuhHauS18ES6U7uK
"Start from this template for free and make it yours in minutes. No credit
card required."

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Q5EaLBeuhHauS18ES6U7uK
/customers hero, the /solutions FAQ answer and llm-info.ts still quoted
G2 4.8 / Capterra 4.7. The /customers badge labels lose their em dash to
match the template pages.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Q5EaLBeuhHauS18ES6U7uK
@marlonmisra
marlonmisra merged commit b7d5e57 into main Oct 20, 2026
3 checks passed
@marlonmisra
marlonmisra deleted the claude/cool-pasteur-p87fx7 branch October 20, 2026 15:17

This branch was successfully deployed

1 active deployment
Preview — 87c7c914 Deployed Oct 19, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants