HomeTech Repair

1. Quick start

1. Extract hometech-repair.zip.
2. Open hometech-repair/index.html in a modern browser. No build process is required.
3. Use a plain-text code editor to customize the files described below.
4. Replace sample business information, testimonials, and policies before publishing.

The template prepares an email draft. Nothing is automatically sent. Automatic delivery requires a backend or third-party form service. A preferred date does not reserve a visit.

2. Features and package

Fifteen primary sections cover the header, full-width hero, six services, symptom guide, inspiration gallery, audiences, approach, coverage, sample reviews, four-step process, about, inquiry, contact/hours, FAQs, and footer. A quick appliance selector and fixed mobile Call / Request a Visit bar make lead actions accessible.

hometech-repair/
  index.html
  README.html
  LICENSES.txt
  assets/
    favicon.svg
    css/style.css
    js/main.js
    images/ (12 local WebP photographs)
    icons/sprite.svg
    vendor/bootstrap/bootstrap.min.css
    vendor/bootstrap/bootstrap.bundle.min.js

Inline SVG icons work without a font or network request; a reusable SVG symbol file is also included. There are no accounts, payments, uploads, instant quotes, live slots, analytics, or automatic email delivery.

3. Business details and demonstration content

1. Replace HomeTech Repair in the title, meta description, wordmarks, copy, policies, and email-draft text.
2. Replace every displayed (916) 555-0186 and matching tel:+19165550186 link. This is a reserved fictional number.
3. Replace service@hometechrepair.example in both index.html and assets/js/main.js. The example domain is not a working mailbox.
4. Update the Sacramento service base, eight cities, form suggestions, FAQs, footer, and sample hours consistently.
5. Replace visibly labeled sample testimonials with authentic authorized feedback.
6. Adapt privacy and service terms to real operations, including hosting logs and any future form service.

The copy does not claim certifications, awards, review counts, guaranteed availability, or universal repair success. Check service scope against the actual business before launch.

4. Colors, typography, and branding

Edit the variables at the top of assets/css/style.css.

Typography uses Arial, Helvetica, and system sans-serif fallbacks. No remote font is loaded. Adjust .section for spacing, .container for content width, and heading rules for scale. The wordmark is HTML with inline SVG; the favicon is assets/favicon.svg.

After changing CSS, increase the version in the stylesheet link:

<link rel="stylesheet" href="assets/css/style.css?v=2">

Preserve readable normal, hover, active, and focus states. Light cards use teal text and a teal border for secondary buttons; dark sections use mint or white contrast.

5. Images and hero cropping

All twelve photographs are AI-generated illustrative imagery, not proof of actual completed repairs, real employees, or customer interactions. Replace them as appropriate before using the template for an actual business.

All images are 1536 × 1024. Keep replacement dimensions or update width/height attributes, alt text, and layout cropping. Export optimized WebP and preserve filename case. Hero imagery is prioritized; below-the-fold images are lazy-loaded.

The hero image spans the browser width with an overlaid text area. Adjust .hero-image object-position separately for desktop and mobile if the subject changes. Inspect the crop on both orientations.

No before-and-after controls are included: appliance repair uses a symptom guide because a photograph alone cannot establish a repaired internal fault. The six comparison-image slots from the generic brief are used for appliance-service photography.

6. Services, gallery, and preselection

Quick appliance selectors, service cards, inspiration cards, audience actions, and city actions scroll to the inquiry form. Nonempty data attributes update only their corresponding fields, preserving all other entries.

<a href="#request" data-service="washer"
   data-audience="Homeowner" data-city="Sacramento">
  Request This Service
</a>

Audience values are Homeowner, Landlord / Property Manager, Tenant, and Other. The location field accepts a city or ZIP and suggests the eight sample cities. Check My Location leaves existing entries untouched. Changing entries or using preselection hides any stale draft.

7. Symptom guide and accessibility

The Cooling, Laundry, and Kitchen tabs show questions to help describe the issue. They are informational, not a diagnostic tool. Tab actions preselect a relevant appliance, which the visitor can change.

Each tab has a linked panel and selected state. Arrow Left/Right cycle through tabs; Home/End move to the first/last tab. Only the active tab is in the normal Tab order. Hidden panels are removed from display and keyboard navigation.

The template includes a skip link, semantic landmarks, visible focus, reduced-motion support, labeled forms, and Bootstrap modal/accordion behavior. The mobile menu collapses after a navigation action. The fixed mobile bar reserves bottom space and respects safe-area insets.

8. Form fields, dates, and draft behavior

Required: name, email, service, audience/property type, city or ZIP, and symptoms/details. Optional: phone, brand/model, age, current condition, preferred date, time window, and timing flexibility.

1. Native validation checks required fields and email syntax.
2. The date field uses the visitor’s local calendar date and rejects past dates.
3. Prepare Visit Inquiry builds a structured email draft without sending it.
4. Open Email App opens a mailto link; the visitor must send the email themselves.
5. Copy Draft writes to the clipboard when supported. If unavailable, the text is selected for manual copying.
6. The visitor can attach photos using their email application.

Entries remain until Reset is chosen or the page is reloaded/left. There is no local-storage persistence. Any change invalidates the existing draft. Reset clears entries, status, and draft. No file uploads, payments, or access codes are requested.

If JavaScript is unavailable, draft preparation is disabled and phone/email alternatives remain. If no email app opens or the mailto link exceeds a client’s length limit, manually copy the draft into an email service. Confirm the business mailbox before testing real delivery.

9. Connecting automatic delivery

Connect a real backend endpoint or configured form service to send automatically. Replace the draft submit handler, validate input on the server, add suitable abuse protection, and handle delivery failures. Display success only after a real successful response. Update the privacy policy, form wording, and README to describe actual processing. Never put secret credentials in client JavaScript.

10. FAQs, policies, and mobile controls

Bootstrap 5.3.8 controls the mobile navbar, FAQ accordion, and Privacy/Terms modals. Keep control IDs and their targets matched. Bootstrap handles modal focus containment, Escape dismissal, and focus restoration. Sticky-header offsets keep anchor targets clear of navigation.

Phone and email links use tel and mailto. There are no dead social links, map APIs, or live scheduling integrations. Sample business hours and coverage should be replaced together.

11. Hostinger deployment

1. Back up the destination before uploading.
2. For the PixelToWeb demo, create public_html/demos/landing-pages/hometech-repair/.
3. Upload the contents of the extracted hometech-repair/ folder into that directory.
4. Keep index.html, README.html, LICENSES.txt, and assets/ together.
5. Open the resulting HTTPS demo URL and verify navigation, images, form behavior, and responsive layouts.

For a separate domain, upload the template contents into that domain’s document root, commonly public_html. Relative paths support either route. No build, npm installation, database, or CDN is required on the server.

For PixelToWeb, do not overwrite the marketplace root index or shared/private files. This package contains only the standalone template.

12. Dependencies and notices

Applicable dependency notices appear in LICENSES.txt and vendor headers. Template rights follow the applicable purchase agreement; this guide makes no additional license grant. No support contact is invented.

13. Launch checklist

1. Replace fictional contacts, sample hours, service area, and business copy.
2. Review scope and scheduling statements.
3. Replace sample testimonials with authorized real feedback.
4. Adapt policies to actual processing and operations.
5. Update title, meta description, branding, and favicon.
6. Check service/audience/city preselection and entry preservation.
7. Test date and email validation, reset, copy fallback, and your real email workflow.
8. Inspect desktop, tablet, mobile, keyboard, touch, and button states after customization.
9. Verify HTTPS and local asset loading after upload.

14. Troubleshooting