feat(landing): redesign 'Powerful AI tools' section with Forge system#4405
Open
anuragmishrainsights wants to merge 4 commits into
Open
feat(landing): redesign 'Powerful AI tools' section with Forge system#4405anuragmishrainsights wants to merge 4 commits into
anuragmishrainsights wants to merge 4 commits into
Conversation
- forge.css: dark/technical design tokens (status chips, monospace metrics, bento) - forge/ primitives: StatusBadge, MetricChip, ForgeButton, BentoCard - ForgeFeaturePage: data-driven landing rendering all 5 routes from FEATURES_BY_SLUG - 5 thin wrapper pages (ResumeBuilderForge, ResumeRoastForge, GithubPortfolioForge, ProjectVisualizerForge, MockInterviewForge)
|
CodeAnt AI is reviewing your PR. |
Thanks for using CodeAnt! 🎉We're free for open-source projects. if you're enjoying it, help us grow by sharing. Share on X · |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
Warning Review limit reached
Next review available in: 55 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (13)
✨ 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 |
codeant-ai
Bot
added
the
size:XL
![codeant-ai[bot]](https://avatars.githubusercontent.com/in/646884?s=60&v=4){kind=small}
| import Navbar from '../components/Navbar' | ||
| import HeroSection from '../components/ui/HeroSection' | ||
| import OurToolsSection from '../components/landing/OurToolsSection' | ||
| import OurToolsSection from '../components/landing/ForgeToolsSection' |
There was a problem hiding this comment.
Suggestion: The new homepage import wires in ForgeToolsSection, but that component currently imports its stylesheet via ../styles/forge.css from components/landing, which resolves to a non-existent components/styles path. This will fail module resolution when Home loads. Update the stylesheet import in ForgeToolsSection to the correct src/styles/forge.css relative path (or move to a shared alias import) before using it here. [import error]
Severity Level: Critical 🚨
- ❌ Home page bundle fails due to missing CSS import.
- ❌ New Forge tools section cannot render at all.
- ⚠️ Any route loading Home component experiences runtime failure.Steps of Reproduction ✅
1. Start the frontend dev server or build (`npm run dev` / `npm run build`) so that
`frontend/src/pages/Home.jsx` is compiled and the `Home` component (lines 16-38 in the PR
hunk) is included in the main bundle.
2. During compilation, the static import at `frontend/src/pages/Home.jsx:4` (`import
OurToolsSection from '../components/landing/ForgeToolsSection'`) causes the bundler to
load `frontend/src/components/landing/ForgeToolsSection.jsx` (verified via BulkRead).
3. The `ForgeToolsSection.jsx` file at
`frontend/src/components/landing/ForgeToolsSection.jsx:4` contains `import
'../styles/forge.css';`, which resolves to `frontend/src/components/styles/forge.css`
because of the `../styles` relative path (components/landing → components/styles).
4. A Glob search shows the stylesheet actually lives at `frontend/src/styles/forge.css`
(not under `components/styles`), so the bundler cannot find `../styles/forge.css` and
raises a module resolution error (e.g., esbuild/webpack “Could not resolve
'../styles/forge.css'”), preventing the Home page bundle from building and stopping the
app from serving the homepage.
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** frontend/src/pages/Home.jsx
**Line:** 4:4
**Comment:**
*Import Error: The new homepage import wires in `ForgeToolsSection`, but that component currently imports its stylesheet via `../styles/forge.css` from `components/landing`, which resolves to a non-existent `components/styles` path. This will fail module resolution when Home loads. Update the stylesheet import in `ForgeToolsSection` to the correct `src/styles/forge.css` relative path (or move to a shared alias import) before using it here.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix
| import { useAuth } from '../../hooks/useAuth'; | ||
| import { FEATURES_BY_SLUG } from '../../data/featuresConfig'; | ||
| import Seo from '../../components/Seo'; | ||
| import '../styles/forge.css'; |
There was a problem hiding this comment.
Suggestion: This stylesheet path resolves to components/styles/forge.css, but the CSS file lives under src/styles, so the import fails and Forge styles will not be applied. Fix the relative path to the actual stylesheet location. [import error]
Severity Level: Critical 🚨
❌ Missing CSS import may break build in bundler.
⚠️ Forge feature page renders without Forge visual styles.Steps of Reproduction ✅
1. In `frontend/src/components/forge/ForgeFeaturePage.jsx`, note the stylesheet import at
line 6: `import '../styles/forge.css';`.
2. This file resides in `frontend/src/components/forge/`, so the `../styles/forge.css`
path resolves to `frontend/src/components/styles/forge.css`.
3. A Glob search for `**/forge.css` under `/workspace/career-pilot` finds only
`/workspace/career-pilot/frontend/src/styles/forge.css`, confirming there is no
`frontend/src/components/styles/forge.css` file.
4. When bundling `ForgeFeaturePage`, the CSS loader cannot resolve `../styles/forge.css`,
leading either to a build-time "file not found" error or Forge feature pages rendering
without the Forge design system styles defined in `frontend/src/styles/forge.css`.
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** frontend/src/components/forge/ForgeFeaturePage.jsx
**Line:** 6:6
**Comment:**
*Import Error: This stylesheet path resolves to `components/styles/forge.css`, but the CSS file lives under `src/styles`, so the import fails and Forge styles will not be applied. Fix the relative path to the actual stylesheet location.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix
Comment on lines
+7
to
+10
| import StatusBadge from './forge/StatusBadge'; | ||
| import MetricChip from './forge/MetricChip'; | ||
| import ForgeButton from './forge/ForgeButton'; | ||
| import BentoCard from './forge/BentoCard'; |
There was a problem hiding this comment.
Suggestion: The component imports point to a non-existent nested forge directory, so module resolution will fail and this page cannot load. Update these imports to reference sibling files in the same folder. [import error]
Severity Level: Critical 🚨
❌ Forge feature routes error; ResumeBuilderForge page fails to load.
⚠️ Other Forge routes break importing ForgeFeaturePage component.Steps of Reproduction ✅
1. Open `frontend/src/pages/features/ResumeBuilderForge.jsx` (lines 1-4) which imports
`ForgeFeaturePage` from `../../components/forge/ForgeFeaturePage` and renders it with
`slug="resume-builder"`.
2. When the app bundles this route, the bundler loads
`frontend/src/components/forge/ForgeFeaturePage.jsx`, which at lines 7-10 imports
`StatusBadge`, `MetricChip`, `ForgeButton`, and `BentoCard` from `./forge/...`.
3. Because `ForgeFeaturePage.jsx` lives in `frontend/src/components/forge/`, the
`./forge/StatusBadge` path resolves to
`frontend/src/components/forge/forge/StatusBadge.jsx`, but BulkRead shows the actual
component file at `frontend/src/components/forge/StatusBadge.jsx` (line 1) with no `forge`
subdirectory present.
4. At build or runtime, module resolution for `./forge/StatusBadge` (and the other three
imports) fails with a "Module not found" error, preventing `ForgeFeaturePage` and all
feature routes (e.g., `ResumeBuilderForge.jsx`, `ResumeRoastForge.jsx`,
`MockInterviewForge.jsx`, `ProjectVisualizerForge.jsx`) from loading.
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** frontend/src/components/forge/ForgeFeaturePage.jsx
**Line:** 7:10
**Comment:**
*Import Error: The component imports point to a non-existent nested `forge` directory, so module resolution will fail and this page cannot load. Update these imports to reference sibling files in the same folder.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix
Comment on lines
+33
to
+34
| const d = ICONS[name]; | ||
| if (!d) return null; |
There was a problem hiding this comment.
Suggestion: Returning null for unknown icon names causes empty icon slots for configured features whose icon keys are not present in the local icon map (for example Target, Share, Code, Star, MessageSquare, BookOpen, Search, ListTodo, Bell, Video). Add these mappings or provide a visible fallback icon instead of rendering nothing. [incomplete implementation]
Severity Level: Major ⚠️
⚠️ Showcase cards lose icons for several Forge features.
⚠️ Visual polish degraded on resume roast, job finder pages.Steps of Reproduction ✅
1. Inspect `frontend/src/data/featuresConfig.js` lines 123-260 where multiple feature
configs define `showcase.features` icons: e.g., Resume Roast uses `'Target'` and `'Share'`
(lines 124-129), GitHub Portfolio uses `'Code'` and `'Star'` (lines 167-172), Project
Visualizer uses `'MessageSquare'` and `'BookOpen'` (lines 210-215), and Job Finder uses
`'Search'`, `'Target'`, `'ListTodo'`, and `'Bell'` (lines 253-258).
2. In `frontend/src/components/forge/ForgeFeaturePage.jsx` lines 12-29, the local `ICONS`
map defines paths for `FileText`, `Type`, `Github`, `Sparkles`, `BarChart`, `Layout`,
`Linkedin`, `Download`, `Mic`, `Briefcase`, `Flame`, `Network`, `Users`, `Palette`, `Zap`,
`Smartphone`, and `Globe`, but contains no entries for `Target`, `Share`, `Code`, `Star`,
`MessageSquare`, `BookOpen`, `Search`, `ListTodo`, or `Bell`.
3. The `Icon` component at lines 32-40 reads `const d = ICONS[name];` and executes `if
(!d) return null;`, so when `ForgeFeaturePage` renders showcase cards at lines 98-110
(`config.showcase.features.map((f, i) => <BentoCard ... icon={(p) => <Icon name={f.icon}
{...p} />} />)`), any feature whose `f.icon` is one of the missing names causes `Icon` to
return `null`.
4. `frontend/src/components/forge/BentoCard.jsx` lines 13-18 render the icon only when the
`Icon` prop is truthy; since `Icon` returns `null` for these names, the `.ico` container
for those showcase cards is empty, resulting in blank icon slots for several feature pages
once `ForgeFeaturePage` is successfully wired and the `FEATURES_BY_SLUG[slug]` config is
exported correctly.
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** frontend/src/components/forge/ForgeFeaturePage.jsx
**Line:** 33:34
**Comment:**
*Incomplete Implementation: Returning `null` for unknown icon names causes empty icon slots for configured features whose icon keys are not present in the local icon map (for example `Target`, `Share`, `Code`, `Star`, `MessageSquare`, `BookOpen`, `Search`, `ListTodo`, `Bell`, `Video`). Add these mappings or provide a visible fallback icon instead of rendering nothing.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix| import React from 'react'; | ||
| import { motion } from 'framer-motion'; | ||
| import { FEATURES } from '../../data/featuresConfig'; | ||
| import '../styles/forge.css'; |
There was a problem hiding this comment.
Suggestion: This stylesheet import also points to a non-existent components/styles/forge.css path, which breaks CSS loading for the landing tools section. Update it to the correct path under src/styles. [import error]
Severity Level: Critical 🚨
❌ Homepage tools section may fail CSS import at build.
⚠️ Tools grid renders unstyled without Forge design system.Steps of Reproduction ✅
1. In `frontend/src/components/landing/ForgeToolsSection.jsx`, observe the stylesheet
import at line 4: `import '../styles/forge.css';`.
2. This component resides in `frontend/src/components/landing/`, so `../styles/forge.css`
resolves to `frontend/src/components/styles/forge.css`.
3. A Glob search for `**/forge.css` under `/workspace/career-pilot` shows the only Forge
stylesheet at `/workspace/career-pilot/frontend/src/styles/forge.css`, with no
`frontend/src/components/styles/forge.css` present.
4. When the homepage renders `ForgeToolsSection` from `frontend/src/pages/Home.jsx` (as
per repo context), the bundler attempts to load `../styles/forge.css` and fails to find
the file, leading to either a build-time error or the "Powerful AI tools for every step"
section rendering without the intended Forge design system styling.
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** frontend/src/components/landing/ForgeToolsSection.jsx
**Line:** 4:4
**Comment:**
*Import Error: This stylesheet import also points to a non-existent `components/styles/forge.css` path, which breaks CSS loading for the landing tools section. Update it to the correct path under `src/styles`.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix
Comment on lines
+3
to
+5
| export default function ProjectVisualizerForge() { | ||
| return <ForgeFeaturePage slug="project-visualizer" />; | ||
| } |
There was a problem hiding this comment.
Suggestion: This wrapper is currently dead code because no route or parent imports it, so the new Forge version of the page will never be rendered. Wire this component into the router (or replace the current landing component import) so the new page is actually reachable. [incomplete implementation]
Severity Level: Major ⚠️
- ⚠️ Project Visualizer Forge landing never displayed via routing.
- ⚠️ Existing /project-visualizer route still uses legacy landing.Steps of Reproduction ✅
1. Open `frontend/src/pages/features/ProjectVisualizerForge.jsx` and observe the new
component definition at lines 3-5: `ProjectVisualizerForge` returns a `ForgeFeaturePage`
with `slug="project-visualizer"`.
2. Search the codebase for `ProjectVisualizerForge` (e.g. via ripgrep); the only match is
the definition in `frontend/src/pages/features/ProjectVisualizerForge.jsx:3-5`, confirming
no other file imports or renders this component.
3. Inspect the router in `frontend/src/App.jsx`: the `/project-visualizer` public landing
route is defined twice (lines 80-86 and again around 61-66 in the later block) and both
use `ProjectVisualizerLanding` imported from `./pages/features/ProjectVisualizerLanding`,
not `ProjectVisualizerForge`.
4. Run the frontend and navigate to `/project-visualizer` (or click any link to that slug,
for example links described in `README.md:322,434`); the rendered component is
`ProjectVisualizerLanding` wired in `App.jsx`, while `ProjectVisualizerForge` is never
mounted, demonstrating the new Forge page is currently dead code.
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** frontend/src/pages/features/ProjectVisualizerForge.jsx
**Line:** 3:5
**Comment:**
*Incomplete Implementation: This wrapper is currently dead code because no route or parent imports it, so the new Forge version of the page will never be rendered. Wire this component into the router (or replace the current landing component import) so the new page is actually reachable.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix
Comment on lines
+3
to
+5
| export default function ResumeBuilderForge() { | ||
| return <ForgeFeaturePage slug="resume-builder" />; | ||
| } |
There was a problem hiding this comment.
Suggestion: This wrapper is not integrated into routing or any caller, so adding it does not change runtime behavior and users will never hit this Forge page. Connect it to the /resume-builder route (or the intended navigation path) to complete the feature. [incomplete implementation]
Severity Level: Major ⚠️
- ⚠️ Resume Builder Forge landing cannot be reached from router.
- ⚠️ Existing /resume-builder route continues using ResumeBuilderLanding component.Steps of Reproduction ✅
1. Open `frontend/src/pages/features/ResumeBuilderForge.jsx` and note the wrapper at lines
3-5: `ResumeBuilderForge` returns `ForgeFeaturePage` with `slug="resume-builder"`.
2. Search the repository for `ResumeBuilderForge`; the only hit is its definition in
`frontend/src/pages/features/ResumeBuilderForge.jsx:3-5`, showing no router or parent
component imports it.
3. Check the router configuration in `frontend/src/App.jsx` around lines 79-81: the public
route `<Route path="/resume-builder" element={...}>` renders `ResumeBuilderLanding` via
the lazy import `const ResumeBuilderLanding = lazy(() =>
import('./pages/features/ResumeBuilderLanding'));` (lines 105-113), not
`ResumeBuilderForge`.
4. Start the app and navigate to `/resume-builder` using the browser or any in-app link
targeting that path; `ResumeBuilderLanding` is rendered as configured in `App.jsx`, while
`ResumeBuilderForge` is never mounted, confirming the new Forge wrapper is currently
unreachable.
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** frontend/src/pages/features/ResumeBuilderForge.jsx
**Line:** 3:5
**Comment:**
*Incomplete Implementation: This wrapper is not integrated into routing or any caller, so adding it does not change runtime behavior and users will never hit this Forge page. Connect it to the `/resume-builder` route (or the intended navigation path) to complete the feature.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix
Comment on lines
+3
to
+5
| export default function ResumeRoastForge() { | ||
| return <ForgeFeaturePage slug="resume-roast" />; | ||
| } |
There was a problem hiding this comment.
Suggestion: This component is added but not used by any route/import, so the Forge redesign for this feature cannot be accessed in production. Register this component in the router (or replace the existing landing component) to make the change effective. [incomplete implementation]
Severity Level: Major ⚠️
- ⚠️ Resume Roast Forge landing never served at /resume-roast.
- ⚠️ New component remains untested and unmounted in production.Steps of Reproduction ✅
1. Open `frontend/src/pages/features/ResumeRoastForge.jsx` and observe the component
defined at lines 3-5: `ResumeRoastForge` returns `ForgeFeaturePage` with
`slug="resume-roast"`.
2. Run a search for `ResumeRoastForge` across the repo; the only occurrence is this
definition in `frontend/src/pages/features/ResumeRoastForge.jsx:3-5`, so no route or
parent component imports it.
3. Inspect the router in `frontend/src/App.jsx` around lines 80-82: the route `<Route
path="/resume-roast" element={...}>` renders `ResumeRoastLanding`, wired via `const
ResumeRoastLanding = lazy(() => import('./pages/features/ResumeRoastLanding'));` (lines
105-113), rather than `ResumeRoastForge`.
4. Launch the app and navigate to `/resume-roast` (for example via `RoastHub`, which links
to `/resume-roast` in `frontend/src/pages/hubs/RoastHub.jsx:30,53`); the runtime uses
`ResumeRoastLanding` from `App.jsx`, and `ResumeRoastForge` is never rendered,
demonstrating the new Forge redesign page is currently unused.
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** frontend/src/pages/features/ResumeRoastForge.jsx
**Line:** 3:5
**Comment:**
*Incomplete Implementation: This component is added but not used by any route/import, so the Forge redesign for this feature cannot be accessed in production. Register this component in the router (or replace the existing landing component) to make the change effective.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix
|
CodeAnt AI finished reviewing your PR. |
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
2 participants
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.
User description
What
Redesigns the homepage 'Powerful AI tools for every step' block with the Forge design system (forge-ai.space-inspired: dark, technical, operational-status chip, monospace-accented tool cards).
ForgeToolsSection(data-driven over the existingFEATURESarray).Home.jsxto use it.Depends on
forge/design-system.Verification
✅ No merge — raised for review only.
CodeAnt-AI Description
Redesign the landing tools section and add Forge-styled feature pages
What Changed
Impact
✅ More polished homepage section✅ Clearer tool discovery✅ Consistent feature page experience💡 Usage Guide
Checking Your Pull Request
Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.
Talking to CodeAnt AI
Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:
This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.
Example
Preserve Org Learnings with CodeAnt
You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:
This helps CodeAnt AI learn and adapt to your team's coding style and standards.
Example
Retrigger review
Ask CodeAnt AI to review the PR again, by typing:
Check Your Repository Health
To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.