Auto Center Guide

Welcome to the AutoFix administration guide. This document provides a step-by-step walkthrough for customizing the template for your car repair or mechanic business.

Repair Tip: Use high-contrast photos of your tools, garage, and clean engine bays. Authentic photography significantly increases trust in the automotive industry.

Getting Started

  1. Extract the AutoFix archive.
  2. Open the primary folder in your preferred code editor.
  3. Navigate to index.html to view the industrial landing experience.

File Structure

/car-repair-template/
├── index.html              # The master landing page
├── css/styles.css          # Design system
├── js/main.js              # Interactivity engine
└── images/                 # Theme graphics

Section Editing

The Industrial Header

Update your shop's name in the header segment of index.html.

<header class="header" id="header">
    <div class="header-container">
        <a href="#" class="logo">
            <span class="logo-text">AUTOFIX</span>
        </a>
    </div>
</header>

The Service Grid

Services are modular. Duplicate a .service-card component to add new mechanic specialties.

<div class="service-card">
    <h3>New Service</h3>
    <p>Description of repair...</p>
</div>

Theme & Styling

Updating Brand Colors

Modify the core CSS tokens in styles.css to match your automotive brand colors.

:root {
    --color-primary: #ff4d4d;  /* Mechanic Red */
    --color-secondary: #1a1a1a; /* Steel Grey */
}

SEO & Optimization

To rank in local searches, update the <meta> tags in the head of your document with your city and specific specialties (e.g., "Transmission Repair in Detroit").

Deployment

AutoFix is a high-performance static template. Deploy the files to any standard web server or static platform like Netlify or GitHub Pages.