add landing page

[gandandev]

No description provided.

[greptile-apps]

Greptile Overview

Greptile Summary

Added a visually engaging landing page with an interactive staircase animation for unauthenticated users. The new landing page replaces the simple centered layout with a split-screen design featuring an animated staircase that responds to mouse movement.

Key Changes:

• Added InteractiveStaircase component with mouse-tracking animation that scales squares based on cursor proximity
• Added LandingPage component with responsive split-screen layout (mobile: vertical, desktop: horizontal)
• Updated branding text to lowercase ("osschat" instead of title case)
• Added footer with social links (@leodev, @osschat, GitHub)
• Removed ChangelogButton component import and usage (intentional removal not clear from PR description)

Minor Performance Concerns:

• getBoundingClientRect() called inside render loop may cause layout thrashing
• 50ms setTimeout delay for initial layout calculation could cause layout shift

Confidence Score: 4/5

• Safe to merge with minor performance optimizations recommended
• The PR successfully adds a polished landing page with working interactive animations. Code follows TypeScript and React best practices with proper use of hooks (useRef, useCallback, useState, useEffect). The implementation is complete and functional. Score not 5 due to: (1) minor performance concern with getBoundingClientRect() in render loop, (2) removal of ChangelogButton not mentioned in PR description, and (3) arbitrary 50ms timeout that could be optimized.
• No files require special attention - the changes are isolated to the landing page UI

Important Files Changed

File Analysis

Filename	Score	Overview
apps/web/src/routes/index.tsx	4/5	Added landing page with interactive staircase animation, removed ChangelogButton reference

Sequence Diagram

sequenceDiagram
    participant User
    participant HomePage
    participant useAuth
    participant LandingPage
    participant InteractiveStaircase
    participant ChatInterface

    User->>HomePage: Navigate to root path
    HomePage->>useAuth: Check auth status
    
    alt Not authenticated
        useAuth-->>HomePage: User not logged in
        HomePage->>LandingPage: Render landing page
        LandingPage->>InteractiveStaircase: Mount with anchorTop prop
        InteractiveStaircase->>InteractiveStaircase: Calculate initial layout
        InteractiveStaircase->>InteractiveStaircase: Add resize listener
        User->>InteractiveStaircase: Mouse move
        InteractiveStaircase->>InteractiveStaircase: Calculate distance and scale
        InteractiveStaircase-->>User: Animate squares
        User->>LandingPage: Click sign in button
        LandingPage-->>User: Navigate to auth page
    else Authenticated
        useAuth-->>HomePage: User logged in
        HomePage->>ChatInterface: Render chat interface
        ChatInterface-->>User: Show chat UI
    end

Loading

[greptile-apps]

_{2 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

getBoundingClientRect() called inside map() causes layout thrashing on every square render - move outside the loop for better performance

[gandandev]

optimize it

[greptile-apps]

50ms delay for layout calculation seems arbitrary - check if this causes visible layout shifts on mount

[gandandev]

@claude can u optimize the code

"getBoundingClientRect() called inside map() causes layout thrashing on every square render - move outside the loop for better performance"

[leoisadev1]

LGTM! The landing page looks good and the performance optimizations have been applied:

Fixes applied:

1. ✅ getBoundingClientRect() optimization - Container rect is now cached in a ref and only updated on resize, avoiding layout thrashing on every mouse move
2. ✅ setTimeout(50) replaced - Now uses requestAnimationFrame for proper timing of initial layout calculation
3. ✅ Removed unused import - ChangelogButton import cleaned up

The interactive staircase animation should now be much smoother, especially on lower-end devices.