[UI/UX] Fix Mobile Responsiveness and Initial Viewport Scaling on Landing Page

[prince-shakyaa]

[UI/UX] Improve Landing Page Responsiveness for Mobile Viewports

Description

The current landing page (finbot/apps/finbot/templates/home.html) has several responsiveness issues when viewed on narrow mobile viewports (e.g., iPhone 12 Pro, 390px width). The primary concerns are an unintended initial zoom, awkward text wrapping in headings, cramped navbar elements, and inconsistent vertical spacing.

Visual Evidence

Screen.Recording.2026-05-06.at.16.13.35.mov

Steps to Reproduce

1. Open the application locally or visit the landing page.
2. Open Browser Developer Tools (F12).
3. Toggle the device toolbar and select iPhone 12 Pro (390 x 844).
4. Observe the initial "zoomed-in" state and the text wrapping in the Hero and "What is OWASP FinBot?" sections.

Actual Behavior

• Initial Zoom Bug: When switching to mobile view, the page starts "zoomed in." This is likely caused by wide absolute-positioned elements (like the 800px hero glow) extending beyond the viewport width, forcing the browser to scale the page incorrectly.
• Hero Heading: "Secure the Future." wraps into two lines, making the hero section excessively tall.
• Section Heading: In the "What is OWASP FinBot?" section, "An Agentic AI vendor management platform." wraps into three lines, and "Intentionally vulnerable." splits across two lines.
• Navbar: The "Challenges" link and the GitHub icon are too close together, posing a "fat-finger" risk for mobile users.
• Spacing: The vertical gap between the hero buttons and the subsequent section feels cramped despite the defined padding.

Expected Behavior

• The page should load at initial-scale=1.0 without any unintended zooming.
• Headings should scale down gracefully on mobile to maintain readability and prevent excessive wrapping.
• Navigation items should have sufficient horizontal padding for better accessibility.
• Vertical spacing between sections should be consistent and provide enough breathing room for stacked elements.

Proposed Fixes

• Contain Wide Elements: Add overflow-hidden to sections containing wide decorative glows (like the hero and about sections) to prevent them from affecting the viewport width.
• Adjust Tailwind font size classes: Scale down headings on xs and sm breakpoints (e.g., reduce text-5xl to text-4xl for the hero).
• Optimize Line Breaks: Add whitespace-nowrap to specific spans or adjust container constraints to optimize line breaks.
• Increase spacing between navbar items on mobile.
• Use box-decoration-break: clone for gradient text to ensure gradients render correctly across wrapped lines.

Contribution Rules Check

• Follows Black/isort style (will be applied in PR)
• Includes issue description for tracking