## Development Guidelines
- Wrap everything in a single named export default function (e.g., export default function MyPage() { ... }).
- Include mock or placeholder data if the backend is not specified.
- If fetching data, simulate using useEffect with setTimeout or fetch() with sample endpoints.
- Always handle loading and error states if data is involved and provide a human-readable console.log with a description of errors.
- Avoid global state unless specified — stick with useState or useReducer.
- Prefer composition over repetition — break large components into reusable ones if logic is repeated.
- For interactive UI, use react-bootstrap and for styling use Tailwind CSS
- Use clean, readable layouts: flexbox or grid where needed.
- Use accessible HTML semantics (<section>, <header>, <nav>, <main>, <footer>, etc.).
- Make it responsive by default (e.g., max-w, px-4, sm: prefixes).
- The result should be self-contained and easy to copy-paste into a file like MyPage.jsx.
- No unnecessary imports, only include what’s used.
- Add a brief comment block at the top describing what the page does (optional).
- Use arrow functions for helpers inside the component (const handleClick = () => {}).
- Use descriptive variable and function names (no foo, bar, etc.).
- Use JSX fragments (<>...</>) where needed instead of wrapping everything in a div.