Mortgage Calculator Page

Create an interactive mortgage calculator page for a real estate website. Include these sections:

1. HERO SECTION
- Headline: "Mortgage Calculator"
- Subheadline: "Estimate your monthly mortgage payment and see what you can afford"
- Trust badges: "Free • No Sign-up Required • Instant Results"

2. MAIN CALCULATOR FORM
Input fields:
- Home Price: $400,000 (slider + input field)
- Down Payment: $80,000 or 20% (toggle between $ and %)
- Loan Term: 30 years / 20 years / 15 years (button group)
- Interest Rate: 6.5% (input with +/- buttons)
- Property Tax: $4,800/year (or auto-estimate by location)
- Home Insurance: $1,200/year
- HOA Fees: $0/month (optional)
- PMI: Auto-calculated if down payment < 20%

Real-time calculation:
- Results update instantly as inputs change
- Smooth animations on number changes

3. RESULTS PANEL (Prominent display)
Monthly Payment Breakdown:
- Total Monthly Payment: $2,847
  - Principal & Interest: $2,024
  - Property Tax: $400
  - Home Insurance: $100
  - HOA: $200
  - PMI: $123 (if applicable)

Visual pie chart showing payment breakdown

4. AFFORDABILITY SUMMARY
- "With this mortgage, you'll pay:"
- Total of all payments: $725,000
- Total interest paid: $329,000
- Payoff date: January 2054
- Loan-to-value ratio: 80%

5. AMORTIZATION SCHEDULE
Toggle between:
- Monthly view (table with scrollable list)
- Yearly summary view

Table columns:
- Month/Year
- Payment
- Principal
- Interest
- Remaining Balance

Interactive chart:
- Line graph showing principal vs interest over time
- Balance remaining visualization
- Hover for exact numbers at any point

6. COMPARISON TOOL
"Compare Loan Options"
Side-by-side comparison:
- 30-year vs 15-year
- Different down payment scenarios
- Different interest rates

Show difference in:
- Monthly payment
- Total interest paid
- Total cost

7. EXTRA PAYMENT CALCULATOR
- "What if I pay extra?"
- Additional monthly payment input
- One-time extra payment input
- Show: Years saved, Interest saved

8. PRE-QUALIFICATION CTA
- "Ready to get pre-approved?"
- "Know your real rate"
- Form: Name, Email, Phone
- "Check My Rate" button
- "No impact on credit score" badge

9. CURRENT RATES WIDGET
- Today's average rates from lenders
- 30-year fixed: 6.5%
- 15-year fixed: 5.9%
- 5/1 ARM: 6.1%
- "Rates updated daily"
- Link to rate comparison tool

10. EDUCATIONAL CONTENT
Expandable sections:
- "How is my payment calculated?"
- "What is PMI and how to avoid it?"
- "Fixed vs Adjustable Rate"
- "How much house can I afford?"

11. RELATED TOOLS
- Home Affordability Calculator
- Rent vs Buy Calculator
- Refinance Calculator
- Down Payment Calculator

12. LEAD CAPTURE
- "Get personalized rates"
- Connect with a loan officer
- "Find homes in your budget" search link

Design: Clean, trustworthy. Large, easy-to-use inputs. Mobile-friendly sliders. Real-time updates. Professional color scheme (navy, green for positive). Clear typography for numbers.