improve UI
This commit is contained in:
parent
b32c609a3b
commit
f3eb1622eb
9 changed files with 320 additions and 231 deletions
|
|
@ -63,21 +63,24 @@ const towns = computed(() => [
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container mx-auto px-4 py-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>
|
||||
<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">
|
||||
{{ t('home.subtitle') }}
|
||||
</p>
|
||||
<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 - Move above category buttons -->
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
<!-- 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-[200px]">
|
||||
<SelectTrigger class="w-[240px] h-11">
|
||||
<SelectValue :placeholder="t('home.selectTownPlaceholder')" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
|
|
@ -88,48 +91,45 @@ const towns = computed(() => [
|
|||
</Select>
|
||||
</div>
|
||||
|
||||
<!-- Category Buttons - Adjust spacing -->
|
||||
<div class="relative -mx-4 sm:mx-0">
|
||||
<!-- 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"></div>
|
||||
<div class="absolute right-0 top-0 bottom-0 w-4 bg-gradient-to-l from-background to-transparent z-10"></div>
|
||||
|
||||
<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-1 px-4 pb-4
|
||||
<div class="flex overflow-x-auto gap-2 px-4 pb-4
|
||||
[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]
|
||||
sm:justify-center">
|
||||
<router-link
|
||||
v-for="category in categories"
|
||||
:key="category"
|
||||
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="group flex-shrink-0 w-[100px] sm:w-[120px]"
|
||||
>
|
||||
<Button
|
||||
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:bg-accent transition-colors"
|
||||
>
|
||||
<component
|
||||
:is="categoryIcons[category]"
|
||||
class="h-6 w-6 sm:h-7 sm:w-7"
|
||||
:class="categoryColors[category]"
|
||||
/>
|
||||
<span class="text-xs sm:text-sm">{{ t(`directory.categories.${category}`) }}</span>
|
||||
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>
|
||||
|
||||
<!-- 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') }}
|
||||
<!-- 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="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 to="/faq" class="sm:w-[160px]">
|
||||
<Button variant="outline" size="lg" class="w-full font-medium">
|
||||
{{ t('home.learnMore') }}
|
||||
</Button>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue