# Local Service One-Page Template

A premium, professional one-page website template for local service businesses (plumbing, heating, electrical, handyman services, etc.). 

Built with Bootstrap 5, fully responsive, and optimized for conversions.

## Features

✓ **Fully Responsive** - Looks great on all devices
✓ **Bootstrap 5** - Latest stable version
✓ **AOS Animations** - Smooth scroll animations  
✓ **Professional Design** - VorinVista branding with deep blue and orange accents
✓ **Conversion-Focused** - Clear CTAs, trust signals, and contact forms
✓ **Fast Loading** - Optimized assets and minimal dependencies
✓ **SEO Ready** - Proper meta tags and semantic HTML
✓ **Easy to Customize** - Well-organized code and CSS variables

## What's Included

```
local-service/
├── index.html              # Main page with all sections
├── README.md               # This file
├── assets/
│   ├── css/
│   │   └── style.css       # Custom styles (VorinVista branding)
│   ├── js/
│   │   └── main.js         # Custom JavaScript
│   ├── img/
│   │   ├── hero.svg        # Hero image placeholder
│   │   ├── about.svg       # About section image
│   │   ├── favicon.png     # Favicon
│   │   └── apple-touch-icon.png
│   └── vendor/
│       ├── bootstrap/      # Bootstrap 5 files
│       ├── bootstrap-icons/# Icon fonts
│       ├── aos/            # Animate On Scroll library
│       ├── glightbox/      # Lightbox gallery
│       └── swiper/         # Touch slider
```

## Template Sections

1. **Sticky Navbar** - Mobile-responsive with smooth scroll anchor links
2. **Hero Section** - Eye-catching headline, CTAs, and trust signals
3. **Services Grid** - 6 service cards with icons
4. **About Section** - Company info with image and bullet points
5. **How It Works** - 3-step process explanation
6. **Customer Reviews** - 3 testimonial cards
7. **FAQ Accordion** - 5 common questions with expand/collapse
8. **Contact Section** - Form + contact info + map placeholder
9. **Footer** - Social links and disclaimer

## Quick Start

### Option 1: Drag & Drop (Easiest)

1. **Netlify**: Drag the entire `local-service` folder to [netlify.com/drop](https://app.netlify.com/drop)
2. **Cloudflare Pages**: Upload via dashboard at [dash.cloudflare.com](https://dash.cloudflare.com)
3. **Vercel**: Import project at [vercel.com/new](https://vercel.com/new)

### Option 2: Traditional Hosting

1. Upload the entire folder via FTP/SFTP to your web host
2. Point your domain to the `index.html` file
3. Done! Your site is live

### Option 3: Local Preview

1. Simply open `index.html` in any modern browser
2. All assets are included - no build process needed

## Customization Guide

### 1. Change Business Name & Content

Open `index.html` and search for:
- `North London Plumbing & Heating` - Replace with your business name
- Update all text content in each section
- Modify phone numbers and email addresses
- Update social media links in footer

### 2. Change Colors

Open `assets/css/style.css` and edit the CSS variables at the top:

```css
:root {
  --primary-color: #0B409C;  /* Deep blue - change to your primary color */
  --accent-color: #F17020;   /* Orange - change to your accent color */
  --heading-color: #1b2f45;  /* Dark blue-grey for headings */
  --default-color: #3a4a5f;  /* Body text color */
}
```

### 3. Add Your Images

Replace the SVG placeholders in `assets/img/`:
- `hero.svg` - Replace with your hero image (recommended: 1200x600px)
- `about.svg` - Replace with team/office photo (recommended: 800x600px)
- `favicon.png` - Replace with your 32x32px icon
- `apple-touch-icon.png` - Replace with your 180x180px icon

### 4. Update Meta Tags

In `index.html` `<head>` section:
```html
<title>Your Business Name | Your Service Area</title>
<meta name="description" content="Your meta description here">
<meta name="keywords" content="your, keywords, here">
```

### 5. Connect Contact Form

The form is currently UI-only. To make it functional:

**Option A: PHP Backend** (if your host supports PHP)
- Add form action: `<form action="send-email.php" method="POST">`
- Create `send-email.php` with mail handling code

**Option B: Third-Party Service**
- [Formspree](https://formspree.io) - Easy form endpoints
- [Basin](https://usebasin.com) - Form backend service
- [Netlify Forms](https://www.netlify.com/products/forms/) - If using Netlify

**Option C: JavaScript Integration**
- EmailJS for client-side email sending
- Web3Forms API
- Custom API endpoint

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)

## Performance

- **Lighthouse Score**: 90+ (Performance, Accessibility, Best Practices, SEO)
- **Page Load**: < 2 seconds on average connection
- **Mobile-First**: Optimized for mobile devices

## License

**Free for Personal & Commercial Use**

✓ Use for client projects
✓ Use for your own business
✓ Modify and customize as needed
✓ No attribution required (but appreciated!)

✗ Do NOT resell or redistribute this template as-is
✗ Do NOT claim it as your own original work
✗ Do NOT upload to template marketplaces

## Support & Customization

This is a free template provided as-is, without official support.

**Need help?**
- VorinVista offers customization services
- We can add your branding, deploy with hosting, and handle technical setup
- Contact: [vorinvista.com/contact](https://vorinvista.com/contact)

## Credits

- **Template**: VorinVista
- **Framework**: Bootstrap 5
- **Icons**: Bootstrap Icons
- **Animations**: AOS (Animate On Scroll)
- **Lightbox**: GLightbox
- **Slider**: Swiper

---

**Made with ❤️ by VorinVista**  
Visit [vorinvista.com](https://vorinvista.com) for more templates and web services.
