increase z-index of filters to go above card links, fit to width of screen; import Button but remove borders

src/components/directory/DirectoryFilter.vue

@@ -87,9 +87,9 @@ const towns = computed(() => [
 </script>
 
 <template>
-  <div class="w-full space-y-4">
+  <div class="w-full space-y-3">
     <!-- Search Input -->
-    <div class="relative w-full max-w-2xl mx-auto">
+    <div class="relative w-full max-w-xl mx-auto">
       <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
         <Search class="h-5 w-5 text-muted-foreground" />
       </div>
@@ -99,7 +99,7 @@ const towns = computed(() => [
 
     <div class="flex flex-col gap-4">
       <!-- Town Filter -->
-      <div class="flex justify-start md:justify-center gap-2 overflow-x-auto pb-2 px-2 md:px-0
+      <div class="flex justify-start md:justify-center gap-1 overflow-x-auto pb-2 px-2 md:px-0
         [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
         <Button v-for="to in towns" :key="to.id" @click="emit('update:town', to.id)"
           :variant="props.town === to.id ? 'default' : 'secondary'" size="sm" 
@@ -109,7 +109,7 @@ const towns = computed(() => [
       </div>
 
       <!-- Category Filter -->
-      <div class="flex justify-start md:justify-center gap-2 overflow-x-auto pb-2 px-2 md:px-0
+      <div class="flex justify-start md:justify-center gap-1 overflow-x-auto pb-2 px-2 md:px-0
         [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
         <Button v-for="cat in categories" :key="cat.id" @click="emit('update:category', cat.id)"
           :variant="props.category === cat.id ? 'default' : 'secondary'" size="sm"

src/pages/Directory.vue

@@ -61,13 +61,13 @@ const filteredItems = computed(() => {
 
 <template>
   <div class="container mx-auto px-4 py-2 md:py-8">
-    <div class="space-y-4 sm:space-y-8">
+    <div class="space-y-4">
       <!-- Directory Header -->
-      <div class="hidden sm:block text-center space-y-4">
-        <h1 class="text-3xl font-bold tracking-tight sm:text-4xl">
+      <div class="text-center space-y-2 mb-6">
+        <h1 class="text-2xl font-bold tracking-tight sm:text-3xl">
           {{ t('directory.title') }}
         </h1>
-        <p class="text-lg text-muted-foreground">
+        <p class="text-sm sm:text-base text-muted-foreground">
           {{ t('directory.subtitle') }}
         </p>
       </div>
@@ -77,10 +77,11 @@ const filteredItems = computed(() => {
         v-model:category="category"
         v-model:search="search"
         v-model:town="town"
+        class="sticky top-0 z-50 -mx-4 px-4 py-2 bg-background/95 backdrop-blur-sm border-b w-screen left-0"
       />
 
       <!-- Directory Grid -->
-      <DirectoryGrid :items="filteredItems" />
+      <DirectoryGrid :items="filteredItems" class="pt-4" />
     </div>
   </div>
 </template>

src/pages/Home.vue

@@ -8,6 +8,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
+import { Button } from '@/components/ui/button'
 import { computed } from 'vue'
 import {
   UtensilsCrossed,
@@ -63,30 +64,18 @@ const towns = computed(() => [
 
 <template>
   <div class="container mx-auto px-4 py-8">
-    <div class="max-w-4xl mx-auto text-center space-y-8">
+    <div class="max-w-3xl mx-auto text-center space-y-6 sm:space-y-8">
       <h1 class="text-3xl font-bold tracking-tight sm:text-6xl">
         {{ t('home.title') }}
       </h1>
 
-      <p class="text-lg sm:text-xl text-muted-foreground">
+      <p class="text-base sm:text-lg text-muted-foreground max-w-2xl mx-auto">
         {{ t('home.subtitle') }}
       </p>
 
-      <div class="flex flex-col sm:flex-row gap-4 justify-center">
-        <router-link to="/directory"
-          class="inline-flex items-center justify-center rounded-md bg-primary px-6 py-3 text-sm font-medium text-primary-foreground hover:bg-primary/90">
-          {{ t('home.browse') }}
-        </router-link>
-
-        <router-link to="/faq"
-          class="inline-flex items-center justify-center rounded-md border border-input bg-background px-6 py-3 text-sm font-medium hover:bg-accent hover:text-accent-foreground">
-          {{ t('home.learnMore') }}
-        </router-link>
-      </div>
-
-      <!-- Town Selector -->
-      <div class="flex flex-col items-center gap-2 sm:gap-4">
-        <h2 class="text-lg sm:text-xl font-semibold">{{ t('home.selectTown') }}</h2>
+      <!-- Town Selector - Move above category buttons -->
+      <div class="flex flex-col items-center gap-2">
+        <h2 class="text-base font-medium text-muted-foreground">{{ t('home.selectTown') }}</h2>
         <Select :model-value="currentTown" @update:model-value="setCurrentTown">
           <SelectTrigger class="w-[200px]">
             <SelectValue :placeholder="t('home.selectTownPlaceholder')" />
@@ -99,8 +88,8 @@ const towns = computed(() => [
         </Select>
       </div>
 
-      <!-- Category Buttons -->
-      <div class="relative mt-4 sm:mt-8">
+      <!-- Category Buttons - Adjust spacing -->
+      <div class="relative -mx-4 sm:mx-0">
         <!-- Gradient Fade Edges -->
         <div class="absolute left-0 top-0 bottom-0 w-4 bg-gradient-to-r from-background to-transparent z-10"></div>
         <div class="absolute right-0 top-0 bottom-0 w-4 bg-gradient-to-l from-background to-transparent z-10"></div>
@@ -116,9 +105,9 @@ const towns = computed(() => [
             class="group flex-shrink-0 w-[100px] sm:w-[120px]"
           >
             <Button
-              variant="outline"
+              variant="ghost"
               size="default"
-              class="w-full h-20 sm:h-24 flex flex-col items-center justify-center gap-1 sm:gap-2 group-hover:border-primary/50 transition-colors"
+              class="w-full h-20 sm:h-24 flex flex-col items-center justify-center gap-1 sm:gap-2 group-hover:bg-accent transition-colors"
             >
               <component
                 :is="categoryIcons[category]"
@@ -130,6 +119,19 @@ const towns = computed(() => [
           </router-link>
         </div>
       </div>
+
+      <!-- Move action buttons to bottom -->
+      <div class="flex flex-col sm:flex-row gap-2 sm:gap-4 justify-center mt-4">
+        <router-link to="/directory"
+          class="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">
+          {{ t('home.browse') }}
+        </router-link>
+
+        <router-link to="/faq"
+          class="inline-flex items-center justify-center rounded-md border border-input bg-background px-6 py-3 text-sm font-medium hover:bg-accent hover:text-accent-foreground">
+          {{ t('home.learnMore') }}
+        </router-link>
+      </div>
     </div>
   </div>
 </template>