Add a landscape layout for tablets (#223)

[Hollujay]

Summary

Adds a landscape-specific layout for tablets by integrating the existing Sidebar component into the app shell and introducing a dedicated responsive breakpoint for the 721px–1024px viewport range.

Changes

Layout (src/App.jsx)

• Wired the pre-built Sidebar component into the app layout alongside a new .app-content wrapper
• The sidebar now renders on all viewports wider than 720px; the Navbar, main content, and Footer sit inside .app-content for proper flex layout

Responsive styles (src/responsive.css)

• Added tablet landscape breakpoint (@media (min-width: 721px) and (max-width: 1024px))
  • .features grid collapses to 2 columns (down from 3 on desktop)
  • .app-main padding tightens from 2rem 1.5rem to 1.5rem 1.25rem for better space usage

Tests (test/integration/landscape-layout.test.jsx)

• Verifies the CSS breakpoint exists and contains the expected rules
• Verifies the Sidebar renders as part of the App layout
• Verifies sidebar navigation links and toggle are present
• Verifies the .app-content wrapper correctly contains Navbar + Footer

Documentation (README.md)

• Added a "Responsive Layout" section documenting the four viewport ranges (desktop, tablet landscape, tablet portrait/mobile, small mobile)
• Updated the project structure and testing docs

Verification

• npm run build passes cleanly
• All 8 new landscape layout tests pass
• All previously passing tests continue to pass (5 pre-existing failures in unrelated areas are unchanged)

Viewport breakdown

Range	Layout
>1024px	Full sidebar (240px), 3-column features
721–1024px	Full sidebar with toggle, 2-column features, compact padding
≤720px	Collapsed sidebar (60px), single-column, wrapped navbar
≤420px	Stacked hero actions, single-column currency grid

Closes #223.

[arisu6804]

Nice one — well scoped and easy to review. 👏

[arisu6804]

Reads well — nice job! 💪

[arisu6804]

LGTM — thanks! 🚀