Add Wardriving Section (#25)

* remove dangers page, fix counter

* fix bad instrucitons

* cleanup

* allow nonstandard direction tag, link to OSM

* update privacy policy to account for intro message

* add footer to Report, add Wardriving section

* upgrade version, update wardriving copy

webapp/src/components/DFMapPopup.vue

@@ -45,7 +45,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, computed } from 'vue';
+import { computed } from 'vue';
 import type { PropType } from 'vue';
 import type { ALPR } from '@/types';
 import { VIcon, VList, VSheet, VListItem, VBtn } from 'vuetify/components';

webapp/src/components/layout/Footer.vue

@@ -57,7 +57,7 @@
         <div>
           <p>&copy; {{ currentYear }} DeFlock. All Rights Reserved</p>
           <p>Map data © <a href="https://www.openstreetmap.org/copyright" target="_blank" style="color: unset; font-weight: normal;">OpenStreetMap contributors</a></p>
-          <p class="mt-4">v1.0.1</p>
+          <p class="mt-4">v1.0.2</p>
         </div>
         </v-col>
       </v-row>

webapp/src/components/layout/Hero.vue

@@ -0,0 +1,48 @@
+<template>
+  <v-container fluid>
+    <v-row justify="center" class="hero text-center mb-4" :style="`background: url('${imageUrl}') no-repeat center center / cover;`">
+      <v-col cols="12" md="8">
+      <h1 class="mb-4">{{ title }}</h1>
+      <p class="mb-4">
+        {{ description }}
+      </p>
+      <v-btn v-if="buttonText" :href="buttonHref" :to="buttonTo" :target="buttonHref ? '_blank' : '_self'" color="rgb(18, 151, 195)" class="mt-4">{{ buttonText }}</v-btn>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  title: String,
+  description: String,
+  imageUrl: String,
+  buttonText: String,
+  buttonTo: String,
+  buttonHref: String,
+});
+</script>
+
+<style scoped>
+.hero {
+  color: white;
+  padding: 100px 0 !important;
+  position: relative;
+  }
+
+ .hero::before {
+   content: '';
+   position: absolute;
+   top: 0;
+   left: 0;
+   width: 100%;
+   height: 100%;
+   background: rgba(0, 0, 0, 0.6);
+   z-index: 1;
+ }
+
+ .hero > * {
+   position: relative;
+   z-index: 2;
+}
+</style>