Agent Portal Guide

Welcome to the PropVista real estate platform. This guide will walk you through managing your listings and agency brand across the 12-page suite.

Getting Started

1. Extract the full PropVista package.
2. Open the primary folder in your code editor.
3. Navigate to index.html to view the interactive map search.

File Structure

/zoner-pro-realestate/
├── index.html              # Homepage & Map
├── pages/                  # Inner Page Collection
├── css/variables.css       # Core Brand Tokens
└── js/main.js              # Leaflet & UI Logic

Section Editing

Property Card Listing

Update property details in the .property-card components found in index.html and listing pages.

<div class="property-card">
    <h4>Property Villa</h4>
    <div class="property-price">$850,000</div>
</div>

Agent Directories

Manage your referral network in pages/agents.html by duplicating the .agent-card blocks.

Map Configuration

Markers and popup descriptions are managed in js/main.js.

const properties = [
    {
        lat: 40.7128,
        lng: -74.0060,
        title: "Modern Loft"
    }
];

Theme & Styling

Rebranding Your Agency

Edit the core design tokens in variables.css for instant site-wide updates.

:root {
    --color-primary: #1396e2; /* Agency Blue */
    --color-accent: #8cc63f;  /* Success Green */
}

JavaScript Logic

The interactive elements, including search filters and property galleries, are powered by main.js and the No-Framework logic system.

SEO & Optimization

For better local real estate search visibility, ensure every property detail page has a unique address in the <title> tag.

Deployment

PropVista is a static suite. Deploy the files to any standard web server or managed static host.