Luxury Real Estate | QuickCoder | The frontend studio

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PrimeProperties | Luxury Real Estate | Buy, Sell & Invest in Premium Properties</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">

</head>
<body>
    
    <nav class="navbar navbar-expand-lg navbar-light fixed-top navbar-custom">
        <div class="container">
            <a class="navbar-brand elegant-font" href="#home">? PrimeProperties</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#home">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#properties">Properties</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#services">Services</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#tools">Tools</a>
                    </li>
                    <li class="nav-item">
                        <button class="btn btn-contact" onclick="scrollToContact()">
                            <i class="fas fa-home me-2"></i>Get Started
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

<section id="home" class="hero-section">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-7">
                    <div class="hero-content">
                        <div class="hero-greeting">? Welcome to Luxury Real Estate</div>
                        <h1 class="hero-title elegant-font">PrimeProperties</h1>
                        <p class="hero-subtitle">Discover exceptional properties, expert guidance, and seamless transactions in the most desirable locations. Your dream home awaits.</p>
                        
                        <div class="hero-features">
                            <span class="feature-tag">Luxury Homes</span>
                            <span class="feature-tag">Expert Agents</span>
                            <span class="feature-tag">Market Insights</span>
                            <span class="feature-tag">Investment Opportunities</span>
                        </div>
                        
                        <div class="hero-buttons">
                            <a href="#properties" class="btn btn-custom btn-primary-custom">Browse Properties</a>
                            <a href="#services" class="btn btn-custom btn-secondary-custom">Our Services</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5">
                    <div class="hero-image text-center">
                        <div class="property-showcase">
                            <i class="fas fa-building"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="properties" class="properties-section section-padding">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mx-auto text-center mb-5">
                    <h2 class="section-title animate-on-scroll elegant-font">Featured Properties</h2>
                    <p class="section-subtitle animate-on-scroll">Discover our handpicked selection of premium properties in prime locations</p>
                </div>
            </div>
            
            <div class="property-filters animate-on-scroll">
                <button class="filter-btn active" onclick="filterProperties('all')">All Properties</button>
                <button class="filter-btn" onclick="filterProperties('luxury')">Luxury Homes</button>
                <button class="filter-btn" onclick="filterProperties('condos')">Condos</button>
                <button class="filter-btn" onclick="filterProperties('commercial')">Commercial</button>
                <button class="filter-btn" onclick="filterProperties('investment')">Investment</button>
            </div>
            
            <div class="properties-grid">
                <div class="property-card animate-on-scroll" data-category="luxury">
                    <div class="property-image">
                        <i class="fas fa-home"></i>
                        <div class="property-badge">Featured</div>
                        <div class="property-price">$2.8M</div>
                        <div class="property-overlay">
                            <a href="#" class="property-btn" onclick="viewProperty('Luxury Villa')">
                                <i class="fas fa-eye me-2"></i>View
                            </a>
                            <a href="#" class="property-btn" onclick="scheduleViewing('Luxury Villa')">
                                <i class="fas fa-calendar me-2"></i>Tour
                            </a>
                        </div>
                    </div>
                    <div class="property-content">
                        <h4 class="property-title">Modern Luxury Villa</h4>
                        <div class="property-location">
                            <i class="fas fa-map-marker-alt"></i>
                            Beverly Hills, CA
                        </div>
                        <div class="property-features">
                            <div class="property-feature">
                                <div class="property-feature-icon"><i class="fas fa-bed"></i></div>
                                <div class="property-feature-label">Bedrooms</div>
                                <div class="property-feature-value">5</div>
                            </div>
                            <div class="property-feature">
                                <div class="property-feature-icon"><i class="fas fa-bath"></i></div>
                                <div class="property-feature-label">Bathrooms</div>
                                <div class="property-feature-value">4</div>
                            </div>
                            <div class="property-feature">
                                <div class="property-feature-icon"><i class="fas fa-ruler-combined"></i></div>
                                <div class="property-feature-label">Sq Ft</div>
                                <div class="property-feature-value">4,200</div>
                            </div>
                        </div>
                    </div>
                </div>

<div class="property-card animate-on-scroll" data-category="condos">
                    <div class="property-image">
                        <i class="fas fa-building"></i>
                        <div class="property-badge">New</div>
                        <div class="property-price">$1.2M</div>
                        <div class="property-overlay">
                            <a href="#" class="property-btn" onclick="viewProperty('Downtown Penthouse')">
                                <i class="fas fa-eye me-2"></i>View
                            </a>
                            <a href="#" class="property-btn" onclick="scheduleViewing('Downtown Penthouse')">
                                <i class="fas fa-calendar me-2"></i>Tour
                            </a>
                        </div>
                    </div>
                    <div class="property-content">
                        <h4 class="property-title">Downtown Penthouse</h4>
                        <div class="property-location">
                            <i class="fas fa-map-marker-alt"></i>
                            Manhattan, NY
                        </div>
                        <div class="property-features">
                            <div class="property-feature">
                                <div class="property-feature-icon"><i class="fas fa-bed"></i></div>
                                <div class="property-feature-label">Bedrooms</div>
                                <div class="property-feature-value">3</div>
                            </div>
                            <div class="property-feature">
                                <div class="property-feature-icon"><i class="fas fa-bath"></i></div>
                                <div class="property-feature-label">Bathrooms</div>
                                <div class="property-feature-value">2</div>
                            </div>
                            <div class="property-feature">
                                <div class="property-feature-icon"><i class="fas fa-ruler-combined"></i></div>
                                <div class="property-feature-label">Sq Ft</div>
                                <div class="property-feature-value">2,100</div>
                            </div>
                        </div>
                    </div>
                </div>

<div class="property-card animate-on-scroll" data-category="luxury">
                    <div class="property-image">
                        <i class="fas fa-water"></i>
                        <div class="property-badge">Exclusive</div>
                        <div class="property-price">$4.5M</div>
                        <div class="property-overlay">
                            <a href="#" class="property-btn" onclick="viewProperty('Waterfront Estate')">
                                <i class="fas fa-eye me-2"></i>View
                            </a>
                            <a href="#" class="property-btn" onclick="scheduleViewing('Waterfront Estate')">
                                <i class="fas fa-calendar me-2"></i>Tour
                            </a>
                        </div>
                    </div>
                    <div class="property-content">
                        <h4 class="property-title">Waterfront Estate</h4>
                        <div class="property-location">
                            <i class="fas fa-map-marker-alt"></i>
                            Malibu, CA
                        </div>
                        <div class="property-features">
                            <div class="property-feature">
                                <div class="property-feature-icon"><i class="fas fa-bed"></i></div>
                                <div class="property-feature-label">Bedrooms</div>
                                <div class="property-feature-value">6</div>
                            </div>
                            <div class="property-feature">
                                <div class="property-feature-icon"><i class="fas fa-bath"></i></div>
                                <div class="property-feature-label">Bathrooms</div>
                                <div class="property-feature-value">5</div>
                            </div>
                            <div class="property-feature">
                                <div class="property-feature-icon"><i class="fas fa-ruler-combined"></i></div>
                                <div class="property-feature-label">Sq Ft</div>
                                <div class="property-feature-value">6,800</div>
                            </div>
                        </div>
                    </div>
                </div>

