# HomeProz WordPress Website Design Document
## Draft v1.0 - For Review

---

## 1. Executive Summary

This document outlines the recommended design approach for the new HomeProz WordPress website. The design will maintain the client's established brand identity while modernizing the presentation and improving user experience through better organization, clearer hierarchy, and enhanced property listing functionality.

---

## 2. Current Site Analysis

### 2.1 Existing Site Overview
- **Platform**: GoDaddy Website Builder 8.0
- **URL**: https://homeprozrealestate.com/
- **Structure**: Single-page scrolling site with sections

### 2.2 Current Sections (in order)
1. Header with logo and hamburger menu
2. Hero section - "Find Your Dream Home Today"
3. Current Listings carousel (circular images)
4. Our Mission statement
5. Meet Our Agents (team profiles)
6. Testimonials
7. Contact form
8. Office location & phone numbers
9. Social media links (Facebook, TikTok)
10. Photo gallery
11. Footer with legal/copyright

### 2.3 Current Brand Elements

#### Color Palette
| Color | Hex Code | Usage |
|-------|----------|-------|
| Primary Dark | `#000000` | Background |
| Accent Red/Rust | `#9F3730` | Buttons, accents |
| Accent Light | `#BF524B` | Links |
| Hover State | `#EA9491` | Link hover |
| Text Light | `#E2E2E2` | Body text |
| White | `#FFFFFF` | Headings, highlights |

#### Typography
| Element | Font | Weight |
|---------|------|--------|
| Headlines | Abril Fatface | 400 |
| Body Text | Droid Sans | 400, 700 |

### 2.4 Current Strengths
- Clean, minimalist dark aesthetic
- Clear brand colors (rust/terracotta accent)
- Professional team photos
- Mobile responsive
- Contact information prominent

### 2.5 Current Weaknesses
- Property listings link to external sites (Zillow, HomeFinder)
- No internal property detail pages
- Limited search/filter functionality
- Circular crop on property images loses context
- No MLS integration or property management
- Cookie consent popup needs styling improvement
- Footer is cluttered with legal text
- Limited SEO capabilities

---

## 3. Recommended Design Direction

### 3.1 Design Philosophy
**"Modern Minimalist Real Estate"** - Retain the sophisticated dark theme while adding:
- Better visual hierarchy
- Improved property presentation
- Professional real estate conventions
- Enhanced usability

### 3.2 Refined Color Palette

| Color | Hex Code | CSS Variable | Usage |
|-------|----------|--------------|-------|
| Background Dark | `#0A0A0A` | `--color-bg-dark` | Primary background (slightly softer than pure black) |
| Background Card | `#161616` | `--color-bg-card` | Card backgrounds, elevated surfaces |
| Accent Primary | `#9F3730` | `--color-accent` | CTAs, buttons, highlights |
| Accent Hover | `#C8473F` | `--color-accent-hover` | Button hover states |
| Accent Light | `#BF524B` | `--color-accent-light` | Links, secondary accents |
| Text Primary | `#F5F5F5` | `--color-text` | Headlines, primary text |
| Text Secondary | `#B0B0B0` | `--color-text-muted` | Body text, descriptions |
| Border | `#2A2A2A` | `--color-border` | Subtle borders, dividers |
| Success | `#2E7D32` | `--color-success` | Active listings |
| Warning | `#F9A825` | `--color-pending` | Pending listings |
| Muted | `#757575` | `--color-sold` | Sold listings |

### 3.3 Typography System

```css
/* Headings */
--font-display: 'Abril Fatface', Georgia, serif;

/* Body */
--font-body: 'Inter', 'Droid Sans', Arial, sans-serif;

/* Scale */
--text-xs: 0.75rem;    /* 12px */
--text-sm: 0.875rem;   /* 14px */
--text-base: 1rem;     /* 16px */
--text-lg: 1.125rem;   /* 18px */
--text-xl: 1.25rem;    /* 20px */
--text-2xl: 1.5rem;    /* 24px */
--text-3xl: 1.875rem;  /* 30px */
--text-4xl: 2.25rem;   /* 36px */
--text-5xl: 3rem;      /* 48px */
--text-6xl: 3.75rem;   /* 60px */
```

