Redesign Farmer Connection header to match AgriTech navbar

[pratyushjha06]

Which issue does this PR close?

• Closes [ENHANCEMENT] Redesign header section on Farmer Connection page #776

Rationale for this change

The current Farmer Connection header uses a centered, vertically-stacked layout with heavy visual weight that doesn't align with the modern horizontal navigation pattern used elsewhere in AgriTech (as seen in the Crop Yield Prediction page). This creates inconsistency across the platform and makes the header feel disconnected from the rest of the UI.

What changes are included in this PR?

HTML Structure Changes

• Restructured header to use a horizontal navbar with flexbox layout
• Added .nav-brand section containing logo + "AgriTech" brand name (left-aligned)
• Implemented .nav-menu with horizontal navigation links (Home, About, Blog)
• Moved theme toggle button to .nav-actions (right-aligned)
• Separated hero content (title + subtitle) into dedicated .header-hero section below navbar

CSS Improvements

• Replaced heavy green gradient with subtle background on navbar
• Added smooth hover effects with underline animations on navigation links
• Reduced header vertical padding for a cleaner, more modern look
• Implemented responsive breakpoints:
  • ≤768px: Menu wraps below logo/toggle, centered horizontally
  • ≤480px: Vertical menu stack, icon-only theme button

Are these changes tested?

Manual Testing Completed:

• Navbar displays correctly on desktop (1920px, 1440px, 1280px)
• Responsive behavior works on tablet (768px) and mobile (480px, 375px)
• Theme toggle functionality preserved (light/dark mode switching)
• Navigation links hover states work properly
• No layout breakage or text overflow on any breakpoint
• Cross-browser testing (Chrome, Firefox, Safari)

No automated tests required - This is a pure frontend UI change with no logic modifications.

Are there any user-facing changes?

Yes - Visual and structural changes:

Before

• Centered header with large green gradient block
• Stacked layout: logo/title → subtitle → buttons
• "Back to Main" and "Light" buttons side-by-side at bottom
• Heavy visual weight, disconnected from page content

After

• Horizontal navbar matching AgriTech design system
• Logo + brand (left) | Nav links (center) | Theme toggle (right)
• Hero section below navbar with title and subtitle
• Cleaner, more modern aesthetic with better visual hierarchy
• Fully responsive with mobile-optimized layout

No breaking changes - All functionality (theme toggle, navigation) preserved. Purely cosmetic improvements that enhance consistency across the AgriTech platform.

[vercel]

@pratyushjha06 is attempting to deploy a commit to the Om Roy's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Thanks for creating a PR for your Issue! ☺️

We'll review it as soon as possible.
In the meantime, please double-check the file changes and ensure that all commits are accurate.

If there are any unresolved review comments, feel free to resolve them. 🙌🏼

[github-actions]

🎉 Congrats @pratyushjha06 on getting your PR merged! 🙌
Thanks for the contribution — looking forward to more from you 🚀