<div class="property-card animate-on-scroll" data-category="commercial">
                    <div class="property-image">
                        <i class="fas fa-city"></i>
                        <div class="property-badge">Investment</div>
                        <div class="property-price">$8.2M</div>
                        <div class="property-overlay">
                            <a href="#" class="property-btn" onclick="viewProperty('Office Complex')">
                                <i class="fas fa-eye me-2"></i>View
                            </a>
                            <a href="#" class="property-btn" onclick="scheduleViewing('Office Complex')">
                                <i class="fas fa-calendar me-2"></i>Tour
                            </a>
                        </div>
                    </div>
                    <div class="property-content">
                        <h4 class="property-title">Prime Office Complex</h4>
                        <div class="property-location">
                            <i class="fas fa-map-marker-alt"></i>
                            Downtown LA, CA
                        </div>
                        <div class="property-features">
                            <div class="property-feature">
                                <div class="property-feature-icon"><i class="fas fa-building"></i></div>
                                <div class="property-feature-label">Floors</div>
                                <div class="property-feature-value">12</div>
                            </div>
                            <div class="property-feature">
                                <div class="property-feature-icon"><i class="fas fa-car"></i></div>
                                <div class="property-feature-label">Parking</div>
                                <div class="property-feature-value">200</div>
                            </div>
                            <div class="property-feature">
                                <div class="property-feature-icon"><i class="fas fa-ruler-combined"></i></div>
                                <div class="property-feature-label">Sq Ft</div>
                                <div class="property-feature-value">85,000</div>
                            </div>
                        </div>
                    </div>
                </div>

<div class="property-card animate-on-scroll" data-category="condos">
                    <div class="property-image">
                        <i class="fas fa-tree"></i>
                        <div class="property-badge">Garden View</div>
                        <div class="property-price">$850K</div>
                        <div class="property-overlay">
                            <a href="#" class="property-btn" onclick="viewProperty('Garden Condo')">
                                <i class="fas fa-eye me-2"></i>View
                            </a>
                            <a href="#" class="property-btn" onclick="scheduleViewing('Garden Condo')">
                                <i class="fas fa-calendar me-2"></i>Tour
                            </a>
                        </div>
                    </div>
                    <div class="property-content">
                        <h4 class="property-title">Garden View Condo</h4>
                        <div class="property-location">
                            <i class="fas fa-map-marker-alt"></i>
                            San Francisco, CA
                        </div>
                        <div class="property-features">
                            <div class="property-feature">
                                <div class="property-feature-icon"><i class="fas fa-bed"></i></div>
                                <div class="property-feature-label">Bedrooms</div>
                                <div class="property-feature-value">2</div>
                            </div>
                            <div class="property-feature">
                                <div class="property-feature-icon"><i class="fas fa-bath"></i></div>
                                <div class="property-feature-label">Bathrooms</div>
                                <div class="property-feature-value">2</div>
                            </div>
                            <div class="property-feature">
                                <div class="property-feature-icon"><i class="fas fa-ruler-combined"></i></div>
                                <div class="property-feature-label">Sq Ft</div>
                                <div class="property-feature-value">1,400</div>
                            </div>
                        </div>
                    </div>
                </div>

<div class="property-card animate-on-scroll" data-category="investment">
                    <div class="property-image">
                        <i class="fas fa-chart-line"></i>
                        <div class="property-badge">ROI 12%</div>
                        <div class="property-price">$3.2M</div>
                        <div class="property-overlay">
                            <a href="#" class="property-btn" onclick="viewProperty('Investment Property')">
                                <i class="fas fa-eye me-2"></i>View
                            </a>
                            <a href="#" class="property-btn" onclick="scheduleViewing('Investment Property')">
                                <i class="fas fa-calendar me-2"></i>Tour
                            </a>
                        </div>
                    </div>
                    <div class="property-content">
                        <h4 class="property-title">Multi-Unit Investment</h4>
                        <div class="property-location">
                            <i class="fas fa-map-marker-alt"></i>
                            Austin, TX
                        </div>
                        <div class="property-features">
                            <div class="property-feature">
                                <div class="property-feature-icon"><i class="fas fa-home"></i></div>
                                <div class="property-feature-label">Units</div>
                                <div class="property-feature-value">8</div>
                            </div>
                            <div class="property-feature">
                                <div class="property-feature-icon"><i class="fas fa-dollar-sign"></i></div>
                                <div class="property-feature-label">Monthly</div>
                                <div class="property-feature-value">$32K</div>
                            </div>
                            <div class="property-feature">
                                <div class="property-feature-icon"><i class="fas fa-percentage"></i></div>
                                <div class="property-feature-label">Cap Rate</div>
                                <div class="property-feature-value">12%</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="services" class="services-section section-padding">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mx-auto text-center mb-5">
                    <h2 class="section-title animate-on-scroll elegant-font">Our Services</h2>
                    <p class="section-subtitle animate-on-scroll">Comprehensive real estate solutions tailored to your needs</p>
                </div>
            </div>
            
            <div class="services-grid">
                <div class="service-card animate-on-scroll">
                    <div class="service-icon">
                        <i class="fas fa-search"></i>
                    </div>
                    <h4 class="service-title">Property Search & Acquisition</h4>
                    <p class="service-description">Expert assistance in finding and acquiring your perfect property with comprehensive market analysis.</p>
                    <ul class="service-features">
                        <li><i class="fas fa-check"></i>Personalized property matching</li>
                        <li><i class="fas fa-check"></i>Market analysis & valuation</li>
                        <li><i class="fas fa-check"></i>Negotiation expertise</li>
                        <li><i class="fas fa-check"></i>Due diligence support</li>
                        <li><i class="fas fa-check"></i>Closing coordination</li>
                    </ul>
                </div>

<div class="service-card animate-on-scroll">
                    <div class="service-icon">
                        <i class="fas fa-handshake"></i>
                    </div>
                    <h4 class="service-title">Property Sales & Marketing</h4>
                    <p class="service-description">Strategic marketing and sales services to maximize your property's value and minimize time on market.</p>
                    <ul class="service-features">
                        <li><i class="fas fa-check"></i>Professional photography</li>
                        <li><i class="fas fa-check"></i>Digital marketing campaigns</li>
                        <li><i class="fas fa-check"></i>Staging consultation</li>
                        <li><i class="fas fa-check"></i>Open house coordination</li>
                        <li><i class="fas fa-check"></i>Buyer qualification</li>
                    </ul>
                </div>