**Recommendation**: Consider upgrading from Droid Sans to Inter for body text - it's more modern, has excellent readability, and better web optimization. Abril Fatface remains perfect for display headings.

---

## 4. Page Structure & Layout

### 4.1 Site Architecture

```
Homepage
├── Properties (Listings Archive)
│   ├── Property Detail Page (single-property.php)
│   └── ...
├── Communities (NEW - location-based pages)
│   ├── Albert Lea
│   ├── Austin
│   ├── Glenville
│   ├── Emmons
│   └── [other served areas]
├── About Us
│   └── Individual Agent Pages (optional)
├── Resources (NEW - buyer/seller guides)
│   ├── Buyer's Guide
│   ├── Seller's Guide
│   └── Market Info
├── Blog/News (archive + single posts)
│   └── Blog Post (single.php)
├── Contact
└── Legal Pages (Privacy Policy, Terms)
```

> **Note**: Site structure expanded based on competitor analysis (Robert Hoffman Realty). Communities and Resources sections add SEO value and demonstrate local market expertise.

### 4.2 WordPress Template Hierarchy

The theme will include the following template files:

| Template File | Purpose |
|---------------|---------|
| `front-page.php` | Homepage (static front page) |
| `page.php` | Default page template |
| `page-contact.php` | Contact page with form + map |
| `page-about.php` | About/Team page |
| `single.php` | Blog post template |
| `single-property.php` | Property detail page |
| `archive.php` | Blog archive (news/articles) |
| `archive-property.php` | Property listings archive |
| `search.php` | Search results |
| `404.php` | Not found page |
| `header.php` | Global header |
| `footer.php` | Global footer |
| `page-community.php` | Community/location page template (NEW) |
| `page-resources.php` | Resources landing page (NEW) |
| `template-resource.php` | Individual resource page (guides) (NEW) |

### 4.3 Page Templates (User-Selectable)

These templates will be available in the WordPress page editor:

| Template Name | File | Use Case |
|---------------|------|----------|
| Default | `page.php` | Standard content pages |
| Full Width | `template-full-width.php` | Pages without sidebar |
| Landing Page | `template-landing.php` | Marketing/campaign pages (no header/footer nav) |
| Blank Canvas | `template-blank.php` | Full control with block editor |
| Content + Sidebar | `template-sidebar.php` | Blog-style layout |

### 4.2 Homepage Layout (Top to Bottom)

> **Updated based on Robert Hoffman Realty competitor analysis**

#### Section 1: Header (Sticky)
- Logo (left)
- Navigation: Properties | Communities | About | Resources | Contact (center/right)
- Phone number CTA button (right)
- Mobile: Hamburger menu

#### Section 2: Hero
- Full-width background image/video (local landmark or property photo)
- Headline: "Find Your Dream Home Today" (Abril Fatface)
- Subheadline: "Expert Real Estate Services in Southern Minnesota"
- **Location Search Dropdown** (NEW): Select community to browse properties
- Primary CTA: "Search Properties" button
- Secondary CTA: "Contact Us" button

#### Section 3: Service Cards (NEW)
- Section title: "How Can We Help?"
- 3-column layout:
  - **Find a Home**: Description + "Search Now" button
  - **Find a Rental**: Description + "Start Here" button
  - **Sell Your Home**: Description + "Get Your Home's Value" button
- Each card has brief description of service

#### Section 4: Featured Residential Listings
- Section title: "Featured Homes"
- Property cards in carousel/grid (3 visible, arrows to scroll)
- Shows: Price, Address, Beds, Baths, SqFt, Status badge
- "View All Residential" link

#### Section 5: Featured Commercial/Land Listings (NEW - separate section)
- Section title: "Commercial & Land"
- Property cards in carousel/grid (3 visible)
- Shows: Price, Address, Units/Acres, Type badge
- "View All Commercial" link

#### Section 6: Why Choose HomeProz
- Section title: "Why HomeProz"
- 3-column feature blocks with icons:
  - Local Expertise
  - Personalized Service
  - Results-Driven
- Mission statement text

