export default function HomePage({ branding, navigate, onContactSubmit }) { const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [programsOpen, setProgramsOpen] = useState(false); const [isLoaded, setIsLoaded] = useState(false); // Calculator state const [homePrice, setHomePrice] = useState(400000); const [downPayment, setDownPayment] = useState(80000); const [interestRate, setInterestRate] = useState(6.5); const [loanTerm, setLoanTerm] = useState(30); const [propertyTax, setPropertyTax] = useState(0); const [homeInsurance, setHomeInsurance] = useState(0); const [hoaFees, setHoaFees] = useState(0); useEffect(() => { const t = setTimeout(() => setIsLoaded(true), 100); return () => clearTimeout(t); }, []); // Calculator calculations const loanAmount = homePrice - downPayment; const monthlyRate = interestRate / 100 / 12; const numberOfPayments = loanTerm * 12; const monthlyPI = monthlyRate === 0 ? loanAmount / numberOfPayments : (loanAmount * monthlyRate * Math.pow(1 + monthlyRate, numberOfPayments)) / (Math.pow(1 + monthlyRate, numberOfPayments) - 1); const monthlyTax = propertyTax / 12; const monthlyInsurance = homeInsurance / 12; const totalMonthly = monthlyPI + monthlyTax + monthlyInsurance + hoaFees; const formatCurrency = (val) => new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(val); const pc = branding.primaryColor || '#6d28d9'; const sc = branding.secondaryColor && branding.secondaryColor !== '#ffffff' ? branding.secondaryColor : '#06b6d4'; const navLinks = [ { label: 'Home', path: '/' }, { label: 'About', path: '/about' }, { label: 'Services', path: '/services' }, { label: 'Blog', path: '/blog' }, { label: 'VA Funnel', path: '/va-funnel' }, { label: 'Contact', path: '/contact' }, ]; const loanPrograms = [{ label: 'FHA Loans', path: '/fha-loans' }, { label: 'VA Loans', path: '/va-loans' }, { label: 'Conventional Loans', path: '/conventional-loans' }, { label: 'USDA Loans', path: '/usda-loans' }, { label: 'Jumbo Loans', path: '/jumbo-loans' }]; const rateTable = [ { program: 'Conventional', rate: '6.375%', apr: '6.512%', payment: '$2,493' }, { program: 'FHA', rate: '5.875%', apr: '6.831%', payment: '$2,366' }, { program: 'VA', rate: '5.750%', apr: '5.988%', payment: '$2,334' }, { program: 'USDA', rate: '5.875%', apr: '6.194%', payment: '$2,366' }, { program: 'Jumbo', rate: '6.625%', apr: '6.738%', payment: '$2,560' }, ]; const stats = [ { value: '500+', label: 'Families Served' }, { value: '4.9', label: 'Star Rating' }, { value: '21', label: 'Day Avg Close' }, { value: '50+', label: 'Lender Partners' }, ]; const loanProducts = [ { title: 'Conventional', minDown: '3%', rate: '6.375%', features: ['Up to $832,750', 'No PMI w/ 20% down', 'Fixed & ARM options'], path: '/conventional-loans' }, { title: 'FHA', minDown: '3.5%', rate: '5.875%', features: ['Credit scores 580+', 'Gift funds allowed', 'Low down payment'], path: '/fha-loans' }, { title: 'VA', minDown: '0%', rate: '5.750%', features: ['$0 down payment', 'No PMI ever', 'Competitive rates'], path: '/va-loans' }, { title: 'USDA', minDown: '0%', rate: '5.875%', features: ['100% financing', 'Low guarantee fee', 'Rural & suburban'], path: '/usda-loans' }, { title: 'Jumbo', minDown: '10%', rate: '6.625%', features: ['Up to $3 million', 'Luxury properties', 'I/O options'], path: '/jumbo-loans' }, ]; const steps = [ { num: '01', title: 'Apply Online', desc: 'Quick digital application in minutes' }, { num: '02', title: 'Get Approved', desc: 'Fast pre-approval with rate lock' }, { num: '03', title: 'Find Your Home', desc: 'Shop with confidence and clarity' }, { num: '04', title: 'Close & Move In', desc: 'Smooth closing, guaranteed' }, ]; // Review Carousel Component const ReviewCarousel = ({ pc }) => { const [currentIndex, setCurrentIndex] = useState(0); const [isPaused, setIsPaused] = useState(false); const reviews = [ { name: "Gabby Bolivar", initial: "GB", text: "Joe at Olympus Home Loans made the whole mortgage process easy and stress-free! He was honest, patient, and always quick to answer our questions. Highly recommend Joe for anyone looking for a smooth home loan experience!", date: "October 2025" }, { name: "Rachel Hilton", initial: "RH", text: "Joe was absolutely amazing to work with! He answered every call and was there for me when I had any questions. Very happy with my new lower refinanced rate!", date: "February 2026" }, { name: "Kirsten Heslop", initial: "KH", text: "Joe and the entire Olympus Home Loans team are FANTASTIC! Their team has phenomenal communication, and they sure know how to move the needle. Absolutely love working with their team!", date: "October 2025" }, { name: "Cindy Z", initial: "CZ", text: "Joe is a great broker to work with, efficient, hard working, on the ball, answers calls, responds to emails and makes the process so much easier. Highly recommend!", date: "February 2026" }, { name: "Isa Aguilar", initial: "IA", text: "We had the opportunity of working with Joe to purchase our first home. Joe's confidence and his supportive personality made us feel immediately at ease. He was always available by text or phone and had the best communication.", date: "February 2025" }, { name: "Marta Arnote", initial: "MA", text: "Joe and his team are absolutely FANTASTIC! He is so responsive and on top of it. We were able to get an incredible rate! All around incredible experience!", date: "May 2025" } ]; useEffect(() => { if (isPaused) return; const interval = setInterval(() => { setCurrentIndex((prev) => (prev + 1) % reviews.length); }, 5000); return () => clearInterval(interval); }, [isPaused, reviews.length]); const goToSlide = (index) => setCurrentIndex(index); const goToPrev = () => setCurrentIndex((prev) => (prev - 1 + reviews.length) % reviews.length); const goToNext = () => setCurrentIndex((prev) => (prev + 1) % reviews.length); return (

setIsPaused(true)} onMouseLeave={() => setIsPaused(false)} > {/* Carousel Container */}

