feat(ui): revamp landing page design and mobile responsiveness

[DistantMyth]

Summary

• Extracted global navigation into a responsive Navbar component with a hamburger menu for mobile.
• Refreshed the landing page Hero section with a punchier H1 copy and a high-contrast "Get Started" CTA.
• Replaced the static hero placeholder with a dynamic, animated SVG layout using Lucide icons.
• Standardized layout spacing across the landing page using an 8pt grid system to fix cramped sections.
• Improved overall mobile responsiveness by ensuring vertical stacking and adequate touch targets (>= 44x44px).

Related Issue

Link issue(s):

• Closes Enhance Landing Page UI/UX and visual hierarchy #4

Type of Change

• feat (new feature)
• fix (bug fix)
• docs (documentation update)
• refactor (code restructure, no behavior change)
• test (tests added/updated)
• chore (maintenance)

Scope

• backend
• frontend
• ml-service
• documentation

Verification

List exactly what you ran and what happened.

cd frontend
npm run build

Results:

• Verified successful production build sequence with no type errors.
• Confirmed mobile viewport (<768px) correctly collapses links into the new hamburger menu, and all touch targets meet minimum 44px spacing.
• Validated that the newly implemented 8pt grid and multi-column stacking behave as expected across tablet and mobile widths.

Screenshots / API Samples (if applicable)

recording_2026-04-11_02.25.48.mp4

Checklist

• My branch is up to date with main.
• I tested my changes locally.
• I did not commit secrets or .env files.
• I updated docs where needed.
• I linked the issue (or explained why not).

[M-ayank2005]

@DistantMyth attack screen shot of complete page in both light and dark mode .Also explain what changes you have done and why ?

[DistantMyth]

@M-ayank2005 I have attached the requested screenshots

Here are the changes I made, please let me know if more changes are to be made:

• Hero Copy & CTA Enhancements (frontend/app/landing/page.jsx)
  Refined the main H1 copy to "The OS for Local Living" and updated the primary CTA button to say "Get Started" with a new glowing hover animation, ensuring a minimum touch target of 44x44px.
  The previous copy wasn't as punchy or benefit-driven. Strengthening the tagline and making the CTA highly visible with improved contrast and sizing directly improves our user conversion rates and meets mobile accessibility standards (just like requested in the issue).

• Zero-CLS Animated Hero Visuals (frontend/app/landing/page.jsx)
  Removed the static placeholder tag and next/image import. I replaced it with a custom, inline animated SVG illustration depicting a connected ecosystem, this was requested to be changed in the issue.
  Loading a static image above the fold was risking Cumulative Layout Shift (CLS). By substituting it with an intricate geometric inline SVG, we get an infinitely scalable graphic with zero layout shifts, substantially boosting our Core Web Vitals on the landing page.

• Responsive Mobile Navigation (frontend/components/MobileNav.jsx & layout.jsx)
  Created a new lightweight, client-side component featuring a Hamburger menu and integrated it into our main

• RootLayout :
  Header alongside the ThemeToggle.
  The desktop navigation links (hidden md:flex) previously dropped off completely on smaller screens, leaving mobile users with no way to navigate (as described in the issue and also tested). This ensures a fully functional, collapsible menu on all viewports under 768px.

• Layout & Spacing Standardization
  Reviewed the grid gaps and paddings across the landing sections to strictly enforce Tailwind's 8pt (0.25rem / 4px) grid scale.
  To eliminate the "cramped" feeling in dense multi-column layouts and ensure consistent vertical stacking margins on mobile devices."

[M-ayank2005]

@DistantMyth Consider what additional elements can be included to enhance our concise landing page (1-1.5 screen heights) and make it more presentable, given that typical landing pages are more extensive (3-4 screen heights) and comprehensively describe the platform.

[DistantMyth]

On it

[DistantMyth]

@M-ayank2005 could you check this, I also added a few animations while scrolling.

rec.mp4

[M-ayank2005]

@DistantMyth It seems to me that word "OS" does not fit here . what are you thoughts.

[M-ayank2005]

Overall Page is looking good to me .

[DistantMyth]

@DistantMyth It seems to me that word "OS" does not fit here . what are you thoughts.

It was put there in the sense that operating system is manages all your stuff, and our website does that too

[DistantMyth]

@M-ayank2005

[M-ayank2005]

@DistantMyth Why you added this extra file in your commit .Remove this and commit again

[M-ayank2005]

@DistantMyth It seems to me that word "OS" does not fit here . what are you thoughts.

It was put there in the sense that operating system is manages all your stuff, and our website does that too

It would be better if you use some other alternative word here .