#### Section 7: Meet the Team
- Section title: "Meet Our Agents"
- Agent cards in grid (4 columns desktop)
- Each card: Photo, Name, Title, Phone, Email
- Hover effect reveals bio snippet

#### Section 8: Testimonials
- Section title: "What Our Clients Say"
- Testimonial carousel/slider
- Client name and transaction type
- (Note: RHR lacks testimonials - this is a competitive advantage)

#### Section 9: Contact CTA
- Split layout: Form (left) | Map + Info (right)
- Contact form fields: Name, Email, Phone, Message
- Office address, phone numbers, **office hours** (NEW)
- Embedded Google Map

#### Section 10: Footer
- Logo
- Quick links (Properties, Communities, About, Resources, Contact)
- Contact info with office hours
- Social media icons
- **Professional association logos** (NEW): REALTOR, Equal Housing, local MLS
- **License numbers** (NEW)
- Legal text (copyright, DBA, broker info)

### 4.3 Properties Archive Page

> **Updated based on Robert Hoffman Realty competitor analysis**

- Hero: "Browse Our Properties"
- **Location search dropdown** prominently in hero
- **Map + Grid split view** (NEW):
  - Left (1/3): Interactive map with property markers
  - Right (2/3): Property grid
  - Toggle: "Map View" | "Grid View" for mobile
- Filter bar (horizontal, above results):
  - [Type dropdown] [Price dropdown] [Beds dropdown] [Status dropdown] [Clear Filters]
- Property grid with pagination
- Sort options (Price High/Low, Newest, etc.)
- Results count: "XX Properties Found"

```
+------------------------------------------+
| HEADER                                    |
+------------------------------------------+
| Hero: "Browse Our Properties"             |
| [Location Dropdown] [Search Button]       |
+------------------------------------------+
| [Type v] [Price v] [Beds v] [Status v]   |
+------------------------------------------+
| XX Properties Found         [Sort: v]    |
+------------------------------------------+
| +------------+ +------------------------+|
| |            | | +------+ +------+ +--+ ||
| |   MAP      | | |Prop  | |Prop  | |  | ||
| |   with     | | |Card  | |Card  | |  | ||
| |   markers  | | +------+ +------+ +--+ ||
| |            | | +------+ +------+ +--+ ||
| |            | | |Prop  | |Prop  | |  | ||
| |            | | |Card  | |Card  | |  | ||
| +------------+ +------------------------+|
+------------------------------------------+
| [Pagination]                              |
+------------------------------------------+
```

### 4.4 Property Detail Page

```
┌─────────────────────────────────────────────────┐
│ [Breadcrumb: Home > Properties > Address]       │
├─────────────────────────────────────────────────┤
│ ┌─────────────────────┐ ┌─────────────────────┐ │
│ │                     │ │ $XXX,XXX            │ │
│ │   Main Photo        │ │ 123 Main Street     │ │
│ │   Gallery           │ │ City, MN 56007      │ │
│ │                     │ │                     │ │
│ │                     │ │ 🛏 3 Beds | 🛁 2 Bath │ │
│ │                     │ │ 📐 1,500 sq ft      │ │
│ │                     │ │ MLS# 12345          │ │
│ │                     │ │                     │ │
│ │ [Thumbnail strip]   │ │ [Contact Agent]     │ │
│ └─────────────────────┘ │ [Schedule Showing]  │ │
│                         └─────────────────────┘ │
├─────────────────────────────────────────────────┤
│ Property Description                            │
│ ────────────────────                            │
│ Lorem ipsum dolor sit amet...                   │
├─────────────────────────────────────────────────┤
│ Features & Amenities                            │
│ ────────────────────                            │
│ • Feature 1  • Feature 4  • Feature 7          │
│ • Feature 2  • Feature 5  • Feature 8          │
│ • Feature 3  • Feature 6  • Feature 9          │
├─────────────────────────────────────────────────┤
│ Location                                        │
│ ────────────────────                            │
│ [Embedded Google Map]                           │
├─────────────────────────────────────────────────┤
│ Listed By                                       │
│ ────────────────────                            │
│ [Agent Photo] Agent Name | Phone | Email        │
└─────────────────────────────────────────────────┘
```