<div class="service-card animate-on-scroll">
                    <div class="service-icon">
                        <i class="fas fa-chart-bar"></i>
                    </div>
                    <h4 class="service-title">Investment Advisory</h4>
                    <p class="service-description">Strategic investment guidance for building and optimizing your real estate portfolio.</p>
                    <ul class="service-features">
                        <li><i class="fas fa-check"></i>Portfolio analysis</li>
                        <li><i class="fas fa-check"></i>ROI calculations</li>
                        <li><i class="fas fa-check"></i>Market trend analysis</li>
                        <li><i class="fas fa-check"></i>Risk assessment</li>
                        <li><i class="fas fa-check"></i>Exit strategy planning</li>
                    </ul>
                </div>

<div class="service-card animate-on-scroll">
                    <div class="service-icon">
                        <i class="fas fa-cogs"></i>
                    </div>
                    <h4 class="service-title">Property Management</h4>
                    <p class="service-description">Full-service property management to maximize returns and minimize hassles for property owners.</p>
                    <ul class="service-features">
                        <li><i class="fas fa-check"></i>Tenant screening & placement</li>
                        <li><i class="fas fa-check"></i>Rent collection</li>
                        <li><i class="fas fa-check"></i>Maintenance coordination</li>
                        <li><i class="fas fa-check"></i>Financial reporting</li>
                        <li><i class="fas fa-check"></i>Legal compliance</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

<section id="tools" class="tools-section section-padding">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mx-auto text-center mb-5">
                    <h2 class="section-title animate-on-scroll elegant-font">Real Estate Tools</h2>
                    <p class="section-subtitle animate-on-scroll">Interactive calculators and tools to help with your real estate decisions</p>
                </div>
            </div>
            
            <div class="tools-container">
                
                <div class="tool-card animate-on-scroll">
                    <div class="tool-header">
                        <div class="tool-icon">
                            <i class="fas fa-calculator"></i>
                        </div>
                        <h4 class="tool-title">Mortgage Calculator</h4>
                    </div>
                    <div class="tool-content">
                        <p>Calculate your monthly mortgage payments including principal, interest, taxes, and insurance.</p>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">Home Price ($)</label>
                                    <input type="number" class="form-control" id="homePrice" placeholder="Enter home price">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">Down Payment ($)</label>
                                    <input type="number" class="form-control" id="downPayment" placeholder="Enter down payment">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">Interest Rate (%)</label>
                                    <input type="number" step="0.01" class="form-control" id="interestRate" placeholder="Enter interest rate">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">Loan Term (years)</label>
                                    <select class="form-control" id="loanTerm">
                                        <option value="15">15 years</option>
                                        <option value="30" selected>30 years</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <button class="btn-calculate" onclick="calculateMortgage()">Calculate Payment</button>
                        <div class="result-display" id="mortgageResult">
                            <div class="result-title">Mortgage Calculation Results:</div>
                            <div id="mortgageDetails"></div>
                        </div>
                    </div>
                </div>

<div class="tool-card animate-on-scroll">
                    <div class="tool-header">
                        <div class="tool-icon">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <h4 class="tool-title">Investment ROI Calculator</h4>
                    </div>
                    <div class="tool-content">
                        <p>Calculate the return on investment for rental properties and real estate investments.</p>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">Purchase Price ($)</label>
                                    <input type="number" class="form-control" id="purchasePrice" placeholder="Enter purchase price">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">Monthly Rent ($)</label>
                                    <input type="number" class="form-control" id="monthlyRent" placeholder="Enter monthly rent">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">Monthly Expenses ($)</label>
                                    <input type="number" class="form-control" id="monthlyExpenses" placeholder="Enter monthly expenses">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">Initial Investment ($)</label>
                                    <input type="number" class="form-control" id="initialInvestment" placeholder="Down payment + costs">
                                </div>
                            </div>
                        </div>
                        <button class="btn-calculate" onclick="calculateROI()">Calculate ROI</button>
                        <div class="result-display" id="roiResult">
                            <div class="result-title">ROI Calculation Results:</div>
                            <div id="roiDetails"></div>
                        </div>
                    </div>
                </div>

<div class="tool-card animate-on-scroll">
                    <div class="tool-header">
                        <div class="tool-icon">
                            <i class="fas fa-dollar-sign"></i>
                        </div>
                        <h4 class="tool-title">Home Affordability Calculator</h4>
                    </div>
                    <div class="tool-content">
                        <p>Determine how much house you can afford based on your income and financial situation.</p>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">Annual Income ($)</label>
                                    <input type="number" class="form-control" id="annualIncome" placeholder="Enter annual income">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">Monthly Debts ($)</label>
                                    <input type="number" class="form-control" id="monthlyDebts" placeholder="Enter monthly debt payments">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">Down Payment ($)</label>
                                    <input type="number" class="form-control" id="availableDownPayment" placeholder="Available down payment">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">Interest Rate (%)</label>
                                    <input type="number" step="0.01" class="form-control" id="affordabilityRate" placeholder="Current interest rate">
                                </div>
                            </div>
                        </div>
                        <button class="btn-calculate" onclick="calculateAffordability()">Calculate Affordability</button>
                        <div class="result-display" id="affordabilityResult">
                            <div class="result-title">Affordability Calculation Results:</div>
                            <div id="affordabilityDetails"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="contact" class="contact-section section-padding">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mx-auto text-center mb-5">
                    <h2 class="section-title animate-on-scroll elegant-font">Start Your Journey</h2>
                    <p class="section-subtitle animate-on-scroll">Ready to buy, sell, or invest? Let's make your real estate dreams a reality</p>
                </div>
            </div>
            
            <div class="contact-content animate-on-scroll">
                <div class="contact-info">
                    <h3 class="contact-title elegant-font">Get In Touch</h3>
                    <p class="contact-description">Whether you're a first-time buyer, seasoned investor, or looking to sell, our expert team is here to guide you through every step of your real estate journey.</p>
                    
                    <div class="contact-methods">
                        <div class="contact-method">
                            <div class="contact-icon">
                                <i class="fas fa-envelope"></i>
                            </div>
                            <div>
                                <div><strong>Email</strong></div>
                                <div>info@primeproperties.com</div>
                            </div>
                        </div>
                        
                        <div class="contact-method">
                            <div class="contact-icon">
                                <i class="fas fa-phone"></i>
                            </div>
                            <div>
                                <div><strong>Phone</strong></div>
                                <div>+1 (555) PRIME-RE</div>
                            </div>
                        </div>
                        
                        <div class="contact-method">
                            <div class="contact-icon">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <div>
                                <div><strong>Office</strong></div>
                                <div>Downtown Financial District</div>
                            </div>
                        </div>
                        
                        <div class="contact-method">
                            <div class="contact-icon">
                                <i class="fas fa-clock"></i>
                            </div>
                            <div>
                                <div><strong>Hours</strong></div>
                                <div>Mon-Sun, 8 AM - 9 PM</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="contact-form">
                    <form id="contactForm">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">First Name *</label>
                                    <input type="text" class="form-control" placeholder="Your first name" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">Last Name *</label>
                                    <input type="text" class="form-control" placeholder="Your last name" required>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Email Address *</label>
                            <input type="email" class="form-control" placeholder="your.email@example.com" required>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">I'm Interested In</label>
                            <select class="form-control">
                                <option value="">Select your interest</option>
                                <option value="buying">Buying a Home</option>
                                <option value="selling">Selling a Property</option>
                                <option value="investing">Investment Opportunities</option>
                                <option value="renting">Rental Properties</option>
                                <option value="commercial">Commercial Real Estate</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Message *</label>
                            <textarea class="form-control" rows="5" placeholder="Tell us about your real estate needs and goals..." required></textarea>
                        </div>
                        
                        <button type="submit" class="btn-submit">
                            <i class="fas fa-home me-2"></i>Start My Journey
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </section>

