added listings

src/routes/(app)/+page.svelte

@@ -3,6 +3,45 @@
     import { newEnglandStates, mapViewBox } from '$lib/states';
     import { goto } from '$app/navigation';
     import { browser } from '$app/environment'; // To ensure SVG interactions only run client-side
+    import { onMount } from 'svelte';
+    import {
+        Scissors,
+        Snowflake,
+        Hammer,
+        Wrench,
+        Zap,
+        Bug,
+        Home,
+        Sparkles,
+        Eye,
+        Trash2,
+        Palette,
+        TreePine,
+        Fence,
+        Waves,
+        Camera,
+        Lock,
+        Refrigerator,
+        DoorOpen,
+        Eye as InspectionIcon,
+        GlassWater,
+        Shield,
+        Flame,
+        Square,
+        Grid,
+        Fan,
+        Clock,
+        Construction,
+        ExternalLink
+    } from 'lucide-svelte';
+
+    interface ServiceCategory {
+        id: number;
+        name: string;
+        description: string;
+        clicks_total: number;
+        total_companies: number;
+    }
 
     let hoveredState: string | null = null;
 
@@ -23,8 +62,9 @@
     }
 </script>
 
-<div class="text-center mb-8">
 
+
+<div class="text-center mb-8">
     <p class="text-lg">Click your state to find prices.</p>
 </div>
 
@@ -67,7 +107,10 @@
     <ul class="flex flex-wrap justify-center gap-4">
         {#each newEnglandStates as state}
             <li>
-                <a href="/{state.id}" class="btn btn-outline btn-secondary">{state.name}</a>
+                <a href="/{state.id}" class="text-blue-600 hover:text-blue-800 underline flex items-center gap-1">
+                    <span>{state.name}</span>
+                    <ExternalLink size={12} />
+                </a>
             </li>
         {/each}
     </ul>