---

## 5. Detailed Template Specifications

### 5.1 Homepage Template (`front-page.php`)

A modular homepage built with reusable sections. Each section can be toggled on/off via theme options.

**Sections (in order):**
1. Hero Section (full-width image/video + headline + CTAs)
2. Featured Properties Grid (3 most recent active listings)
3. Value Proposition / Why Choose Us (3-column icon blocks)
4. About Preview (brief intro + link to About page)
5. Team Preview (agent cards grid)
6. Testimonials Carousel
7. Contact CTA Section (form + map)
8. Footer

### 5.2 Default Page Template (`page.php`)

Standard content page with consistent structure:

```
┌─────────────────────────────────────────────────┐
│ HEADER                                          │
├─────────────────────────────────────────────────┤
│ Page Hero (optional)                            │
│ ┌─────────────────────────────────────────────┐ │
│ │ Page Title (h1)                             │ │
│ │ Optional subtitle/breadcrumb                │ │
│ └─────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────┤
│ Content Area                                    │
│ ┌─────────────────────────────────────────────┐ │
│ │                                             │ │
│ │  Block Editor Content                       │ │
│ │  (constrained width: 800px max)             │ │
│ │                                             │ │
│ └─────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────┤
│ FOOTER                                          │
└─────────────────────────────────────────────────┘
```

**Features:**
- Clean, readable content width (65-75 characters per line)
- Supports all core WordPress blocks
- Optional featured image as page hero
- Breadcrumb navigation

### 5.3 Full Width Template (`template-full-width.php`)

For pages that need edge-to-edge content:

**Use Cases:**
- Image galleries
- Portfolio pages
- Pages with custom layouts via blocks
- Wide comparison tables

**Differences from Default:**
- No max-width constraint on content
- Full-bleed image support
- Better for Gutenberg group blocks with backgrounds

### 5.4 Landing Page Template (`template-landing.php`)

Distraction-free template for marketing campaigns:

```
┌─────────────────────────────────────────────────┐
│ Minimal Header (logo only, no nav)              │
├─────────────────────────────────────────────────┤
│                                                 │
│              FULL CONTENT AREA                  │
│         (no sidebar, focused design)            │
│                                                 │
│         Designed for conversion:                │
│         - Hero with single CTA                  │
│         - Benefits list                         │
│         - Social proof                          │
│         - Form or contact CTA                   │
│                                                 │
├─────────────────────────────────────────────────┤
│ Minimal Footer (legal links only)               │
└─────────────────────────────────────────────────┘
```

**Use Cases:**
- Property-specific landing pages
- Seasonal promotions ("Spring Listings!")
- Buyer/Seller guides with lead capture
- Ad campaign destinations

### 5.5 About/Team Page Template (`page-about.php`)

Specialized template for company and team information:

```
┌─────────────────────────────────────────────────┐
│ HEADER                                          │
├─────────────────────────────────────────────────┤
│ Page Hero with Company Photo                    │
├─────────────────────────────────────────────────┤
│ Company Story Section                           │
│ (Block editor content area)                     │
├─────────────────────────────────────────────────┤
│ Our Values / Mission                            │
│ (3-column layout with icons)                    │
├─────────────────────────────────────────────────┤
│ Meet the Team                                   │
│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐                │
│ │Agent│ │Agent│ │Agent│ │Agent│                │
│ │Card │ │Card │ │Card │ │Card │                │
│ └─────┘ └─────┘ └─────┘ └─────┘                │
│ (Auto-populated from Team CPT or ACF)          │
├─────────────────────────────────────────────────┤
│ Broker Information                              │
├─────────────────────────────────────────────────┤
│ Contact CTA                                     │
├─────────────────────────────────────────────────┤
│ FOOTER                                          │
└─────────────────────────────────────────────────┘
```

### 5.6 Contact Page Template (`page-contact.php`)

Dedicated contact page with form and location info:

