Improve global layout and spacing on landing/dashboard pages

[Athina09]

Description:
The current landing/dashboard layout feels dense and inconsistent across sections (Know your landscape, Plan for a sustainable tomorrow, Track and Assess NRM interventions). We should refine global spacing and grid usage to improve readability, visual hierarchy, and alignment.

Goals

• Make each major section feel like a distinct, scannable block.
• Establish a consistent grid and vertical rhythm across the page.
• Improve text readability by constraining overly wide content.

Proposed changes

• Vertical rhythm

  • Add consistent top/bottom padding (e.g. 64–96px) for each major section.
  • Increase spacing between Know your landscape, Plan for a sustainable tomorrow, and Track and Assess… so sections are clearly separated.
  • Ensure spacing between section headers, body copy, and cards is consistent within each section.

• Grid & alignment

  • Implement a 12‑column layout grid for the main content area.
  • Align section headings, body text, cards, and buttons to a common left edge.
  • Keep primary text content within 8–9 columns and reserve 3–4 columns for side panels like Select Location.
  • Review and adjust card widths so they align cleanly to the grid at common breakpoints (desktop/tablet).

• Text width & readability

  • Constrain long-form text blocks to a max-width (e.g. 720–840px) instead of full‑width.
  • Verify that constrained text still looks good on smaller screens (responsive behavior).
  • Audit all major paragraphs for overly long line lengths and adjust where necessary.

Acceptance criteria

• Major page sections are visually separated with consistent vertical spacing.
• Headings, paragraphs, cards, and primary buttons align to a shared grid on desktop.

[Athina09]

already completed the pull request #322 pls,review and let me know