BelPan Real Estate

BelPan Real Estate — AI-to-WordPress Clone with Property Pages

Overview

BelPan Real Estate is a Panama-focused real estate firm specializing in investment residency and property development. The project involved precisely recreating an existing AI-generated one-page real estate website in WordPress — preserving the original design almost exactly while rebranding it under the new "BelPan Real Estate" name and logo, and expanding it into a homepage plus 6 dedicated property and development pages, each with PDF brochure attachments.

The Challenge

The brief called for an unusually precise constraint: replicate an existing AI-built site as closely as possible rather than redesigning it, while migrating it to a fully manageable WordPress platform. Key challenges included:

• Recreating the visual design, layout, and content structure of an AI-generated Netlify site almost exactly in WordPress, rather than reinterpreting it
• Rebranding the cloned design with a new logo and the "BelPan Real Estate" name while keeping everything else visually identical
• Building 6 individual property/development pages — Bosco, Oceana, Ipanema, Armonía, Alive, and Euphoria — each replicating its corresponding reference page precisely, in the same order
• Reviewing and correcting grammar and spelling issues found in the original content, including a misspelling of "Phases" as "Fases" on several pages
• Uploading and attaching the correct PDF brochures to each property page, matching the original site's document structure
• Implementing a custom scroll-triggered header transformation with logo resizing, transparency, and backdrop blur effects

Scope of Work

The site was built across 7 pages for this phase, with more planned for the future:

• Home — One-page scroll layout matching the reference site, with sections for Why Panama, Investment Residency, Properties, Developments, Services, and Contact accessible via anchor navigation
• Bosco, Oceana, Ipanema, Armonía, Alive, Euphoria — Six individual property/development detail pages

Navigation labels were adjusted per client request — "Portfolio" relabeled to "Properties," "Projects" relabeled to "Developments," and "Legal Support" relabeled to "Services." The footer's "Catalog" column was renamed "Navigation" with a full menu list matching the header, and "Projects" was renamed "Developments" in the footer property list.

Development Process

Environment Setup & Asset Preparation

Required plugins were installed and configured including Elementor, Pro Elements, and JegKit. Core pages were created for the homepage and all 6 property pages. All provided media assets, including images and PDF brochure files, were uploaded and organized. Elementor global settings were configured for colors, fonts, typography, layout, navigation menus, and site identity using the new BelPan Real Estate branding and logo.

Homepage Recreation

The homepage was rebuilt as a one-page scroll layout matching the reference Netlify site almost exactly, with extensive custom CSS used to replicate specific styling details not achievable through default Elementor controls alone. The homepage was tested and refined for full responsiveness across desktop, tablet, and mobile devices. Panama imagery provided by the client was made available for use in the homepage slider background.

Property & Development Pages

Each of the 6 property pages — Bosco, Oceana, Ipanema, Armonía, Alive, and Euphoria — was built to replicate its corresponding reference page precisely, maintaining the same content order and structure as the original site. Responsive hero sections were implemented for each project page, with custom styling and layout enhancements applied throughout to maintain visual consistency across all 6 pages. All pages were completed with full responsiveness across desktop, tablet, and mobile devices. PDF brochures corresponding to each property (such as the Bosco project's Residenza Palazzo and Avanti Torre documents) were uploaded and attached matching the reference site's document structure. Grammar and spelling were reviewed across all pages, correcting issues such as "Fases" back to the correct "Phases."

Header Scroll Behavior

Custom JavaScript was added to detect the page scroll state and dynamically apply a "scrolled" class to the header. Corresponding custom CSS was implemented for the scrolled header state — including a reduced logo size, transparent background, dark overlay, and backdrop blur effect — enhancing the visual experience and header behavior during page scrolling.

Key Features

• AI-to-WordPress Clone — Precise recreation of an existing AI-generated Netlify site in WordPress
• Full Rebrand — New logo and "BelPan Real Estate" name applied while preserving the original visual design
• 6 Property/Development Pages — Bosco, Oceana, Ipanema, Armonía, Alive, and Euphoria, each matching their reference page precisely
• PDF Brochure Integration — Property-specific PDF documents uploaded and attached to each page
• Content Correction — Grammar and spelling review across all pages, including a recurring misspelling fix
• Custom Scroll Header Effect — JavaScript-driven scrolled state with logo resize, transparency, and backdrop blur
• Updated Navigation Labels — Portfolio, Projects, and Legal Support relabeled to Properties, Developments, and Services
• Full Responsiveness — Homepage and all 6 property pages tested across desktop, tablet, and mobile

Result

A precisely cloned and rebranded WordPress website for BelPan Real Estate — recreating an AI-generated reference site almost exactly with Elementor and Pro Elements, complete with 6 fully replicated property/development pages, attached PDF brochures, corrected content, and a polished custom scroll header effect, delivering a manageable WordPress platform ready for future page expansion.