```
┌─────────────────────────────────────────────────┐
│ HEADER                                          │
├─────────────────────────────────────────────────┤
│ "Get In Touch" Hero                             │
├─────────────────────────────────────────────────┤
│ ┌───────────────────┐ ┌───────────────────────┐ │
│ │                   │ │                       │ │
│ │   Contact Form    │ │   Contact Info        │ │
│ │                   │ │   - Address           │ │
│ │   Name            │ │   - Phone             │ │
│ │   Email           │ │   - Email             │ │
│ │   Phone           │ │   - Hours             │ │
│ │   Message         │ │                       │ │
│ │                   │ │   [Google Map]        │ │
│ │   [Send Message]  │ │                       │ │
│ │                   │ │                       │ │
│ └───────────────────┘ └───────────────────────┘ │
├─────────────────────────────────────────────────┤
│ Additional Content (optional)                   │
│ (Block editor area for FAQs, etc.)              │
├─────────────────────────────────────────────────┤
│ FOOTER                                          │
└─────────────────────────────────────────────────┘
```

### 5.7 Property Archive Template (`archive-property.php`)

Listings page with search and filters:

```
┌─────────────────────────────────────────────────┐
│ HEADER                                          │
├─────────────────────────────────────────────────┤
│ Hero: "Browse Our Properties"                   │
│ [Search Bar]                                    │
├─────────────────────────────────────────────────┤
│ Filter Bar                                      │
│ [Type ▼] [Price ▼] [Beds ▼] [Status ▼] [Clear] │
├─────────────────────────────────────────────────┤
│ Results: XX Properties Found    [Sort: Recent ▼]│
├─────────────────────────────────────────────────┤
│ ┌─────────┐ ┌─────────┐ ┌─────────┐            │
│ │Property │ │Property │ │Property │            │
│ │ Card    │ │ Card    │ │ Card    │            │
│ └─────────┘ └─────────┘ └─────────┘            │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐            │
│ │Property │ │Property │ │Property │            │
│ │ Card    │ │ Card    │ │ Card    │            │
│ └─────────┘ └─────────┘ └─────────┘            │
├─────────────────────────────────────────────────┤
│ Pagination: [< Prev] [1] [2] [3] [Next >]       │
├─────────────────────────────────────────────────┤
│ FOOTER                                          │
└─────────────────────────────────────────────────┘
```

**Filter Options:**
- Property Type: Residential, Commercial, Land, Multi-Family
- Price Range: Slider or preset ranges
- Bedrooms: Any, 1+, 2+, 3+, 4+
- Bathrooms: Any, 1+, 2+, 3+
- Status: Active, Pending, Sold, All
- Location/City: Dropdown of available cities

### 5.8 Single Property Template (`single-property.php`)

Detailed property view (see Section 4.6 for layout).

**Key Features:**
- Photo gallery with lightbox
- Property details sidebar (sticky on scroll)
- Tabbed content: Description | Features | Location
- Agent contact card
- Related/Similar properties
- Share buttons
- Print-friendly version option

### 5.9 Blog Archive Template (`archive.php`)

Blog/News listing page:

```
┌─────────────────────────────────────────────────┐
│ HEADER                                          │
├─────────────────────────────────────────────────┤
│ Hero: "News & Insights"                         │
├─────────────────────────────────────────────────┤
│ ┌──────────────────────┐ ┌──────────────────┐  │
│ │                      │ │ Sidebar          │  │
│ │  Post Cards Grid     │ │ - Search         │  │
│ │  ┌──────┐ ┌──────┐   │ │ - Categories     │  │
│ │  │ Post │ │ Post │   │ │ - Recent Posts   │  │
│ │  └──────┘ └──────┘   │ │ - Contact CTA    │  │
│ │  ┌──────┐ ┌──────┐   │ │                  │  │
│ │  │ Post │ │ Post │   │ │                  │  │
│ │  └──────┘ └──────┘   │ │                  │  │
│ │                      │ │                  │  │
│ └──────────────────────┘ └──────────────────┘  │
├─────────────────────────────────────────────────┤
│ Pagination                                      │
├─────────────────────────────────────────────────┤
│ FOOTER                                          │
└─────────────────────────────────────────────────┘
```

**Post Card Design:**
- Featured image (16:9)
- Category tag
- Post title
- Excerpt (2-3 lines)
- Date + Read time
- "Read More" link

