Compare commits
No commits in common. "35bec04fd22ec6518dbfcaa9e2042443ae0e801a" and "4fcbc22d1c55c523c2d57a38182b487b0c251618" have entirely different histories.
35bec04fd2
...
4fcbc22d1c
45 changed files with 304 additions and 910 deletions
|
|
@ -14,7 +14,6 @@
|
|||
"dependencies": {
|
||||
"@lucide/vue": "^1.16.0",
|
||||
"@vee-validate/zod": "^4.15.1",
|
||||
"@vueuse/core": "^14.3.0",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"pinia": "^3.0.4",
|
||||
|
|
|
|||
3
pnpm-lock.yaml
generated
3
pnpm-lock.yaml
generated
|
|
@ -14,9 +14,6 @@ importers:
|
|||
'@vee-validate/zod':
|
||||
specifier: ^4.15.1
|
||||
version: 4.15.1(vue@3.5.34(typescript@6.0.3))(zod@3.25.76)
|
||||
'@vueuse/core':
|
||||
specifier: ^14.3.0
|
||||
version: 14.3.0(vue@3.5.34(typescript@6.0.3))
|
||||
class-variance-authority:
|
||||
specifier: ^0.7.1
|
||||
version: 0.7.1
|
||||
|
|
|
|||
|
|
@ -1,30 +1,15 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { RouterLink, useRoute } from 'vue-router'
|
||||
import { cn } from '@/lib/utils'
|
||||
import cosmicStag from '@/assets/cosmic-stag.avif'
|
||||
import {
|
||||
NavigationMenu,
|
||||
NavigationMenuContent,
|
||||
NavigationMenuItem,
|
||||
NavigationMenuLink,
|
||||
NavigationMenuList,
|
||||
NavigationMenuTrigger,
|
||||
navigationMenuTriggerStyle,
|
||||
} from '@/components/ui/navigation-menu'
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
SheetTrigger,
|
||||
} from '@/components/ui/sheet'
|
||||
|
||||
const { t, locale } = useI18n()
|
||||
const route = useRoute()
|
||||
|
||||
const openGroup = ref<string | null>(null)
|
||||
const mobileOpen = ref(false)
|
||||
const headerEl = ref<HTMLElement | null>(null)
|
||||
|
||||
interface NavItem {
|
||||
to: string
|
||||
|
|
@ -72,7 +57,12 @@ const groups = computed<NavGroup[]>(() => [
|
|||
},
|
||||
])
|
||||
|
||||
function closeMobile() {
|
||||
function toggle(id: string) {
|
||||
openGroup.value = openGroup.value === id ? null : id
|
||||
}
|
||||
|
||||
function closeAll() {
|
||||
openGroup.value = null
|
||||
mobileOpen.value = false
|
||||
}
|
||||
|
||||
|
|
@ -80,16 +70,35 @@ function toggleLocale() {
|
|||
locale.value = locale.value === 'fr' ? 'en' : 'fr'
|
||||
}
|
||||
|
||||
watch(() => route.path, closeMobile)
|
||||
function onClickOutside(e: MouseEvent) {
|
||||
if (!headerEl.value) return
|
||||
if (!headerEl.value.contains(e.target as Node)) openGroup.value = null
|
||||
}
|
||||
|
||||
function onKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape') closeAll()
|
||||
}
|
||||
|
||||
watch(() => route.path, closeAll)
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('click', onClickOutside)
|
||||
document.addEventListener('keydown', onKeydown)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('click', onClickOutside)
|
||||
document.removeEventListener('keydown', onKeydown)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header
|
||||
ref="headerEl"
|
||||
class="sticky top-0 z-40 border-b border-white/10 bg-background/65 backdrop-blur-xl backdrop-saturate-150"
|
||||
>
|
||||
<div class="mx-auto max-w-7xl px-4 lg:px-6">
|
||||
<div class="flex h-16 items-center justify-between gap-4">
|
||||
<RouterLink to="/" class="flex items-center gap-3" @click="closeMobile">
|
||||
<RouterLink to="/" class="flex items-center gap-3" @click="closeAll">
|
||||
<img :src="cosmicStag" alt="" class="h-9 w-9 shrink-0" />
|
||||
<span class="leading-tight">
|
||||
<span class="block font-serif text-base tracking-tight text-foreground">
|
||||
|
|
@ -101,47 +110,38 @@ watch(() => route.path, closeMobile)
|
|||
</span>
|
||||
</RouterLink>
|
||||
|
||||
<div class="hidden items-center gap-1 lg:flex">
|
||||
<NavigationMenu>
|
||||
<NavigationMenuList>
|
||||
<NavigationMenuItem v-for="g in groups" :key="g.id">
|
||||
<NavigationMenuTrigger
|
||||
class="bg-transparent font-light hover:bg-muted hover:text-primary focus:bg-muted focus:text-primary data-[state=open]:bg-muted data-[state=open]:text-primary"
|
||||
<nav class="hidden items-center gap-1 lg:flex">
|
||||
<div v-for="g in groups" :key="g.id" class="relative">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md px-3 py-2 text-sm hover:bg-muted hover:text-primary"
|
||||
:aria-expanded="openGroup === g.id"
|
||||
@click.stop="toggle(g.id)"
|
||||
>
|
||||
{{ g.label }}
|
||||
<span class="ml-1 inline-block text-xs">▾</span>
|
||||
</button>
|
||||
<ul
|
||||
v-show="openGroup === g.id"
|
||||
class="absolute right-0 top-full z-50 mt-1 min-w-52 rounded-md border border-border bg-popover py-1 shadow-md"
|
||||
>
|
||||
<li v-for="i in g.items" :key="i.to">
|
||||
<RouterLink
|
||||
:to="i.to"
|
||||
class="block px-4 py-2 text-sm hover:bg-muted"
|
||||
@click="closeAll"
|
||||
>
|
||||
{{ g.label }}
|
||||
</NavigationMenuTrigger>
|
||||
<NavigationMenuContent>
|
||||
<ul class="min-w-52 p-1">
|
||||
<li v-for="i in g.items" :key="i.to">
|
||||
<NavigationMenuLink as-child>
|
||||
<RouterLink
|
||||
:to="i.to"
|
||||
class="block rounded-sm px-4 py-2 text-sm hover:bg-muted hover:text-primary"
|
||||
>
|
||||
{{ i.label }}
|
||||
</RouterLink>
|
||||
</NavigationMenuLink>
|
||||
</li>
|
||||
</ul>
|
||||
</NavigationMenuContent>
|
||||
</NavigationMenuItem>
|
||||
<NavigationMenuItem>
|
||||
<NavigationMenuLink as-child>
|
||||
<RouterLink
|
||||
to="/marketplace"
|
||||
:class="
|
||||
cn(
|
||||
navigationMenuTriggerStyle(),
|
||||
'bg-transparent font-light hover:bg-muted hover:text-primary focus:bg-muted focus:text-primary',
|
||||
)
|
||||
"
|
||||
>
|
||||
{{ t('nav.marketplace') }}
|
||||
</RouterLink>
|
||||
</NavigationMenuLink>
|
||||
</NavigationMenuItem>
|
||||
</NavigationMenuList>
|
||||
</NavigationMenu>
|
||||
{{ i.label }}
|
||||
</RouterLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<RouterLink
|
||||
to="/marketplace"
|
||||
class="rounded-md px-3 py-2 text-sm hover:bg-muted hover:text-primary"
|
||||
>
|
||||
{{ t('nav.marketplace') }}
|
||||
</RouterLink>
|
||||
<button
|
||||
type="button"
|
||||
class="ml-2 rounded-md border border-border px-2 py-1 text-xs uppercase tracking-wider text-muted-foreground hover:bg-muted"
|
||||
|
|
@ -149,58 +149,47 @@ watch(() => route.path, closeMobile)
|
|||
>
|
||||
{{ locale === 'fr' ? 'EN' : 'FR' }}
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<Sheet v-model:open="mobileOpen">
|
||||
<SheetTrigger as-child>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md p-2 lg:hidden"
|
||||
:aria-label="t('nav.menu')"
|
||||
>
|
||||
<span class="mb-1.5 block h-0.5 w-6 bg-foreground"></span>
|
||||
<span class="mb-1.5 block h-0.5 w-6 bg-foreground"></span>
|
||||
<span class="block h-0.5 w-6 bg-foreground"></span>
|
||||
</button>
|
||||
</SheetTrigger>
|
||||
<SheetContent
|
||||
side="right"
|
||||
class="w-full overflow-y-auto border-white/10 bg-background/65 backdrop-blur-xl backdrop-saturate-150 sm:max-w-sm"
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md p-2 lg:hidden"
|
||||
:aria-label="t('nav.menu')"
|
||||
:aria-expanded="mobileOpen"
|
||||
@click="mobileOpen = !mobileOpen"
|
||||
>
|
||||
<span class="mb-1.5 block h-0.5 w-6 bg-foreground"></span>
|
||||
<span class="mb-1.5 block h-0.5 w-6 bg-foreground"></span>
|
||||
<span class="block h-0.5 w-6 bg-foreground"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-show="mobileOpen" class="border-t border-border py-3 lg:hidden">
|
||||
<div v-for="g in groups" :key="g.id" class="py-2">
|
||||
<div
|
||||
class="px-2 pb-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground"
|
||||
>
|
||||
<SheetHeader>
|
||||
<SheetTitle class="font-display uppercase tracking-wider">
|
||||
{{ t('nav.menu') }}
|
||||
</SheetTitle>
|
||||
</SheetHeader>
|
||||
<nav class="mt-6 space-y-4">
|
||||
<div v-for="g in groups" :key="g.id" class="space-y-1">
|
||||
<div
|
||||
class="px-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground"
|
||||
>
|
||||
{{ g.label }}
|
||||
</div>
|
||||
<RouterLink
|
||||
v-for="i in g.items"
|
||||
:key="i.to"
|
||||
:to="i.to"
|
||||
class="block rounded-md px-4 py-2 hover:bg-muted"
|
||||
>
|
||||
{{ i.label }}
|
||||
</RouterLink>
|
||||
</div>
|
||||
<RouterLink to="/marketplace" class="block rounded-md px-4 py-2 hover:bg-muted">
|
||||
{{ t('nav.marketplace') }}
|
||||
</RouterLink>
|
||||
<button
|
||||
type="button"
|
||||
class="mt-2 block w-full rounded-md border border-border px-4 py-2 text-left text-sm text-muted-foreground hover:bg-muted"
|
||||
@click="toggleLocale"
|
||||
>
|
||||
{{ locale === 'fr' ? 'Switch to English' : 'Passer en français' }}
|
||||
</button>
|
||||
</nav>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
{{ g.label }}
|
||||
</div>
|
||||
<RouterLink
|
||||
v-for="i in g.items"
|
||||
:key="i.to"
|
||||
:to="i.to"
|
||||
class="block rounded-md px-4 py-2 hover:bg-muted"
|
||||
>
|
||||
{{ i.label }}
|
||||
</RouterLink>
|
||||
</div>
|
||||
<RouterLink to="/marketplace" class="block rounded-md px-4 py-2 hover:bg-muted">
|
||||
{{ t('nav.marketplace') }}
|
||||
</RouterLink>
|
||||
<button
|
||||
type="button"
|
||||
class="mt-2 block w-full rounded-md border border-border px-4 py-2 text-left text-sm text-muted-foreground hover:bg-muted"
|
||||
@click="toggleLocale"
|
||||
>
|
||||
{{ locale === 'fr' ? 'Switch to English' : 'Passer en français' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import type { AlertVariants } from "."
|
||||
import { cn } from "@/lib/utils"
|
||||
import { alertVariants } from "."
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes["class"]
|
||||
variant?: AlertVariants["variant"]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="cn(alertVariants({ variant }), props.class)" role="alert">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes["class"]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="cn('text-sm [&_p]:leading-relaxed', props.class)">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes["class"]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h5 :class="cn('mb-1 font-medium leading-none tracking-tight', props.class)">
|
||||
<slot />
|
||||
</h5>
|
||||
</template>
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
import type { VariantProps } from "class-variance-authority"
|
||||
import { cva } from "class-variance-authority"
|
||||
|
||||
export { default as Alert } from "./Alert.vue"
|
||||
export { default as AlertDescription } from "./AlertDescription.vue"
|
||||
export { default as AlertTitle } from "./AlertTitle.vue"
|
||||
|
||||
export const alertVariants = cva(
|
||||
"relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-background text-foreground",
|
||||
destructive:
|
||||
"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
},
|
||||
)
|
||||
|
||||
export type AlertVariants = VariantProps<typeof alertVariants>
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import type { BadgeVariants } from "."
|
||||
import { cn } from "@/lib/utils"
|
||||
import { badgeVariants } from "."
|
||||
|
||||
const props = defineProps<{
|
||||
variant?: BadgeVariants["variant"]
|
||||
class?: HTMLAttributes["class"]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="cn(badgeVariants({ variant }), props.class)">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
import type { VariantProps } from "class-variance-authority"
|
||||
import { cva } from "class-variance-authority"
|
||||
|
||||
export { default as Badge } from "./Badge.vue"
|
||||
|
||||
export const badgeVariants = cva(
|
||||
"inline-flex gap-1 items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
|
||||
secondary:
|
||||
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||
destructive:
|
||||
"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
|
||||
outline: "text-foreground",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
},
|
||||
)
|
||||
|
||||
export type BadgeVariants = VariantProps<typeof badgeVariants>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes["class"]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
:class="
|
||||
cn(
|
||||
'rounded-lg border bg-card text-card-foreground shadow-sm',
|
||||
props.class,
|
||||
)
|
||||
"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes["class"]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="cn('p-6 pt-0', props.class)">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes["class"]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<p :class="cn('text-sm text-muted-foreground', props.class)">
|
||||
<slot />
|
||||
</p>
|
||||
</template>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes["class"]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="cn('flex items-center p-6 pt-0', props.class)">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes["class"]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="cn('flex flex-col gap-y-1.5 p-6', props.class)">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes["class"]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h3
|
||||
:class="
|
||||
cn('text-2xl font-semibold leading-none tracking-tight', props.class)
|
||||
"
|
||||
>
|
||||
<slot />
|
||||
</h3>
|
||||
</template>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
export { default as Card } from "./Card.vue"
|
||||
export { default as CardContent } from "./CardContent.vue"
|
||||
export { default as CardDescription } from "./CardDescription.vue"
|
||||
export { default as CardFooter } from "./CardFooter.vue"
|
||||
export { default as CardHeader } from "./CardHeader.vue"
|
||||
export { default as CardTitle } from "./CardTitle.vue"
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { NavigationMenuRootEmits, NavigationMenuRootProps } from "reka-ui"
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { reactiveOmit } from "@vueuse/core"
|
||||
import {
|
||||
NavigationMenuRoot,
|
||||
useForwardPropsEmits,
|
||||
} from "reka-ui"
|
||||
import { cn } from "@/lib/utils"
|
||||
import NavigationMenuViewport from "./NavigationMenuViewport.vue"
|
||||
|
||||
const props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes["class"] }>()
|
||||
|
||||
const emits = defineEmits<NavigationMenuRootEmits>()
|
||||
|
||||
const delegatedProps = reactiveOmit(props, "class")
|
||||
|
||||
const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NavigationMenuRoot
|
||||
v-bind="forwarded"
|
||||
:class="cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)"
|
||||
>
|
||||
<slot />
|
||||
<NavigationMenuViewport />
|
||||
</NavigationMenuRoot>
|
||||
</template>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { NavigationMenuContentEmits, NavigationMenuContentProps } from "reka-ui"
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { reactiveOmit } from "@vueuse/core"
|
||||
import {
|
||||
NavigationMenuContent,
|
||||
useForwardPropsEmits,
|
||||
} from "reka-ui"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes["class"] }>()
|
||||
|
||||
const emits = defineEmits<NavigationMenuContentEmits>()
|
||||
|
||||
const delegatedProps = reactiveOmit(props, "class")
|
||||
|
||||
const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NavigationMenuContent
|
||||
v-bind="forwarded"
|
||||
:class="cn(
|
||||
'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto',
|
||||
props.class,
|
||||
)"
|
||||
>
|
||||
<slot />
|
||||
</NavigationMenuContent>
|
||||
</template>
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { NavigationMenuIndicatorProps } from "reka-ui"
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { reactiveOmit } from "@vueuse/core"
|
||||
import { NavigationMenuIndicator, useForwardProps } from "reka-ui"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes["class"] }>()
|
||||
|
||||
const delegatedProps = reactiveOmit(props, "class")
|
||||
|
||||
const forwardedProps = useForwardProps(delegatedProps)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NavigationMenuIndicator
|
||||
v-bind="forwardedProps"
|
||||
:class="cn('top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in', props.class)"
|
||||
>
|
||||
<div class="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
|
||||
</NavigationMenuIndicator>
|
||||
</template>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { NavigationMenuItemProps } from "reka-ui"
|
||||
import { NavigationMenuItem } from "reka-ui"
|
||||
|
||||
const props = defineProps<NavigationMenuItemProps>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NavigationMenuItem v-bind="props">
|
||||
<slot />
|
||||
</NavigationMenuItem>
|
||||
</template>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { NavigationMenuLinkEmits, NavigationMenuLinkProps } from "reka-ui"
|
||||
import {
|
||||
NavigationMenuLink,
|
||||
useForwardPropsEmits,
|
||||
} from "reka-ui"
|
||||
|
||||
const props = defineProps<NavigationMenuLinkProps>()
|
||||
const emits = defineEmits<NavigationMenuLinkEmits>()
|
||||
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NavigationMenuLink v-bind="forwarded">
|
||||
<slot />
|
||||
</NavigationMenuLink>
|
||||
</template>
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { NavigationMenuListProps } from "reka-ui"
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { reactiveOmit } from "@vueuse/core"
|
||||
import { NavigationMenuList, useForwardProps } from "reka-ui"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes["class"] }>()
|
||||
|
||||
const delegatedProps = reactiveOmit(props, "class")
|
||||
|
||||
const forwardedProps = useForwardProps(delegatedProps)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NavigationMenuList
|
||||
v-bind="forwardedProps"
|
||||
:class="
|
||||
cn(
|
||||
'group flex flex-1 list-none items-center justify-center gap-x-1',
|
||||
props.class,
|
||||
)
|
||||
"
|
||||
>
|
||||
<slot />
|
||||
</NavigationMenuList>
|
||||
</template>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { NavigationMenuTriggerProps } from "reka-ui"
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { reactiveOmit } from "@vueuse/core"
|
||||
import { ChevronDown } from "@lucide/vue"
|
||||
import {
|
||||
NavigationMenuTrigger,
|
||||
useForwardProps,
|
||||
} from "reka-ui"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { navigationMenuTriggerStyle } from "."
|
||||
|
||||
const props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes["class"] }>()
|
||||
|
||||
const delegatedProps = reactiveOmit(props, "class")
|
||||
|
||||
const forwardedProps = useForwardProps(delegatedProps)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NavigationMenuTrigger
|
||||
v-bind="forwardedProps"
|
||||
:class="cn(navigationMenuTriggerStyle(), 'group', props.class)"
|
||||
>
|
||||
<slot />
|
||||
<ChevronDown
|
||||
class="relative top-px ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</NavigationMenuTrigger>
|
||||
</template>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { NavigationMenuViewportProps } from "reka-ui"
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { reactiveOmit } from "@vueuse/core"
|
||||
import {
|
||||
NavigationMenuViewport,
|
||||
useForwardProps,
|
||||
} from "reka-ui"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes["class"] }>()
|
||||
|
||||
const delegatedProps = reactiveOmit(props, "class")
|
||||
|
||||
const forwardedProps = useForwardProps(delegatedProps)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="absolute left-0 top-full flex justify-center">
|
||||
<NavigationMenuViewport
|
||||
v-bind="forwardedProps"
|
||||
:class="
|
||||
cn(
|
||||
'origin-top-center relative mt-1.5 h-[var(--reka-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--reka-navigation-menu-viewport-width)] left-[var(--reka-navigation-menu-viewport-left)]',
|
||||
props.class,
|
||||
)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
import { cva } from "class-variance-authority"
|
||||
|
||||
export { default as NavigationMenu } from "./NavigationMenu.vue"
|
||||
export { default as NavigationMenuContent } from "./NavigationMenuContent.vue"
|
||||
export { default as NavigationMenuIndicator } from "./NavigationMenuIndicator.vue"
|
||||
export { default as NavigationMenuItem } from "./NavigationMenuItem.vue"
|
||||
export { default as NavigationMenuLink } from "./NavigationMenuLink.vue"
|
||||
export { default as NavigationMenuList } from "./NavigationMenuList.vue"
|
||||
export { default as NavigationMenuTrigger } from "./NavigationMenuTrigger.vue"
|
||||
export { default as NavigationMenuViewport } from "./NavigationMenuViewport.vue"
|
||||
|
||||
export const navigationMenuTriggerStyle = cva(
|
||||
"group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",
|
||||
)
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { DialogRootEmits, DialogRootProps } from "reka-ui"
|
||||
import { DialogRoot, useForwardPropsEmits } from "reka-ui"
|
||||
|
||||
const props = defineProps<DialogRootProps>()
|
||||
const emits = defineEmits<DialogRootEmits>()
|
||||
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogRoot v-bind="forwarded">
|
||||
<slot />
|
||||
</DialogRoot>
|
||||
</template>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { DialogCloseProps } from "reka-ui"
|
||||
import { DialogClose } from "reka-ui"
|
||||
|
||||
const props = defineProps<DialogCloseProps>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogClose v-bind="props">
|
||||
<slot />
|
||||
</DialogClose>
|
||||
</template>
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { DialogContentEmits, DialogContentProps } from "reka-ui"
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import type { SheetVariants } from "."
|
||||
import { reactiveOmit } from "@vueuse/core"
|
||||
import { X } from "@lucide/vue"
|
||||
import {
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogOverlay,
|
||||
DialogPortal,
|
||||
useForwardPropsEmits,
|
||||
} from "reka-ui"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { sheetVariants } from "."
|
||||
|
||||
interface SheetContentProps extends DialogContentProps {
|
||||
class?: HTMLAttributes["class"]
|
||||
side?: SheetVariants["side"]
|
||||
}
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
const props = defineProps<SheetContentProps>()
|
||||
|
||||
const emits = defineEmits<DialogContentEmits>()
|
||||
|
||||
const delegatedProps = reactiveOmit(props, "class", "side")
|
||||
|
||||
const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogPortal>
|
||||
<DialogOverlay
|
||||
class="fixed inset-0 z-50 bg-black/30 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
|
||||
/>
|
||||
<DialogContent
|
||||
:class="cn(sheetVariants({ side }), props.class)"
|
||||
v-bind="{ ...forwarded, ...$attrs }"
|
||||
>
|
||||
<slot />
|
||||
|
||||
<DialogClose
|
||||
class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
|
||||
>
|
||||
<X class="w-4 h-4 text-muted-foreground" />
|
||||
</DialogClose>
|
||||
</DialogContent>
|
||||
</DialogPortal>
|
||||
</template>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { DialogDescriptionProps } from "reka-ui"
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { reactiveOmit } from "@vueuse/core"
|
||||
import { DialogDescription } from "reka-ui"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
|
||||
|
||||
const delegatedProps = reactiveOmit(props, "class")
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogDescription
|
||||
:class="cn('text-sm text-muted-foreground', props.class)"
|
||||
v-bind="delegatedProps"
|
||||
>
|
||||
<slot />
|
||||
</DialogDescription>
|
||||
</template>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = defineProps<{ class?: HTMLAttributes["class"] }>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
:class="
|
||||
cn(
|
||||
'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
|
||||
props.class,
|
||||
)
|
||||
"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = defineProps<{ class?: HTMLAttributes["class"] }>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
:class="
|
||||
cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)
|
||||
"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { DialogTitleProps } from "reka-ui"
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { reactiveOmit } from "@vueuse/core"
|
||||
import { DialogTitle } from "reka-ui"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()
|
||||
|
||||
const delegatedProps = reactiveOmit(props, "class")
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogTitle
|
||||
:class="cn('text-lg font-semibold text-foreground', props.class)"
|
||||
v-bind="delegatedProps"
|
||||
>
|
||||
<slot />
|
||||
</DialogTitle>
|
||||
</template>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { DialogTriggerProps } from "reka-ui"
|
||||
import { DialogTrigger } from "reka-ui"
|
||||
|
||||
const props = defineProps<DialogTriggerProps>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogTrigger v-bind="props">
|
||||
<slot />
|
||||
</DialogTrigger>
|
||||
</template>
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
import type { VariantProps } from "class-variance-authority"
|
||||
import { cva } from "class-variance-authority"
|
||||
|
||||
export { default as Sheet } from "./Sheet.vue"
|
||||
export { default as SheetClose } from "./SheetClose.vue"
|
||||
export { default as SheetContent } from "./SheetContent.vue"
|
||||
export { default as SheetDescription } from "./SheetDescription.vue"
|
||||
export { default as SheetFooter } from "./SheetFooter.vue"
|
||||
export { default as SheetHeader } from "./SheetHeader.vue"
|
||||
export { default as SheetTitle } from "./SheetTitle.vue"
|
||||
export { default as SheetTrigger } from "./SheetTrigger.vue"
|
||||
|
||||
export const sheetVariants = cva(
|
||||
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
|
||||
{
|
||||
variants: {
|
||||
side: {
|
||||
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
|
||||
bottom:
|
||||
"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
|
||||
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
|
||||
right:
|
||||
"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
side: "right",
|
||||
},
|
||||
},
|
||||
)
|
||||
|
||||
export type SheetVariants = VariantProps<typeof sheetVariants>
|
||||
|
|
@ -2,8 +2,6 @@
|
|||
import { useI18n } from 'vue-i18n'
|
||||
import { RouterLink } from 'vue-router'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
|
||||
const { t, tm, rt } = useI18n()
|
||||
|
||||
|
|
@ -84,35 +82,41 @@ const exteriorItems = tm('accommodation.exterior.items') as string[]
|
|||
<p class="mt-3 text-muted-foreground">{{ t('accommodation.rooms.subtitle') }}</p>
|
||||
</div>
|
||||
<ul class="mt-8 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
<li v-for="room in rooms" :key="room.key">
|
||||
<Card class="overflow-hidden">
|
||||
<img
|
||||
:src="room.image"
|
||||
alt=""
|
||||
class="aspect-[4/3] w-full object-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
<CardContent class="p-5 pt-5">
|
||||
<div class="flex items-baseline justify-between gap-3">
|
||||
<h3 class="font-serif text-xl font-semibold">
|
||||
{{ t(`accommodation.rooms.${room.key}.name`) }}
|
||||
</h3>
|
||||
<Badge
|
||||
:variant="room.open ? 'default' : 'outline'"
|
||||
class="text-[10px] uppercase tracking-wider"
|
||||
>
|
||||
{{
|
||||
room.open
|
||||
? t('accommodation.statusOpen')
|
||||
: t('accommodation.statusComingSoon')
|
||||
}}
|
||||
</Badge>
|
||||
</div>
|
||||
<p class="mt-3 text-sm leading-relaxed text-foreground/85">
|
||||
{{ t(`accommodation.rooms.${room.key}.summary`) }}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<li
|
||||
v-for="room in rooms"
|
||||
:key="room.key"
|
||||
class="overflow-hidden rounded-lg border border-border bg-card"
|
||||
>
|
||||
<img
|
||||
:src="room.image"
|
||||
alt=""
|
||||
class="aspect-[4/3] w-full object-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div class="p-5">
|
||||
<div class="flex items-baseline justify-between gap-3">
|
||||
<h3 class="font-serif text-xl font-semibold">
|
||||
{{ t(`accommodation.rooms.${room.key}.name`) }}
|
||||
</h3>
|
||||
<span
|
||||
class="rounded-full px-2 py-0.5 text-[10px] uppercase tracking-wider"
|
||||
:class="
|
||||
room.open
|
||||
? 'bg-primary/10 text-primary'
|
||||
: 'border border-border text-muted-foreground'
|
||||
"
|
||||
>
|
||||
{{
|
||||
room.open
|
||||
? t('accommodation.statusOpen')
|
||||
: t('accommodation.statusComingSoon')
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<p class="mt-3 text-sm leading-relaxed text-foreground/85">
|
||||
{{ t(`accommodation.rooms.${room.key}.summary`) }}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
|
@ -127,26 +131,27 @@ const exteriorItems = tm('accommodation.exterior.items') as string[]
|
|||
<p class="mt-3 text-muted-foreground">{{ t('accommodation.cabins.subtitle') }}</p>
|
||||
</div>
|
||||
<ul class="mt-8 grid gap-6 md:grid-cols-3">
|
||||
<li v-for="cabin in cabins" :key="cabin.key">
|
||||
<Card class="overflow-hidden bg-background">
|
||||
<img
|
||||
:src="cabin.image"
|
||||
alt=""
|
||||
class="aspect-[4/3] w-full object-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div class="flex items-baseline justify-between gap-3 p-5">
|
||||
<h3 class="font-serif text-xl font-semibold">
|
||||
{{ t(`accommodation.cabins.${cabin.key}`) }}
|
||||
</h3>
|
||||
<Badge
|
||||
variant="outline"
|
||||
class="text-[10px] uppercase tracking-wider text-muted-foreground"
|
||||
>
|
||||
{{ t('accommodation.statusComingSoon') }}
|
||||
</Badge>
|
||||
</div>
|
||||
</Card>
|
||||
<li
|
||||
v-for="cabin in cabins"
|
||||
:key="cabin.key"
|
||||
class="overflow-hidden rounded-lg border border-border bg-background"
|
||||
>
|
||||
<img
|
||||
:src="cabin.image"
|
||||
alt=""
|
||||
class="aspect-[4/3] w-full object-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div class="flex items-baseline justify-between gap-3 p-5">
|
||||
<h3 class="font-serif text-xl font-semibold">
|
||||
{{ t(`accommodation.cabins.${cabin.key}`) }}
|
||||
</h3>
|
||||
<span
|
||||
class="rounded-full border border-border px-2 py-0.5 text-[10px] uppercase tracking-wider text-muted-foreground"
|
||||
>
|
||||
{{ t('accommodation.statusComingSoon') }}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -161,10 +166,12 @@ const exteriorItems = tm('accommodation.exterior.items') as string[]
|
|||
<p class="mt-3 text-muted-foreground">{{ t('accommodation.exterior.subtitle') }}</p>
|
||||
</div>
|
||||
<ul class="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<li v-for="(item, i) in exteriorItems" :key="i">
|
||||
<Card class="border-dashed bg-secondary/20 p-5 text-sm text-foreground/85">
|
||||
{{ rt(item) }}
|
||||
</Card>
|
||||
<li
|
||||
v-for="(item, i) in exteriorItems"
|
||||
:key="i"
|
||||
class="rounded-lg border border-dashed border-border bg-secondary/20 p-5 text-sm text-foreground/85"
|
||||
>
|
||||
{{ rt(item) }}
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { RouterLink } from 'vue-router'
|
||||
import { Card } from '@/components/ui/card'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
|
|
@ -97,14 +96,18 @@ const pillars = [
|
|||
<p class="mt-3 text-muted-foreground">{{ t('concept.slowFarming.body') }}</p>
|
||||
</div>
|
||||
<div class="mt-8 grid gap-6 md:grid-cols-3">
|
||||
<Card v-for="p in pillars" :key="p.key" class="p-6">
|
||||
<article
|
||||
v-for="p in pillars"
|
||||
:key="p.key"
|
||||
class="rounded-lg border border-border bg-card p-6"
|
||||
>
|
||||
<h3 class="font-serif text-xl font-semibold">
|
||||
{{ t(`concept.slowFarming.${p.key}Title`) }}
|
||||
</h3>
|
||||
<p class="mt-3 text-sm leading-relaxed text-foreground/85">
|
||||
{{ t(`concept.slowFarming.${p.key}Body`) }}
|
||||
</p>
|
||||
</Card>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
import { useI18n } from 'vue-i18n'
|
||||
import { RouterLink } from 'vue-router'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
|
|
@ -49,14 +47,14 @@ const events = [
|
|||
<p class="mt-6 max-w-prose text-lg leading-relaxed text-foreground/90">
|
||||
{{ t('events.page.lede') }}
|
||||
</p>
|
||||
<Alert class="mt-8 max-w-prose bg-card text-foreground/85">
|
||||
<AlertTitle class="text-xs uppercase tracking-wider text-accent">
|
||||
<aside
|
||||
class="mt-8 max-w-prose rounded-md border border-border bg-card p-4 text-sm text-foreground/85"
|
||||
>
|
||||
<p class="text-xs font-semibold uppercase tracking-wider text-accent">
|
||||
{{ t('events.page.noteHeading') }}
|
||||
</AlertTitle>
|
||||
<AlertDescription>
|
||||
{{ t('events.page.calendarNote') }}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</p>
|
||||
<p class="mt-1">{{ t('events.page.calendarNote') }}</p>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -66,30 +64,28 @@ const events = [
|
|||
<component
|
||||
:is="e.to ? 'RouterLink' : 'article'"
|
||||
v-bind="e.to ? { to: e.to } : {}"
|
||||
class="group block h-full"
|
||||
class="group block h-full overflow-hidden rounded-lg border border-border bg-card transition hover:shadow-md"
|
||||
>
|
||||
<Card class="h-full overflow-hidden transition hover:shadow-md">
|
||||
<img
|
||||
:src="e.image"
|
||||
alt=""
|
||||
class="aspect-[4/3] w-full object-cover transition group-hover:scale-[1.02]"
|
||||
loading="lazy"
|
||||
/>
|
||||
<CardContent class="p-5 pt-5">
|
||||
<p class="text-xs uppercase tracking-wider text-accent">
|
||||
{{ t(`events.${e.key}.date`) }}
|
||||
</p>
|
||||
<h2 class="mt-1 font-serif text-xl font-semibold">
|
||||
{{ t(`events.${e.key}.title`) }}
|
||||
</h2>
|
||||
<p class="mt-1 text-xs text-muted-foreground">
|
||||
{{ t(`events.${e.key}.location`) }}
|
||||
</p>
|
||||
<p class="mt-3 text-sm leading-relaxed text-foreground/85">
|
||||
{{ t(`events.${e.key}.description`) }}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<img
|
||||
:src="e.image"
|
||||
alt=""
|
||||
class="aspect-[4/3] w-full object-cover transition group-hover:scale-[1.02]"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div class="p-5">
|
||||
<p class="text-xs uppercase tracking-wider text-accent">
|
||||
{{ t(`events.${e.key}.date`) }}
|
||||
</p>
|
||||
<h2 class="mt-1 font-serif text-xl font-semibold">
|
||||
{{ t(`events.${e.key}.title`) }}
|
||||
</h2>
|
||||
<p class="mt-1 text-xs text-muted-foreground">
|
||||
{{ t(`events.${e.key}.location`) }}
|
||||
</p>
|
||||
<p class="mt-3 text-sm leading-relaxed text-foreground/85">
|
||||
{{ t(`events.${e.key}.description`) }}
|
||||
</p>
|
||||
</div>
|
||||
</component>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { Card } from '@/components/ui/card'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
|
|
@ -48,22 +47,24 @@ const items = [
|
|||
|
||||
<section class="mx-auto max-w-7xl px-4 py-16 lg:px-6">
|
||||
<ul class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<li v-for="item in items" :key="item.key" class="group">
|
||||
<Card class="overflow-hidden">
|
||||
<figure>
|
||||
<img
|
||||
:src="item.src"
|
||||
:alt="t(`gallery.captions.${item.key}`)"
|
||||
class="aspect-square w-full object-cover transition group-hover:scale-[1.02]"
|
||||
loading="lazy"
|
||||
/>
|
||||
<figcaption
|
||||
class="border-t border-border px-4 py-3 font-serif text-sm text-foreground/85"
|
||||
>
|
||||
{{ t(`gallery.captions.${item.key}`) }}
|
||||
</figcaption>
|
||||
</figure>
|
||||
</Card>
|
||||
<li
|
||||
v-for="item in items"
|
||||
:key="item.key"
|
||||
class="group overflow-hidden rounded-lg border border-border bg-card"
|
||||
>
|
||||
<figure>
|
||||
<img
|
||||
:src="item.src"
|
||||
:alt="t(`gallery.captions.${item.key}`)"
|
||||
class="aspect-square w-full object-cover transition group-hover:scale-[1.02]"
|
||||
loading="lazy"
|
||||
/>
|
||||
<figcaption
|
||||
class="border-t border-border px-4 py-3 font-serif text-sm text-foreground/85"
|
||||
>
|
||||
{{ t(`gallery.captions.${item.key}`) }}
|
||||
</figcaption>
|
||||
</figure>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
import { useI18n } from 'vue-i18n'
|
||||
import { RouterLink } from 'vue-router'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import cosmicStag from '@/assets/cosmic-stag.avif'
|
||||
import heroLandscape from '@/assets/hero-landscape.webp'
|
||||
import sectionTile from '@/assets/section-tile.webp'
|
||||
|
|
@ -193,27 +192,25 @@ const featuredEvents = [
|
|||
v-for="e in featuredEvents"
|
||||
:key="e.key"
|
||||
:to="e.to"
|
||||
class="group block"
|
||||
class="group overflow-hidden rounded-lg border border-border bg-card transition hover:shadow-md"
|
||||
>
|
||||
<Card class="overflow-hidden transition hover:shadow-md">
|
||||
<img
|
||||
:src="e.image"
|
||||
alt=""
|
||||
class="aspect-[4/3] w-full object-cover transition group-hover:scale-[1.02]"
|
||||
loading="lazy"
|
||||
/>
|
||||
<CardContent class="p-5 pt-5">
|
||||
<p class="text-xs uppercase tracking-wider text-accent">
|
||||
{{ t(`events.${e.key}.date`) }}
|
||||
</p>
|
||||
<h3 class="mt-2 font-display text-lg uppercase tracking-wider">
|
||||
{{ t(`events.${e.key}.title`) }}
|
||||
</h3>
|
||||
<p class="mt-1 text-xs text-foreground/70">
|
||||
{{ t(`events.${e.key}.location`) }}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<img
|
||||
:src="e.image"
|
||||
alt=""
|
||||
class="aspect-[4/3] w-full object-cover transition group-hover:scale-[1.02]"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div class="p-5">
|
||||
<p class="text-xs uppercase tracking-wider text-accent">
|
||||
{{ t(`events.${e.key}.date`) }}
|
||||
</p>
|
||||
<h3 class="mt-2 font-display text-lg uppercase tracking-wider">
|
||||
{{ t(`events.${e.key}.title`) }}
|
||||
</h3>
|
||||
<p class="mt-1 text-xs text-foreground/70">
|
||||
{{ t(`events.${e.key}.location`) }}
|
||||
</p>
|
||||
</div>
|
||||
</RouterLink>
|
||||
</div>
|
||||
<div class="mt-10 text-center">
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
import { useI18n } from 'vue-i18n'
|
||||
import { RouterLink } from 'vue-router'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card } from '@/components/ui/card'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
|
|
@ -32,14 +31,18 @@ const paths = ['exchange', 'rental', 'partial', 'funded'] as const
|
|||
{{ t('longStays.pathsTitle') }}
|
||||
</h2>
|
||||
<div class="mt-8 grid gap-6 md:grid-cols-2">
|
||||
<Card v-for="key in paths" :key="key" class="p-6">
|
||||
<article
|
||||
v-for="key in paths"
|
||||
:key="key"
|
||||
class="rounded-lg border border-border bg-card p-6"
|
||||
>
|
||||
<h3 class="font-serif text-xl font-semibold">
|
||||
{{ t(`longStays.paths.${key}Title`) }}
|
||||
</h3>
|
||||
<p class="mt-3 text-base leading-relaxed text-foreground/85">
|
||||
{{ t(`longStays.paths.${key}Body`) }}
|
||||
</p>
|
||||
</Card>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card } from '@/components/ui/card'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
|
|
@ -29,14 +28,18 @@ const categories = ['fresh', 'pantry', 'craft'] as const
|
|||
{{ t('marketplace.categoriesTitle') }}
|
||||
</h2>
|
||||
<div class="mt-8 grid gap-6 md:grid-cols-3">
|
||||
<Card v-for="key in categories" :key="key" class="border-dashed p-6">
|
||||
<article
|
||||
v-for="key in categories"
|
||||
:key="key"
|
||||
class="rounded-lg border border-dashed border-border bg-card p-6"
|
||||
>
|
||||
<h3 class="font-serif text-xl font-semibold">
|
||||
{{ t(`marketplace.categories.${key}Title`) }}
|
||||
</h3>
|
||||
<p class="mt-3 text-base leading-relaxed text-foreground/85">
|
||||
{{ t(`marketplace.categories.${key}Body`) }}
|
||||
</p>
|
||||
</Card>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
import { useI18n } from 'vue-i18n'
|
||||
import { RouterLink } from 'vue-router'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card } from '@/components/ui/card'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
|
|
@ -44,15 +43,17 @@ const applyKeys = ['model', 'window', 'open'] as const
|
|||
<p class="mt-3 text-muted-foreground">{{ t('opportunities.groupsSubtitle') }}</p>
|
||||
</div>
|
||||
<ul class="mt-8 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
<li v-for="key in groups" :key="key">
|
||||
<Card class="p-6">
|
||||
<h3 class="font-serif text-xl font-semibold">
|
||||
{{ t(`opportunities.groups.${key}Title`) }}
|
||||
</h3>
|
||||
<p class="mt-3 text-sm leading-relaxed text-foreground/85">
|
||||
{{ t(`opportunities.groups.${key}Positions`) }}
|
||||
</p>
|
||||
</Card>
|
||||
<li
|
||||
v-for="key in groups"
|
||||
:key="key"
|
||||
class="rounded-lg border border-border bg-card p-6"
|
||||
>
|
||||
<h3 class="font-serif text-xl font-semibold">
|
||||
{{ t(`opportunities.groups.${key}Title`) }}
|
||||
</h3>
|
||||
<p class="mt-3 text-sm leading-relaxed text-foreground/85">
|
||||
{{ t(`opportunities.groups.${key}Positions`) }}
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
|
@ -64,14 +65,18 @@ const applyKeys = ['model', 'window', 'open'] as const
|
|||
{{ t('opportunities.applyTitle') }}
|
||||
</h2>
|
||||
<div class="mt-8 grid gap-6 md:grid-cols-3">
|
||||
<Card v-for="key in applyKeys" :key="key" class="p-6">
|
||||
<article
|
||||
v-for="key in applyKeys"
|
||||
:key="key"
|
||||
class="rounded-lg border border-border bg-card p-6"
|
||||
>
|
||||
<h3 class="font-serif text-lg font-semibold">
|
||||
{{ t(`opportunities.apply.${key}Title`) }}
|
||||
</h3>
|
||||
<p class="mt-3 text-sm leading-relaxed text-foreground/85">
|
||||
{{ t(`opportunities.apply.${key}Body`) }}
|
||||
</p>
|
||||
</Card>
|
||||
</article>
|
||||
</div>
|
||||
<div class="mt-10 flex flex-wrap items-center gap-3">
|
||||
<Button as-child>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
import { useI18n } from 'vue-i18n'
|
||||
import { RouterLink } from 'vue-router'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card } from '@/components/ui/card'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
|
|
@ -32,14 +31,18 @@ const kinds = ['weekend', 'retreat', 'gathering', 'residency'] as const
|
|||
{{ t('reservations.kindsTitle') }}
|
||||
</h2>
|
||||
<div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<Card v-for="key in kinds" :key="key" class="p-6">
|
||||
<article
|
||||
v-for="key in kinds"
|
||||
:key="key"
|
||||
class="rounded-lg border border-border bg-card p-6"
|
||||
>
|
||||
<h3 class="font-serif text-xl font-semibold">
|
||||
{{ t(`reservations.kinds.${key}Title`) }}
|
||||
</h3>
|
||||
<p class="mt-3 text-sm leading-relaxed text-foreground/85">
|
||||
{{ t(`reservations.kinds.${key}Body`) }}
|
||||
</p>
|
||||
</Card>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -84,7 +87,7 @@ const kinds = ['weekend', 'retreat', 'gathering', 'residency'] as const
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<Card class="p-6 lg:col-span-2">
|
||||
<aside class="rounded-lg border border-border bg-card p-6 lg:col-span-2">
|
||||
<h3 class="font-serif text-xl font-semibold">
|
||||
{{ t('reservations.contactCard.title') }}
|
||||
</h3>
|
||||
|
|
@ -115,7 +118,7 @@ const kinds = ['weekend', 'retreat', 'gathering', 'residency'] as const
|
|||
<dd class="mt-1">{{ t('reservations.contactCard.openingValue') }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</Card>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
import { useI18n } from 'vue-i18n'
|
||||
import { RouterLink } from 'vue-router'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card } from '@/components/ui/card'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
|
|
@ -57,14 +56,18 @@ const applySteps = ['stepOne', 'stepTwo', 'stepThree'] as const
|
|||
{{ t('symposium.includedTitle') }}
|
||||
</h2>
|
||||
<div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<Card v-for="key in included" :key="key" class="bg-background p-6">
|
||||
<article
|
||||
v-for="key in included"
|
||||
:key="key"
|
||||
class="rounded-lg border border-border bg-background p-6"
|
||||
>
|
||||
<h3 class="font-serif text-lg font-semibold">
|
||||
{{ t(`symposium.included.${key}Title`) }}
|
||||
</h3>
|
||||
<p class="mt-3 text-sm leading-relaxed text-foreground/85">
|
||||
{{ t(`symposium.included.${key}Body`) }}
|
||||
</p>
|
||||
</Card>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -86,15 +89,17 @@ const applySteps = ['stepOne', 'stepTwo', 'stepThree'] as const
|
|||
{{ t('symposium.applyTitle') }}
|
||||
</h2>
|
||||
<ol class="mt-8 grid gap-6 md:grid-cols-3">
|
||||
<li v-for="step in applySteps" :key="step">
|
||||
<Card class="p-6">
|
||||
<h3 class="font-serif text-lg font-semibold">
|
||||
{{ t(`symposium.apply.${step}Title`) }}
|
||||
</h3>
|
||||
<p class="mt-3 text-sm leading-relaxed text-foreground/85">
|
||||
{{ t(`symposium.apply.${step}Body`) }}
|
||||
</p>
|
||||
</Card>
|
||||
<li
|
||||
v-for="step in applySteps"
|
||||
:key="step"
|
||||
class="rounded-lg border border-border bg-card p-6"
|
||||
>
|
||||
<h3 class="font-serif text-lg font-semibold">
|
||||
{{ t(`symposium.apply.${step}Title`) }}
|
||||
</h3>
|
||||
<p class="mt-3 text-sm leading-relaxed text-foreground/85">
|
||||
{{ t(`symposium.apply.${step}Body`) }}
|
||||
</p>
|
||||
</li>
|
||||
</ol>
|
||||
<div class="mt-10 flex flex-wrap items-center gap-3">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { Card } from '@/components/ui/card'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
|
|
@ -56,7 +55,11 @@ const team = ['patrick', 'coco', 'charlie'] as const
|
|||
<p class="mt-3 text-muted-foreground">{{ t('vision.philosophySubtitle') }}</p>
|
||||
</div>
|
||||
<div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-5">
|
||||
<Card v-for="(p, i) in philosophy" :key="p" class="bg-background p-5">
|
||||
<article
|
||||
v-for="(p, i) in philosophy"
|
||||
:key="p"
|
||||
class="rounded-lg border border-border bg-background p-5"
|
||||
>
|
||||
<div class="font-serif text-2xl text-accent">{{ i + 1 }}</div>
|
||||
<h3 class="mt-2 font-serif text-lg font-semibold">
|
||||
{{ t(`vision.philosophy.${p}Title`) }}
|
||||
|
|
@ -64,7 +67,7 @@ const team = ['patrick', 'coco', 'charlie'] as const
|
|||
<p class="mt-2 text-sm leading-relaxed text-foreground/85">
|
||||
{{ t(`vision.philosophy.${p}Body`) }}
|
||||
</p>
|
||||
</Card>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -78,12 +81,16 @@ const team = ['patrick', 'coco', 'charlie'] as const
|
|||
<p class="mt-3 text-muted-foreground">{{ t('vision.pillarsSubtitle') }}</p>
|
||||
</div>
|
||||
<div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
<Card v-for="p in pillars" :key="p" class="p-6">
|
||||
<article
|
||||
v-for="p in pillars"
|
||||
:key="p"
|
||||
class="rounded-lg border border-border bg-card p-6"
|
||||
>
|
||||
<h3 class="font-serif text-xl font-semibold">{{ t(`vision.pillars.${p}Title`) }}</h3>
|
||||
<p class="mt-3 text-sm leading-relaxed text-foreground/85">
|
||||
{{ t(`vision.pillars.${p}Body`) }}
|
||||
</p>
|
||||
</Card>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -94,7 +101,11 @@ const team = ['patrick', 'coco', 'charlie'] as const
|
|||
{{ t('vision.teamTitle') }}
|
||||
</h2>
|
||||
<div class="mt-8 grid gap-6 md:grid-cols-3">
|
||||
<Card v-for="m in team" :key="m" class="p-6">
|
||||
<article
|
||||
v-for="m in team"
|
||||
:key="m"
|
||||
class="rounded-lg border border-border bg-card p-6"
|
||||
>
|
||||
<h3 class="font-serif text-xl font-semibold">{{ t(`vision.team.${m}Name`) }}</h3>
|
||||
<p class="mt-1 text-xs uppercase tracking-wider text-accent">
|
||||
{{ t(`vision.team.${m}Role`) }}
|
||||
|
|
@ -102,7 +113,7 @@ const team = ['patrick', 'coco', 'charlie'] as const
|
|||
<p class="mt-3 text-sm leading-relaxed text-foreground/85">
|
||||
{{ t(`vision.team.${m}Body`) }}
|
||||
</p>
|
||||
</Card>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue