Extract App Layout into a reusable component

[Code-Paragon]

Problem

The _app.tsx file directly contains the HTML structure (<div className="min-h-screen...">) and the Navbar component, cluttering the Next.js root wrapper and preventing custom layouts on specific pages.

Expected behavior

The styling wrapper and Navbar are extracted into a dedicated src/components/Layout.tsx component that wraps the {children} props. _app.tsx is updated to utilize this new component.

Files to update

• src/pages/_app.tsx
• src/components/Layout.tsx (create)

Project relevance

Separates concerns, making the root application file cleaner and standardizing the global container properties in a dedicated UI file.

Acceptance criteria

• Feature works as described
• Tests are added or updated where needed
• Documentation is updated where needed
• Layout.tsx renders the <main className="flex-grow p-6 md:p-8 max-w-7xl mx-auto w-full"> wrapper
• No TypeScript, lint, test, or build errors