Make the landing previews look like the actual app - #13
Conversation
The marketing shots were a separate miniature UI. They now compose the same shell, panels, metrics, charts, and ledger as the signed-in app, so the landing page shows those screens as they actually look. Co-authored-by: danielxu0307 <danielxu0307@gmail.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
cursor
Bot
changed the title
![macroscopeapp[bot]](https://avatars.githubusercontent.com/in/900172?s=60&v=4){kind=small}
| id="lp-dashboard-recent" | ||
| span={7} | ||
| title="Recent" | ||
| hint="7 transactions" |
There was a problem hiding this comment.
🟢 Low landing/mocks.tsx:579
The Recent panel displays 7 transactions while the rendered recentDays rows total six (2 + 1 + 1 + 2), so the preview shows an incorrect transaction count. Update the hint to match the visible rows.
| hint="7 transactions" | |
| hint="6 transactions" |
🚀 Reply "fix it for me" or copy this AI Prompt for your agent:
In file @src/components/landing/mocks.tsx around line 579:
The Recent panel displays `7 transactions` while the rendered `recentDays` rows total six (2 + 1 + 1 + 2), so the preview shows an incorrect transaction count. Update the hint to match the visible rows.
| background: rgba(28, 25, 23, 0.06); | ||
| font-size: 10px; | ||
| color: var(--muted-foreground); | ||
| @container lp-preview (min-width: 40rem) { |
There was a problem hiding this comment.
🟡 Medium landing/landing.css:466
At a .lp-preview width just over 40rem, .lp-preview-split switches to two columns even though the main content is only about 27rem wide after the fixed 212px .lp-preview-side; the real-app panels are therefore squeezed or cropped. The lp-preview container query measures the sidebar too, so raise the threshold by the sidebar width (or query a main-column container) before enabling the split.
🚀 Reply "fix it for me" or copy this AI Prompt for your agent:
In file @src/components/landing/landing.css around line 466:
At a `.lp-preview` width just over `40rem`, `.lp-preview-split` switches to two columns even though the main content is only about `27rem` wide after the fixed `212px` `.lp-preview-side`; the real-app panels are therefore squeezed or cropped. The `lp-preview` container query measures the sidebar too, so raise the threshold by the sidebar width (or query a main-column container) before enabling the split.
| }, | ||
| { | ||
| date: '2026-08-11', | ||
| spent: 390, |
There was a problem hiding this comment.
🟢 Low landing/mocks.tsx:163
The dashboard preview displays $390 spent for August 11 even though the only spending transaction is REI for $86.40; the $1,240 Amex payment is marked as a transfer. ledger already uses 86.4 for this date, so change recentDays[3].spent to 86.4 to keep the daily total accurate.
| spent: 390, | |
| spent: 86.4, |
🚀 Reply "fix it for me" or copy this AI Prompt for your agent:
In file @src/components/landing/mocks.tsx around line 163:
The dashboard preview displays `$390` spent for August 11 even though the only spending transaction is REI for `$86.40`; the `$1,240` Amex payment is marked as a transfer. `ledger` already uses `86.4` for this date, so change `recentDays[3].spent` to `86.4` to keep the daily total accurate.
Greptile SummaryThis change rebuilds the landing-page product previews with shared application-style components and representative financial data. The dashboard preview was rendered and shows inconsistent activity data: the August 11 total and the displayed transaction count do not match the rows shown. Correct those fixture values before merging so the preview presents trustworthy financial information. Confidence Score: 4/5Not merge-safe until the landing dashboard fixture data is made internally consistent. There is one verified, non-security P2 finding. Under the required scoring table, P2-only findings produce a score of 4. Files Needing Attention: src/components/landing/mocks.tsx
 T-Rex LogsWhat T-Rex did
Reviews (1): Last reviewed commit: "Rebuild landing previews from the real a..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| }, | ||
| { | ||
| date: '2026-08-11', | ||
| spent: 390, |
There was a problem hiding this comment.
The rendered Recent panel labels August 11 as $390.00, but its only non-transfer expense is the REI purchase for $86.40; the other row is explicitly a $1,240.00 transfer. The panel also says 7 transactions while rendering six rows. Update the fixture total and count, or add the missing matching rows, so the preview does not present contradictory financial activity.
Artifacts
Rendered landing-preview observation log
- Chromium Playwright rendered the actual `DashboardMock` Recent panel and recorded the displayed values, categories, and six-row count, confirming both inconsistencies.
Landing-preview Playwright capture source
- The executed Chromium Playwright script loads the component harness, records a video and poster, reads panel text, and counts rendered transaction rows.
Landing-preview component harness source
- The executed closest-rendered-path harness imports and renders the actual `DashboardMock` component with the application styles.
Landing-preview source observation log
- Executed `nl` output captures the relevant mock data and Recent-panel rendering source lines.
▶ Rendered landing-preview recording
- Chromium recording of the Recent panel showing `7 transactions`, the `$390.00` Aug. 11 header, the transfer, and the REI `$86.40` expense.
Rendered landing-preview poster
- Poster frame from the Chromium recording showing the inconsistent Recent panel.
ApprovabilityVerdict: Needs human review 1 blocking correctness issue found. You can customize Macroscope's approvability policy. Learn more. |
2 participants
The landing page product shots were a separate miniature UI — different chrome, type, and layout from the signed-in app. The marketing page was selling a product that does not look like Bud.
Those frames now render the same screens as the app: dashboard, accounts, net worth, transactions, budget, and the real recurring empty state. Same shell, panels, metrics, and ledger, cropped in the existing product-shot frames.
Note
Replace landing page mock UIs with real app component previews
PreviewShell,PreviewSidebar, andPreviewStackwrappers to frame each mock in an app-like shell with a header, optional sidebar, and main content area.📊 Macroscope summarized 45ca8fb. 2 files reviewed, 0 issues evaluated, 0 issues filtered, 0 comments posted
🗂️ Filtered Issues
No issues evaluated.