@@ -72,18 +72,50 @@ function removeCategory(categoryId: string) {
7272 />
7373 </div >
7474
75+ <!-- Language Selector -->
76+ <DevOnly >
77+ <div right-16 top-16 fixed z-50 >
78+ <SelectRoot v-model =" $i18n.locale" >
79+ <SelectTrigger
80+ outline =" ~ 1.5 neutral-300"
81+ flex =" ~ items-center gap-8" shadow-sm font-medium py-8 rounded-8 bg-white cursor-pointer text-f-sm f-px-md
82+ >
83+ <SelectValue placeholder =" Language" />
84+ <Icon name =" i-tabler:chevron-down" />
85+ </SelectTrigger >
86+ <SelectContent
87+ position =" popper" outline =" ~ 1.5 neutral-200"
88+ rounded-8 bg-white max-h-256 shadow z-50 of-auto
89+ >
90+ <SelectViewport f-p-xs >
91+ <SelectItem
92+ v-for =" locale in $i18n.locales.value"
93+ :key =" locale.code"
94+ :value =" locale.code"
95+ flex =" ~ items-center gap-8" text =" f-sm neutral-800 data-[highlighted]:neutral-900"
96+ bg =" data-[highlighted]:neutral-50" py-10 outline-none rounded-6 cursor-pointer
97+ transition-colors f-px-md
98+ >
99+ {{ locale.name }}
100+ </SelectItem >
101+ </SelectViewport >
102+ </SelectContent >
103+ </SelectRoot >
104+ </div >
105+ </DevOnly >
106+
75107 <div mx-auto max-w-640 relative z-1 f-px-md >
76108 <div f-mb-2xl >
77109 <h1 text =" neutral-900 f-2xl" font-bold f-mb-xs >
78- Spend your crypto in Lugano
110+ {{ $t('hero.title') }}
79111 </h1 >
80112 <p text =" neutral-600 f-md" f-mb-lg >
81- Discover places that accept cryptocurrency payments
113+ {{ $t('hero.subtitle') }}
82114 </p >
83115
84116 <ComboboxRoot v-model =" selectedCategories" multiple >
85117 <ComboboxAnchor w-full >
86- <ComboboxInput v-model =" searchQuery" placeholder =" Search locations or add category filters... " nq-input-box :display-value =" () => searchQuery" @focus =" refreshCategories" />
118+ <ComboboxInput v-model =" searchQuery" : placeholder =" $t('search.placeholder') " nq-input-box :display-value =" () => searchQuery" @focus =" refreshCategories" />
87119 </ComboboxAnchor >
88120
89121 <ComboboxContent position =" popper" bg =" white" outline =" ~ 1.5 neutral-200" rounded-t-8 max-h-256 w-full shadow z-50 of-auto >
@@ -93,7 +125,7 @@ function removeCategory(categoryId: string) {
93125 {{ category.name }}
94126 </ComboboxItem >
95127 <ComboboxEmpty v-if =" !categories?.length" f-p-md text =" f-sm neutral-500 center" >
96- No categories found
128+ {{ $t('search.noCategoriesFound') }}
97129 </ComboboxEmpty >
98130 </ComboboxViewport >
99131 </ComboboxContent >
@@ -123,7 +155,7 @@ function removeCategory(categoryId: string) {
123155 text =" 14 neutral-800 hocus:neutral"
124156 font-medium py-4 rounded-full cursor-pointer transition-colors f-px-2xs
125157 >
126- Open now
158+ {{ $t('filters.openNow') }}
127159 </ToggleGroupItem >
128160 <ToggleGroupItem
129161 value =" walkable"
@@ -132,7 +164,7 @@ function removeCategory(categoryId: string) {
132164 text =" 14 neutral-800 hocus:neutral"
133165 font-medium py-4 rounded-full cursor-pointer transition-colors f-px-2xs
134166 >
135- Walkable distance
167+ {{ $t('filters.walkableDistance') }}
136168 </ToggleGroupItem >
137169 </ToggleGroupRoot >
138170 </div >
@@ -216,7 +248,7 @@ function removeCategory(categoryId: string) {
216248 :to =" location.website"
217249 target =" _blank" external w-fit f-mt-sm nq-arrow nq-pill-blue
218250 >
219- Visit Website
251+ {{ $t('location.visitWebsite') }}
220252 </NuxtLink >
221253 </div >
222254 </div >
@@ -230,10 +262,10 @@ function removeCategory(categoryId: string) {
230262 shadow-md text-center rounded-12 f-py-2xl f-mt-xl
231263 >
232264 <p text =" neutral-500" font-medium f-text-lg >
233- No locations found
265+ {{ $t('empty.title') }}
234266 </p >
235267 <p text =" neutral-400 f-sm" f-mt-xs >
236- Try adjusting your search or filters
268+ {{ $t('empty.subtitle') }}
237269 </p >
238270 </div >
239271 </div >
0 commit comments