{reviews.map((review, idx) => (

{[1,2,3,4,5].map((star) => ( ))}

"{review.text}"

{review.initial}

{review.name}

Google Review • {review.date}

))}

{/* Navigation Arrows */} {/* Dots Indicator */}

{reviews.map((_, idx) => (

{/* Progress Bar */}

); }; return (

{ e.target.style.position = 'fixed'; e.target.style.width = 'auto'; e.target.style.height = 'auto'; e.target.style.padding = '8px 16px'; e.target.style.margin = '0'; e.target.style.overflow = 'visible'; e.target.style.clip = 'auto'; e.target.style.whiteSpace = 'normal'; }} onBlur={(e) => { e.target.style.position = 'absolute'; e.target.style.width = '1px'; e.target.style.height = '1px'; e.target.style.padding = '0'; e.target.style.margin = '-1px'; e.target.style.overflow = 'hidden'; e.target.style.clip = 'rect(0,0,0,0)'; e.target.style.whiteSpace = 'nowrap'; }}>Skip to main content {/* ── Navigation ── */}

navigate('/')}> {branding.logoUrl ? (

) : ( {branding.company || branding.fullName || 'VaultRate'} )}

{navLinks.filter(l => l.path !== '/va-funnel').map((link) => ( ))}

setProgramsOpen(true)} onMouseLeave={() => setProgramsOpen(false)}> {programsOpen && }

{mobileMenuOpen && (

{navLinks.filter(l => l.path !== '/va-funnel').map((link) => ( ))}

LOAN PROGRAMS

{loanPrograms.map((p) => )}

)}

{/* ── Hero: Modern Split Design ── */}

{/* Animated gradient background */}

{/* Diagonal accent shape */}

{/* Left Content - Takes 7 columns */}

{/* Badge */}

Live Market Rates Available

{/* Headline */}

Your Dream Home. Better Rate.

{/* Subheadline */}

{branding.fullName ? `${branding.fullName} shops` : 'We shop'} dozens of lenders{branding.company ? ` through ${branding.company}` : ''} to find the mortgage solution that saves you the most — transparent data, zero guesswork.

{/* CTA Buttons */}

{branding.phone && ( {branding.phone} )}

{/* Trust indicators */}

{[1,2,3,4,5].map((star) => ( ))}

5.0 Google Rating

Licensed in AZ, CA, FL, IA & MN

{/* NMLS Badge */}

{branding.nmls && branding.companyNmls ? `NMLS# ${branding.companyNmls}/${branding.nmls}` : branding.nmls ? `NMLS# ${branding.nmls}` : 'Licensed Mortgage Professional'}

{/* Right Content - Visual Element - Takes 5 columns */}

{/* Decorative rings */}

{/* Main visual card */}

{/* Headshot */}

{branding.headshotUrl ? ( {branding.fullName}

) : (

{branding.fullName ? branding.fullName.split(' ').map(n => n[0]).join('') : 'JG'}

)}

{branding.fullName || 'Joe Garza'}

{branding.title || 'President & CEO'}

{branding.company || 'Olympus Home Loans'}

{/* Quick stats */}

500+

Families Helped

21 Days

Avg. Close Time

{/* Decorative accent */}

{/* Floating badge */}

Pre-Approved in 24hrs

{/* ── Stat Ticker Band ── */}

{stats.map((stat, i) => (

{stat.value}

{stat.label}

))}

{/* ── Loan Products Comparison Table ── */}

Compare Loan Programs

Side-by-side comparison to help you choose the right mortgage for your situation

{/* Desktop Table */}

{loanProducts.map((loan, i) => ( e.currentTarget.style.backgroundColor = '#f9fafb'} onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}> ))}

Program	Min Down	Rate	Key Features	Action
{loan.title}	{loan.minDown}	{loan.rate}	{loan.features.map((f) => {f} )}

{/* Mobile Stacked Cards */}

{loanProducts.map((loan) => (

navigate(loan.path)}>

{loan.title}

{loan.minDown} down

Rate{loan.rate}

View Details

))}

{/* Rate Disclaimer */}

Important Notice: The rates, down payment requirements, and features shown above are for illustration purposes only and are subject to change without notice. Actual rates and terms may vary based on credit score, loan amount, property type, occupancy status, and other factors. These examples do not constitute a commitment to lend or an offer of credit. Contact Joe Garza for a personalized rate quote based on your specific financial situation. All loans are subject to credit approval and program guidelines.

{/* ── Process: Horizontal Numbered Pills ── */}

How It Works

From application to keys in hand — fast, transparent, data-driven

{/* Gradient connecting line */}

{steps.map((step) => (

{step.num}

{step.title}

{step.desc}

))}

{/* ── CTA: Angular Design with Glowing Border ── */}

Ready to Beat the Market?

Join {branding.fullName?.split(' ')[0] || 'our'} clients who locked in better rates by comparing options.

{branding.phone && ( 480-294-0589 )}

{/* ── Testimonials: Google Reviews Carousel ── */}

Google Reviews

{[1,2,3,4,5].map((star) => ( ))}

5.0

Rated 5.0 from 153 reviews on Google

What Our Clients Say

{/* Featured Review - Large Card */}

{[1,2,3,4,5].map((star) => ( ))}

"I recently had the pleasure of working with Joe Garza at Olympus Home Loans in Arizona, and I couldn't be more thrilled with the exceptional service and expertise he provided throughout the entire home loan process. With over 15 years of experience in the industry and the fact that he owns Olympus Home Loans, I knew I was in the best hands possible. Thanks to Joe Garza and Olympus Home Loans, I am now a proud homeowner."

Joseph Martinez

Google Review • September 2023

{/* Scrolling Reviews Carousel */} {/* CTA */}

Join 153+ happy homeowners who chose Olympus Home Loans

{/* ── Mortgage Calculator ── */}

{/* Left Side - Text */}

Mortgage Calculator

Calculate Your Payment

Get an instant estimate of your monthly mortgage payment. Adjust the home price, down payment, interest rate, and term to see how different scenarios affect your budget.

Principal & Interest

See your base monthly payment before taxes and insurance.

Instant Results

No email required. Get your estimate immediately.

Personalized Rate

Ready for a real quote? Contact Joe for personalized rates.

{/* Right Side - Custom Calculator */}

{/* Calculator Header */}

Monthly Payment Calculator

Live Calculation

{/* Primary Result */}

Estimated Monthly Payment

{formatCurrency(totalMonthly)}

{formatCurrency(loanAmount)} loan amount • {interestRate}% APR

{/* Input Grid */}

{/* Home Price */}

Home Price

$ setHomePrice(Number(e.target.value))} className="w-full pl-8 pr-4 py-3 rounded-lg border-2 focus:outline-none transition-colors font-semibold text-lg" style={{ borderColor: '#e2e8f0' }} onFocus={(e) => e.target.style.borderColor = pc} onBlur={(e) => e.target.style.borderColor = '#e2e8f0'} />

setHomePrice(Number(e.target.value))} className="w-full mt-2 h-2 rounded-lg appearance-none cursor-pointer" style={{ backgroundColor: '#e2e8f0', accentColor: pc }} />

{/* Down Payment */}

Down Payment

$ setDownPayment(Number(e.target.value))} className="w-full pl-8 pr-4 py-3 rounded-lg border-2 focus:outline-none transition-colors font-semibold text-lg" style={{ borderColor: '#e2e8f0' }} onFocus={(e) => e.target.style.borderColor = pc} onBlur={(e) => e.target.style.borderColor = '#e2e8f0'} />

{/* Down Payment Percentage Slider */} { const percent = Number(e.target.value); setDownPayment(Math.round(homePrice * (percent / 100))); }} className="w-full mt-3 h-2 rounded-lg appearance-none cursor-pointer" style={{ backgroundColor: '#e2e8f0', accentColor: pc }} />

{Math.round((downPayment / homePrice) * 100)}% down Loan: {formatCurrency(loanAmount)}

{/* Interest Rate */}

Interest Rate

setInterestRate(Number(e.target.value))} step="0.125" min="0" max="20" className="w-full pl-4 pr-10 py-3 rounded-lg border-2 focus:outline-none transition-colors font-semibold text-lg" style={{ borderColor: '#e2e8f0' }} onFocus={(e) => e.target.style.borderColor = pc} onBlur={(e) => e.target.style.borderColor = '#e2e8f0'} /> %

setInterestRate(Number(e.target.value))} className="w-full mt-2 h-2 rounded-lg appearance-none cursor-pointer" style={{ backgroundColor: '#e2e8f0', accentColor: pc }} />

{/* Loan Term */}

Loan Term

{[15, 20, 30].map((term) => ( ))}

{/* Optional Expenses Toggle */}

Annual Property Tax

$ setPropertyTax(Number(e.target.value))} className="w-full pl-7 pr-3 py-2 rounded border text-sm" style={{ borderColor: '#d1d5db' }} />

Annual Insurance

$ setHomeInsurance(Number(e.target.value))} className="w-full pl-7 pr-3 py-2 rounded border text-sm" style={{ borderColor: '#d1d5db' }} />

Monthly HOA

$ setHoaFees(Number(e.target.value))} className="w-full pl-7 pr-3 py-2 rounded border text-sm" style={{ borderColor: '#d1d5db' }} />

{/* Payment Breakdown */}

Payment Breakdown

Principal & Interest

{formatCurrency(monthlyPI)}

{propertyTax > 0 && (

Property Tax

{formatCurrency(monthlyTax)}

)} {homeInsurance > 0 && (

Home Insurance

{formatCurrency(monthlyInsurance)}

)} {hoaFees > 0 && (

HOA Fees

{formatCurrency(hoaFees)}

)}

