### Problem The two pages are inside `src/components/`, next to the components they use: - `src/components/elements/ElementDetailPage.tsx` - `src/components/gymnasts/YourGymnastsPage.tsx` So it is hard to see which files are pages (one per route in `App.tsx`) and which are reusable components, and the folder will get harder to read as more pages are added. ### What to do - Make `src/pages/` with one file per route: - `src/pages/ElementDetailPage.tsx` - `src/pages/YourGymnastsPage.tsx` - Keep the components the pages use in `src/components/elements/` and `src/components/gymnasts/`. - Update the imports in `App.tsx` and in the moved files (use the `@/` alias). - Move the files with `git mv`, so their history follows them. - Describe the folders in "Project structure" in the README: `pages/` for routes, `components/` for parts of pages, `components/ui/` for the shadcn/ui components. ### Also consider `components/ui/` is the folder the shadcn/ui CLI writes to, but it also holds our own components (`ElementVariants`, `DifficultyBadge`, `ElementValueBadge`). They could move to `components/elements/`, so `ui/` only holds the shadcn/ui components. ### Timing Moving files gives merge conflicts in every open branch that changes them. Do it when few frontend PRs are open, and tell the team before merging. ### Done when - [ ] Every page is in `src/pages/`, and `App.tsx` imports the pages from there. - [ ] Lint, type check, tests and build pass. - [ ] The README describes the folders.