Removed the entire grid cards section (the 3+2 grid with illustrations, rates, locations, and "Read more" links) from the /opportunities page. The homepage Opportunities component already shows the roles above, so BecomeAFellow now only renders the "What you gain as a Fellow" pitch points and the mission statement.
The OpportunitiesSection is already imported and rendered. The issue is likely that the ParticlesIllustration component depends on the canvas context from the (with-canvas) layout. Let me check:
The ParticlesIllustration uses WebGL/canvas context. Let me check if the /opportunities page has access to the canvas provider, or if it's only in the (with-canvas) layout:
The ParticlesIllustration depends on the CanvasWrapper from the (with-canvas) layout, which provides the WebGL particle system context. The /opportunities page is outside that layout group, so the particles won't render. I need to move /opportunities into the (with-canvas) route group:
The simplest approach: move the /opportunities route into the (with-canvas) group so it gets the CanvasWrapper. Let me move the files:
Now fix the import paths in the moved files:
The import path ~/app/(with-canvas)/components/opportunities in page.tsx is fine since it's a ~ alias. The [slug]/page.tsx uses ../fellowship-data which is correct since it's now relative within the same directory. Now update the page.tsx import since the component is now in the same route group:
Moved the entire /opportunities route into the (with-canvas) route group so it gets the CanvasWrapper layout that provides the WebGL particle system. The URL stays /opportunities since route groups don't affect the URL. The particle illustrations from the homepage component will now render correctly on the opportunities page.
You can send messages while the preview loads