<footer class="footer-section">
        <div class="container">
            <div class="social-links">
                <a href="#" onclick="openSocial('Facebook')"><i class="fab fa-facebook-f"></i></a>
                <a href="#" onclick="openSocial('Instagram')"><i class="fab fa-instagram"></i></a>
                <a href="#" onclick="openSocial('LinkedIn')"><i class="fab fa-linkedin-in"></i></a>
                <a href="#" onclick="openSocial('Twitter')"><i class="fab fa-twitter"></i></a>
                <a href="#" onclick="openSocial('YouTube')"><i class="fab fa-youtube"></i></a>
            </div>
            <p class="mb-0">&copy; 2024 PrimeProperties. All rights reserved. | Your Dream Home Awaits ?</p>
        </div>
    </footer>

<div class="success-message" id="successMessage">
        <i class="fas fa-check-circle me-2"></i>
        <span id="successText">Success!</span>
    </div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

CSS

:root {
            --primary-blue: #2C3E50;
            --secondary-gold: #F39C12;
            --accent-teal: #16A085;
            --warm-gray: #7F8C8D;
            --light-silver: #ECF0F1;
            --dark-navy: #1A252F;
            --success-green: #27AE60;
            --danger-red: #E74C3C;
            --pure-white: #FFFFFF;
            --gradient-primary: linear-gradient(135deg, #2C3E50 0%, #16A085 100%);
            --gradient-secondary: linear-gradient(135deg, #F39C12 0%, #E67E22 100%);
            --gradient-luxury: linear-gradient(135deg, #1A252F 0%, #2C3E50 100%);
            --gradient-success: linear-gradient(135deg, #27AE60 0%, #16A085 100%);
            --shadow-soft: 0 4px 20px rgba(44, 62, 80, 0.1);
            --shadow-medium: 0 8px 30px rgba(44, 62, 80, 0.15);
            --shadow-strong: 0 15px 40px rgba(44, 62, 80, 0.2);
            --border-radius: 16px;
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Inter', sans-serif;
            line-height: 1.6;
            color: var(--primary-blue);
            background: var(--pure-white);
            overflow-x: hidden;
        }

.elegant-font {
            font-family: 'Playfair Display', serif;
        }

/* Navigation */
        .navbar-custom {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            box-shadow: var(--shadow-soft);
            transition: all 0.3s ease;
            padding: 1rem 0;
            border-bottom: 1px solid rgba(44, 62, 80, 0.1);
        }

.navbar-brand {
            font-weight: 800;
            font-size: 1.8rem;
            color: var(--primary-blue) !important;
            letter-spacing: -0.5px;
        }

.nav-link {
            font-weight: 500;
            color: var(--warm-gray) !important;
            margin: 0 1rem;
            transition: all 0.3s ease;
            position: relative;
            letter-spacing: 0.2px;
        }

.nav-link:hover {
            color: var(--primary-blue) !important;
        }

.nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 50%;
            background: var(--gradient-primary);
            transition: all 0.3s ease;
            transform: translateX(-50%);
            border-radius: 1px;
        }

.nav-link:hover::after {
            width: 100%;
        }

.btn-contact {
            background: var(--gradient-primary);
            color: white;
            border: none;
            padding: 12px 28px;
            border-radius: 25px;
            font-weight: 600;
            margin-left: 20px;
            transition: all 0.3s ease;
            letter-spacing: 0.3px;
        }

.btn-contact:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-medium);
            color: white;
        }

/* Hero Section */
        .hero-section {
            min-height: 100vh;
            display: flex;
            align-items: center;
            background: linear-gradient(135deg, rgba(44, 62, 80, 0.05) 0%, rgba(22, 160, 133, 0.05) 100%);
            position: relative;
            overflow: hidden;
        }

.hero-content {
            position: relative;
            z-index: 2;
        }

.hero-greeting {
            font-size: 1.2rem;
            color: var(--accent-teal);
            font-weight: 600;
            margin-bottom: 1rem;
            animation: fadeInUp 0.8s ease-out;
        }

.hero-title {
            font-size: 4.5rem;
            font-weight: 800;
            color: var(--primary-blue);
            margin-bottom: 1.5rem;
            animation: fadeInUp 0.8s ease-out 0.2s both;
            line-height: 1.1;
            letter-spacing: -2px;
        }

.hero-subtitle {
            font-size: 1.4rem;
            color: var(--warm-gray);
            margin-bottom: 2rem;
            animation: fadeInUp 0.8s ease-out 0.4s both;
            font-weight: 400;
            max-width: 600px;
        }

.hero-features {
            display: flex;
            gap: 1.5rem;
            margin-bottom: 3rem;
            animation: fadeInUp 0.8s ease-out 0.6s both;
            flex-wrap: wrap;
        }

.feature-tag {
            background: rgba(44, 62, 80, 0.1);
            color: var(--primary-blue);
            padding: 12px 20px;
            border-radius: 25px;
            font-weight: 600;
            font-size: 0.9rem;
            border: 1px solid rgba(44, 62, 80, 0.2);
            transition: all 0.3s ease;
        }

.feature-tag:hover {
            background: var(--primary-blue);
            color: white;
            transform: translateY(-2px);
        }

.hero-buttons {
            animation: fadeInUp 0.8s ease-out 0.8s both;
        }

.hero-image {
            position: relative;
            animation: fadeInRight 1s ease-out 0.5s both;
        }

.property-showcase {
            width: 400px;
            height: 400px;
            border-radius: var(--border-radius);
            background: var(--gradient-luxury);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 8rem;
            color: white;
            box-shadow: var(--shadow-strong);
            position: relative;
            overflow: hidden;
        }

.property-showcase::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            animation: shimmer 3s infinite;
        }

@keyframes shimmer {
            0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
            100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
        }

@keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(40px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

@keyframes fadeInRight {
            from {
                opacity: 0;
                transform: translateX(40px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

.btn-custom {
            padding: 16px 35px;
            font-weight: 600;
            border-radius: 30px;
            letter-spacing: 0.3px;
            transition: all 0.3s ease;
            border: none;
            margin: 0 10px;
            text-decoration: none;
            display: inline-block;
            font-size: 1rem;
        }

.btn-primary-custom {
            background: var(--gradient-primary);
            color: white;
        }

.btn-primary-custom:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-medium);
            color: white;
        }

.btn-secondary-custom {
            background: transparent;
            color: var(--primary-blue);
            border: 2px solid var(--primary-blue);
        }

.btn-secondary-custom:hover {
            background: var(--primary-blue);
            color: white;
            transform: translateY(-3px);
        }

/* Section Styling */
        .section-padding {
            padding: 100px 0;
        }

.section-title {
            font-size: 3.5rem;
            font-weight: 800;
            margin-bottom: 1rem;
            color: var(--primary-blue);
            text-align: center;
            line-height: 1.2;
            letter-spacing: -1px;
        }

.section-subtitle {
            font-size: 1.2rem;
            color: var(--warm-gray);
            margin-bottom: 4rem;
            text-align: center;
            font-weight: 400;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

/* Properties Section */
        .properties-section {
            background: var(--light-silver);
        }

.property-filters {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-bottom: 3rem;
            flex-wrap: wrap;
        }

.filter-btn {
            background: white;
            color: var(--warm-gray);
            border: 2px solid var(--light-silver);
            padding: 12px 24px;
            border-radius: 25px;
            font-weight: 600;
            transition: all 0.3s ease;
            cursor: pointer;
        }

.filter-btn.active,
        .filter-btn:hover {
            background: var(--primary-blue);
            color: white;
            border-color: var(--primary-blue);
            transform: translateY(-2px);
        }

.properties-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2rem;
        }

.property-card {
            background: white;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow-soft);
            transition: all 0.3s ease;
            position: relative;
        }

.property-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-strong);
        }

.property-image {
            height: 250px;
            background: var(--gradient-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 4rem;
            color: white;
            position: relative;
            overflow: hidden;
        }

.property-card:nth-child(2) .property-image {
            background: var(--gradient-secondary);
        }

.property-card:nth-child(3) .property-image {
            background: var(--gradient-luxury);
        }

.property-card:nth-child(4) .property-image {
            background: var(--gradient-success);
        }

.property-card:nth-child(5) .property-image {
            background: linear-gradient(135deg, #E67E22 0%, #D35400 100%);
        }

.property-card:nth-child(6) .property-image {
            background: linear-gradient(135deg, #8E44AD 0%, #9B59B6 100%);
        }

.property-badge {
            position: absolute;
            top: 15px;
            left: 15px;
            background: var(--secondary-gold);
            color: white;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

.property-price {
            position: absolute;
            top: 15px;
            right: 15px;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-weight: 700;
            font-size: 1.1rem;
        }

.property-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: all 0.3s ease;
        }

.property-card:hover .property-overlay {
            opacity: 1;
        }

.property-btn {
            background: white;
            color: var(--primary-blue);
            padding: 12px 20px;
            border-radius: 25px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            margin: 0 5px;
        }

.property-btn:hover {
            background: var(--secondary-gold);
            color: white;
            transform: translateY(-2px);
        }

.property-content {
            padding: 2rem;
        }

.property-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-blue);
            margin-bottom: 0.5rem;
        }

.property-location {
            color: var(--warm-gray);
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
        }

.property-location i {
            margin-right: 8px;
            color: var(--accent-teal);
        }

.property-features {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

.property-feature {
            text-align: center;
            padding: 0.8rem;
            background: var(--light-silver);
            border-radius: 8px;
        }

.property-feature-icon {
            font-size: 1.2rem;
            color: var(--accent-teal);
            margin-bottom: 0.3rem;
        }

.property-feature-label {
            font-size: 0.8rem;
            color: var(--warm-gray);
            font-weight: 600;
        }

.property-feature-value {
            font-size: 1rem;
            color: var(--primary-blue);
            font-weight: 700;
        }

/* Services Section */
        .services-section {
            background: var(--pure-white);
        }

.services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

.service-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 2.5rem;
            box-shadow: var(--shadow-soft);
            transition: all 0.3s ease;
            border-top: 4px solid var(--primary-blue);
            text-align: center;
        }

.service-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-strong);
        }

.service-card:nth-child(2) {
            border-top-color: var(--secondary-gold);
        }

.service-card:nth-child(3) {
            border-top-color: var(--accent-teal);
        }

.service-card:nth-child(4) {
            border-top-color: var(--success-green);
        }

.service-icon {
            width: 80px;
            height: 80px;
            background: var(--gradient-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            font-size: 2.5rem;
            color: white;
        }

.service-card:nth-child(2) .service-icon {
            background: var(--gradient-secondary);
        }

.service-card:nth-child(3) .service-icon {
            background: linear-gradient(135deg, #16A085 0%, #1ABC9C 100%);
        }

.service-card:nth-child(4) .service-icon {
            background: var(--gradient-success);
        }

.service-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-blue);
            margin-bottom: 1rem;
        }

.service-description {
            color: var(--warm-gray);
            margin-bottom: 1.5rem;
            line-height: 1.6;
        }

.service-features {
            list-style: none;
            text-align: left;
        }

.service-features li {
            display: flex;
            align-items: center;
            margin-bottom: 0.8rem;
            color: var(--warm-gray);
            font-weight: 500;
        }

.service-features i {
            color: var(--accent-teal);
            margin-right: 10px;
            width: 16px;
        }

/* Tools Section */
        .tools-section {
            background: var(--light-silver);
        }

.tools-container {
            max-width: 800px;
            margin: 0 auto;
        }

.tool-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 2rem;
            box-shadow: var(--shadow-soft);
            margin-bottom: 2rem;
            transition: all 0.3s ease;
        }

.tool-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-medium);
        }

.tool-header {
            display: flex;
            align-items: center;
            margin-bottom: 1.5rem;
        }

.tool-icon {
            width: 60px;
            height: 60px;
            background: var(--gradient-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: white;
            margin-right: 1rem;
        }

.tool-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-blue);
        }

.tool-content {
            margin-bottom: 1.5rem;
        }

.form-group {
            margin-bottom: 1.5rem;
        }

.form-label {
            font-weight: 600;
            color: var(--primary-blue);
            margin-bottom: 0.5rem;
            display: block;
        }

.form-control {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid #E9ECEF;
            border-radius: 8px;
            font-size: 1rem;
            transition: all 0.3s ease;
        }

.form-control:focus {
            outline: none;
            border-color: var(--primary-blue);
            box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.1);
        }

.btn-calculate {
            background: var(--gradient-primary);
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 25px;
            font-weight: 600;
            transition: all 0.3s ease;
            cursor: pointer;
        }

