padreug/chateaudufaune.ariege.io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: padreug:fa1ba0f299408f492142208ef2195c10c8c89c92
Branches Tags
padreug:main
padreug:feat/hero-stag-animation
..
compare: padreug:826052770f4b8547c99e709f3415a1f5ee8f1327
Branches Tags
padreug:main
padreug:feat/hero-stag-animation

No commits in common. "fa1ba0f299408f492142208ef2195c10c8c89c92" and "826052770f4b8547c99e709f3415a1f5ee8f1327" have entirely different histories.
fa1ba0f299 ... 826052770f

15 changed files with 408 additions and 468 deletions
Download patch file Download diff file Expand all files Collapse all files

58
src/components/layout/PageHero.vue
View file

@ -1,58 +0,0 @@
<script setup lang="ts">
// Top-of-page hero, the first block inside PageShell's panel. Centered to
// match the Wix layout; falls back to a left-aligned two-column grid when an
// `aside` slot (e.g. a hero image) is supplied. Title uses the Aboreto
// display face in the home page's uppercase / wide-tracking idiom.
import { useSlots } from 'vue'
withDefaults(
defineProps<{
kicker?: string
title: string
lede?: string
}>(),
{},
)
const slots = useSlots()
const hasAside = () => !!slots.aside
</script>
<template>
<section class="px-6 pt-16 pb-12 sm:px-10 lg:px-16 lg:pt-24 lg:pb-16">
<div
v-if="hasAside()"
class="grid items-center gap-10 lg:grid-cols-2 lg:gap-14"
>
<div class="max-w-3xl">
<p v-if="kicker" class="font-display text-xs uppercase tracking-[0.3em] text-accent">
{{ kicker }}
</p>
<h1 class="mt-3 font-display text-4xl uppercase leading-tight tracking-wider md:text-5xl">
{{ title }}
</h1>
<p v-if="lede" class="mt-6 max-w-prose text-lg leading-relaxed text-foreground/90">
{{ lede }}
</p>
<slot />
</div>
<slot name="aside" />
</div>
<div v-else class="mx-auto max-w-3xl text-center">
<h1 class="font-display text-4xl uppercase leading-tight tracking-wider md:text-6xl">
{{ title }}
</h1>
<p
v-if="kicker"
class="mt-6 font-display text-2xl uppercase tracking-wider text-accent md:text-3xl"
>
{{ kicker }}
</p>
<p v-if="lede" class="mx-auto mt-6 max-w-2xl text-base leading-relaxed text-foreground/90 md:text-lg">
{{ lede }}
</p>
<slot />
</div>
</section>
</template>

33
src/components/layout/PageSection.vue
View file

@ -1,33 +0,0 @@
<script setup lang="ts">
// A content block inside PageShell's panel. No background of its own — the
// near-black panel shows through; cards/images provide the contrast. Just
// constrains width and supplies the shared vertical rhythm and gutter.
withDefaults(
defineProps<{
/** Inner content max-width. `wide` fills the panel. */
width?: 'prose' | 'narrow' | 'wide'
/** Vertical rhythm. */
padding?: 'default' | 'compact'
}>(),
{ width: 'wide', padding: 'default' },
)
const widthClass = {
prose: 'max-w-3xl',
narrow: 'max-w-4xl',
wide: 'max-w-none',
} as const
const padClass = {
default: 'py-16 lg:py-20',
compact: 'py-12 lg:py-14',
} as const
</script>
<template>
<section class="px-6 sm:px-10 lg:px-16" :class="padClass[padding]">
<div :class="[widthClass[width], width !== 'wide' ? 'mx-auto' : '']">
<slot />
</div>
</section>
</template>

14
src/components/layout/PageShell.vue
View file

@ -1,14 +0,0 @@
<script setup lang="ts">
// The floating content panel: a near-black rounded card that sits on the
// tiled celtic-knot page background, leaving a gutter of tile visible around
// it. Wrap every secondary page's content in this so they share the home
// page / Wix layout language. Sections go inside as plain blocks.
</script>
<template>
<div class="px-3 pt-3 pb-6 sm:px-4 sm:pt-4 lg:px-6">
<div class="mx-auto max-w-6xl overflow-hidden rounded-3xl bg-panel shadow-2xl">
<slot />
</div>
</div>
</template>

19
src/style.css
View file

@ -25,12 +25,6 @@
--border: hsl(151 50% 18%); --border: hsl(151 50% 18%);
--input: hsl(151 50% 18%); --input: hsl(151 50% 18%);
--ring: hsl(43 64% 50%); --ring: hsl(43 64% 50%);
/* Near-black green of the content panel that floats on the tiled bg. */
--panel: hsl(151 55% 4%);
/* Flat wash layered over the tiled page background to mute it. Dark green
rather than pure black so the gutters keep the site's tone. Raise the
alpha toward 1 for a quieter background, lower it to let the knot show. */
--bg-overlay: hsl(151 60% 3% / 0.62);
--radius: 0.5rem; --radius: 0.5rem;
} }
@ -54,8 +48,6 @@
--border: hsl(151 50% 15%); --border: hsl(151 50% 15%);
--input: hsl(151 50% 15%); --input: hsl(151 50% 15%);
--ring: hsl(43 64% 52%); --ring: hsl(43 64% 52%);
--panel: hsl(151 55% 3%);
--bg-overlay: hsl(151 60% 2% / 0.66);
} }
@theme inline { @theme inline {
@ -78,7 +70,6 @@
--color-border: var(--border); --color-border: var(--border);
--color-input: var(--input); --color-input: var(--input);
--color-ring: var(--ring); --color-ring: var(--ring);
--color-panel: var(--panel);
--radius-lg: var(--radius); --radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px); --radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px); --radius-sm: calc(var(--radius) - 4px);
@ -94,16 +85,6 @@
} }
body { body {
@apply bg-background text-foreground; @apply bg-background text-foreground;
/* Celtic-knot tile is the page background; it shows in the gutters
around the floating content panel (see PageShell). A flat dark wash
(--bg-overlay) is layered on top to mute it. The home page's fixed
landscape image sits above this layer, so home is unaffected. */
background-image:
linear-gradient(var(--bg-overlay), var(--bg-overlay)),
url('./assets/section-tile.webp');
background-repeat: no-repeat, repeat;
background-position: center top, center top;
background-size: cover, auto;
font-family: var(--font-sans); font-family: var(--font-sans);
font-weight: 300; font-weight: 300;
} }

61
src/views/AccommodationView.vue
View file