Calculator results are estimates only. Actual payments may vary based on credit score, property taxes, insurance, and other factors. Contact Joe Garza for a personalized rate quote.

{/* ── Loan Estimate Analyzer Section ── */} {(() => { const [leStep, setLeStep] = useState(1); const [leForm, setLeForm] = useState({ name: '', email: '', phone: '', creditScore: '' }); const [leFile, setLeFile] = useState(null); const [leFileName, setLeFileName] = useState(''); const [leDragging, setLeDragging] = useState(false); const [leStatus, setLeStatus] = useState('idle'); const [leError, setLeError] = useState(''); const [leStepError, setLeStepError] = useState(''); const fileInputRef = useRef(null); const leSteps = ['Your Info', 'Upload Quote', 'Get Savings Report']; const formatPhone = useCallback((value) => { const digits = value.replace(/\D/g, '').slice(0, 10); if (digits.length === 0) return ''; if (digits.length <= 3) return '(' + digits; if (digits.length <= 6) return '(' + digits.slice(0, 3) + ') ' + digits.slice(3); return '(' + digits.slice(0, 3) + ') ' + digits.slice(3, 6) + '-' + digits.slice(6); }, []); const handleLeDrop = useCallback((e) => { e.preventDefault(); e.stopPropagation(); setLeDragging(false); const file = e.dataTransfer?.files?.[0]; if (file) { if (file.type !== 'application/pdf' && !file.name?.toLowerCase().endsWith('.pdf')) { setLeStepError('Please upload a PDF file.'); return; } if (file.size > 10 * 1024 * 1024) { setLeStepError('File must be under 10MB.'); return; } setLeFile(file); setLeFileName(file.name); setLeStepError(''); } }, []); const handleLeFileSelect = useCallback((e) => { const file = e.target?.files?.[0]; if (file) { if (file.type !== 'application/pdf' && !file.name?.toLowerCase().endsWith('.pdf')) { setLeStepError('Please upload a PDF file.'); return; } if (file.size > 10 * 1024 * 1024) { setLeStepError('File must be under 10MB.'); return; } setLeFile(file); setLeFileName(file.name); setLeStepError(''); } }, []); const validateStep = useCallback((step) => { if (step === 1) { if (!leForm.name.trim()) { setLeStepError('Please enter your full name.'); return false; } if (!leForm.email.trim()) { setLeStepError('Please enter your email address.'); return false; } if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(leForm.email.trim())) { setLeStepError('Please enter a valid email address.'); return false; } if (!leForm.phone.trim()) { setLeStepError('Please enter your phone number.'); return false; } } if (step === 2) { if (!leFile) { setLeStepError('Please upload your Loan Estimate PDF.'); return false; } } setLeStepError(''); return true; }, [leForm, leFile]); const goNext = useCallback(() => { if (validateStep(leStep)) setLeStep(leStep + 1); }, [leStep, validateStep]); const goBack = useCallback(() => { setLeStepError(''); setLeStep(leStep - 1); }, [leStep]); const handleLeSubmit = useCallback(async () => { setLeStatus('uploading'); setLeError(''); try { const fd = new FormData(); fd.append('websiteId', '973ca556-e2bd-4045-b797-1bc4f939239a'); fd.append('name', leForm.name.trim()); fd.append('email', leForm.email.trim()); fd.append('phone', leForm.phone.trim()); fd.append('creditScore', leForm.creditScore); fd.append('file', leFile); const res = await fetch('/api/website-builder/loan-estimate', { method: 'POST', body: fd }); if (!res.ok) { const body = await res.json().catch(() => ({})); throw new Error(body.error || 'Submission failed'); } setLeStatus('success'); } catch (err) { setLeStatus('error'); setLeError(err.message || 'Something went wrong. Please try again.'); } }, [leForm, leFile]); if (leStatus === 'success') { return (

We're On It!

Joe's reviewing your Loan Estimate now. Expect a detailed savings comparison within 24 hours!

); } return (

{/* Eye-catching badge */}

Already Have a Quote? We'll Beat It!

Stop Overpaying on Your Mortgage

Upload your current Loan Estimate from any lender. Joe will analyze it and show you exactly how much you could save with better terms.

{/* Trust badges */}

Free Analysis

24-Hour Response

No Obligation

{/* Step Progress Indicator */}

{leSteps.map((label, i) => { const stepNum = i + 1; const isActive = stepNum === leStep; const isCompleted = stepNum < leStep; return ( {i > 0 && (

)}

{isCompleted ? ( ) : stepNum}

{label}

); })}

{/* Step 1: Your Information */} {leStep === 1 && (

Full Name * { setLeForm({ ...leForm, name: e.target.value }); setLeStepError(''); }} className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:border-transparent transition-shadow" style={{ '--tw-ring-color': branding.primaryColor }} placeholder="John Smith" />

Email Address * { setLeForm({ ...leForm, email: e.target.value }); setLeStepError(''); }} className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:border-transparent transition-shadow" style={{ '--tw-ring-color': branding.primaryColor }} placeholder="john@example.com" />

Phone Number * { setLeForm({ ...leForm, phone: formatPhone(e.target.value) }); setLeStepError(''); }} className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:border-transparent transition-shadow" style={{ '--tw-ring-color': branding.primaryColor }} placeholder="(555) 123-4567" />

)} {/* Step 2: Loan Details */} {leStep === 2 && (

Estimated Credit Score

Upload Loan Estimate (PDF) *

{ e.preventDefault(); e.stopPropagation(); setLeDragging(true); }} onDragLeave={(e) => { e.preventDefault(); e.stopPropagation(); setLeDragging(false); }} onDrop={handleLeDrop} onClick={() => fileInputRef.current?.click()} className="border-2 border-dashed rounded-xl p-8 text-center cursor-pointer transition-colors" style={{ borderColor: leDragging ? branding.primaryColor : (leFileName ? branding.primaryColor + '80' : '#d1d5db'), backgroundColor: leDragging ? branding.primaryColor + '08' : (leFileName ? branding.primaryColor + '05' : '#fafafa'), }} > {leFileName ? (

{leFileName}

Click or drag to replace

) : (

Got a quote from another lender?

Upload your Loan Estimate PDF and we'll find you a better deal (max 10MB)

)}

)} {/* Step 3: Review & Submit */} {leStep === 3 && (

Name {leForm.name}

Email {leForm.email}

Phone {leForm.phone}

{leForm.creditScore && (

Credit Score {leForm.creditScore}

)}

Document

{leFileName}

Please confirm your information is correct before submitting.

)} {/* Error Messages */} {(leStepError || leError) && (

{leStepError || leError}

)} {/* Navigation Buttons */}

{leStep > 1 && leStatus !== 'uploading' && ( )} {leStep < 3 && ( )} {leStep === 3 && ( )}

{leStatus === 'error' && ( )}

); })()} {/* ── Optimal Blue Rate Widget + Get my Rate CTA ── */} {(() => { const [rateEmail, setRateEmail] = useState(''); const [rateStatus, setRateStatus] = useState('idle'); const [rateError, setRateError] = useState(''); const handleRateSubmit = useCallback(async (e) => { e.preventDefault(); setRateError(''); if (!rateEmail.trim()) { setRateError('Please enter your email.'); return; } if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(rateEmail.trim())) { setRateError('Please enter a valid email.'); return; } setRateStatus('sending'); try { const res = await fetch('/api/website-builder/contact', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ websiteId: '973ca556-e2bd-4045-b797-1bc4f939239a', name: 'Rate Widget Lead', email: rateEmail.trim(), message: 'This visitor requested their personalized rate via the Rate Widget.', }), }); if (!res.ok) throw new Error('Failed'); setRateStatus('sent'); } catch { setRateError('Something went wrong. Please try again.'); setRateStatus('idle'); } }, [rateEmail]); return (