.btn-calculate:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-medium);
        }

.result-display {
            background: var(--light-silver);
            padding: 1.5rem;
            border-radius: 12px;
            margin-top: 1rem;
            display: none;
        }

.result-display.show {
            display: block;
            animation: fadeInUp 0.5s ease-out;
        }

.result-title {
            font-weight: 700;
            color: var(--primary-blue);
            margin-bottom: 1rem;
        }

/* Contact Section */
        .contact-section {
            background: var(--gradient-luxury);
            color: white;
        }

.contact-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: start;
        }

.contact-info {
            padding: 2rem;
        }

.contact-title {
            font-size: 3rem;
            font-weight: 800;
            margin-bottom: 1.5rem;
            color: white;
        }

.contact-description {
            font-size: 1.1rem;
            margin-bottom: 2rem;
            opacity: 0.9;
            line-height: 1.7;
        }

.contact-methods {
            margin-bottom: 2rem;
        }

.contact-method {
            display: flex;
            align-items: center;
            margin-bottom: 1.5rem;
            padding: 1rem;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            transition: all 0.3s ease;
        }

.contact-method:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateX(10px);
        }

.contact-icon {
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 1rem;
            font-size: 1.2rem;
        }

.contact-form {
            background: rgba(255, 255, 255, 0.1);
            padding: 2.5rem;
            border-radius: var(--border-radius);
            backdrop-filter: blur(10px);
        }

.contact-form .form-control {
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(255, 255, 255, 0.2);
            color: white;
            backdrop-filter: blur(10px);
        }

.contact-form .form-control::placeholder {
            color: rgba(255, 255, 255, 0.6);
        }

.contact-form .form-control:focus {
            border-color: rgba(255, 255, 255, 0.5);
            box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.15);
        }

.contact-form .form-label {
            color: white;
        }

.btn-submit {
            background: white;
            color: var(--primary-blue);
            border: none;
            padding: 16px 40px;
            border-radius: 30px;
            font-weight: 600;
            font-size: 1rem;
            transition: all 0.3s ease;
            width: 100%;
            letter-spacing: 0.3px;
        }

.btn-submit:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-medium);
            background: var(--light-silver);
        }

/* Footer */
        .footer-section {
            background: #1A1A1A;
            color: white;
            padding: 60px 0 30px;
            text-align: center;
        }

.social-links {
            margin-bottom: 2rem;
        }

.social-links a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 50px;
            background: var(--gradient-primary);
            color: white;
            border-radius: 50%;
            margin: 0 10px;
            transition: all 0.3s ease;
            text-decoration: none;
        }

.social-links a:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-medium);
        }

/* Success Messages */
        .success-message {
            position: fixed;
            top: 100px;
            right: 30px;
            background: var(--gradient-success);
            color: white;
            padding: 16px 25px;
            border-radius: 12px;
            box-shadow: var(--shadow-medium);
            z-index: 1060;
            transform: translateX(400px);
            transition: transform 0.3s ease;
            font-weight: 600;
        }

.success-message.show {
            transform: translateX(0);
        }

/* Loading Animation */
        .loading-spinner {
            display: inline-block;
            width: 18px;
            height: 18px;
            border: 2px solid rgba(44, 62, 80, 0.3);
            border-radius: 50%;
            border-top-color: var(--primary-blue);
            animation: spin 1s ease-in-out infinite;
        }

@keyframes spin {
            to { transform: rotate(360deg); }
        }

/* Animations */
        .animate-on-scroll {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease;
        }

.animate-on-scroll.animated {
            opacity: 1;
            transform: translateY(0);
        }

/* Responsive Design */
        @media (max-width: 768px) {
            .hero-title {
                font-size: 3rem;
            }
            
            .section-title {
                font-size: 2.5rem;
            }
            
            .contact-content {
                grid-template-columns: 1fr;
                gap: 2rem;
            }
            
            .property-showcase {
                width: 300px;
                height: 300px;
                font-size: 6rem;
            }
            
            .hero-features {
                justify-content: center;
            }
            
            .property-features {
                grid-template-columns: 1fr;
            }
            
            .property-filters {
                justify-content: center;
            }
        }

JavaScript

// Smooth scrolling for navigation links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

// Animate elements on scroll
        function animateOnScroll() {
            const elements = document.querySelectorAll('.animate-on-scroll');
            elements.forEach(element => {
                const elementTop = element.getBoundingClientRect().top;
                const elementVisible = 150;
                
                if (elementTop < window.innerHeight - elementVisible) {
                    element.classList.add('animated');
                }
            });
        }

// Navbar background on scroll
        window.addEventListener('scroll', function() {
            const navbar = document.querySelector('.navbar-custom');
            if (window.scrollY > 50) {
                navbar.style.background = 'rgba(255, 255, 255, 0.98)';
                navbar.style.boxShadow = '0 8px 30px rgba(44, 62, 80, 0.15)';
            } else {
                navbar.style.background = 'rgba(255, 255, 255, 0.95)';
                navbar.style.boxShadow = '0 4px 20px rgba(44, 62, 80, 0.1)';
            }
            
            animateOnScroll();
        });

// Scroll to contact function
        function scrollToContact() {
            document.querySelector('#contact').scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }

// Filter properties
        function filterProperties(category) {
            const cards = document.querySelectorAll('.property-card');
            const buttons = document.querySelectorAll('.filter-btn');
            
            // Update active button
            buttons.forEach(btn => btn.classList.remove('active'));
            event.target.classList.add('active');
            
            // Filter cards
            cards.forEach(card => {
                if (category === 'all' || card.dataset.category === category) {
                    card.style.display = 'block';
                    setTimeout(() => {
                        card.style.opacity = '1';
                        card.style.transform = 'translateY(0)';
                    }, 100);
                } else {
                    card.style.opacity = '0';
                    card.style.transform = 'translateY(20px)';
                    setTimeout(() => {
                        card.style.display = 'none';
                    }, 300);
                }
            });
            
            showSuccessMessage(`Showing ${category === 'all' ? 'all' : category} properties`);
        }

