improved counter, show wins

webapp/src/components/ALPRCounter.vue

@@ -1,7 +1,21 @@
 <template>
-  <div class="counter">
-    <span :class="{ mobile: isMobile }" ref="counterEl" class="font-weight-bold">0</span>
-    <span class="caption">&nbsp;LPRs mapped in the USA</span>
+  <div class="dashboard-bg rounded-xl pa-6 pa-sm-4 mx-4 mx-sm-2 text-white">
+    <v-row class="ma-0">
+      <v-col cols="12" sm="6" class="pa-3 pa-sm-2">
+        <div class="d-flex flex-column align-center text-center">
+          <v-icon :size="isMobile ? 24 : 32" color="white" class="mb-2">mdi-camera-outline</v-icon>
+          <div ref="counterEl" class="font-weight-bold mb-2" :class="isMobile ? 'text-h3' : 'text-h2'">0</div>
+          <div class="text-body-1">LPRs mapped in the USA</div>
+        </div>
+      </v-col>
+      <v-col cols="12" sm="6" class="pa-3 pa-sm-2">
+        <div class="d-flex flex-column align-center text-center">
+          <v-icon :size="isMobile ? 24 : 32" color="white" class="mb-2">mdi-trophy-outline</v-icon>
+          <div ref="winsCounterEl" class="font-weight-bold mb-2" :class="isMobile ? 'text-h3' : 'text-h2'">0</div>
+          <div class="text-body-1">Cities Rejecting LPRs</div>
+        </div>
+      </v-col>
+    </v-row>
   </div>
 </template>
 
@@ -19,6 +33,7 @@ const props = defineProps({
 });
 
 const counterEl: Ref<HTMLElement|null> = ref(null);
+const winsCounterEl: Ref<HTMLElement|null> = ref(null);
 const countupOptions = {
   useEasing: true,
   useGrouping: true,
@@ -28,13 +43,14 @@ const countupOptions = {
   suffix: '',
 };
 let counter: CountUp|undefined = undefined;
+let winsCounter: CountUp|undefined = undefined;
 interface Counts {
   us?: number;
-  worldwide?: number;
+  wins: number;
 }
 const counts: Ref<Counts> = ref({
   us: undefined,
-  worldwide: undefined,
+  wins: 0,
 });
 const showFinalAnimation = ref(false);
 const { xs: isMobile } = useDisplay();
@@ -50,23 +66,26 @@ onMounted(() => {
 });
 
 function countUp(newCounts: Counts) {
-  if (!newCounts.worldwide) return;
-  if (!counterEl.value) {
-    console.error('Counter element not found');
+  if (!newCounts.us) return;
+  if (!counterEl.value || !winsCounterEl.value) {
+    console.error('Counter elements not found');
     return;
   };
 
-  if (!counter) {
-    counter = new CountUp(counterEl.value, newCounts.worldwide, countupOptions);
+  if (!counter && !winsCounter) {
+    counter = new CountUp(counterEl.value, newCounts.us, countupOptions);
+    winsCounter = new CountUp(winsCounterEl.value, newCounts.wins, countupOptions);
 
     if (timeOfMount) {
       const timeSinceMount = new Date().getTime() - timeOfMount;
       if (timeSinceMount < props.delayMs) {
         setTimeout(() => {
           counter?.start();
+          winsCounter?.start();
         }, props.delayMs - timeSinceMount);
       } else {
         counter.start();
+        winsCounter.start();
       }
     }
 
@@ -78,12 +97,7 @@ function countUp(newCounts: Counts) {
 </script>
 
 <style scoped>
-.counter {
-  font-size: 1.5rem;
-}
-
-.mobile {
-  display: block;
-  font-size: 1.2em;
+.dashboard-bg {
+  background: rgba(0, 0, 0, 0.6);
 }
 </style>

webapp/src/views/Landing.vue

@@ -1,28 +1,30 @@
 <template>
 <DefaultLayout no-bottom-margin>
   <template #header>
-    <v-container fluid class="hero-section">
-      <v-row justify="center">
-        <v-col cols="12" md="8" class="text-center">
-          <h1 class="display-1 px-8">Welcome to DeFlock</h1>
-          <h2 class="bigger px-8">
-            An open-source project mapping license plate readers.
-          </h2>
-          
-          <ALPRCounter class="my-6" />
-  
-          <v-btn size="large" color="rgb(18, 151, 195)" large @click="goToMap({ withCurrentLocation: true })">
-            Explore the Map
-            <v-icon end>mdi-map</v-icon>
-          </v-btn>
-        </v-col>
-      </v-row>
-    </v-container>
+    <div class="hero-background">
+      <v-container class="text-center py-8">
+        <v-row justify="center">
+          <v-col cols="12" md="8">
+            <h1 class="display-1 px-4 mb-4">Welcome to DeFlock</h1>
+            <h2 class="text-h5 px-4 mb-6">
+              An open-source project mapping license plate readers.
+            </h2>
+            
+            <ALPRCounter class="my-6" />
+    
+            <v-btn size="large" color="rgb(18, 151, 195)" large @click="goToMap({ withCurrentLocation: true })">
+              Explore the Map
+              <v-icon end>mdi-map</v-icon>
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-container>
+    </div>
   </template>
   
   <!-- Dangers Section -->
-  <v-container class="pb-10 text-center info-section">
-    <h2 class="mb-4">What are ALPRs</h2>
+  <v-container class="pb-10 text-center">
+    <h2 class="mb-6">What are ALPRs</h2>
     
     <p class="text-left px-6">
       Automated License Plate Readers (ALPRs or LPRs) are AI-powered cameras that capture and analyze images of <b>all passing vehicles</b>, storing details like your car's <b>location, date, and time</b>. They also capture your car's <b>make, model, color</b>, and <b>identifying features</b> such as dents, roof racks, and bumper stickers, often turning these into <b>searchable data points</b>.
@@ -122,29 +124,10 @@
 </template>
 
 <style>
-.hero-section {
-  background: url('/hero.webp') no-repeat center center;
-  background-size: cover;
-  color: white;
-  padding: 60px 0 50px 0 !important;
-  background-position: right center;
-  position: relative;
-}
-
-.hero-section::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.45);
-  z-index: 1;
-}
-
-.hero-section > * {
-  position: relative;
-  z-index: 2;
+.featured-image-container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 0 16px;
 }
 
 .map-section {
@@ -170,6 +153,34 @@
   z-index: 2;
 }
 
+.hero-background {
+  background: url('/hero.webp') no-repeat right center / cover;
+  position: relative;
+  min-height: 400px;
+  color: white;
+}
+
+.hero-background::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1;
+}
+
+.hero-background > * {
+  position: relative;
+  z-index: 2;
+}
+
+.hero-background h1,
+.hero-background h2 {
+  color: white;
+}
+
 .bigger {
   font-size: 1.1rem;
 }