# QuickPro Oil Change - RSL Business Template

A professional, modern website template for oil change and automotive service businesses, built with the Responsive Slot Layout (RSL) framework.

![Template Preview](../../images/placeholder.png)

## 🎨 Design

**Brand Identity:**
- **Primary Color:** Deep Forest Green (#2D5016) - Trust, reliability, environmental care
- **Secondary Color:** Rich Black (#0A0A0A) - Professional, sleek
- **Accent Color:** Metallic Gold (#D4AF37) - Premium quality, value

**Typography:**
- **Display Font:** Bebas Neue - Bold, industrial aesthetic for headlines
- **Body Font:** Inter - Clean, modern readability

**Design Style:** Bold industrial meets modern professionalism. Strong typography, high-contrast color scheme, and clean layouts create an authoritative yet approachable brand presence.

## ✨ Features

### Complete Business Website
- **Top Bar:** Contact info and quick CTA button
- **Navigation:** Sticky navbar with smooth scroll
- **Hero Section:** Attention-grabbing hero with 3 key features
- **Services:** 6 service cards with detailed features
- **Pricing:** 3-tier pricing cards with featured "Most Popular" badge
- **Why Us:** 6 reasons to choose your business
- **FAQ:** Accordion with 6 common questions
- **Appointment:** Full booking form with validation
- **Contact:** Location, hours, and contact info cards
- **Footer:** Complete footer with links and social media

### RSL Components Used
- Grid System (slot-layout)
- Cards
- Navbar (sticky)
- Accordion
- Toast Notifications
- Forms
- Buttons

### Interactive Features
- Smooth scrolling navigation
- Form validation with toast notifications
- Phone number auto-formatting
- Date/time input constraints (business hours)
- Active nav link on scroll
- Scroll animations (fade-in on view)
- Mobile-responsive design

### Accessibility
- WCAG AA compliant
- Semantic HTML5
- ARIA labels
- Keyboard navigation
- Focus states
- Screen reader friendly

## 📁 Files Included

```
oil-change-template/
├── index.html              # Main HTML file
├── oil-change-style.css    # Custom theme styles (1,300+ lines)
├── oil-change-script.js    # Custom interactions (300+ lines)
└── README.md              # This file
```

## 🚀 Quick Start

### 1. Setup Files

Copy the template folder to your RSL project:

```bash
cp -r oil-change-template/ your-project/
```

### 2. File Structure

Ensure your project has this structure:

```
your-project/
├── downloadable/
│   └── oil-change-template/
│       ├── index.html
│       ├── oil-change-style.css
│       └── oil-change-script.js
├── styles/              # RSL core styles
├── javascript/          # RSL core scripts
└── images/             # Your images
```

### 3. Update Image Paths

Replace placeholder images in `index.html`:
- Line 97: Hero image
- Update `../images/placeholder.png` with your images

### 4. Customize Content

**Business Information:**
- Company name (lines 40-41, 520-521)
- Phone number (line 22, multiple locations)
- Address (line 641-643)
- Hours (line 23, 653-658)
- Email (line 655, 668)

**Services:**
- Edit service titles and descriptions (lines 225-380)
- Update pricing (lines 449-534)
- Modify FAQ questions (lines 604-651)

**Branding:**
In `oil-change-style.css`, update CSS variables:
```css
--color-primary: #2D5016;    /* Your brand green */
--color-accent: #D4AF37;     /* Your brand gold */
```

### 5. Form Integration

The appointment form currently shows toast notifications. To connect to a backend:

**Option A: Email Service (EmailJS)**
```javascript
// In oil-change-script.js, replace the setTimeout with:
emailjs.send('service_id', 'template_id', data)
    .then(function(response) {
        showToast({
            header: 'Appointment Confirmed!',
            body: 'We\'ll call you shortly.',
            bgColor: '#10B981',
            position: 'top-right',
            timeout: 6000
        });
        form.reset();
    });
```

**Option B: API Endpoint**
```javascript
// In oil-change-script.js, replace the setTimeout with:
fetch('/api/appointments', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)
})
.then(response => response.json())
.then(result => {
    showToast({
        header: 'Appointment Confirmed!',
        body: 'Confirmation sent to your email.',
        bgColor: '#10B981',
        position: 'top-right',
        timeout: 6000
    });
    form.reset();
});
```

## 🎯 Customization Guide

### Change Colors

Edit CSS variables in `oil-change-style.css`:
```css
:root {
    --color-primary: #YOUR_COLOR;
    --color-accent: #YOUR_COLOR;
}
```

### Change Fonts

Update Google Fonts link in `index.html` (line 15):
```html
<link href="https://fonts.googleapis.com/css2?family=YOUR_FONT" rel="stylesheet">
```

Then update CSS variables:
```css
:root {
    --font-display: 'YOUR_FONT', sans-serif;
    --font-body: 'YOUR_FONT', sans-serif;
}
```

### Add/Remove Sections

Each section is clearly marked in HTML:
```html
<!-- Services Section -->
<section id="services" class="section-padding services-section">
    ...
</section>
```

Delete entire section or duplicate to add new ones.

### Modify Pricing

Update pricing cards (lines 449-534 in `index.html`):
- Change price amounts
- Edit package names
- Add/remove features
- Change the featured package

### Update Services

Add or remove service cards in the services section:
```html
<div class="slot-item">
    <div class="rsl-card service-card">
        <div class="service-icon">
            <i class="fas fa-YOUR-ICON"></i>
        </div>
        <div class="rsl-card-body">
            <h3 class="service-title">Your Service</h3>
            <p class="service-description">Description...</p>
            <ul class="service-features">
                <li><i class="fas fa-check"></i> Feature 1</li>
            </ul>
            <a href="#pricing" class="btn btn-primary btn-block">View Pricing</a>
        </div>
    </div>
</div>
```

### Customize FAQ

Edit accordion items in the FAQ section:
```html
<div class="rsl-accordion-item">
    <button class="rsl-accordion-header" aria-expanded="false" aria-controls="faq1">
        <span>Your Question?</span>
        <i class="fas fa-chevron-down rsl-accordion-icon"></i>
    </button>
    <div id="faq1" class="rsl-accordion-content">
        <p>Your answer here.</p>
    </div>
</div>
```

## 📱 Responsive Breakpoints

- **Desktop:** 1200px+
- **Tablet:** 768px - 1199px
- **Mobile:** 320px - 767px

All layouts automatically adjust using RSL's grid system.

## ♿ Accessibility Features

- Semantic HTML5 elements
- ARIA labels on all interactive elements
- Keyboard navigation support
- Focus indicators on all interactive elements
- Color contrast meets WCAG AA standards
- Screen reader friendly structure
- Form labels properly associated
- Skip links available

## 🔧 Browser Support

- Chrome (last 2 versions)
- Firefox (last 2 versions)
- Safari (last 2 versions)
- Edge (last 2 versions)
- Mobile browsers (iOS Safari, Chrome Android)

## 📊 Performance

- Lightweight: ~50KB CSS + ~15KB JS (uncompressed)
- No jQuery or heavy frameworks
- Optimized animations
- Lazy loading ready
- Mobile-first approach

## 🎓 Learning Resources

### RSL Documentation
- [RSL Overview](../../docs/overview.html)
- [Grid System](../../docs/layout/grid/index.html)
- [Components](../../docs/components/index.html)

### Customization Help
- [Accordion Component](../../docs/components/accordion/index.html)
- [Card Component](../../docs/components/cards/index.html)
- [Toast Notifications](../../docs/components/toast/index.html)

## 💡 Use Cases

Perfect for:
- Oil change businesses
- Auto repair shops
- Car wash services
- Tire shops
- Quick lube centers
- Automotive service centers
- Mobile mechanic services
- Fleet maintenance companies

## 🎯 Icons

This template uses **Font Awesome 6** icons for easy local preview. Icons work immediately when you open the HTML file directly in your browser.

### Why Font Awesome?

RSL includes its own zero-dependency icon system (300+ SVG icons), but SVG sprite icons require a web server to work due to browser security restrictions. Font Awesome works without a server, making it easier for you to preview and customize templates locally.

### Migrating to RSL Icons (Optional)

For true zero-dependency deployment, you can convert to RSL Icons:

**1. Include RSL Icons CSS:**
```html
<link rel="stylesheet" href="styles/rsl-icons.css">
```

**2. Replace Font Awesome icons:**
```html
<!-- Before (Font Awesome) -->
<i class="fas fa-check"></i>

<!-- After (RSL Icons) -->
<svg class="rsl-icon" aria-hidden="true">
    <use href="images/rsl-icons.svg#rsl-icon-check"></use>
</svg>
```

**3. Common icon mappings:**
| Font Awesome | RSL Icon |
|--------------|----------|
| `fa-check` | `rsl-icon-check` |
| `fa-times` | `rsl-icon-times` |
| `fa-chevron-down` | `rsl-icon-chevron-down` |
| `fa-phone` | `rsl-icon-phone` |
| `fa-envelope` | `rsl-icon-envelope` |
| `fa-clock` | `rsl-icon-clock` |
| `fa-map-marker-alt` | `rsl-icon-map-marker` |
| `fa-car` | `rsl-icon-car` |
| `fa-cog` | `rsl-icon-cog` |
| `fa-oil-can` | `rsl-icon-droplet` |

**4. Run a local server** (required for RSL Icons):
```bash
python3 -m http.server 8000
# Then visit http://localhost:8000
```

**Note:** RSL Icons work perfectly on any web hosting - the server requirement is only for local development.

See the [RSL Icons Documentation](../../docs/components/icons/index.html) for the full icon list and API reference.

## 🔐 Security Notes

- Form validation on client-side only (add server-side validation in production)
- Sanitize all user inputs on backend
- Use HTTPS in production
- Implement rate limiting on form submissions
- Add CSRF protection for forms
- Never store sensitive data in localStorage

## 📞 Support

For RSL framework support, visit:
- Documentation: [docs/overview.html](../../docs/overview.html)
- GitHub: [Repository URL]

## 📝 License

This template is part of the Responsive Slot Layout (RSL) framework.
Free to use for personal and commercial projects.

## 🎨 Credits

- **RSL Framework:** Responsive Slot Layout
- **Fonts:** Google Fonts (Bebas Neue, Inter)
- **Icons:** Font Awesome 6
- **Design:** Modern industrial business aesthetic

---

**Version:** 1.0.0
**Last Updated:** 2024
**Template Type:** Business/Service Website
**Difficulty:** Beginner-Friendly