### 5.10 Blog Post Template (`single.php`)

Blog/news article page:

```
┌─────────────────────────────────────────────────┐
│ HEADER                                          │
├─────────────────────────────────────────────────┤
│ Featured Image (full-width)                     │
├─────────────────────────────────────────────────┤
│ ┌─────────────────────────────────────────────┐ │
│ │ Post Title (h1)                             │ │
│ │ Date | Author | Category                    │ │
│ └─────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────┤
│ ┌──────────────────────┐ ┌──────────────────┐  │
│ │                      │ │ Sidebar          │  │
│ │  Post Content        │ │ - Search         │  │
│ │  (Block editor)      │ │ - Categories     │  │
│ │                      │ │ - Recent Posts   │  │
│ │                      │ │ - Contact CTA    │  │
│ │                      │ │                  │  │
│ └──────────────────────┘ └──────────────────┘  │
├─────────────────────────────────────────────────┤
│ Author Bio Box                                  │
├─────────────────────────────────────────────────┤
│ Related Posts (3 cards)                         │
├─────────────────────────────────────────────────┤
│ FOOTER                                          │
└─────────────────────────────────────────────────┘
```

### 5.11 404 Page Template (`404.php`)

User-friendly error page:

- Friendly message: "Oops! Page not found"
- Search bar
- Quick links to: Home, Properties, Contact
- Recent/Featured properties
- Maintains brand styling

### 5.12 Search Results Template (`search.php`)

- Shows results from all searchable content
- Filters by content type (Pages, Properties, Posts)
- Property results show as cards
- Page/Post results show as list items

### 5.13 Community Page Template (`page-community.php`) (NEW)

Location-based pages for each served community (SEO benefit + local expertise):

```
+------------------------------------------+
| HEADER                                    |
+------------------------------------------+
| Hero: "[Community Name], Minnesota"       |
| Photo of local landmark or neighborhood   |
+------------------------------------------+
| About [Community Name]                    |
| Brief description of the area, amenities, |
| schools, attractions, lifestyle.          |
+------------------------------------------+
| Properties in [Community Name]            |
| +--------+ +--------+ +--------+          |
| | Prop   | | Prop   | | Prop   |          |
| | Card   | | Card   | | Card   |          |
| +--------+ +--------+ +--------+          |
| [View All Properties in Community Name]   |
+------------------------------------------+
| Local Information (optional)              |
| - Population, ZIP codes                   |
| - School district links                   |
| - Local attractions                       |
+------------------------------------------+
| Contact CTA                               |
| "Looking for a home in [Community]?"      |
+------------------------------------------+
| FOOTER                                    |
+------------------------------------------+
```

**Communities to create pages for:**
- Albert Lea (primary)
- Austin
- Glenville
- Emmons
- Clarks Grove
- Alden
- Hartland
- Geneva
- Hollandale
- Hayward
- Conger

### 5.14 Resources Landing Page (`page-resources.php`) (NEW)

Hub page for buyer/seller resources:

```
+------------------------------------------+
| HEADER                                    |
+------------------------------------------+
| Hero: "Resources & Guides"                |
| "Everything you need to buy or sell"      |
+------------------------------------------+
| +------------------+ +------------------+ |
| | Buyer's Guide    | | Seller's Guide   | |
| | [Image]          | | [Image]          | |
| | Description      | | Description      | |
| | [Read Guide]     | | [Read Guide]     | |
| +------------------+ +------------------+ |
+------------------------------------------+
| Additional Resources                      |
| +--------+ +--------+ +--------+          |
| |Market  | |Moving  | |Mortgage|          |
| |Report  | |Checklist| |Info   |          |
| +--------+ +--------+ +--------+          |
+------------------------------------------+
| Contact CTA                               |
+------------------------------------------+
| FOOTER                                    |
+------------------------------------------+
```

### 5.15 Resource Page Template (`template-resource.php`) (NEW)

Individual guide/resource pages (Buyer's Guide, Seller's Guide, etc.):