// View property function
        function viewProperty(propertyName) {
            showSuccessMessage(`Opening ${propertyName} details...`);
            setTimeout(() => {
                alert(`? PROPERTY DETAILS: ${propertyName.toUpperCase()} ?\n\n? Complete Property Information:\n\n? PROPERTY OVERVIEW:\n• Detailed floor plans and layouts\n• High-resolution photo gallery\n• Virtual 3D tour available\n• Neighborhood information\n• School district details\n\n? FINANCIAL DETAILS:\n• Current market price\n• Property tax information\n• HOA fees (if applicable)\n• Utility cost estimates\n• Financing options available\n\n?️ PROPERTY FEATURES:\n• Year built and renovations\n• Architectural style\n• Interior finishes and upgrades\n• Outdoor spaces and landscaping\n• Parking and storage options\n\n? LOCATION BENEFITS:\n• Walkability score\n• Public transportation access\n• Shopping and dining nearby\n• Recreation and parks\n• Healthcare facilities\n\n? MARKET ANALYSIS:\n• Comparable sales (comps)\n• Price per square foot\n• Market trends in area\n• Investment potential\n• Appreciation history\n\n? INSPECTION REPORTS:\n• Professional inspection available\n• Structural condition\n• HVAC and electrical systems\n• Plumbing and water quality\n• Environmental assessments\n\n? VIEWING OPTIONS:\n• Schedule private showing\n• Virtual tour available\n• Open house dates\n• Video walkthrough\n• Drone footage of property\n\n? NEXT STEPS:\n• Contact listing agent\n• Request additional information\n• Schedule property viewing\n• Submit offer or inquiry\n• Get pre-approved for financing\n\n? EXPERT INSIGHTS:\n• Agent recommendations\n• Negotiation strategies\n• Market timing advice\n• Investment analysis\n• Closing process guidance\n\n? READY TO PROCEED?\nContact our expert agents for personalized assistance!\n\n? Email: info@primeproperties.com\n? Phone: +1 (555) PRIME-RE\n\n? Your dream home awaits!`);
            }, 1000);
        }

// Schedule viewing function
        function scheduleViewing(propertyName) {
            showSuccessMessage(`Scheduling tour for ${propertyName}...`);
            setTimeout(() => {
                alert(`? SCHEDULE PROPERTY TOUR: ${propertyName.toUpperCase()} ?\n\n? VIEWING OPTIONS AVAILABLE:\n\n⏰ AVAILABLE TIME SLOTS:\n• Morning: 9:00 AM - 12:00 PM\n• Afternoon: 1:00 PM - 5:00 PM\n• Evening: 6:00 PM - 8:00 PM\n• Weekend: Saturday & Sunday\n• Flexible scheduling available\n\n? TOUR TYPES:\n• Private showing (recommended)\n• Group viewing with other buyers\n• Virtual tour via video call\n• Self-guided tour with lockbox\n• Open house events\n\n? WHAT TO EXPECT:\n• Professional agent accompaniment\n• Detailed property walkthrough\n• Q&A session about the property\n• Neighborhood tour included\n• Market analysis discussion\n\n? PREPARATION CHECKLIST:\n• Bring valid ID\n• Pre-approval letter (if buying)\n• List of questions\n• Measuring tape (if needed)\n• Camera for photos (with permission)\n\n? TOUR HIGHLIGHTS:\n• All rooms and spaces\n• Storage areas and closets\n• Outdoor spaces and views\n• Parking and garage\n• Utility rooms and systems\n\n? EXPERT GUIDANCE:\n• Property condition assessment\n• Comparable market analysis\n• Negotiation strategy discussion\n• Financing options review\n• Next steps planning\n\n? TO SCHEDULE YOUR TOUR:\n• Call: +1 (555) PRIME-RE\n• Email: tours@primeproperties.com\n• Online booking: Available 24/7\n• Text: Quick response guaranteed\n\n? TOUR BENEFITS:\n• No obligation viewing\n• Expert market insights\n• Personalized recommendations\n• Immediate feedback\n• Priority access to new listings\n\n⚡ QUICK BOOKING:\n• Same-day tours available\n• Emergency weekend showings\n• Early morning appointments\n• Late evening viewings\n• Holiday scheduling options\n\n? SPECIAL SERVICES:\n• Buyer representation\n• Investment analysis\n• Relocation assistance\n• First-time buyer guidance\n• Luxury property specialists\n\n? STAY CONNECTED:\n• Tour confirmation via SMS\n• Reminder notifications\n• Follow-up consultation\n• Additional property suggestions\n• Market update alerts\n\n? Ready to see your future home?\nLet's schedule your personalized tour today!\n\n? Contact: tours@primeproperties.com\n? Call: +1 (555) PRIME-RE`);
            }, 1000);
        }

