bare repo

src/pages/Home.vue

@@ -1,137 +1,10 @@
+<template>
+
+</template>
+
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-import { useTheme } from '@/components/theme-provider'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
-import { Button } from '@/components/ui/button'
-import { computed } from 'vue'
-import {
-  UtensilsCrossed,
-  Bed,
-  ShoppingBag,
-  Sparkles,
-  Car,
-  Ship,
-  HelpCircle,
-} from 'lucide-vue-next'
-import TukTuk from '@/components/icons/TukTuk.vue'
-import { type DirectoryItem } from '@/types/directory'
 
 const { t } = useI18n()
-const { currentTown, setCurrentTown } = useTheme()
 
-type CategoryType = DirectoryItem['category']
-
-const categories: CategoryType[] = ['tuktuk', 'restaurant', 'services', 'goods', 'lodging', 'taxi', 'lancha']
-
-const categoryIcons = {
-  restaurant: UtensilsCrossed,
-  lodging: Bed,
-  goods: ShoppingBag,
-  services: Sparkles,
-  tuktuk: TukTuk,
-  taxi: Car,
-  lancha: Ship,
-  other: HelpCircle,
-} as const
-
-const categoryColors = {
-  tuktuk: 'text-amber-500',
-  restaurant: 'text-orange-500',
-  lodging: 'text-purple-500',
-  goods: 'text-green-500',
-  services: 'text-pink-500',
-  taxi: 'text-yellow-500',
-  lancha: 'text-blue-500',
-  other: 'text-gray-500',
-} as const
-
-const towns = computed(() => [
-  { id: 'all', label: t('directory.towns.all') },
-  { id: 'San Marcos', label: 'San Marcos' },
-  { id: 'San Pedro', label: 'San Pedro' },
-  { id: 'Tzununa', label: 'Tzununa' },
-  { id: 'Jaibalito', label: 'Jaibalito' },
-  { id: 'San Pablo', label: 'San Pablo' },
-  { id: 'Panajachel', label: 'Panajachel' },
-])
 </script>
-
-<template>
-  <div class="container mx-auto px-4 py-8 sm:py-12">
-    <div class="max-w-3xl mx-auto text-center space-y-8 sm:space-y-12">
-      <!-- Hero Section -->
-      <div class="space-y-4">
-        <h1 class="text-4xl font-bold tracking-tight sm:text-6xl text-foreground animate-in fade-in slide-in-from-bottom-4 duration-1000 fill-mode-both">
-          {{ t('home.title') }}
-        </h1>
-
-        <p class="text-base sm:text-lg text-muted-foreground max-w-2xl mx-auto animate-in fade-in slide-in-from-bottom-4 duration-1000 delay-150 fill-mode-both">
-          {{ t('home.subtitle') }}
-        </p>
-      </div>
-
-      <!-- Town Selector -->
-      <div class="flex flex-col items-center gap-3 animate-in fade-in slide-in-from-bottom-4 duration-1000 delay-300 fill-mode-both">
-        <h2 class="text-base font-medium text-muted-foreground">{{ t('home.selectTown') }}</h2>
-        <Select :model-value="currentTown" @update:model-value="setCurrentTown">
-          <SelectTrigger class="w-[240px] h-11">
-            <SelectValue :placeholder="t('home.selectTownPlaceholder')" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem v-for="town in towns" :key="town.id" :value="town.id">
-              {{ town.label }}
-            </SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-
-      <!-- Category Buttons -->
-      <div class="relative mx-auto max-w-2xl pt-4 animate-in fade-in slide-in-from-bottom-4 duration-1000 delay-500 fill-mode-both">
-        <!-- Gradient Fade Edges -->
-        <div class="absolute left-0 top-0 bottom-0 w-4 bg-gradient-to-r from-background to-transparent z-10 sm:hidden"></div>
-        <div class="absolute right-0 top-0 bottom-0 w-4 bg-gradient-to-l from-background to-transparent z-10 sm:hidden"></div>
-
-        <!-- Scrollable Container -->
-        <div class="flex overflow-x-auto gap-2 px-4 pb-4 
-          [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]
-          sm:flex-wrap sm:justify-center sm:gap-4 sm:px-0">
-          <router-link v-for="category in categories" :key="category"
-            :to="`/directory?category=${category}&town=${currentTown}`"
-            class="flex-shrink-0 w-[100px] sm:w-[110px]">
-            <Button variant="ghost" size="default"
-              class="w-full h-20 sm:h-24 flex flex-col items-center justify-center gap-1.5 sm:gap-2.5 
-              hover:bg-accent hover:scale-105 active:scale-100 transition-all duration-200 group">
-              <component :is="categoryIcons[category]" 
-                class="h-6 w-6 sm:h-7 sm:w-7 transition-transform duration-200 group-hover:scale-110"
-                :class="categoryColors[category]" />
-              <span class="text-xs sm:text-sm font-medium text-muted-foreground group-hover:text-foreground transition-colors">
-                {{ t(`directory.categories.${category}`) }}
-              </span>
-            </Button>
-          </router-link>
-        </div>
-      </div>
-
-      <!-- Action Buttons -->
-      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center pt-4 animate-in fade-in slide-in-from-bottom-4 duration-1000 delay-700 fill-mode-both">
-        <router-link to="/directory" class="sm:w-[160px]">
-          <Button variant="default" size="lg" class="w-full font-medium">
-            {{ t('home.browse') }}
-          </Button>
-        </router-link>
-
-        <router-link to="/faq" class="sm:w-[160px]">
-          <Button variant="outline" size="lg" class="w-full font-medium">
-            {{ t('home.learnMore') }}
-          </Button>
-        </router-link>
-      </div>
-    </div>
-  </div>
-</template>