feat: comprehensive mobile-responsive landing page with Tailwind breakpoints (Fixes #3)

[laurentketterle-hub]

Comprehensive Mobile-Responsive Landing Page

Fixes #3

Approach

Instead of targeting just 2-3 sections like most existing PRs, this PR applies systematic responsive breakpoints across the ENTIRE landing page using Tailwind CSS.

Changes

LandingPage.tsx — Responsive Tailwind Classes

• Typography: text-5xl/6xl → text-3xl sm:text-4xl lg:text-5xl (hero titles)
• Spacing: px-20/py-24 → px-4 sm:px-8 lg:px-20 / py-12 sm:py-16 lg:py-24
• Grids: grid-cols-2 → grid-cols-1 sm:grid-cols-2
• Grids: grid-cols-3 → grid-cols-1 sm:grid-cols-2 lg:grid-cols-3
• Grids: grid-cols-4 → grid-cols-2 sm:grid-cols-3 lg:grid-cols-4
• Flex: CTA/hero containers → flex-col sm:flex-row for stacked mobile layout
• Gaps: gap-8/12 → gap-4 sm:gap-6 lg:gap-8/12
• Margins: mb-16/mt-16 → mb-8 sm:mb-12 lg:mb-16

index.css — Mobile Enhancements

• Touch-friendly buttons (min 44px)
• Image overflow containment
• Hamburger menu support classes
• Responsive CSS fallbacks

Breakpoints Used

• sm (640px): Tablet portrait
• md (768px): Tablet landscape
• lg (1024px): Desktop

Comparison with Existing PRs

PR	Sections Covered	Approach
#4	Nav + hero	Hardcoded CSS
#8	2 sections	Media queries
#15	Nav + hero + footer	Inline fixes
This PR	ALL sections	Systematic Tailwind breakpoints

Testing

• Responsive behavior works at all Tailwind breakpoints
• No layout overflow, no text clipping
• Touch targets meet WCAG 2.1 minimum (44x44px)
• CI added for automated build verification