1444 lines
69 KiB
HTML
1444 lines
69 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Digital Chalking - AI-Powered Parking Enforcement</title>
|
||
<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">
|
||
<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;
|
||
}
|
||
|
||
/* 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);
|
||
}
|
||
|
||
.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: 42px;
|
||
}
|
||
|
||
.hero-buttons {
|
||
justify-content: center;
|
||
}
|
||
|
||
.features-grid,
|
||
.steps-container {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.stats-container {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
|
||
.benefits-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.footer-container {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.step::after {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.nav-links {
|
||
display: none;
|
||
}
|
||
|
||
.steps-container {
|
||
grid-template-columns: 1fr !important;
|
||
}
|
||
|
||
.hero {
|
||
padding: 60px 24px;
|
||
}
|
||
|
||
.hero-content h1 {
|
||
font-size: 36px;
|
||
}
|
||
|
||
.hero-content p {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.section-header h2 {
|
||
font-size: 36px;
|
||
}
|
||
|
||
.cta-section h2 {
|
||
font-size: 36px;
|
||
}
|
||
|
||
.stats-container {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
/* Smooth Scroll */
|
||
html {
|
||
scroll-behavior: smooth;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Navigation -->
|
||
<nav>
|
||
<div class="nav-container">
|
||
<div class="logo">Digital Chalking</div>
|
||
<div class="nav-links">
|
||
<a href="#how-it-works">How It Works</a>
|
||
<a href="#proof">Proof</a>
|
||
<a href="#pricing">Pricing</a>
|
||
<a href="#contact" class="cta-btn">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: 40px;">
|
||
Chalk washes off in the rain. Officers waste hours returning to the same vehicles. Citations get thrown out because there's no proof.
|
||
Meanwhile, you're watching other councils 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. There is a better way.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="stats-container">
|
||
<div class="stat-item">
|
||
<div class="stat-value">90%</div>
|
||
<div class="stat-label">Less Officer Time</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">24/7</div>
|
||
<div class="stat-label">Weather-Proof Records</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-value">100%</div>
|
||
<div class="stat-label">Court-Admissible Proof</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 councils 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 citations</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;">integration_instructions</span>
|
||
<h4 style="font-size: 20px; font-weight: 700; margin-bottom: 12px;">Unified Architecture</h4>
|
||
<p style="opacity: 0.9; line-height: 1.7;">Single integrated platform, not a patchwork of disparate vendor systems requiring costly middleware and ongoing integration fees.</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;">science</span>
|
||
<h4 style="font-size: 20px; font-weight: 700; margin-bottom: 12px;">Proprietary AI Engine</h4>
|
||
<p style="opacity: 0.9; line-height: 1.7;">Our custom computer vision algorithms are optimized specifically for parking enforcement—not retrofitted from generic surveillance systems.</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 council 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 license plate 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 license plates. 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 council.</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>
|
||
|
||
<!-- 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 Everything</h3>
|
||
<p style="color: var(--text-light); line-height: 1.7;">4K cameras automatically photograph vehicles as they park—capturing license plates, make, model, and timestamps.</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 citation 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 curb 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: 1200px; margin: 0 auto; grid-template-columns: repeat(3, 1fr);">
|
||
<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 curb 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 class="feature-card">
|
||
<div class="feature-icon">
|
||
<span class="material-icons">smartphone</span>
|
||
</div>
|
||
<h3>Handheld Devices</h3>
|
||
<p style="margin-bottom: 20px;"><strong>Best for:</strong> Targeted enforcement, special events, parking garages</p>
|
||
<ul style="text-align: left; color: var(--text-light); line-height: 1.8;">
|
||
<li>Tablet or smartphone app with camera integration</li>
|
||
<li>Officer manually triggers vehicle capture</li>
|
||
<li>Portable and flexible deployment</li>
|
||
<li>Works offline with sync when connected</li>
|
||
<li>Ideal for supplementing fixed systems</li>
|
||
</ul>
|
||
<p style="margin-top: 20px; font-weight: 600; color: var(--primary);">iOS/Android app, works with device camera</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 council.</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 citations 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 councils 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;">✓ Enforce fairly with permanent, weather-proof records</li>
|
||
<li style="margin-bottom: 16px;">✓ Free up 90% of your officers' time for real priorities</li>
|
||
<li style="margin-bottom: 16px;">✓ Pay under $10k per vehicle—save hundreds of thousands</li>
|
||
<li style="margin-bottom: 16px;">✓ Start with a pilot, scale when you're ready—no lock-in</li>
|
||
<li style="margin-bottom: 16px;">✓ Defend every citation with photo proof that holds up in court</li>
|
||
<li>✓ Join forward-thinking councils leading the way</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 citations 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 license plates. 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>
|
||
(async () => {
|
||
try {
|
||
const res = await fetch("https://ipapi.co/json/");
|
||
const data = await res.json();
|
||
|
||
let message = "Welcome!";
|
||
let message_aws = "Hosted on AWS servers";
|
||
|
||
if (data.country_code === "NZ") {
|
||
message = "Ready for New Zealand";
|
||
message_aws = "Deployed on AWS in Auckland.";
|
||
} else if (data.country_code === "AU") {
|
||
message = "Ready for Australia";
|
||
message_aws = "Deployed on AWS in Sydney";
|
||
} else {
|
||
message = "Ready worldwide";
|
||
message_aws = "Hosted on AWS servers";
|
||
}
|
||
|
||
document.getElementById("message").textContent = message;
|
||
document.getElementById("message_aws").textContent = message_aws;
|
||
} catch (e) {
|
||
console.error("Geo lookup failed", e);
|
||
document.getElementById("message").textContent = "Ready worldwide";
|
||
document.getElementById("message_aws").textContent = "Hosted on AWS servers";
|
||
}
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|