204 lines
6.4 KiB
Markdown
204 lines
6.4 KiB
Markdown
# SkyView Drones - Professional Drone Services Website
|
|
|
|
A modern, responsive website for your drone business specializing in aerial photography, video production, industrial inspections, and agricultural monitoring.
|
|
|
|
## Features
|
|
|
|
### 🚁 Complete Business Showcase
|
|
- **Hero Section** - Eye-catching introduction with call-to-action buttons
|
|
- **Services Overview** - Detailed sections for all your service offerings:
|
|
- Aerial Photography (Real estate, events, marketing)
|
|
- Video Production (4K recording, cinematic movements, editing)
|
|
- Industrial Inspections (Infrastructure, thermal imaging, safety assessments)
|
|
- Agricultural Monitoring (Crop analysis, livestock tracking, land surveying)
|
|
|
|
### 📱 Professional Design
|
|
- **Responsive Design** - Looks great on desktop, tablet, and mobile devices
|
|
- **Modern UI** - Clean, professional design with smooth animations
|
|
- **Interactive Portfolio** - Filterable gallery to showcase your work
|
|
- **Professional Branding** - Consistent color scheme and typography
|
|
|
|
### 📋 Lead Generation
|
|
- **Quote Request Form** - Comprehensive form to capture project details and client information
|
|
- **Contact Information** - Multiple ways for clients to reach you
|
|
- **Service-Specific Details** - Clear pricing expectations and service descriptions
|
|
|
|
### ⚡ Technical Features
|
|
- **Fast Loading** - Optimized for speed and performance
|
|
- **SEO Ready** - Proper meta tags and semantic HTML structure
|
|
- **Form Validation** - Real-time validation for better user experience
|
|
- **Smooth Animations** - Professional scroll animations and transitions
|
|
|
|
## Getting Started
|
|
|
|
### 1. Customize Your Information
|
|
|
|
Replace the placeholder information with your actual business details:
|
|
|
|
**In `index.html`:**
|
|
- Update company name "SkyView Drones" to your business name
|
|
- Replace phone number `(555) 123-4567` with your actual number
|
|
- Update email `info@skyviewdrones.com` with your business email
|
|
- Modify service area from "Nationwide Coverage" to your actual coverage area
|
|
- Update the hero title and descriptions to match your brand voice
|
|
|
|
**Key sections to customize:**
|
|
```html
|
|
<!-- Update these in the header -->
|
|
<div class="nav-logo">
|
|
<span>Your Business Name</span>
|
|
</div>
|
|
|
|
<!-- Update contact information -->
|
|
<p>(Your Phone Number)</p>
|
|
<p>your-email@yourdomain.com</p>
|
|
<p>Your Service Area</p>
|
|
```
|
|
|
|
### 2. Add Your Content
|
|
|
|
**Replace placeholder images:**
|
|
- Add your actual drone footage and photos
|
|
- Update the portfolio section with your real work
|
|
- Replace the about section image with your photo or team photo
|
|
|
|
**Portfolio Images:**
|
|
- Replace the placeholder URLs in the portfolio section
|
|
- Add your actual project images
|
|
- Update project descriptions
|
|
|
|
### 3. Customize Branding
|
|
|
|
**Colors (in `styles.css`):**
|
|
- Primary blue: `#0066cc` - used for buttons and accents
|
|
- Secondary red: `#ff6b6b` - used for call-to-action buttons
|
|
- Background gradient: `linear-gradient(135deg, #667eea 0%, #764ba2 100%)`
|
|
|
|
**Fonts:**
|
|
- Current: Inter (clean, professional)
|
|
- Can be changed by updating the Google Fonts import
|
|
|
|
### 4. Set Up Form Handling
|
|
|
|
The forms currently show success messages but need backend integration:
|
|
|
|
**For Quote Form (`quoteForm`):**
|
|
- Collects: Name, email, phone, company, service type, location, date, budget, description
|
|
- Currently shows alert - replace with actual form submission
|
|
|
|
**For Contact Form (`contactForm`):**
|
|
- Collects: Name, email, subject, message
|
|
- Currently shows alert - replace with actual form submission
|
|
|
|
**Integration options:**
|
|
- **Netlify Forms** - Easy setup for static sites
|
|
- **Formspree** - Simple form handling service
|
|
- **EmailJS** - Send emails directly from JavaScript
|
|
- **Custom Backend** - PHP, Node.js, or other server-side solution
|
|
|
|
Example EmailJS integration:
|
|
```javascript
|
|
// Replace the setTimeout in script.js with:
|
|
emailjs.send('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', data)
|
|
.then(() => {
|
|
alert('Thank you for your quote request!');
|
|
this.reset();
|
|
});
|
|
```
|
|
|
|
## File Structure
|
|
|
|
```
|
|
drone-website/
|
|
├── index.html # Main HTML file
|
|
├── styles.css # All CSS styles
|
|
├── script.js # JavaScript functionality
|
|
└── README.md # This file
|
|
```
|
|
|
|
## Customization Guide
|
|
|
|
### Adding New Services
|
|
1. Add a new service card in the services section
|
|
2. Create corresponding portfolio filter button
|
|
3. Add portfolio items with the new category
|
|
|
|
### Modifying Colors
|
|
Update the CSS custom properties or search and replace color values:
|
|
- Primary: `#0066cc`
|
|
- Secondary: `#ff6b6b`
|
|
- Background: `#f8f9fa`
|
|
- Text: `#333`
|
|
|
|
### Adding More Pages
|
|
Create new HTML files and link them in the navigation:
|
|
```html
|
|
<li><a href="services.html" class="nav-link">Services</a></li>
|
|
```
|
|
|
|
### SEO Optimization
|
|
1. Update meta descriptions for each page
|
|
2. Add proper alt tags to all images
|
|
3. Use semantic HTML structure
|
|
4. Add schema markup for local business
|
|
5. Create sitemap.xml
|
|
6. Set up Google Analytics
|
|
|
|
## Deployment Options
|
|
|
|
### Static Hosting (Recommended)
|
|
- **Netlify** - Free tier with form handling
|
|
- **Vercel** - Free with great performance
|
|
- **GitHub Pages** - Free for public repositories
|
|
- **Firebase Hosting** - Google's hosting solution
|
|
|
|
### Traditional Hosting
|
|
- Upload files to any web hosting provider
|
|
- Ensure HTTPS is enabled
|
|
- Set up form handling backend if needed
|
|
|
|
## Performance Tips
|
|
|
|
1. **Optimize Images**
|
|
- Compress photos before uploading
|
|
- Use WebP format when possible
|
|
- Add lazy loading for better performance
|
|
|
|
2. **Speed Optimization**
|
|
- Minify CSS and JavaScript for production
|
|
- Use a CDN for faster global loading
|
|
- Enable gzip compression
|
|
|
|
3. **SEO Best Practices**
|
|
- Add relevant keywords naturally
|
|
- Create descriptive page titles
|
|
- Use proper heading hierarchy (H1, H2, H3)
|
|
- Add local business schema markup
|
|
|
|
## Browser Support
|
|
|
|
- Chrome (latest)
|
|
- Firefox (latest)
|
|
- Safari (latest)
|
|
- Edge (latest)
|
|
- Mobile browsers (iOS Safari, Chrome Mobile)
|
|
|
|
## License
|
|
|
|
This template is free to use for your drone business. Customize it as needed for your brand and services.
|
|
|
|
## Support
|
|
|
|
For customization help or questions about implementing specific features, feel free to ask for assistance with:
|
|
- Form integration
|
|
- Additional functionality
|
|
- Design modifications
|
|
- SEO optimization
|
|
- Performance improvements
|
|
|
|
---
|
|
|
|
**Ready to take your drone business online?** 🚁
|
|
|
|
This website template provides everything you need to establish a professional online presence and start capturing leads for your drone services business.
|