Refactor/figma design

[ewalid]

Frontend UI/UX Refactoring & Backend Enhancements

🎨 Overview

This PR refactors the frontend UI/UX for improved usability, aesthetics, and professional presentation. It also adds new backend capabilities for cost estimation and progress tracking infrastructure.

🚀 Frontend Changes

Home Page Improvements

• Removed Sticky Card: Cleaned up the layout by removing the side sticky card component
• Centered Translation Form: Translation form is now properly centered for better visual balance
• Updated Feature Icons: Replaced icons in the feature bar to match figma design:
  • Fast Translation: Zap → Sparkles
  • Format Preserved: FileCheck → FileSpreadsheet
• Personalized Feature Descriptions: Updated all 6 feature boxes with unique, uniform-length descriptions for better visual consistency

Progress Indicator Redesign

• Replaced the previous stone tablet design with a classic, elegant progress indicator
• Features smooth gradient progress bar with shimmer animation
• Shows percentage counter with smooth transitions
• Circular stage indicators with icons that pulse when active
• Fully responsive for mobile and desktop

Advanced Options Refactoring

• Enhanced Advanced Options Section:
  • Improved styling with gradient background and better visual hierarchy
  • Smooth expand/collapse animations
• Sheet Selector Improvements:
  • Replaced custom checkboxes with Lucide icons (CheckSquare/Square)
  • Added indeterminate state for "Select All" when some sheets are selected
  • Enhanced hover effects and animations
  • More visible borders with emerald accent color
  • Smooth transitions and visual feedback

About Page Redesign

• Hero Section: Shortened subtitle to fit on one line: "Translating Excel files without breaking them"
• Feature Cards: Made all feature cards (including second row) use consistent container styling with borders and shadows
• Meet the Builder Section:
  • Redesigned ProfileHeader with gradient border card style (inspired by figma designs)
  • Enhanced profile image with gradient border
  • Added company logos to timeline cards instead of generic icons
  • Updated contact buttons with brand colors:
    • LinkedIn: Brand blue (#0077b5)
    • Contact: Slate outlined button
    • GitHub: Dark button with proper brand styling
  • Improved visibility and clickability of all buttons with enhanced hover states

Other Improvements

• Updated favicon to use rosetta-icon.svg
• Improved responsive design across all components

🔧 Backend Enhancements

Cost Estimation API

• Added /estimate endpoint that returns:
  • Cell count
  • Estimated API cost (USD)
  • Estimated processing time
• Uses the same cost calculation as MCP endpoint (COST_PER_1000_CELLS_USD = 0.05)

Progress Tracking Infrastructure

• Added progress_callback parameter to translate_file() function
• Progress callback receives: (translated_count, total_count, stage)
• Tracks multiple stages:
  • "extracting" - When extracting cells
  • "translating" - During batch translation
  • "rich_text" - When translating rich text runs
  • "dropdowns" - When translating dropdowns
  • "writing" - When writing output file
  • "complete" - When translation is complete
• Note: Infrastructure is ready for streaming/progress endpoints (can be implemented with SSE or polling)

🎯 Key Improvements

1. Better UX: More intuitive and visually appealing interface
2. Professional Design: Matches figma design specifications
3. Responsive: All changes work seamlessly on mobile and desktop
4. Accessibility: Enhanced button visibility and clickability
5. Backend Ready: Infrastructure for future cost estimation and progress tracking features

📸 Visual Changes

• Progress indicator now shows elegant percentage-based progress
• Feature cards have consistent styling throughout
• Profile section uses gradient border card design
• Company logos displayed in timeline instead of generic icons
• Contact buttons use brand colors for better recognition
• Sheet selector has more visible, clickable borders

✅ Testing

• All components tested visually across screen sizes
• No linting errors
• Backward compatible (existing functionality preserved)

🔮 Future Work

• Integrate /estimate endpoint in frontend to show cost estimates before translation
• Implement streaming progress updates using Server-Sent Events (SSE)
• Add real-time progress percentage display during translation