Implement lower-priority UX enhancements

- Add subtle noise texture overlay for luxury feel (body::before)
- Optimize mobile homepage: service cards 2-up layout, reduced padding/sizes
- Add agent contact details section above gallery/listings on profile pages
- Create Join Our Team recruitment page with benefits grid and team preview
- Enhance Buyers/Sellers guide cards with visual section, gradient backgrounds

🤖 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-16 13:45:46 -06:00
parent 0487bd1dcf
commit cf181d01b3
10 changed files with 779 additions and 45 deletions
+11
View File
@@ -1,4 +1,7 @@
{"id":"html-09x","title":"Mobile homepage optimization - compact service cards","description":"","status":"closed","priority":2,"issue_type":"feature","created_at":"2025-12-16T13:32:41.210909563-06:00","updated_at":"2025-12-16T13:36:52.730274921-06:00","closed_at":"2025-12-16T13:36:52.730274921-06:00","close_reason":"Optimized service cards for mobile: 2-up grid layout, reduced padding/margins, smaller icons/text/buttons, faster scroll to listings"}
{"id":"html-117","title":"Filter MLS queries to MN and IA only","description":"","status":"closed","priority":2,"issue_type":"feature","created_at":"2025-12-16T11:53:08.470255883-06:00","updated_at":"2025-12-16T12:45:04.808441903-06:00","closed_at":"2025-12-16T12:45:04.808441903-06:00","close_reason":"State filter implemented for all MLS query methods (get_properties, get_distinct_cities, get_distinct_counties, get_count, has_data, get_property_types, get_price_range). Added MLS_ALLOWED_STATES constant."}
{"id":"html-1dx","title":"Join Our Team recruitment page","description":"","status":"closed","priority":2,"issue_type":"feature","created_at":"2025-12-16T13:32:51.597191814-06:00","updated_at":"2025-12-16T13:41:24.272925049-06:00","closed_at":"2025-12-16T13:41:24.272925049-06:00","close_reason":"Created page-join.php template with benefits grid and team preview section. Added styles and created WordPress page at /join/"}
{"id":"html-1ok","title":"Texture/luxury aesthetic for dark backgrounds","description":"","status":"closed","priority":2,"issue_type":"feature","created_at":"2025-12-16T13:32:36.012009466-06:00","updated_at":"2025-12-16T13:35:18.541240263-06:00","closed_at":"2025-12-16T13:35:18.541240263-06:00","close_reason":"Added subtle noise texture overlay to body (3% opacity, fixed position, SVG fractal noise pattern) for luxury aesthetic"}
{"id":"html-2fg","title":"Update office hours in footer","description":"","status":"closed","priority":2,"issue_type":"task","created_at":"2025-12-16T11:53:03.244743372-06:00","updated_at":"2025-12-16T11:54:52.108263115-06:00","closed_at":"2025-12-16T11:54:52.108263115-06:00","close_reason":"Updated office hours to Mon-Fri 9am-4pm, Sat/Sun By Appointment"}
{"id":"html-2fp","title":"Separate Residential and Commercial listings on homepage","description":"","status":"closed","priority":1,"issue_type":"task","created_at":"2025-11-30T02:24:09.984594683-06:00","updated_at":"2025-11-30T02:33:12.32537052-06:00","closed_at":"2025-11-30T02:33:12.32537052-06:00","close_reason":"Separated Featured Homes and Commercial/Land into distinct homepage sections"}
{"id":"html-2kf","title":"Multi-recipient email routing for contact form","description":"","status":"closed","priority":2,"issue_type":"feature","created_at":"2025-12-16T13:11:50.988722809-06:00","updated_at":"2025-12-16T13:19:40.448106043-06:00","closed_at":"2025-12-16T13:19:40.448106043-06:00","close_reason":"Configured multi-recipient email: Primary mail to office@ with CC to info@. Enabled Mail 2 confirmation receipt to sender. For agent-specific routing, office staff forwards as needed."}
@@ -7,7 +10,10 @@
{"id":"html-4q8","title":"MLS by HansonXyz Plugin - Phase 6: Admin Interface","description":"Settings page under Settings menu, API token configuration, sync status display, manual sync triggers","status":"closed","priority":2,"issue_type":"task","created_at":"2025-12-14T21:02:50.276941526-06:00","updated_at":"2025-12-14T21:21:56.543615901-06:00","closed_at":"2025-12-14T21:21:56.543615901-06:00","dependencies":[{"issue_id":"html-4q8","depends_on_id":"html-3fb","type":"blocks","created_at":"2025-12-14T21:04:10.388690618-06:00","created_by":"unknown"}]}
{"id":"html-4za","title":"MLS by HansonXyz Plugin - Phase 2: API Client","description":"API Client class with auth, gzip, error handling. Rate Limiter class. CLI test commands (wp mls test connection/auth)","status":"closed","priority":2,"issue_type":"task","created_at":"2025-12-14T21:02:29.352944416-06:00","updated_at":"2025-12-14T21:21:36.854872754-06:00","closed_at":"2025-12-14T21:21:36.854872754-06:00","dependencies":[{"issue_id":"html-4za","depends_on_id":"html-ha4","type":"blocks","created_at":"2025-12-14T21:03:50.090841814-06:00","created_by":"unknown"}]}
{"id":"html-5bw","title":"Add service cards section (Buy/Rent/Sell) to homepage","description":"","status":"closed","priority":1,"issue_type":"task","created_at":"2025-11-30T02:24:04.779591681-06:00","updated_at":"2025-11-30T02:32:12.064316318-06:00","closed_at":"2025-11-30T02:32:12.064316318-06:00","close_reason":"Added service cards section with Buy/Rent/Sell options"}
{"id":"html-5bx","title":"Expanded team members - broker, marketing, staff","description":"","status":"closed","priority":2,"issue_type":"feature","created_at":"2025-12-16T13:33:21.400531789-06:00","updated_at":"2025-12-16T13:34:13.313617077-06:00","closed_at":"2025-12-16T13:34:13.313617077-06:00","close_reason":"BLOCKED: Needs client to provide info on broker, marketing team, officers, production staff"}
{"id":"html-5j7","title":"MLS by HansonXyz Plugin - Phase 3: Sync Engine","description":"Sync Engine class, full sync with pagination, incremental sync with ModificationTimestamp, sync state tracking for resume, CLI sync commands","status":"closed","priority":2,"issue_type":"task","created_at":"2025-12-14T21:02:34.581442915-06:00","updated_at":"2025-12-14T21:21:46.933578124-06:00","closed_at":"2025-12-14T21:21:46.933578124-06:00","dependencies":[{"issue_id":"html-5j7","depends_on_id":"html-4za","type":"blocks","created_at":"2025-12-14T21:03:55.163778736-06:00","created_by":"unknown"}]}
{"id":"html-717","title":"Buyers/Sellers guide visual enhancement","description":"","status":"closed","priority":2,"issue_type":"feature","created_at":"2025-12-16T13:32:56.801054688-06:00","updated_at":"2025-12-16T13:43:10.494762577-06:00","closed_at":"2025-12-16T13:43:10.494762577-06:00","close_reason":"Enhanced Buyers/Sellers guide cards with visual section, gradient backgrounds, badges, larger icons, and topic highlights list. Split layout on desktop, stacked on mobile."}
{"id":"html-71p","title":"Additional partner/association logos on About page","description":"","status":"closed","priority":2,"issue_type":"feature","created_at":"2025-12-16T13:33:37.025833273-06:00","updated_at":"2025-12-16T13:34:29.080770121-06:00","closed_at":"2025-12-16T13:34:29.080770121-06:00","close_reason":"BLOCKED: Needs client to provide partner/association logo files"}
{"id":"html-76m","title":"Remove Bridge Realty text from site","description":"","status":"closed","priority":2,"issue_type":"bug","created_at":"2025-12-16T11:52:42.455604014-06:00","updated_at":"2025-12-16T11:53:51.821637756-06:00","closed_at":"2025-12-16T11:53:51.821637756-06:00","close_reason":"Removed Bridge Realty text from page-about.php, replaced with correct LandProz DBA info"}
{"id":"html-7jz","title":"Add Communities section to navigation and create community pages structure","description":"","status":"closed","priority":2,"issue_type":"task","created_at":"2025-11-30T02:24:15.204568226-06:00","updated_at":"2025-11-30T02:43:22.075934867-06:00","closed_at":"2025-11-30T02:43:22.075934867-06:00","close_reason":"Created Communities landing page, community page template, 3 community pages, and added to navigation"}
{"id":"html-7lr","title":"Property type showcase boxes on homepage","description":"","status":"closed","priority":2,"issue_type":"feature","created_at":"2025-12-16T13:11:45.764664597-06:00","updated_at":"2025-12-16T13:18:27.291310612-06:00","closed_at":"2025-12-16T13:18:27.291310612-06:00","close_reason":"Created property type showcase boxes section on homepage with 5 categories: Residential, Land, Commercial, Farm, Multi-Family. Each box shows icon, description, count, and links to filtered property archive."}
@@ -15,13 +21,18 @@
{"id":"html-bfd","title":"Update DESIGN-DOCUMENT.md and IMPLEMENTATION-PLAN.md with RHR structural changes","description":"","status":"closed","priority":0,"issue_type":"task","created_at":"2025-11-30T02:24:40.504170573-06:00","updated_at":"2025-11-30T02:28:50.551587345-06:00","closed_at":"2025-11-30T02:28:50.551587345-06:00","close_reason":"Updated DESIGN-DOCUMENT.md and IMPLEMENTATION-PLAN.md with RHR structural changes"}
{"id":"html-clv","title":"Analyze Robert Hoffman Realty site structure for HomeProz redesign","description":"","status":"closed","priority":2,"issue_type":"task","created_at":"2025-11-30T02:11:43.511290155-06:00","updated_at":"2025-11-30T02:21:47.665340956-06:00","closed_at":"2025-11-30T02:21:47.665340956-06:00","close_reason":"Completed site analysis comparing RHR to HomeProz design"}
{"id":"html-cpd","title":"Add map view to property listings archive page","description":"","status":"closed","priority":2,"issue_type":"task","created_at":"2025-11-30T02:24:20.442584472-06:00","updated_at":"2025-11-30T02:48:58.865691376-06:00","closed_at":"2025-11-30T02:48:58.865691376-06:00","close_reason":"Added map view to property archive with Grid/Map toggle using Leaflet, city-based property markers, and split layout"}
{"id":"html-guj","title":"Community involvement section with photos","description":"","status":"closed","priority":2,"issue_type":"feature","created_at":"2025-12-16T13:33:26.592605412-06:00","updated_at":"2025-12-16T13:34:18.583710913-06:00","closed_at":"2025-12-16T13:34:18.583710913-06:00","close_reason":"BLOCKED: Needs client to provide community event photos (Arcadian Bank, Freeborn Co Fair, etc.)"}
{"id":"html-ha4","title":"MLS by HansonXyz Plugin - Phase 1: Foundation","description":"Create plugin structure, main file, activator/deactivator, database schema with dbDelta, options handling, logger class","status":"closed","priority":2,"issue_type":"task","created_at":"2025-12-14T21:02:24.104655824-06:00","updated_at":"2025-12-14T21:21:36.848348568-06:00","closed_at":"2025-12-14T21:21:36.848348568-06:00"}
{"id":"html-k37","title":"MLS by HansonXyz Plugin - Phase 8: Documentation \u0026 Testing","description":"CLAUDE.md, API.md, USAGE.md documentation. Full CLI test sequence. Final verification.","status":"closed","priority":2,"issue_type":"task","created_at":"2025-12-14T21:03:00.728802408-06:00","updated_at":"2025-12-14T21:22:16.755253009-06:00","closed_at":"2025-12-14T21:22:16.755253009-06:00","dependencies":[{"issue_id":"html-k37","depends_on_id":"html-x03","type":"blocks","created_at":"2025-12-14T21:04:20.543019628-06:00","created_by":"unknown"}]}
{"id":"html-lci","title":"Scrape homeprozrealestate.com property listings and import to WordPress","description":"","status":"closed","priority":1,"issue_type":"task","created_at":"2025-11-30T17:37:41.948645374-06:00","updated_at":"2025-11-30T18:06:33.347607321-06:00","closed_at":"2025-11-30T18:06:33.347607321-06:00","close_reason":"Imported 5 properties with images, ACF fields, and external listing URLs"}
{"id":"html-m69","title":"Update service area to MN and IA","description":"","status":"closed","priority":2,"issue_type":"task","created_at":"2025-12-16T11:52:58.02566345-06:00","updated_at":"2025-12-16T11:54:57.284399486-06:00","closed_at":"2025-12-16T11:54:57.284399486-06:00","close_reason":"Updated footer tagline to include 'Minnesota and Iowa'"}
{"id":"html-m9q","title":"Agent biographies and personal photos","description":"","status":"closed","priority":2,"issue_type":"feature","created_at":"2025-12-16T13:33:16.193330034-06:00","updated_at":"2025-12-16T13:34:08.075722783-06:00","closed_at":"2025-12-16T13:34:08.075722783-06:00","close_reason":"BLOCKED: Needs each agent to provide their biography and personal photos"}
{"id":"html-p2h","title":"Property inquiry form auto-population","description":"","status":"closed","priority":2,"issue_type":"feature","created_at":"2025-12-16T11:52:47.656766182-06:00","updated_at":"2025-12-16T12:47:46.436550996-06:00","closed_at":"2025-12-16T12:47:46.436550996-06:00","close_reason":"Implemented property inquiry auto-population: CF7 hidden field, read-only display box, contact link passes property and URL params, office@homeprozrealestate.com recipient"}
{"id":"html-pjm","title":"LandProz 82-year history content on About page","description":"","status":"closed","priority":2,"issue_type":"feature","created_at":"2025-12-16T13:33:31.801872643-06:00","updated_at":"2025-12-16T13:34:23.830468235-06:00","closed_at":"2025-12-16T13:34:23.830468235-06:00","close_reason":"BLOCKED: Needs client to provide LandProz 82-year history content/story"}
{"id":"html-sbh","title":"MLS by HansonXyz Plugin - Phase 4: Media Handler","description":"Media Handler class, download and organize media files, PhotosChangeTimestamp detection, CLI media commands","status":"closed","priority":2,"issue_type":"task","created_at":"2025-12-14T21:02:39.793324508-06:00","updated_at":"2025-12-14T21:21:46.94012466-06:00","closed_at":"2025-12-14T21:21:46.94012466-06:00","dependencies":[{"issue_id":"html-sbh","depends_on_id":"html-5j7","type":"blocks","created_at":"2025-12-14T21:04:00.24472923-06:00","created_by":"unknown"}]}
{"id":"html-t8u","title":"Add Resources section to navigation and create resource pages","description":"","status":"closed","priority":2,"issue_type":"task","created_at":"2025-11-30T02:24:25.662824938-06:00","updated_at":"2025-11-30T02:45:31.13972652-06:00","closed_at":"2025-11-30T02:45:31.13972652-06:00","close_reason":"Created Resources landing page, resource page template, Buyer's Guide, Seller's Guide, and added to navigation"}
{"id":"html-un2","title":"4K stock images for hero sections","description":"","status":"closed","priority":2,"issue_type":"feature","created_at":"2025-12-16T13:33:47.098825564-06:00","updated_at":"2025-12-16T13:34:02.874626458-06:00","closed_at":"2025-12-16T13:34:02.874626458-06:00","close_reason":"BLOCKED: Needs client to approve and purchase stock images"}
{"id":"html-v2x","title":"Agent contact info above listings on profile","description":"","status":"closed","priority":2,"issue_type":"feature","created_at":"2025-12-16T13:32:46.407883809-06:00","updated_at":"2025-12-16T13:39:23.943680713-06:00","closed_at":"2025-12-16T13:39:23.943680713-06:00","close_reason":"Added contact details section with phone, email, and website links in main content area above gallery and listings. Uses responsive grid layout."}
{"id":"html-x03","title":"MLS by HansonXyz Plugin - Phase 7: Cron \u0026 Automation","description":"WP Cron scheduling (configurable interval), standalone cron script for Unix cron","status":"closed","priority":2,"issue_type":"task","created_at":"2025-12-14T21:02:55.483012095-06:00","updated_at":"2025-12-14T21:22:06.519310981-06:00","closed_at":"2025-12-14T21:22:06.519310981-06:00","dependencies":[{"issue_id":"html-x03","depends_on_id":"html-4q8","type":"blocks","created_at":"2025-12-14T21:04:15.476790917-06:00","created_by":"unknown"}]}
{"id":"html-xub","title":"Expanded search filters - property type and zip code","description":"","status":"closed","priority":2,"issue_type":"feature","created_at":"2025-12-16T13:11:40.568406605-06:00","updated_at":"2025-12-16T13:16:29.492622442-06:00","closed_at":"2025-12-16T13:16:29.492622442-06:00","close_reason":"Implemented expanded search filters: MLS property types dropdown (Residential, Land, Commercial Sale, Residential Lease, Residential Income, Farm), city dropdown (107 cities with 50+ listings), and zip code text input field"}
{"id":"html-yxd","title":"Update broker footer legal text","description":"","status":"closed","priority":2,"issue_type":"task","created_at":"2025-12-16T11:52:52.82531755-06:00","updated_at":"2025-12-16T11:54:46.914199743-06:00","closed_at":"2025-12-16T11:54:46.914199743-06:00","close_reason":"Updated broker footer to 'HomeProz Real Estate LLC DBA LandProz Real Estate, LLC'"}
File diff suppressed because one or more lines are too long
+204
View File
@@ -0,0 +1,204 @@
<?php
/**
* Template Name: Join Our Team
* Template for displaying the recruitment/careers page
*
* @package HomeProz
*/
// Prevent direct access
if (!defined('ABSPATH')) {
exit;
}
get_header();
?>
<main id="primary" class="site-main join-page-main">
<?php
// Get hero content from ACF or defaults
$hero_title = get_field('hero_title') ?: 'Join Our Team';
$hero_subtitle = get_field('hero_subtitle') ?: 'Build your real estate career with HomeProz in Albert Lea and surrounding communities.';
$hero_bg = get_field('hero_background');
$has_bg_class = $hero_bg ? 'has-background' : '';
$bg_style = $hero_bg ? 'style="background-image: url(' . esc_url($hero_bg) . ');"' : '';
?>
<!-- Archive Hero -->
<section class="archive-hero <?php echo esc_attr($has_bg_class); ?>" <?php echo $bg_style; ?>>
<?php if ($hero_bg) : ?>
<div class="archive-hero-overlay"></div>
<?php endif; ?>
<div class="container">
<h1 class="archive-hero-title"><?php echo esc_html($hero_title); ?></h1>
<?php if ($hero_subtitle) : ?>
<p class="archive-hero-subtitle"><?php echo esc_html($hero_subtitle); ?></p>
<?php endif; ?>
</div>
</section>
<!-- Why Join Section -->
<section class="join-why-section">
<div class="container">
<div class="join-intro">
<?php
// Page content from editor
while (have_posts()) :
the_post();
if (get_the_content()) :
the_content();
else :
// Default content if none provided
?>
<p>HomeProz Real Estate is always looking for talented, driven individuals to join our growing team. Whether you're an experienced agent or just starting your real estate career, we offer the support, training, and resources you need to succeed.</p>
<?php
endif;
endwhile;
?>
</div>
<div class="join-benefits-grid">
<div class="join-benefit-card">
<div class="join-benefit-icon">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
<circle cx="9" cy="7" r="4"/>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
</svg>
</div>
<h3 class="join-benefit-title">Supportive Team</h3>
<p class="join-benefit-text">Work alongside experienced professionals who are invested in your success and growth.</p>
</div>
<div class="join-benefit-card">
<div class="join-benefit-icon">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
<polyline points="22 4 12 14.01 9 11.01"/>
</svg>
</div>
<h3 class="join-benefit-title">Training & Development</h3>
<p class="join-benefit-text">Continuous learning opportunities to sharpen your skills and stay ahead in the market.</p>
</div>
<div class="join-benefit-card">
<div class="join-benefit-icon">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
<line x1="3" y1="9" x2="21" y2="9"/>
<line x1="9" y1="21" x2="9" y2="9"/>
</svg>
</div>
<h3 class="join-benefit-title">Marketing Support</h3>
<p class="join-benefit-text">Professional marketing tools and resources to help you showcase properties effectively.</p>
</div>
<div class="join-benefit-card">
<div class="join-benefit-icon">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
<polyline points="9 22 9 12 15 12 15 22"/>
</svg>
</div>
<h3 class="join-benefit-title">Local Expertise</h3>
<p class="join-benefit-text">Deep knowledge of Albert Lea and surrounding Minnesota communities to serve clients better.</p>
</div>
</div>
</div>
</section>
<!-- Current Team Preview -->
<section class="join-team-section">
<div class="container">
<header class="join-team-header">
<h2 class="join-team-title">Meet the Team</h2>
<p class="join-team-subtitle">Get to know the professionals you'll be working with</p>
</header>
<?php
// Query active agents (limit to 4 for preview)
$all_agents = get_posts([
'post_type' => 'agent',
'posts_per_page' => -1,
'post_status' => 'publish',
]);
// Filter out disabled agents
$agents = [];
foreach ($all_agents as $agent) {
$disabled = get_field('agent_disabled', $agent->ID);
if (!$disabled) {
$order = get_field('agent_order', $agent->ID);
$agents[] = [
'post' => $agent,
'order' => $order ? (int) $order : 10,
];
}
}
// Sort by order
usort($agents, function($a, $b) {
return $a['order'] - $b['order'];
});
// Limit to 4
$agents = array_slice($agents, 0, 4);
?>
<?php if (!empty($agents)) : ?>
<div class="join-team-grid">
<?php foreach ($agents as $agent_item) :
$agent = $agent_item['post'];
$agent_title = get_field('agent_title', $agent->ID);
$agent_photo_id = get_post_thumbnail_id($agent->ID);
$agent_photo_url = $agent_photo_id ? wp_get_attachment_image_url($agent_photo_id, 'medium') : '';
?>
<div class="join-team-member">
<div class="join-team-photo">
<?php if ($agent_photo_url) : ?>
<img src="<?php echo esc_url($agent_photo_url); ?>" alt="<?php echo esc_attr($agent->post_title); ?>">
<?php else : ?>
<div class="join-team-placeholder">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
<circle cx="12" cy="7" r="4"/>
</svg>
</div>
<?php endif; ?>
</div>
<h3 class="join-team-name"><?php echo esc_html($agent->post_title); ?></h3>
<?php if ($agent_title) : ?>
<p class="join-team-role"><?php echo esc_html($agent_title); ?></p>
<?php endif; ?>
</div>
<?php endforeach; ?>
</div>
<div class="join-team-cta">
<a href="<?php echo esc_url(home_url('/about/')); ?>" class="btn btn-secondary">
View Full Team
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</a>
</div>
<?php endif; ?>
</div>
</section>
<?php
// Contact CTA Section
get_template_part('template-parts/components/cta-section', null, array(
'title' => 'Ready to Start Your Journey?',
'text' => 'Contact us to learn more about opportunities at HomeProz Real Estate.',
'button_text' => 'Get in Touch',
'button_url' => home_url('/contact/'),
'style' => 'accent',
));
?>
</main>
<?php
get_footer();
+58 -30
View File
@@ -48,42 +48,70 @@ $resource_pages = get_pages(array(
<div class="container">
<div class="resources-featured-grid">
<!-- Buyer's Guide -->
<div class="resource-featured-card">
<article class="resource-featured-card resource-featured-card--buyer">
<a href="<?php echo esc_url(home_url('/resources/buyers-guide/')); ?>" class="resource-card-link-overlay" aria-hidden="true" tabindex="-1"></a>
<div class="resource-featured-icon">
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
<polyline points="9 22 9 12 15 12 15 22"/>
</svg>
<div class="resource-featured-visual">
<div class="resource-featured-badge">Guide</div>
<div class="resource-featured-icon-large">
<svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" aria-hidden="true">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
<polyline points="9 22 9 12 15 12 15 22"/>
</svg>
</div>
</div>
<h2 class="resource-featured-title">Buyer's Guide</h2>
<p class="resource-featured-description">
Ready to buy your first home or next property? Our comprehensive guide walks you through every step of the home buying process, from getting pre-approved to closing day.
</p>
<span class="btn btn-primary">
Read the Buyer's Guide
</span>
</div>
<div class="resource-featured-content">
<h2 class="resource-featured-title">Buyer's Guide</h2>
<p class="resource-featured-description">
Ready to buy your first home or next property? Our comprehensive guide walks you through every step of the home buying process, from getting pre-approved to closing day.
</p>
<ul class="resource-featured-highlights">
<li>Getting Pre-Approved</li>
<li>Finding Your Dream Home</li>
<li>Making an Offer</li>
<li>Closing Day</li>
</ul>
<span class="btn btn-primary">
Read the Guide
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</span>
</div>
</article>
<!-- Seller's Guide -->
<div class="resource-featured-card">
<article class="resource-featured-card resource-featured-card--seller">
<a href="<?php echo esc_url(home_url('/resources/sellers-guide/')); ?>" class="resource-card-link-overlay" aria-hidden="true" tabindex="-1"></a>
<div class="resource-featured-icon">
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"/>
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
<line x1="12" y1="11" x2="12" y2="17"/>
<line x1="9" y1="14" x2="15" y2="14"/>
</svg>
<div class="resource-featured-visual">
<div class="resource-featured-badge">Guide</div>
<div class="resource-featured-icon-large">
<svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" aria-hidden="true">
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"/>
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
<line x1="12" y1="11" x2="12" y2="17"/>
<line x1="9" y1="14" x2="15" y2="14"/>
</svg>
</div>
</div>
<h2 class="resource-featured-title">Seller's Guide</h2>
<p class="resource-featured-description">
Thinking about selling? Learn how to prepare your home for the market, price it right, and navigate the selling process to get the best possible return on your investment.
</p>
<span class="btn btn-primary">
Read the Seller's Guide
</span>
</div>
<div class="resource-featured-content">
<h2 class="resource-featured-title">Seller's Guide</h2>
<p class="resource-featured-description">
Thinking about selling? Learn how to prepare your home for the market, price it right, and navigate the selling process to get the best possible return.
</p>
<ul class="resource-featured-highlights">
<li>Preparing Your Home</li>
<li>Pricing Strategies</li>
<li>Marketing Your Property</li>
<li>Negotiating Offers</li>
</ul>
<span class="btn btn-primary">
Read the Guide
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</span>
</div>
</article>
</div>
</div>
</section>
@@ -160,6 +160,53 @@ while (have_posts()) :
</section>
<?php endif; ?>
<!-- Contact Details (mobile-friendly, above listings) -->
<?php if ($agent_phone || $agent_email) : ?>
<section class="agent-section agent-contact-details">
<h2 class="section-title">Contact <?php the_title(); ?></h2>
<div class="contact-details-grid">
<?php if ($agent_phone) : ?>
<a href="tel:<?php echo esc_attr(preg_replace('/[^0-9]/', '', $agent_phone)); ?>" class="contact-detail-item">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
</svg>
<div class="contact-detail-content">
<span class="contact-detail-label">Phone</span>
<span class="contact-detail-value"><?php echo esc_html($agent_phone); ?></span>
</div>
</a>
<?php endif; ?>
<?php if ($agent_email) : ?>
<a href="mailto:<?php echo esc_attr($agent_email); ?>" class="contact-detail-item">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
<polyline points="22,6 12,13 2,6"/>
</svg>
<div class="contact-detail-content">
<span class="contact-detail-label">Email</span>
<span class="contact-detail-value"><?php echo esc_html($agent_email); ?></span>
</div>
</a>
<?php endif; ?>
<?php if ($agent_website) : ?>
<a href="<?php echo esc_url($agent_website); ?>" target="_blank" rel="noopener noreferrer" class="contact-detail-item">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"/>
<line x1="2" y1="12" x2="22" y2="12"/>
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
</svg>
<div class="contact-detail-content">
<span class="contact-detail-label">Website</span>
<span class="contact-detail-value">Visit Website</span>
</div>
</a>
<?php endif; ?>
</div>
</section>
<?php endif; ?>
<!-- Photo Gallery -->
<?php if ($agent_gallery && is_array($agent_gallery) && count($agent_gallery) > 0) : ?>
<section class="agent-section agent-gallery-section">
+15
View File
@@ -16,6 +16,7 @@
@import '../template-parts/content/content-404.scss';
@import '../template-parts/content/content-homepage.scss';
@import '../template-parts/content/content-about.scss';
@import '../template-parts/content/content-join.scss';
@import '../template-parts/content/content-contact.scss';
@import '../template-parts/content/content-archive.scss';
@import '../template-parts/sidebar/blog-sidebar.scss';
@@ -85,6 +86,20 @@ body {
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
// Subtle noise texture overlay for luxury feel
&::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9999;
opacity: 0.03;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}
}
// ============================================
@@ -186,6 +186,69 @@
border-bottom: 1px solid var(--color-border);
}
// Contact Details Section (above listings)
.agent-contact-details {
background-color: var(--color-bg-card);
border-radius: 0.5rem;
padding: 1.5rem;
.contact-details-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
@media (min-width: 640px) {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px) {
grid-template-columns: repeat(3, 1fr);
}
}
.contact-detail-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background-color: var(--color-bg-dark);
border: 1px solid var(--color-border);
border-radius: 0.375rem;
text-decoration: none;
color: inherit;
&:hover {
border-color: var(--color-accent);
background-color: rgba(159, 55, 48, 0.1);
}
svg {
flex-shrink: 0;
color: var(--color-accent);
}
}
.contact-detail-content {
display: flex;
flex-direction: column;
min-width: 0;
}
.contact-detail-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-muted);
margin-bottom: 0.125rem;
}
.contact-detail-value {
font-size: 1rem;
color: var(--color-text);
word-break: break-word;
}
}
// Biography
.agent-bio {
.agent-short-bio {
@@ -7,11 +7,19 @@
.service-cards-section {
padding: 5rem 0;
background-color: var(--color-bg-card);
@media (max-width: 640px) {
padding: 2.5rem 0;
}
}
.service-cards-header {
text-align: center;
margin-bottom: 3rem;
@media (max-width: 640px) {
margin-bottom: 1.5rem;
}
}
.service-cards-title {
@@ -23,6 +31,11 @@
@media (max-width: 768px) {
font-size: 2rem;
}
@media (max-width: 640px) {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
}
.service-cards-subtitle {
@@ -30,6 +43,10 @@
color: var(--color-text-muted);
max-width: 600px;
margin: 0 auto;
@media (max-width: 640px) {
font-size: 0.875rem;
}
}
.service-cards-grid {
@@ -42,8 +59,8 @@
}
@media (max-width: 640px) {
grid-template-columns: 1fr;
gap: 1.5rem;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
}
@@ -64,6 +81,10 @@
color: var(--color-text);
}
}
@media (max-width: 640px) {
padding: 1rem;
}
}
.service-card-link-overlay {
@@ -85,6 +106,17 @@
background-color: rgba(159, 55, 48, 0.1);
border-radius: 50%;
color: var(--color-accent);
@media (max-width: 640px) {
width: 48px;
height: 48px;
margin-bottom: 0.75rem;
svg {
width: 24px;
height: 24px;
}
}
}
.service-card-title {
@@ -92,6 +124,11 @@
font-size: 1.5rem;
color: var(--color-text);
margin-bottom: 1rem;
@media (max-width: 640px) {
font-size: 1rem;
margin-bottom: 0.5rem;
}
}
.service-card-description {
@@ -99,6 +136,12 @@
color: var(--color-text-muted);
margin-bottom: 1.5rem;
line-height: 1.6;
@media (max-width: 640px) {
font-size: 0.75rem;
margin-bottom: 0.75rem;
line-height: 1.4;
}
}
.service-card-btn {
@@ -113,6 +156,16 @@
&:hover svg {
transform: translateX(4px);
}
@media (max-width: 640px) {
font-size: 0.75rem;
padding: 0.5rem 0.75rem;
svg {
width: 14px;
height: 14px;
}
}
}
// Outline button variant (if not already defined)
@@ -0,0 +1,194 @@
/**
* Join Our Team Page Styles
*
* @package HomeProz
*/
.Join_Page {
.join-page-main {
padding: 0;
}
// Intro Section
.join-why-section {
padding: 4rem 0;
background-color: var(--color-bg-dark);
@media (max-width: 768px) {
padding: 3rem 0;
}
}
.join-intro {
max-width: 800px;
margin: 0 auto 3rem;
text-align: center;
p {
font-size: 1.125rem;
line-height: 1.8;
color: var(--color-text-muted);
}
}
// Benefits Grid
.join-benefits-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
@media (max-width: 1024px) {
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 640px) {
grid-template-columns: 1fr;
gap: 1rem;
}
}
.join-benefit-card {
background-color: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 1.5rem;
text-align: center;
&:hover {
border-color: var(--color-accent);
}
}
.join-benefit-icon {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
margin: 0 auto 1rem;
background-color: rgba(159, 55, 48, 0.1);
border-radius: 50%;
color: var(--color-accent);
}
.join-benefit-title {
font-family: var(--font-display);
font-size: 1.25rem;
color: var(--color-text);
margin-bottom: 0.5rem;
}
.join-benefit-text {
font-size: 0.9375rem;
color: var(--color-text-muted);
line-height: 1.6;
margin-bottom: 0;
}
// Team Preview Section
.join-team-section {
padding: 4rem 0;
background-color: var(--color-bg-card);
@media (max-width: 768px) {
padding: 3rem 0;
}
}
.join-team-header {
text-align: center;
margin-bottom: 2.5rem;
}
.join-team-title {
font-family: var(--font-display);
font-size: 2.25rem;
color: var(--color-text);
margin-bottom: 0.5rem;
@media (max-width: 768px) {
font-size: 1.875rem;
}
}
.join-team-subtitle {
font-size: 1.125rem;
color: var(--color-text-muted);
}
.join-team-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
margin-bottom: 2rem;
@media (max-width: 1024px) {
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 640px) {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
}
.join-team-member {
text-align: center;
}
.join-team-photo {
width: 120px;
height: 120px;
margin: 0 auto 1rem;
border-radius: 50%;
overflow: hidden;
border: 3px solid var(--color-border);
img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 640px) {
width: 80px;
height: 80px;
margin-bottom: 0.75rem;
}
}
.join-team-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-bg-dark);
color: var(--color-text-muted);
}
.join-team-name {
font-family: var(--font-display);
font-size: 1.125rem;
color: var(--color-text);
margin-bottom: 0.25rem;
@media (max-width: 640px) {
font-size: 1rem;
}
}
.join-team-role {
font-size: 0.875rem;
color: var(--color-accent);
margin-bottom: 0;
@media (max-width: 640px) {
font-size: 0.75rem;
}
}
.join-team-cta {
text-align: center;
}
}
@@ -26,20 +26,29 @@
.resource-featured-card {
position: relative;
background-color: var(--color-bg-dark);
display: flex;
flex-direction: column;
background-color: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 2.5rem;
text-align: center;
overflow: hidden;
cursor: pointer;
&:hover {
border-color: var(--color-accent);
.resource-featured-visual {
background-size: 110%;
}
.btn {
background-color: var(--color-accent-hover);
}
}
@media (min-width: 640px) {
flex-direction: row;
}
}
.resource-card-link-overlay {
@@ -51,30 +60,140 @@
z-index: 1;
}
.resource-featured-icon {
.resource-featured-visual {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
margin: 0 auto 1.5rem;
background-color: rgba(159, 55, 48, 0.1);
min-height: 200px;
background-size: 100%;
background-position: center;
@media (min-width: 640px) {
width: 200px;
min-height: 280px;
flex-shrink: 0;
}
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
.resource-featured-card--buyer .resource-featured-visual {
background: linear-gradient(135deg, #1a1a1a 0%, #2d1f1f 50%, #3d2a2a 100%);
&::before {
background: radial-gradient(circle at 30% 70%, rgba(159, 55, 48, 0.2) 0%, transparent 50%);
}
}
.resource-featured-card--seller .resource-featured-visual {
background: linear-gradient(135deg, #1a1a1a 0%, #1f2d1f 50%, #2a3d2a 100%);
&::before {
background: radial-gradient(circle at 70% 30%, rgba(46, 125, 50, 0.2) 0%, transparent 50%);
}
}
.resource-featured-badge {
position: absolute;
top: 1rem;
left: 1rem;
padding: 0.25rem 0.75rem;
background-color: var(--color-accent);
color: white;
font-size: 0.625rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
border-radius: 0.25rem;
}
.resource-featured-icon-large {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 120px;
height: 120px;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 50%;
color: var(--color-accent);
@media (max-width: 639px) {
width: 100px;
height: 100px;
svg {
width: 60px;
height: 60px;
}
}
}
.resource-featured-content {
flex: 1;
padding: 1.5rem;
display: flex;
flex-direction: column;
@media (min-width: 640px) {
padding: 2rem;
}
}
.resource-featured-title {
font-family: var(--font-display);
font-size: 1.75rem;
font-size: 1.5rem;
color: var(--color-text);
margin-bottom: 1rem;
margin-bottom: 0.75rem;
@media (min-width: 640px) {
font-size: 1.75rem;
}
}
.resource-featured-description {
font-size: 1rem;
font-size: 0.9375rem;
color: var(--color-text-muted);
line-height: 1.6;
margin-bottom: 1.5rem;
margin-bottom: 1rem;
}
.resource-featured-highlights {
list-style: none;
padding: 0;
margin: 0 0 1.5rem 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
li {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8125rem;
color: var(--color-text-muted);
&::before {
content: '';
width: 6px;
height: 6px;
background-color: var(--color-accent);
border-radius: 50%;
flex-shrink: 0;
}
}
@media (max-width: 480px) {
grid-template-columns: 1fr;
}
}
.resources-additional-section {