234 lines
13 KiB
HTML
234 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>PilotEdge — Your Oversize Load Resource</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: { brand: { 50:'#fffbeb', 100:'#fef3c7', 200:'#fde68a', 400:'#fbbf24', 500:'#f59e0b', 600:'#d97706', 700:'#b45309' } }
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.hero-gradient { background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%); }
|
|
.card-hover { transition: transform 0.2s, box-shadow 0.2s; }
|
|
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.15); }
|
|
</style>
|
|
</head>
|
|
<body class="bg-slate-50 min-h-screen flex flex-col">
|
|
|
|
<div id="main-nav"></div>
|
|
<div id="poc-banner"></div>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero-gradient text-white pt-24 pb-20 px-4">
|
|
<div class="max-w-7xl mx-auto text-center">
|
|
<div class="mb-6">
|
|
<span class="inline-block bg-amber-500/20 text-amber-400 text-sm font-semibold px-4 py-1 rounded-full border border-amber-500/30">
|
|
Built by Industry Professionals
|
|
</span>
|
|
</div>
|
|
<h1 class="text-4xl md:text-6xl font-extrabold mb-6 leading-tight">
|
|
Your Complete Resource for<br>
|
|
<span class="text-amber-400">Oversize Load Hauling</span>
|
|
</h1>
|
|
<p class="text-lg md:text-xl text-gray-300 max-w-3xl mx-auto mb-10">
|
|
State regulations, escort vehicle services, load matching, and oversize-friendly parking —
|
|
everything truck drivers and carriers need, all in one place.
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<a href="regulations.html" class="bg-amber-500 hover:bg-amber-600 text-slate-900 font-bold px-8 py-4 rounded-xl text-lg transition-colors shadow-lg hover:shadow-xl">
|
|
Explore Regulations Map
|
|
</a>
|
|
<a href="order.html" class="bg-white/10 hover:bg-white/20 text-white font-bold px-8 py-4 rounded-xl text-lg transition-colors border border-white/20">
|
|
Request Escort Service
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Stats Bar -->
|
|
<section class="bg-slate-900 border-y border-slate-700">
|
|
<div class="max-w-7xl mx-auto px-4 py-6 grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
|
|
<div>
|
|
<div class="text-3xl font-bold text-amber-400">50</div>
|
|
<div class="text-sm text-gray-400">States Covered</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-3xl font-bold text-amber-400">15</div>
|
|
<div class="text-sm text-gray-400">Tools & Resources</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-3xl font-bold text-amber-400">24/7</div>
|
|
<div class="text-sm text-gray-400">Online Access</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-3xl font-bold text-amber-400">FREE</div>
|
|
<div class="text-sm text-gray-400">Core Resources</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features Grid -->
|
|
<section class="max-w-7xl mx-auto px-4 py-16">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Everything You Need, One Platform</h2>
|
|
<p class="text-lg text-slate-600 max-w-2xl mx-auto">Whether you're a truck driver, carrier, or escort operator — PilotEdge has the tools to make oversize hauling easier and safer.</p>
|
|
</div>
|
|
|
|
<!-- Row 1: Core Features -->
|
|
<h3 class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4">Core Tools</h3>
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-10">
|
|
<a href="regulations.html" class="bg-white rounded-2xl p-7 shadow-md card-hover block">
|
|
<div class="w-12 h-12 bg-amber-100 rounded-xl flex items-center justify-center text-xl mb-4">🗺️</div>
|
|
<h3 class="text-lg font-bold text-slate-900 mb-2">State Regulations Map</h3>
|
|
<p class="text-slate-600 text-sm mb-3">Permit thresholds, escort requirements, and equipment rules for all 50 states.</p>
|
|
<span class="text-amber-600 font-semibold text-sm">Explore Map →</span>
|
|
</a>
|
|
<a href="order.html" class="bg-white rounded-2xl p-7 shadow-md card-hover block">
|
|
<div class="w-12 h-12 bg-amber-100 rounded-xl flex items-center justify-center text-xl mb-4">📋</div>
|
|
<h3 class="text-lg font-bold text-slate-900 mb-2">Request Escort Service</h3>
|
|
<p class="text-slate-600 text-sm mb-3">Submit your load details and route — we'll match you with available escort vehicles.</p>
|
|
<span class="text-amber-600 font-semibold text-sm">Request Service →</span>
|
|
</a>
|
|
<a href="loadboard.html" class="bg-white rounded-2xl p-7 shadow-md card-hover block">
|
|
<div class="w-12 h-12 bg-amber-100 rounded-xl flex items-center justify-center text-xl mb-4">📦</div>
|
|
<h3 class="text-lg font-bold text-slate-900 mb-2">Oversize Load Board</h3>
|
|
<p class="text-slate-600 text-sm mb-3">Browse and post loads that need escorts. Connect carriers with pilot vehicles.</p>
|
|
<span class="text-amber-600 font-semibold text-sm">View Loads →</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Row 2: Road Intelligence -->
|
|
<h3 class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4">Road Intelligence</h3>
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-10">
|
|
<a href="truckstops.html" class="bg-white rounded-2xl p-7 shadow-md card-hover block">
|
|
<div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center text-xl mb-4">⛽</div>
|
|
<h3 class="text-lg font-bold text-slate-900 mb-2">Truck Stops & Parking</h3>
|
|
<p class="text-slate-600 text-sm mb-3">Oversize-friendly locations with entrance dimensions and user reviews.</p>
|
|
<span class="text-amber-600 font-semibold text-sm">Find Stops →</span>
|
|
</a>
|
|
<a href="bridges.html" class="bg-white rounded-2xl p-7 shadow-md card-hover block">
|
|
<div class="w-12 h-12 bg-red-100 rounded-xl flex items-center justify-center text-xl mb-4">🌉</div>
|
|
<h3 class="text-lg font-bold text-slate-900 mb-2">Bridge Clearances</h3>
|
|
<p class="text-slate-600 text-sm mb-3">Height, width, and weight restrictions for bridges and overpasses.</p>
|
|
<span class="text-amber-600 font-semibold text-sm">Check Clearances →</span>
|
|
</a>
|
|
<a href="weighstations.html" class="bg-white rounded-2xl p-7 shadow-md card-hover block">
|
|
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center text-xl mb-4">⚖️</div>
|
|
<h3 class="text-lg font-bold text-slate-900 mb-2">Weigh Stations</h3>
|
|
<p class="text-slate-600 text-sm mb-3">Live crowd-sourced open/closed status and inspection info.</p>
|
|
<span class="text-amber-600 font-semibold text-sm">View Stations →</span>
|
|
</a>
|
|
<a href="alerts.html" class="bg-white rounded-2xl p-7 shadow-md card-hover block">
|
|
<div class="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center text-xl mb-4">⚠️</div>
|
|
<h3 class="text-lg font-bold text-slate-900 mb-2">Route & Weather Alerts</h3>
|
|
<p class="text-slate-600 text-sm mb-3">Construction, closures, and wind conditions on your route.</p>
|
|
<span class="text-amber-600 font-semibold text-sm">View Alerts →</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Row 3: Resources & Services -->
|
|
<h3 class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4">Resources & Services</h3>
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-10">
|
|
<a href="locator.html" class="bg-white rounded-2xl p-7 shadow-md card-hover block">
|
|
<div class="w-12 h-12 bg-amber-100 rounded-xl flex items-center justify-center text-xl mb-4">📍</div>
|
|
<h3 class="text-lg font-bold text-slate-900 mb-2">Find Escorts</h3>
|
|
<p class="text-slate-600 text-sm mb-3">Locate pilot/escort vehicles near your load departure point.</p>
|
|
<span class="text-amber-600 font-semibold text-sm">Find Escorts →</span>
|
|
</a>
|
|
<a href="contacts.html" class="bg-white rounded-2xl p-7 shadow-md card-hover block">
|
|
<div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center text-xl mb-4">📞</div>
|
|
<h3 class="text-lg font-bold text-slate-900 mb-2">DOT Contacts</h3>
|
|
<p class="text-slate-600 text-sm mb-3">Permit office phone numbers and emails for every state.</p>
|
|
<span class="text-amber-600 font-semibold text-sm">View Directory →</span>
|
|
</a>
|
|
<a href="calendar.html" class="bg-white rounded-2xl p-7 shadow-md card-hover block">
|
|
<div class="w-12 h-12 bg-indigo-100 rounded-xl flex items-center justify-center text-xl mb-4">📅</div>
|
|
<h3 class="text-lg font-bold text-slate-900 mb-2">Seasonal Calendar</h3>
|
|
<p class="text-slate-600 text-sm mb-3">Weight restrictions, closures, and blackout periods by state and season.</p>
|
|
<span class="text-amber-600 font-semibold text-sm">View Calendar →</span>
|
|
</a>
|
|
<a href="documents.html" class="bg-white rounded-2xl p-7 shadow-md card-hover block">
|
|
<div class="w-12 h-12 bg-sky-100 rounded-xl flex items-center justify-center text-xl mb-4">🗂️</div>
|
|
<h3 class="text-lg font-bold text-slate-900 mb-2">Document Vault</h3>
|
|
<p class="text-slate-600 text-sm mb-3">Store permits, insurance, and certifications — accessible from the road.</p>
|
|
<span class="text-amber-600 font-semibold text-sm">Manage Docs →</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Coming Soon -->
|
|
<h3 class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4">Coming Soon</h3>
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<div class="bg-white rounded-2xl p-7 shadow-md border-2 border-dashed border-slate-200 opacity-75">
|
|
<div class="w-12 h-12 bg-slate-100 rounded-xl flex items-center justify-center text-xl mb-4">🧭</div>
|
|
<h3 class="text-lg font-bold text-slate-900 mb-2">Permit Route Parser</h3>
|
|
<p class="text-slate-600 text-sm mb-3">Upload a state permit and get turn-by-turn navigation in your favorite map app.</p>
|
|
<span class="text-slate-400 font-semibold text-sm">Coming Soon</span>
|
|
</div>
|
|
<div class="bg-white rounded-2xl p-7 shadow-md border-2 border-dashed border-slate-200 opacity-75">
|
|
<div class="w-12 h-12 bg-slate-100 rounded-xl flex items-center justify-center text-xl mb-4">🔔</div>
|
|
<h3 class="text-lg font-bold text-slate-900 mb-2">Regulatory Change Alerts</h3>
|
|
<p class="text-slate-600 text-sm mb-3">Get notified when states update their oversize regulations and requirements.</p>
|
|
<span class="text-slate-400 font-semibold text-sm">Coming Soon</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- How It Works -->
|
|
<section class="bg-slate-900 text-white py-16 px-4">
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">How It Works</h2>
|
|
<p class="text-lg text-gray-400">Three simple steps for carriers and truck drivers</p>
|
|
</div>
|
|
<div class="grid md:grid-cols-3 gap-8">
|
|
<div class="text-center">
|
|
<div class="w-16 h-16 bg-amber-500 rounded-full flex items-center justify-center text-2xl font-bold text-slate-900 mx-auto mb-5">1</div>
|
|
<h3 class="text-xl font-semibold mb-3">Check Regulations</h3>
|
|
<p class="text-gray-400">Use our interactive map to see what permits and escorts your load requires in each state on your route.</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="w-16 h-16 bg-amber-500 rounded-full flex items-center justify-center text-2xl font-bold text-slate-900 mx-auto mb-5">2</div>
|
|
<h3 class="text-xl font-semibold mb-3">Find or Request Escorts</h3>
|
|
<p class="text-gray-400">Browse available escort operators near your route, or submit a service request with your load details.</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="w-16 h-16 bg-amber-500 rounded-full flex items-center justify-center text-2xl font-bold text-slate-900 mx-auto mb-5">3</div>
|
|
<h3 class="text-xl font-semibold mb-3">Move Your Load</h3>
|
|
<p class="text-gray-400">Hit the road with confidence knowing your permits, escorts, and route are all handled.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Section -->
|
|
<section class="max-w-7xl mx-auto px-4 py-16 text-center">
|
|
<div class="bg-gradient-to-r from-amber-500 to-amber-600 rounded-3xl p-12 shadow-xl">
|
|
<h2 class="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Need an Escort Vehicle?</h2>
|
|
<p class="text-lg text-slate-800 mb-8 max-w-2xl mx-auto">
|
|
Whether it's a single pilot car or a full escort team, we've got you covered.
|
|
Tell us about your load and we'll handle the rest.
|
|
</p>
|
|
<a href="order.html" class="inline-block bg-slate-900 hover:bg-slate-800 text-white font-bold px-8 py-4 rounded-xl text-lg transition-colors shadow-lg">
|
|
Request Escort Service →
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<div id="main-footer"></div>
|
|
|
|
<script src="nav.js"></script>
|
|
<script>
|
|
renderNav('home');
|
|
renderBanner();
|
|
renderFooter();
|
|
</script>
|
|
</body>
|
|
</html>
|