```
+------------------------------------------+
| HEADER                                    |
+------------------------------------------+
| Hero: "[Resource Title]"                  |
+------------------------------------------+
| Table of Contents (sticky sidebar)        |
+------------------------------------------+
| +----------------------+ +-------------+  |
| |                      | | TOC         |  |
| | Guide Content        | | - Section 1 |  |
| | (Block editor)       | | - Section 2 |  |
| |                      | | - Section 3 |  |
| | Section 1            | |             |  |
| | ...                  | | Contact CTA |  |
| | Section 2            | |             |  |
| | ...                  | |             |  |
| +----------------------+ +-------------+  |
+------------------------------------------+
| Related Resources                         |
+------------------------------------------+
| Contact CTA                               |
+------------------------------------------+
| FOOTER                                    |
+------------------------------------------+
```

---

## 6. Block Patterns (Reusable Layouts)

Pre-built block patterns for the client to easily create consistent content:

### 6.1 Content Patterns

| Pattern Name | Description |
|--------------|-------------|
| Hero with CTA | Full-width hero with heading, text, and buttons |
| Feature Grid (3-col) | Three columns with icons, headings, and text |
| Feature Grid (4-col) | Four columns with icons, headings, and text |
| Team Member Card | Single agent/team member display |
| Testimonial | Quote with attribution |
| Testimonial Carousel | Multiple testimonials in slider |
| Stats/Numbers Row | Key statistics with large numbers |
| Split Content | Image on one side, text on other |
| CTA Banner | Full-width call-to-action section |
| FAQ Accordion | Expandable question/answer pairs |
| Contact Info Block | Address, phone, email, hours |
| Image Gallery | Grid of images with lightbox |
| Price Table | Compare service tiers (if needed) |

### 6.2 Property-Specific Patterns

| Pattern Name | Description |
|--------------|-------------|
| Featured Property | Single property highlight |
| Property Grid (3) | Three property cards in a row |
| Property Carousel | Scrollable property showcase |
| Property Search Bar | Search input with filters |

---

## 7. Component Design Specifications

### 7.1 Property Card

```
┌──────────────────────────────┐
│ [STATUS BADGE: ACTIVE]       │
│ ┌──────────────────────────┐ │
│ │                          │ │
│ │     Property Image       │ │
│ │     (16:10 ratio)        │ │
│ │                          │ │
│ └──────────────────────────┘ │
│ $XXX,XXX                     │
│ 123 Main Street              │
│ City, MN 56007               │
│                              │
│ 🛏 3  🛁 2  📐 1,500 sqft     │
│                              │
│ [View Details →]             │
└──────────────────────────────┘
```

**Specifications:**
- Card background: `#161616`
- Border radius: 8px
- Image aspect ratio: 16:10 (better for real estate)
- Hover effect: Slight scale (1.02) + shadow
- Status badge colors:
  - Active: Green (`#2E7D32`)
  - Pending: Yellow (`#F9A825`)
  - Sold: Gray (`#757575`)

### 7.2 Agent Card

```
┌──────────────────────────────┐
│ ┌──────────────────────────┐ │
│ │                          │ │
│ │     Agent Photo          │ │
│ │     (Square, rounded)    │ │
│ │                          │ │
│ └──────────────────────────┘ │
│                              │
│ Agent Name                   │
│ REALTOR®                     │
│                              │
│ 📞 507-XXX-XXXX              │
│ ✉️ email@homeproz.com        │
└──────────────────────────────┘
```

### 7.3 Buttons

**Primary Button:**
- Background: `#9F3730`
- Text: `#FFFFFF`
- Padding: 16px 32px
- Border radius: 4px
- Hover: `#C8473F`
- Transition: 0.3s ease

**Secondary Button:**
- Background: transparent
- Border: 2px solid `#9F3730`
- Text: `#9F3730`
- Hover: Fill with `#9F3730`, text white

### 7.4 Form Fields

- Background: `#161616`
- Border: 1px solid `#2A2A2A`
- Border on focus: `#9F3730`
- Text color: `#F5F5F5`
- Placeholder: `#757575`
- Border radius: 4px
- Padding: 16px

---

## 6. Responsive Breakpoints

