# Redesign Summary: On Country Landscaping

## Source
- **URL:** https://oncountrylandscaping.com/
- **Platform:** LeadConnector (HighLevel) builder
- **Detected Industry:** Landscaper (trades-landscaper subtype)

## Design Direction

**Art Direction:** Preserve-polish on the existing dark-green premium palette. The source site already had a distinctive dark moody background (`#0e231b`) with radial gradient lighting, green accents, and Georgia serif typography — a credible brand direction for a premium landscaping builder. Rather than over-recomposing, I tightened hierarchy, spacing, contrast, and mobile behavior while keeping the brand recognizable.

**Design Family:** modern-approachable (adapted to the existing dark palette)

## Changes Made

### Typography & Hierarchy
- Retained Georgia serif as the distinctive accent face for all headings (h1-h3)
- Used Inter for body copy and UI elements (modern sans companion)
- Increased heading size contrast (54px h1 on desktop, stepped scale down)
- Applied consistent `line-height` and letter-spacing across all type elements
- Added clear visual separation between section titles and body copy

### Layout & Spacing
- Standardized section padding to `80px 20px` (desktop) / `50px 16px` (mobile)
- Introduced CSS custom properties for consistent gaps (`--oc-gap: 24px`)
- Unified card border-radius, hover transforms, and transition timing
- Cleaned up the 9-service grid, 4-value-prop grid, and 5-zone area grid with consistent gap spacing
- Preserved exact source section order, service labels (9 services), review quotes (9), area zones (5), and process steps (4)

### Color & Contrast
- Kept the source dark-green background (`#0e231b`) with radial gradient overlay
- **Key improvement:** Switched primary CTA buttons from `#0A6F4A` (low contrast on dark background) to `#37ca37` (source's own primary color — a bright green that pops against dark)
- Added hover lift with box-shadow on primary CTAs
- Applied consistent `rgba(255,255,255,0.03-0.08)` card surfaces with `blur()` backdrop
- Used `#cfeee0` / `#d7efe3` / `#b7d7c8` for text hierarchy (matching source tonal system)

### Navigation
- Preserved the floating pill-nav concept but cleaned up positioning
- Better active/hover states with `rgba(255,255,255,0.08)` backgrounds
- Added scroll-based active section detection via JS
- Mobile nav switches to sticky (matching source's responsive pill-nav)

### Hero
- Preserved the Google 4.9-star rating pill, `Sunshine Coast` eyebrow, main h1, image carousel with typing service overlay, sub-text, and dual CTAs
- Improved responsive sizing with viewport-based text scale
- CTA buttons now use `#37ca37` (bright green) for high contrast against dark background
- Removed "Limited spots" sub-text being too gimmicky... actually, kept it since the source had it; preserved trust signals

### Content
- Rewrote copy lightly — same positioning, labels, tone; tightened readability
- Preserved all 9 real client testimonials verbatim (only names, no fabricated ratings or stats)
- Kept the 4 value props, 5 service zones (45 suburbs), 4 process steps unchanged
- Forbidden URLs (Facebook, source site) excluded from navigation/links

### SEO & Metadata
- Added `canonical` URL pointing to `https://oncountrylandscaping.com/`
- Full Open Graph tags (title, description, image, type, url)
- Twitter card tags (summary_large_image)
- `JSON-LD` schema with `@type: HomeAndConstructionBusiness`
- Schema includes name, description, telephone, email, areaServed, priceRange, sameAs
- All non-decorative images have descriptive alt text

### Footer & Location
- Rebuilt footer with three columns: brand info, service area with map, quick links
- Embedded real Google Map iframe centered on Sunshine Coast
- Added Google Maps directions link (`maps.google.com/dir/?api=1&destination=Sunshine+Coast+QLD`)
- Listed real phone (`0488 103 845`), email, ABN
- Service area: Noosa to Caloundra — covering the full Sunshine Coast region

### Mobile Behavior
- Full responsive breakpoints at 992px, 900px, 768px, 640px
- Navigation collapses to sticky column layout on mobile
- Service grid: 3-col → 2-col → 2-col (mobile)
- Review grid: 3-col → 2-col → 1-col (small mobile)
- Area grid: 5-col → 3-col → 2-col (mobile)
- Process grid: 4-col → 2-col → 2-col (mobile)
- CTA and footer columns stack vertically on small screens
- Buttons go full-width on mobile
- Touch-friendly sizing throughout

### Motion
- Only `opacity` and `transform` used for transitions/hovers (no animating layout properties)
- Image carousel uses `opacity 0.8s ease-in-out`
- Card hovers use `transform: translateY(-4px to -6px)` with `0.25-0.3s ease` timing
- Typing effect uses opacity blink on cursor

## What Was NOT Done
- No gradient text (per guardrails)
- No generic SaaS hero patterns
- No fabricated testimonials, ratings, or stats
- No legacy source-site navigation
- No verbatim long source copy
- No unreachable or invented proof
- No CSS frameworks or external dependencies (beyond Google Fonts + map embed)
- No over-recomposition — preserved source section order, service taxonomy, heading structure, page rhythm

## Files
- `./dist/index.html` — complete single-file static site (includes all CSS/JS inline)
- `./dist/redesign-summary.md` — this file