feat(landing): redesign 'Powerful AI tools' section with Forge system #4405
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import React from 'react'; | ||
|
|
||
| /** | ||
| * Hover-glow bento card. Tracks cursor for the radial glow (forge signature). | ||
| */ | ||
| export default function BentoCard({ icon: Icon, title, description, className = '' }) { | ||
| const onMove = (e) => { | ||
| const r = e.currentTarget.getBoundingClientRect(); | ||
| e.currentTarget.style.setProperty('--mx', `${e.clientX - r.left}px`); | ||
| e.currentTarget.style.setProperty('--my', `${e.clientY - r.top}px`); | ||
| }; | ||
| return ( | ||
| <div className={`forge-card ${className}`} onMouseMove={onMove}> | ||
| {Icon && ( | ||
| <div className="ico"> | ||
| <Icon size={22} strokeWidth={1.8} /> | ||
| </div> | ||
| )} | ||
| <h3>{title}</h3> | ||
| <p>{description}</p> | ||
| </div> | ||
| ); | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import React from 'react'; | ||
| import { Link } from 'react-router-dom'; | ||
|
|
||
| /** Forge button — renders as router Link or anchor. */ | ||
| export default function ForgeButton({ to, href, children, variant = 'primary', ...rest }) { | ||
| const cls = `forge-btn ${variant === 'primary' ? 'forge-btn-primary' : 'forge-btn-ghost'}`; | ||
| if (to) return <Link to={to} className={cls} {...rest}>{children}</Link>; | ||
| return <a href={href || '#'} className={cls} {...rest}>{children}</a>; | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,166 @@ | ||
| import React from 'react'; | ||
| import { Link } from 'react-router-dom'; | ||
| import { useAuth } from '../../hooks/useAuth'; | ||
| import { FEATURES_BY_SLUG } from '../../data/featuresConfig'; | ||
| import Seo from '../../components/Seo'; | ||
| import '../styles/forge.css'; | ||
| import StatusBadge from './forge/StatusBadge'; | ||
| import MetricChip from './forge/MetricChip'; | ||
| import ForgeButton from './forge/ForgeButton'; | ||
| import BentoCard from './forge/BentoCard'; | ||
|
Comment on lines
+7
to
+10
There was a problem hiding this comment. Suggestion: The component imports point to a non-existent nested 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 |
||
|
|
||
| const ICONS = { | ||
| FileText: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6', | ||
| Type: 'M4 7V4h16v3 M9 20h6 M12 4v16', | ||
| Github: 'M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22', | ||
| Sparkles: 'M12 3v3 M12 18v3 M3 12h3 M18 12h3 M5.6 5.6l2.1 2.1 M16.3 16.3l2.1 2.1 M18.4 5.6l-2.1 2.1 M7.7 16.3l-2.1 2.1', | ||
| BarChart: 'M3 3v18h18 M8 17V9 M13 17V5 M18 17v-6', | ||
| Layout: 'M3 3h18v18H3z M3 9h18 M9 21V9', | ||
| Linkedin: 'M4 4a2 2 0 1 0 0 4 2 2 0 0 0 0-4z M4 9h4v11H4z M10 9h4v3a4 4 0 0 1 8 0v8h-4v-7a2 2 0 0 0-4 0v7h-4z', | ||
| Download: 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4 M7 10l5 5 5-5 M12 15V3', | ||
| Mic: 'M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z M19 10v2a7 7 0 0 1-14 0v-2 M12 19v4 M8 23h8', | ||
| Briefcase: 'M2 7h20v13H2z M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16', | ||
| Flame: 'M12 2s4 4 4 8a4 4 0 0 1-8 0c0-1 .5-2 1-3-2 1-4 3-4 6a7 7 0 0 0 14 0c0-5-7-11-7-11z', | ||
| Network: 'M12 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6z M5 16a3 3 0 1 0 0 6 3 3 0 0 0 0-6z M19 16a3 3 0 1 0 0 6 3 3 0 0 0 0-6z M7 18l3-7 M17 18l-3-7 M8 19h8', | ||
| Users: 'M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2 M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z M23 21v-2a4 4 0 0 0-3-3.87 M16 3.13a4 4 0 0 1 0 7.75', | ||
| Palette: 'M12 2a9 9 0 0 0 0 18c1.1 0 2-.9 2-2 0-.5-.2-1-.5-1.3-.3-.4-.5-.8-.5-1.2 0-1 .8-1.8 1.8-1.8H17a4 4 0 0 0 4-4c0-4.4-4-8-9-8z M7.5 11.5A1 1 0 1 0 7 13a1 1 0 0 0 .5-1.5z M12 7.5A1 1 0 1 0 12.5 9 1 1 0 0 0 12 7.5z', | ||
| Zap: 'M13 2L3 14h9l-1 8 10-12h-9z', | ||
| Smartphone: 'M7 2h10a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z M12 18h.01', | ||
| Globe: 'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z M2 12h20 M12 2a15 15 0 0 1 0 20 M12 2a15 15 0 0 0 0 20', | ||
| }; | ||
|
|
||
| function Icon({ name, size = 22, strokeWidth = 1.8 }) { | ||
| const d = ICONS[name]; | ||
| if (!d) return null; | ||
|
Comment on lines
+33
to
+34
There was a problem hiding this comment. Suggestion: Returning Severity Level: Major
|
||
| return ( | ||
| <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"> | ||
| {d.split(' M').map((seg, i) => ( | ||
| <path key={i} d={(i === 0 ? seg : 'M' + seg)} /> | ||
| ))} | ||
| </svg> | ||
| ); | ||
| } | ||
|
|
||
| /** | ||
| * ForgeFeaturePage — data-driven landing for a single feature route. | ||
| * Reads the existing FEATURES_BY_SLUG[slug] config and renders a cohesive, | ||
| * forge-ai-inspired page (status chips, monospace metrics, bento showcase, steps). | ||
| * Each route landing imports this with its slug. | ||
| */ | ||
| export default function ForgeFeaturePage({ slug }) { | ||
| const { user } = useAuth(); | ||
| const config = FEATURES_BY_SLUG[slug]; | ||
| if (!config) return <div className="forge-page">Unknown feature: {slug}</div>; | ||
|
|
||
| const heroCtaText = user ? config.primaryAction.label : config.hero.primaryCta.text; | ||
| const heroCtaLink = user ? config.primaryAction.to : config.hero.primaryCta.to; | ||
| const ctaText = user ? config.primaryAction.label : config.cta.ctaText; | ||
| const ctaLink = user ? config.primaryAction.to : config.cta.ctaTo; | ||
|
|
||
| return ( | ||
| <div className="forge-page"> | ||
| <Seo {...config.seo} /> | ||
|
|
||
| <nav className="forge-nav"> | ||
| <Link to="/" className="forge-brand">CareerPilot<span className="dot">.</span></Link> | ||
| <div className="forge-nav-links"> | ||
| <Link to="/resume-builder" className="forge-nav-link">Resume Builder</Link> | ||
| <Link to="/portfolio-builder" className="forge-nav-link">Portfolio</Link> | ||
| <Link to="/job-finder" className="forge-nav-link">Job Finder</Link> | ||
| <Link to="/mock-interview" className="forge-nav-link">Mock Interview</Link> | ||
| </div> | ||
| <div className="forge-nav-actions"> | ||
| {!user && <ForgeButton href="/login" variant="ghost">Sign in</ForgeButton>} | ||
| <ForgeButton to={heroCtaLink} variant="primary">{user ? 'Dashboard' : 'Get started for free'}</ForgeButton> | ||
| </div> | ||
| </nav> | ||
|
|
||
| {/* HERO */} | ||
| <section className="forge-section forge-container forge-hero"> | ||
| <StatusBadge label="OPERATIONAL" /> | ||
| <h1> | ||
| {config.hero.title} <span className="accent">{config.hero.accentText}</span> | ||
| </h1> | ||
| <p>{config.hero.description}</p> | ||
| <div className="forge-hero-actions"> | ||
| <ForgeButton to={heroCtaLink} variant="primary">{heroCtaText}</ForgeButton> | ||
| {config.hero.secondaryCta && ( | ||
| <ForgeButton href={config.hero.secondaryCta.href} variant="ghost">{config.hero.secondaryCta.text}</ForgeButton> | ||
| )} | ||
| </div> | ||
| <div className="forge-metrics"> | ||
| {config.hero.stats.map((s, i) => ( | ||
| <MetricChip key={i} value={s.value} label={s.label} accent={i === 0} /> | ||
| ))} | ||
| </div> | ||
| </section> | ||
|
|
||
| {/* SHOWCASE */} | ||
| {config.showcase && ( | ||
| <section className="forge-section forge-container" id="demo"> | ||
| <div style={{ textAlign: 'center' }}> | ||
| <span className="forge-label">Capabilities</span> | ||
| <h2 className="forge-h2">{config.showcase.heading}</h2> | ||
| </div> | ||
| <div className="forge-bento"> | ||
| {config.showcase.features.map((f, i) => ( | ||
| <BentoCard key={i} icon={(p) => <Icon name={f.icon} {...p} />} title={f.title} description={f.description} /> | ||
| ))} | ||
| </div> | ||
| </section> | ||
| )} | ||
|
|
||
| {/* HOW IT WORKS */} | ||
| {config.howItWorks && ( | ||
| <section className="forge-section forge-container"> | ||
| <div style={{ textAlign: 'center' }}> | ||
| <span className="forge-label">Workflow</span> | ||
| <h2 className="forge-h2">{config.howItWorks.title}</h2> | ||
| </div> | ||
| <div className="forge-steps"> | ||
| {config.howItWorks.steps.map((s, i) => ( | ||
| <div key={i} className="forge-step"> | ||
| <span className="n">STEP {s.number}</span> | ||
| <h4>{s.title}</h4> | ||
| <p>{s.description}</p> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </section> | ||
| )} | ||
|
|
||
| {/* TESTIMONIALS */} | ||
| {config.testimonials && config.testimonials.items?.length > 0 && ( | ||
| <section className="forge-section forge-container"> | ||
| <div style={{ textAlign: 'center' }}> | ||
| <span className="forge-label">Signal</span> | ||
| <h2 className="forge-h2">{config.testimonials.heading}</h2> | ||
| </div> | ||
| {config.testimonials.items.map((t, i) => ( | ||
| <div key={i} className="forge-quote"> | ||
| <p className="q">“{t.quote}”</p> | ||
| <div className="who"> | ||
| {t.avatar && <img src={t.avatar} alt="" width="36" height="36" style={{ borderRadius: '50%' }} />} | ||
| <span><strong style={{ color: 'var(--forge-text)' }}>{t.name}</strong> · {t.role}{t.company ? ` @ ${t.company}` : ''}</span> | ||
| <span className="metric" style={{ marginLeft: 'auto' }}>{t.metric}</span> | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </section> | ||
| )} | ||
|
|
||
| {/* CTA */} | ||
| <section className="forge-container"> | ||
| <div className="forge-cta"> | ||
| <h2>{config.cta.headline}</h2> | ||
| <p>{config.cta.subtext}</p> | ||
| <ForgeButton to={ctaLink} variant="primary">{ctaText}</ForgeButton> | ||
| </div> | ||
| </section> | ||
|
|
||
| <footer className="forge-foot"> | ||
| CareerPilot · {config.name} · built with the Forge design system | ||
| </footer> | ||
| </div> | ||
| ); | ||
| } | ||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import React from 'react'; | ||
|
|
||
| /** Monospace metric chip used in hero stat rows. */ | ||
| export default function MetricChip({ value, label, accent = false }) { | ||
| return ( | ||
| <div className="forge-metric"> | ||
| <div className={`v ${accent ? 'accent' : ''}`}>{value}</div> | ||
| <div className="l">{label}</div> | ||
| </div> | ||
| ); | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import React from 'react'; | ||
|
|
||
| /** | ||
| * Forge signature status chip — operational/SLA style pill. | ||
| * variant: 'ok' | 'warn' | 'danger' | ||
| */ | ||
| export default function StatusBadge({ label = 'OPERATIONAL', variant = 'ok', className = '' }) { | ||
| const v = variant === 'danger' ? 'danger' : variant === 'warn' ? 'warn' : 'ok'; | ||
| return ( | ||
| <span className={`forge-status ${v} ${className}`}> | ||
| <span className="pulse" /> | ||
| {label} | ||
| </span> | ||
| ); | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| 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 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 |
||
| import StatusBadge from '../forge/StatusBadge'; | ||
| import ForgeButton from '../forge/ForgeButton'; | ||
|
|
||
| const ICON_PATHS = { | ||
| FileText: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6', | ||
| Palette: 'M12 2a9 9 0 0 0 0 18c1.1 0 2-.9 2-2 0-.5-.2-1-.5-1.3-.3-.4-.5-.8-.5-1.2 0-1 .8-1.8 1.8-1.8H17a4 4 0 0 0 4-4c0-4.4-4-8-9-8z M7.5 11.5A1 1 0 1 0 7 13a1 1 0 0 0 .5-1.5z M12 7.5A1 1 0 1 0 12.5 9 1 1 0 0 0 12 7.5z', | ||
| Flame: 'M12 2s4 4 4 8a4 4 0 0 1-8 0c0-1 .5-2 1-3-2 1-4 3-4 6a7 7 0 0 0 14 0c0-5-7-11-7-11z', | ||
| Github: 'M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22', | ||
| Network: 'M12 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6z M5 16a3 3 0 1 0 0 6 3 3 0 0 0 0-6z M19 16a3 3 0 1 0 0 6 3 3 0 0 0 0-6z M7 18l3-7 M17 18l-3-7 M8 19h8', | ||
| Mic: 'M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z M19 10v2a7 7 0 0 1-14 0v-2 M12 19v4 M8 23h8', | ||
| Users: 'M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2 M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z M23 21v-2a4 4 0 0 0-3-3.87 M16 3.13a4 4 0 0 1 0 7.75', | ||
| Briefcase: 'M2 7h20v13H2z M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16', | ||
| }; | ||
|
|
||
| const header = { hidden: {}, show: { transition: { staggerChildren: 0.12 } } }; | ||
| const item = { | ||
| hidden: { opacity: 0, y: 24 }, | ||
| show: { opacity: 1, y: 0, transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] } }, | ||
| }; | ||
|
|
||
| export default function ForgeToolsSection() { | ||
| return ( | ||
| <section className="forge-page" style={{ padding: '84px 0' }}> | ||
| <div className="forge-container"> | ||
| <motion.div | ||
| variants={header} | ||
| initial="hidden" | ||
| whileInView="show" | ||
| viewport={{ once: true, margin: '-100px' }} | ||
| style={{ textAlign: 'center' }} | ||
| > | ||
| <motion.div variants={item} style={{ display: 'flex', justifyContent: 'center', marginBottom: 18 }}> | ||
| <StatusBadge label="ALL SYSTEMS OPERATIONAL" /> | ||
| </motion.div> | ||
| <motion.h2 variants={item} className="forge-h2"> | ||
| Powerful AI tools for <span style={{ color: 'var(--forge-accent)' }}>every step</span> | ||
| </motion.h2> | ||
| <motion.p variants={item} className="forge-sub"> | ||
| From your first resume draft to your final interview, CareerPilot gives you the unfair advantage you need. | ||
| </motion.p> | ||
| </motion.div> | ||
|
|
||
| <div className="forge-tools-grid" style={{ marginTop: 44 }}> | ||
| {FEATURES.map((f, i) => { | ||
| const Icon = (p) => ( | ||
| <svg width={24} height={24} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" {...p}> | ||
| {(ICON_PATHS[f.icon?.name] || ICON_PATHS.FileText).split(' M').map((seg, k) => ( | ||
| <path key={k} d={k === 0 ? seg : 'M' + seg} /> | ||
| ))} | ||
| </svg> | ||
| ); | ||
| const large = f.size === 'large'; | ||
| return ( | ||
| <motion.div | ||
| key={f.slug} | ||
| variants={item} | ||
| className={`forge-tool ${large ? 'lg' : ''}`} | ||
| style={large ? { display: 'flex', flexDirection: 'column', justifyContent: 'space-between' } : {}} | ||
| > | ||
| <div className="ico"><Icon /></div> | ||
| <div> | ||
| <span className="badge-tag">{f.badge || 'Tool'}</span> | ||
| <h3>{f.name}</h3> | ||
| <p>{f.tagline}</p> | ||
| </div> | ||
| <div style={{ marginTop: 18 }}> | ||
| <ForgeButton to={f.primaryAction.to} variant="ghost">{f.primaryAction.label} →</ForgeButton> | ||
| </div> | ||
| </motion.div> | ||
| ); | ||
| })} | ||
| </div> | ||
| </div> | ||
| </section> | ||
| ); | ||
| } | ||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,7 @@ | ||
| Warning: Identity file /home/azureuser/.ssh/id_rsa not accessible: No such file or directory. | ||
| import Navbar from '../components/Navbar' | ||
| import HeroSection from '../components/ui/HeroSection' | ||
| import OurToolsSection from '../components/landing/ForgeToolsSection' | ||
|
There was a problem hiding this comment. Suggestion: The new homepage import wires in 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 FeaturesSection, { AdditionalFeatures } from '../components/ui/FeaturesSection' | ||
| import PortfolioShowcaseSection from '../components/ui/PortfolioShowcaseSection' | ||
| import ProjectVisualizerSection from '../components/ui/ProjectVisualizerSection' | ||
|
|
@@ -26,7 +27,7 @@ export default function Home() { | |
| {/* Hero Section with World Map */} | ||
| <HeroSection /> | ||
|
|
||
| {/* Our Tools Section - Forge redesign */} | ||
| <OurToolsSection /> | ||
|
|
||
| {/* Main Features Section - Bento Grid */} | ||
|
|
||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| import React from 'react'; | ||
| import ForgeFeaturePage from '../../components/forge/ForgeFeaturePage'; | ||
| export default function GithubPortfolioForge() { | ||
| return <ForgeFeaturePage slug="github-portfolio" />; | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| import React from 'react'; | ||
| import ForgeFeaturePage from '../../components/forge/ForgeFeaturePage'; | ||
| export default function MockInterviewForge() { | ||
| return <ForgeFeaturePage slug="mock-interview" />; | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| import React from 'react'; | ||
| import ForgeFeaturePage from '../../components/forge/ForgeFeaturePage'; | ||
| export default function ProjectVisualizerForge() { | ||
| return <ForgeFeaturePage slug="project-visualizer" />; | ||
| } | ||
|
Comment on lines
+3
to
+5
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
|
||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| import React from 'react'; | ||
| import ForgeFeaturePage from '../../components/forge/ForgeFeaturePage'; | ||
| export default function ResumeBuilderForge() { | ||
| return <ForgeFeaturePage slug="resume-builder" />; | ||
| } | ||
|
Comment on lines
+3
to
+5
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 Severity Level: Major
|
||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| import React from 'react'; | ||
| import ForgeFeaturePage from '../../components/forge/ForgeFeaturePage'; | ||
| export default function ResumeRoastForge() { | ||
| return <ForgeFeaturePage slug="resume-roast" />; | ||
| } | ||
|
Comment on lines
+3
to
+5
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
|
||
Oops, something went wrong.
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Suggestion: This stylesheet path resolves to
components/styles/forge.css, but the CSS file lives undersrc/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 🚨
Steps of Reproduction ✅
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