@ -4,9 +4,6 @@ import { RouterLink } from 'vue-router'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card' import { Card, CardContent } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge' import { Badge } from '@/components/ui/badge'
import PageHero from '@/components/layout/PageHero.vue'
import PageSection from '@/components/layout/PageSection.vue'
import PageShell from '@/components/layout/PageShell.vue'
const { t, tm, rt } = useI18n() const { t, tm, rt } = useI18n()
@ -62,21 +59,29 @@ const exteriorItems = tm('accommodation.exterior.items') as string[]
</script> </script>
<template> <template>
<PageShell> <div>
<!-- Hero --> <!-- Hero -->
<PageHero <section class="border-b border-border bg-secondary/40">
:kicker="t('accommodation.hero.kicker')" <div class="mx-auto max-w-4xl px-4 py-16 lg:px-6 lg:py-20">
:title="t('accommodation.hero.title')" <p class="text-xs uppercase tracking-[0.2em] text-accent">
:lede="t('accommodation.hero.lede')" {{ t('accommodation.hero.kicker') }}
/> </p>
<h1 class="mt-3 font-serif text-5xl font-semibold leading-tight tracking-tight md:text-6xl">
{{ t('accommodation.hero.title') }}
</h1>
<p class="mt-6 max-w-prose text-lg leading-relaxed text-foreground/90">
{{ t('accommodation.hero.lede') }}
</p>
</div>
</section>
<!-- Rooms --> <!-- Rooms -->
<PageSection> <section class="mx-auto max-w-7xl px-4 py-16 lg:px-6">
<div class="max-w-3xl"> <div class="max-w-3xl">
<h2 class="font-display text-2xl uppercase tracking-wider md:text-3xl"> <h2 class="font-serif text-3xl font-semibold tracking-tight">
{{ t('accommodation.rooms.title') }} {{ t('accommodation.rooms.title') }}
</h2> </h2>
<p class="mt-3 text-foreground/80">{{ t('accommodation.rooms.subtitle') }}</p> <p class="mt-3 text-muted-foreground">{{ t('accommodation.rooms.subtitle') }}</p>
</div> </div>
<ul class="mt-8 grid gap-6 md:grid-cols-2 lg:grid-cols-3"> <ul class="mt-8 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
<li v-for="room in rooms" :key="room.key"> <li v-for="room in rooms" :key="room.key">
@ -89,7 +94,7 @@ const exteriorItems = tm('accommodation.exterior.items') as string[]
/> />
<CardContent class="p-5 pt-5"> <CardContent class="p-5 pt-5">
<div class="flex items-baseline justify-between gap-3"> <div class="flex items-baseline justify-between gap-3">
<h3 class="font-display text-lg uppercase tracking-wider"> <h3 class="font-serif text-xl font-semibold">
{{ t(`accommodation.rooms.${room.key}.name`) }} {{ t(`accommodation.rooms.${room.key}.name`) }}
</h3> </h3>
<Badge <Badge
@ -110,15 +115,16 @@ const exteriorItems = tm('accommodation.exterior.items') as string[]
</Card> </Card>
</li> </li>
</ul> </ul>
</PageSection> </section>
<!-- Cabins --> <!-- Cabins -->
<PageSection> <section class="border-y border-border bg-card">
<div class="mx-auto max-w-7xl px-4 py-16 lg:px-6">
<div class="max-w-3xl"> <div class="max-w-3xl">
<h2 class="font-display text-2xl uppercase tracking-wider md:text-3xl"> <h2 class="font-serif text-3xl font-semibold tracking-tight">
{{ t('accommodation.cabins.title') }} {{ t('accommodation.cabins.title') }}
</h2> </h2>
<p class="mt-3 text-foreground/80">{{ t('accommodation.cabins.subtitle') }}</p> <p class="mt-3 text-muted-foreground">{{ t('accommodation.cabins.subtitle') }}</p>
</div> </div>
<ul class="mt-8 grid gap-6 md:grid-cols-3"> <ul class="mt-8 grid gap-6 md:grid-cols-3">
<li v-for="cabin in cabins" :key="cabin.key"> <li v-for="cabin in cabins" :key="cabin.key">
@ -130,7 +136,7 @@ const exteriorItems = tm('accommodation.exterior.items') as string[]
loading="lazy" loading="lazy"
/> />
<div class="flex items-baseline justify-between gap-3 p-5"> <div class="flex items-baseline justify-between gap-3 p-5">
<h3 class="font-display text-lg uppercase tracking-wider"> <h3 class="font-serif text-xl font-semibold">
{{ t(`accommodation.cabins.${cabin.key}`) }} {{ t(`accommodation.cabins.${cabin.key}`) }}
</h3> </h3>
<Badge <Badge
@ -143,15 +149,16 @@ const exteriorItems = tm('accommodation.exterior.items') as string[]
</Card> </Card>
</li> </li>
</ul> </ul>
</PageSection> </div>
</section>
<!-- Exterior, coming next --> <!-- Exterior, coming next -->
<PageSection> <section class="mx-auto max-w-7xl px-4 py-16 lg:px-6">
<div class="max-w-3xl"> <div class="max-w-3xl">
<h2 class="font-display text-2xl uppercase tracking-wider md:text-3xl"> <h2 class="font-serif text-3xl font-semibold tracking-tight">
{{ t('accommodation.exterior.title') }} {{ t('accommodation.exterior.title') }}
</h2> </h2>
<p class="mt-3 text-foreground/80">{{ t('accommodation.exterior.subtitle') }}</p> <p class="mt-3 text-muted-foreground">{{ t('accommodation.exterior.subtitle') }}</p>
</div> </div>
<ul class="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3"> <ul class="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
<li v-for="(item, i) in exteriorItems" :key="i"> <li v-for="(item, i) in exteriorItems" :key="i">
@ -160,11 +167,11 @@ const exteriorItems = tm('accommodation.exterior.items') as string[]
</Card> </Card>
</li> </li>
</ul> </ul>
</PageSection> </section>
<!-- CTAs --> <!-- CTAs -->
<PageSection padding="compact"> <section class="border-t border-border bg-secondary/30">
<div class="flex flex-wrap items-center gap-3"> <div class="mx-auto flex max-w-7xl flex-wrap items-center gap-3 px-4 py-12 lg:px-6">
<Button as-child> <Button as-child>
<a href="mailto:chateaudufaune@ariege.io?subject=R%C3%A9servation%20%E2%80%94%20Ch%C3%A2teau%20du%20Faune"> <a href="mailto:chateaudufaune@ariege.io?subject=R%C3%A9servation%20%E2%80%94%20Ch%C3%A2teau%20du%20Faune">
{{ t('accommodation.ctaReserve') }} {{ t('accommodation.ctaReserve') }}
@ -174,6 +181,6 @@ const exteriorItems = tm('accommodation.exterior.items') as string[]
<RouterLink to="/reservations">← {{ t('accommodation.ctaBack') }}</RouterLink> <RouterLink to="/reservations">← {{ t('accommodation.ctaBack') }}</RouterLink>
</Button> </Button>
</div> </div>
</PageSection> </section>
</PageShell> </div>
</template> </template>

67
src/views/ConceptView.vue
View file

