UI/UX improvements: gallery autoplay, clickable cards, footer legal section

Property details page:
- Move address to header above gallery
- Add property type badges (blue residential, red commercial)
- Gallery autoplay with play/pause button, 5-second interval
- Fade transitions for autoplay, slide transitions for swipe
- Thumbnail navigation with sync
- Swipe support in gallery and lightbox
- Widget titles: 18px Times New Roman bold
- Remove breadcrumbs

Layout and styling:
- Container width: 1400px
- Contact page map 50% taller (375px)
- Contact info labels: Times New Roman 16px
- Agent photo backgrounds solid black
- CTA accent button hover: black text

Clickable components:
- Service cards fully clickable with stretched links
- Resource cards fully clickable with stretched links
- Addresses link to Google Maps (contact page, footer)

Footer updates:
- Add Send Us a Message link with paper airplane icon
- Replace credentials with legal section
- Privacy Policy, Fair Housing, MLS Disclaimer, Brokerage Disclosure links
- Credits: Web Design by HansonXyz

Other:
- Install Classic Editor plugin

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Hanson.xyz Dev
2025-12-01 00:24:34 -06:00
parent 837b3219fb
commit cbeca7c6d8
42 changed files with 4593 additions and 668 deletions
+14 -24
View File
@@ -52,18 +52,12 @@ while (have_posts()) :
?>
<main id="primary" class="site-main single-property-main">
<!-- Breadcrumbs -->
<nav class="breadcrumbs" aria-label="Breadcrumb">
<div class="container">
<ol class="breadcrumb-list">
<li><a href="<?php echo esc_url(home_url('/')); ?>">Home</a></li>
<li><a href="<?php echo esc_url(get_post_type_archive_link('property')); ?>">Properties</a></li>
<li aria-current="page"><?php echo esc_html($street_address ?: get_the_title()); ?></li>
</ol>
</div>
</nav>
<div class="container">
<!-- Property Address Header -->
<header class="property-address-header">
<h1 class="property-address-title"><?php echo esc_html($full_address ?: get_the_title()); ?></h1>
</header>
<div class="single-property-layout">
<!-- Main Content -->
<div class="single-property-content">
@@ -199,23 +193,19 @@ while (have_posts()) :
<!-- Property Header -->
<div class="sidebar-widget property-header-widget">
<div class="property-header-top">
<?php if ($type) : ?>
<?php
$type_slug = sanitize_title($type);
$type_class = 'badge-type-' . $type_slug;
?>
<span class="badge <?php echo esc_attr($type_class); ?>"><?php echo esc_html($type); ?></span>
<?php endif; ?>
<?php if ($status) : ?>
<span class="badge <?php echo esc_attr($status_class); ?>"><?php echo esc_html($status); ?></span>
<?php endif; ?>
<?php if ($type) : ?>
<span class="property-type"><?php echo esc_html($type); ?></span>
<?php endif; ?>
</div>
<h1 class="property-title"><?php echo esc_html(homeproz_format_price($price)); ?></h1>
<p class="property-address">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
<circle cx="12" cy="10" r="3"/>
</svg>
<?php echo esc_html($full_address); ?>
</p>
<div class="property-title"><?php echo esc_html(homeproz_format_price($price)); ?></div>
<?php if ($mls_number) : ?>
<p class="property-mls">MLS# <?php echo esc_html($mls_number); ?></p>
@@ -224,7 +214,7 @@ while (have_posts()) :
<!-- Property Documents -->
<div class="sidebar-widget property-documents-widget">
<h3 class="widget-title">Property Documents</h3>
<h3 class="widget-title">Property Documents (SAMPLE)</h3>
<?php if ($property_documents && is_array($property_documents) && !empty($property_documents)) : ?>
<div class="sidebar-documents-list">
<?php foreach ($property_documents as $doc) :