feat(reservations): plan-your-visit + contact card
Hero, four "ways to stay" cards (weekend / week-long retreat / small gathering / residency), a brief house-style paragraph, a placeholder booking form panel, and a contact card with email, address and expected opening. Real booking form lands in a follow-up. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
02cc0e844c
commit
f1039dedd5
3 changed files with 182 additions and 4 deletions
|
|
@ -178,6 +178,38 @@
|
|||
"cta": "Write to us"
|
||||
}
|
||||
},
|
||||
"reservations": {
|
||||
"hero": {
|
||||
"kicker": "Reservations · Plan Your Visit",
|
||||
"title": "Come stay with us",
|
||||
"lede": "A weekend visit, a week-long retreat, a small gathering, or a quiet residency — there are several ways to spend time at the château."
|
||||
},
|
||||
"kindsTitle": "Ways to stay",
|
||||
"kinds": {
|
||||
"weekendTitle": "A weekend visit",
|
||||
"weekendBody": "Two or three nights to walk the grounds, sit at the farm table, and slow down.",
|
||||
"retreatTitle": "A week-long retreat",
|
||||
"retreatBody": "Time enough to settle in — solo or with a small group — and let a rhythm form.",
|
||||
"gatheringTitle": "Small gatherings",
|
||||
"gatheringBody": "We host workshops, ceremonies and intimate events that fit the spirit of the place.",
|
||||
"residencyTitle": "Residencies",
|
||||
"residencyBody": "Year-round residencies for artists, makers and stewards. See Long Stays for paths in."
|
||||
},
|
||||
"valuesTitle": "How we host",
|
||||
"valuesBody": "We welcome visits aligned with mindfulness, collaboration, reciprocity, balance and reverence. Drama-, drink- and drug-free. Children and quiet pets are welcome on request.",
|
||||
"formTitle": "Request a stay",
|
||||
"formSubtitle": "A proper booking form is on its way. In the meantime, write to us and we'll arrange dates by email.",
|
||||
"formPlaceholder": "Booking form — coming soon.",
|
||||
"contactCard": {
|
||||
"title": "Get in touch",
|
||||
"emailLabel": "Email",
|
||||
"addressLabel": "Address",
|
||||
"openingLabel": "Opening",
|
||||
"openingValue": "Fall 2026"
|
||||
},
|
||||
"ctaEmail": "Write to us",
|
||||
"ctaAccommodation": "See accommodation"
|
||||
},
|
||||
"opportunities": {
|
||||
"hero": {
|
||||
"kicker": "Collaborate · Opportunities",
|
||||
|
|
|
|||
|
|
@ -178,6 +178,38 @@
|
|||
"cta": "Nous écrire"
|
||||
}
|
||||
},
|
||||
"reservations": {
|
||||
"hero": {
|
||||
"kicker": "Réservations · Préparer votre visite",
|
||||
"title": "Venir séjourner",
|
||||
"lede": "Un weekend, une semaine de retraite, un petit rassemblement ou une résidence silencieuse — plusieurs façons de passer du temps au château."
|
||||
},
|
||||
"kindsTitle": "Modes de séjour",
|
||||
"kinds": {
|
||||
"weekendTitle": "Un weekend",
|
||||
"weekendBody": "Deux ou trois nuits pour parcourir les terres, s'asseoir à la table de la ferme, et ralentir.",
|
||||
"retreatTitle": "Une semaine de retraite",
|
||||
"retreatBody": "Assez de temps pour se poser — seul·e ou en petit groupe — et laisser un rythme se former.",
|
||||
"gatheringTitle": "Petits rassemblements",
|
||||
"gatheringBody": "Nous accueillons des ateliers, des cérémonies et des événements intimes en accord avec l'esprit du lieu.",
|
||||
"residencyTitle": "Résidences",
|
||||
"residencyBody": "Résidences toute l'année pour artistes, artisan·es et gardien·nes. Voir Séjours longue durée pour les voies d'entrée."
|
||||
},
|
||||
"valuesTitle": "Notre manière d'accueillir",
|
||||
"valuesBody": "Nous accueillons les séjours alignés sur la pleine présence, la collaboration, la réciprocité, l'équilibre et la révérence. Sans drama, sans alcool, sans drogue. Enfants et animaux calmes bienvenus sur demande.",
|
||||
"formTitle": "Demander un séjour",
|
||||
"formSubtitle": "Un véritable formulaire de réservation arrive bientôt. En attendant, écrivez-nous et nous fixerons les dates par mail.",
|
||||
"formPlaceholder": "Formulaire de réservation — bientôt disponible.",
|
||||
"contactCard": {
|
||||
"title": "Nous joindre",
|
||||
"emailLabel": "Email",
|
||||
"addressLabel": "Adresse",
|
||||
"openingLabel": "Ouverture",
|
||||
"openingValue": "Automne 2026"
|
||||
},
|
||||
"ctaEmail": "Nous écrire",
|
||||
"ctaAccommodation": "Voir l'hébergement"
|
||||
},
|
||||
"opportunities": {
|
||||
"hero": {
|
||||
"kicker": "Collaborer · Opportunités",
|
||||
|
|
|
|||
|
|
@ -1,12 +1,126 @@
|
|||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { RouterLink } from 'vue-router'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const kinds = ['weekend', 'retreat', 'gathering', 'residency'] as const
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article class="mx-auto max-w-4xl px-4 py-16">
|
||||
<h1 class="font-serif text-4xl font-semibold tracking-tight">{{ t('nav.planYourVisit') }}</h1>
|
||||
<p class="mt-4 text-muted-foreground">{{ t('common.comingSoon') }}</p>
|
||||
</article>
|
||||
<div>
|
||||
<!-- Hero -->
|
||||
<section class="border-b border-border bg-secondary/40">
|
||||
<div class="mx-auto max-w-4xl px-4 py-16 lg:px-6 lg:py-20">
|
||||
<p class="text-xs uppercase tracking-[0.2em] text-accent">
|
||||
{{ 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 -->
|
||||
<section class="mx-auto max-w-7xl px-4 py-16 lg:px-6">
|
||||
<h2 class="font-serif text-3xl font-semibold tracking-tight">
|
||||
{{ t('reservations.kindsTitle') }}
|
||||
</h2>
|
||||
<div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<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>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Values -->
|
||||
<section class="border-y border-border bg-card">
|
||||
<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') }}
|
||||
</h2>
|
||||
<p class="mt-5 max-w-prose text-base leading-relaxed">
|
||||
{{ t('reservations.valuesBody') }}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Booking form placeholder + contact card -->
|
||||
<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="lg:col-span-3">
|
||||
<h2 class="font-serif text-3xl font-semibold tracking-tight">
|
||||
{{ t('reservations.formTitle') }}
|
||||
</h2>
|
||||
<p class="mt-3 max-w-prose text-muted-foreground">
|
||||
{{ t('reservations.formSubtitle') }}
|
||||
</p>
|
||||
<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"
|
||||
>
|
||||
<p class="font-serif italic">{{ t('reservations.formPlaceholder') }}</p>
|
||||
</div>
|
||||
<div class="mt-6 flex flex-wrap items-center gap-3">
|
||||
<a
|
||||
href="mailto:chateaudufaune@ariege.io?subject=R%C3%A9servation%20%E2%80%94%20Ch%C3%A2teau%20du%20Faune"
|
||||
class="rounded-md bg-primary px-5 py-3 text-sm font-medium text-primary-foreground hover:opacity-90"
|
||||
>
|
||||
{{ t('reservations.ctaEmail') }}
|
||||
</a>
|
||||
<RouterLink
|
||||
to="/accommodation"
|
||||
class="rounded-md border border-border px-5 py-3 text-sm font-medium hover:bg-muted"
|
||||
>
|
||||
{{ t('reservations.ctaAccommodation') }}
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<dl class="mt-4 space-y-4 text-sm">
|
||||
<div>
|
||||
<dt class="text-xs uppercase tracking-wider text-muted-foreground">
|
||||
{{ t('reservations.contactCard.emailLabel') }}
|
||||
</dt>
|
||||
<dd class="mt-1">
|
||||
<a href="mailto:chateaudufaune@ariege.io" class="hover:text-primary">
|
||||
chateaudufaune@ariege.io
|
||||
</a>
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt class="text-xs uppercase tracking-wider text-muted-foreground">
|
||||
{{ t('reservations.contactCard.addressLabel') }}
|
||||
</dt>
|
||||
<dd class="mt-1 not-italic">
|
||||
456 Grand Rue de Bellissen<br />
|
||||
Château de Bénac, 09000 France
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt class="text-xs uppercase tracking-wider text-muted-foreground">
|
||||
{{ t('reservations.contactCard.openingLabel') }}
|
||||
</dt>
|
||||
<dd class="mt-1">{{ t('reservations.contactCard.openingValue') }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue