feat: redesign landing feature cards

[floze-the-genius]

Summary

Redesign the landing page feature section with a clearer hierarchy, consistent card sizing, and responsive feature-specific artwork. The section now communicates each benefit without relying on hover-only decoration.

Related issue

Fixes #50

Changes

• Extract the feature section into a data-driven FeatureGrid component
• Add distinct inline SVG scenes for curated access, live presence, privacy, and high-fidelity audio
• Standardize card spacing, borders, typography, and responsive one/two-column layouts
• Add subtle illustration motion with prefers-reduced-motion support
• Replace the unsupported end-to-end encryption claim with copy that matches the app's member-room access model

Testing

• npx eslint app/page.tsx components/FeatureGrid.tsx
• npm run build
• git diff --check
• Browser verification at 1440x900: four equal 568x418 cards, no horizontal overflow
• Browser verification at 390x844: four equal 342x418 cards, no horizontal overflow or console errors
• npm run lint remains blocked by 145 existing repository-wide findings in unrelated API, room, socket, and model files

Checklist

• Title follows the repository PR format
• The issue is linked with Fixes #50
• Testing notes are included

[github-actions]

✅ PR Validation Passed

Your PR title and description meet all requirements:

• Title follows conventional format
• All required sections are present
• Issue is properly linked (Improve frontend hero section UI (features cards, SVGs, and polish) #50)

[floze-the-genius]

@sanks011 This implements your good-first issue #50 and is still current with master. The four responsive feature cards were verified at 1440x900 and 390x844 with equal sizing, no horizontal overflow, no console errors, and reduced-motion support; the production build and focused ESLint pass, and PR validation is green. Could you review it when convenient?