Add rotating hero image gallery for desktop breakpoint

- Add 5 new hero images to assets/images/hero-gallery/
- Create hero-section.js with image rotation (6s interval)
- Only preload/animate at >= 1450px to save mobile bandwidth
- Fade transition with slight grow effect
- Add overflow:hidden to prevent scrollbar during transition
- Images use 30% right crop via transform system

🤖 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-11-30 22:38:34 -06:00
parent 1a4d41def6
commit 4be4edb4ad
20 changed files with 203 additions and 657 deletions
+1 -4
View File
@@ -1,7 +1,4 @@
{ {
"status": "failed", "status": "failed",
"failedTests": [ "failedTests": []
"ceec39c5ceb79c41f99d-1234f86ffc786a28d180",
"ceec39c5ceb79c41f99d-869898787716c68d21a2"
]
} }
@@ -1,325 +0,0 @@
# Page snapshot
```yaml
- generic [ref=e2]:
- link "Skip to content" [ref=e3] [cursor=pointer]:
- /url: "#primary"
- banner [ref=e4]:
- generic [ref=e6]:
- link "HomeProz" [ref=e8] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/
- navigation "Primary Menu" [ref=e9]:
- list [ref=e10]:
- listitem [ref=e11]:
- link "Properties" [ref=e12] [cursor=pointer]:
- /url: /properties/
- listitem [ref=e13]:
- link "Communities" [ref=e14] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/communities/
- listitem [ref=e15]:
- link "About" [ref=e16] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/about/
- listitem [ref=e17]:
- link "Resources" [ref=e18] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/resources/
- listitem [ref=e19]:
- link "Contact" [ref=e20] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/contact/
- button "Menu" [ref=e21]: Menu
- link "507-516-4870" [ref=e23] [cursor=pointer]:
- /url: tel:5075164870
- navigation "Mobile Menu" [ref=e24]:
- list [ref=e25]:
- listitem [ref=e26]:
- link "Properties" [ref=e27] [cursor=pointer]:
- /url: /properties/
- listitem [ref=e28]:
- link "Communities" [ref=e29] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/communities/
- listitem [ref=e30]:
- link "About" [ref=e31] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/about/
- listitem [ref=e32]:
- link "Resources" [ref=e33] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/resources/
- listitem [ref=e34]:
- link "Contact" [ref=e35] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/contact/
- link "Call 507-516-4870" [ref=e37] [cursor=pointer]:
- /url: tel:5075164870
- main [ref=e38]:
- generic [ref=e40]:
- heading "Find Your Perfect Property" [level=1] [ref=e41]
- paragraph [ref=e42]: Browse our selection of homes, land, and commercial properties in southern Minnesota.
- generic [ref=e43]:
- generic [ref=e45]:
- generic [ref=e46]:
- generic [ref=e47]:
- text: Property Type
- combobox "Property Type" [ref=e48]:
- option "All Types" [selected]
- option "Commercial"
- option "Land"
- option "Multi-Family"
- option "Residential"
- generic [ref=e49]:
- text: Status
- combobox "Status" [ref=e50]:
- option "All Statuses" [selected]
- option "Active"
- option "Pending"
- option "Sold"
- generic [ref=e51]:
- text: Location
- combobox "Location" [ref=e52]:
- option "All Locations" [selected]
- option "Albert Lea"
- option "Alden"
- option "Austin"
- option "Clarks Grove"
- option "Emmons"
- option "Faribault"
- option "Geneva"
- option "Glenville"
- option "Hartland"
- option "Mankato"
- option "Owatonna"
- option "Rochester"
- generic [ref=e53]:
- text: Bedrooms
- combobox "Bedrooms" [ref=e54]:
- option "Any" [selected]
- option "1+"
- option "2+"
- option "3+"
- option "4+"
- option "5+"
- generic [ref=e55]:
- text: Price Range
- generic [ref=e56]:
- combobox [ref=e57]:
- option "Min Price" [selected]
- option "$50,000"
- option "$100,000"
- option "$150,000"
- option "$200,000"
- option "$250,000"
- option "$300,000"
- option "$400,000"
- option "$500,000"
- text: "-"
- combobox [ref=e58]:
- option "Max Price" [selected]
- option "$100,000"
- option "$150,000"
- option "$200,000"
- option "$250,000"
- option "$300,000"
- option "$400,000"
- option "$500,000"
- option "$750,000"
- option "$1,000,000+"
- generic [ref=e59]:
- generic [ref=e60]:
- text: Sort By
- combobox "Sort By" [ref=e61]:
- option "Newest First"
- option "Oldest First"
- 'option "Price: Low to High" [selected]'
- 'option "Price: High to Low"'
- button "Search" [ref=e62]
- link "Reset" [ref=e63] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/properties/
- generic [ref=e64]:
- link "Grid" [ref=e65] [cursor=pointer]:
- /url: /properties/
- img [ref=e66]
- text: Grid
- link "Map" [ref=e71] [cursor=pointer]:
- /url: /properties/?view=map
- img [ref=e72]
- text: Map
- generic [ref=e74]:
- paragraph [ref=e76]:
- text: Showing
- strong [ref=e77]: "6"
- text: properties
- generic [ref=e78]:
- article [ref=e79]:
- link "Pending" [ref=e80] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/properties/15131-800th-ave-glenville-mn/
- generic [ref=e81]:
- generic [ref=e82]: $150,000
- heading "15131 800th Ave, Glenville, MN" [level=3] [ref=e83]:
- link "15131 800th Ave, Glenville, MN" [ref=e84] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/properties/15131-800th-ave-glenville-mn/
- paragraph [ref=e85]: 23.87 Acres on the Shell Rock River - Buildable Site with Tillable, Wooded & Scenic...
- link "View Details" [ref=e86] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/properties/15131-800th-ave-glenville-mn/
- text: View Details
- img [ref=e87]
- article [ref=e89]:
- link "Active" [ref=e90] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/properties/1224-saint-joseph-ave-albert-lea-mn/
- generic [ref=e91]:
- generic [ref=e92]: $149,000
- heading "1224 Saint Joseph Ave, Albert Lea, MN" [level=3] [ref=e93]:
- link "1224 Saint Joseph Ave, Albert Lea, MN" [ref=e94] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/properties/1224-saint-joseph-ave-albert-lea-mn/
- list [ref=e95]:
- listitem [ref=e96]:
- img [ref=e97]
- text: 3 Beds
- listitem [ref=e99]:
- img [ref=e100]
- text: 1.5 Baths
- listitem [ref=e102]:
- img [ref=e103]
- text: 1,980 sqft
- paragraph [ref=e106]: Cozy 3-Bedroom Home on a Spacious Double Corner Lot!
- link "View Details" [ref=e107] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/properties/1224-saint-joseph-ave-albert-lea-mn/
- text: View Details
- img [ref=e108]
- article [ref=e110]:
- link "Active" [ref=e111] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/properties/411-court-st-albert-lea-mn/
- generic [ref=e112]:
- generic [ref=e113]: $180,000
- heading "411 Court St, Albert Lea, MN" [level=3] [ref=e114]:
- link "411 Court St, Albert Lea, MN" [ref=e115] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/properties/411-court-st-albert-lea-mn/
- list [ref=e116]:
- listitem [ref=e117]:
- img [ref=e118]
- text: 3 Beds
- listitem [ref=e120]:
- img [ref=e121]
- text: 4 Baths
- listitem [ref=e123]:
- img [ref=e124]
- text: 3,506 sqft
- paragraph [ref=e127]: Fantastic 4-Plex Investment Opportunity! Strong cash flow from day one.
- link "View Details" [ref=e128] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/properties/411-court-st-albert-lea-mn/
- text: View Details
- img [ref=e129]
- article [ref=e131]:
- link "Active" [ref=e132] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/properties/115-n-newton-ave-albert-lea-mn/
- generic [ref=e133]:
- generic [ref=e134]: $259,900
- heading "115 N Newton Ave, Albert Lea, MN" [level=3] [ref=e135]:
- link "115 N Newton Ave, Albert Lea, MN" [ref=e136] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/properties/115-n-newton-ave-albert-lea-mn/
- list [ref=e137]:
- listitem [ref=e138]:
- img [ref=e139]
- text: 3 Beds
- listitem [ref=e141]:
- img [ref=e142]
- text: 2 Baths
- listitem [ref=e144]:
- img [ref=e145]
- text: 3,496 sqft
- paragraph [ref=e148]: Turn Key - Move In Ready!! Modern luxury meets unbeatable location.
- link "View Details" [ref=e149] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/properties/115-n-newton-ave-albert-lea-mn/
- text: View Details
- img [ref=e150]
- article [ref=e152]:
- link "Active" [ref=e153] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/properties/geneva-mn-double-lot-with-shop/
- generic [ref=e154]:
- generic [ref=e155]: $134,900
- heading "Main Street, Geneva, MN" [level=3] [ref=e156]:
- link "Main Street, Geneva, MN" [ref=e157] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/properties/geneva-mn-double-lot-with-shop/
- paragraph [ref=e158]: Double Lot with a Shop! Beautifully redone building with a lot of potential.
- link "View Details" [ref=e159] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/properties/geneva-mn-double-lot-with-shop/
- text: View Details
- img [ref=e160]
- article [ref=e162]:
- link "Active" [ref=e163] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/properties/123-main-street/
- img [ref=e165]
- text: Active
- generic [ref=e168]:
- generic [ref=e169]: Contact for Price
- heading "123 Main Street" [level=3] [ref=e170]:
- link "123 Main Street" [ref=e171] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/properties/123-main-street/
- link "View Details" [ref=e172] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/properties/123-main-street/
- text: View Details
- img [ref=e173]
- contentinfo [ref=e175]:
- generic [ref=e176]:
- generic [ref=e177]:
- generic [ref=e178]:
- generic [ref=e179]: HomeProz
- paragraph [ref=e180]: Your trusted partner in Minnesota real estate. Finding homes, building futures.
- generic [ref=e181]:
- link "Facebook" [ref=e182] [cursor=pointer]:
- /url: https://www.facebook.com/profile.php?id=61578834743321
- img [ref=e183]
- link "TikTok" [ref=e185] [cursor=pointer]:
- /url: https://www.tiktok.com/@homeproz.real.est
- img [ref=e186]
- generic [ref=e188]:
- heading "Quick Links" [level=4] [ref=e189]
- list [ref=e190]:
- listitem [ref=e191]:
- link "Home" [ref=e192] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/
- listitem [ref=e193]:
- link "Properties" [ref=e194] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/properties/
- listitem [ref=e195]:
- link "Agents" [ref=e196] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/agents/
- listitem [ref=e197]:
- link "About" [ref=e198] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/about/
- listitem [ref=e199]:
- link "Blog" [ref=e200] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/blog/
- listitem [ref=e201]:
- link "Contact" [ref=e202] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/contact/
- generic [ref=e203]:
- heading "Contact Us" [level=4] [ref=e204]
- list [ref=e205]:
- listitem [ref=e206]:
- img [ref=e207]
- link "507-516-4870" [ref=e209] [cursor=pointer]:
- /url: tel:5075164870
- listitem [ref=e210]:
- img [ref=e211]
- link "info@homeprozrealestate.com" [ref=e214] [cursor=pointer]:
- /url: mailto:info@homeprozrealestate.com
- listitem [ref=e215]:
- img [ref=e216]
- text: 111 E Clark St, Albert Lea, MN 56007
- generic [ref=e219]:
- heading "Office Hours" [level=4] [ref=e220]
- list [ref=e221]:
- listitem [ref=e222]: Mon-Fri 9:00am - 5:00pm
- listitem [ref=e223]: Saturday By Appointment
- listitem [ref=e224]: Sunday Closed
- generic [ref=e225]:
- generic [ref=e226]:
- generic "REALTOR" [ref=e227]:
- img "REALTOR" [ref=e228]:
- generic [ref=e229]: R
- generic "Equal Housing Opportunity" [ref=e231]:
- img "Equal Housing Opportunity" [ref=e232]
- paragraph [ref=e234]: "MN License #40229984"
- generic [ref=e235]:
- paragraph [ref=e236]: © 2025 HomeProz. All rights reserved.
- paragraph [ref=e237]:
- text: Powered by
- link "WordPress" [ref=e238] [cursor=pointer]:
- /url: https://developer.wordpress.org/
```
@@ -1,325 +0,0 @@
# Page snapshot
```yaml
- generic [ref=e2]:
- link "Skip to content" [ref=e3] [cursor=pointer]:
- /url: "#primary"
- banner [ref=e4]:
- generic [ref=e6]:
- link "HomeProz" [ref=e8] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/
- navigation "Primary Menu" [ref=e9]:
- list [ref=e10]:
- listitem [ref=e11]:
- link "Properties" [ref=e12] [cursor=pointer]:
- /url: /properties/
- listitem [ref=e13]:
- link "Communities" [ref=e14] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/communities/
- listitem [ref=e15]:
- link "About" [ref=e16] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/about/
- listitem [ref=e17]:
- link "Resources" [ref=e18] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/resources/
- listitem [ref=e19]:
- link "Contact" [ref=e20] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/contact/
- button "Menu" [ref=e21]: Menu
- link "507-516-4870" [ref=e23] [cursor=pointer]:
- /url: tel:5075164870
- navigation "Mobile Menu" [ref=e24]:
- list [ref=e25]:
- listitem [ref=e26]:
- link "Properties" [ref=e27] [cursor=pointer]:
- /url: /properties/
- listitem [ref=e28]:
- link "Communities" [ref=e29] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/communities/
- listitem [ref=e30]:
- link "About" [ref=e31] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/about/
- listitem [ref=e32]:
- link "Resources" [ref=e33] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/resources/
- listitem [ref=e34]:
- link "Contact" [ref=e35] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/contact/
- link "Call 507-516-4870" [ref=e37] [cursor=pointer]:
- /url: tel:5075164870
- main [ref=e38]:
- generic [ref=e40]:
- heading "Find Your Perfect Property" [level=1] [ref=e41]
- paragraph [ref=e42]: Browse our selection of homes, land, and commercial properties in southern Minnesota.
- generic [ref=e43]:
- generic [ref=e45]:
- generic [ref=e46]:
- generic [ref=e47]:
- text: Property Type
- combobox "Property Type" [ref=e48]:
- option "All Types" [selected]
- option "Commercial"
- option "Land"
- option "Multi-Family"
- option "Residential"
- generic [ref=e49]:
- text: Status
- combobox "Status" [ref=e50]:
- option "All Statuses" [selected]
- option "Active"
- option "Pending"
- option "Sold"
- generic [ref=e51]:
- text: Location
- combobox "Location" [ref=e52]:
- option "All Locations" [selected]
- option "Albert Lea"
- option "Alden"
- option "Austin"
- option "Clarks Grove"
- option "Emmons"
- option "Faribault"
- option "Geneva"
- option "Glenville"
- option "Hartland"
- option "Mankato"
- option "Owatonna"
- option "Rochester"
- generic [ref=e53]:
- text: Bedrooms
- combobox "Bedrooms" [ref=e54]:
- option "Any" [selected]
- option "1+"
- option "2+"
- option "3+"
- option "4+"
- option "5+"
- generic [ref=e55]:
- text: Price Range
- generic [ref=e56]:
- combobox [ref=e57]:
- option "Min Price" [selected]
- option "$50,000"
- option "$100,000"
- option "$150,000"
- option "$200,000"
- option "$250,000"
- option "$300,000"
- option "$400,000"
- option "$500,000"
- text: "-"
- combobox [ref=e58]:
- option "Max Price" [selected]
- option "$100,000"
- option "$150,000"
- option "$200,000"
- option "$250,000"
- option "$300,000"
- option "$400,000"
- option "$500,000"
- option "$750,000"
- option "$1,000,000+"
- generic [ref=e59]:
- generic [ref=e60]:
- text: Sort By
- combobox "Sort By" [ref=e61]:
- option "Newest First" [selected]
- option "Oldest First"
- 'option "Price: Low to High"'
- 'option "Price: High to Low"'
- button "Search" [ref=e62]
- link "Reset" [ref=e63] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/properties/
- generic [ref=e64]:
- link "Grid" [ref=e65] [cursor=pointer]:
- /url: /properties/
- img [ref=e66]
- text: Grid
- link "Map" [ref=e71] [cursor=pointer]:
- /url: /properties/?view=map
- img [ref=e72]
- text: Map
- generic [ref=e74]:
- paragraph [ref=e76]:
- text: Showing
- strong [ref=e77]: "6"
- text: properties
- generic [ref=e78]:
- article [ref=e79]:
- link "Pending" [ref=e80] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/properties/15131-800th-ave-glenville-mn/
- generic [ref=e81]:
- generic [ref=e82]: $150,000
- heading "15131 800th Ave, Glenville, MN" [level=3] [ref=e83]:
- link "15131 800th Ave, Glenville, MN" [ref=e84] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/properties/15131-800th-ave-glenville-mn/
- paragraph [ref=e85]: 23.87 Acres on the Shell Rock River - Buildable Site with Tillable, Wooded & Scenic...
- link "View Details" [ref=e86] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/properties/15131-800th-ave-glenville-mn/
- text: View Details
- img [ref=e87]
- article [ref=e89]:
- link "Active" [ref=e90] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/properties/1224-saint-joseph-ave-albert-lea-mn/
- generic [ref=e91]:
- generic [ref=e92]: $149,000
- heading "1224 Saint Joseph Ave, Albert Lea, MN" [level=3] [ref=e93]:
- link "1224 Saint Joseph Ave, Albert Lea, MN" [ref=e94] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/properties/1224-saint-joseph-ave-albert-lea-mn/
- list [ref=e95]:
- listitem [ref=e96]:
- img [ref=e97]
- text: 3 Beds
- listitem [ref=e99]:
- img [ref=e100]
- text: 1.5 Baths
- listitem [ref=e102]:
- img [ref=e103]
- text: 1,980 sqft
- paragraph [ref=e106]: Cozy 3-Bedroom Home on a Spacious Double Corner Lot!
- link "View Details" [ref=e107] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/properties/1224-saint-joseph-ave-albert-lea-mn/
- text: View Details
- img [ref=e108]
- article [ref=e110]:
- link "Active" [ref=e111] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/properties/411-court-st-albert-lea-mn/
- generic [ref=e112]:
- generic [ref=e113]: $180,000
- heading "411 Court St, Albert Lea, MN" [level=3] [ref=e114]:
- link "411 Court St, Albert Lea, MN" [ref=e115] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/properties/411-court-st-albert-lea-mn/
- list [ref=e116]:
- listitem [ref=e117]:
- img [ref=e118]
- text: 3 Beds
- listitem [ref=e120]:
- img [ref=e121]
- text: 4 Baths
- listitem [ref=e123]:
- img [ref=e124]
- text: 3,506 sqft
- paragraph [ref=e127]: Fantastic 4-Plex Investment Opportunity! Strong cash flow from day one.
- link "View Details" [ref=e128] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/properties/411-court-st-albert-lea-mn/
- text: View Details
- img [ref=e129]
- article [ref=e131]:
- link "Active" [ref=e132] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/properties/115-n-newton-ave-albert-lea-mn/
- generic [ref=e133]:
- generic [ref=e134]: $259,900
- heading "115 N Newton Ave, Albert Lea, MN" [level=3] [ref=e135]:
- link "115 N Newton Ave, Albert Lea, MN" [ref=e136] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/properties/115-n-newton-ave-albert-lea-mn/
- list [ref=e137]:
- listitem [ref=e138]:
- img [ref=e139]
- text: 3 Beds
- listitem [ref=e141]:
- img [ref=e142]
- text: 2 Baths
- listitem [ref=e144]:
- img [ref=e145]
- text: 3,496 sqft
- paragraph [ref=e148]: Turn Key - Move In Ready!! Modern luxury meets unbeatable location.
- link "View Details" [ref=e149] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/properties/115-n-newton-ave-albert-lea-mn/
- text: View Details
- img [ref=e150]
- article [ref=e152]:
- link "Active" [ref=e153] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/properties/geneva-mn-double-lot-with-shop/
- generic [ref=e154]:
- generic [ref=e155]: $134,900
- heading "Main Street, Geneva, MN" [level=3] [ref=e156]:
- link "Main Street, Geneva, MN" [ref=e157] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/properties/geneva-mn-double-lot-with-shop/
- paragraph [ref=e158]: Double Lot with a Shop! Beautifully redone building with a lot of potential.
- link "View Details" [ref=e159] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/properties/geneva-mn-double-lot-with-shop/
- text: View Details
- img [ref=e160]
- article [ref=e162]:
- link "Active" [ref=e163] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/properties/123-main-street/
- img [ref=e165]
- text: Active
- generic [ref=e168]:
- generic [ref=e169]: Contact for Price
- heading "123 Main Street" [level=3] [ref=e170]:
- link "123 Main Street" [ref=e171] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/properties/123-main-street/
- link "View Details" [ref=e172] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/properties/123-main-street/
- text: View Details
- img [ref=e173]
- contentinfo [ref=e175]:
- generic [ref=e176]:
- generic [ref=e177]:
- generic [ref=e178]:
- generic [ref=e179]: HomeProz
- paragraph [ref=e180]: Your trusted partner in Minnesota real estate. Finding homes, building futures.
- generic [ref=e181]:
- link "Facebook" [ref=e182] [cursor=pointer]:
- /url: https://www.facebook.com/profile.php?id=61578834743321
- img [ref=e183]
- link "TikTok" [ref=e185] [cursor=pointer]:
- /url: https://www.tiktok.com/@homeproz.real.est
- img [ref=e186]
- generic [ref=e188]:
- heading "Quick Links" [level=4] [ref=e189]
- list [ref=e190]:
- listitem [ref=e191]:
- link "Home" [ref=e192] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/
- listitem [ref=e193]:
- link "Properties" [ref=e194] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/properties/
- listitem [ref=e195]:
- link "Agents" [ref=e196] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/agents/
- listitem [ref=e197]:
- link "About" [ref=e198] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/about/
- listitem [ref=e199]:
- link "Blog" [ref=e200] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/blog/
- listitem [ref=e201]:
- link "Contact" [ref=e202] [cursor=pointer]:
- /url: https://homeproz.dev.hanson.xyz/contact/
- generic [ref=e203]:
- heading "Contact Us" [level=4] [ref=e204]
- list [ref=e205]:
- listitem [ref=e206]:
- img [ref=e207]
- link "507-516-4870" [ref=e209] [cursor=pointer]:
- /url: tel:5075164870
- listitem [ref=e210]:
- img [ref=e211]
- link "info@homeprozrealestate.com" [ref=e214] [cursor=pointer]:
- /url: mailto:info@homeprozrealestate.com
- listitem [ref=e215]:
- img [ref=e216]
- text: 111 E Clark St, Albert Lea, MN 56007
- generic [ref=e219]:
- heading "Office Hours" [level=4] [ref=e220]
- list [ref=e221]:
- listitem [ref=e222]: Mon-Fri 9:00am - 5:00pm
- listitem [ref=e223]: Saturday By Appointment
- listitem [ref=e224]: Sunday Closed
- generic [ref=e225]:
- generic [ref=e226]:
- generic "REALTOR" [ref=e227]:
- img "REALTOR" [ref=e228]:
- generic [ref=e229]: R
- generic "Equal Housing Opportunity" [ref=e231]:
- img "Equal Housing Opportunity" [ref=e232]
- paragraph [ref=e234]: "MN License #40229984"
- generic [ref=e235]:
- paragraph [ref=e236]: © 2025 HomeProz. All rights reserved.
- paragraph [ref=e237]:
- text: Powered by
- link "WordPress" [ref=e238] [cursor=pointer]:
- /url: https://developer.wordpress.org/
```
Binary file not shown.

After

Width:  |  Height:  |  Size: 642 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 MiB

File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+20
View File
@@ -64,6 +64,25 @@ $featured_commercial = new WP_Query(array(
$fallback_image = get_template_directory_uri() . '/assets/images/hero.webp'; $fallback_image = get_template_directory_uri() . '/assets/images/hero.webp';
$logo_cropped = get_template_directory_uri() . '/assets/images/logo-cropped.webp'; $logo_cropped = get_template_directory_uri() . '/assets/images/logo-cropped.webp';
// Build gallery images array for desktop hero rotation
// Include the original hero plus the 5 additional gallery images
$gallery_source_images = array(
'assets/images/hero-original.png',
'assets/images/hero-gallery/hero-2.png',
'assets/images/hero-gallery/hero-3.png',
'assets/images/hero-gallery/hero-4.jpg',
'assets/images/hero-gallery/hero-5.png',
'assets/images/hero-gallery/hero-6.png',
);
$gallery_images = array();
foreach ($gallery_source_images as $source) {
$transformed = homeproz_get_transformed_theme_image($source, 30, 2560, 90);
if ($transformed) {
$gallery_images[] = $transformed;
}
}
// Design 2: Two-column split (shown >= 1450px) // Design 2: Two-column split (shown >= 1450px)
?> ?>
<div class="hero-desktop-only"> <div class="hero-desktop-only">
@@ -78,6 +97,7 @@ $featured_commercial = new WP_Query(array(
'secondary_cta_text' => 'Contact Us', 'secondary_cta_text' => 'Contact Us',
'secondary_cta_url' => home_url('/contact/'), 'secondary_cta_url' => home_url('/contact/'),
'background_image' => $hero_image_split ?: $fallback_image, 'background_image' => $hero_image_split ?: $fallback_image,
'gallery_images' => $gallery_images,
'size' => 'large', 'size' => 'large',
)); ));
?> ?>
+1
View File
@@ -8,6 +8,7 @@ import './main.scss';
// Import component JS // Import component JS
import '../template-parts/header/navigation.js'; import '../template-parts/header/navigation.js';
import '../template-parts/components/hero-section.js';
import '../template-parts/property/property-filters.js'; import '../template-parts/property/property-filters.js';
import '../template-parts/property/property-gallery.js'; import '../template-parts/property/property-gallery.js';
@@ -0,0 +1,168 @@
/**
* Hero Section Gallery - Image Rotation
*
* Rotates hero background images with fade transition.
* Only active at >= 1450px breakpoint. Pauses/resumes on resize.
* Only preloads images when at desktop breakpoint to save mobile bandwidth.
*
* @package HomeProz
*/
(function($) {
'use strict';
// Configuration
var ROTATION_INTERVAL = 6000; // milliseconds between image swaps
var BREAKPOINT = 1450; // minimum width for gallery to be active
var FADE_DURATION = 1000; // milliseconds for fade transition
// State
var galleryImages = [];
var currentIndex = 0;
var rotationTimer = null;
var isActive = false;
var imagesPreloaded = false;
var $heroImageElement = null;
/**
* Initialize the hero gallery
*/
function init() {
// Only run on homepage with split hero
if (!$('.Home_Page').length) return;
$heroImageElement = $('.hero-split-image');
if (!$heroImageElement.length) return;
// Get gallery images from data attribute
var imagesData = $heroImageElement.data('gallery-images');
if (!imagesData || !imagesData.length) return;
galleryImages = imagesData;
// Check initial viewport width
checkBreakpoint();
// Listen for resize events
$(window).on('resize', debounce(checkBreakpoint, 150));
}
/**
* Check if we're at the desktop breakpoint and start/stop accordingly
*/
function checkBreakpoint() {
var windowWidth = $(window).width();
if (windowWidth >= BREAKPOINT) {
if (!isActive) {
startGallery();
}
} else {
if (isActive) {
stopGallery();
}
}
}
/**
* Start the gallery rotation
*/
function startGallery() {
isActive = true;
// Preload images only when entering desktop mode (saves mobile bandwidth)
if (!imagesPreloaded) {
preloadImages();
imagesPreloaded = true;
}
// Start rotation timer
rotationTimer = setInterval(rotateImage, ROTATION_INTERVAL);
}
/**
* Stop the gallery rotation
*/
function stopGallery() {
isActive = false;
if (rotationTimer) {
clearInterval(rotationTimer);
rotationTimer = null;
}
}
/**
* Preload all gallery images using detached img elements
*/
function preloadImages() {
$.each(galleryImages, function(index, imageUrl) {
var img = new Image();
img.src = imageUrl;
});
}
/**
* Rotate to the next image with fade transition
*/
function rotateImage() {
// Move to next image
currentIndex = (currentIndex + 1) % galleryImages.length;
var nextImage = galleryImages[currentIndex];
// Create overlay element for crossfade
var $overlay = $('<div class="hero-split-image-overlay"></div>');
$overlay.css({
'position': 'absolute',
'top': 0,
'left': 0,
'right': 0,
'bottom': 0,
'background-image': 'url(' + nextImage + ')',
'background-size': 'cover',
'background-position': 'center center',
'background-repeat': 'no-repeat',
'opacity': 0,
'transform': 'scale(1.02)',
'transition': 'opacity ' + FADE_DURATION + 'ms ease-in-out, transform ' + FADE_DURATION + 'ms ease-in-out',
'z-index': 1
});
// Ensure hero image container has relative positioning
$heroImageElement.css('position', 'relative');
// Append overlay
$heroImageElement.append($overlay);
// Trigger reflow then animate
$overlay[0].offsetHeight; // Force reflow
$overlay.css({
'opacity': 1,
'transform': 'scale(1)'
});
// After transition, update background and remove overlay
setTimeout(function() {
$heroImageElement.css('background-image', 'url(' + nextImage + ')');
$overlay.remove();
}, FADE_DURATION);
}
/**
* Simple debounce function
*/
function debounce(func, wait) {
var timeout;
return function() {
var context = this, args = arguments;
clearTimeout(timeout);
timeout = setTimeout(function() {
func.apply(context, args);
}, wait);
};
}
// Initialize when DOM is ready
$(document).ready(init);
})(jQuery);
@@ -13,6 +13,7 @@
* - secondary_cta_text (string): Secondary button text * - secondary_cta_text (string): Secondary button text
* - secondary_cta_url (string): Secondary button URL * - secondary_cta_url (string): Secondary button URL
* - background_image (string): Background image URL * - background_image (string): Background image URL
* - gallery_images (array): Array of image URLs for rotation gallery
* - size (string): 'large' or 'small' (default: 'large') * - size (string): 'large' or 'small' (default: 'large')
* - show_location_search (bool): Show location search dropdown (default: false) * - show_location_search (bool): Show location search dropdown (default: false)
*/ */
@@ -31,11 +32,15 @@ $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_text = isset($args['secondary_cta_text']) ? $args['secondary_cta_text'] : '';
$secondary_cta_url = isset($args['secondary_cta_url']) ? $args['secondary_cta_url'] : ''; $secondary_cta_url = isset($args['secondary_cta_url']) ? $args['secondary_cta_url'] : '';
$background_image = isset($args['background_image']) ? $args['background_image'] : ''; $background_image = isset($args['background_image']) ? $args['background_image'] : '';
$gallery_images = isset($args['gallery_images']) ? $args['gallery_images'] : array();
$size = isset($args['size']) ? $args['size'] : 'large'; $size = isset($args['size']) ? $args['size'] : 'large';
$show_location_search = isset($args['show_location_search']) ? $args['show_location_search'] : false; $show_location_search = isset($args['show_location_search']) ? $args['show_location_search'] : false;
$size_class = $size === 'small' ? 'hero-section--small' : 'hero-section--large'; $size_class = $size === 'small' ? 'hero-section--small' : 'hero-section--large';
// Prepare gallery data attribute for JS
$gallery_data = !empty($gallery_images) ? esc_attr(wp_json_encode($gallery_images)) : '';
// Get locations for dropdown if needed // Get locations for dropdown if needed
$locations = array(); $locations = array();
if ($show_location_search) { if ($show_location_search) {
@@ -103,5 +108,8 @@ if ($show_location_search) {
<?php endif; ?> <?php endif; ?>
</div> </div>
</div> </div>
<div class="hero-split-image" <?php echo $background_image ? 'style="background-image: url(' . esc_url($background_image) . ');"' : ''; ?>></div> <div class="hero-split-image"
<?php echo $background_image ? 'style="background-image: url(' . esc_url($background_image) . ');"' : ''; ?>
<?php echo $gallery_data ? 'data-gallery-images="' . $gallery_data . '"' : ''; ?>
></div>
</section> </section>
@@ -66,6 +66,8 @@
background-size: cover; background-size: cover;
background-position: center center; background-position: center center;
background-repeat: no-repeat; background-repeat: no-repeat;
position: relative;
overflow: hidden;
@media (max-width: 768px) { @media (max-width: 768px) {
width: 100%; width: 100%;