cleanup

webapp/src/views/Groups.vue

@@ -15,7 +15,7 @@
         </v-col>
       </v-row>
       <v-row>
-        <v-col cols="12" md="6" class="mx-auto">
+        <v-col cols="12" sm="8" lg="6" class="mx-auto">
           <div v-if="chapters.length">
             <div v-for="(state, idx) in statesWithChapters" :key="state" class="mb-8">
               <h3 class="font-weight-bold text-h6 mb-0">{{ abbrevToState[state] }}</h3>
@@ -54,7 +54,7 @@
 
             <div class="text-center">
               <p>Don't see a group near you?</p>
-              <v-btn color="primary" variant="text" to="/contact">
+              <v-btn color="primary" variant="outlined" to="/contact">
                 <v-icon start>mdi-plus</v-icon>Submit a Group
               </v-btn>
             </div>

webapp/src/views/Map.vue

@@ -38,7 +38,9 @@
 
       <!-- CURRENT LOCATION -->
       <template v-slot:bottomright>
-        <v-fab icon="mdi-crosshairs-gps" @click="goToUserLocation" />
+        <v-btn icon @click="goToUserLocation">
+          <v-icon>mdi-crosshairs-gps</v-icon>
+        </v-btn>
       </template>
     </leaflet-map>
     <div v-else class="loader">

webapp/src/views/ReportChoose.vue

@@ -1,9 +1,6 @@
 <template>
 <DefaultLayout>
   <v-container>
-    <!-- ALPR Verification Dialog -->
-    <ALPRVerificationDialog />
-    
     <v-row justify="center" class="mb-4">
       <v-col cols="12" md="8">
         <h2 class="text-center text-h4 font-weight-bold">Choose Your Reporting Method</h2>
@@ -110,19 +107,9 @@
 
 <script setup lang="ts">
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
-import ALPRVerificationDialog from '@/components/ALPRVerificationDialog.vue';
 </script>
 
 <style scoped>
-.verification-alert {
-  border-left-width: 6px !important;
-}
-
-.verification-alert .v-alert-title {
-  font-weight: 600;
-  font-size: 1.1rem;
-}
-
 /* App card disabled styling */
 .app-card-container {
   position: relative;

webapp/src/views/WhatToDo.vue

@@ -0,0 +1,98 @@
+<template>
+<DefaultLayout>
+  <template #header>
+    <Hero
+      title="Get Involved"
+      description="Steps you can take to make a difference"
+    />
+  </template>
+
+  <v-container>
+    <h3 class="text-center">For Your Community</h3>
+    <v-divider class="mb-4" />
+    <v-row>
+      <v-col cols="12" md="6" v-for="{ title, description, icon, to, href } in localActions" :key="title">
+        <ActionCard :title :description :icon :to :href />
+      </v-col>
+    </v-row>
+
+    <h3 class="text-center mb-5 mt-10">For the DeFlock Project</h3>
+    <v-divider class="mb-4" />
+    <v-row>
+      <v-col cols="12" md="6" v-for="{ title, description, icon, to, href } in deflockActions" :key="title">
+        <ActionCard :title :description :icon :to :href />
+      </v-col>
+    </v-row>
+
+  </v-container>
+</DefaultLayout>
+  
+</template>
+
+<script setup lang="ts">
+import DefaultLayout from '@/layouts/DefaultLayout.vue';
+import Hero from '@/components/layout/Hero.vue';
+import ActionCard from '@/components/get-involved/ActionCard.vue';
+
+interface Action {
+  title: string;
+  description: string;
+  icon: string;
+  to?: string;
+  href?: string;
+}
+
+const localActions: Action[] = [
+  {
+    title: 'Join a Local Group',
+    description: 'Connect with local advocacy groups working to regulate LPR use in your community.',
+    icon: 'mdi-account-group',
+    to: '/groups'
+  },
+  {
+    title: 'Contact Your Representatives',
+    description: 'Reaching out to your local council members is surprisingly effective in influencing policy decisions.',
+    icon: 'mdi-phone',
+    to: '/council'
+  },
+  {
+    title: 'Submit Cameras',
+    description: 'Help us build a comprehensive map of LPR deployments by reporting cameras in your area.',
+    icon: 'mdi-map-marker-plus',
+    to: '/report'
+  },
+  {
+    title: 'Join our Discord',
+    description: 'Connect with other volunteers, share ideas, and stay updated on DeFlock\'s progress.',
+    icon: 'mdi-chat',
+    href: 'https://discord.gg/aV7v4R3sKT'
+  },
+  {
+    title: 'Hang Signs',
+    description: 'Use our printable signs to inform your community about LPR surveillance and your rights.',
+    icon: 'mdi-sign-text',
+    to: '/store'
+  },
+  {
+    title: 'Request Public Records',
+    description: 'File public records requests to obtain information about LPR deployments in your area.',
+    icon: 'mdi-file-document',
+    to: '/foia'
+  },
+]
+
+const deflockActions: Action[] = [
+  {
+    title: 'Become a GitHub Contributor',
+    description: 'Contribute to our open-source projects by reporting bugs, fixing issues, and adding new features.',
+    icon: 'mdi-github',
+    href: 'https://github.com/foggedlens/deflock'
+  },
+  {
+    title: 'Donate to DeFlock',
+    description: `Don't have the time to volunteer? You can still support DeFlock's mission with a financial contribution.`,
+    icon: 'mdi-cash-multiple',
+    to: '/donate'
+  },
+]
+</script>