# Quality Small Engine Repair — Handoff
## Status
- **Project:** `/home/vincent/quality_small_engine_mock/`
- **Backup:** `/home/vincent/quality_small_engine_mock_backup/`
- **Port:** 5050 (not currently running — port 5050 is occupied by garden-store-mock)
## What It Is
Mock/demo website for **Quality Small Engine Repair**, a real small engine repair shop in Grand Rapids, MI. Built as a consultant/pitchman demo — showing the owner what their website could look like.
## Business Details
- **Name:** Quality Small Engine Repair
- **Address:** 1562 68th St SE, Grand Rapids, MI 49508
- **Phone:** (616) 554-0040
- **Email:** qualityser.chad@gmail.com
- **Hours:** Mon–Fri 9:00 AM – 4:00 PM, Sat–Sun Closed
- **Specialty:** Authorized ECHO Dealer (also Briggs & Stratton, Kohler, Snapper)
- **Services:** Lawn mowers, trimmers, blowers, tune-ups, engine rebuilds
## Project Structure
```
quality_small_engine_mock/
├── app.py # Flask app (single route, port 5050)
└── templates/
└── index.html # Full single-page site
```
## Stack
- Flask (host `0.0.0.0`, port 5050)
- Tailwind CSS via CDN
- FontAwesome 6.0.0 icons
- Google Fonts (Inter)
- Unsplash hero background image
## Visual Identity
| Element | Value |
|---------------|-------------------------------------------|
| Theme color | **Emerald** (`emerald-500`, `emerald-600`, `emerald-700`) |
| Secondary | Orange (`orange-600`) for hover states |
| Backgrounds | `slate-50` (pages), `slate-900` (hero/footer) |
| Text | `slate-800` body, `slate-900` headings |
| Typography | Sans-serif (Tailwind default) |
| Icons | FontAwesome 6 |
## Page Structure
### 1. **Sticky Navigation**
- Logo: emerald icon box with `fa-tools`
- Brand name: "Quality Small Engine Repair"
- Links: Services, About, Reviews, Contact
- CTA: Phone button `(616) 554-0040` (emerald)
### 2. **Hero Section**
- Background: Unsplash image (low opacity overlay on `slate-900`)
- Badge: "Authorized ECHO, Briggs & Stratton, and Kohler Dealer"
- Headline: "Expert Repair for Your **Small Engines**" (emerald accent)
- Subheadline: Service description for Grand Rapids
- CTAs: "Request a Service" (emerald button) + "Call Now" (glassmorphism)
### 3. **Services Section**
- 3-column grid, white cards with emerald icons:
- **Lawn & Garden** (`fa-tools`) — mowers, tractors, blade sharpening, engine rebuilds
- **Trimmers & Blowers** (`fa-tools`) — string trimmers, leaf blowers, hedge trimmers
- **Tune-Ups & Maintenance** (`fa-tools`) — carburetor cleaning, spark plugs, oil changes
### 4. **Reviews Section**
- 3-column grid, 5-star ratings with generic testimonials
- "What Our Customers Say" heading
- Emerald star icons, slate-100 background
### 5. **About/Trust Section**
- Two-column layout:
- **Left:** Why Choose Us (Authorized Dealer, Local Expertise, Fast Turnaround)
- **Right:** Business hours card (Mon–Fri 9-4, Closed weekends)
### 6. **Contact Section**
- Two-column layout:
- **Left:** Address, phone, email with emerald icon boxes
- **Right:** "Send a Message" form (Name, Email, Message → **NOT connected to backend**)
### 7. **Footer**
- Brand logo, "Serving Grand Rapids, MI", copyright
## Upgrades Applied
1. **Theme change** — switched from orange/industrial to **emerald green** (matches landscaping/outdoor equipment aesthetic)
2. **Reviews section added** — 3 testimonials with 5-star ratings
3. **Service icons** — all using FontAwesome (`fa-tools`, `fa-leaf`, `fa-wind`)
4. **Business hours card** — detailed schedule in About section
5. **Contact form** — full "Send a Message" form (currently cosmetic only)
6. **Authorized dealer messaging** — emphasizes ECHO, Briggs & Stratton, Kohler
7. **Hover states** — orange accent on nav links and contact info
## TODO / Next Steps
### Priority: Contact Form Backend
The "Send a Message" form has no backend. Options discussed:
1. **Web3Forms** — zero backend, free, just swap `<form>` action tag
2. **Formspree** — similar, 50 submissions/mo free
3. **Flask + SMTP** — fully self-hosted, requires email credentials
### Other Enhancements
- Replace generic testimonials with real Google Maps/Yelp reviews
- Replace `fa-tools` icons on all services with distinct icons (`fa-leaf`, `fa-wind`, `fa-cogs`)
- Add Google Maps embed in contact section
- Add Schema.org LocalBusiness markup
- Add "Work Gallery" section with real repair photos
- Replace Unsplash hero with actual shop photos
- Add mobile hamburger menu (currently nav collapses but no mobile menu)
- Real customer names in reviews (pull from Google reviews)
## How to Run
```bash
cd /home/vincent/quality_small_engine_mock
python3 app.py
# → http://localhost:5050
```
## Notes
- This is a **mock/pitch site** — showing the business owner what their site could look like
- Currently NOT running (port 5050 occupied by garden-store-mock)
- Backup exists at `/home/vincent/quality_small_engine_mock_backup/`
- Service icons all use `fa-tools` — should be differentiated
- Testimonials are generic placeholder text