Hendrix Home Checks — Website

A fast, mobile-first, SEO-friendly static website for a residential home inspection business serving the Philadelphia suburbs (Bucks, Montgomery & Delaware Counties, PA).

Built with plain HTML, CSS, and vanilla JavaScript — no frameworks, no build step, no backend, no database. It deploys for free on Cloudflare Pages, GitHub Pages, or Netlify.

---

1. What's in here

site/
├── index.html            # Home
├── services.html         # Services
├── pricing.html          # Pricing
├── service-areas.html    # Service Areas
├── about.html            # About
├── faq.html              # FAQ (with FAQ rich-result schema)
├── contact.html          # Contact + quote/booking form
├── styles.css            # All styling (one shared file)
├── script.js             # All interactivity (one shared file)
├── robots.txt            # Search-crawler rules + sitemap pointer
├── sitemap.xml           # List of pages for search engines
├── README.md             # This file
└── assets/
    ├── logo.svg          # Logo (placeholder)
    ├── favicon.svg       # Browser tab icon (placeholder)
    └── og-image.svg      # Social-share preview image (placeholder)

There is no build process. The files you see are exactly what gets served.

---

2. Preview it locally

Just double-click index.html to open it in your browser. For a more accurate preview (so links and the form behave like they will live), run a tiny local server from inside the site/ folder:

# Python 3 (built in on macOS)
python3 -m http.server 8080
# then open http://localhost:8080

---

3. Customize it — quick reference

Every spot you need to edit is marked in the code with an EDIT: comment. Use your editor's "Find in all files" for the placeholder strings below.

What	Placeholder to find	Where
Phone number	+12155550123 (link) and (215) 555-0123 (text)	All .html
Email	hello@hendrixhomechecks.com	All .html + script.js (FALLBACK_EMAIL)
Live domain	https://hendrixhomechecks.com	All .html (canonical/OG), robots.txt, sitemap.xml
Business address	123 Main Street / Doylestown / 18901	index.html (JSON-LD schema)
Hours	Mon–Fri 8am–6pm etc.	Footer of each page, contact.html, index.html schema
Contact form endpoint	REPLACE_FORMSPREE_ID	contact.html (<form action=...>)
Logo	assets/logo.svg	replace the file
Favicon	assets/favicon.svg	replace the file
Social share image	assets/og-image.svg	replace the file (see §6)
Photos	files in assets/img/	replace the files (keep the same names) or update each <img src>
Map embed	map-placeholder block	service-areas.html, contact.html
Prices	$349 / $419 / $499	pricing.html (and the FAQ answer in faq.html)
Towns served	town-list lists	service-areas.html
Credentials / standards	InterNACHI Trained / Standards of Practice / Code of Ethics / "Licensed & Insured" badges	index.html, about.html

Tip: When you change the phone or email, update it everywhere — it appears in the header, footer, hero, CTA bands, and the schema. A find-and-replace across all files is the safest way.

---

4. The contact form (no backend needed)

The form on contact.html works in two modes:

1. Out of the box (zero setup): when you submit, your visitor's email app opens, pre-filled with their details addressed to your email. This is handled automatically by script.js.

2. Recommended — free Formspree: so submissions are emailed to you without the visitor needing an email app:

   1. Create a free account at https://formspree.io.
   2. Create a form and copy your endpoint — it looks like https://formspree.io/f/abcdwxyz.
   3. In contact.html, find action="https://formspree.io/f/REPLACE_FORMSPREE_ID" and replace REPLACE_FORMSPREE_ID with your real ID.
   4. Done — the form now posts to Formspree. (Formspree's free tier requires account setup and may show a confirmation step on the first submission. Also update FALLBACK_EMAIL in script.js to keep the backup mailto correct.)

---

5. Reviews

The homepage currently shows an honest "Reviews Coming Soon" block — there are no fake testimonials anywhere on the site. When you start collecting real reviews:

1. Set up / claim your Google Business Profile and gather genuine reviews.
2. In index.html, find the reviews-soon block and replace it with real review cards (you can re-introduce a star + quote + name layout), and/or add a "Read Our Google Reviews" button linking to your Google profile (looks like https://g.page/r/XXXXXXXX).
3. Only publish real, verifiable feedback — never invented names, quotes, or ratings.

---

6. Social share image (Open Graph)

assets/og-image.svg is a placeholder. Some platforms (Facebook, LinkedIn, iMessage) don't render SVG previews. For best results:

1. Export a 1200 × 630 px PNG or JPG.
2. Save it as assets/og-image.png.
3. In each page's <head>, update og:image and twitter:image to https://yourdomain.com/assets/og-image.png.

---

7. Deploy for free

Option A — Cloudflare Pages (recommended)

With a GitHub repo (auto-deploys on every push):

1. Push this site/ folder to a GitHub repository.
2. Go to the Cloudflare dashboard → Workers & Pages → Create → Pages → Connect to Git.
3. Pick your repo. Set:
   • Framework preset: None
   • Build command: (leave blank)
   • Build output directory: / (or site if the repo root contains this folder)
4. Save and Deploy. You'll get a free *.pages.dev URL.

Without Git (drag-and-drop):

1. Cloudflare dashboard → Workers & Pages → Create → Pages → Upload assets.
2. Drag the contents of the site/ folder in and deploy.

Custom domain: in your Pages project → Custom domains → add your domain and follow the DNS steps.

Option B — GitHub Pages

1. Create a GitHub repository and push the contents of site/ to it (the .html files should be at the repo root).
2. In the repo: Settings → Pages.
3. Under Build and deployment, set Source: Deploy from a branch, choose your branch (e.g. main) and folder / (root). Save.
4. Your site publishes at https://<username>.github.io/<repo>/.
5. Custom domain: Settings → Pages → Custom domain, enter your domain, save (this creates a CNAME file), then point your DNS at GitHub Pages.

Note: if you use a project URL like username.github.io/repo/, the relative links here still work because they don't start with /. If you later move pages into subfolders, keep links relative.

Option C — Netlify

1. Log in at https://app.netlify.com.
2. Drag the site/ folder onto the Sites area ("deploy manually"), or connect your Git repo with build command empty and publish directory set to the folder containing these files.
3. Add a custom domain under Domain settings if you like.

---

8. After you go live — SEO checklist

• Replace every https://hendrixhomechecks.com with your real domain (pages, robots.txt, sitemap.xml).
• Submit sitemap.xml in Google Search Console.
• Create / claim your Google Business Profile (huge for local "home inspector near me" searches) and add the review links.
• Test rich results with the Rich Results Test (LocalBusiness + FAQ schema are included).
• The site ships with royalty-free stock photos in assets/img/; swap them for your own photos when available (optional) and keep the alt text accurate.
• Confirm your InterNACHI training, license, and insurance status before publishing those badges (the "Licensed & Insured" badge in particular).

---

9. Fonts (optional)

The site loads Fraunces and Inter from Google Fonts (free). If you'd rather not depend on a CDN, you can self-host them or swap to system fonts: in styles.css, change the --font-head and --font-body variables in :root, and remove the Google Fonts <link> tags from each page's <head>. The layout is built to degrade gracefully to Georgia/system-sans.

---

10. Photos & licensing

The photos in assets/img/ are royalty-free images from Unsplash, which allows free commercial use without attribution. They're bundled (self-hosted) so the site loads fast with no external image dependencies. You're free to keep them or replace them with your own photography at any time — just keep the filenames the same, or update the <img src> references.

---

Built as a hand-coded static site — yours to edit freely.