Next.js UI Color Layout Fix

I have a working Next.js site that now needs a visual polish so every pixel on the live build matches the reference screenshot I will share with you. The task touches three areas—navigation bar, main content section and footer—and focuses mainly on colour consistency and proper alignment.

Navigation bar
• Adjust the menu items so they line up exactly as they do in the screenshot.
• Apply the same background colour pulled from the screen-shot palette.

Main content area
The hero, body text, buttons and any accent elements should all adopt the colours and spacing you see in the reference. No functional changes are required—only styling.

Footer
Replicate the footer colour combination and typography to keep the entire page visually cohesive.

You will be working in a Next.js codebase that already compiles cleanly; feel free to use Tailwind, styled-components or plain CSS Modules—whatever speeds you up—so long as the end result is identical to the screenshot when I load the home page locally.

Deliverables
• Updated source files for the nav bar, main content and footer.
• A brief note (or commented commit) outlining what you changed.
• Confirmation that the page renders correctly on both desktop and mobile breakpoints.

If anything in the screenshot is unclear, let me know early so we can avoid rework.