Implement dual hero designs with responsive switching

Hero System:
- Design 1 (Card Overlay): Semi-transparent card over full image
- Design 2 (Two-Column Split): Text left, image right
- Homepage switches: Card < 1450px, Split >= 1450px
- Alt page (/home-page-alt/) uses Card design only

Image Transform System:
- New PHP helper for on-demand image cropping via ImageMagick
- Caches transformed images with mtime-based invalidation
- Supports crop percentage (positive=right, negative=left)

Hero Improvements:
- Full-width split layout with image hugging right edge
- Card design: responsive positioning with breakpoints at 1400/1650/1800px
- Cropped logo variant (bottom 35px removed for cleaner look)
- Golden hour hero image with 30-35% right crop

Footer:
- Added temporary "HOME PAGE ALT" link for client comparison

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

Co-Authored-By: Claude <noreply@anthropic.com>

wp-content/themes/homeproz/front-page.php

@@ -58,9 +58,18 @@ $featured_commercial = new WP_Query(array(
 <main id="primary" class="site-main homepage-main">
 
     <?php
-    // Hero Section with Location Search
+    // Hero images
+    $hero_image_split = homeproz_get_transformed_theme_image('assets/images/hero-original.png', 30, 2560, 90);
+    $hero_image_card = homeproz_get_transformed_theme_image('assets/images/hero-original.png', 35, 2560, 90);
+    $fallback_image = get_template_directory_uri() . '/assets/images/hero.webp';
+    $logo_cropped = get_template_directory_uri() . '/assets/images/logo-cropped.webp';
+
+    // Design 2: Two-column split (shown >= 1450px)
+    ?>
+    <div class="hero-desktop-only">
+    <?php
     get_template_part('template-parts/components/hero-section', null, array(
-        'logo' => get_template_directory_uri() . '/assets/images/logo-transparent.webp',
+        'logo' => $logo_cropped,
         'title' => 'Find Your Dream Home Today',
         'subtitle' => 'Expert real estate services for buyers and sellers in Albert Lea and the surrounding Minnesota communities.',
         'show_location_search' => true,
@@ -68,10 +77,33 @@ $featured_commercial = new WP_Query(array(
         'primary_cta_url' => home_url('/properties/'),
         'secondary_cta_text' => 'Contact Us',
         'secondary_cta_url' => home_url('/contact/'),
-        'background_image' => get_template_directory_uri() . '/assets/images/hero.webp',
+        'background_image' => $hero_image_split ?: $fallback_image,
         'size' => 'large',
     ));
+    ?>
+    </div>
 
+    <?php
+    // Design 1: Card overlay (shown < 1450px)
+    ?>
+    <div class="hero-mobile-only">
+    <?php
+    get_template_part('template-parts/components/hero-section-card', null, array(
+        'logo' => $logo_cropped,
+        'title' => 'Find Your Dream Home Today',
+        'subtitle' => 'Expert real estate services for buyers and sellers in Albert Lea and the surrounding Minnesota communities.',
+        'show_location_search' => true,
+        'primary_cta_text' => 'View All Properties',
+        'primary_cta_url' => home_url('/properties/'),
+        'secondary_cta_text' => 'Contact Us',
+        'secondary_cta_url' => home_url('/contact/'),
+        'background_image' => $hero_image_card ?: $fallback_image,
+        'size' => 'large',
+    ));
+    ?>
+    </div>
+
+    <?php
     // Service Cards Section (Buy/Rent/Sell)
     get_template_part('template-parts/components/service-cards');
     ?>

wp-content/themes/homeproz/functions.php

@@ -38,5 +38,8 @@ require_once HOMEPROZ_DIR . '/inc/acf-fields.php';
 // AJAX handlers
 require_once HOMEPROZ_DIR . '/inc/ajax-handlers.php';
 
+// Image transformation helpers
+require_once HOMEPROZ_DIR . '/inc/image-transform.php';
+
 // Schema.org structured data
 require_once HOMEPROZ_DIR . '/inc/schema-markup.php';

wp-content/themes/homeproz/inc/image-transform.php

@@ -0,0 +1,146 @@
+<?php
+/**
+ * Image Transform Helper
+ *
+ * Generates cropped/transformed versions of images with caching.
+ *
+ * @package HomeProz
+ */
+
+// Prevent direct access
+if (!defined('ABSPATH')) {
+    exit;
+}
+
+/**
+ * Get a transformed (cropped) version of an image.
+ *
+ * @param string $source_path Absolute path to source image
+ * @param int    $crop_percent Percentage to crop. Positive = crop from right, Negative = crop from left
+ * @param int    $max_width Maximum output width (default 2560). Never upscales.
+ * @param int    $quality WebP quality (default 90)
+ * @return string|false URL to transformed image, or false on failure
+ */
+function homeproz_get_transformed_image($source_path, $crop_percent, $max_width = 2560, $quality = 90) {
+    // Validate source exists
+    if (!file_exists($source_path)) {
+        return false;
+    }
+
+    // Create cache directory if needed
+    $cache_dir = WP_CONTENT_DIR . '/cache/transformed-images';
+    if (!is_dir($cache_dir)) {
+        wp_mkdir_p($cache_dir);
+    }
+
+    // Generate cache filename from hash of source + params
+    $hash_input = basename($source_path) . '_' . $crop_percent . '_' . $max_width . '_' . $quality;
+    $cache_filename = md5($hash_input) . '.webp';
+    $cache_path = $cache_dir . '/' . $cache_filename;
+
+    // Check if we need to regenerate
+    $needs_regeneration = false;
+    if (!file_exists($cache_path)) {
+        $needs_regeneration = true;
+    } elseif (filemtime($source_path) > filemtime($cache_path)) {
+        $needs_regeneration = true;
+    }
+
+    if ($needs_regeneration) {
+        $result = homeproz_generate_transformed_image($source_path, $cache_path, $crop_percent, $max_width, $quality);
+        if (!$result) {
+            return false;
+        }
+    }
+
+    // Return URL to cached image
+    $cache_url = content_url('/cache/transformed-images/' . $cache_filename);
+    return $cache_url;
+}
+
+/**
+ * Generate the transformed image using ImageMagick CLI.
+ *
+ * @param string $source_path Absolute path to source image
+ * @param string $output_path Absolute path for output image
+ * @param int    $crop_percent Percentage to crop (positive = right, negative = left)
+ * @param int    $max_width Maximum output width
+ * @param int    $quality WebP quality
+ * @return bool Success or failure
+ */
+function homeproz_generate_transformed_image($source_path, $output_path, $crop_percent, $max_width, $quality) {
+    // Get source dimensions
+    $image_info = @getimagesize($source_path);
+    if (!$image_info) {
+        return false;
+    }
+
+    $src_width = $image_info[0];
+    $src_height = $image_info[1];
+
+    // Calculate crop dimensions
+    $crop_fraction = abs($crop_percent) / 100;
+    $keep_fraction = 1 - $crop_fraction;
+    $crop_width = (int) round($src_width * $keep_fraction);
+    $crop_height = $src_height; // Keep full height
+
+    // Determine crop offset (which side to crop from)
+    if ($crop_percent > 0) {
+        // Positive = crop from right, keep left portion
+        $offset_x = 0;
+    } else {
+        // Negative = crop from left, keep right portion
+        $offset_x = $src_width - $crop_width;
+    }
+    $offset_y = 0;
+
+    // Calculate final dimensions after resize
+    // Only scale down, never up
+    if ($crop_width > $max_width) {
+        $final_width = $max_width;
+        $final_height = (int) round($crop_height * ($max_width / $crop_width));
+    } else {
+        $final_width = $crop_width;
+        $final_height = $crop_height;
+    }
+
+    // Build ImageMagick command
+    // 1. Read source
+    // 2. Crop to specified region
+    // 3. Resize to max width (maintaining aspect ratio)
+    // 4. Output as WebP with specified quality
+    $crop_geometry = sprintf('%dx%d+%d+%d', $crop_width, $crop_height, $offset_x, $offset_y);
+    $resize_geometry = sprintf('%dx%d', $final_width, $final_height);
+
+    $cmd = sprintf(
+        'convert %s -crop %s +repage -resize %s -quality %d %s 2>&1',
+        escapeshellarg($source_path),
+        escapeshellarg($crop_geometry),
+        escapeshellarg($resize_geometry),
+        (int) $quality,
+        escapeshellarg($output_path)
+    );
+
+    exec($cmd, $output, $return_code);
+
+    if ($return_code !== 0) {
+        error_log('HomeProz Image Transform Error: ' . implode("\n", $output));
+        return false;
+    }
+
+    return file_exists($output_path);
+}
+
+/**
+ * Helper to get transformed image URL from theme asset path.
+ *
+ * @param string $asset_path Path relative to theme directory (e.g., 'assets/images/hero-original.png')
+ * @param int    $crop_percent Percentage to crop
+ * @param int    $max_width Maximum output width
+ * @param int    $quality WebP quality
+ * @return string|false URL to transformed image, or false on failure
+ */
+function homeproz_get_transformed_theme_image($asset_path, $crop_percent, $max_width = 2560, $quality = 90) {
+    $source_path = get_template_directory() . '/' . ltrim($asset_path, '/');
+    return homeproz_get_transformed_image($source_path, $crop_percent, $max_width, $quality);
+}

wp-content/themes/homeproz/page-home-page-alt.php

@@ -0,0 +1,169 @@
+<?php
+/**
+ * Template Name: Homepage Alt (Card Hero)
+ *
+ * Alternative homepage layout with card overlay hero for client comparison.
+ * Access via: /home-page-alt/
+ *
+ * @package HomeProz
+ */
+
+// Prevent direct access
+if (!defined('ABSPATH')) {
+    exit;
+}
+
+get_header();
+
+// Get featured residential properties (3 most recent active residential listings)
+$featured_residential = new WP_Query(array(
+    'post_type' => 'property',
+    'posts_per_page' => 3,
+    'tax_query' => array(
+        'relation' => 'AND',
+        array(
+            'taxonomy' => 'property_status',
+            'field' => 'slug',
+            'terms' => 'active',
+        ),
+        array(
+            'taxonomy' => 'property_type',
+            'field' => 'slug',
+            'terms' => 'residential',
+        ),
+    ),
+    'orderby' => 'date',
+    'order' => 'DESC',
+));
+
+// Get featured commercial/land properties (3 most recent active commercial or land listings)
+$featured_commercial = new WP_Query(array(
+    'post_type' => 'property',
+    'posts_per_page' => 3,
+    'tax_query' => array(
+        'relation' => 'AND',
+        array(
+            'taxonomy' => 'property_status',
+            'field' => 'slug',
+            'terms' => 'active',
+        ),
+        array(
+            'taxonomy' => 'property_type',
+            'field' => 'slug',
+            'terms' => array('commercial', 'land'),
+        ),
+    ),
+    'orderby' => 'date',
+    'order' => 'DESC',
+));
+?>
+
+<main id="primary" class="site-main homepage-main">
+
+    <?php
+    // Hero Section with Card Overlay (Option 1)
+    // Use transformed hero image: 35% cropped from right, max 2560px wide
+    $hero_image = homeproz_get_transformed_theme_image('assets/images/hero-original.png', 35, 2560, 90);
+    if (!$hero_image) {
+        // Fallback to standard hero if transform fails
+        $hero_image = get_template_directory_uri() . '/assets/images/hero.webp';
+    }
+
+    get_template_part('template-parts/components/hero-section-card', null, array(
+        'logo' => get_template_directory_uri() . '/assets/images/logo-cropped.webp',
+        'title' => 'Find Your Dream Home Today',
+        'subtitle' => 'Expert real estate services for buyers and sellers in Albert Lea and the surrounding Minnesota communities.',
+        'show_location_search' => true,
+        'primary_cta_text' => 'View All Properties',
+        'primary_cta_url' => home_url('/properties/'),
+        'secondary_cta_text' => 'Contact Us',
+        'secondary_cta_url' => home_url('/contact/'),
+        'background_image' => $hero_image,
+        'size' => 'large',
+    ));
+
+    // Service Cards Section (Buy/Rent/Sell)
+    get_template_part('template-parts/components/service-cards');
+    ?>
+
+    <!-- Featured Residential Properties Section -->
+    <section class="featured-properties-section">
+        <div class="container">
+            <header class="section-header">
+                <h2 class="section-title">Featured Homes</h2>
+                <p class="section-subtitle">Browse our residential properties for sale</p>
+            </header>
+
+            <?php if ($featured_residential->have_posts()) : ?>
+                <div class="property-grid property-grid--3col">
+                    <?php
+                    while ($featured_residential->have_posts()) :
+                        $featured_residential->the_post();
+                        get_template_part('template-parts/property/property-card');
+                    endwhile;
+                    wp_reset_postdata();
+                    ?>
+                </div>
+
+                <div class="section-footer">
+                    <a href="<?php echo esc_url(home_url('/properties/?type=residential')); ?>" class="btn btn-secondary">
+                        View All Residential
+                        <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>
+                    </a>
+                </div>
+            <?php else : ?>
+                <p class="no-properties-message">No residential properties currently available. Please check back soon.</p>
+            <?php endif; ?>
+        </div>
+    </section>
+
+    <!-- Featured Commercial & Land Properties Section -->
+    <section class="featured-properties-section featured-properties-section--alt">
+        <div class="container">
+            <header class="section-header">
+                <h2 class="section-title">Commercial & Land</h2>
+                <p class="section-subtitle">Explore commercial properties and land for sale</p>
+            </header>
+
+            <?php if ($featured_commercial->have_posts()) : ?>
+                <div class="property-grid property-grid--3col">
+                    <?php
+                    while ($featured_commercial->have_posts()) :
+                        $featured_commercial->the_post();
+                        get_template_part('template-parts/property/property-card');
+                    endwhile;
+                    wp_reset_postdata();
+                    ?>
+                </div>
+
+                <div class="section-footer">
+                    <a href="<?php echo esc_url(home_url('/properties/?type=commercial,land')); ?>" class="btn btn-secondary">
+                        View All Commercial
+                        <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>
+                    </a>
+                </div>
+            <?php else : ?>
+                <p class="no-properties-message">No commercial properties currently available. Please check back soon.</p>
+            <?php endif; ?>
+        </div>
+    </section>
+
+    <?php
+    // Contact CTA Section
+    get_template_part('template-parts/components/cta-section', null, array(
+        'title' => 'Ready to Find Your Dream Home?',
+        'text' => 'Whether you\'re buying or selling, our team is here to help you every step of the way.',
+        'button_text' => 'Contact Us Today',
+        'button_url' => home_url('/contact/'),
+        'style' => 'accent',
+    ));
+    ?>
+
+</main>
+
+<?php
+get_footer();

wp-content/themes/homeproz/src/main.scss

@@ -31,6 +31,7 @@
 
 // Import reusable components
 @import '../template-parts/components/hero-section.scss';
+@import '../template-parts/components/hero-section-card.scss';
 @import '../template-parts/components/cta-section.scss';
 @import '../template-parts/components/testimonial.scss';
 @import '../template-parts/components/agent-card.scss';

wp-content/themes/homeproz/template-parts/components/hero-section-card.php

@@ -0,0 +1,93 @@
+<?php
+/**
+ * Hero Section Component - Card Overlay Layout (Option 1)
+ *
+ * @package HomeProz
+ */
+
+// Prevent direct access
+if (!defined('ABSPATH')) {
+    exit;
+}
+
+// Get args with defaults
+$logo = isset($args['logo']) ? $args['logo'] : '';
+$title = isset($args['title']) ? $args['title'] : '';
+$subtitle = isset($args['subtitle']) ? $args['subtitle'] : '';
+$primary_cta_text = isset($args['primary_cta_text']) ? $args['primary_cta_text'] : '';
+$primary_cta_url = isset($args['primary_cta_url']) ? $args['primary_cta_url'] : '';
+$secondary_cta_text = isset($args['secondary_cta_text']) ? $args['secondary_cta_text'] : '';
+$secondary_cta_url = isset($args['secondary_cta_url']) ? $args['secondary_cta_url'] : '';
+$background_image = isset($args['background_image']) ? $args['background_image'] : '';
+$size = isset($args['size']) ? $args['size'] : 'large';
+$show_location_search = isset($args['show_location_search']) ? $args['show_location_search'] : false;
+
+$size_class = $size === 'small' ? 'hero-section--small' : 'hero-section--large';
+$style = $background_image ? 'background-image: url(' . esc_url($background_image) . ');' : '';
+
+// Get locations for dropdown if needed
+$locations = array();
+if ($show_location_search) {
+    $locations = get_terms(array(
+        'taxonomy' => 'property_location',
+        'hide_empty' => false,
+        'orderby' => 'name',
+        'order' => 'ASC',
+    ));
+}
+?>
+
+<section class="hero-section hero-section--card <?php echo esc_attr($size_class); ?>" <?php echo $style ? 'style="' . esc_attr($style) . '"' : ''; ?>>
+    <div class="hero-card">
+            <?php if ($logo) : ?>
+                <img src="<?php echo esc_url($logo); ?>" alt="" class="hero-section-logo">
+            <?php endif; ?>
+
+            <?php if ($title) : ?>
+                <h1 class="hero-section-title"><?php echo esc_html($title); ?></h1>
+            <?php endif; ?>
+
+            <?php if ($subtitle) : ?>
+                <p class="hero-section-subtitle"><?php echo esc_html($subtitle); ?></p>
+            <?php endif; ?>
+
+            <?php if ($show_location_search && !empty($locations) && !is_wp_error($locations)) : ?>
+                <form class="hero-location-search" action="<?php echo esc_url(home_url('/properties/')); ?>" method="get">
+                    <div class="hero-location-search-inner">
+                        <label for="hero-location-select" class="screen-reader-text">Select a community</label>
+                        <select name="location" id="hero-location-select" class="hero-location-select">
+                            <option value="">Select a Community</option>
+                            <?php foreach ($locations as $location) : ?>
+                                <option value="<?php echo esc_attr($location->slug); ?>">
+                                    <?php echo esc_html($location->name); ?>
+                                </option>
+                            <?php endforeach; ?>
+                        </select>
+                        <button type="submit" class="btn btn-primary hero-search-btn">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                                <circle cx="11" cy="11" r="8"/>
+                                <path d="M21 21l-4.35-4.35"/>
+                            </svg>
+                            <span>Search</span>
+                        </button>
+                    </div>
+                </form>
+            <?php endif; ?>
+
+            <?php if ($primary_cta_text || $secondary_cta_text) : ?>
+                <div class="hero-section-actions">
+                    <?php if ($primary_cta_text && $primary_cta_url) : ?>
+                        <a href="<?php echo esc_url($primary_cta_url); ?>" class="btn btn-primary">
+                            <?php echo esc_html($primary_cta_text); ?>
+                        </a>
+                    <?php endif; ?>
+
+                    <?php if ($secondary_cta_text && $secondary_cta_url) : ?>
+                        <a href="<?php echo esc_url($secondary_cta_url); ?>" class="btn btn-secondary">
+                            <?php echo esc_html($secondary_cta_text); ?>
+                        </a>
+                    <?php endif; ?>
+                </div>
+            <?php endif; ?>
+    </div>
+</section>

wp-content/themes/homeproz/template-parts/components/hero-section-card.scss

@@ -0,0 +1,205 @@
+/**
+ * Hero Section Styles - Card Overlay Layout (Option 1)
+ *
+ * @package HomeProz
+ */
+
+// Card overlay hero
+.hero-section--card {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    background-color: var(--color-bg-dark);
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    min-height: 70vh;
+    max-height: 725px;
+    padding: 4rem 0;
+
+    @media (max-width: 768px) {
+        min-height: auto;
+        max-height: none;
+        padding: 3rem 0;
+        justify-content: center;
+    }
+
+    &.hero-section--small {
+        min-height: 300px;
+        max-height: 400px;
+        padding: 2rem 0;
+
+        .hero-section-title {
+            font-size: 2.25rem;
+
+            @media (max-width: 768px) {
+                font-size: 1.8rem;
+            }
+        }
+
+        .hero-card {
+            padding: 1.5rem;
+        }
+    }
+}
+
+.hero-card {
+    background-color: rgba(10, 10, 10, 0.85);
+    backdrop-filter: blur(8px);
+    border-radius: 1rem;
+    padding: 2.375rem;
+    width: 520px;
+    text-align: center;
+    border: 1px solid var(--color-border);
+
+    // Position box absolutely, centered by default
+    position: absolute;
+    top: 50%;
+    left: 50vw;
+    transform: translate(-50%, -50%);
+
+    @media (min-width: 1800px) {
+        // Above 1800px: right edge 150px left of center
+        // Right edge = 50vw - 150px, center = 50vw - 150px - 260px
+        left: calc(50vw - 410px);
+    }
+
+    @media (min-width: 1650px) and (max-width: 1799px) {
+        // 1650-1800px: transition zone, use 32vw
+        left: 32vw;
+    }
+
+    @media (min-width: 1400px) and (max-width: 1649px) {
+        // 1400-1650px: left edge 150px from left of page
+        // Left edge = 150px, center = 150px + 260px = 410px
+        left: 410px;
+    }
+
+    // Below 1400px: stays centered at 50vw (default)
+
+    @media (max-width: 768px) {
+        position: relative;
+        top: auto;
+        left: auto;
+        transform: none;
+        padding: 1.125rem 2.375rem; // 10px less top/bottom, 10px more left/right
+        margin: 0 auto;
+        border-radius: 0.75rem;
+        width: calc(100% - 2rem);
+        max-width: 520px;
+    }
+}
+
+.hero-section--card .hero-section-logo {
+    display: block;
+    max-width: 360px;
+    height: auto;
+    margin: 0 auto 1.75rem;
+
+    @media (max-width: 768px) {
+        max-width: 280px;
+        margin-bottom: 1.25rem;
+    }
+}
+
+.hero-section--card .hero-section-title {
+    font-family: var(--font-display);
+    font-size: 2.475rem;
+    color: var(--color-text);
+    margin-bottom: 1.8125rem;
+    line-height: 1.1;
+
+    @media (max-width: 1450px) {
+        font-size: 32px;
+    }
+
+    @media (max-width: 768px) {
+        font-size: 1.6rem;
+        margin-bottom: 0.875rem;
+    }
+
+    @media (max-width: 600px) {
+        font-size: 1.5rem;
+    }
+}
+
+.hero-section--card .hero-section-subtitle {
+    font-size: 1rem;
+    color: var(--color-text-muted);
+    margin-bottom: 1.75rem;
+    line-height: 1.6;
+
+    @media (max-width: 768px) {
+        font-size: 0.9rem;
+        margin-bottom: 1.25rem;
+    }
+
+    @media (max-width: 650px) {
+        font-size: 0.775rem;
+    }
+}
+
+.hero-section--card .hero-section-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.875rem;
+    justify-content: center;
+
+    .btn {
+        font-size: 0.8rem;
+        padding: 0.675rem 1.25rem;
+    }
+}
+
+.hero-section--card .hero-location-search {
+    margin-bottom: 1.75rem;
+}
+
+.hero-section--card .hero-location-search-inner {
+    display: flex;
+    gap: 0;
+    background-color: var(--color-bg-card);
+    border-radius: 0.5rem;
+    overflow: hidden;
+
+    @media (max-width: 480px) {
+        flex-direction: column;
+    }
+}
+
+.hero-section--card .hero-location-select {
+    flex: 1;
+    padding: 0.75rem 0.875rem;
+    font-size: 0.9rem;
+    font-family: var(--font-body);
+    color: var(--color-text);
+    background-color: var(--color-bg-card);
+    border: none;
+    outline: none;
+    cursor: pointer;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B0B0B0' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 0.75rem center;
+    padding-right: 2rem;
+
+    &:focus {
+        box-shadow: inset 0 0 0 2px var(--color-accent);
+    }
+}
+
+.hero-section--card .hero-search-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem;
+    border-radius: 0;
+    white-space: nowrap;
+    font-size: 0.8rem;
+
+    @media (max-width: 480px) {
+        width: 100%;
+        justify-content: center;
+    }
+}

wp-content/themes/homeproz/template-parts/components/hero-section.php

@@ -1,6 +1,6 @@
 <?php
 /**
- * Hero Section Component
+ * Hero Section Component - Two Column Layout
  *
  * @package HomeProz
  *
@@ -35,7 +35,6 @@ $size = isset($args['size']) ? $args['size'] : 'large';
 $show_location_search = isset($args['show_location_search']) ? $args['show_location_search'] : false;
 
 $size_class = $size === 'small' ? 'hero-section--small' : 'hero-section--large';
-$style = $background_image ? 'background-image: url(' . esc_url($background_image) . ');' : '';
 
 // Get locations for dropdown if needed
 $locations = array();
@@ -49,10 +48,9 @@ if ($show_location_search) {
 }
 ?>
 
-<section class="hero-section <?php echo esc_attr($size_class); ?>" <?php echo $style ? 'style="' . esc_attr($style) . '"' : ''; ?>>
-    <div class="hero-section-overlay"></div>
-    <div class="container">
-        <div class="hero-section-content">
+<section class="hero-section hero-section--split <?php echo esc_attr($size_class); ?>">
+    <div class="hero-split-content">
+        <div class="hero-split-inner">
             <?php if ($logo) : ?>
                 <img src="<?php echo esc_url($logo); ?>" alt="" class="hero-section-logo">
             <?php endif; ?>
@@ -82,7 +80,7 @@ if ($show_location_search) {
                                 <circle cx="11" cy="11" r="8"/>
                                 <path d="M21 21l-4.35-4.35"/>
                             </svg>
-                            <span>Search Properties</span>
+                            <span>Search</span>
                         </button>
                     </div>
                 </form>
@@ -105,4 +103,5 @@ if ($show_location_search) {
             <?php endif; ?>
         </div>
     </div>
+    <div class="hero-split-image" <?php echo $background_image ? 'style="background-image: url(' . esc_url($background_image) . ');"' : ''; ?>></div>
 </section>

wp-content/themes/homeproz/template-parts/components/hero-section.scss

@@ -1,37 +1,27 @@
 /**
- * Hero Section Styles
+ * Hero Section Styles - Two Column Split Layout
  *
  * @package HomeProz
  */
 
-.hero-section {
-    position: relative;
+// Two-column split hero
+.hero-section--split {
     display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--color-bg-dark);
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
+    min-height: 70vh;
+    max-height: 725px;
+    width: 100%;
 
-    &--large {
-        min-height: 70vh;
-        max-height: 725px;
-        padding: 6rem 0;
-
-        @media (max-width: 768px) {
-            min-height: 60vh;
-            max-height: none;
-            padding: 4rem 0;
-        }
+    @media (max-width: 768px) {
+        flex-direction: column;
+        max-height: none;
     }
 
-    &--small {
-        min-height: 225px;
-        padding: 55px 0;
+    &.hero-section--small {
+        min-height: 300px;
+        max-height: 400px;
 
         @media (max-width: 768px) {
-            padding: 40px 0;
+            max-height: none;
         }
 
         .hero-section-title {
@@ -41,61 +31,96 @@
                 font-size: 2rem;
             }
         }
+
+        .hero-section-logo {
+            max-width: 280px;
+            margin-bottom: 1.5rem;
+        }
     }
 }
 
-.hero-section-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: linear-gradient(
-        to bottom,
-        rgba(10, 10, 10, 0.7) 0%,
-        rgba(10, 10, 10, 0.85) 100%
-    );
-    pointer-events: none;
+.hero-split-content {
+    width: 40%;
+    max-width: 800px;
+    background-color: var(--color-bg-dark);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 3rem;
+
+    @media (max-width: 1024px) {
+        width: 45%;
+        max-width: none;
+        padding: 2rem;
+    }
+
+    @media (max-width: 768px) {
+        width: 100%;
+        padding: 3rem 1.5rem;
+        order: 2;
+    }
 }
 
-.hero-section-content {
-    position: relative;
-    z-index: 1;
+.hero-split-image {
+    flex: 1;
+    background-size: cover;
+    background-position: center center;
+    background-repeat: no-repeat;
+
+    @media (max-width: 768px) {
+        width: 100%;
+        flex: none;
+        height: 300px;
+        order: 1;
+    }
+}
+
+.hero-split-inner {
+    max-width: 420px;
     text-align: center;
-    max-width: 800px;
-    margin: 0 auto;
+
+    @media (max-width: 768px) {
+        margin: 0 auto;
+    }
 }
 
 .hero-section-logo {
     display: block;
-    max-width: 400px;
+    max-width: 320px;
     height: auto;
     margin: 0 auto 2rem;
+
+    @media (max-width: 768px) {
+        max-width: 280px;
+        margin-bottom: 1.5rem;
+    }
 }
 
 .hero-section-title {
     font-family: var(--font-display);
-    font-size: 3.5rem;
+    font-size: 3rem;
     color: var(--color-text);
-    margin-bottom: 1.5rem;
+    margin-bottom: 1.25rem;
     line-height: 1.1;
 
-    @media (max-width: 768px) {
+    @media (max-width: 1024px) {
         font-size: 2.5rem;
+    }
+
+    @media (max-width: 768px) {
+        font-size: 2.25rem;
         margin-bottom: 1rem;
     }
 }
 
 .hero-section-subtitle {
-    font-size: 1.25rem;
-    color: var(--color-text);
+    font-size: 1.125rem;
+    color: var(--color-text-muted);
     margin-bottom: 2rem;
-    max-width: 600px;
-    margin-left: auto;
-    margin-right: auto;
+    line-height: 1.6;
 
     @media (max-width: 768px) {
-        font-size: 1.125rem;
+        font-size: 1rem;
         margin-bottom: 1.5rem;
     }
 }
@@ -110,9 +135,6 @@
 // Location Search Dropdown
 .hero-location-search {
     margin-bottom: 2rem;
-    max-width: 500px;
-    margin-left: auto;
-    margin-right: auto;
 }
 
 .hero-location-search-inner {
@@ -125,13 +147,12 @@
 
     @media (max-width: 480px) {
         flex-direction: column;
-        border-radius: 0.5rem;
     }
 }
 
 .hero-location-select {
     flex: 1;
-    padding: 1rem 1.25rem;
+    padding: 0.875rem 1rem;
     font-size: 1rem;
     font-family: var(--font-body);
     color: var(--color-text);
@@ -142,9 +163,9 @@
     appearance: none;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B0B0B0' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
-    background-position: right 1rem center;
-    padding-right: 2.5rem;
-    min-width: 200px;
+    background-position: right 0.75rem center;
+    padding-right: 2rem;
+    min-width: 180px;
 
     &:focus {
         box-shadow: inset 0 0 0 2px var(--color-accent);
@@ -156,7 +177,6 @@
     }
 
     @media (max-width: 480px) {
-        border-radius: 0.5rem 0.5rem 0 0;
         text-align: center;
         background-position: right 1.5rem center;
     }
@@ -166,7 +186,7 @@
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    padding: 1rem 1.5rem;
+    padding: 0.875rem 1.25rem;
     border-radius: 0;
     white-space: nowrap;
 
@@ -177,6 +197,5 @@
     @media (max-width: 480px) {
         width: 100%;
         justify-content: center;
-        border-radius: 0 0 0.5rem 0.5rem;
     }
 }

wp-content/themes/homeproz/template-parts/content/content-homepage.scss

@@ -9,6 +9,23 @@
         padding: 0;
     }
 
+    // Hero switching: Design 2 (split) >= 1450px, Design 1 (card) < 1450px
+    .hero-desktop-only {
+        display: none;
+
+        @media (min-width: 1450px) {
+            display: block;
+        }
+    }
+
+    .hero-mobile-only {
+        display: block;
+
+        @media (min-width: 1450px) {
+            display: none;
+        }
+    }
+
     // Section common styles
     .section-header {
         text-align: center;

wp-content/themes/homeproz/template-parts/footer/site-footer.php

@@ -144,6 +144,11 @@ $license_info = 'MN License #40229984';
             <p class="footer-license"><?php echo esc_html($license_info); ?></p>
         </div>
 
+        <!-- Temporary Alt Page Link -->
+        <div class="footer-temp-link">
+            <a href="<?php echo esc_url(home_url('/home-page-alt/')); ?>">HOME PAGE ALT</a>
+        </div>
+
         <!-- Footer Bottom -->
         <div class="footer-bottom">
             <p class="copyright">

wp-content/themes/homeproz/template-parts/footer/site-footer.scss

@@ -229,6 +229,32 @@
     text-align: center;
 }
 
+// Temporary Alt Page Link
+.footer-temp-link {
+    text-align: center;
+    padding: 1rem 0;
+    margin-top: 1.5rem;
+    border-top: 2px dashed var(--color-accent);
+    border-bottom: 2px dashed var(--color-accent);
+
+    a {
+        display: inline-block;
+        padding: 0.75rem 2rem;
+        background-color: var(--color-accent);
+        color: white;
+        font-size: 0.875rem;
+        font-weight: 700;
+        letter-spacing: 0.1em;
+        text-decoration: none;
+        border-radius: 0.25rem;
+
+        &:hover {
+            background-color: var(--color-accent-hover);
+            color: white;
+        }
+    }
+}
+
 // Footer Bottom
 .footer-bottom {
     display: flex;