// Mortgage calculator
        function calculateMortgage() {
            const homePrice = parseFloat(document.getElementById('homePrice').value);
            const downPayment = parseFloat(document.getElementById('downPayment').value);
            const interestRate = parseFloat(document.getElementById('interestRate').value);
            const loanTerm = parseInt(document.getElementById('loanTerm').value);

if (!homePrice || !downPayment || !interestRate || !loanTerm) {
                alert('Please fill in all fields to calculate mortgage payment.');
                return;
            }

const loanAmount = homePrice - downPayment;
            const monthlyRate = interestRate / 100 / 12;
            const numPayments = loanTerm * 12;

const monthlyPayment = loanAmount * (monthlyRate * Math.pow(1 + monthlyRate, numPayments)) / (Math.pow(1 + monthlyRate, numPayments) - 1);
            const totalPayment = monthlyPayment * numPayments;
            const totalInterest = totalPayment - loanAmount;

// ROI calculator
        function calculateROI() {
            const purchasePrice = parseFloat(document.getElementById('purchasePrice').value);
            const monthlyRent = parseFloat(document.getElementById('monthlyRent').value);
            const monthlyExpenses = parseFloat(document.getElementById('monthlyExpenses').value);
            const initialInvestment = parseFloat(document.getElementById('initialInvestment').value);

if (!purchasePrice || !monthlyRent || !monthlyExpenses || !initialInvestment) {
                alert('Please fill in all fields to calculate ROI.');
                return;
            }

const annualRent = monthlyRent * 12;
            const annualExpenses = monthlyExpenses * 12;
            const netAnnualIncome = annualRent - annualExpenses;
            const roi = (netAnnualIncome / initialInvestment) * 100;
            const capRate = (netAnnualIncome / purchasePrice) * 100;
            const cashFlow = monthlyRent - monthlyExpenses;

// Affordability calculator
        function calculateAffordability() {
            const annualIncome = parseFloat(document.getElementById('annualIncome').value);
            const monthlyDebts = parseFloat(document.getElementById('monthlyDebts').value);
            const downPayment = parseFloat(document.getElementById('availableDownPayment').value);
            const interestRate = parseFloat(document.getElementById('affordabilityRate').value);

if (!annualIncome || !downPayment || !interestRate) {
                alert('Please fill in required fields to calculate affordability.');
                return;
            }

const monthlyIncome = annualIncome / 12;
            const maxMonthlyPayment = monthlyIncome * 0.28; // 28% rule
            const maxTotalDebt = monthlyIncome * 0.36; // 36% rule
            const availableForHousing = maxTotalDebt - (monthlyDebts || 0);
            const conservativePayment = Math.min(maxMonthlyPayment, availableForHousing);

// Calculate max loan amount
            const monthlyRate = interestRate / 100 / 12;
            const numPayments = 30 * 12; // 30 year loan
            const maxLoanAmount = conservativePayment * (Math.pow(1 + monthlyRate, numPayments) - 1) / (monthlyRate * Math.pow(1 + monthlyRate, numPayments));
            const maxHomePrice = maxLoanAmount + downPayment;

// Open social media
        function openSocial(platform) {
            showSuccessMessage(`Opening ${platform} page...`);
            setTimeout(() => {
                alert(`? SOCIAL MEDIA: ${platform.toUpperCase()} ?\n\n? Follow PrimeProperties on ${platform}:\n\n? REAL ESTATE CONTENT:\n• Daily property listings\n• Market trend updates\n• Home buying/selling tips\n• Investment opportunities\n• Success stories from clients\n\n? MARKET INSIGHTS:\n• Local market analysis\n• Price trend reports\n• Neighborhood spotlights\n• Investment hotspots\n• Economic impact updates\n\n? EDUCATIONAL CONTENT:\n• First-time buyer guides\n• Selling preparation tips\n• Investment strategies\n• Financing options explained\n• Legal aspects of real estate\n\n? COMMUNITY FEATURES:\n• Client testimonials\n• Agent spotlights\n• Q&A with experts\n• Live market discussions\n• Virtual property tours\n\n? PLATFORM-SPECIFIC CONTENT:\n${platform === 'Facebook' ? '• Detailed market discussions\n• Community groups\n• Event announcements\n• Live Q&A sessions' : 
  platform === 'Instagram' ? '• Stunning property photography\n• Behind-the-scenes content\n• Quick tip videos\n• Stories with daily updates' :
  platform === 'LinkedIn' ? '• Professional market analysis\n• Industry networking\n• Career opportunities\n• Business insights' :
  platform === 'Twitter' ? '• Real-time market updates\n• Quick tips and advice\n• Industry news\n• Live event coverage' :
  '• Property tour videos\n• Expert interviews\n• Market analysis deep dives\n• Educational webinars'}\n\n? EXCLUSIVE BENEFITS:\n• Early access to new listings\n• Private market reports\n• Exclusive investment opportunities\n• Direct agent communication\n• Special follower promotions\n\n? SOCIAL ENGAGEMENT:\n• Comment for quick responses\n• DM for private consultations\n• Share your success stories\n• Tag us in property photos\n• Join our community discussions\n\n? FOLLOWER PERKS:\n• Market alerts and notifications\n• Exclusive content access\n• Priority customer service\n• Special event invitations\n• Referral program benefits\n\n? STAY INFORMED:\n• Weekly market summaries\n• Monthly trend reports\n• Quarterly investment outlooks\n• Annual market forecasts\n• Breaking real estate news\n\n? NOTIFICATION SETTINGS:\n• New listing alerts\n• Price change notifications\n• Market milestone updates\n• Educational content releases\n• Live event reminders\n\n? JOIN OUR COMMUNITY:\n• 50,000+ active followers\n• Daily engaging content\n• Expert-verified information\n• Supportive real estate community\n• Professional networking opportunities\n\n? Connect with us today!\nFollow @PrimeProperties for daily real estate insights!`);
            }, 1000);
        }

// Contact form submission
        document.getElementById('contactForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const submitBtn = this.querySelector('.btn-submit');
            const originalText = submitBtn.innerHTML;
            
            submitBtn.innerHTML = '<span class="loading-spinner"></span> Processing Your Request...';
            submitBtn.disabled = true;
            
            setTimeout(() => {
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;
                this.reset();
                
                showSuccessMessage('Welcome to PrimeProperties family!');
                
                setTimeout(() => {
                    alert('? WELCOME TO PRIMEPROPERTIES! ?\n\n✅ Your real estate journey begins now!\n\n? What happens next:\n• Welcome package sent to your email\n• Personal real estate consultant assigned\n• Market analysis for your area\n• Access to exclusive listings\n\n? YOUR WELCOME PACKAGE INCLUDES:\n• Comprehensive Buyer\'s/Seller\'s Guide\n• Local Market Analysis Report\n• Financing Options Overview\n• Neighborhood Comparison Charts\n• Investment Opportunity Alerts\n• Direct Agent Contact Information\n\n? IMMEDIATE SUPPORT:\n• Email: info@primeproperties.com\n• Phone: +1 (555) PRIME-RE\n• Response time: Within 2 hours\n• Expert consultation: Available 7 days/week\n\n? PERSONALIZED SERVICES:\n• Custom property search\n• Market value assessments\n• Investment analysis\n• Negotiation support\n• Closing coordination\n\n? MARKET INSIGHTS:\n• Real-time property alerts\n• Price trend analysis\n• Neighborhood reports\n• Investment opportunities\n• Market timing advice\n\n?️ TOOLS & RESOURCES:\n• Mortgage calculators\n• ROI analyzers\n• Affordability assessments\n• Market comparison tools\n• Investment trackers\n\n? FINANCIAL GUIDANCE:\n• Pre-approval assistance\n• Lender recommendations\n• Down payment strategies\n• Investment financing\n• Tax benefit analysis\n\n? SUCCESS METRICS:\n• 98% client satisfaction rate\n• Average 15 days to close\n• $50M+ in annual sales\n• 500+ happy families\n• 95% referral rate\n\n? EXCLUSIVE BENEFITS:\n• VIP property previews\n• Off-market opportunities\n• Priority scheduling\n• Expert negotiation\n• Concierge services\n\n? STAY CONNECTED:\n• Mobile app access\n• SMS property alerts\n• Market notifications\n• Appointment reminders\n• Progress updates\n\n? EXPERT TEAM:\n• Licensed real estate agents\n• Market analysis specialists\n• Investment advisors\n• Mortgage consultants\n• Legal support network\n\n? AWARD-WINNING SERVICE:\n• Top 1% of agents nationally\n• Customer service excellence\n• Industry recognition\n• Community involvement\n• Ethical business practices\n\n? SPECIAL OFFERS:\n• Free market analysis\n• Complimentary home staging consultation\n• No upfront fees for buyers\n• Competitive commission rates\n• Referral rewards program\n\n? COMPREHENSIVE COVERAGE:\n• Residential properties\n• Commercial real estate\n• Investment opportunities\n• Luxury homes\n• First-time buyer programs\n\n? READY TO START?\nYour dedicated agent will contact you within 24 hours to discuss your specific needs and goals!\n\n? Welcome to the PrimeProperties family!\nWhere your real estate dreams become reality.\n\n? Contact: info@primeproperties.com\n? Call: +1 (555) PRIME-RE');
                }, 1000);
            }, 2000);
        });

// Show success message
        function showSuccessMessage(message) {
            const successMessage = document.getElementById('successMessage');
            const successText = document.getElementById('successText');
            successText.textContent = message;
            successMessage.classList.add('show');
            
            setTimeout(() => {
                successMessage.classList.remove('show');
            }, 3000);
        }

// Initialize animations on page load
        document.addEventListener('DOMContentLoaded', function() {
            animateOnScroll();
        });

Luxury Real Estate Preview

Download Options