Feature: New landing/welcome page

[jwaspin]

Create Professional Welcome/Landing Page for Unauthenticated Users

Overview

Luca Ledger needs a modern, professional welcome page that serves as the public entry point for all users. Currently, the "Landing" page (src/views/Landing/Landing.jsx) exists only inside the authenticated app—there is no public-facing marketing or welcome page. The only pre-login experience is the functional AuthScreen with LoginForm/RegistrationForm.

This issue requests a complete redesign of the entry experience to match modern banking application standards, with integrated login functionality, clear registration pathways, and feature showcases.

Requirements

1. New Public Welcome Page (/)

Create a new Welcome page that unauthenticated users see when visiting the application:

• Hero Section: Professional header with the Luca Ledger branding, tagline, and gradient styling consistent with the existing app patterns (see src/views/Landing/Landing.jsx for gradient examples)
• Inline Login Form: Include username/password inputs directly on the welcome page so users can log in immediately without navigating away
• Register CTA: Prominent "Create Account" or "Get Started" button that navigates to the registration page
• Feature Sections: Create visually appealing sections showcasing key features. Reference the existing content in src/views/Landing/Landing.jsx which has well-written descriptions for:
  • Current features (categories, bulk edit, encryption, unified file format)
  • Coming soon features (split categories, recurring transactions, analytics)
  • Data privacy/security highlights (local storage, offline capability, AES-256 encryption)
• Additional Sections: Get creative based on what makes sense for a finance app—consider adding sections like "How It Works", "Why Luca Ledger", security badges/trust indicators, or a FAQ
• Footer: Navigation links to Login, Register, and any relevant info pages

2. Dedicated Login Page (/login)

Create a standalone login page accessible from the Welcome page and Registration page:

• Use the existing LoginForm component logic (src/components/Auth/LoginForm/LoginForm.jsx)
• Enhanced layout with branding, consistent with the Welcome page design
• Link to Registration page for users who need to create an account
• Link back to Welcome page

3. Enhanced Registration Page (/register)

Create an expanded registration page that goes beyond the current basic form:

• Build upon existing RegistrationForm (src/components/Auth/RegistrationForm/RegistrationForm.jsx) which currently collects username and password
• Add additional fields such as:
  • Display name (for personalization)
  • Optional email (for future features, with clear disclosure that this is optional)
  • Any other fields that make sense for a professional onboarding experience
• Important: Include a clear warning that password recovery is not possible (this is by design due to client-side encryption—see ENCRYPTION.md)
• Link to Login page for existing users
• Link back to Welcome page

4. Routing Updates

Update src/App.jsx to:

• Make / the new public Welcome page (unauthenticated)
• Add /login route for dedicated login page
• Add /register route for registration page
• Redirect authenticated users from / to /dashboard
• Move the current Landing page content to be accessible as the authenticated home or integrate its content into Dashboard

5. Design Guidelines

• Use Material-UI components consistent with the rest of the app
• Follow existing styling patterns (see gradient headers, color-coded cards with hover effects, Paper components)
• Ensure responsive design for mobile users
• Consider collapsing the inline login form to a "Sign In" button on mobile that navigates to /login
• Reference src/components/Auth/ for existing auth UI patterns
• Reference src/views/Landing/Landing.jsx for content and styling to reuse

Technical Context

• Auth system: Multi-user support with password-based encryption, see src/auth/AuthContext.jsx
• Current auth states: loading, no-users, login, authenticated, legacy-migration
• Security: AES-GCM 256-bit encryption, PBKDF2 key derivation—highlight this on the welcome page
• No password recovery: By design, emphasize this during registration

Acceptance Criteria

• Unauthenticated users see the new Welcome page at /
• Welcome page has inline login functionality
• Welcome page has clear path to registration
• Dedicated /login page exists and functions correctly
• Dedicated /register page exists with expanded fields
• Registration includes password recovery warning
• Authenticated users are redirected from / to /dashboard
• All pages are responsive and follow existing Material-UI patterns
• Feature content from existing Landing page is preserved (either on Welcome page or moved appropriately)
• Navigation between Welcome, Login, and Register pages works correctly
• yarn lint passes with no errors

Resources

• Existing Landing page content: src/views/Landing/Landing.jsx
• Auth components: src/components/Auth/
• Auth context: src/auth/AuthContext.jsx
• Encryption documentation: ENCRYPTION.md
• App routing: src/App.jsx
• Main layout: src/components/MainLayout/