Add logo wall and tweet wall to docs homepage#970
Draft
Conversation
Port the customer logo wall (Mux, Whop, Neon) and builder testimonial tweet wall from vercel.com/workflow to the docs site homepage. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
Contributor
Contributor
📊 Benchmark Results
workflow with no steps💻 Local Development
▲ Production (Vercel)
workflow with 1 step💻 Local Development
▲ Production (Vercel)
workflow with 10 sequential steps💻 Local Development
▲ Production (Vercel)
workflow with 25 sequential steps💻 Local Development
▲ Production (Vercel)
workflow with 50 sequential steps💻 Local Development
▲ Production (Vercel)
Promise.all with 10 concurrent steps💻 Local Development
▲ Production (Vercel)
Promise.all with 25 concurrent steps💻 Local Development
▲ Production (Vercel)
Promise.all with 50 concurrent steps💻 Local Development
▲ Production (Vercel)
Promise.race with 10 concurrent steps💻 Local Development
▲ Production (Vercel)
Promise.race with 25 concurrent steps💻 Local Development
▲ Production (Vercel)
Promise.race with 50 concurrent steps💻 Local Development
▲ Production (Vercel)
Stream Benchmarks (includes TTFB metrics)workflow with stream💻 Local Development
▲ Production (Vercel)
SummaryFastest Framework by WorldWinner determined by most benchmark wins
Fastest World by FrameworkWinner determined by most benchmark wins
Column Definitions
Worlds:
❌ Some benchmark jobs failed:
Check the workflow run for details. |
Contributor
🧪 E2E Test Results❌ Some tests failed Summary
❌ Failed Tests▲ Vercel Production (5 failed)astro (1 failed):
fastify (1 failed):
nitro (1 failed):
nuxt (1 failed):
sveltekit (1 failed):
🌍 Community Worlds (169 failed)mongodb (42 failed):
redis (42 failed):
starter (43 failed):
turso (42 failed):
Details by Category❌ ▲ Vercel Production
✅ 💻 Local Development
✅ 📦 Local Production
✅ 🐘 Local Postgres
✅ 🪟 Windows
❌ 🌍 Community Worlds
✅ 📋 Other
❌ Some E2E test jobs failed:
Check the workflow run for details. |
Contributor
There was a problem hiding this comment.
Pull request overview
Adds new marketing/social proof sections to the docs homepage (useworkflow.dev) by porting a customer logo wall and a builder testimonial “tweet wall” into the existing home page layout.
Changes:
- Inserted a new
LogoWallsection beneath the hero on the docs homepage. - Added a new
TweetWallsection (5 tweet-style testimonial cards) into the main homepage grid. - Introduced new components implementing the logo SVGs (using
currentColor) and tweet cards using the existing shadcn Avatar styling.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 6 comments.
| File | Description |
|---|---|
| docs/app/[lang]/(home)/page.tsx | Wires the new LogoWall and TweetWall components into the homepage layout. |
| docs/app/[lang]/(home)/components/tweet-wall.tsx | Adds the testimonial tweet wall component with a responsive multi-column layout and external links. |
| docs/app/[lang]/(home)/components/logo-wall.tsx | Adds the customer logo wall component with inline SVG logos using currentColor. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+10
to
+12
| <div className="columns-1 gap-4 space-y-4 md:columns-2 lg:columns-3"> | ||
| {TWEETS.map((tweet) => ( | ||
| <div key={tweet.username} className="break-inside-avoid"> |
There was a problem hiding this comment.
The masonry container combines CSS columns with space-y-4. Because space-y-* adds margin-top based on DOM order (not per column), the first card in column 2/3 will also get a top margin, producing uneven top alignment. Prefer giving each item a bottom margin/padding (e.g., on the .break-inside-avoid wrapper) and remove space-y-4, keeping columns-* + gap-* for column spacing.
Suggested change
| <div className="columns-1 gap-4 space-y-4 md:columns-2 lg:columns-3"> | |
| {TWEETS.map((tweet) => ( | |
| <div key={tweet.username} className="break-inside-avoid"> | |
| <div className="columns-1 gap-4 md:columns-2 lg:columns-3"> | |
| {TWEETS.map((tweet) => ( | |
| <div key={tweet.username} className="break-inside-avoid mb-4 last:mb-0"> |
Comment on lines
+7
to
+9
| <p className="font-semibold text-2xl md:text-3xl lg:text-4xl tracking-tight text-center text-balance mb-6 md:mb-10"> | ||
| What builders say about Workflow DevKit | ||
| </p> |
There was a problem hiding this comment.
This section title is rendered as a <p> even though other homepage sections use heading tags (h2, h3). Using a heading element here will improve document outline/SEO and keep heading semantics consistent across the homepage.
Suggested change
| <p className="font-semibold text-2xl md:text-3xl lg:text-4xl tracking-tight text-center text-balance mb-6 md:mb-10"> | |
| What builders say about Workflow DevKit | |
| </p> | |
| <h2 className="font-semibold text-2xl md:text-3xl lg:text-4xl tracking-tight text-center text-balance mb-6 md:mb-10"> | |
| What builders say about Workflow DevKit | |
| </h2> |
Comment on lines
+84
to
+90
| function InlineLink({ | ||
| className, | ||
| ...props | ||
| }: React.ComponentProps<'span'>): JSX.Element { | ||
| return ( | ||
| <span className={cn('text-[rgb(29,155,240)]', className)} {...props} /> | ||
| ); |
There was a problem hiding this comment.
InlineLink renders a <span> (not an anchor) but is named like a link, which is misleading for future maintenance. Consider renaming it to something like InlineMention/InlineHandle, or change it to render an actual <a> when appropriate.
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| {...props} | ||
| > |
There was a problem hiding this comment.
The SVG logo is missing accessible text (e.g., a <title> element and/or aria-label). Other SVG icons in this docs codebase include <title> for screen readers. Add a title/label here (or explicitly mark the SVG aria-hidden if it’s purely decorative).
Suggested change
| > | |
| > | |
| <title>Mux logo</title> |
Comment on lines
+40
to
+42
| xmlns="http://www.w3.org/2000/svg" | ||
| {...props} | ||
| > |
There was a problem hiding this comment.
This SVG logo is missing accessible text (e.g., a <title> element and/or aria-label). Add a title/label here (or explicitly mark the SVG aria-hidden if it’s purely decorative) to avoid unlabeled images for screen readers.
Suggested change
| xmlns="http://www.w3.org/2000/svg" | |
| {...props} | |
| > | |
| xmlns="http://www.w3.org/2000/svg" | |
| role="img" | |
| aria-labelledby="whop-logo-title" | |
| {...props} | |
| > | |
| <title id="whop-logo-title">Whop logo</title> |
| height="80" | ||
| viewBox="0 0 280 80" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" |
There was a problem hiding this comment.
This SVG logo is missing accessible text (e.g., a <title> element and/or aria-label). Add a title/label here (or explicitly mark the SVG aria-hidden if it’s purely decorative) to avoid unlabeled images for screen readers.
Suggested change
| xmlns="http://www.w3.org/2000/svg" | |
| xmlns="http://www.w3.org/2000/svg" | |
| role="img" | |
| aria-label="Neon logo" |
- Replace simple bar chart with full O11yVisual animation ported from vercel.com/workflow (status bar, animated counter, grid lines, sequential animated bars with progress line) - Move observability to its own full-width section - Move tweet wall above "Get started quickly" templates section Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
pranaygp
commented
Feb 9, 2026
Collaborator
Author
pranaygp
left a comment
pranaygp
left a comment
There was a problem hiding this comment.
Looks good overall — the logo wall, tweet wall, and new o11y animation are solid additions. A few things to consider:
Layout change (page.tsx): Observability and Frameworks were previously in a side-by-side lg:grid-cols-2 layout and are now stacked vertically. Assuming this was intentional to give the new o11y animation more room, but wanted to flag it.
Animation replay (o11y-visual.tsx): useInView is used without { once: true }, so the animation will re-trigger every time the user scrolls the section back into view. The old observability section used viewport={{ once: true }}. If a user scrolls past and back, the bars will be at their current position and try to animate again. Consider either passing { once: true } to useInView, or resetting the motion values in the cleanup function so replay is clean.
No changeset needed since this is a docs-only change — confirmed.
pranaygp
commented
Feb 9, 2026
| return ( | ||
| <motion.div | ||
| style={{ | ||
| width: useTransform(width, (v) => `${v}%`), |
Collaborator
Author
There was a problem hiding this comment.
useTransform is a React hook being called inside the JSX return rather than at the top of the component body. While it works (it's always called, not conditional), it's unconventional and also creates a new callback on every render. Consider extracting it:
const widthPercent = useTransform(width, (v) => `${v}%`);
return (
<motion.div
style={{ width: widthPercent, overflow }}
...
pranaygp
commented
Feb 9, 2026
| <div className="flex flex-col items-start"> | ||
| <span className="text-sm font-medium flex items-center gap-1"> | ||
| {name} | ||
| <svg |
Collaborator
Author
There was a problem hiding this comment.
The verification badge is hardcoded on every tweet. Are all five of these accounts actually verified on X? If not, this could be misleading — consider making it a per-tweet boolean in the TWEETS data.
pranaygp
commented
Feb 9, 2026
| export function O11yVisual(): JSX.Element { | ||
| const [isFinished, setIsFinished] = useState(false); | ||
| const ref = useRef<HTMLDivElement>(null); | ||
| const isInView = useInView(ref); |
Collaborator
Author
There was a problem hiding this comment.
nit: useInView(ref) without { once: true } means the animation restarts on every scroll-in. The old observability section used viewport={{ once: true }}. If the user scrolls past and returns, the bars will be mid-state and re-animate from there. Passing { once: true } would match the previous behavior.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
currentColorSVGs for automatic light/dark mode supportTest plan
🤖 Generated with Claude Code