```css
/* Mobile First */
--breakpoint-sm: 640px;   /* Large phones */
--breakpoint-md: 768px;   /* Tablets */
--breakpoint-lg: 1024px;  /* Desktop */
--breakpoint-xl: 1280px;  /* Large desktop */
--breakpoint-2xl: 1536px; /* Extra large */
```

### Layout Behavior

| Element | Mobile | Tablet | Desktop |
|---------|--------|--------|---------|
| Property Grid | 1 col | 2 col | 3 col |
| Agent Grid | 1 col | 2 col | 4 col |
| Nav | Hamburger | Hamburger | Full |
| Hero CTA | Stacked | Side-by-side | Side-by-side |
| Contact Section | Stacked | Split | Split |

---

## 7. Imagery Guidelines

### 7.1 Property Photos
- Aspect ratio: 16:10 for cards, flexible for galleries
- Minimum resolution: 1200px wide
- Format: WebP with JPEG fallback
- Optimization: Lazy loading, responsive srcset

### 7.2 Agent Photos
- Aspect ratio: 1:1 (square)
- Style: Professional headshot, neutral background
- Minimum resolution: 400x400px
- Treatment: Slight rounded corners (8px) or circular

### 7.3 Hero Images
- Full-width, high-resolution
- Consider: Local landmarks, beautiful homes, team photos
- Overlay: Dark gradient for text readability

---

## 8. Animation & Interaction

### 8.1 Micro-interactions
- Button hover: Color transition (0.3s)
- Card hover: Scale (1.02) + shadow
- Link hover: Color transition + underline
- Form focus: Border color change

### 8.2 Page Transitions
- Fade in on scroll (intersection observer)
- Stagger effect for card grids
- Smooth scroll for anchor links

### 8.3 Loading States
- Skeleton screens for property cards
- Spinner for form submission
- Progressive image loading

---

## 9. Accessibility Considerations

- Minimum contrast ratio: 4.5:1 for text
- Focus states: Visible outline on all interactive elements
- Skip to content link
- Proper heading hierarchy (h1 > h2 > h3)
- Alt text for all images
- ARIA labels where needed
- Keyboard navigation support

---

## 10. SEO & Performance

### 10.1 Technical SEO
- Semantic HTML structure
- Schema.org markup for:
  - RealEstateAgent
  - RealEstateListing
  - LocalBusiness
- XML sitemap
- Optimized meta tags per page
- Open Graph tags for social sharing

### 10.2 Performance Targets
- Lighthouse score: 90+ (Performance)
- First Contentful Paint: < 1.5s
- Largest Contentful Paint: < 2.5s
- Cumulative Layout Shift: < 0.1

---

## 11. Design Mockup References

Screenshots of current site saved to:
- `site_analysis/homepage-full.png` - Full page capture
- `site_analysis/homepage-viewport.png` - Above the fold

---

## 12. Open Questions for Client Discussion

1. **Hero Media**: Prefer static image or video background?
2. **Team Page**: Individual agent bio pages, or keep on single page?
3. **Blog/News**: Future consideration for content marketing?
4. **Testimonials**: Have text testimonials ready, or need to collect?
5. **Photo Gallery**: Keep existing gallery section, or integrate into properties?
6. **Logo**: Current logo is from business card - do you have vector/high-res version?

---

## 13. Approval

This design document is a draft for review. Please provide feedback on:
- Color palette refinements
- Page structure and sections
- Component designs
- Any missing elements

---

## 14. Competitor Analysis Reference

This document was updated based on analysis of Robert Hoffman Realty (roberthoffmanrealty.com), a successful real estate site serving the same Albert Lea, MN market.

Key structural elements adopted:
- Location search dropdown in hero
- Service cards section (Buy/Rent/Sell)
- Separate Residential and Commercial listing sections
- Community pages for each served location
- Resources section with buyer/seller guides
- Map view on property archive
- Enhanced footer with professional logos and license info

Full analysis available at:
`competitor_analysis/robert-hoffman-realty/ANALYSIS.md`

---

*Document Version: 1.1*
*Date: November 30, 2025*
*Updated by: Hanson.xyz Development Team*
*Changes: Added structural elements from RHR competitor analysis*
