-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
128 lines (128 loc) · 54.5 KB
/
index.html
File metadata and controls
128 lines (128 loc) · 54.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html><html lang="en" class="scroll-smooth"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- Primary Meta Tags --><title>My Bus is My Study Hall - ClearLane Initiative</title><meta name="description" content="How a CUNY student transformed a 2-hour BxM10 commute into a rolling study hall, and why targeted bus enforcement is crucial for educational equity."><meta name="keywords" content="rolling study hall, BxM10, CUNY student commute, bus enforcement, educational equity"><!-- Open Graph Meta Tags --><meta property="og:type" content="website"><meta property="og:title" content="My Bus is My Study Hall - ClearLane Initiative"><meta property="og:description" content="How a CUNY student transformed a 2-hour BxM10 commute into a rolling study hall, and why targeted bus enforcement is crucial for educational equity."><meta property="og:image" content="/images/og-clearLane.jpg"><meta property="og:url" content="https://basirs.github.io/ACE_Intelligence_System"><meta property="og:site_name" content="ClearLane Initiative"><!-- Twitter Card Meta Tags --><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="My Bus is My Study Hall - ClearLane Initiative"><meta name="twitter:description" content="How a CUNY student transformed a 2-hour BxM10 commute into a rolling study hall, and why targeted bus enforcement is crucial for educational equity."><meta name="twitter:image" content="/images/og-clearLane.jpg"><!-- Favicons --><link rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><!-- Preload critical resources --><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet"><!-- Theme and accessibility --><meta name="theme-color" content="#2563eb"><meta name="color-scheme" content="light"><!-- Performance and security --><meta http-equiv="X-Content-Type-Options" content="nosniff"><meta name="referrer" content="strict-origin-when-cross-origin"><!-- Structured Data --><script type="application/ld+json">{"@context":"https://schema.org","@type":"WebSite","name":"ClearLane Initiative","description":"Data-driven advocacy for better NYC bus enforcement to protect student commutes","url":"https://basirs.github.io/","creator":{"@type":"Organization","name":"ClearLane Initiative","description":"Student-led transit advocacy using data science"},"mainEntity":{"@type":"AdvocacyOrganization","name":"ClearLane Initiative","description":"How a CUNY student transformed a 2-hour BxM10 commute into a rolling study hall, and why targeted bus enforcement is crucial for educational equity.","url":"https://basirs.github.io/ACE_Intelligence_System","sameAs":["https://github.com/clearlane-initiative"]}}</script><!-- Analytics placeholder --><!-- Google Analytics would go here in production --><!-- Global styles --><link rel="stylesheet" href="/ACE_Intelligence_System/_astro/about.DXPFpfd0.css">
<style>.temporal-chart[data-astro-cid-g5hioohl]{--student-highlight: #fbbf24}.heatmap-container[data-astro-cid-g5hioohl]{width:100%;height:400px;position:relative}.data-table[data-astro-cid-g5hioohl]{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.9rem}.data-table[data-astro-cid-g5hioohl] th[data-astro-cid-g5hioohl],.data-table[data-astro-cid-g5hioohl] td[data-astro-cid-g5hioohl]{padding:.5rem;text-align:center;border:1px solid var(--color-border)}.data-table[data-astro-cid-g5hioohl] th[data-astro-cid-g5hioohl]{background-color:var(--color-gray-100);font-weight:600}.data-table[data-astro-cid-g5hioohl] th[data-astro-cid-g5hioohl][scope=row]{text-align:left;background-color:var(--color-gray-50)}.data-table[data-astro-cid-g5hioohl] .student-hour[data-astro-cid-g5hioohl]{background-color:#fbbf2433;font-weight:600}.chart-filters[data-astro-cid-g5hioohl]{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1rem}.filter-label[data-astro-cid-g5hioohl]{display:flex;align-items:center;gap:.5rem;cursor:pointer}.day-filter[data-astro-cid-g5hioohl]{border:1px solid var(--color-border);border-radius:4px;padding:.5rem}.day-filter[data-astro-cid-g5hioohl] legend[data-astro-cid-g5hioohl]{font-weight:600;padding:0 .5rem}.day-filter[data-astro-cid-g5hioohl] label[data-astro-cid-g5hioohl]{display:inline-flex;align-items:center;gap:.25rem;margin-right:1rem}.chart-legend[data-astro-cid-g5hioohl]{display:flex;flex-wrap:wrap;gap:1rem}.legend-item[data-astro-cid-g5hioohl]{display:flex;align-items:center;gap:.5rem;font-size:.9rem}.legend-color[data-astro-cid-g5hioohl]{width:16px;height:16px;border-radius:2px}.legend-color[data-astro-cid-g5hioohl].student-highlight{background-color:var(--student-highlight);border:2px solid #92400e}@media (max-width: 768px){.heatmap-container[data-astro-cid-g5hioohl]{height:300px}.data-table[data-astro-cid-g5hioohl]{font-size:.8rem}.data-table[data-astro-cid-g5hioohl] th[data-astro-cid-g5hioohl],.data-table[data-astro-cid-g5hioohl] td[data-astro-cid-g5hioohl]{padding:.25rem}.chart-filters[data-astro-cid-g5hioohl]{flex-direction:column}}
</style>
<link rel="stylesheet" href="/ACE_Intelligence_System/_astro/index.Dh2ZBCMs.css">
<link rel="stylesheet" href="/ACE_Intelligence_System/_astro/findings.EtA70h5j.css"><script type="module" src="/ACE_Intelligence_System/_astro/hoisted.BZh4eo7i.js"></script></head> <body class="antialiased "> <!-- Skip to main content for accessibility --> <a href="#main-content" class="skip-to-main">
Skip to main content
</a> <!-- Page content --> <div id="app" class="min-h-screen flex flex-col"> <header class="bg-white shadow-sm border-b border-gray-200 sticky top-0 z-50 print:static print:shadow-none" data-astro-cid-j2devmb2> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-astro-cid-j2devmb2> <div class="flex justify-between items-center h-16 lg:h-20" data-astro-cid-j2devmb2> <!-- Logo and brand --> <div class="flex items-center" data-astro-cid-j2devmb2> <a href="/" class="flex items-center space-x-3 group" data-astro-cid-j2devmb2> <div class="flex-shrink-0" data-astro-cid-j2devmb2> <!-- ClearLane Logo --> <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center" data-astro-cid-j2devmb2> <svg viewBox="0 0 24 24" class="w-6 h-6 text-white" fill="currentColor" aria-hidden="true" data-astro-cid-j2devmb2> <path d="M12 2L2 7L12 12L22 7L12 2Z" data-astro-cid-j2devmb2></path> <path d="M2 17L12 22L22 17" data-astro-cid-j2devmb2></path> <path d="M2 12L12 17L22 12" data-astro-cid-j2devmb2></path> </svg> </div> </div> <div class="hidden sm:block" data-astro-cid-j2devmb2> <div class="text-xl font-bold text-gray-900 group-hover:text-primary transition-colors" data-astro-cid-j2devmb2>
ClearLane
</div> <div class="text-sm text-gray-600 -mt-1" data-astro-cid-j2devmb2>
Initiative
</div> </div> </a> </div> <!-- Desktop navigation --> <nav class="hidden lg:flex space-x-8" aria-label="Main navigation" data-astro-cid-j2devmb2> <a href="/" class="px-3 py-2 text-sm font-medium transition-colors rounded-lg text-primary bg-primary/10" aria-current="page" data-astro-cid-j2devmb2> Home </a><a href="/about" class="px-3 py-2 text-sm font-medium transition-colors rounded-lg text-gray-700 hover:text-primary hover:bg-gray-50" data-astro-cid-j2devmb2> About </a><a href="/methodology" class="px-3 py-2 text-sm font-medium transition-colors rounded-lg text-gray-700 hover:text-primary hover:bg-gray-50" data-astro-cid-j2devmb2> Research </a><a href="/findings" class="px-3 py-2 text-sm font-medium transition-colors rounded-lg text-gray-700 hover:text-primary hover:bg-gray-50" data-astro-cid-j2devmb2> Findings </a><a href="/solution" class="px-3 py-2 text-sm font-medium transition-colors rounded-lg text-gray-700 hover:text-primary hover:bg-gray-50" data-astro-cid-j2devmb2> Solution </a> </nav> <!-- CTA and mobile menu button --> <div class="flex items-center space-x-4" data-astro-cid-j2devmb2> <!-- Desktop CTA --> <div class="hidden md:block" data-astro-cid-j2devmb2> <a href="/#route-analyzer" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-colors no-print" data-astro-cid-j2devmb2>
🚌 Analyze My Route </a> </div> <!-- Mobile menu button --> <button type="button" id="mobile-menu-button" class="lg:hidden inline-flex items-center justify-center p-2 rounded-lg text-gray-700 hover:text-primary hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary no-print" aria-controls="mobile-menu" aria-expanded="false" aria-label="Open main menu" data-astro-cid-j2devmb2> <!-- Hamburger icon --> <svg id="menu-icon-open" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-astro-cid-j2devmb2> <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" data-astro-cid-j2devmb2></path> </svg> <!-- Close icon --> <svg id="menu-icon-close" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-astro-cid-j2devmb2> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" data-astro-cid-j2devmb2></path> </svg> </button> </div> </div> <!-- Mobile navigation menu --> <div id="mobile-menu" class="lg:hidden hidden border-t border-gray-200 bg-white no-print" role="menu" aria-orientation="vertical" aria-labelledby="mobile-menu-button" data-astro-cid-j2devmb2> <div class="px-2 pt-2 pb-3 space-y-1" data-astro-cid-j2devmb2> <a href="/" class="block px-3 py-2 text-base font-medium transition-colors rounded-lg text-primary bg-primary/10" role="menuitem" aria-current="page" data-astro-cid-j2devmb2> Home </a><a href="/about" class="block px-3 py-2 text-base font-medium transition-colors rounded-lg text-gray-700 hover:text-primary hover:bg-gray-50" role="menuitem" data-astro-cid-j2devmb2> About </a><a href="/methodology" class="block px-3 py-2 text-base font-medium transition-colors rounded-lg text-gray-700 hover:text-primary hover:bg-gray-50" role="menuitem" data-astro-cid-j2devmb2> Research </a><a href="/findings" class="block px-3 py-2 text-base font-medium transition-colors rounded-lg text-gray-700 hover:text-primary hover:bg-gray-50" role="menuitem" data-astro-cid-j2devmb2> Findings </a><a href="/solution" class="block px-3 py-2 text-base font-medium transition-colors rounded-lg text-gray-700 hover:text-primary hover:bg-gray-50" role="menuitem" data-astro-cid-j2devmb2> Solution </a> <!-- Mobile CTA --> <div class="pt-4 border-t border-gray-200" data-astro-cid-j2devmb2> <a href="/#route-analyzer" class="block w-full px-3 py-2 text-center text-base font-medium text-white bg-primary hover:bg-primary-dark rounded-lg transition-colors" role="menuitem" data-astro-cid-j2devmb2>
🚌 Analyze My Route </a> </div> </div> </div> </div> <!-- Progress indicator for scrolling (optional enhancement) --> <div id="scroll-progress" class="h-0.5 bg-primary transform origin-left scale-x-0 transition-transform duration-150 no-print" data-astro-cid-j2devmb2></div> </header> <main id="main-content"> <!-- Hero Section: Personal Story Hook --> <section class="relative overflow-hidden bg-gradient-to-br from-gray-900 via-gray-800 to-primary-dark print:bg-white print:text-black" data-astro-cid-anhloy43> <!-- Background Elements --> <!-- Background Pattern --> <div class="absolute inset-0 z-10" data-astro-cid-anhloy43> <svg class="absolute inset-0 h-full w-full" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 1463 360" aria-hidden="true" data-astro-cid-anhloy43> <path class="fill-white opacity-5" d="M-82.673 72l1761.849 472.086-134.327 501.315-1761.85-472.086z" data-astro-cid-anhloy43></path> <path class="fill-white opacity-3" d="M-217.088 544.086L1544.761 72l134.327 501.316-1761.849 472.086z" data-astro-cid-anhloy43></path> </svg> </div> <!-- Content --> <div class="relative z-20 px-4 sm:px-6 lg:px-8" data-astro-cid-anhloy43> <div class="max-w-7xl mx-auto" data-astro-cid-anhloy43> <div class="py-16 sm:py-20 lg:py-28" data-astro-cid-anhloy43> <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center" data-astro-cid-anhloy43> <!-- Text Content --> <div class="text-center lg:text-left" data-astro-cid-anhloy43> <div class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-white/10 text-white/90 mb-6 backdrop-blur-sm" data-astro-cid-anhloy43> <svg class="w-4 h-4 mr-2" viewBox="0 0 24 24" fill="currentColor" data-astro-cid-anhloy43> <path d="M12 2L2 7L12 12L22 7L12 2Z" data-astro-cid-anhloy43></path> <path d="M2 17L12 22L22 17" data-astro-cid-anhloy43></path> <path d="M2 12L12 17L22 12" data-astro-cid-anhloy43></path> </svg> ClearLane Initiative </div> <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-white leading-tight mb-6 fade-in print:text-black" data-astro-cid-anhloy43> <span class="block" data-astro-cid-anhloy43>My Bus is My Study Hall</span> </h1> <p class="text-xl sm:text-2xl text-white/90 mb-8 max-w-2xl mx-auto lg:mx-0 leading-relaxed fade-in print:text-gray-700" data-astro-cid-anhloy43> How I transformed my 2-hour BxM10 commute into the most productive part of my day, and why bus enforcement failures threaten this vital study time. </p> <!-- CTA Buttons --> <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start mb-12 fade-in no-print" data-astro-cid-anhloy43> <a href="#route-analyzer" class="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold text-primary bg-white rounded-xl hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-1" data-astro-cid-anhloy43> Analyze Your Route <svg class="ml-2 w-5 h-5" viewBox="0 0 20 20" fill="currentColor" data-astro-cid-anhloy43> <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" data-astro-cid-anhloy43></path> </svg> </a> <a href="#findings" class="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold text-white bg-white/10 rounded-xl hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary transition-all duration-200 backdrop-blur-sm border border-white/20" data-astro-cid-anhloy43> See the Data </a> </div> <!-- Stats (if provided) --> <div class="grid grid-cols-1 sm:grid-cols-3 gap-8 fade-in" data-astro-cid-anhloy43> <div class="text-center lg:text-left" data-astro-cid-anhloy43> <div class="text-3xl sm:text-4xl font-bold text-white mb-2 print:text-black" data-astro-cid-anhloy43> 270,000+ </div> <div class="text-sm font-semibold text-white/80 uppercase tracking-wider mb-1 print:text-gray-600" data-astro-cid-anhloy43> CUNY Students </div> <div class="text-sm text-white/70 print:text-gray-500" data-astro-cid-anhloy43> Depend on NYC buses daily </div> </div><div class="text-center lg:text-left" data-astro-cid-anhloy43> <div class="text-3xl sm:text-4xl font-bold text-white mb-2 print:text-black" data-astro-cid-anhloy43> 2 Hours </div> <div class="text-sm font-semibold text-white/80 uppercase tracking-wider mb-1 print:text-gray-600" data-astro-cid-anhloy43> BxM10 Commute </div> <div class="text-sm text-white/70 print:text-gray-500" data-astro-cid-anhloy43> My rolling study hall </div> </div><div class="text-center lg:text-left" data-astro-cid-anhloy43> <div class="text-3xl sm:text-4xl font-bold text-white mb-2 print:text-black" data-astro-cid-anhloy43> 83% </div> <div class="text-sm font-semibold text-white/80 uppercase tracking-wider mb-1 print:text-gray-600" data-astro-cid-anhloy43> Violations </div> <div class="text-sm text-white/70 print:text-gray-500" data-astro-cid-anhloy43> Concentrated at 90 locations </div> </div> </div> </div> <!-- Visual Content --> <div class="relative" data-astro-cid-anhloy43> <div class="space-y-6"> <!-- Personal Story Visualization --> <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20"> <h3 class="text-xl font-semibold text-white mb-4">The Rolling Study Hall</h3> <div class="space-y-4"> <div class="flex items-center text-white/90"> <div class="w-2 h-2 bg-green-400 rounded-full mr-3 flex-shrink-0"></div> <span class="text-sm">6:30 AM - Board BxM10 in the Bronx</span> </div> <div class="flex items-center text-white/90"> <div class="w-2 h-2 bg-blue-400 rounded-full mr-3 flex-shrink-0"></div> <span class="text-sm">6:35 AM - Open textbook, start studying</span> </div> <div class="flex items-center text-white/90"> <div class="w-2 h-2 bg-yellow-400 rounded-full mr-3 flex-shrink-0"></div> <span class="text-sm">7:15 AM - Complete 2 homework assignments</span> </div> <div class="flex items-center text-white/90"> <div class="w-2 h-2 bg-red-400 rounded-full mr-3 flex-shrink-0"></div> <span class="text-sm">8:30 AM - Arrive at Baruch, ready for class</span> </div> </div> <div class="mt-6 p-4 bg-black/30 rounded-lg border border-white/20"> <p class="text-sm text-white font-medium italic">
"When buses run on time, I can complete up to 10 hours of studying per week during my commute.
But delays don't just make me late, they steal my study hall."
</p> </div> </div> </div> </div> </div> </div> </div> </div> <!-- Scroll indicator --> <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-20 no-print" data-astro-cid-anhloy43> <button onclick="document.getElementById('main-content').scrollIntoView({ behavior: 'smooth' })" class="flex flex-col items-center text-white/80 hover:text-white transition-colors focus:outline-none focus:ring-2 focus:ring-white rounded-lg p-2" aria-label="Scroll to main content" data-astro-cid-anhloy43> <span class="text-sm font-medium mb-2" data-astro-cid-anhloy43>Discover More</span> <svg class="w-6 h-6 animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-anhloy43> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" data-astro-cid-anhloy43></path> </svg> </button> </div> <!-- Wave separator --> <div class="absolute bottom-0 left-0 w-full overflow-hidden no-print" data-astro-cid-anhloy43> <svg class="relative block w-full h-16" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none" data-astro-cid-anhloy43> <path d="M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z" class="fill-white" data-astro-cid-anhloy43></path> </svg> </div> </section> <!-- Problem Definition Section --> <section class="py-16 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16"> <h2 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-6">
Buses Are Educational Infrastructure
</h2> <p class="text-xl text-gray-600 max-w-3xl mx-auto">
For working students who can't afford alternatives, reliable transit isn't a convenience,
it's the foundation of academic success. Current enforcement systems fail to protect this vital study time.
</p> </div> <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16"> <div class="block w-full transition-all duration-200 print:border print:border-gray-300 print:shadow-none bg-white rounded-lg shadow-md hover:shadow-lg p-6 text-center group" key="The Problem is Local" data-astro-cid-dd5txfcy> <div class="text-4xl mb-4 emoji-container" role="img" aria-label="The Problem is Local icon"> 📍 </div> <div class="text-3xl font-bold text-primary mb-2">90 locations</div> <div class="text-sm text-gray-500 uppercase tracking-wide mb-4">cause 90% of problems</div> <h3 class="text-xl font-semibold text-gray-900 mb-3">The Problem is Local</h3> <p class="text-gray-600">Bus violations are highly concentrated. 90% of student-impacting violations occur at just 90 bus stops across NYC.</p> </div> <div class="block w-full transition-all duration-200 print:border print:border-gray-300 print:shadow-none bg-white rounded-lg shadow-md hover:shadow-lg p-6 text-center group" key="The Problem is Predictable" data-astro-cid-dd5txfcy> <div class="text-4xl mb-4 emoji-container" role="img" aria-label="The Problem is Predictable icon"> ⏰ </div> <div class="text-3xl font-bold text-primary mb-2">7-10 AM</div> <div class="text-sm text-gray-500 uppercase tracking-wide mb-4">peak disruption hours</div> <h3 class="text-xl font-semibold text-gray-900 mb-3">The Problem is Predictable</h3> <p class="text-gray-600">Violations peak during student commute hours (7-10 AM weekdays), directly disrupting "rolling study halls."</p> </div> <div class="block w-full transition-all duration-200 print:border print:border-gray-300 print:shadow-none bg-white rounded-lg shadow-md hover:shadow-lg p-6 text-center group" key="The Solution Works" data-astro-cid-dd5txfcy> <div class="text-4xl mb-4 emoji-container" role="img" aria-label="The Solution Works icon"> ✅ </div> <div class="text-3xl font-bold text-primary mb-2">+6.5%</div> <div class="text-sm text-gray-500 uppercase tracking-wide mb-4">speed improvement proven</div> <h3 class="text-xl font-semibold text-gray-900 mb-3">The Solution Works</h3> <p class="text-gray-600">Targeted ACE enforcement improved bus speeds by 6.5% on 5 routes. ClearLane can scale this success.</p> </div> </div> <div class="text-center"> <a class="inline-flex items-center justify-center gap-2 font-semibold text-center border border-transparent transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-60 disabled:cursor-not-allowed print:border print:border-gray-400 print:bg-transparent print:text-black border-primary text-primary bg-transparent hover:bg-primary hover:text-white focus:ring-primary px-6 py-3 text-base rounded-lg min-h-[44px]" data-interactive href="/methodology" data-astro-cid-6ygtcg62><span class="" data-astro-cid-6ygtcg62> <span role="img" aria-label="Chart icon">📊</span> See Our Research Methodology
</span> </a> </div> </div> </section> <!-- Data Investigation Section --> <section id="findings" class="py-16 bg-gray-50 print-break-before"> <section class="data-visualization-section viz-layout-story " role="region" aria-labelledby="section-title" aria-describedby="section-description" data-astro-cid-hjkueyeh> <header class="section-header" data-astro-cid-hjkueyeh> <h2 id="section-title" class="section-title" data-astro-cid-hjkueyeh>What the Data Reveals</h2> <p id="section-description" class="section-description" data-astro-cid-hjkueyeh> Our analysis of 3.7 million violation records shows clear patterns that can guide targeted enforcement. </p> </header> <div class="visualization-content" data-astro-cid-hjkueyeh> <div class="main-content" data-astro-cid-hjkueyeh> <div class="mb-12"> <h3 class="text-2xl font-bold text-gray-900 mb-6">
When Student Commutes Are Most Disrupted
</h3> <p class="text-lg text-gray-600 mb-8">
Violations peak during morning student commute hours, directly threatening the "rolling study hall" time
that working students depend on for academic success.
</p> <div class="temporal-chart " data-astro-cid-g5hioohl> <div class="mb-4" data-astro-cid-g5hioohl> <h3 class="text-lg font-semibold text-gray-800 mb-2" data-astro-cid-g5hioohl>When Student Commutes Are Most Disrupted</h3> <p class="text-sm text-gray-600" data-astro-cid-g5hioohl>Bus lane violations by hour of day and day of week. Peak violations occur during morning student commute hours (7-10 AM).</p> </div> <div id="temporal-heatmap" class="heatmap-container" data-astro-cid-g5hioohl> <!-- Fallback message for no-JS --> <noscript> <p data-astro-cid-g5hioohl>This interactive heatmap shows when bus violations most impact student commutes. Enable JavaScript for the full experience.</p> </noscript> </div> <!-- Accessible data table --> <table class="data-table" data-astro-cid-g5hioohl> <caption data-astro-cid-g5hioohl>Violations by Hour and Day of Week</caption> <thead data-astro-cid-g5hioohl> <tr data-astro-cid-g5hioohl> <th scope="col" data-astro-cid-g5hioohl>Day</th> <th scope="col" class="" data-astro-cid-g5hioohl> 0:00
</th><th scope="col" class="" data-astro-cid-g5hioohl> 1:00
</th><th scope="col" class="" data-astro-cid-g5hioohl> 2:00
</th><th scope="col" class="" data-astro-cid-g5hioohl> 3:00
</th><th scope="col" class="" data-astro-cid-g5hioohl> 4:00
</th><th scope="col" class="" data-astro-cid-g5hioohl> 5:00
</th><th scope="col" class="" data-astro-cid-g5hioohl> 6:00
</th><th scope="col" class="student-hour" data-astro-cid-g5hioohl> 7:00
</th><th scope="col" class="student-hour" data-astro-cid-g5hioohl> 8:00
</th><th scope="col" class="student-hour" data-astro-cid-g5hioohl> 9:00
</th><th scope="col" class="student-hour" data-astro-cid-g5hioohl> 10:00
</th><th scope="col" class="" data-astro-cid-g5hioohl> 11:00
</th><th scope="col" class="" data-astro-cid-g5hioohl> 12:00
</th><th scope="col" class="" data-astro-cid-g5hioohl> 13:00
</th><th scope="col" class="" data-astro-cid-g5hioohl> 14:00
</th><th scope="col" class="" data-astro-cid-g5hioohl> 15:00
</th><th scope="col" class="" data-astro-cid-g5hioohl> 16:00
</th><th scope="col" class="" data-astro-cid-g5hioohl> 17:00
</th><th scope="col" class="" data-astro-cid-g5hioohl> 18:00
</th><th scope="col" class="" data-astro-cid-g5hioohl> 19:00
</th><th scope="col" class="" data-astro-cid-g5hioohl> 20:00
</th><th scope="col" class="" data-astro-cid-g5hioohl> 21:00
</th><th scope="col" class="" data-astro-cid-g5hioohl> 22:00
</th><th scope="col" class="" data-astro-cid-g5hioohl> 23:00
</th> </tr> </thead> <tbody data-astro-cid-g5hioohl> <tr key="Monday" data-astro-cid-g5hioohl> <th scope="row" data-astro-cid-g5hioohl>Monday</th> <td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="student-hour" data-astro-cid-g5hioohl> 0 </td><td class="student-hour" data-astro-cid-g5hioohl> 0 </td><td class="student-hour" data-astro-cid-g5hioohl> 0 </td><td class="student-hour" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td> </tr><tr key="Tuesday" data-astro-cid-g5hioohl> <th scope="row" data-astro-cid-g5hioohl>Tuesday</th> <td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="student-hour" data-astro-cid-g5hioohl> 0 </td><td class="student-hour" data-astro-cid-g5hioohl> 0 </td><td class="student-hour" data-astro-cid-g5hioohl> 0 </td><td class="student-hour" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td> </tr><tr key="Wednesday" data-astro-cid-g5hioohl> <th scope="row" data-astro-cid-g5hioohl>Wednesday</th> <td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="student-hour" data-astro-cid-g5hioohl> 0 </td><td class="student-hour" data-astro-cid-g5hioohl> 0 </td><td class="student-hour" data-astro-cid-g5hioohl> 0 </td><td class="student-hour" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td> </tr><tr key="Thursday" data-astro-cid-g5hioohl> <th scope="row" data-astro-cid-g5hioohl>Thursday</th> <td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="student-hour" data-astro-cid-g5hioohl> 0 </td><td class="student-hour" data-astro-cid-g5hioohl> 0 </td><td class="student-hour" data-astro-cid-g5hioohl> 0 </td><td class="student-hour" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td> </tr><tr key="Friday" data-astro-cid-g5hioohl> <th scope="row" data-astro-cid-g5hioohl>Friday</th> <td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="student-hour" data-astro-cid-g5hioohl> 0 </td><td class="student-hour" data-astro-cid-g5hioohl> 0 </td><td class="student-hour" data-astro-cid-g5hioohl> 0 </td><td class="student-hour" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td> </tr><tr key="Saturday" data-astro-cid-g5hioohl> <th scope="row" data-astro-cid-g5hioohl>Saturday</th> <td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="student-hour" data-astro-cid-g5hioohl> 0 </td><td class="student-hour" data-astro-cid-g5hioohl> 0 </td><td class="student-hour" data-astro-cid-g5hioohl> 0 </td><td class="student-hour" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td> </tr><tr key="Sunday" data-astro-cid-g5hioohl> <th scope="row" data-astro-cid-g5hioohl>Sunday</th> <td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="student-hour" data-astro-cid-g5hioohl> 0 </td><td class="student-hour" data-astro-cid-g5hioohl> 0 </td><td class="student-hour" data-astro-cid-g5hioohl> 0 </td><td class="student-hour" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td><td class="" data-astro-cid-g5hioohl> 0 </td> </tr> </tbody> </table> <!-- Interactive controls --> <div class="chart-filters" data-astro-cid-g5hioohl> <label class="filter-label" data-astro-cid-g5hioohl> <input type="checkbox" id="highlight-student-hours" checked data-filter="student-hours" data-astro-cid-g5hioohl>
Highlight Student Commute Hours (7-10 AM)
</label> <fieldset class="day-filter" data-astro-cid-g5hioohl> <legend data-astro-cid-g5hioohl>Show Days:</legend> <label data-astro-cid-g5hioohl><input type="checkbox" value="weekdays" checked data-astro-cid-g5hioohl> Weekdays</label> <label data-astro-cid-g5hioohl><input type="checkbox" value="weekends" checked data-astro-cid-g5hioohl> Weekends</label> </fieldset> </div> <div class="chart-legend" data-astro-cid-g5hioohl> <div class="legend-item" data-astro-cid-g5hioohl> <span class="legend-color" style="background-color: #2563eb;" data-astro-cid-g5hioohl></span>
Low Violations (<1000)
</div> <div class="legend-item" data-astro-cid-g5hioohl> <span class="legend-color" style="background-color: #dc2626;" data-astro-cid-g5hioohl></span>
High Violations (>5000)
</div> <div class="legend-item" data-astro-cid-g5hioohl> <span class="legend-color student-highlight" data-astro-cid-g5hioohl></span>
Student Commute Hours
</div> </div> </div> </div> <div class="mb-12"> <h3 class="text-2xl font-bold text-gray-900 mb-6">
Where Student Commutes Are Most Vulnerable
</h3> <p class="text-lg text-gray-600 mb-8">
Bus violations are concentrated at specific locations near CUNY campuses.
This geographic clustering makes targeted enforcement both feasible and effective.
</p> <div class="w-full h-96 bg-gray-100 rounded-lg flex items-center justify-center"> <p class="text-gray-600">Violation heatmap visualization would appear here</p> </div> </div> <div class="text-center bg-primary/5 rounded-2xl p-8 border border-primary/10"> <h3 class="text-2xl font-bold text-gray-900 mb-4">
Ready to Dive Deeper?
</h3> <p class="text-lg text-gray-600 mb-6">
Explore our complete analysis, including CUNY proximity studies,
enforcement paradox calculations, and the full ClearLane solution framework.
</p> <div class="flex flex-col sm:flex-row gap-4 justify-center"> <a class="inline-flex items-center justify-center gap-2 font-semibold text-center border border-transparent transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-60 disabled:cursor-not-allowed print:border print:border-gray-400 print:bg-transparent print:text-black bg-primary text-white hover:bg-primary-dark focus:ring-primary shadow-sm hover:shadow-md px-6 py-3 text-base rounded-lg min-h-[44px]" data-interactive href="/findings" data-astro-cid-6ygtcg62><span class="" data-astro-cid-6ygtcg62>
📈 View Complete Analysis
</span> </a> <a class="inline-flex items-center justify-center gap-2 font-semibold text-center border border-transparent transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-60 disabled:cursor-not-allowed print:border print:border-gray-400 print:bg-transparent print:text-black bg-secondary text-white hover:bg-secondary-dark focus:ring-secondary shadow-sm hover:shadow-md px-6 py-3 text-base rounded-lg min-h-[44px]" data-interactive href="/solution" data-astro-cid-6ygtcg62><span class="" data-astro-cid-6ygtcg62>
💡 See Our Solution
</span> </a> </div> </div> </div> </div> <footer class="section-footer" data-astro-cid-hjkueyeh> </footer> </section> </section> <!-- Personal Route Analyzer --> <section id="route-analyzer" class="py-16 bg-white"> <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-12"> <h2 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-6">
How Do Violations Affect Your Commute?
</h2> <p class="text-xl text-gray-600 max-w-2xl mx-auto">
Enter your bus route and travel times to see how enforcement failures impact your daily journey
and study time. Your data helps strengthen the case for ClearLane.
</p> </div> <div id="route-analyzer" class="route-analyzer " data-astro-cid-u3xnx4cz> <div class="mb-6" data-astro-cid-u3xnx4cz> <h3 class="text-xl font-bold text-gray-900 mb-2" data-astro-cid-u3xnx4cz>Analyze Your Commute Impact</h3> <p class="text-gray-600" data-astro-cid-u3xnx4cz>Enter your bus route and commute times to see how violations affect your journey and study time.</p> </div> <div class="analyzer-container" data-astro-cid-u3xnx4cz> <!-- Input Form --> <form id="route-form" class="route-form" novalidate data-astro-cid-u3xnx4cz> <fieldset class="input-group" data-astro-cid-u3xnx4cz> <legend data-astro-cid-u3xnx4cz>Tell us about your commute</legend> <!-- Route Selection --> <div class="field-group" data-astro-cid-u3xnx4cz> <label for="bus-route" data-astro-cid-u3xnx4cz>
Primary Bus Route
<span class="required" aria-label="required" data-astro-cid-u3xnx4cz>*</span> </label> <div class="input-wrapper" data-astro-cid-u3xnx4cz> <input type="text" id="bus-route" name="busRoute" list="route-suggestions" placeholder="e.g., BxM10, M15, B46" required aria-describedby="route-help" autocomplete="off" data-astro-cid-u3xnx4cz> <datalist id="route-suggestions" data-astro-cid-u3xnx4cz> <option value="BxM10" data-astro-cid-u3xnx4cz>BxM10</option><option value="M15" data-astro-cid-u3xnx4cz>M15</option><option value="B46" data-astro-cid-u3xnx4cz>B46</option><option value="Q44+" data-astro-cid-u3xnx4cz>Q44+</option><option value="M79+" data-astro-cid-u3xnx4cz>M79+</option><option value="B26" data-astro-cid-u3xnx4cz>B26</option><option value="M42" data-astro-cid-u3xnx4cz>M42</option><option value="BX28" data-astro-cid-u3xnx4cz>BX28</option><option value="M101" data-astro-cid-u3xnx4cz>M101</option> </datalist> </div> <small id="route-help" class="help-text" data-astro-cid-u3xnx4cz>
Enter your main bus route (check your MetroCard app)
</small> </div> <!-- Destination --> <div class="field-group" data-astro-cid-u3xnx4cz> <label for="destination" data-astro-cid-u3xnx4cz>
Destination
<span class="required" aria-label="required" data-astro-cid-u3xnx4cz>*</span> </label> <select id="destination" name="destination" required aria-describedby="destination-help" data-astro-cid-u3xnx4cz> <option value="" data-astro-cid-u3xnx4cz>Select your destination</option> <optgroup label="CUNY Campuses" data-astro-cid-u3xnx4cz> <option value="Hunter College" data-astro-cid-u3xnx4cz>Hunter College</option><option value="City College" data-astro-cid-u3xnx4cz>City College</option><option value="Baruch College" data-astro-cid-u3xnx4cz>Baruch College</option><option value="Brooklyn College" data-astro-cid-u3xnx4cz>Brooklyn College</option><option value="Queens College" data-astro-cid-u3xnx4cz>Queens College</option><option value="John Jay College" data-astro-cid-u3xnx4cz>John Jay College</option><option value="Lehman College" data-astro-cid-u3xnx4cz>Lehman College</option><option value="College of Staten Island" data-astro-cid-u3xnx4cz>College of Staten Island</option> </optgroup> <optgroup label="Other Destinations" data-astro-cid-u3xnx4cz> <option value="work" data-astro-cid-u3xnx4cz>Work/Job</option> <option value="other-school" data-astro-cid-u3xnx4cz>Other School</option> <option value="other" data-astro-cid-u3xnx4cz>Other</option> </optgroup> </select> <small id="destination-help" class="help-text" data-astro-cid-u3xnx4cz>
Where do you usually go on this route?
</small> </div> <!-- Commute Times --> <div class="field-group" data-astro-cid-u3xnx4cz> <label data-astro-cid-u3xnx4cz>
Typical Commute Times
<span class="required" aria-label="required" data-astro-cid-u3xnx4cz>*</span> </label> <div class="time-inputs" data-astro-cid-u3xnx4cz> <div class="time-field" data-astro-cid-u3xnx4cz> <label for="departure-time" data-astro-cid-u3xnx4cz>Departure Time</label> <input type="time" id="departure-time" name="departureTime" required aria-describedby="time-help" data-astro-cid-u3xnx4cz> </div> <div class="time-field" data-astro-cid-u3xnx4cz> <label for="days" data-astro-cid-u3xnx4cz>Days per Week</label> <select id="days" name="daysPerWeek" required data-astro-cid-u3xnx4cz> <option value="" data-astro-cid-u3xnx4cz>Select</option> <option value="5" data-astro-cid-u3xnx4cz>Monday-Friday (5 days)</option> <option value="4" data-astro-cid-u3xnx4cz>4 days per week</option> <option value="3" data-astro-cid-u3xnx4cz>3 days per week</option> <option value="2" data-astro-cid-u3xnx4cz>2 days per week</option> <option value="1" data-astro-cid-u3xnx4cz>1 day per week</option> </select> </div> </div> <small id="time-help" class="help-text" data-astro-cid-u3xnx4cz>
When do you usually catch this bus?
</small> </div> <!-- Academic Schedule --> <div class="field-group" data-astro-cid-u3xnx4cz> <label data-astro-cid-u3xnx4cz> <input type="checkbox" id="is-student" name="isStudent" value="true" data-astro-cid-u3xnx4cz>
I use this commute for studying (rolling study hall)
</label> </div> </fieldset> <!-- Submit Button --> <div class="form-actions" data-astro-cid-u3xnx4cz> <button type="submit" class="analyze-button" id="analyze-button" data-astro-cid-u3xnx4cz> <span class="button-text" data-astro-cid-u3xnx4cz>Analyze My Route</span> <span class="button-spinner" aria-hidden="true" data-astro-cid-u3xnx4cz></span> </button> </div> </form> <!-- Results Display --> <div id="analysis-results" class="results-container" hidden data-astro-cid-u3xnx4cz> <div class="results-content" data-astro-cid-u3xnx4cz> <h3 data-astro-cid-u3xnx4cz>Your Commute Impact Analysis</h3> <!-- Key Statistics --> <div class="stats-grid" data-astro-cid-u3xnx4cz> <div class="stat-card" id="violation-exposure" data-astro-cid-u3xnx4cz> <div class="stat-number" data-astro-cid-u3xnx4cz>--</div> <div class="stat-label" data-astro-cid-u3xnx4cz>Violations Per Week</div> <div class="stat-description" data-astro-cid-u3xnx4cz>On your route during your commute time</div> </div> <div class="stat-card" id="time-lost" data-astro-cid-u3xnx4cz> <div class="stat-number" data-astro-cid-u3xnx4cz>--</div> <div class="stat-label" data-astro-cid-u3xnx4cz>Minutes Lost Weekly</div> <div class="stat-description" data-astro-cid-u3xnx4cz>Due to bus lane blockages</div> </div> <div class="stat-card" id="study-impact" hidden data-astro-cid-u3xnx4cz> <div class="stat-number" data-astro-cid-u3xnx4cz>--</div> <div class="stat-label" data-astro-cid-u3xnx4cz>Study Sessions Disrupted</div> <div class="stat-description" data-astro-cid-u3xnx4cz>Your rolling study hall interrupted</div> </div> <div class="stat-card" id="semester-impact" hidden data-astro-cid-u3xnx4cz> <div class="stat-number" data-astro-cid-u3xnx4cz>--</div> <div class="stat-label" data-astro-cid-u3xnx4cz>Hours Lost Per Semester</div> <div class="stat-description" data-astro-cid-u3xnx4cz>Total academic time lost to delays</div> </div> </div> <!-- Personalized Insights --> <div class="insights-section" data-astro-cid-u3xnx4cz> <h4 data-astro-cid-u3xnx4cz>Key Findings for Your Route</h4> <div id="route-insights" class="insights-list" data-astro-cid-u3xnx4cz> <!-- Dynamic insights populated by JavaScript --> </div> </div> <!-- Action Recommendations --> <div class="actions-section" data-astro-cid-u3xnx4cz> <h4 data-astro-cid-u3xnx4cz>Take Action</h4> <div class="action-buttons" data-astro-cid-u3xnx4cz> <button type="button" id="contact-officials" class="action-button primary" data-astro-cid-u3xnx4cz>
📧 Contact MTA Officials
</button> <button type="button" id="share-story" class="action-button secondary" data-astro-cid-u3xnx4cz>
📱 Share Your Story
</button> <button type="button" id="join-campaign" class="action-button secondary" data-astro-cid-u3xnx4cz>
👥 Join ClearLane Campaign
</button> </div> </div> </div> </div> <!-- Error Display --> <div id="analysis-error" class="error-message" hidden role="alert" data-astro-cid-u3xnx4cz> <h3 data-astro-cid-u3xnx4cz>Analysis Unavailable</h3> <p id="error-text" data-astro-cid-u3xnx4cz>Sorry, we couldn't analyze your route right now.</p> <button type="button" id="retry-button" class="retry-button" data-astro-cid-u3xnx4cz>
Try Again
</button> </div> </div> </div> </div> </section> <!-- Solution Preview --> <section class="py-16 bg-primary text-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16"> <h2 class="text-3xl sm:text-4xl font-bold mb-6">
The ClearLane Solution
</h2> <p class="text-xl text-primary-light max-w-3xl mx-auto">
Targeted, data-driven enforcement that solves 80% of the problem with 20% of current resources.
Proven effective, ready to scale.
</p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16"> <div key="Data-Driven Targeting" class="text-center"> <div class="text-5xl mb-6 emoji-container" role="img" aria-label="Data-Driven Targeting icon"> 🎯 </div> <h3 class="text-xl font-semibold mb-4">Data-Driven Targeting</h3> <p class="text-primary-light">Focus enforcement on the 90 hotspots that cause 90% of student disruptions.</p> </div><div key="Student Commute Priority" class="text-center"> <div class="text-5xl mb-6 emoji-container" role="img" aria-label="Student Commute Priority icon"> 📚 </div> <h3 class="text-xl font-semibold mb-4">Student Commute Priority</h3> <p class="text-primary-light">Deploy resources during 7-10 AM weekdays when students need reliable transit most.</p> </div><div key="Measurable Results" class="text-center"> <div class="text-5xl mb-6 emoji-container" role="img" aria-label="Measurable Results icon"> 📊 </div> <h3 class="text-xl font-semibold mb-4">Measurable Results</h3> <p class="text-primary-light">Track success with speed improvements and violation reduction metrics.</p> </div> </div> <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-8 text-center"> <h3 class="text-2xl font-bold mb-4">Expected Impact</h3> <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> <div> <div class="text-3xl font-bold">40%</div> <div class="text-primary-light">Violation Reduction</div> </div> <div> <div class="text-3xl font-bold">12%</div> <div class="text-primary-light">Speed Improvement</div> </div> <div> <div class="text-3xl font-bold">8.7M</div> <div class="text-primary-light">Student Hours Saved</div> </div> </div> <a class="inline-flex items-center justify-center gap-2 font-semibold text-center border border-transparent transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-60 disabled:cursor-not-allowed print:border print:border-gray-400 print:bg-transparent print:text-black border-primary text-primary bg-transparent hover:bg-primary hover:text-white focus:ring-primary px-6 py-3 text-base rounded-lg min-h-[44px] text-white border-white hover:bg-white hover:text-primary" data-interactive href="/solution" data-astro-cid-6ygtcg62><span class="" data-astro-cid-6ygtcg62>
📋 View Complete Solution Framework
</span> </a> </div> </div> </section> <!-- Call to Action Section --> <section class="py-16 bg-secondary text-white print-break-before"> <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> <h2 class="text-3xl sm:text-4xl font-bold mb-6">
Your Commute Matters. Your Voice Matters.
</h2> <p class="text-xl text-secondary-light mb-8 max-w-2xl mx-auto">
Join the movement to protect student study time through data-driven transit enforcement.
Every route analysis strengthens our advocacy.
</p> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="block w-full transition-all duration-200 print:border print:border-gray-300 print:shadow-none bg-white border border-gray-200 rounded-lg p-6 bg-white/10 backdrop-blur-sm border-white/20 text-center p-6" data-astro-cid-dd5txfcy> <div class="text-3xl mb-4 emoji-container" role="img" aria-label="Email icon">✉️</div> <h3 class="font-semibold mb-2">Contact Officials</h3> <p class="text-sm text-secondary-light mb-4">
Pre-written emails with your route data
</p> <a class="inline-flex items-center justify-center gap-2 font-semibold text-center border border-transparent transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-60 disabled:cursor-not-allowed print:border print:border-gray-400 print:bg-transparent print:text-black text-gray-700 bg-transparent hover:bg-gray-100 focus:ring-gray-500 px-3 py-2 text-sm rounded-md min-h-[32px] text-white border-white" data-interactive href="/contact" data-astro-cid-6ygtcg62><span class="" data-astro-cid-6ygtcg62>
Send Message
</span> </a> </div> <div class="block w-full transition-all duration-200 print:border print:border-gray-300 print:shadow-none bg-white border border-gray-200 rounded-lg p-6 bg-white/10 backdrop-blur-sm border-white/20 text-center p-6" data-astro-cid-dd5txfcy> <div class="text-3xl mb-4 emoji-container" role="img" aria-label="Mobile phone icon">📲</div> <h3 class="font-semibold mb-2">Share Your Story</h3> <p class="text-sm text-secondary-light mb-4">
Add your voice to our advocacy
</p> <a class="inline-flex items-center justify-center gap-2 font-semibold text-center border border-transparent transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-60 disabled:cursor-not-allowed print:border print:border-gray-400 print:bg-transparent print:text-black text-gray-700 bg-transparent hover:bg-gray-100 focus:ring-gray-500 px-3 py-2 text-sm rounded-md min-h-[32px] text-white border-white" data-interactive href="/contact#share-story" data-astro-cid-6ygtcg62><span class="" data-astro-cid-6ygtcg62>
Share Story
</span> </a> </div> <div class="block w-full transition-all duration-200 print:border print:border-gray-300 print:shadow-none bg-white border border-gray-200 rounded-lg p-6 bg-white/10 backdrop-blur-sm border-white/20 text-center p-6" data-astro-cid-dd5txfcy> <div class="text-3xl mb-4 emoji-container" role="img" aria-label="People icon">🤝</div> <h3 class="font-semibold mb-2">Join the Campaign</h3> <p class="text-sm text-secondary-light mb-4">
Connect with fellow advocates
</p> <a class="inline-flex items-center justify-center gap-2 font-semibold text-center border border-transparent transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-60 disabled:cursor-not-allowed print:border print:border-gray-400 print:bg-transparent print:text-black text-gray-700 bg-transparent hover:bg-gray-100 focus:ring-gray-500 px-3 py-2 text-sm rounded-md min-h-[32px] text-white border-white" data-interactive href="/about#team" data-astro-cid-6ygtcg62><span class="" data-astro-cid-6ygtcg62>
Get Involved
</span> </a> </div> </div> </div> </section> </main> <footer class="bg-gray-900 text-white py-12 print:bg-white print:text-black print:border-t-2 print:border-black"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> <div class="md:col-span-2"> <div class="flex items-center space-x-3 mb-4"> <div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center"> <svg viewBox="0 0 24 24" class="w-5 h-5 text-white" fill="currentColor"> <path d="M12 2L2 7L12 12L22 7L12 2Z"></path> <path d="M2 17L12 22L22 17"></path> <path d="M2 12L12 17L22 12"></path> </svg> </div> <div> <div class="text-lg font-bold">ClearLane Initiative</div> <div class="text-sm text-gray-400">Student-led transit advocacy</div> </div> </div> <p class="text-gray-400 mb-4">
Using data science to protect the "rolling study halls" that working students depend on for academic success.
</p> <div class="text-sm text-gray-500">
Part of the 2025 MTA Datathon by Team Jujutsu Query
</div> </div> <div> <h3 class="font-semibold mb-4">Research</h3> <ul class="space-y-2 text-sm text-gray-400"> <li><a href="/methodology" class="hover:text-white transition-colors">Methodology</a></li> <li><a href="/findings" class="hover:text-white transition-colors">Key Findings</a></li> <li><a href="/solution" class="hover:text-white transition-colors">Solution Framework</a></li> <li><a href="#route-analyzer" class="hover:text-white transition-colors">Route Analyzer</a></li> </ul> </div> <div> <h3 class="font-semibold mb-4">Take Action</h3> <ul class="space-y-2 text-sm text-gray-400"> <li><a href="/contact" class="hover:text-white transition-colors">Contact Officials</a></li> <li><a href="/about" class="hover:text-white transition-colors">About the Team</a></li> <li><a href="/contact#share-story" class="hover:text-white transition-colors">Share Your Story</a></li> </ul> </div> </div> <div class="border-t border-gray-800 mt-8 pt-8 text-sm text-gray-400 text-center"> <p>© 2025 ClearLane Initiative. Data-driven advocacy for educational equity.</p> </div> </div> </footer> </div> <!-- Global scripts --> </body> </html>