diff --git a/css/style.css b/css/style.css index 4872efb..cf29295 100644 --- a/css/style.css +++ b/css/style.css @@ -726,6 +726,205 @@ img { margin-top: 12px; } +/* --- How It Works --- */ +.how-it-works { + padding: 100px 0; + background: var(--off-white); +} + +.steps-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + gap: 40px; + max-width: 900px; + margin: 0 auto; +} + +.step-card { + text-align: center; + padding: 32px 24px; +} + +.step-number { + display: inline-flex; + align-items: center; + justify-content: center; + width: 48px; + height: 48px; + background: linear-gradient(135deg, var(--blue-accent), var(--cyan-bright)); + color: var(--blue-dark); + font-family: 'Montserrat', sans-serif; + font-weight: 900; + font-size: 1.4rem; + border-radius: 50%; + margin-bottom: 16px; + box-shadow: 0 4px 16px rgba(77, 200, 245, 0.3); +} + +.step-icon { + font-size: 3rem; + margin-bottom: 12px; +} + +.step-card h4 { + font-size: 1.2rem; + color: var(--blue-dark); + margin-bottom: 8px; +} + +.step-card p { + color: var(--text-mid); + font-size: 0.95rem; +} + +.step-card a { + color: var(--blue-accent); + font-weight: 600; +} + +/* --- Gallery --- */ +.gallery { + padding: 100px 0; + background: var(--white); +} + +.gallery-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 32px; + margin-bottom: 24px; +} + +.gallery-item { + border-radius: var(--radius-lg); + overflow: hidden; + box-shadow: var(--shadow); +} + +.gallery-before-after { + position: relative; + width: 100%; + aspect-ratio: 4 / 3; + overflow: hidden; +} + +.gallery-before-after img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; +} + +.gallery-before-after img:last-child { + clip-path: inset(0 50% 0 0); + transition: clip-path 0.3s ease; +} + +.gallery-item:hover .gallery-before-after img:last-child { + clip-path: inset(0 0 0 0); +} + +.gallery-label { + position: absolute; + top: 12px; + padding: 4px 14px; + border-radius: 50px; + font-family: 'Montserrat', sans-serif; + font-weight: 700; + font-size: 0.8rem; + text-transform: uppercase; + letter-spacing: 0.5px; + color: var(--white); + z-index: 2; +} + +.gallery-label-before { + left: 12px; + background: rgba(0, 0, 0, 0.6); +} + +.gallery-label-after { + right: 12px; + background: rgba(34, 197, 94, 0.85); +} + +.gallery-caption { + padding: 16px 20px; + background: var(--white); + font-family: 'Montserrat', sans-serif; + font-weight: 600; + font-size: 0.95rem; + color: var(--text-dark); + text-align: center; +} + +.gallery-note { + text-align: center; + color: var(--gray); + font-size: 0.9rem; +} + +/* --- Testimonials --- */ +.testimonials { + padding: 100px 0; + background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue-mid) 100%); + color: var(--white); +} + +.testimonials .section-title { + color: var(--white); +} + +.testimonials-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 28px; +} + +.testimonial-card { + background: rgba(255, 255, 255, 0.08); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: var(--radius-lg); + padding: 32px 28px; + transition: all var(--transition); +} + +.testimonial-card:hover { + background: rgba(255, 255, 255, 0.14); + transform: translateY(-4px); +} + +.testimonial-stars { + font-size: 1.2rem; + margin-bottom: 12px; +} + +.testimonial-text { + color: rgba(255, 255, 255, 0.9); + font-size: 1rem; + line-height: 1.7; + margin-bottom: 20px; + font-style: italic; +} + +.testimonial-author { + display: flex; + flex-direction: column; + gap: 2px; +} + +.testimonial-author strong { + color: var(--cyan-bright); + font-size: 1rem; +} + +.testimonial-author span { + color: rgba(255, 255, 255, 0.6); + font-size: 0.85rem; +} + /* --- Footer --- */ .footer { background: var(--blue-dark); diff --git a/img/after-house.jpg b/img/after-house.jpg new file mode 100644 index 0000000..4ad9862 --- /dev/null +++ b/img/after-house.jpg @@ -0,0 +1,13 @@ + + + + + + + + + + Clean House Siding + Replace with real photo + 400 × 300 + \ No newline at end of file diff --git a/img/after-house.png b/img/after-house.png new file mode 100644 index 0000000..ea2014b Binary files /dev/null and b/img/after-house.png differ diff --git a/img/after-storefront.jpg b/img/after-storefront.jpg new file mode 100644 index 0000000..51612f8 --- /dev/null +++ b/img/after-storefront.jpg @@ -0,0 +1,13 @@ + + + + + + + + + + Sparkling Storefront + Replace with real photo + 400 × 300 + \ No newline at end of file diff --git a/img/after-storefront.png b/img/after-storefront.png new file mode 100644 index 0000000..d7d4cdd Binary files /dev/null and b/img/after-storefront.png differ diff --git a/img/after-truck.jpg b/img/after-truck.jpg new file mode 100644 index 0000000..08efff9 --- /dev/null +++ b/img/after-truck.jpg @@ -0,0 +1,13 @@ + + + + + + + + + + Clean Truck Fleet + Replace with real photo + 400 × 300 + \ No newline at end of file diff --git a/img/after-truck.png b/img/after-truck.png new file mode 100644 index 0000000..726b9c2 Binary files /dev/null and b/img/after-truck.png differ diff --git a/img/apple-touch-icon.png b/img/apple-touch-icon.png new file mode 100644 index 0000000..9def841 Binary files /dev/null and b/img/apple-touch-icon.png differ diff --git a/img/before-house.jpg b/img/before-house.jpg new file mode 100644 index 0000000..d283c00 --- /dev/null +++ b/img/before-house.jpg @@ -0,0 +1,13 @@ + + + + + + + + + + Dirty House Siding + Replace with real photo + 400 × 300 + \ No newline at end of file diff --git a/img/before-house.png b/img/before-house.png new file mode 100644 index 0000000..17ccab3 Binary files /dev/null and b/img/before-house.png differ diff --git a/img/before-storefront.jpg b/img/before-storefront.jpg new file mode 100644 index 0000000..e7e83e2 --- /dev/null +++ b/img/before-storefront.jpg @@ -0,0 +1,13 @@ + + + + + + + + + + Grimy Storefront + Replace with real photo + 400 × 300 + \ No newline at end of file diff --git a/img/before-storefront.png b/img/before-storefront.png new file mode 100644 index 0000000..b45628c Binary files /dev/null and b/img/before-storefront.png differ diff --git a/img/before-truck.jpg b/img/before-truck.jpg new file mode 100644 index 0000000..4a8d785 --- /dev/null +++ b/img/before-truck.jpg @@ -0,0 +1,13 @@ + + + + + + + + + + Dirty Truck Fleet + Replace with real photo + 400 × 300 + \ No newline at end of file diff --git a/img/before-truck.png b/img/before-truck.png new file mode 100644 index 0000000..d33b561 Binary files /dev/null and b/img/before-truck.png differ diff --git a/img/favicon.png b/img/favicon.png new file mode 100644 index 0000000..8a41606 Binary files /dev/null and b/img/favicon.png differ diff --git a/img/og-banner.jpg b/img/og-banner.jpg new file mode 100644 index 0000000..88c6d13 Binary files /dev/null and b/img/og-banner.jpg differ diff --git a/index.html b/index.html index f293a45..cecb861 100644 --- a/index.html +++ b/index.html @@ -3,8 +3,60 @@ - Williams Pressure Washing Services | If It's Dirty We'll Clean It - + Williams Pressure Washing Services | If It's Dirty We'll Clean It | Coshocton, OH + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -51,6 +103,34 @@ + +
+
+

How It Works

+

Three simple steps to a cleaner surface

+
+
+
1
+
📞
+

Contact Us

+

Call (740) 502-3120 or fill out our quick form with details about what needs cleaning.

+
+
+
2
+
📋
+

Get Your Free Quote

+

We'll assess the job and give you a clear, honest quote — no hidden fees, no surprises.

+
+
+
3
+
✨
+

We Clean It Up

+

Show up when we say we will, do great work, and you'll see the difference immediately.

+
+
+
+
+
@@ -138,6 +218,78 @@
+ + + + +
+
+

What Our Customers Say

+

Don't just take our word for it

+
+
+
⭐⭐⭐⭐⭐
+

"Williams Pressure Washing did an amazing job on our fleet of 12 delivery trucks. They showed up on time, got everything spotless, and the price was very fair. We'll be calling them every month."

+
+ Mike R. + Local Delivery Company Owner +
+
+
+
⭐⭐⭐⭐⭐
+

"Our house hasn't looked this good since we built it 15 years ago. They were careful with our garden and windows, and the siding looks brand new. Highly recommend!"

+
+ Sarah T. + Homeowner, Coshocton +
+
+
+
⭐⭐⭐⭐⭐
+

"We hire Williams to clean our storefront every quarter. The difference is night and day — customers definitely notice. Professional, reliable, and affordable."

+
+ David L. + Restaurant Owner +
+
+
+
+
+
diff --git a/progress.md b/progress.md index 87fec24..a24afff 100644 --- a/progress.md +++ b/progress.md @@ -8,17 +8,85 @@ - [x] Mobile nav toggle + floating CTA button - [x] Phone number formatting + clickable tel: links - [x] Git repo created and pushed to Gitea +- [x] **SEO fundamentals** — OG tags, Twitter cards, structured data (LocalBusiness), canonical URL, robots meta, favicon (inline SVG), description/keywords meta +- [x] **How It Works** section — 3-step visual process (Contact → Quote → Clean) +- [x] **Before & After Gallery** — 3 comparison cards (truck fleet, house, storefront) with hover reveal effect + placeholder images +- [x] **Testimonials** — 3 placeholder testimonial cards with star ratings +- [x] **Placeholder images** — Generated via ImageMagick (all image URLs in code point to real files) +- [x] **Service area** — Coshocton, OH & surrounding areas referenced throughout +- [x] **Privacy-respecting analytics** — Script placeholder commented in ``, ready for Plausible/Umami ## Pending -- [ ] Set up PHP on the hosting server (PHP 8.x with mail() or use PHPMailer) -- [ ] Configure PHP to relay SMTP through 10.10.9.31 (auth: none) -- [ ] Add tolerance-specific image or two (optional — can use stock photos) -- [ ] SEO meta tags, favicon, OG tags -- [ ] Google Analytics or other tracking -- [ ] Domain purchase/pointing: WilliamsPressureWashingServices.com + +### 🚨 SEO (HIGH PRIORITY — must be done before going live) +- [ ] **Real OG banner image** — replace placeholder `img/og-banner.jpg` with a proper 1200×630 branded image +- [ ] **Real favicon** — generate a proper `.ico` / `.png` favicon from a pressure washing logo (currently using inline SVG emoji) +- [ ] **Sitemap.xml** — create `sitemap.xml` listing all sections/pages for search engine indexing +- [ ] **robots.txt** — create `robots.txt` file allowing crawler access +- [ ] **Google Search Console verification** — add meta tag or HTML file after John purchases the domain +- [ ] **Google Business Profile** — set up once domain is live (Walter's business listing) +- [ ] **Alt text review** — ensure all real images have descriptive, keyword-rich alt text +- [ ] **Page load optimization** — compress real images, consider lazy loading beyond native, minify CSS/JS +- [ ] **Content review** — Walter to review all copy for accuracy before going live + +### Contact Form / Email +- [ ] **PHP hosting setup** — deploy site to 10.10.9.230 (PHP 8.x needed) +- [ ] **SMTP relay configuration** — connect PHP mail() to 10.10.9.31 (auth: none, from: contract@WilliamsPressureWashingServices.com) +- [ ] **Test form end-to-end** — verify email arrives at waltwilliams87@gmail.com +- [ ] **Form spam protection** — add honeypot field or reCAPTCHA (privacy-respecting preferred) + +### Hosting & Domain +- [ ] **Purchase domain** — WilliamsPressureWashingServices.com (John to purchase) +- [ ] **DNS setup** — point domain to hosting server (John to configure) +- [ ] **Server deployment** — deploy site to 10.10.9.230 + - ⚠️ **BLOCKER:** SSH key not authorized on 10.10.9.230 — John needs to add `~/.ssh/id_ed25519.pub` to `~johnny/.ssh/authorized_keys` +- [ ] **SSL certificate** — configure via Nginx Proxy Manager on 10.10.9.230 +- [ ] **PHP configuration** — ensure `mail()` works or install PHPMailer for SMTP + +### Content & Branding +- [ ] **Walter's before/after photos** — replace placeholder images with real job photos +- [ ] **Real testimonials** — replace placeholder testimonials with Walter's actual customer quotes +- [ ] **Walter's logo** — if he has one, add to nav and footer +- [ ] **Service area specifics** — confirm which towns/counties to list +- [ ] **Hours of operation** — verify Mon–Sat 7AM–7PM accuracy +- [ ] **Gallery photos** — get 3+ more before/after pairs if Walter has them + +### Analytics +- [ ] **Choose analytics provider** — see options below +- [ ] **Add tracking script** — uncomment and configure Plausible or Umami +- [ ] **Privacy policy page** — add if required by analytics terms of service ## Open Questions -- Does Walter have hosting already, or do we need to set it up? -- Need SMTP credentials if different from what's in TOOLS.md -- Any specific images/branding (logo, colors) from Walter? -- Should we add Google Maps embed for service area? +- Does Walter have hosting, or are we providing it? ✅ WE ARE PROVIDING (10.10.9.230) +- Domain purchased? ⏳ John to purchase (next) +- Specific images/branding from Walter? ⏳ John to collect +- Service area confirmed? ✅ Coshocton & surrounding areas +- Hours of operation? ✅ Mon–Sat 7AM–7PM (placeholder, confirm with Walter) + +## Hosting Details +- **Target server:** 10.10.9.230 (John's hosting machine) +- **SSH:** ⚠️ Key `~/.ssh/id_ed25519` not authorized on 10.10.9.230 — needs `~johnny/.ssh/authorized_keys` update +- **Existing services on 10.10.9.230:** Unknown — needs discovery (John said at least one site is already running there) +- **PHP version needed:** 8.x with `mail()` function or PHPMailer +- **Nginx Proxy Manager:** Should be running on this network for SSL/hostname routing + +## Analytics Options (Privacy-Respecting) + +### Plausible (recommended) +- https://plausible.io (self-hostable free) +- Lightweight JS (~1KB), no cookie consent required +- Self-host: `docker run -d --name plausible -p 8000:8000 ghcr.io/plausible/community-edition` +- Data stays on John's server — fully private + +### Umami +- https://umami.is (self-hostable free, open source) +- Clean dashboard, privacy-focused, no cookies +- Self-host: `docker run -d -p 3000:3000 ghcr.io/umami-software/umami:postgresql-latest` +- Slightly more features than Plausible (user accounts, team sharing) + +### Fathom (paid, but simple) +- https://usefathom.com — $14/mo, no self-host option +- Very clean, minimal JS, GDPR compliant +- Good if John wants to avoid managing another server + +**Recommendation:** Plausible self-hosted — same philosophy as everything else (self-hosted, private, no tracking cookies). Can run on 10.10.9.230 alongside the site. diff --git a/robots.txt b/robots.txt new file mode 100644 index 0000000..3b557a4 --- /dev/null +++ b/robots.txt @@ -0,0 +1,4 @@ +User-agent: * +Allow: / + +Sitemap: https://WilliamsPressureWashingServices.com/sitemap.xml diff --git a/sitemap.xml b/sitemap.xml new file mode 100644 index 0000000..967efdc --- /dev/null +++ b/sitemap.xml @@ -0,0 +1,9 @@ + + + + https://WilliamsPressureWashingServices.com/ + 2026-05-01 + monthly + 1.0 + +