1948 lines
88 KiB
HTML
1948 lines
88 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
|
||
|
||
<!-- Primary Meta Tags -->
|
||
<title>Digital Chalking - Save 90% on Parking Enforcement | $10k vs $73k Per Vehicle</title>
|
||
<meta name="title" content="Digital Chalking - Save 90% on Parking Enforcement | $10k vs $73k Per Vehicle">
|
||
<meta name="description" content="Stop wasting money on outdated parking enforcement. AI-powered digital chalking reduces officer workload by 90% and costs under $10k per vehicle (vs $73k legacy systems). Court-ready evidence, no vendor lock-in. Free demo available.">
|
||
<meta name="keywords" content="digital chalking, parking enforcement, digital parking enforcement, LPR, license plate recognition, parking citations, parking enforcement technology, council parking, municipal parking, Auckland parking, New Zealand parking enforcement">
|
||
|
||
<!-- Geo Tags -->
|
||
<meta name="geo.region" content="NZ">
|
||
<meta name="geo.placename" content="New Zealand">
|
||
|
||
<!-- Open Graph / Facebook -->
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:url" content="https://digitalchalking.com/">
|
||
<meta property="og:title" content="Digital Chalking - Save 90% on Parking Enforcement">
|
||
<meta property="og:description" content="AI-powered parking enforcement that costs under $10k per vehicle vs $73k for legacy systems. Reduce officer workload by 90%. Court-ready evidence. No vendor lock-in.">
|
||
<meta property="og:image" content="https://digitalchalking.com/pana-full.png">
|
||
|
||
<!-- Twitter -->
|
||
<meta property="twitter:card" content="summary_large_image">
|
||
<meta property="twitter:url" content="https://digitalchalking.com/">
|
||
<meta property="twitter:title" content="Digital Chalking - Save 90% on Parking Enforcement">
|
||
<meta property="twitter:description" content="AI-powered parking enforcement that costs under $10k per vehicle vs $73k for legacy systems. Free demo available.">
|
||
<meta property="twitter:image" content="https://digitalchalking.com/pana-full.png">
|
||
|
||
<!-- Canonical URL -->
|
||
<link rel="canonical" href="https://digitalchalking.com/">
|
||
|
||
<!-- Robots -->
|
||
<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
|
||
|
||
<!-- Preconnect for Performance -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link rel="preconnect" href="https://ipapi.co">
|
||
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||
|
||
<!-- Structured Data / Schema.org -->
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "SoftwareApplication",
|
||
"name": "Digital Chalking",
|
||
"applicationCategory": "BusinessApplication",
|
||
"operatingSystem": "Cloud-based",
|
||
"offers": {
|
||
"@type": "Offer",
|
||
"price": "10000",
|
||
"priceCurrency": "NZD",
|
||
"description": "Per vehicle parking enforcement system"
|
||
},
|
||
"description": "AI-powered digital parking enforcement system that replaces manual chalking with automated vehicle tracking and license plate recognition.",
|
||
"featureList": [
|
||
"AI vehicle detection and tracking",
|
||
"License plate recognition (LPR)",
|
||
"Court-ready evidence with timestamps",
|
||
"Permit holder whitelist",
|
||
"Real-time officer alerts",
|
||
"Cloud-based infrastructure"
|
||
],
|
||
"aggregateRating": {
|
||
"@type": "AggregateRating",
|
||
"ratingValue": "4.9",
|
||
"ratingCount": "12"
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
:root {
|
||
--primary: #1e40af;
|
||
--primary-dark: #1e3a8a;
|
||
--secondary: #0f172a;
|
||
--accent: #3b82f6;
|
||
--dark: #0f172a;
|
||
--text: #1e293b;
|
||
--text-light: #64748b;
|
||
--bg: #ffffff;
|
||
--bg-light: #f8fafc;
|
||
--warning: #dc2626;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Inter', sans-serif;
|
||
color: var(--text);
|
||
line-height: 1.6;
|
||
overflow-x: hidden;
|
||
width: 100%;
|
||
max-width: 100vw;
|
||
}
|
||
|
||
/* Prevent horizontal scroll on all elements */
|
||
* {
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* Better word wrapping */
|
||
h1, h2, h3, h4, h5, h6, p, li, span, div {
|
||
word-wrap: break-word;
|
||
overflow-wrap: break-word;
|
||
hyphens: auto;
|
||
}
|
||
|
||
/* Navigation */
|
||
nav {
|
||
position: fixed;
|
||
top: 0;
|
||
width: 100%;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(10px);
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||
z-index: 1000;
|
||
padding: 20px 0;
|
||
}
|
||
|
||
.nav-container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 0 40px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.logo {
|
||
font-size: 24px;
|
||
font-weight: 800;
|
||
background: linear-gradient(135deg, var(--primary), var(--accent));
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
.nav-links {
|
||
display: flex;
|
||
gap: 40px;
|
||
align-items: center;
|
||
}
|
||
|
||
.nav-links a {
|
||
text-decoration: none;
|
||
color: var(--text);
|
||
font-weight: 500;
|
||
transition: color 0.3s;
|
||
}
|
||
|
||
.nav-links a:hover {
|
||
color: var(--primary);
|
||
}
|
||
|
||
.mobile-menu-toggle {
|
||
display: none;
|
||
background: none;
|
||
border: none;
|
||
color: var(--text);
|
||
cursor: pointer;
|
||
padding: 8px;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.mobile-menu-toggle {
|
||
display: block;
|
||
}
|
||
|
||
.nav-links {
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 0;
|
||
right: 0;
|
||
background: white;
|
||
flex-direction: column;
|
||
gap: 0;
|
||
padding: 20px;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||
display: none;
|
||
}
|
||
|
||
.nav-links.active {
|
||
display: flex;
|
||
}
|
||
|
||
.nav-links a {
|
||
padding: 12px 0;
|
||
border-bottom: 1px solid #e5e7eb;
|
||
}
|
||
|
||
.nav-links a:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.cta-btn {
|
||
margin-top: 12px;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.cta-btn {
|
||
padding: 12px 28px;
|
||
background: linear-gradient(135deg, var(--primary), var(--accent));
|
||
color: white;
|
||
border: none;
|
||
border-radius: 12px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: transform 0.3s, box-shadow 0.3s;
|
||
text-decoration: none;
|
||
display: inline-block;
|
||
}
|
||
|
||
.cta-btn:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 12px 28px rgba(30, 64, 175, 0.4);
|
||
}
|
||
|
||
/* Hero Section */
|
||
.hero {
|
||
margin-top: 80px;
|
||
padding: 100px 40px 80px;
|
||
background: linear-gradient(135deg, #1e40af 0%, #0f172a 100%);
|
||
color: white;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hero::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>');
|
||
opacity: 0.3;
|
||
}
|
||
|
||
.hero-container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 60px;
|
||
align-items: center;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.hero-content h1 {
|
||
font-size: 56px;
|
||
font-weight: 900;
|
||
line-height: 1.1;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.hero-content p {
|
||
font-size: 20px;
|
||
opacity: 0.95;
|
||
margin-bottom: 40px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.hero-buttons {
|
||
display: flex;
|
||
gap: 16px;
|
||
}
|
||
|
||
.btn-primary {
|
||
padding: 16px 36px;
|
||
background: white;
|
||
color: var(--primary);
|
||
border: none;
|
||
border-radius: 12px;
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
cursor: pointer;
|
||
transition: transform 0.3s, box-shadow 0.3s;
|
||
text-decoration: none;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.btn-secondary {
|
||
padding: 16px 36px;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
color: white;
|
||
border: 2px solid white;
|
||
border-radius: 12px;
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
text-decoration: none;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background: rgba(255, 255, 255, 0.3);
|
||
}
|
||
|
||
.hero-image {
|
||
position: relative;
|
||
}
|
||
|
||
.hero-image img {
|
||
width: 100%;
|
||
}
|
||
|
||
/* Stats Bar */
|
||
.stats-bar {
|
||
background: var(--dark);
|
||
color: white;
|
||
padding: 60px 40px;
|
||
}
|
||
|
||
.stats-container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 40px;
|
||
}
|
||
|
||
.stat-item {
|
||
text-align: center;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 48px;
|
||
font-weight: 900;
|
||
background: linear-gradient(135deg, #3b82f6, #60a5fa);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 16px;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* Features Section */
|
||
.features {
|
||
padding: 100px 40px;
|
||
background: var(--bg-light);
|
||
}
|
||
|
||
.section-header {
|
||
text-align: center;
|
||
max-width: 700px;
|
||
margin: 0 auto 80px;
|
||
}
|
||
|
||
.section-header h2 {
|
||
font-size: 48px;
|
||
font-weight: 800;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.section-header p {
|
||
font-size: 20px;
|
||
color: var(--text-light);
|
||
}
|
||
|
||
.features-grid {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 40px;
|
||
}
|
||
|
||
.features-grid.four-col {
|
||
grid-template-columns: repeat(4, 1fr);
|
||
}
|
||
|
||
.feature-card {
|
||
background: white;
|
||
padding: 40px;
|
||
border-radius: 20px;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||
transition: transform 0.3s, box-shadow 0.3s;
|
||
}
|
||
|
||
.feature-card:hover {
|
||
transform: translateY(-8px);
|
||
box-shadow: 0 12px 40px rgba(102, 126, 234, 0.2);
|
||
}
|
||
|
||
.feature-icon {
|
||
width: 64px;
|
||
height: 64px;
|
||
background: linear-gradient(135deg, var(--primary), var(--accent));
|
||
border-radius: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-size: 32px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.feature-card h3 {
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.feature-card p {
|
||
color: var(--text-light);
|
||
line-height: 1.7;
|
||
}
|
||
|
||
/* How It Works */
|
||
.how-it-works {
|
||
padding: 100px 40px;
|
||
background: white;
|
||
}
|
||
|
||
.steps-container {
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 40px;
|
||
}
|
||
|
||
.step {
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
|
||
.step::after {
|
||
content: '→';
|
||
position: absolute;
|
||
right: -40px;
|
||
top: 50px;
|
||
font-size: 32px;
|
||
color: var(--primary);
|
||
opacity: 0.3;
|
||
}
|
||
|
||
.step:last-child::after {
|
||
display: none;
|
||
}
|
||
|
||
.step-number {
|
||
width: 80px;
|
||
height: 80px;
|
||
background: linear-gradient(135deg, var(--primary), var(--accent));
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-size: 36px;
|
||
font-weight: 800;
|
||
margin: 0 auto 24px;
|
||
}
|
||
|
||
.step h3 {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.step p {
|
||
color: var(--text-light);
|
||
font-size: 15px;
|
||
}
|
||
|
||
/* Benefits Section */
|
||
.benefits {
|
||
padding: 100px 40px;
|
||
background: var(--dark);
|
||
color: white;
|
||
}
|
||
|
||
.benefits .section-header h2,
|
||
.benefits .section-header p {
|
||
color: white;
|
||
}
|
||
|
||
.benefits-grid {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 40px;
|
||
}
|
||
|
||
.benefit-item {
|
||
display: flex;
|
||
gap: 24px;
|
||
padding: 32px;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border-radius: 16px;
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.benefit-icon {
|
||
width: 56px;
|
||
height: 56px;
|
||
background: linear-gradient(135deg, #3b82f6, #60a5fa);
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.benefit-content h3 {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.benefit-content p {
|
||
opacity: 0.8;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* CTA Section */
|
||
.cta-section {
|
||
padding: 120px 40px;
|
||
background: linear-gradient(135deg, #1e40af, #0f172a);
|
||
color: white;
|
||
text-align: center;
|
||
}
|
||
|
||
.cta-section h2 {
|
||
font-size: 48px;
|
||
font-weight: 900;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.cta-section p {
|
||
font-size: 20px;
|
||
opacity: 0.95;
|
||
margin-bottom: 40px;
|
||
max-width: 700px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
/* Footer */
|
||
footer {
|
||
background: var(--dark);
|
||
color: white;
|
||
padding: 60px 40px 40px;
|
||
}
|
||
|
||
.footer-container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
display: grid;
|
||
grid-template-columns: 2fr 1fr 1fr 1fr;
|
||
gap: 60px;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.footer-brand {
|
||
font-size: 24px;
|
||
font-weight: 800;
|
||
background: linear-gradient(135deg, #3b82f6, #60a5fa);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.footer-desc {
|
||
opacity: 0.7;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.footer-section h4 {
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
margin-bottom: 16px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.footer-section ul {
|
||
list-style: none;
|
||
}
|
||
|
||
.footer-section ul li {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.footer-section ul li a {
|
||
color: rgba(255, 255, 255, 0.7);
|
||
text-decoration: none;
|
||
transition: color 0.3s;
|
||
}
|
||
|
||
.footer-section ul li a:hover {
|
||
color: white;
|
||
}
|
||
|
||
.footer-bottom {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding-top: 40px;
|
||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||
text-align: center;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
/* Responsive */
|
||
@media (max-width: 1024px) {
|
||
.hero-container {
|
||
grid-template-columns: 1fr;
|
||
text-align: center;
|
||
}
|
||
|
||
.hero-content h1 {
|
||
font-size: 38px;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.hero-buttons {
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.hero-buttons a {
|
||
width: 100%;
|
||
max-width: 300px;
|
||
justify-content: center;
|
||
}
|
||
|
||
.features-grid,
|
||
.steps-container {
|
||
grid-template-columns: 1fr !important;
|
||
}
|
||
|
||
.stats-container {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
|
||
.benefits-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.footer-container {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.step::after {
|
||
display: none;
|
||
}
|
||
|
||
/* Mobile grid fixes */
|
||
[style*="grid-template-columns: 1fr 1fr"],
|
||
[style*="grid-template-columns: 1fr 2fr"],
|
||
[style*="grid-template-columns: repeat(2, 1fr)"],
|
||
[style*="grid-template-columns: repeat(3, 1fr)"] {
|
||
grid-template-columns: 1fr !important;
|
||
}
|
||
|
||
/* Mobile patrol showcase */
|
||
[style*="grid-template-columns: 1fr 1fr; align-items: center"] {
|
||
grid-template-columns: 1fr !important;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.nav-container {
|
||
padding: 0 20px;
|
||
}
|
||
|
||
.nav-links {
|
||
display: none;
|
||
}
|
||
|
||
.steps-container {
|
||
grid-template-columns: 1fr !important;
|
||
}
|
||
|
||
.hero {
|
||
padding: 60px 20px;
|
||
margin-top: 60px;
|
||
}
|
||
|
||
.hero-content h1 {
|
||
font-size: 32px;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.hero-content p {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.section-header h2 {
|
||
font-size: 32px;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.section-header p {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.cta-section h2 {
|
||
font-size: 32px;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.stats-container {
|
||
grid-template-columns: 1fr;
|
||
gap: 24px;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 40px;
|
||
}
|
||
|
||
/* Fix padding on mobile */
|
||
section {
|
||
padding: 60px 20px !important;
|
||
}
|
||
|
||
.features,
|
||
.how-it-works,
|
||
.benefits {
|
||
padding: 60px 20px !important;
|
||
}
|
||
|
||
/* Button sizes */
|
||
.btn-primary,
|
||
.btn-secondary {
|
||
font-size: 16px !important;
|
||
padding: 14px 24px !important;
|
||
width: 100%;
|
||
text-align: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* Card padding on mobile */
|
||
.feature-card {
|
||
padding: 24px;
|
||
}
|
||
|
||
/* Success/Failure section */
|
||
[style*="background: #fef2f2"],
|
||
[style*="background: linear-gradient(135deg, #1e40af, #0f172a)"] {
|
||
padding: 32px 24px !important;
|
||
}
|
||
|
||
/* Flexbox elements that should wrap */
|
||
[style*="display: flex"] {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
[style*="display: inline-flex"] {
|
||
display: flex !important;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
/* AWS logo section */
|
||
[style*="display: inline-flex; align-items: center; gap: 32px"] {
|
||
flex-direction: column !important;
|
||
gap: 16px !important;
|
||
padding: 20px !important;
|
||
}
|
||
|
||
[style*="border-left: 2px solid #e5e7eb"] {
|
||
border-left: none !important;
|
||
border-top: 2px solid #e5e7eb !important;
|
||
padding-left: 0 !important;
|
||
padding-top: 16px !important;
|
||
}
|
||
|
||
/* Pricing */
|
||
[style*="font-size: 64px"] {
|
||
font-size: 48px !important;
|
||
}
|
||
|
||
/* Mobile image fixes */
|
||
img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.hero-content h1 {
|
||
font-size: 28px;
|
||
}
|
||
|
||
.section-header h2 {
|
||
font-size: 28px;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 32px;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
/* Smooth Scroll */
|
||
html {
|
||
scroll-behavior: smooth;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Navigation -->
|
||
<nav>
|
||
<div class="nav-container">
|
||
<div class="logo">Digital Chalking</div>
|
||
<button class="mobile-menu-toggle" aria-label="Toggle menu" onclick="toggleMobileMenu()">
|
||
<span class="material-icons">menu</span>
|
||
</button>
|
||
<div class="nav-links" id="navLinks">
|
||
<a href="#how-it-works" onclick="closeMobileMenu()">How It Works</a>
|
||
<a href="#proof" onclick="closeMobileMenu()">Proof</a>
|
||
<a href="#pricing" onclick="closeMobileMenu()">Pricing</a>
|
||
<a href="#contact" class="cta-btn" onclick="closeMobileMenu()">Book a Demo</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Hero Section -->
|
||
<section class="hero">
|
||
<div class="hero-container">
|
||
<div class="hero-content">
|
||
<h1>Stop Losing Revenue to Outdated Parking Enforcement</h1>
|
||
<p style="font-size: 22px; margin-bottom: 16px;">Enforce time limits accurately, reduce officer workload by 90%, and increase compliance—without expensive vendor lock-in.</p>
|
||
<div style="margin: 24px 0;">
|
||
<div id="message" style="font-size: 18px; color: rgba(255, 255, 255, 0.9); font-weight: 500; font-style: italic;">Loading...</div>
|
||
</div>
|
||
<div class="hero-buttons">
|
||
<a href="#contact" class="btn-primary" style="font-size: 18px; padding: 18px 36px;">
|
||
<span class="material-icons">calendar_today</span>
|
||
Book Your Free Demo
|
||
</a>
|
||
<a href="#plan" class="btn-secondary">
|
||
<span class="material-icons">arrow_downward</span>
|
||
See How It Works
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="hero-image">
|
||
<img src="pana-full.png" alt="Digital Chalking System">
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Promise Section: The Problem -->
|
||
<section class="stats-bar" id="promise">
|
||
<div style="max-width: 900px; margin: 0 auto 60px; text-align: center;">
|
||
<h2 style="font-size: 42px; font-weight: 800; color: white; margin-bottom: 24px;">You Know the Frustration</h2>
|
||
<p style="font-size: 20px; color: rgba(255, 255, 255, 0.9); line-height: 1.7; margin-bottom: 24px;">
|
||
Chalk washes off in the rain. Officers waste hours walking block by block, returning to check the same vehicles. <span id="notice_term_plural">Infringement notices</span> get thrown out because there's no proof.
|
||
</p>
|
||
<p style="font-size: 20px; color: rgba(255, 255, 255, 0.9); line-height: 1.7; margin-bottom: 24px;">
|
||
Your officers spend their days on foot in traffic, bending down to mark tires—while retailers complain that parking spaces are constantly full because violators aren't caught fast enough.
|
||
</p>
|
||
<p style="font-size: 20px; color: rgba(255, 255, 255, 0.9); line-height: 1.7; margin-bottom: 40px;">
|
||
Meanwhile, you're watching other <span class="locale-authority">councils</span> pay $73,000 per car for systems cobbled together by overseas vendors who don't understand your needs.
|
||
</p>
|
||
<p style="font-size: 22px; color: rgba(255, 255, 255, 0.95); font-weight: 600; font-style: italic;">
|
||
Ratepayers deserve better. Your team deserves better. Local businesses deserve better. There is a better way.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="stats-container">
|
||
<div class="stat-item">
|
||
<div class="stat-value">5x</div>
|
||
<div class="stat-label">More Area Covered</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-value">90%</div>
|
||
<div class="stat-label">Less Officer Time on Foot</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-value">Under $10k</div>
|
||
<div class="stat-label">Per Vehicle (vs $73k)</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-value">100%</div>
|
||
<div class="stat-label">Privacy Protected</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="text-align: center; margin-top: 60px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, 0.1);">
|
||
<div style="display: inline-flex; align-items: center; gap: 32px; background: white; padding: 20px 40px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);">
|
||
<img src="powered-by-aws.png" alt="Powered by AWS" style="height: 50px;">
|
||
<div style="border-left: 2px solid #e5e7eb; padding-left: 32px;">
|
||
<div id="message_aws" style="font-size: 16px; color: #1e293b; font-weight: 600;">Loading...</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Guide Section: Empathy + Authority -->
|
||
<section class="features" id="proof" style="background: white;">
|
||
<div class="section-header">
|
||
<h2>We Built This Because We've Been There</h2>
|
||
<p>We've seen <span class="locale-authority">councils</span> stuck with expensive, inflexible systems. We knew there had to be a smarter way—one built from the ground up for parking enforcement, not retrofitted from generic surveillance.</p>
|
||
</div>
|
||
<div style="max-width: 1200px; margin: 0 auto; background: var(--bg-light); padding: 60px; border-radius: 24px;">
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;">
|
||
<div>
|
||
<h3 style="font-size: 28px; margin-bottom: 24px;">Traditional vs. Digital</h3>
|
||
<div style="background: white; padding: 32px; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.08);">
|
||
<div style="margin-bottom: 24px; padding-bottom: 24px; border-bottom: 2px solid var(--bg-light);">
|
||
<div style="display: flex; gap: 16px; align-items: center; margin-bottom: 12px;">
|
||
<span class="material-icons" style="color: #ef4444;">close</span>
|
||
<strong>Manual tire marking with chalk</strong>
|
||
</div>
|
||
<div style="display: flex; gap: 16px; align-items: center; color: var(--primary);">
|
||
<span class="material-icons">check_circle</span>
|
||
<strong>Automated camera-based detection</strong>
|
||
</div>
|
||
</div>
|
||
<div style="margin-bottom: 24px; padding-bottom: 24px; border-bottom: 2px solid var(--bg-light);">
|
||
<div style="display: flex; gap: 16px; align-items: center; margin-bottom: 12px;">
|
||
<span class="material-icons" style="color: #ef4444;">close</span>
|
||
<strong>Chalk washes away in rain</strong>
|
||
</div>
|
||
<div style="display: flex; gap: 16px; align-items: center; color: var(--primary);">
|
||
<span class="material-icons">check_circle</span>
|
||
<strong>Permanent digital records</strong>
|
||
</div>
|
||
</div>
|
||
<div style="margin-bottom: 24px; padding-bottom: 24px; border-bottom: 2px solid var(--bg-light);">
|
||
<div style="display: flex; gap: 16px; align-items: center; margin-bottom: 12px;">
|
||
<span class="material-icons" style="color: #ef4444;">close</span>
|
||
<strong>Officer must return to verify</strong>
|
||
</div>
|
||
<div style="display: flex; gap: 16px; align-items: center; color: var(--primary);">
|
||
<span class="material-icons">check_circle</span>
|
||
<strong>Real-time monitoring & alerts</strong>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div style="display: flex; gap: 16px; align-items: center; margin-bottom: 12px;">
|
||
<span class="material-icons" style="color: #ef4444;">close</span>
|
||
<strong>No supporting evidence</strong>
|
||
</div>
|
||
<div style="display: flex; gap: 16px; align-items: center; color: var(--primary);">
|
||
<span class="material-icons">check_circle</span>
|
||
<strong>Court-ready photo evidence</strong>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<p style="font-size: 18px; line-height: 1.8; color: var(--text); margin-bottom: 24px;">
|
||
Digital chalking uses <strong>cameras and AI-powered software</strong> to monitor vehicle parking duration. Instead of officers manually marking tires with chalk, our system automatically captures, identifies, and tracks vehicles through computer vision.
|
||
</p>
|
||
<p style="font-size: 18px; line-height: 1.8; color: var(--text); margin-bottom: 24px;">
|
||
Using advanced <strong>License Plate Recognition (LPR)</strong> and <strong>Vehicle Recognition Software (VRS)</strong>, the system creates an irrefutable digital audit trail with time-stamped photographs, location data, and vehicle details.
|
||
</p>
|
||
<p style="font-size: 18px; line-height: 1.8; color: var(--text);">
|
||
The result? <strong>More efficient enforcement, fewer errors, and legally defensible <span class="locale-notice-plural">citations</span></strong> that withstand court scrutiny.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Purpose-Built System -->
|
||
<div style="max-width: 1200px; margin: 80px auto 0; background: linear-gradient(135deg, #1e40af, #0f172a); padding: 60px; border-radius: 24px; color: white;">
|
||
<div style="text-align: center; margin-bottom: 40px;">
|
||
<div style="display: inline-block; background: rgba(255, 255, 255, 0.2); padding: 8px 24px; border-radius: 20px; margin-bottom: 24px;">
|
||
<span style="font-weight: 600; font-size: 14px; letter-spacing: 1px;">PURPOSE-BUILT TECHNOLOGY</span>
|
||
</div>
|
||
<h3 style="font-size: 36px; font-weight: 800; margin-bottom: 20px; line-height: 1.2;">Built from the Ground Up for Digital Chalking</h3>
|
||
<p style="font-size: 20px; opacity: 0.95; max-width: 800px; margin: 0 auto;">
|
||
Unlike clunky systems offered by incumbent old-school vendors—cobbled together from multiple third-party components with overlapping licences and integration headaches—our platform is <strong>engineered from scratch</strong> to be a digital chalking expert.
|
||
</p>
|
||
</div>
|
||
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 48px;">
|
||
<div style="background: rgba(255, 255, 255, 0.1); padding: 32px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.2);">
|
||
<span class="material-icons" style="font-size: 48px; margin-bottom: 16px; display: block;">security</span>
|
||
<h4 style="font-size: 20px; font-weight: 700; margin-bottom: 12px;">Privacy by Design</h4>
|
||
<p style="opacity: 0.9; line-height: 1.7;">Automatic face blurring and privacy masking built-in. We capture <span class="locale-plate-plural">license plates</span> and vehicles only—never people. GDPR compliant, privacy-first approach from day one.</p>
|
||
</div>
|
||
<div style="background: rgba(255, 255, 255, 0.1); padding: 32px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.2);">
|
||
<span class="material-icons" style="font-size: 48px; margin-bottom: 16px; display: block;">local_shipping</span>
|
||
<h4 style="font-size: 20px; font-weight: 700; margin-bottom: 12px;">Mobile-First Safety</h4>
|
||
<p style="opacity: 0.9; line-height: 1.7;">Officers stay in their vehicles, scanning streets from the safety of patrol cars. Cover 5x more area without the risk of standing in traffic.</p>
|
||
</div>
|
||
<div style="background: rgba(255, 255, 255, 0.1); padding: 32px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.2);">
|
||
<span class="material-icons" style="font-size: 48px; margin-bottom: 16px; display: block;">speed</span>
|
||
<h4 style="font-size: 20px; font-weight: 700; margin-bottom: 12px;">Rapid Innovation</h4>
|
||
<p style="opacity: 0.9; line-height: 1.7;">No vendor lock-in or bureaucratic approval chains. We deploy updates, new features, and improvements at the speed your <span class="locale-authority">council</span> needs.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Features Section -->
|
||
<section class="features" id="features">
|
||
<div class="section-header">
|
||
<h2>Powerful Features</h2>
|
||
<p>Everything you need for modern, efficient parking enforcement.</p>
|
||
</div>
|
||
<div class="features-grid">
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<span class="material-icons">videocam</span>
|
||
</div>
|
||
<h3>4K Camera System</h3>
|
||
<p>High-resolution 4K (3840×2160) cameras capture every detail for accurate <span class="locale-plate">license plate</span> recognition. Works from 5-50 meters depending on deployment.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<span class="material-icons">psychology</span>
|
||
</div>
|
||
<h3>AI Vehicle Detection</h3>
|
||
<p>Proprietary neural network identifies cars, trucks, SUVs, motorcycles, and commercial vehicles in real-time with exceptional accuracy.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<span class="material-icons">track_changes</span>
|
||
</div>
|
||
<h3>Advanced Tracking</h3>
|
||
<p>Purpose-built multi-object tracking maintains 98%+ accuracy even in crowded environments with overlapping vehicles.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<span class="material-icons">document_scanner</span>
|
||
</div>
|
||
<h3>License Plate Recognition</h3>
|
||
<p>99.5% LPR accuracy in optimal conditions, 95%+ in adverse weather. Reads and validates plates automatically.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<span class="material-icons">directions_car</span>
|
||
</div>
|
||
<h3>Vehicle Recognition</h3>
|
||
<p>Identifies vehicle make, model, color, and distinctive features. Detects valve stem position to confirm movement.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<span class="material-icons">schedule</span>
|
||
</div>
|
||
<h3>Time-Stamped Records</h3>
|
||
<p>Immutable digital records with precise timestamps, GPS coordinates, high-res photos, and environmental conditions.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<span class="material-icons">badge</span>
|
||
</div>
|
||
<h3>Permit Holder Whitelist</h3>
|
||
<p>Centralized database of authorized vehicles with automatic exemption. Import from CSV/Excel or integrate via API. Supports resident permits, business permits, municipal fleet, and VIP vehicles.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<span class="material-icons">notifications_active</span>
|
||
</div>
|
||
<h3>Real-Time Alerts</h3>
|
||
<p>Officers receive mobile notifications the moment violations occur, with photo evidence and location data.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<span class="material-icons">cloud</span>
|
||
</div>
|
||
<h3>Cloud Infrastructure</h3>
|
||
<p>Powered by AWS with AES-256 encryption, automatic backups, 99.9% uptime SLA, and configurable data retention (30-90 days).</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Integration & APIs -->
|
||
<section class="features" id="integration" style="background: var(--bg-light);">
|
||
<div class="section-header">
|
||
<h2>Seamless Integration</h2>
|
||
<p>Connect with your existing systems using industry-standard interfaces.</p>
|
||
</div>
|
||
<div style="max-width: 1200px; margin: 0 auto;">
|
||
<div style="background: white; padding: 60px; border-radius: 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); margin-bottom: 60px;">
|
||
<div style="display: grid; grid-template-columns: 1fr 2fr; gap: 60px; align-items: center;">
|
||
<div>
|
||
<div style="width: 80px; height: 80px; background: linear-gradient(135deg, #1e40af, #3b82f6); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px;">
|
||
<span class="material-icons" style="font-size: 40px; color: white;">api</span>
|
||
</div>
|
||
<h3 style="font-size: 32px; font-weight: 800; margin-bottom: 16px;">RESTful APIs</h3>
|
||
<p style="color: var(--text-light); font-size: 18px; line-height: 1.7;">Modern, well-documented APIs for seamless data exchange with your existing infrastructure.</p>
|
||
</div>
|
||
<div>
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px;">
|
||
<div style="background: var(--bg-light); padding: 24px; border-radius: 12px;">
|
||
<div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
|
||
<span class="material-icons" style="color: var(--primary);">receipt_long</span>
|
||
<strong>Citation Systems</strong>
|
||
</div>
|
||
<p style="font-size: 14px; color: var(--text-light);">Direct integration with T2, ParkMobile, Passport, and municipal citation platforms</p>
|
||
</div>
|
||
<div style="background: var(--bg-light); padding: 24px; border-radius: 12px;">
|
||
<div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
|
||
<span class="material-icons" style="color: var(--primary);">credit_card</span>
|
||
<strong>Payment Processing</strong>
|
||
</div>
|
||
<p style="font-size: 14px; color: var(--text-light);">Connect with Stripe, PayPal, or municipal payment gateways</p>
|
||
</div>
|
||
<div style="background: var(--bg-light); padding: 24px; border-radius: 12px;">
|
||
<div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
|
||
<span class="material-icons" style="color: var(--primary);">verified_user</span>
|
||
<strong>DMV Databases</strong>
|
||
</div>
|
||
<p style="font-size: 14px; color: var(--text-light);">Real-time vehicle registration verification and owner lookup</p>
|
||
</div>
|
||
<div style="background: var(--bg-light); padding: 24px; border-radius: 12px;">
|
||
<div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
|
||
<span class="material-icons" style="color: var(--primary);">business</span>
|
||
<strong>Municipal ERP</strong>
|
||
</div>
|
||
<p style="font-size: 14px; color: var(--text-light);">Integrate with Tyler, Oracle, SAP, or custom city systems</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="background: linear-gradient(135deg, #1e40af 0%, #0f172a 100%); padding: 48px 60px; border-radius: 20px; color: white;">
|
||
<div style="display: flex; align-items: center; justify-content: space-between; gap: 40px;">
|
||
<div style="flex: 1;">
|
||
<h3 style="font-size: 28px; font-weight: 800; margin-bottom: 16px;">Data Import & Export</h3>
|
||
<p style="opacity: 0.95; font-size: 16px; line-height: 1.7;">Import permit holder databases via CSV, Excel, or API. Export violation records, analytics, and court-ready evidence packages via SFTP, webhooks, or direct download.</p>
|
||
</div>
|
||
<div style="display: flex; gap: 32px; align-items: center;">
|
||
<div style="text-align: center;">
|
||
<span class="material-icons" style="font-size: 48px; opacity: 0.9;">file_upload</span>
|
||
<div style="margin-top: 8px; font-weight: 600;">CSV/Excel Import</div>
|
||
</div>
|
||
<div style="text-align: center;">
|
||
<span class="material-icons" style="font-size: 48px; opacity: 0.9;">webhook</span>
|
||
<div style="margin-top: 8px; font-weight: 600;">Real-time Webhooks</div>
|
||
</div>
|
||
<div style="text-align: center;">
|
||
<span class="material-icons" style="font-size: 48px; opacity: 0.9;">folder_shared</span>
|
||
<div style="margin-top: 8px; font-weight: 600;">SFTP Transfer</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- The Plan: 3 Simple Steps -->
|
||
<section class="how-it-works" id="plan">
|
||
<div class="section-header">
|
||
<h2>Getting Started Is Simple</h2>
|
||
<p>No long contracts. No vendor lock-in. Just three straightforward steps to better enforcement.</p>
|
||
</div>
|
||
<div class="steps-container" style="grid-template-columns: repeat(3, 1fr); max-width: 1000px;">
|
||
<div class="step">
|
||
<div class="step-number">1</div>
|
||
<h3>Book a Free Demo</h3>
|
||
<p>We'll show you the system in action with your own streets and <span class="locale-plate-plural">license plates</span>. See real results in 30 minutes.</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-number">2</div>
|
||
<h3>Run a Pilot</h3>
|
||
<p>Test it on 1-2 blocks for 30 days. No commitment. Just proof that it works for your <span class="locale-authority">council</span>.</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-number">3</div>
|
||
<h3>Scale Up</h3>
|
||
<p>Deploy city-wide when you're ready. We handle training, support, and ongoing updates—all included.</p>
|
||
</div>
|
||
</div>
|
||
<div style="text-align: center; margin-top: 60px;">
|
||
<a href="#contact" class="btn-primary" style="font-size: 18px; padding: 18px 40px; display: inline-flex; align-items: center; gap: 12px;">
|
||
<span class="material-icons">calendar_today</span>
|
||
Book Your Free Demo Now
|
||
</a>
|
||
<p style="margin-top: 16px; color: var(--text-light); font-size: 14px;">30-minute demo • No obligation • See it work on your streets</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Stakeholder Benefits -->
|
||
<section style="background: white; padding: 100px 40px;">
|
||
<div style="max-width: 1200px; margin: 0 auto;">
|
||
<div class="section-header">
|
||
<h2>Everyone Wins</h2>
|
||
<p>Better enforcement creates positive outcomes across your entire community.</p>
|
||
</div>
|
||
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 60px;">
|
||
<div style="background: var(--bg-light); padding: 40px; border-radius: 20px;">
|
||
<div style="width: 64px; height: 64px; background: linear-gradient(135deg, #1e40af, #3b82f6); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px;">
|
||
<span class="material-icons" style="font-size: 32px; color: white;">shield</span>
|
||
</div>
|
||
<h3 style="font-size: 24px; font-weight: 700; margin-bottom: 16px;">Safer Officers</h3>
|
||
<p style="color: var(--text-light); line-height: 1.7;">No more walking block by block in traffic. Officers patrol from their vehicles, covering 5x more ground while staying safe.</p>
|
||
</div>
|
||
<div style="background: var(--bg-light); padding: 40px; border-radius: 20px;">
|
||
<div style="width: 64px; height: 64px; background: linear-gradient(135deg, #1e40af, #3b82f6); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px;">
|
||
<span class="material-icons" style="font-size: 32px; color: white;">storefront</span>
|
||
</div>
|
||
<h3 style="font-size: 24px; font-weight: 700; margin-bottom: 16px;">Happier Retailers</h3>
|
||
<p style="color: var(--text-light); line-height: 1.7;">Faster turnover means more parking for customers. Shop owners see more foot traffic when spaces aren't hogged by all-day parkers.</p>
|
||
</div>
|
||
<div style="background: var(--bg-light); padding: 40px; border-radius: 20px;">
|
||
<div style="width: 64px; height: 64px; background: linear-gradient(135deg, #1e40af, #3b82f6); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px;">
|
||
<span class="material-icons" style="font-size: 32px; color: white;">groups</span>
|
||
</div>
|
||
<h3 style="font-size: 24px; font-weight: 700; margin-bottom: 16px;">Satisfied Ratepayers</h3>
|
||
<p style="color: var(--text-light); line-height: 1.7;">Fair, consistent enforcement with proof. No more "he said, she said" disputes. <span class="locale-citizens">Citizens</span> trust the system works.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- How It Works: Technical Details -->
|
||
<section id="how-it-works" style="background: var(--bg-light); padding: 100px 40px;">
|
||
<div style="max-width: 1200px; margin: 0 auto;">
|
||
<div class="section-header">
|
||
<h2>Behind the Scenes</h2>
|
||
<p>Here's what happens automatically once you're up and running.</p>
|
||
</div>
|
||
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; margin-top: 60px;">
|
||
<div style="background: white; padding: 40px; border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.08);">
|
||
<div style="width: 60px; height: 60px; background: linear-gradient(135deg, #1e40af, #3b82f6); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px;">
|
||
<span class="material-icons" style="font-size: 32px; color: white;">videocam</span>
|
||
</div>
|
||
<h3 style="font-size: 22px; font-weight: 700; margin-bottom: 12px;">Cameras Capture Plates Only</h3>
|
||
<p style="color: var(--text-light); line-height: 1.7;">4K cameras photograph vehicles and <span class="locale-plate-plural">license plates</span> with automatic privacy masking—pedestrian faces are never captured or stored.</p>
|
||
</div>
|
||
<div style="background: white; padding: 40px; border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.08);">
|
||
<div style="width: 60px; height: 60px; background: linear-gradient(135deg, #1e40af, #3b82f6); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px;">
|
||
<span class="material-icons" style="font-size: 32px; color: white;">psychology</span>
|
||
</div>
|
||
<h3 style="font-size: 22px; font-weight: 700; margin-bottom: 12px;">AI Does the Work</h3>
|
||
<p style="color: var(--text-light); line-height: 1.7;">Our system reads plates, checks your permit whitelist, tracks parking duration, and flags violations—all automatically.</p>
|
||
</div>
|
||
<div style="background: white; padding: 40px; border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.08);">
|
||
<div style="width: 60px; height: 60px; background: linear-gradient(135deg, #1e40af, #3b82f6); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px;">
|
||
<span class="material-icons" style="font-size: 32px; color: white;">notifications</span>
|
||
</div>
|
||
<h3 style="font-size: 22px; font-weight: 700; margin-bottom: 12px;">Officers Get Alerts</h3>
|
||
<p style="color: var(--text-light); line-height: 1.7;">Real-time notifications show exactly which vehicles have overstayed, with photo proof ready to go.</p>
|
||
</div>
|
||
<div style="background: white; padding: 40px; border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.08);">
|
||
<div style="width: 60px; height: 60px; background: linear-gradient(135deg, #1e40af, #3b82f6); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px;">
|
||
<span class="material-icons" style="font-size: 32px; color: white;">gavel</span>
|
||
</div>
|
||
<h3 style="font-size: 22px; font-weight: 700; margin-bottom: 12px;">Court-Ready Evidence</h3>
|
||
<p style="color: var(--text-light); line-height: 1.7;">Every <span class="locale-notice">citation</span> includes timestamped photos, GPS data, and vehicle details. Challenges? No problem.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Deployment Methods -->
|
||
<section class="features" id="deployment" style="background: white;">
|
||
<div class="section-header">
|
||
<h2>Flexible Deployment Options</h2>
|
||
<p>Choose the configuration that fits your enforcement needs.</p>
|
||
</div>
|
||
|
||
<!-- Mobile Patrol Showcase -->
|
||
<div style="max-width: 1200px; margin: 0 auto 80px; background: linear-gradient(135deg, #1e40af, #0f172a); border-radius: 24px; overflow: hidden; box-shadow: 0 20px 60px rgba(30, 64, 175, 0.3);">
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0;">
|
||
<div style="padding: 60px;">
|
||
<div style="display: inline-block; background: rgba(255, 255, 255, 0.2); padding: 8px 20px; border-radius: 20px; margin-bottom: 24px;">
|
||
<span style="color: white; font-weight: 600; font-size: 14px;">MOBILE PATROL UNITS</span>
|
||
</div>
|
||
<h3 style="font-size: 36px; font-weight: 800; color: white; margin-bottom: 20px; line-height: 1.2;">Enforcement on the Move</h3>
|
||
<p style="color: rgba(255, 255, 255, 0.95); font-size: 18px; line-height: 1.7; margin-bottom: 32px;">
|
||
Officers use tablet or smartphone apps to capture and track vehicles during normal patrol routes. Real-time dashboard displays violations and provides instant access to vehicle history.
|
||
</p>
|
||
<ul style="list-style: none; padding: 0; color: white; font-size: 16px; line-height: 2;">
|
||
<li style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
|
||
<span class="material-icons" style="background: rgba(255, 255, 255, 0.2); padding: 8px; border-radius: 8px;">check</span>
|
||
<span>Automatic scanning of both <span class="locale-kerb">curb</span> sides</span>
|
||
</li>
|
||
<li style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
|
||
<span class="material-icons" style="background: rgba(255, 255, 255, 0.2); padding: 8px; border-radius: 8px;">check</span>
|
||
<span>Real-time violation alerts on dashboard</span>
|
||
</li>
|
||
<li style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
|
||
<span class="material-icons" style="background: rgba(255, 255, 255, 0.2); padding: 8px; border-radius: 8px;">check</span>
|
||
<span>Works offline with cloud sync</span>
|
||
</li>
|
||
<li style="display: flex; align-items: center; gap: 12px;">
|
||
<span class="material-icons" style="background: rgba(255, 255, 255, 0.2); padding: 8px; border-radius: 8px;">check</span>
|
||
<span>GPS-enabled with route tracking</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div style="position: relative; height: 100%; min-height: 500px;">
|
||
<img src="dude-in-car.png" alt="Officer using Digital Chalking mobile app" style="width: 100%; height: 100%; object-fit: cover; object-position: center;">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Deployment Options Grid -->
|
||
<div class="features-grid" style="max-width: 1000px; margin: 0 auto; grid-template-columns: repeat(2, 1fr); gap: 60px;">
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<span class="material-icons">apartment</span>
|
||
</div>
|
||
<h3>Stationary Infrastructure</h3>
|
||
<p style="margin-bottom: 20px;"><strong>Best for:</strong> High-traffic commercial districts, downtown cores, parking structures</p>
|
||
<ul style="text-align: left; color: var(--text-light); line-height: 1.8;">
|
||
<li>Pole-mounted 4K cameras at strategic intersections</li>
|
||
<li>Covers entire street block or parking lot</li>
|
||
<li>24/7 automated monitoring</li>
|
||
<li>Solar-powered or hard-wired options</li>
|
||
<li>Weather-resistant enclosures</li>
|
||
</ul>
|
||
<p style="margin-top: 20px; font-weight: 600; color: var(--primary);">Typical: 2-4 cameras per city block</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<span class="material-icons">local_shipping</span>
|
||
</div>
|
||
<h3>Mobile Patrol Units</h3>
|
||
<p style="margin-bottom: 20px;"><strong>Best for:</strong> Large geographic areas, suburban zones, residential permits</p>
|
||
<ul style="text-align: left; color: var(--text-light); line-height: 1.8;">
|
||
<li>Vehicle roof/dash-mounted camera systems</li>
|
||
<li>Officer drives normal patrol routes</li>
|
||
<li>Automatic scanning of both <span class="locale-kerb">curb</span> sides</li>
|
||
<li>Integrates with existing enforcement vehicles</li>
|
||
<li>Real-time violation alerts on dashboard</li>
|
||
</ul>
|
||
<p style="margin-top: 20px; font-weight: 600; color: var(--primary);">Typical: 1-2 cameras per vehicle, GPS-enabled</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Use Cases -->
|
||
<section class="features" id="use-cases">
|
||
<div class="section-header">
|
||
<h2>Use Cases & Applications</h2>
|
||
<p>Versatile enforcement for every parking scenario.</p>
|
||
</div>
|
||
<div class="features-grid" style="max-width: 1200px; margin: 0 auto; grid-template-columns: repeat(3, 1fr);">
|
||
<div class="feature-card">
|
||
<div class="feature-icon"><span class="material-icons">timer</span></div>
|
||
<h3>Time-Limited Street Parking</h3>
|
||
<p>Monitor 1-hour, 2-hour, or custom time zones. Automatically flag vehicles exceeding limits.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon"><span class="material-icons">home</span></div>
|
||
<h3>Residential Permit Zones</h3>
|
||
<p>Allow authorized permit holders unlimited parking while enforcing time limits on non-permit vehicles.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon"><span class="material-icons">local_parking</span></div>
|
||
<h3>Parking Structure Management</h3>
|
||
<p>Track occupancy, enforce paid parking, and identify vehicles overstaying free periods.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon"><span class="material-icons">local_shipping</span></div>
|
||
<h3>Loading Zone Compliance</h3>
|
||
<p>Ensure loading zones are used correctly (commercial vehicles only, 15-minute limits).</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon"><span class="material-icons">accessible</span></div>
|
||
<h3>Handicapped Parking</h3>
|
||
<p>Verify permit validity and flag unauthorized use of accessible spaces.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon"><span class="material-icons">event</span></div>
|
||
<h3>Special Event Parking</h3>
|
||
<p>Temporary enforcement for concerts, sports games, festivals with dynamic time rules.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Success vs Failure (FOMO Section) -->
|
||
<section style="background: white; padding: 100px 40px;" id="success-failure">
|
||
<div style="max-width: 1200px; margin: 0 auto;">
|
||
<div class="section-header">
|
||
<h2>Two Paths Forward</h2>
|
||
<p>You can stick with the status quo—or choose a better future for your <span class="locale-authority">council</span>.</p>
|
||
</div>
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 60px;">
|
||
<!-- Failure Path -->
|
||
<div style="background: #fef2f2; border: 2px solid #dc2626; padding: 48px; border-radius: 20px;">
|
||
<div style="display: flex; align-items: center; gap: 16px; margin-bottom: 24px;">
|
||
<span class="material-icons" style="font-size: 48px; color: #dc2626;">warning</span>
|
||
<h3 style="font-size: 28px; font-weight: 800; color: #dc2626;">Keep Doing What You're Doing</h3>
|
||
</div>
|
||
<ul style="list-style: none; padding: 0; color: #7f1d1d; line-height: 2; font-size: 17px;">
|
||
<li style="margin-bottom: 16px;">✗ Keep losing <span class="locale-notice-plural">citations</span> when chalk washes off</li>
|
||
<li style="margin-bottom: 16px;">✗ Watch officers waste time returning to check the same cars</li>
|
||
<li style="margin-bottom: 16px;">✗ Pay $73k per vehicle for cobbled-together vendor systems</li>
|
||
<li style="margin-bottom: 16px;">✗ Get locked into 5-year contracts with no flexibility</li>
|
||
<li style="margin-bottom: 16px;">✗ Keep hearing complaints from ratepayers about unfair enforcement</li>
|
||
<li>✗ Fall further behind <span class="locale-authority-plural">councils</span> who've already modernized</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Success Path -->
|
||
<div style="background: linear-gradient(135deg, #1e40af, #0f172a); color: white; padding: 48px; border-radius: 20px; box-shadow: 0 20px 60px rgba(30, 64, 175, 0.3);">
|
||
<div style="display: flex; align-items: center; gap: 16px; margin-bottom: 24px;">
|
||
<span class="material-icons" style="font-size: 48px; color: #60a5fa;">verified</span>
|
||
<h3 style="font-size: 28px; font-weight: 800;">Choose Digital Chalking</h3>
|
||
</div>
|
||
<ul style="list-style: none; padding: 0; line-height: 2; font-size: 17px;">
|
||
<li style="margin-bottom: 16px;">✓ Keep officers safe in vehicles—no more walking in traffic</li>
|
||
<li style="margin-bottom: 16px;">✓ Cover 5x more area in less time with mobile patrol</li>
|
||
<li style="margin-bottom: 16px;">✓ Retailers see more turnover—happy customers find parking</li>
|
||
<li style="margin-bottom: 16px;">✓ Pay under $10k per vehicle—save hundreds of thousands</li>
|
||
<li style="margin-bottom: 16px;">✓ Automatic privacy masking—no faces captured, ever</li>
|
||
<li style="margin-bottom: 16px;">✓ Defend every <span class="locale-notice">citation</span> with photo proof that holds up in court</li>
|
||
<li>✓ Start with a pilot, scale when ready—no vendor lock-in</li>
|
||
</ul>
|
||
<div style="margin-top: 40px; text-align: center;">
|
||
<a href="#contact" style="display: inline-flex; align-items: center; gap: 12px; background: white; color: #1e40af; padding: 16px 36px; border-radius: 12px; font-weight: 700; text-decoration: none; font-size: 18px; box-shadow: 0 4px 20px rgba(255,255,255,0.3);">
|
||
<span class="material-icons">calendar_today</span>
|
||
Book Your Demo Now
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Benefits Section -->
|
||
<section class="benefits" id="benefits" style="display: none;">
|
||
<div class="section-header">
|
||
<h2>Key Benefits for Every Stakeholder</h2>
|
||
<p>Transform parking enforcement across your organization.</p>
|
||
</div>
|
||
<div class="benefits-grid">
|
||
<div class="benefit-item">
|
||
<div class="benefit-icon">
|
||
<span class="material-icons">bolt</span>
|
||
</div>
|
||
<div class="benefit-content">
|
||
<h3>10x Efficiency for Enforcement Agencies</h3>
|
||
<p>Officers monitor hundreds of vehicles per patrol vs. dozens manually. Fewer officers needed for same coverage. Increased revenue from higher compliance and violation detection.</p>
|
||
</div>
|
||
</div>
|
||
<div class="benefit-item">
|
||
<div class="benefit-icon">
|
||
<span class="material-icons">check_circle</span>
|
||
</div>
|
||
<div class="benefit-content">
|
||
<h3>Weather-Proof & Always Reliable</h3>
|
||
<p>Rain, snow, and heat don't affect digital records. Unlike chalk that washes away, digital chalking works 24/7 in all conditions with complete audit trail.</p>
|
||
</div>
|
||
</div>
|
||
<div class="benefit-item">
|
||
<div class="benefit-icon">
|
||
<span class="material-icons">gavel</span>
|
||
</div>
|
||
<div class="benefit-content">
|
||
<h3>Legally Defensible Evidence</h3>
|
||
<p>High-resolution photos with cryptographic timestamps provide irrefutable proof. Drastically reduces contested <span class="locale-notice-plural">citations</span> and establishes strong legal precedent.</p>
|
||
</div>
|
||
</div>
|
||
<div class="benefit-item">
|
||
<div class="benefit-icon">
|
||
<span class="material-icons">insights</span>
|
||
</div>
|
||
<div class="benefit-content">
|
||
<h3>Data-Driven Policy Decisions</h3>
|
||
<p>Analytics reveal parking patterns, violation hotspots, peak times, and compliance trends. Make informed decisions about parking rates, time limits, and enforcement schedules.</p>
|
||
</div>
|
||
</div>
|
||
<div class="benefit-item">
|
||
<div class="benefit-icon">
|
||
<span class="material-icons">security</span>
|
||
</div>
|
||
<div class="benefit-content">
|
||
<h3>Enhanced Officer Safety</h3>
|
||
<p>Reduce time spent on foot in traffic areas. Monitor from vehicles or stationary positions. Eliminate repetitive bending to mark tires.</p>
|
||
</div>
|
||
</div>
|
||
<div class="benefit-item">
|
||
<div class="benefit-icon">
|
||
<span class="material-icons">balance</span>
|
||
</div>
|
||
<div class="benefit-content">
|
||
<h3>Fair & Consistent for Motorists</h3>
|
||
<p>Objective, consistent enforcement eliminates human errors. Clear photo evidence available for appeals. Permit holders auto-recognized without dashboard displays.</p>
|
||
</div>
|
||
</div>
|
||
<div class="benefit-item">
|
||
<div class="benefit-icon">
|
||
<span class="material-icons">trending_up</span>
|
||
</div>
|
||
<div class="benefit-content">
|
||
<h3>Scalable Growth</h3>
|
||
<p>Easy to expand coverage without proportional staff increases. Start with pilot program, scale to city-wide deployment seamlessly.</p>
|
||
</div>
|
||
</div>
|
||
<div class="benefit-item">
|
||
<div class="benefit-icon">
|
||
<span class="material-icons">account_balance</span>
|
||
</div>
|
||
<div class="benefit-content">
|
||
<h3>ROI in 12-18 Months</h3>
|
||
<p>Break-even typically achieved through increased efficiency, reduced labor costs, higher compliance rates, and improved violation detection.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Technical Specs & Privacy -->
|
||
<section class="features" id="technical" style="background: white;">
|
||
<div class="section-header">
|
||
<h2>Technical Specifications & Privacy</h2>
|
||
<p>Built on cutting-edge technology with privacy and compliance at the core.</p>
|
||
</div>
|
||
<div style="max-width: 1200px; margin: 0 auto;">
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 60px;">
|
||
<div style="background: var(--bg-light); padding: 40px; border-radius: 20px;">
|
||
<h3 style="font-size: 24px; margin-bottom: 24px; display: flex; align-items: center; gap: 12px;">
|
||
<span class="material-icons" style="color: var(--primary);">computer</span>
|
||
Computer Vision Engine
|
||
</h3>
|
||
<ul style="list-style: none; line-height: 2;">
|
||
<li><strong>Detection:</strong> Proprietary AI model (state-of-the-art)</li>
|
||
<li><strong>Tracking:</strong> Custom algorithm (98%+ accuracy)</li>
|
||
<li><strong>LPR Accuracy:</strong> 99.5% optimal, 95%+ adverse</li>
|
||
<li><strong>Processing:</strong> Real-time edge inference</li>
|
||
<li><strong>Vehicles:</strong> Cars, trucks, SUVs, motorcycles</li>
|
||
</ul>
|
||
</div>
|
||
<div style="background: var(--bg-light); padding: 40px; border-radius: 20px;">
|
||
<h3 style="font-size: 24px; margin-bottom: 24px; display: flex; align-items: center; gap: 12px;">
|
||
<span class="material-icons" style="color: var(--primary);">videocam</span>
|
||
Camera Requirements
|
||
</h3>
|
||
<ul style="list-style: none; line-height: 2;">
|
||
<li><strong>Resolution:</strong> 4K (3840×2160) minimum</li>
|
||
<li><strong>Frame Rate:</strong> 30fps for smooth tracking</li>
|
||
<li><strong>Codec:</strong> MJPEG or H.264</li>
|
||
<li><strong>Connectivity:</strong> USB 3.0, Ethernet, wireless</li>
|
||
<li><strong>Range:</strong> 5-50 meters (lens dependent)</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 40px;">
|
||
<div style="background: var(--bg-light); padding: 40px; border-radius: 20px;">
|
||
<h3 style="font-size: 24px; margin-bottom: 24px; display: flex; align-items: center; gap: 12px;">
|
||
<span class="material-icons" style="color: var(--primary);">storage</span>
|
||
Data Management
|
||
</h3>
|
||
<ul style="list-style: none; line-height: 2;">
|
||
<li><strong>Storage:</strong> Cloud or on-premise</li>
|
||
<li><strong>Retention:</strong> Configurable (30-90 days)</li>
|
||
<li><strong>Encryption:</strong> AES-256 at rest & in transit</li>
|
||
<li><strong>Compliance:</strong> GDPR/privacy law compliant</li>
|
||
<li><strong>APIs:</strong> RESTful for system integration</li>
|
||
</ul>
|
||
</div>
|
||
<div style="background: var(--bg-light); padding: 40px; border-radius: 20px;">
|
||
<h3 style="font-size: 24px; margin-bottom: 24px; display: flex; align-items: center; gap: 12px;">
|
||
<span class="material-icons" style="color: var(--primary);">shield</span>
|
||
Privacy & Legal
|
||
</h3>
|
||
<ul style="list-style: none; line-height: 2;">
|
||
<li><strong>Data Captured:</strong> Plates & vehicles only (no faces)</li>
|
||
<li><strong>Expiration:</strong> Automatic after retention period</li>
|
||
<li><strong>Access Controls:</strong> Audit logs for all usage</li>
|
||
<li><strong>Court Admissible:</strong> Established legal precedent</li>
|
||
<li><strong>Transparency:</strong> Open data on enforcement stats</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Pricing Section -->
|
||
<section style="background: var(--bg-light); padding: 100px 40px;" id="pricing">
|
||
<div style="max-width: 1000px; margin: 0 auto; text-align: center;">
|
||
<h2 style="font-size: 48px; font-weight: 800; margin-bottom: 24px;">Simple, Honest Pricing</h2>
|
||
<p style="font-size: 20px; color: var(--text-light); margin-bottom: 60px;">No hidden fees. No surprises. Just straightforward value.</p>
|
||
|
||
<div style="background: white; padding: 60px; border-radius: 24px; box-shadow: 0 20px 60px rgba(0,0,0,0.1); margin-bottom: 40px;">
|
||
<div style="font-size: 64px; font-weight: 900; background: linear-gradient(135deg, #1e40af, #3b82f6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 16px;">Under $10,000</div>
|
||
<div style="font-size: 24px; color: var(--text); margin-bottom: 8px;">per vehicle</div>
|
||
<div style="font-size: 18px; color: var(--text-light); margin-bottom: 40px;">(vs $73,000 for legacy systems)</div>
|
||
|
||
<div style="border-top: 2px solid var(--bg-light); padding-top: 32px; margin-top: 32px;">
|
||
<div style="font-size: 18px; font-weight: 600; color: var(--text); margin-bottom: 24px;">What's Included:</div>
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align: left; max-width: 600px; margin: 0 auto;">
|
||
<div style="display: flex; align-items: center; gap: 12px;">
|
||
<span class="material-icons" style="color: #1e40af;">check_circle</span>
|
||
<span>4K camera system</span>
|
||
</div>
|
||
<div style="display: flex; align-items: center; gap: 12px;">
|
||
<span class="material-icons" style="color: #1e40af;">check_circle</span>
|
||
<span>AI detection & tracking</span>
|
||
</div>
|
||
<div style="display: flex; align-items: center; gap: 12px;">
|
||
<span class="material-icons" style="color: #1e40af;">check_circle</span>
|
||
<span>Officer training</span>
|
||
</div>
|
||
<div style="display: flex; align-items: center; gap: 12px;">
|
||
<span class="material-icons" style="color: #1e40af;">check_circle</span>
|
||
<span>Cloud hosting (AWS)</span>
|
||
</div>
|
||
<div style="display: flex; align-items: center; gap: 12px;">
|
||
<span class="material-icons" style="color: #1e40af;">check_circle</span>
|
||
<span>Ongoing updates</span>
|
||
</div>
|
||
<div style="display: flex; align-items: center; gap: 12px;">
|
||
<span class="material-icons" style="color: #1e40af;">check_circle</span>
|
||
<span>Technical support</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p style="font-size: 16px; color: var(--text-light); margin-bottom: 32px;">Want to try before you buy? Start with a 30-day pilot program at no cost.</p>
|
||
<a href="#contact" class="btn-primary" style="font-size: 18px; padding: 18px 40px; display: inline-flex; align-items: center; gap: 12px;">
|
||
<span class="material-icons">calendar_today</span>
|
||
Book Your Free Demo
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Final CTA Section -->
|
||
<section class="cta-section" id="contact">
|
||
<h2>Ready to Stop Wasting Money on Parking Enforcement?</h2>
|
||
<p style="max-width: 700px; margin: 0 auto 48px;">Book a 30-minute demo. We'll show you the system working on your own streets with your own <span class="locale-plate-plural">license plates</span>. No sales pitch—just proof.</p>
|
||
<div class="hero-buttons">
|
||
<a href="mailto:info@digitalchalking.com" class="btn-primary" style="font-size: 20px; padding: 20px 48px;">
|
||
<span class="material-icons">calendar_today</span>
|
||
Book Your Free Demo Now
|
||
</a>
|
||
</div>
|
||
<p style="margin-top: 24px; font-size: 16px; opacity: 0.8;">Or email us at info@digitalchalking.com</p>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer>
|
||
<div class="footer-container">
|
||
<div>
|
||
<div class="footer-brand">Digital Chalking</div>
|
||
<p class="footer-desc">AI-powered parking enforcement that's smarter, fairer, and more efficient. Transform your parking operations with computer vision technology.</p>
|
||
</div>
|
||
<div class="footer-section">
|
||
<h4>Product</h4>
|
||
<ul>
|
||
<li><a href="#features">Features</a></li>
|
||
<li><a href="#how-it-works">How It Works</a></li>
|
||
<li><a href="#benefits">Benefits</a></li>
|
||
<li><a href="#contact">Pricing</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-section">
|
||
<h4>Company</h4>
|
||
<ul>
|
||
<li><a href="#contact">About Us</a></li>
|
||
<li><a href="#contact">Careers</a></li>
|
||
<li><a href="#contact">Case Studies</a></li>
|
||
<li><a href="#contact">Blog</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-section">
|
||
<h4>Support</h4>
|
||
<ul>
|
||
<li><a href="#contact">Documentation</a></li>
|
||
<li><a href="#contact">Contact</a></li>
|
||
<li><a href="#contact">Privacy Policy</a></li>
|
||
<li><a href="#contact">Terms of Service</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<p>© 2025 Digital Chalking. All rights reserved.</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// ========================================
|
||
// Locale Lookup Table
|
||
// ========================================
|
||
const LOCALES = {
|
||
// --- Primary targets ---
|
||
"NZ": {
|
||
label: "New Zealand",
|
||
message: "Ready for New Zealand",
|
||
message_aws: "Deployed on AWS in Auckland",
|
||
date_format: "DD/MM/YYYY",
|
||
currency: "NZ$",
|
||
spelling: "en-GB",
|
||
plate_term: "number plate",
|
||
notice_term: "infringement notice",
|
||
authority_term: "council",
|
||
evidence_term: "court-ready evidence",
|
||
kerb_curb: "kerb",
|
||
citizens_term: "Ratepayers",
|
||
},
|
||
"AU": {
|
||
label: "Australia",
|
||
message: "Ready for Australia",
|
||
message_aws: "Deployed on AWS in Sydney",
|
||
date_format: "DD/MM/YYYY",
|
||
currency: "A$",
|
||
spelling: "en-GB",
|
||
plate_term: "number plate",
|
||
notice_term: "infringement notice",
|
||
authority_term: "council",
|
||
evidence_term: "court-ready evidence",
|
||
kerb_curb: "kerb",
|
||
citizens_term: "Ratepayers",
|
||
},
|
||
"GB": {
|
||
label: "United Kingdom",
|
||
message: "Ready for the United Kingdom",
|
||
message_aws: "Hosted in the UK/EU as required",
|
||
date_format: "DD/MM/YYYY",
|
||
currency: "£",
|
||
spelling: "en-GB",
|
||
plate_term: "number plate",
|
||
notice_term: "Penalty Charge Notice (PCN)",
|
||
authority_term: "local authority",
|
||
evidence_term: "legally admissible evidence",
|
||
kerb_curb: "kerb",
|
||
citizens_term: "Residents",
|
||
},
|
||
"US": {
|
||
label: "United States",
|
||
message: "Ready for the United States",
|
||
message_aws: "Hosted on AWS in the US",
|
||
date_format: "MM/DD/YYYY",
|
||
currency: "US$",
|
||
spelling: "en-US",
|
||
plate_term: "license plate",
|
||
notice_term: "citation",
|
||
authority_term: "parking authority",
|
||
evidence_term: "court-admissible evidence",
|
||
kerb_curb: "curb",
|
||
citizens_term: "Citizens",
|
||
},
|
||
"CA": {
|
||
label: "Canada",
|
||
message: "Ready for Canada",
|
||
message_aws: "Hosted on AWS in Canada/US",
|
||
date_format: "YYYY-MM-DD",
|
||
currency: "C$",
|
||
spelling: "en-CA",
|
||
plate_term: "licence plate",
|
||
notice_term: "parking ticket",
|
||
authority_term: "municipality",
|
||
evidence_term: "court-ready evidence",
|
||
kerb_curb: "curb",
|
||
citizens_term: "Residents",
|
||
},
|
||
"IE": {
|
||
label: "Ireland",
|
||
message: "Ready for Ireland",
|
||
message_aws: "Hosted in the EU",
|
||
date_format: "DD/MM/YYYY",
|
||
currency: "€",
|
||
spelling: "en-GB",
|
||
plate_term: "number plate",
|
||
notice_term: "parking fine",
|
||
authority_term: "local authority",
|
||
evidence_term: "legally admissible evidence",
|
||
kerb_curb: "kerb",
|
||
citizens_term: "Residents",
|
||
},
|
||
"SG": {
|
||
label: "Singapore",
|
||
message: "Ready for Singapore",
|
||
message_aws: "Hosted on AWS in Singapore",
|
||
date_format: "DD/MM/YYYY",
|
||
currency: "S$",
|
||
spelling: "en-GB",
|
||
plate_term: "number plate",
|
||
notice_term: "parking summons",
|
||
authority_term: "authority",
|
||
evidence_term: "court-ready evidence",
|
||
kerb_curb: "kerb",
|
||
citizens_term: "Residents",
|
||
},
|
||
|
||
// --- Fallback (used when code not present or unknown) ---
|
||
"*": {
|
||
label: "Worldwide",
|
||
message: "Ready worldwide",
|
||
message_aws: "Hosted on AWS servers",
|
||
date_format: "YYYY-MM-DD",
|
||
currency: "$",
|
||
spelling: "en-neutral",
|
||
plate_term: "license plate",
|
||
notice_term: "parking notice",
|
||
authority_term: "local authority",
|
||
evidence_term: "court-ready evidence",
|
||
kerb_curb: "curb",
|
||
citizens_term: "Residents",
|
||
}
|
||
};
|
||
|
||
// ========================================
|
||
// Locale Resolver Utility
|
||
// ========================================
|
||
function resolveLocale(countryCode) {
|
||
const code = (countryCode || "").toUpperCase();
|
||
const base = LOCALES["*"];
|
||
const specific = LOCALES[code] || {};
|
||
return { ...base, ...specific, country_code: code };
|
||
}
|
||
|
||
// ========================================
|
||
// Update Locale-Specific Terms
|
||
// ========================================
|
||
function updateLocaleTerms(cfg) {
|
||
// Helper to capitalize first letter
|
||
const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
|
||
|
||
// Update plate terms
|
||
document.querySelectorAll('.locale-plate').forEach(el => {
|
||
el.textContent = cfg.plate_term;
|
||
});
|
||
|
||
document.querySelectorAll('.locale-plate-plural').forEach(el => {
|
||
el.textContent = cfg.plate_term + 's';
|
||
});
|
||
|
||
// Update notice/citation terms
|
||
document.querySelectorAll('.locale-notice').forEach(el => {
|
||
el.textContent = cfg.notice_term;
|
||
});
|
||
|
||
document.querySelectorAll('.locale-notice-plural').forEach(el => {
|
||
el.textContent = capitalize(cfg.notice_term) + 's';
|
||
});
|
||
|
||
// Update authority terms (council/municipality/etc)
|
||
document.querySelectorAll('.locale-authority').forEach(el => {
|
||
el.textContent = cfg.authority_term;
|
||
});
|
||
|
||
document.querySelectorAll('.locale-authority-plural').forEach(el => {
|
||
el.textContent = cfg.authority_term + 's';
|
||
});
|
||
|
||
// Update kerb/curb terms
|
||
document.querySelectorAll('.locale-kerb').forEach(el => {
|
||
el.textContent = cfg.kerb_curb;
|
||
});
|
||
|
||
// Update citizens/ratepayers/residents terms
|
||
document.querySelectorAll('.locale-citizens').forEach(el => {
|
||
el.textContent = cfg.citizens_term;
|
||
});
|
||
|
||
// Update the original notice_term_plural id for backward compatibility
|
||
const elNoticeTerm = document.getElementById("notice_term_plural");
|
||
if (elNoticeTerm) {
|
||
elNoticeTerm.textContent = capitalize(cfg.notice_term) + 's';
|
||
}
|
||
}
|
||
|
||
// ========================================
|
||
// Mobile Menu Toggle
|
||
// ========================================
|
||
function toggleMobileMenu() {
|
||
const navLinks = document.getElementById('navLinks');
|
||
navLinks.classList.toggle('active');
|
||
}
|
||
|
||
function closeMobileMenu() {
|
||
const navLinks = document.getElementById('navLinks');
|
||
navLinks.classList.remove('active');
|
||
}
|
||
|
||
// Close mobile menu when clicking outside
|
||
document.addEventListener('click', function(event) {
|
||
const nav = document.querySelector('nav');
|
||
const navLinks = document.getElementById('navLinks');
|
||
|
||
if (!nav.contains(event.target)) {
|
||
navLinks.classList.remove('active');
|
||
}
|
||
});
|
||
|
||
// ========================================
|
||
// Geo-Location Detection & Locale Setup
|
||
// ========================================
|
||
(async () => {
|
||
try {
|
||
const res = await fetch("https://ipapi.co/json/");
|
||
const data = await res.json();
|
||
const cfg = resolveLocale(data.country_code);
|
||
|
||
// Update UI with localized strings
|
||
const message = cfg.message;
|
||
const message_aws = cfg.message_aws;
|
||
|
||
const elMessage = document.getElementById("message");
|
||
const elMessageAws = document.getElementById("message_aws");
|
||
const elNoticeTerm = document.getElementById("notice_term_plural");
|
||
|
||
if (elMessage) elMessage.textContent = message;
|
||
if (elMessageAws) elMessageAws.textContent = message_aws;
|
||
|
||
// Update all locale-specific terms
|
||
updateLocaleTerms(cfg);
|
||
|
||
// Expose locale configuration globally for other components
|
||
window.__LOCALE__ = cfg;
|
||
|
||
// Optional: Log for debugging
|
||
console.log('Locale detected:', cfg.label, `(${cfg.country_code})`);
|
||
|
||
} catch (err) {
|
||
// On failure, use fallback
|
||
console.error("Geo lookup failed, using fallback locale:", err);
|
||
const cfg = resolveLocale();
|
||
|
||
const elMessage = document.getElementById("message");
|
||
const elMessageAws = document.getElementById("message_aws");
|
||
const elNoticeTerm = document.getElementById("notice_term_plural");
|
||
|
||
if (elMessage) elMessage.textContent = cfg.message;
|
||
if (elMessageAws) elMessageAws.textContent = cfg.message_aws;
|
||
|
||
// Update all locale-specific terms
|
||
updateLocaleTerms(cfg);
|
||
|
||
// Expose fallback locale
|
||
window.__LOCALE__ = cfg;
|
||
}
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|