feat(dashboard): compact landing page#95
Conversation
Redesign the public homepage with a compact Thariq-inspired visual treatment. Keep homepage content focused on hero, feature cards, and API endpoints. Replace external landing SVG assets with inline reusable visuals. Co-Authored-By: Duyet Le <me@duyet.net> Co-Authored-By: duyetbot <bot@duyet.net>
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (3)
📝 WalkthroughWalkthroughThe PR refactors the dashboard landing page to replace static image assets with React-based SVG visual components. A new visuals module exports ChangesLanding page visual and layout refactor
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request refactors the dashboard landing page by replacing static SVG images with a suite of React-based SVG components and a dedicated CSS theme layer. Significant updates include the introduction of the HeroConsole and StateArchitectureDiagram components, the transition of animations to a spring-based model, and a simplified page structure. Review feedback identifies an invalid HTML nesting issue in the features section, suggests accessibility improvements for decorative elements, and highlights potential whitespace issues in code block rendering.
| <CardDescription className="flex flex-col gap-2"> | ||
| <Badge variant="secondary">{badge}</Badge> | ||
| <span>{description}</span> | ||
| </CardDescription> |
There was a problem hiding this comment.
The CardDescription component typically renders a <p> tag. Nesting a Badge (which is usually a <div>) and a flex flex-col container inside it results in invalid HTML (block-level elements inside a paragraph). It is better to use a div for the layout and keep CardDescription for the actual descriptive text.
| <CardDescription className="flex flex-col gap-2"> | |
| <Badge variant="secondary">{badge}</Badge> | |
| <span>{description}</span> | |
| </CardDescription> | |
| <div className="flex flex-col gap-2"> | |
| <Badge variant="secondary" className="w-fit">{badge}</Badge> | |
| <CardDescription>{description}</CardDescription> | |
| </div> |
| <span /> | ||
| <span /> | ||
| <span /> |
There was a problem hiding this comment.
These span elements are purely decorative (used to render the window control circles) and should be hidden from assistive technologies to avoid confusing screen reader users.
| <span /> | |
| <span /> | |
| <span /> | |
| <span aria-hidden="true" /> | |
| <span aria-hidden="true" /> | |
| <span aria-hidden="true" /> |
| <pre> | ||
| <code>{`POST /api/v1/conversations | ||
| Authorization: Bearer as_live_... | ||
|
|
||
| { | ||
| "messages": [{ "role": "user" }], | ||
| "metadata": { "agent": "support" } | ||
| }`}</code> | ||
| </pre> |
There was a problem hiding this comment.
The <pre> tag preserves all whitespace, including the newlines and indentation between the tags and the content. The current formatting will introduce unwanted leading/trailing whitespace and indentation in the rendered code block. It is best to keep the content flush with the tags.
<pre><code>{"POST /api/v1/conversations\nAuthorization: Bearer as_live_...\n\n{\n \"messages\": [{ \"role\": \"user\" }],\n \"metadata\": { \"agent\": \"support\" }\n}"}</code></pre>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/dashboard/src/app/globals.css`:
- Around line 122-495: Stylelint flagged a missing empty line before the
declaration "-webkit-font-smoothing: antialiased;" inside the .landing-page
rule; open the .landing-page rule (selector ".landing-page") and insert a single
blank line immediately before the "-webkit-font-smoothing: antialiased;"
declaration to match the project's spacing convention (also scan the ".dark
.landing-page" block for the same pattern and add a blank line there if
missing), then run the formatter/stylelint to verify the warning is resolved.
In `@packages/dashboard/src/components/landing/visuals.tsx`:
- Line 1: Export the UseCaseVisualVariant union so external modules can
reference it for type-safety; update the declaration of UseCaseVisualVariant
(used by the public component UseCaseVisual) to be exported (e.g., add the
export keyword) so callers can import and reuse the type in their own typings
and helpers.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: caf257de-a3e4-4317-b02d-7e3522858f46
⛔ Files ignored due to path filters (5)
packages/dashboard/public/landing/analytics.svgis excluded by!**/*.svgpackages/dashboard/public/landing/chatbot.svgis excluded by!**/*.svgpackages/dashboard/public/landing/frameworks.svgis excluded by!**/*.svgpackages/dashboard/public/landing/sessions.svgis excluded by!**/*.svgpackages/dashboard/public/landing/state-architecture.svgis excluded by!**/*.svg
📒 Files selected for processing (9)
packages/dashboard/src/app/_features.tsxpackages/dashboard/src/app/_hero.tsxpackages/dashboard/src/app/globals.csspackages/dashboard/src/app/page.tsxpackages/dashboard/src/components/landing/how-it-works.tsxpackages/dashboard/src/components/landing/motion.tsxpackages/dashboard/src/components/landing/use-cases-parts.tsxpackages/dashboard/src/components/landing/use-cases.tsxpackages/dashboard/src/components/landing/visuals.tsx
Co-Authored-By: Duyet Le <me@duyet.net> Co-Authored-By: duyetbot <bot@duyet.net>
Co-Authored-By: Duyet Le <me@duyet.net> Co-Authored-By: duyetbot <bot@duyet.net>
1 participant
Summary
Verification
Summary by CodeRabbit
New Features
Style
Refactor