mirror of
https://github.com/rjNemo/vf-site
synced 2026-06-06 09:16:39 +00:00
113 lines
6.2 KiB
Text
113 lines
6.2 KiB
Text
---
|
|
import '../styles/global.css';
|
|
import { siblingPath, hrefFor, navFor, ctaLabelFor } from '../i18n/routes';
|
|
const { title = 'VillaFleurie', lang = 'fr', description = 'Séjours confortables au Gosier pour couples et petites familles' } = Astro.props;
|
|
const pathname = Astro.url.pathname;
|
|
const altFr = siblingPath(pathname, 'fr');
|
|
const altEn = siblingPath(pathname, 'en');
|
|
const nav = navFor(lang);
|
|
const ctaLabel = ctaLabelFor(lang);
|
|
const homeHref = hrefFor('home', lang);
|
|
---
|
|
<!doctype html>
|
|
<html lang={lang}>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>{title} · VillaFleurie</title>
|
|
<meta name="description" content={description} />
|
|
<link rel="icon" href="/assets/images/logo.png" />
|
|
<link rel="alternate" hreflang="fr" href={altFr} />
|
|
<link rel="alternate" hreflang="en" href={altEn} />
|
|
<link rel="alternate" hreflang="x-default" href="/fr/" />
|
|
</head>
|
|
<body class="min-h-screen flex flex-col bg-white text-slate-900">
|
|
<header class="sticky top-0 z-50 border-b border-slate-200 bg-white/80 backdrop-blur">
|
|
<nav class="mx-auto max-w-6xl p-4">
|
|
<div class="flex items-center justify-between">
|
|
<a href={homeHref} class="flex items-center gap-3">
|
|
<img src="/assets/images/logo.png" alt="VillaFleurie" class="h-10 w-auto" />
|
|
<span class="sr-only">VillaFleurie</span>
|
|
</a>
|
|
<div class="flex items-center gap-4">
|
|
<button id="nav-toggle" class="md:hidden inline-flex items-center justify-center rounded-lg border border-slate-300 px-3 py-2" aria-controls="mobile-menu" aria-expanded="false">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-5 w-5"><path fill-rule="evenodd" d="M3.75 6.75A.75.75 0 0 1 4.5 6h15a.75.75 0 0 1 0 1.5h-15a.75.75 0 0 1-.75-.75ZM3.75 12a.75.75 0 0 1 .75-.75h15a.75.75 0 0 1 0 1.5h-15A.75.75 0 0 1 3.75 12Zm0 5.25a.75.75 0 0 1 .75-.75h15a.75.75 0 0 1 0 1.5h-15a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd"/></svg>
|
|
</button>
|
|
<div class="hidden md:flex items-center gap-4">
|
|
{nav.map((n) => <a href={n.href} class="text-sm hover:underline">{n.label}</a>)}
|
|
<a href={hrefFor('contact', lang)} class="inline-flex items-center rounded-lg bg-brand px-3 py-2 text-white hover:bg-brand-600">{ctaLabel}</a>
|
|
<div class="ml-2 flex items-center gap-2 text-xs">
|
|
<a href={altFr} class={"hover:underline " + (lang==='fr' ? 'font-semibold text-brand-600' : '')}>FR</a>
|
|
<span class="text-slate-400">|</span>
|
|
<a href={altEn} class={"hover:underline " + (lang==='en' ? 'font-semibold text-brand-600' : '')}>EN</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="mobile-menu" class="mt-3 hidden md:hidden border-t border-slate-200 pt-3">
|
|
<div class="flex flex-col gap-3">
|
|
{nav.map((n) => <a href={n.href} class="text-base">{n.label}</a>)}
|
|
<a href={hrefFor('contact', lang)} class="inline-flex items-center justify-center rounded-lg bg-brand px-4 py-2 text-white hover:bg-brand-600">{ctaLabel}</a>
|
|
<div class="flex items-center gap-2 text-sm">
|
|
<span class="text-slate-500">Lang:</span>
|
|
<a href={altFr} class={"hover:underline " + (lang==='fr' ? 'font-semibold text-brand-600' : '')}>FR</a>
|
|
<span class="text-slate-400">|</span>
|
|
<a href={altEn} class={"hover:underline " + (lang==='en' ? 'font-semibold text-brand-600' : '')}>EN</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
<main class="flex-1">
|
|
<slot />
|
|
</main>
|
|
<footer class="mt-auto border-t border-slate-200">
|
|
<div class="mx-auto max-w-6xl p-6 text-sm text-slate-600 flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
|
|
<div>
|
|
<p>Contact: <a class="underline" href="mailto:location.villafleurie@gmail.com">location.villafleurie@gmail.com</a> · <a class="underline" href="tel:+33658961279">+33 6 58 96 12 79</a></p>
|
|
<p class="mt-1">© VillaFleurie · Web design: <a href="https://ruidy.nemausat.com" target="_blank" rel="noopener" class="underline">Ruidy Nemausat</a></p>
|
|
</div>
|
|
<ul class="flex gap-4">
|
|
{lang === 'en' ? (
|
|
<>
|
|
<li><a class="underline" href={hrefFor('terms','en')}>Terms</a></li>
|
|
<li><a class="underline" href={hrefFor('privacy','en')}>Privacy</a></li>
|
|
<li><a class="underline" href={hrefFor('cancellation','en')}>Cancellation</a></li>
|
|
<li><a class="underline" href={hrefFor('house_rules','en')}>House Rules</a></li>
|
|
</>
|
|
) : (
|
|
<>
|
|
<li><a class="underline" href={hrefFor('terms','fr')}>Conditions</a></li>
|
|
<li><a class="underline" href={hrefFor('privacy','fr')}>Confidentialité</a></li>
|
|
<li><a class="underline" href={hrefFor('cancellation','fr')}>Annulation</a></li>
|
|
<li><a class="underline" href={hrefFor('house_rules','fr')}>Règlement intérieur</a></li>
|
|
</>
|
|
)}
|
|
</ul>
|
|
</div>
|
|
</footer>
|
|
<script>
|
|
// Plausible init
|
|
window.plausible = window.plausible || function(){(window.plausible.q = window.plausible.q || []).push(arguments)}
|
|
// Sticky header shadow on scroll
|
|
const header = document.querySelector('header');
|
|
if (header) {
|
|
const onScroll = () => header.classList.toggle('shadow-sm', window.scrollY > 0);
|
|
onScroll();
|
|
window.addEventListener('scroll', onScroll, { passive: true });
|
|
}
|
|
// Mobile nav toggle
|
|
const btn = document.getElementById('nav-toggle');
|
|
const menu = document.getElementById('mobile-menu');
|
|
if (btn && menu) {
|
|
btn.addEventListener('click', () => {
|
|
const isHidden = menu.classList.contains('hidden');
|
|
menu.classList.toggle('hidden', !isHidden);
|
|
btn.setAttribute('aria-expanded', String(isHidden));
|
|
});
|
|
}
|
|
</script>
|
|
<script defer data-domain="villafleuriegp.com" src="https://plausible.nemausat.com/js/script.outbound-links.js"></script>
|
|
</body>
|
|
</html>
|