Files
web-drone/index.html
2025-09-27 01:32:49 +01:00

418 lines
20 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PTSAerial - Professional Aerial Photography & Industrial Solutions | Dartford, Kent</title>
<meta name="description" content="PTS London trading as PTSAerial - Professional drone services for aerial photography, video capture, industrial inspections, and agricultural monitoring across Kent and the UK. CAA licensed and fully insured.">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>
<body>
<!-- Header -->
<header class="header">
<nav class="nav">
<div class="nav-container">
<div class="nav-logo">
<img src="drone.png" alt="PTSAerial Drone" class="logo-icon">
<span>PTSAerial</span>
</div>
<ul class="nav-menu">
<li><a href="#home" class="nav-link">Home</a></li>
<li><a href="#services" class="nav-link">Services</a></li>
<!-- <li><a href="#portfolio" class="nav-link">Portfolio</a></li> -->
<li><a href="#about" class="nav-link">About</a></li>
<li><a href="#contact" class="nav-link">Contact</a></li>
<li><a href="#quote" class="nav-link nav-cta">Get Quote</a></li>
</ul>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>
</header>
<!-- Hero Section -->
<section id="home" class="hero">
<div class="hero-content">
<h1 class="hero-title">Professional Drone Services</h1>
<p class="hero-subtitle">Capturing stunning aerial photography, providing industrial inspections, and agricultural monitoring with cutting-edge drone technology</p>
<div class="hero-buttons">
<a href="#quote" class="btn btn-primary">Get Free Quote</a>
<!-- <a href="#portfolio" class="btn btn-secondary">View Our Work</a> -->
</div>
</div>
<div class="hero-video">
<video autoplay muted loop>
<source src="hero-video.mp4" type="video/mp4">
<!-- Placeholder for hero video -->
</video>
</div>
</section>
<!-- Services Section -->
<section id="services" class="services">
<div class="container">
<h2 class="section-title">Our Services</h2>
<p class="section-subtitle">Professional drone solutions for every need</p>
<div class="services-grid">
<div class="service-card">
<div class="service-icon">
<i class="fas fa-camera"></i>
</div>
<h3>Aerial Photography</h3>
<p>Stunning high-resolution aerial photographs for real estate, events, marketing, and personal projects. Capture unique perspectives that showcase your property or event from above.</p>
<ul class="service-features">
<li>4K High-Resolution Images</li>
<li>Real Estate Photography</li>
<li>Event Coverage</li>
<li>Marketing Content</li>
</ul>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-industry"></i>
</div>
<h3>Industrial</h3>
<p>Safe and efficient inspections of infrastructure, buildings, towers, and industrial facilities. Reduce costs and safety risks with our advanced drone technology.</p>
<ul class="service-features">
<li>Infrastructure Inspections</li>
<li>Thermal Imaging</li>
<li>Power Line Inspections</li>
<li>Detailed Reports</li>
</ul>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-seedling"></i>
</div>
<h3>Agricultural</h3>
<p>Precision agriculture solutions including crop monitoring, livestock tracking, and land surveying. Optimize your farming operations with actionable aerial data.</p>
<ul class="service-features">
<li>Crop Health Analysis</li>
<li>Livestock Monitoring</li>
<li>Land Surveying</li>
<li>Irrigation Planning</li>
</ul>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-hard-hat"></i>
</div>
<h3>Construction</h3>
<p>Advanced solutions for construction site monitoring, including progress tracking, safety inspections, and site surveys. Ensure your project stays on schedule and within budget.</p>
<ul class="service-features">
<li>Site Progress Tracking</li>
<li>Safety Inspections</li>
<li>3D Mapping</li>
<li>Site Surveys</li>
</ul>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-drafting-compass"></i>
</div>
<h3>Architectural</h3>
<p>High-quality aerial imagery and 3D modeling for architectural projects. Showcase your designs with stunning visuals and accurate site assessments.</p>
<ul class="service-features">
<li>3D Modeling</li>
<li>Aerial Imagery</li>
<li>Site Assessments</li>
<li>Design Visualization</li>
</ul>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-shield-alt"></i>
</div>
<h3>Security Monitoring</h3>
<p>Professional security surveillance and monitoring services for commercial properties, events, and industrial sites. Real-time monitoring with advanced thermal imaging capabilities.</p>
<ul class="service-features">
<li>Perimeter Surveillance</li>
<li>Thermal Imaging</li>
<li>Real-time Monitoring</li>
<li>Incident Documentation</li>
</ul>
</div>
</div>
</div>
</section>
<!--
<section id="portfolio" class="portfolio">
<div class="container">
<h2 class="section-title">Our Work</h2>
<p class="section-subtitle">See the quality and creativity in our drone projects</p>
<div class="portfolio-filter">
<button class="filter-btn active" data-filter="all">All</button>
<button class="filter-btn" data-filter="photography">Photography</button>
<button class="filter-btn" data-filter="industrial">Industrial</button>
<button class="filter-btn" data-filter="agriculture">Agriculture</button>
<button class="filter-btn" data-filter="security">Security</button>
</div>
<div class="portfolio-grid">
<div class="portfolio-item" data-category="photography">
<img src="https://via.placeholder.com/400x300/0066cc/ffffff?text=Real+Estate+Photo" alt="Real Estate Photography">
<div class="portfolio-overlay">
<h4>Real Estate Photography</h4>
<p>Luxury home showcase</p>
</div>
</div>
<div class="portfolio-item" data-category="industrial">
<img src="https://via.placeholder.com/400x300/cc0066/ffffff?text=Tower+Inspection" alt="Tower Inspection">
<div class="portfolio-overlay">
<h4>Tower Inspection</h4>
<p>Cell tower safety assessment</p>
</div>
</div>
<div class="portfolio-item" data-category="agriculture">
<img src="https://via.placeholder.com/400x300/66cc00/ffffff?text=Crop+Monitoring" alt="Crop Monitoring">
<div class="portfolio-overlay">
<h4>Crop Monitoring</h4>
<p>Precision agriculture analysis</p>
</div>
</div>
<div class="portfolio-item" data-category="security">
<img src="https://via.placeholder.com/400x300/990000/ffffff?text=Security+Monitoring" alt="Security Monitoring">
<div class="portfolio-overlay">
<h4>Security Monitoring</h4>
<p>Perimeter surveillance</p>
</div>
</div>
<div class="portfolio-item" data-category="photography">
<img src="https://via.placeholder.com/400x300/0066cc/ffffff?text=Construction+Site" alt="Construction Photography">
<div class="portfolio-overlay">
<h4>Construction Progress</h4>
<p>Development documentation</p>
</div>
</div>
</div>
</div>
</section> -->
<!-- About Section -->
<section id="about" class="about">
<div class="container">
<div class="about-content">
<div class="about-text">
<h2>About PTSAerial</h2>
<p>PTS London trading as PTSAerial provides professional, reliable, and innovative drone services across Kent and the UK. Based in Dartford, our CAA-licensed team is fully insured and equipped with the latest drone technology to deliver exceptional results for every project.</p>
<div class="about-stats">
<!-- <div class="stat">
<h3>500+</h3>
<p>Projects Completed</p>
</div> -->
<div class="stat">
<h3>100%</h3>
<p>Client Satisfaction</p>
</div>
<div class="stat">
<h3>24/7</h3>
<p>Support Available</p>
</div>
</div>
<div class="certifications">
<h4>Certifications & Insurance</h4>
<ul>
<li><i class="fas fa-check"></i> CAA Licensed (UK)</li>
<li><i class="fas fa-check"></i> Fully Insured Operations</li>
<li><i class="fas fa-check"></i> Professional Equipment</li>
<li><i class="fas fa-check"></i> Safety First Approach</li>
</ul>
</div>
</div>
<div class="about-image">
<img src="drone-op.jpg" alt="Professional Drone Operator">
</div>
</div>
</div>
</section>
<!-- Quote Form Section -->
<section id="quote" class="quote-section">
<div class="container">
<h2 class="section-title">Get Your Free Quote</h2>
<p class="section-subtitle">Tell us about your project and we'll provide a detailed quote within 24 hours</p>
<form id="quoteForm" class="quote-form">
<div class="form-row">
<div class="form-group">
<label for="name">Full Name *</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email Address *</label>
<input type="email" id="email" name="email" required>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="phone">Phone Number</label>
<input type="tel" id="phone" name="phone">
</div>
<div class="form-group">
<label for="company">Company/Organisation</label>
<input type="text" id="company" name="company">
</div>
</div>
<div class="form-group">
<label for="service">Service Type *</label>
<select id="service" name="service" required>
<option value="">Select a service</option>
<option value="aerial-photography">Aerial Photography</option>
<option value="industrial-inspection">Industrial Inspection</option>
<option value="agricultural-monitoring">Agricultural Monitoring</option>
<option value="security-monitoring">Security Monitoring</option>
<option value="construction">Construction</option>
<option value="architectural">Architectural</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group">
<label for="location">Project Location *</label>
<input type="text" id="location" name="location" placeholder="City / County" required>
</div>
<div class="form-row">
<div class="form-group">
<label for="date">Preferred Date</label>
<input type="date" id="date" name="date">
</div>
</div>
<div class="form-group">
<label for="description">Project Description *</label>
<textarea id="description" name="description" rows="5" placeholder="Please describe your project, specific requirements, and any special considerations..." required></textarea>
</div>
<button type="submit" class="btn btn-primary btn-large">Submit Quote Request</button>
</form>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact">
<div class="container">
<h2 class="section-title">Contact Us</h2>
<div class="contact-content">
<div class="contact-info">
<div class="contact-item">
<i class="fas fa-phone"></i>
<div>
<h4>Phone</h4>
<p>+44 (0)20 3883 7578</p>
</div>
</div>
<div class="contact-item">
<i class="fas fa-envelope"></i>
<div>
<h4>Email</h4>
<p>oli@ptslondon.co.uk</p>
</div>
</div>
<div class="contact-item">
<i class="fas fa-map-marker-alt"></i>
<div>
<h4>Location</h4>
<p>Dartford, Kent, UK</p>
</div>
</div>
</div>
<div class="contact-form">
<h3>Send us a message</h3>
<form id="contactForm">
<div class="form-group">
<input type="text" name="contact_name" placeholder="Your Name" required>
</div>
<div class="form-group">
<input type="email" name="contact_email" placeholder="Your Email" required>
</div>
<div class="form-group">
<input type="text" name="subject" placeholder="Subject" required>
</div>
<div class="form-group">
<textarea name="message" rows="5" placeholder="Your Message" required></textarea>
</div>
<button type="submit" class="btn btn-primary">Send Message</button>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section">
<div class="footer-logo">
<img src="drone.png" alt="PTSAerial Drone" class="logo-icon">
<span>PTSAerial</span>
</div>
<p>Professional drone services for aerial photography, industrial inspections, and agricultural monitoring across Kent and the UK.</p>
<!-- <div class="social-links">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
</div> -->
</div>
<div class="footer-section">
<h4>Services</h4>
<ul>
<li><a href="#services">Aerial Photography</a></li>
<li><a href="#services">Industrial Inspections</a></li>
<li><a href="#services">Agricultural Monitoring</a></li>
<li><a href="#services">Security Monitoring</a></li>
<li><a href="#services">Construction</a></li>
<li><a href="#services">Architectural</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Company</h4>
<ul>
<li><a href="#about">About Us</a></li>
<!-- <li><a href="#portfolio">Portfolio</a></li> -->
<li><a href="#contact">Contact</a></li>
<li><a href="#quote">Get Quote</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Contact Info</h4>
<p><i class="fas fa-phone"></i> +44 (0)20 3883 7578</p>
<p><i class="fas fa-envelope"></i> oli@ptslondon.co.uk</p>
<p><i class="fas fa-map-marker-alt"></i> Dartford, Kent, UK</p>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2025 PTSAerial (PTS London Ltd). All rights reserved. | CAA Licensed | Fully Insured | Based in Dartford, Kent</p>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
<script src="script.js"></script>
</body>
</html>