macjones/digitalchalk-website
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changed text to storybrand

Browse Source
This commit is contained in:
Mac Jones
2025-10-08 10:52:38 +13:00
parent c491dc9155
commit e3fc2f7895
1 changed files with 198 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

281
index.html
View File

@@ -582,11 +582,10 @@
<div class="nav-container">
<div class="logo">Digital Chalking</div>
<div class="nav-links">
<a href="#about">About</a>
<a href="#features">Features</a>
<a href="#deployment">Deployment</a>
<a href="#benefits">Benefits</a>
<a href="#contact" class="cta-btn">Get Started</a>
<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>
@@ -595,19 +594,19 @@
<section class="hero">
<div class="hero-container">
<div class="hero-content">
<h1>AI-Powered Parking Enforcement</h1>
<p>Replace manual chalking with intelligent computer vision. Automated vehicle tracking that's accurate, efficient, and court-ready.</p>
<div style="margin: 32px 0;">
<div id="message" style="font-size: 22px; color: rgba(255, 255, 255, 0.95); font-weight: 600; text-transform: uppercase; letter-spacing: 1px;">Loading...</div>
<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">
<span class="material-icons">play_arrow</span>
Request Demo
<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="#how-it-works" class="btn-secondary">
<span class="material-icons">info</span>
Learn More
<a href="#plan" class="btn-secondary">
<span class="material-icons">arrow_downward</span>
See How It Works
</a>
</div>
</div>
@@ -617,24 +616,35 @@
</div>
</section>
<!-- Stats Bar -->
<section class="stats-bar">
<!-- 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">10x</div>
<div class="stat-label">Efficiency Increase</div>
<div class="stat-value">90%</div>
<div class="stat-label">Less Officer Time</div>
</div>
<div class="stat-item">
<div class="stat-value">99.5%</div>
<div class="stat-label">Detection Accuracy</div>
<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">Automated Monitoring</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-Ready Evidence</div>
<div class="stat-label">Court-Admissible Proof</div>
</div>
</div>
@@ -648,11 +658,11 @@
</div>
</section>
<!-- What is Digital Chalking -->
<section class="features" id="about" style="background: white;">
<!-- Guide Section: Empathy + Authority -->
<section class="features" id="proof" style="background: white;">
<div class="section-header">
<h2>What is Digital Chalking?</h2>
<p>An electronic parking enforcement system that replaces manual chalk with intelligent automation.</p>
<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;">
@@ -895,37 +905,74 @@
</div>
</section>
<!-- How It Works -->
<section class="how-it-works" id="how-it-works">
<!-- The Plan: 3 Simple Steps -->
<section class="how-it-works" id="plan">
<div class="section-header">
<h2>How It Works</h2>
<p>From vehicle arrival to citation in five automated steps.</p>
<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(5, 1fr);">
<div class="steps-container" style="grid-template-columns: repeat(3, 1fr); max-width: 1000px;">
<div class="step">
<div class="step-number">1</div>
<h3>Vehicle Identification</h3>
<p>High-resolution cameras (stationary, mobile, or handheld) capture images of vehicles as they enter monitored parking areas.</p>
<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>AI Data Capture</h3>
<p>Computer vision engine processes imagery to extract license plate, vehicle make/model/color, tire valve stem position, and GPS location.</p>
<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>Digital Record Creation</h3>
<p>System creates immutable, time-stamped record with high-res photos, OCR text, vehicle classification, and environmental data.</p>
<h3>Scale Up</h3>
<p>Deploy city-wide when you're ready. We handle training, support, and ongoing updates—all included.</p>
</div>
<div class="step">
<div class="step-number">4</div>
<h3>Intelligent Monitoring</h3>
<p>Tracks elapsed time, detects vehicle movement, cross-references permit database, and generates alerts when violations occur.</p>
</div>
<div class="step">
<div class="step-number">5</div>
<h3>Automated Citation</h3>
<p>Officer receives notification with complete evidence package. Citation issued on-site with court-ready documentation.</p>
<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>
@@ -1063,8 +1110,57 @@
</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">
<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>
@@ -1211,44 +1307,67 @@
</div>
</section>
<!-- CTA 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 Modernize Your Enforcement?</h2>
<p>Start with a risk-free pilot program or schedule a demo to see the system in action.</p>
<div style="margin-bottom: 40px;">
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 900px; margin: 0 auto 40px; text-align: left;">
<div style="background: rgba(255, 255, 255, 0.1); padding: 32px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.2);">
<h3 style="font-size: 24px; margin-bottom: 16px;">Pilot Program</h3>
<ul style="list-style: none; line-height: 2; opacity: 0.9;">
<li>✓ 1-2 city blocks or single structure</li>
<li>✓ 30-day trial period</li>
<li>✓ Hands-on officer training</li>
<li>✓ Performance metrics tracking</li>
<li>✓ No long-term commitment</li>
</ul>
</div>
<div style="background: rgba(255, 255, 255, 0.1); padding: 32px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.2);">
<h3 style="font-size: 24px; margin-bottom: 16px;">Full Deployment</h3>
<ul style="list-style: none; line-height: 2; opacity: 0.9;">
<li>✓ City-wide infrastructure or fleet</li>
<li>✓ Permit database integration</li>
<li>✓ Advanced analytics & reporting</li>
<li>✓ Ongoing support & optimization</li>
<li>✓ Multi-year partnership</li>
</ul>
</div>
</div>
</div>
<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: 18px; padding: 18px 40px;">
<span class="material-icons">email</span>
Request Demo
</a>
<a href="tel:+15555551234" class="btn-secondary" style="font-size: 18px; padding: 18px 40px;">
<span class="material-icons">phone</span>
Call Us
<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 -->