@ -2,9 +2,6 @@
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { RouterLink } from 'vue-router' import { RouterLink } from 'vue-router'
import { Card } from '@/components/ui/card' import { Card } from '@/components/ui/card'
import PageHero from '@/components/layout/PageHero.vue'
import PageSection from '@/components/layout/PageSection.vue'
import PageShell from '@/components/layout/PageShell.vue'
const { t } = useI18n() const { t } = useI18n()
@ -16,27 +13,35 @@ const pillars = [
</script> </script>
<template> <template>
<PageShell> <div>
<!-- Hero --> <!-- Hero -->
<PageHero <section class="border-b border-border bg-secondary/40">
:kicker="t('concept.hero.kicker')" <div class="mx-auto max-w-4xl px-4 py-16 lg:px-6 lg:py-24">
:title="t('concept.hero.title')" <p class="text-xs uppercase tracking-[0.2em] text-accent">
:lede="t('concept.hero.lede')" {{ t('concept.hero.kicker') }}
/> </p>
<h1 class="mt-3 font-serif text-5xl font-semibold leading-tight tracking-tight md:text-6xl">
{{ t('concept.hero.title') }}
</h1>
<p class="mt-6 max-w-prose text-lg leading-relaxed text-foreground/90">
{{ t('concept.hero.lede') }}
</p>
</div>
</section>
<!-- Mission --> <!-- Mission -->
<PageSection width="narrow"> <section class="mx-auto max-w-4xl px-4 py-16 lg:px-6">
<h2 class="font-display text-2xl uppercase tracking-wider md:text-3xl"> <h2 class="font-serif text-3xl font-semibold tracking-tight">
{{ t('concept.mission.title') }} {{ t('concept.mission.title') }}
</h2> </h2>
<p class="mt-5 max-w-prose text-base leading-relaxed"> <p class="mt-5 max-w-prose text-base leading-relaxed">
{{ t('concept.mission.body') }} {{ t('concept.mission.body') }}
</p> </p>
</PageSection> </section>
<!-- Land art & residencies --> <!-- Land art & residencies -->
<PageSection> <section class="bg-card border-y border-border">
<div class="grid items-center gap-10 lg:grid-cols-2 lg:gap-14"> <div class="mx-auto grid max-w-7xl gap-10 px-4 py-16 lg:grid-cols-2 lg:gap-14 lg:px-6">
<img <img
src="https://static.wixstatic.com/media/11062b_7c683da5bcbd44d7b0d2ddbaf4693625~mv2.jpg" src="https://static.wixstatic.com/media/11062b_7c683da5bcbd44d7b0d2ddbaf4693625~mv2.jpg"
alt="" alt=""
@ -44,7 +49,7 @@ const pillars = [
loading="lazy" loading="lazy"
/> />
<div> <div>
<h2 class="font-display text-2xl uppercase tracking-wider md:text-3xl"> <h2 class="font-serif text-3xl font-semibold tracking-tight">
{{ t('concept.landArt.title') }} {{ t('concept.landArt.title') }}
</h2> </h2>
<p class="mt-5 max-w-prose leading-relaxed">{{ t('concept.landArt.body') }}</p> <p class="mt-5 max-w-prose leading-relaxed">{{ t('concept.landArt.body') }}</p>
@ -56,13 +61,13 @@ const pillars = [
</RouterLink> </RouterLink>
</div> </div>
</div> </div>
</PageSection> </section>
<!-- Farmstand & boutique --> <!-- Farmstand & boutique -->
<PageSection> <section class="mx-auto max-w-7xl px-4 py-16 lg:px-6">
<div class="grid items-center gap-10 lg:grid-cols-2 lg:gap-14"> <div class="grid gap-10 lg:grid-cols-2 lg:gap-14">
<div class="order-2 lg:order-1"> <div class="order-2 lg:order-1">
<h2 class="font-display text-2xl uppercase tracking-wider md:text-3xl"> <h2 class="font-serif text-3xl font-semibold tracking-tight">
{{ t('concept.farmstand.title') }} {{ t('concept.farmstand.title') }}
</h2> </h2>
<p class="mt-5 max-w-prose leading-relaxed">{{ t('concept.farmstand.body') }}</p> <p class="mt-5 max-w-prose leading-relaxed">{{ t('concept.farmstand.body') }}</p>
@ -80,19 +85,20 @@ const pillars = [
loading="lazy" loading="lazy"
/> />
</div> </div>
</PageSection> </section>
<!-- Slow farming --> <!-- Slow farming -->
<PageSection> <section class="bg-secondary/30 border-y border-border">
<div class="mx-auto max-w-7xl px-4 py-16 lg:px-6">
<div class="max-w-3xl"> <div class="max-w-3xl">
<h2 class="font-display text-2xl uppercase tracking-wider md:text-3xl"> <h2 class="font-serif text-3xl font-semibold tracking-tight">
{{ t('concept.slowFarming.title') }} {{ t('concept.slowFarming.title') }}
</h2> </h2>
<p class="mt-3 text-foreground/80">{{ t('concept.slowFarming.body') }}</p> <p class="mt-3 text-muted-foreground">{{ t('concept.slowFarming.body') }}</p>
</div> </div>
<div class="mt-8 grid gap-6 md:grid-cols-3"> <div class="mt-8 grid gap-6 md:grid-cols-3">
<Card v-for="p in pillars" :key="p.key" class="p-6"> <Card v-for="p in pillars" :key="p.key" class="p-6">
<h3 class="font-display text-lg uppercase tracking-wider"> <h3 class="font-serif text-xl font-semibold">
{{ t(`concept.slowFarming.${p.key}Title`) }} {{ t(`concept.slowFarming.${p.key}Title`) }}
</h3> </h3>
<p class="mt-3 text-sm leading-relaxed text-foreground/85"> <p class="mt-3 text-sm leading-relaxed text-foreground/85">
@ -100,11 +106,12 @@ const pillars = [
</p> </p>
</Card> </Card>
</div> </div>
</PageSection> </div>
</section>
<!-- Events in nature --> <!-- Events in nature -->
<PageSection> <section class="mx-auto max-w-7xl px-4 py-16 lg:px-6">
<div class="grid items-center gap-10 lg:grid-cols-2 lg:gap-14"> <div class="grid gap-10 lg:grid-cols-2 lg:gap-14">
<img <img
src="https://static.wixstatic.com/media/11062b_a56b905cae7c424c84cbaa1677d59ec5~mv2.jpg" src="https://static.wixstatic.com/media/11062b_a56b905cae7c424c84cbaa1677d59ec5~mv2.jpg"
alt="" alt=""
@ -112,7 +119,7 @@ const pillars = [
loading="lazy" loading="lazy"
/> />
<div> <div>
<h2 class="font-display text-2xl uppercase tracking-wider md:text-3xl"> <h2 class="font-serif text-3xl font-semibold tracking-tight">
{{ t('concept.events.title') }} {{ t('concept.events.title') }}
</h2> </h2>
<p class="mt-5 max-w-prose leading-relaxed">{{ t('concept.events.body') }}</p> <p class="mt-5 max-w-prose leading-relaxed">{{ t('concept.events.body') }}</p>
@ -124,6 +131,6 @@ const pillars = [
</RouterLink> </RouterLink>
</div> </div>
</div> </div>
</PageSection> </section>
</PageShell> </div>
</template> </template>

32
src/views/EventsView.vue
View file

@ -4,9 +4,6 @@ import { RouterLink } from 'vue-router'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card' import { Card, CardContent } from '@/components/ui/card'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert' import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
import PageHero from '@/components/layout/PageHero.vue'
import PageSection from '@/components/layout/PageSection.vue'
import PageShell from '@/components/layout/PageShell.vue'
const { t } = useI18n() const { t } = useI18n()
@ -40,12 +37,18 @@ const events = [
</script> </script>
<template> <template>
<PageShell> <div>
<PageHero <section class="border-b border-border bg-secondary/40">
:kicker="t('events.page.kicker')" <div class="mx-auto max-w-4xl px-4 py-16 lg:px-6 lg:py-20">
:title="t('events.page.title')" <p class="text-xs uppercase tracking-[0.2em] text-accent">
:lede="t('events.page.lede')" {{ t('events.page.kicker') }}
> </p>
<h1 class="mt-3 font-serif text-5xl font-semibold leading-tight tracking-tight md:text-6xl">
{{ t('events.page.title') }}
</h1>
<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"> <Alert class="mt-8 max-w-prose bg-card text-foreground/85">
<AlertTitle class="text-xs uppercase tracking-wider text-accent"> <AlertTitle class="text-xs uppercase tracking-wider text-accent">
{{ t('events.page.noteHeading') }} {{ t('events.page.noteHeading') }}
@ -54,9 +57,10 @@ const events = [
{{ t('events.page.calendarNote') }} {{ t('events.page.calendarNote') }}
</AlertDescription> </AlertDescription>
</Alert> </Alert>
</PageHero> </div>
</section>
<PageSection> <section class="mx-auto max-w-7xl px-4 py-16 lg:px-6">
<ul class="grid gap-6 md:grid-cols-2 lg:grid-cols-3"> <ul class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
<li v-for="e in events" :key="e.key"> <li v-for="e in events" :key="e.key">
<component <component
@ -75,7 +79,7 @@ const events = [
<p class="text-xs uppercase tracking-wider text-accent"> <p class="text-xs uppercase tracking-wider text-accent">
{{ t(`events.${e.key}.date`) }} {{ t(`events.${e.key}.date`) }}
</p> </p>
<h2 class="mt-1 font-display text-lg uppercase tracking-wider"> <h2 class="mt-1 font-serif text-xl font-semibold">
{{ t(`events.${e.key}.title`) }} {{ t(`events.${e.key}.title`) }}
</h2> </h2>
<p class="mt-1 text-xs text-muted-foreground"> <p class="mt-1 text-xs text-muted-foreground">
@ -95,6 +99,6 @@ const events = [
<RouterLink to="/symposium">{{ t('nav.symposium') }} →</RouterLink> <RouterLink to="/symposium">{{ t('nav.symposium') }} →</RouterLink>
</Button> </Button>
</div> </div>
</PageSection> </section>
</PageShell> </div>
</template> </template>

29
src/views/GalleryView.vue
View file

@ -1,9 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { Card } from '@/components/ui/card' import { Card } from '@/components/ui/card'
import PageHero from '@/components/layout/PageHero.vue'
import PageSection from '@/components/layout/PageSection.vue'
import PageShell from '@/components/layout/PageShell.vue'
const { t } = useI18n() const { t } = useI18n()
@ -36,14 +33,20 @@ const items = [
</script> </script>
<template> <template>
<PageShell> <div>
<PageHero <section class="border-b border-border bg-secondary/40">
:kicker="t('gallery.kicker')" <div class="mx-auto max-w-4xl px-4 py-16 lg:px-6 lg:py-20">
:title="t('gallery.title')" <p class="text-xs uppercase tracking-[0.2em] text-accent">{{ t('gallery.kicker') }}</p>
:lede="t('gallery.lede')" <h1 class="mt-3 font-serif text-5xl font-semibold leading-tight tracking-tight md:text-6xl">
/> {{ t('gallery.title') }}
</h1>
<p class="mt-6 max-w-prose text-lg leading-relaxed text-foreground/90">
{{ t('gallery.lede') }}
</p>
</div>
</section>
<PageSection> <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"> <ul class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
<li v-for="item in items" :key="item.key" class="group"> <li v-for="item in items" :key="item.key" class="group">
<Card class="overflow-hidden"> <Card class="overflow-hidden">
@ -55,7 +58,7 @@ const items = [
loading="lazy" loading="lazy"
/> />
<figcaption <figcaption
class="border-t border-border px-4 py-3 text-sm text-foreground/85" class="border-t border-border px-4 py-3 font-serif text-sm text-foreground/85"
> >
{{ t(`gallery.captions.${item.key}`) }} {{ t(`gallery.captions.${item.key}`) }}
</figcaption> </figcaption>
@ -63,6 +66,6 @@ const items = [
</Card> </Card>
</li> </li>
</ul> </ul>
</PageSection> </section>
</PageShell> </div>
</template> </template>

41
src/views/LongStaysView.vue
View file

@ -3,9 +3,6 @@ import { useI18n } from 'vue-i18n'
import { RouterLink } from 'vue-router' import { RouterLink } from 'vue-router'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card' import { Card } from '@/components/ui/card'
import PageHero from '@/components/layout/PageHero.vue'
import PageSection from '@/components/layout/PageSection.vue'
import PageShell from '@/components/layout/PageShell.vue'
const { t } = useI18n() const { t } = useI18n()
@ -13,22 +10,30 @@ const paths = ['exchange', 'rental', 'partial', 'funded'] as const
</script> </script>
<template> <template>
<PageShell> <div>
<!-- Hero --> <!-- Hero -->
<PageHero <section class="border-b border-border bg-secondary/40">
:kicker="t('longStays.hero.kicker')" <div class="mx-auto max-w-4xl px-4 py-16 lg:px-6 lg:py-20">
:title="t('longStays.hero.title')" <p class="text-xs uppercase tracking-[0.2em] text-accent">
:lede="t('longStays.hero.lede')" {{ t('longStays.hero.kicker') }}
/> </p>
<h1 class="mt-3 font-serif text-5xl font-semibold leading-tight tracking-tight md:text-6xl">
{{ t('longStays.hero.title') }}
</h1>
<p class="mt-6 max-w-prose text-lg leading-relaxed text-foreground/90">
{{ t('longStays.hero.lede') }}
</p>
</div>
</section>
<!-- Paths --> <!-- Paths -->
<PageSection> <section class="mx-auto max-w-7xl px-4 py-16 lg:px-6">
<h2 class="font-display text-2xl uppercase tracking-wider md:text-3xl"> <h2 class="font-serif text-3xl font-semibold tracking-tight">
{{ t('longStays.pathsTitle') }} {{ t('longStays.pathsTitle') }}
</h2> </h2>
<div class="mt-8 grid gap-6 md:grid-cols-2"> <div class="mt-8 grid gap-6 md:grid-cols-2">
<Card v-for="key in paths" :key="key" class="p-6"> <Card v-for="key in paths" :key="key" class="p-6">
<h3 class="font-display text-lg uppercase tracking-wider"> <h3 class="font-serif text-xl font-semibold">
{{ t(`longStays.paths.${key}Title`) }} {{ t(`longStays.paths.${key}Title`) }}
</h3> </h3>
<p class="mt-3 text-base leading-relaxed text-foreground/85"> <p class="mt-3 text-base leading-relaxed text-foreground/85">
@ -36,11 +41,11 @@ const paths = ['exchange', 'rental', 'partial', 'funded'] as const
</p> </p>
</Card> </Card>
</div> </div>
</PageSection> </section>
<!-- Symposium teaser --> <!-- Symposium teaser -->
<PageSection> <section class="border-t border-border bg-secondary/30">
<div class="grid items-center gap-10 lg:grid-cols-2 lg:gap-14"> <div class="mx-auto grid max-w-7xl items-center gap-10 px-4 py-16 lg:grid-cols-2 lg:gap-14 lg:px-6">
<img <img
src="https://static.wixstatic.com/media/11062b_322db9c671074a6cb3d76de93ac013f0~mv2.jpg" src="https://static.wixstatic.com/media/11062b_322db9c671074a6cb3d76de93ac013f0~mv2.jpg"
alt="" alt=""
@ -48,7 +53,7 @@ const paths = ['exchange', 'rental', 'partial', 'funded'] as const
loading="lazy" loading="lazy"
/> />
<div> <div>
<h2 class="font-display text-2xl uppercase tracking-wider md:text-3xl"> <h2 class="font-serif text-3xl font-semibold tracking-tight">
{{ t('longStays.symposiumTeaser.title') }} {{ t('longStays.symposiumTeaser.title') }}
</h2> </h2>
<p class="mt-5 max-w-prose leading-relaxed"> <p class="mt-5 max-w-prose leading-relaxed">
@ -64,6 +69,6 @@ const paths = ['exchange', 'rental', 'partial', 'funded'] as const
</div> </div>
</div> </div>
</div> </div>
</PageSection> </section>
</PageShell> </div>
</template> </template>

41
src/views/MarketplaceView.vue
View file

@ -2,9 +2,6 @@
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card' import { Card } from '@/components/ui/card'
import PageHero from '@/components/layout/PageHero.vue'
import PageSection from '@/components/layout/PageSection.vue'
import PageShell from '@/components/layout/PageShell.vue'
const { t } = useI18n() const { t } = useI18n()
@ -12,20 +9,28 @@ const categories = ['fresh', 'pantry', 'craft'] as const
</script> </script>
<template> <template>
<PageShell> <div>
<PageHero <section class="border-b border-border bg-secondary/40">
:kicker="t('marketplace.kicker')" <div class="mx-auto max-w-4xl px-4 py-16 lg:px-6 lg:py-20">
:title="t('marketplace.title')" <p class="text-xs uppercase tracking-[0.2em] text-accent">
:lede="t('marketplace.lede')" {{ t('marketplace.kicker') }}
/> </p>
<h1 class="mt-3 font-serif text-5xl font-semibold leading-tight tracking-tight md:text-6xl">
{{ t('marketplace.title') }}
</h1>
<p class="mt-6 max-w-prose text-lg leading-relaxed text-foreground/90">
{{ t('marketplace.lede') }}
</p>
</div>
</section>
<PageSection> <section class="mx-auto max-w-7xl px-4 py-16 lg:px-6">
<h2 class="font-display text-2xl uppercase tracking-wider md:text-3xl"> <h2 class="font-serif text-3xl font-semibold tracking-tight">
{{ t('marketplace.categoriesTitle') }} {{ t('marketplace.categoriesTitle') }}
</h2> </h2>
<div class="mt-8 grid gap-6 md:grid-cols-3"> <div class="mt-8 grid gap-6 md:grid-cols-3">
<Card v-for="key in categories" :key="key" class="border-dashed p-6"> <Card v-for="key in categories" :key="key" class="border-dashed p-6">
<h3 class="font-display text-lg uppercase tracking-wider"> <h3 class="font-serif text-xl font-semibold">
{{ t(`marketplace.categories.${key}Title`) }} {{ t(`marketplace.categories.${key}Title`) }}
</h3> </h3>
<p class="mt-3 text-base leading-relaxed text-foreground/85"> <p class="mt-3 text-base leading-relaxed text-foreground/85">
@ -33,11 +38,11 @@ const categories = ['fresh', 'pantry', 'craft'] as const
</p> </p>
</Card> </Card>
</div> </div>
</PageSection> </section>
<PageSection width="narrow" padding="compact"> <section class="border-t border-border bg-secondary/30">
<div class="text-center"> <div class="mx-auto max-w-4xl px-4 py-12 text-center lg:px-6">
<p class="text-lg italic text-foreground/85"> <p class="font-serif text-lg italic text-foreground/85">
{{ t('marketplace.notice') }} {{ t('marketplace.notice') }}
</p> </p>
<Button as-child variant="outline" class="mt-6"> <Button as-child variant="outline" class="mt-6">
@ -46,6 +51,6 @@ const categories = ['fresh', 'pantry', 'craft'] as const
</a> </a>
</Button> </Button>
</div> </div>
</PageSection> </section>
</PageShell> </div>
</template> </template>

2
src/views/NotFoundView.vue
View file

@ -4,7 +4,7 @@ import { RouterLink } from 'vue-router'
<template> <template>
<article class="mx-auto max-w-3xl px-4 py-24 text-center"> <article class="mx-auto max-w-3xl px-4 py-24 text-center">
<h1 class="font-display text-6xl uppercase tracking-wider">404</h1> <h1 class="font-serif text-5xl font-semibold tracking-tight">404</h1>
<p class="mt-4 text-muted-foreground">Page introuvable / Page not found.</p> <p class="mt-4 text-muted-foreground">Page introuvable / Page not found.</p>
<RouterLink to="/" class="mt-8 inline-block text-sm underline hover:text-primary"> <RouterLink to="/" class="mt-8 inline-block text-sm underline hover:text-primary">
← Château du Faune ← Château du Faune

45
src/views/OpportunitiesView.vue
View file

@ -3,9 +3,6 @@ import { useI18n } from 'vue-i18n'
import { RouterLink } from 'vue-router' import { RouterLink } from 'vue-router'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card' import { Card } from '@/components/ui/card'
import PageHero from '@/components/layout/PageHero.vue'
import PageSection from '@/components/layout/PageSection.vue'
import PageShell from '@/components/layout/PageShell.vue'
const { t } = useI18n() const { t } = useI18n()
@ -22,26 +19,34 @@ const applyKeys = ['model', 'window', 'open'] as const
</script> </script>
<template> <template>
<PageShell> <div>
<!-- Hero --> <!-- Hero -->
<PageHero <section class="border-b border-border bg-secondary/40">
:kicker="t('opportunities.hero.kicker')" <div class="mx-auto max-w-4xl px-4 py-16 lg:px-6 lg:py-20">
:title="t('opportunities.hero.title')" <p class="text-xs uppercase tracking-[0.2em] text-accent">
:lede="t('opportunities.hero.lede')" {{ t('opportunities.hero.kicker') }}
/> </p>
<h1 class="mt-3 font-serif text-5xl font-semibold leading-tight tracking-tight md:text-6xl">
{{ t('opportunities.hero.title') }}
</h1>
<p class="mt-6 max-w-prose text-lg leading-relaxed text-foreground/90">
{{ t('opportunities.hero.lede') }}
</p>
</div>
</section>
<!-- Groups of positions --> <!-- Groups of positions -->
<PageSection> <section class="mx-auto max-w-7xl px-4 py-16 lg:px-6">
<div class="max-w-3xl"> <div class="max-w-3xl">
<h2 class="font-display text-2xl uppercase tracking-wider md:text-3xl"> <h2 class="font-serif text-3xl font-semibold tracking-tight">
{{ t('opportunities.groupsTitle') }} {{ t('opportunities.groupsTitle') }}
</h2> </h2>
<p class="mt-3 text-foreground/80">{{ t('opportunities.groupsSubtitle') }}</p> <p class="mt-3 text-muted-foreground">{{ t('opportunities.groupsSubtitle') }}</p>
</div> </div>
<ul class="mt-8 grid gap-6 md:grid-cols-2 lg:grid-cols-3"> <ul class="mt-8 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
<li v-for="key in groups" :key="key"> <li v-for="key in groups" :key="key">
<Card class="p-6"> <Card class="p-6">
<h3 class="font-display text-lg uppercase tracking-wider"> <h3 class="font-serif text-xl font-semibold">
{{ t(`opportunities.groups.${key}Title`) }} {{ t(`opportunities.groups.${key}Title`) }}
</h3> </h3>
<p class="mt-3 text-sm leading-relaxed text-foreground/85"> <p class="mt-3 text-sm leading-relaxed text-foreground/85">
@ -50,16 +55,17 @@ const applyKeys = ['model', 'window', 'open'] as const
</Card> </Card>
</li> </li>
</ul> </ul>
</PageSection> </section>
<!-- How we hire --> <!-- How we hire -->
<PageSection> <section class="border-t border-border bg-secondary/30">
<h2 class="font-display text-2xl uppercase tracking-wider md:text-3xl"> <div class="mx-auto max-w-7xl px-4 py-16 lg:px-6">
<h2 class="font-serif text-3xl font-semibold tracking-tight">
{{ t('opportunities.applyTitle') }} {{ t('opportunities.applyTitle') }}
</h2> </h2>
<div class="mt-8 grid gap-6 md:grid-cols-3"> <div class="mt-8 grid gap-6 md:grid-cols-3">
<Card v-for="key in applyKeys" :key="key" class="p-6"> <Card v-for="key in applyKeys" :key="key" class="p-6">
<h3 class="font-display text-lg uppercase tracking-wider"> <h3 class="font-serif text-lg font-semibold">
{{ t(`opportunities.apply.${key}Title`) }} {{ t(`opportunities.apply.${key}Title`) }}
</h3> </h3>
<p class="mt-3 text-sm leading-relaxed text-foreground/85"> <p class="mt-3 text-sm leading-relaxed text-foreground/85">
@ -77,6 +83,7 @@ const applyKeys = ['model', 'window', 'open'] as const
<RouterLink to="/symposium">{{ t('opportunities.ctaSymposium') }}</RouterLink> <RouterLink to="/symposium">{{ t('opportunities.ctaSymposium') }}</RouterLink>
</Button> </Button>
</div> </div>
</PageSection> </div>
</PageShell> </section>
</div>
</template> </template>

53
src/views/ReservationsView.vue
View file

@ -3,9 +3,6 @@ import { useI18n } from 'vue-i18n'
import { RouterLink } from 'vue-router' import { RouterLink } from 'vue-router'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card' import { Card } from '@/components/ui/card'
import PageHero from '@/components/layout/PageHero.vue'
import PageSection from '@/components/layout/PageSection.vue'
import PageShell from '@/components/layout/PageShell.vue'
const { t } = useI18n() const { t } = useI18n()
@ -13,22 +10,30 @@ const kinds = ['weekend', 'retreat', 'gathering', 'residency'] as const
</script> </script>
<template> <template>
<PageShell> <div>
<!-- Hero --> <!-- Hero -->
<PageHero <section class="border-b border-border bg-secondary/40">
:kicker="t('reservations.hero.kicker')" <div class="mx-auto max-w-4xl px-4 py-16 lg:px-6 lg:py-20">
:title="t('reservations.hero.title')" <p class="text-xs uppercase tracking-[0.2em] text-accent">
:lede="t('reservations.hero.lede')" {{ t('reservations.hero.kicker') }}
/> </p>
<h1 class="mt-3 font-serif text-5xl font-semibold leading-tight tracking-tight md:text-6xl">
{{ t('reservations.hero.title') }}
</h1>
<p class="mt-6 max-w-prose text-lg leading-relaxed text-foreground/90">
{{ t('reservations.hero.lede') }}
</p>
</div>
</section>
<!-- Kinds of stays --> <!-- Kinds of stays -->
<PageSection> <section class="mx-auto max-w-7xl px-4 py-16 lg:px-6">
<h2 class="font-display text-2xl uppercase tracking-wider md:text-3xl"> <h2 class="font-serif text-3xl font-semibold tracking-tight">
{{ t('reservations.kindsTitle') }} {{ t('reservations.kindsTitle') }}
</h2> </h2>
<div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-4"> <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"> <Card v-for="key in kinds" :key="key" class="p-6">
<h3 class="font-display text-lg uppercase tracking-wider"> <h3 class="font-serif text-xl font-semibold">
{{ t(`reservations.kinds.${key}Title`) }} {{ t(`reservations.kinds.${key}Title`) }}
</h3> </h3>
<p class="mt-3 text-sm leading-relaxed text-foreground/85"> <p class="mt-3 text-sm leading-relaxed text-foreground/85">
@ -36,32 +41,34 @@ const kinds = ['weekend', 'retreat', 'gathering', 'residency'] as const
</p> </p>
</Card> </Card>
</div> </div>
</PageSection> </section>
<!-- Values --> <!-- Values -->
<PageSection width="narrow"> <section class="border-y border-border bg-card">
<h2 class="font-display text-2xl uppercase tracking-wider md:text-3xl"> <div class="mx-auto max-w-4xl px-4 py-16 lg:px-6">
<h2 class="font-serif text-3xl font-semibold tracking-tight">
{{ t('reservations.valuesTitle') }} {{ t('reservations.valuesTitle') }}
</h2> </h2>
<p class="mt-5 max-w-prose text-base leading-relaxed"> <p class="mt-5 max-w-prose text-base leading-relaxed">
{{ t('reservations.valuesBody') }} {{ t('reservations.valuesBody') }}
</p> </p>
</PageSection> </div>
</section>
<!-- Booking form placeholder + contact card --> <!-- Booking form placeholder + contact card -->
<PageSection> <section class="mx-auto max-w-7xl px-4 py-16 lg:px-6">
<div class="grid gap-10 lg:grid-cols-5 lg:gap-14"> <div class="grid gap-10 lg:grid-cols-5 lg:gap-14">
<div class="lg:col-span-3"> <div class="lg:col-span-3">
<h2 class="font-display text-2xl uppercase tracking-wider md:text-3xl"> <h2 class="font-serif text-3xl font-semibold tracking-tight">
{{ t('reservations.formTitle') }} {{ t('reservations.formTitle') }}
</h2> </h2>
<p class="mt-3 max-w-prose text-foreground/80"> <p class="mt-3 max-w-prose text-muted-foreground">
{{ t('reservations.formSubtitle') }} {{ t('reservations.formSubtitle') }}
</p> </p>
<div <div
class="mt-6 flex aspect-[4/3] items-center justify-center rounded-lg border border-dashed border-border bg-secondary/30 p-6 text-center text-muted-foreground" class="mt-6 flex aspect-[4/3] items-center justify-center rounded-lg border border-dashed border-border bg-secondary/30 p-6 text-center text-muted-foreground"
> >
<p class="italic">{{ t('reservations.formPlaceholder') }}</p> <p class="font-serif italic">{{ t('reservations.formPlaceholder') }}</p>
</div> </div>
<div class="mt-6 flex flex-wrap items-center gap-3"> <div class="mt-6 flex flex-wrap items-center gap-3">
<Button as-child> <Button as-child>
@ -78,7 +85,7 @@ const kinds = ['weekend', 'retreat', 'gathering', 'residency'] as const
</div> </div>
<Card class="p-6 lg:col-span-2"> <Card class="p-6 lg:col-span-2">
<h3 class="font-display text-lg uppercase tracking-wider"> <h3 class="font-serif text-xl font-semibold">
{{ t('reservations.contactCard.title') }} {{ t('reservations.contactCard.title') }}
</h3> </h3>
<dl class="mt-4 space-y-4 text-sm"> <dl class="mt-4 space-y-4 text-sm">
@ -110,6 +117,6 @@ const kinds = ['weekend', 'retreat', 'gathering', 'residency'] as const
</dl> </dl>
</Card> </Card>
</div> </div>
</PageSection> </section>
</PageShell> </div>
</template> </template>

64
src/views/SymposiumView.vue
View file

@ -3,9 +3,6 @@ import { useI18n } from 'vue-i18n'
import { RouterLink } from 'vue-router' import { RouterLink } from 'vue-router'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card' import { Card } from '@/components/ui/card'
import PageHero from '@/components/layout/PageHero.vue'
import PageSection from '@/components/layout/PageSection.vue'
import PageShell from '@/components/layout/PageShell.vue'
const { t } = useI18n() const { t } = useI18n()
@ -14,44 +11,54 @@ const applySteps = ['stepOne', 'stepTwo', 'stepThree'] as const
</script> </script>
<template> <template>
<PageShell> <div>
<!-- Hero --> <!-- Hero -->
<PageHero <section class="border-b border-border bg-secondary/40">
:kicker="t('symposium.hero.kicker')" <div class="mx-auto grid max-w-7xl gap-10 px-4 py-16 lg:grid-cols-2 lg:gap-14 lg:px-6 lg:py-20">
:title="t('symposium.hero.title')" <div>
:lede="t('symposium.hero.lede')" <p class="text-xs uppercase tracking-[0.2em] text-accent">
{{ t('symposium.hero.kicker') }}
</p>
<h1
class="mt-3 font-serif text-5xl font-semibold leading-tight tracking-tight md:text-6xl"
> >
<p class="mt-6 inline-block rounded-md bg-card px-3 py-2 text-base"> {{ t('symposium.hero.title') }}
</h1>
<p class="mt-6 max-w-prose text-lg leading-relaxed text-foreground/90">
{{ t('symposium.hero.lede') }}
</p>
<p class="mt-6 inline-block rounded-md bg-card px-3 py-2 font-serif text-base">
{{ t('symposium.hero.dates') }} {{ t('symposium.hero.dates') }}
</p> </p>
<template #aside> </div>
<img <img
src="https://static.wixstatic.com/media/f1cbb8_72455a57197944e2b3cd2d895d459ba0~mv2.jpg" src="https://static.wixstatic.com/media/f1cbb8_72455a57197944e2b3cd2d895d459ba0~mv2.jpg"
alt="" alt=""
class="aspect-[4/3] w-full rounded-lg object-cover" class="aspect-[4/3] w-full rounded-lg object-cover"
loading="lazy" loading="lazy"
/> />
</template> </div>
</PageHero> </section>
<!-- Overview --> <!-- Overview -->
<PageSection width="narrow"> <section class="mx-auto max-w-4xl px-4 py-16 lg:px-6">
<h2 class="font-display text-2xl uppercase tracking-wider md:text-3xl"> <h2 class="font-serif text-3xl font-semibold tracking-tight">
{{ t('symposium.overview.title') }} {{ t('symposium.overview.title') }}
</h2> </h2>
<p class="mt-5 max-w-prose text-base leading-relaxed"> <p class="mt-5 max-w-prose text-base leading-relaxed">
{{ t('symposium.overview.body') }} {{ t('symposium.overview.body') }}
</p> </p>
</PageSection> </section>
<!-- What's included --> <!-- What's included -->
<PageSection> <section class="border-y border-border bg-card">
<h2 class="font-display text-2xl uppercase tracking-wider md:text-3xl"> <div class="mx-auto max-w-7xl px-4 py-16 lg:px-6">
<h2 class="font-serif text-3xl font-semibold tracking-tight">
{{ t('symposium.includedTitle') }} {{ t('symposium.includedTitle') }}
</h2> </h2>
<div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-4"> <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"> <Card v-for="key in included" :key="key" class="bg-background p-6">
<h3 class="font-display text-lg uppercase tracking-wider"> <h3 class="font-serif text-lg font-semibold">
{{ t(`symposium.included.${key}Title`) }} {{ t(`symposium.included.${key}Title`) }}
</h3> </h3>
<p class="mt-3 text-sm leading-relaxed text-foreground/85"> <p class="mt-3 text-sm leading-relaxed text-foreground/85">
@ -59,27 +66,29 @@ const applySteps = ['stepOne', 'stepTwo', 'stepThree'] as const
</p> </p>
</Card> </Card>
</div> </div>
</PageSection> </div>
</section>
<!-- Eligibility --> <!-- Eligibility -->
<PageSection width="narrow"> <section class="mx-auto max-w-4xl px-4 py-16 lg:px-6">
<h2 class="font-display text-2xl uppercase tracking-wider md:text-3xl"> <h2 class="font-serif text-3xl font-semibold tracking-tight">
{{ t('symposium.eligibility.title') }} {{ t('symposium.eligibility.title') }}
</h2> </h2>
<p class="mt-5 max-w-prose text-base leading-relaxed"> <p class="mt-5 max-w-prose text-base leading-relaxed">
{{ t('symposium.eligibility.body') }} {{ t('symposium.eligibility.body') }}
</p> </p>
</PageSection> </section>
<!-- How to apply --> <!-- How to apply -->
<PageSection> <section class="border-t border-border bg-secondary/30">
<h2 class="font-display text-2xl uppercase tracking-wider md:text-3xl"> <div class="mx-auto max-w-7xl px-4 py-16 lg:px-6">
<h2 class="font-serif text-3xl font-semibold tracking-tight">
{{ t('symposium.applyTitle') }} {{ t('symposium.applyTitle') }}
</h2> </h2>
<ol class="mt-8 grid gap-6 md:grid-cols-3"> <ol class="mt-8 grid gap-6 md:grid-cols-3">
<li v-for="step in applySteps" :key="step"> <li v-for="step in applySteps" :key="step">
<Card class="p-6"> <Card class="p-6">
<h3 class="font-display text-lg uppercase tracking-wider"> <h3 class="font-serif text-lg font-semibold">
{{ t(`symposium.apply.${step}Title`) }} {{ t(`symposium.apply.${step}Title`) }}
</h3> </h3>
<p class="mt-3 text-sm leading-relaxed text-foreground/85"> <p class="mt-3 text-sm leading-relaxed text-foreground/85">
@ -96,6 +105,7 @@ const applySteps = ['stepOne', 'stepTwo', 'stepThree'] as const
<a href="mailto:chateaudufaune@ariege.io">{{ t('symposium.ctaContact') }}</a> <a href="mailto:chateaudufaune@ariege.io">{{ t('symposium.ctaContact') }}</a>
</Button> </Button>
</div> </div>
</PageSection> </div>
</PageShell> </section>
</div>
</template> </template>

65
src/views/VisionValuesView.vue
View file

@ -1,9 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { Card } from '@/components/ui/card' import { Card } from '@/components/ui/card'
import PageHero from '@/components/layout/PageHero.vue'
import PageSection from '@/components/layout/PageSection.vue'
import PageShell from '@/components/layout/PageShell.vue'
const { t } = useI18n() const { t } = useI18n()
@ -23,36 +20,45 @@ const team = ['patrick', 'coco', 'charlie'] as const
</script> </script>
<template> <template>
<PageShell> <div>
<!-- Hero --> <!-- Hero -->
<PageHero <section class="border-b border-border bg-secondary/40">
:kicker="t('vision.hero.kicker')" <div class="mx-auto max-w-4xl px-4 py-16 lg:px-6 lg:py-24">
:title="t('vision.hero.title')" <p class="text-xs uppercase tracking-[0.2em] text-accent">
:lede="t('vision.hero.lede')" {{ t('vision.hero.kicker') }}
/> </p>
<h1 class="mt-3 font-serif text-5xl font-semibold leading-tight tracking-tight md:text-6xl">
{{ t('vision.hero.title') }}
</h1>
<p class="mt-6 max-w-prose text-lg leading-relaxed text-foreground/90">
{{ t('vision.hero.lede') }}
</p>
</div>
</section>
<!-- Mission --> <!-- Mission -->
<PageSection width="narrow"> <section class="mx-auto max-w-4xl px-4 py-16 lg:px-6">
<h2 class="font-display text-2xl uppercase tracking-wider md:text-3xl"> <h2 class="font-serif text-3xl font-semibold tracking-tight">
{{ t('vision.mission.title') }} {{ t('vision.mission.title') }}
</h2> </h2>
<p class="mt-5 max-w-prose text-base leading-relaxed"> <p class="mt-5 max-w-prose text-base leading-relaxed">
{{ t('vision.mission.body') }} {{ t('vision.mission.body') }}
</p> </p>
</PageSection> </section>
<!-- Philosophy --> <!-- Philosophy -->
<PageSection> <section class="border-y border-border bg-card">
<div class="mx-auto max-w-7xl px-4 py-16 lg:px-6">
<div class="max-w-3xl"> <div class="max-w-3xl">
<h2 class="font-display text-2xl uppercase tracking-wider md:text-3xl"> <h2 class="font-serif text-3xl font-semibold tracking-tight">
{{ t('vision.philosophyTitle') }} {{ t('vision.philosophyTitle') }}
</h2> </h2>
<p class="mt-3 text-foreground/80">{{ t('vision.philosophySubtitle') }}</p> <p class="mt-3 text-muted-foreground">{{ t('vision.philosophySubtitle') }}</p>
</div> </div>
<div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-5"> <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"> <Card v-for="(p, i) in philosophy" :key="p" class="bg-background p-5">
<div class="font-display text-2xl text-accent">{{ i + 1 }}</div> <div class="font-serif text-2xl text-accent">{{ i + 1 }}</div>
<h3 class="mt-2 font-display text-lg uppercase tracking-wider"> <h3 class="mt-2 font-serif text-lg font-semibold">
{{ t(`vision.philosophy.${p}Title`) }} {{ t(`vision.philosophy.${p}Title`) }}
</h3> </h3>
<p class="mt-2 text-sm leading-relaxed text-foreground/85"> <p class="mt-2 text-sm leading-relaxed text-foreground/85">
@ -60,34 +66,36 @@ const team = ['patrick', 'coco', 'charlie'] as const
</p> </p>
</Card> </Card>
</div> </div>
</PageSection> </div>
</section>
<!-- Operational pillars --> <!-- Operational pillars -->
<PageSection> <section class="mx-auto max-w-7xl px-4 py-16 lg:px-6">
<div class="max-w-3xl"> <div class="max-w-3xl">
<h2 class="font-display text-2xl uppercase tracking-wider md:text-3xl"> <h2 class="font-serif text-3xl font-semibold tracking-tight">
{{ t('vision.pillarsTitle') }} {{ t('vision.pillarsTitle') }}
</h2> </h2>
<p class="mt-3 text-foreground/80">{{ t('vision.pillarsSubtitle') }}</p> <p class="mt-3 text-muted-foreground">{{ t('vision.pillarsSubtitle') }}</p>
</div> </div>
<div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"> <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"> <Card v-for="p in pillars" :key="p" class="p-6">
<h3 class="font-display text-lg uppercase tracking-wider">{{ t(`vision.pillars.${p}Title`) }}</h3> <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"> <p class="mt-3 text-sm leading-relaxed text-foreground/85">
{{ t(`vision.pillars.${p}Body`) }} {{ t(`vision.pillars.${p}Body`) }}
</p> </p>
</Card> </Card>
</div> </div>
</PageSection> </section>
<!-- Team --> <!-- Team -->
<PageSection> <section class="border-t border-border bg-secondary/30">
<h2 class="font-display text-2xl uppercase tracking-wider md:text-3xl"> <div class="mx-auto max-w-7xl px-4 py-16 lg:px-6">
<h2 class="font-serif text-3xl font-semibold tracking-tight">
{{ t('vision.teamTitle') }} {{ t('vision.teamTitle') }}
</h2> </h2>
<div class="mt-8 grid gap-6 md:grid-cols-3"> <div class="mt-8 grid gap-6 md:grid-cols-3">
<Card v-for="m in team" :key="m" class="p-6"> <Card v-for="m in team" :key="m" class="p-6">
<h3 class="font-display text-lg uppercase tracking-wider">{{ t(`vision.team.${m}Name`) }}</h3> <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"> <p class="mt-1 text-xs uppercase tracking-wider text-accent">
{{ t(`vision.team.${m}Role`) }} {{ t(`vision.team.${m}Role`) }}
</p> </p>
@ -96,6 +104,7 @@ const team = ['patrick', 'coco', 'charlie'] as const
</p> </p>
</Card> </Card>
</div> </div>
</PageSection> </div>
</PageShell> </section>
</div>
</template> </template>