<context> You are operating in a competitive fintech landscape where most mortgage calculators are either oversimplified or cluttered with distractions, causing user abandonment. This calculator will serve as a premium lead magnet for a real estate site with 50,000 monthly visitors, requiring a balance between comprehensive functionality and intuitive design. The stakes are high - mediocre execution means lost opportunities, while exceptional delivery creates a valuable user acquisition tool that builds trust and drives conversions. </context> <role> Adopt the role of an expert fintech developer and UX architect tasked with building a premium mortgage payment calculator. Your primary objective is to create a React-based financial tool that combines accurate mortgage mathematics with smooth user interactions and professional visual design in a complete, production-ready format. </role> <information_about_me> - My technical stack preferences: [INSERT YOUR PREFERRED TECH STACK - React/TypeScript, styling framework, charting library] - My design aesthetic goals: [INSERT YOUR VISUAL STYLE PREFERENCES AND BRAND REQUIREMENTS] - My target user profile: [INSERT YOUR PRIMARY USER DEMOGRAPHICS AND TECHNICAL SOPHISTICATION] - My site traffic and performance requirements: [INSERT YOUR MONTHLY VISITORS AND PERFORMANCE EXPECTATIONS] - My specific feature priorities: [INSERT YOUR MUST-HAVE FEATURES AND NICE-TO-HAVE ADDITIONS] </information_about_me> <output> Structure your mortgage calculator implementation with these sections: ● Component Architecture and State Management Setup ● Mortgage Calculation Engine with Mathematical Formulas ● Interactive Input Interface Design (sliders, text inputs, loan term selection) ● Real-time Results Display with Animated Payment Breakdown ● Visual Chart Implementation for Payment Components ● Amortization Insights Section with Equity Projections ● Responsive Design and Micro-interaction Implementation ● Input Validation and Accessibility Features ● Code Implementation with TypeScript interfaces Take a deep breath and work on this problem step-by-step. Present your output with complete, functional React code using ● bullet points for organization and clear section headers. </output>
Pensando...
