mirror of
https://github.com/rjNemo/vf-site
synced 2026-06-10 19:16:40 +00:00
feat(icons): use brand color for facility icons and restore 'Crib on demand' in FR/EN
This commit is contained in:
parent
0add2152eb
commit
ef6ba11a73
5 changed files with 77 additions and 24 deletions
|
|
@ -11,6 +11,7 @@
|
|||
"dependencies": {
|
||||
"@tailwindcss/vite": "^4.1.13",
|
||||
"astro": "^5.13.5",
|
||||
"lucide-astro": "^0.542.0",
|
||||
"tailwindcss": "^4.1.13"
|
||||
},
|
||||
"packageManager": "pnpm@10.15.1"
|
||||
|
|
|
|||
|
|
@ -14,6 +14,9 @@ importers:
|
|||
astro:
|
||||
specifier: ^5.13.5
|
||||
version: 5.13.5(@types/node@24.3.1)(jiti@2.5.1)(lightningcss@1.30.1)(rollup@4.50.0)(typescript@5.9.2)
|
||||
lucide-astro:
|
||||
specifier: ^0.542.0
|
||||
version: 0.542.0(astro@5.13.5(@types/node@24.3.1)(jiti@2.5.1)(lightningcss@1.30.1)(rollup@4.50.0)(typescript@5.9.2))
|
||||
tailwindcss:
|
||||
specifier: ^4.1.13
|
||||
version: 4.1.13
|
||||
|
|
@ -1034,6 +1037,11 @@ packages:
|
|||
lru-cache@10.4.3:
|
||||
resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
|
||||
|
||||
lucide-astro@0.542.0:
|
||||
resolution: {integrity: sha512-68AwEGCOmYcdShAEgz/AcQhCn9oQJwZOb5OZbwIHJM3AlZOq6B/IIlJyMbVQJJx/sTx3JgsY+iyjNodDvDiaYg==}
|
||||
peerDependencies:
|
||||
astro: '>=2.7.1'
|
||||
|
||||
magic-string@0.30.18:
|
||||
resolution: {integrity: sha512-yi8swmWbO17qHhwIBNeeZxTceJMeBvWJaId6dyvTSOwTipqeHhMhOrz6513r1sOKnpvQ7zkhlG8tPrpilwTxHQ==}
|
||||
|
||||
|
|
@ -2671,6 +2679,10 @@ snapshots:
|
|||
|
||||
lru-cache@10.4.3: {}
|
||||
|
||||
lucide-astro@0.542.0(astro@5.13.5(@types/node@24.3.1)(jiti@2.5.1)(lightningcss@1.30.1)(rollup@4.50.0)(typescript@5.9.2)):
|
||||
dependencies:
|
||||
astro: 5.13.5(@types/node@24.3.1)(jiti@2.5.1)(lightningcss@1.30.1)(rollup@4.50.0)(typescript@5.9.2)
|
||||
|
||||
magic-string@0.30.18:
|
||||
dependencies:
|
||||
'@jridgewell/sourcemap-codec': 1.5.5
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ const homeHref = hrefFor('home', lang);
|
|||
<link rel="alternate" hreflang="x-default" href="/fr/" />
|
||||
</head>
|
||||
<body class="min-h-screen flex flex-col bg-white text-slate-900">
|
||||
<header class="border-b border-slate-200">
|
||||
<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">
|
||||
|
|
@ -66,7 +66,7 @@ const homeHref = hrefFor('home', lang);
|
|||
<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</p>
|
||||
<p class="mt-1">© VillaFleurie · Built by <a href="https://ruidy.nemausat.com" target="_blank" rel="noopener" class="underline">Ruidy Nemausat</a></p>
|
||||
</div>
|
||||
<ul class="flex gap-4">
|
||||
{lang === 'en' ? (
|
||||
|
|
@ -90,6 +90,13 @@ const homeHref = hrefFor('home', lang);
|
|||
<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');
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||
import { hrefFor } from '../../i18n/routes';
|
||||
import { Umbrella, Car, Wifi, Snowflake, Utensils, Home as HomeIcon, Users, Baby } from 'lucide-astro';
|
||||
const title = 'Home';
|
||||
const contactHref = hrefFor('contact', 'en');
|
||||
const t2Href = hrefFor('apartment_t2', 'en');
|
||||
|
|
@ -24,9 +25,9 @@ const t3Href = hrefFor('apartment_t3', 'en');
|
|||
</section>
|
||||
<section class="bg-slate-50">
|
||||
<div class="mx-auto max-w-6xl px-6 py-6 grid grid-cols-1 md:grid-cols-3 gap-4 text-slate-800">
|
||||
<div class="flex items-center gap-3"><span class="text-xl">🏖️</span><span>Near the beaches</span></div>
|
||||
<div class="flex items-center gap-3"><span class="text-xl">🅿️</span><span>Secured onsite parking</span></div>
|
||||
<div class="flex items-center gap-3"><span class="text-xl">📶</span><span>Fast, reliable Wi‑Fi</span></div>
|
||||
<div class="flex items-center gap-3"><Umbrella class="h-5 w-5 text-brand" /><span>Near the beaches</span></div>
|
||||
<div class="flex items-center gap-3"><Car class="h-5 w-5 text-brand" /><span>Secured onsite parking</span></div>
|
||||
<div class="flex items-center gap-3"><Wifi class="h-5 w-5 text-brand" /><span>Fast, reliable Wi‑Fi</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -44,18 +45,33 @@ const t3Href = hrefFor('apartment_t3', 'en');
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="mx-auto max-w-6xl px-6">
|
||||
<div class="relative">
|
||||
<div id="desc-carousel-en" class="flex gap-4 overflow-x-auto snap-x snap-mandatory pb-4" style="scroll-behavior:smooth">
|
||||
{[ '/assets/images/villafleurie_t2_terrasse.jpg', '/assets/images/villafleurie_t3_salon.jpg', '/assets/images/villafleurie_t2_cuisine.jpg', '/assets/images/villafleurie_t3_chambre.jpg' ].map((src) => (
|
||||
<img src={src} alt="Preview" class="h-48 w-80 object-cover rounded-lg snap-start" />
|
||||
))}
|
||||
</div>
|
||||
<div class="absolute inset-y-0 left-0 flex items-center">
|
||||
<button type="button" class="rounded-full bg-white/90 shadow p-2" onclick="(function(){ const el=document.getElementById('desc-carousel-en'); el && el.scrollBy({left:-300,behavior:'smooth'}); })()">‹</button>
|
||||
</div>
|
||||
<div class="absolute inset-y-0 right-0 flex items-center">
|
||||
<button type="button" class="rounded-full bg-white/90 shadow p-2" onclick="(function(){ const el=document.getElementById('desc-carousel-en'); el && el.scrollBy({left:300,behavior:'smooth'}); })()">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mx-auto max-w-6xl px-6 py-12">
|
||||
<h2 class="text-2xl md:text-3xl font-semibold">Facilities</h2>
|
||||
<div class="mt-6 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 text-sm">
|
||||
<div class="rounded-xl border border-slate-200 p-4 bg-white">❄️ Air conditioning</div>
|
||||
<div class="rounded-xl border border-slate-200 p-4 bg-white">📶 Fast Wi‑Fi</div>
|
||||
<div class="rounded-xl border border-slate-200 p-4 bg-white">🍳 Equipped kitchen</div>
|
||||
<div class="rounded-xl border border-slate-200 p-4 bg-white">👶 Crib on demand</div>
|
||||
<div class="rounded-xl border border-slate-200 p-4 bg-white">🅿️ Secured parking</div>
|
||||
<div class="rounded-xl border border-slate-200 p-4 bg-white">🏖️ Near the beaches</div>
|
||||
<div class="rounded-xl border border-slate-200 p-4 bg-white">🕊️ Quiet neighborhood</div>
|
||||
<div class="rounded-xl border border-slate-200 p-4 bg-white">👨👩👧 Family‑friendly</div>
|
||||
<div class="rounded-xl border border-slate-200 p-4 bg-white flex items-center gap-2"><Snowflake class="h-5 w-5 text-brand" /> Air conditioning</div>
|
||||
<div class="rounded-xl border border-slate-200 p-4 bg-white flex items-center gap-2"><Wifi class="h-5 w-5 text-brand" /> Fast Wi‑Fi</div>
|
||||
<div class="rounded-xl border border-slate-200 p-4 bg-white flex items-center gap-2"><Utensils class="h-5 w-5 text-brand" /> Equipped kitchen</div>
|
||||
<div class="rounded-xl border border-slate-200 p-4 bg-white flex items-center gap-2"><Baby class="h-5 w-5 text-brand" /> Crib on demand</div>
|
||||
<div class="rounded-xl border border-slate-200 p-4 bg-white flex items-center gap-2"><Car class="h-5 w-5 text-brand" /> Secured parking</div>
|
||||
<div class="rounded-xl border border-slate-200 p-4 bg-white flex items-center gap-2"><Umbrella class="h-5 w-5 text-brand" /> Near the beaches</div>
|
||||
<div class="rounded-xl border border-slate-200 p-4 bg-white flex items-center gap-2"><HomeIcon class="h-5 w-5 text-brand" /> Quiet neighborhood</div>
|
||||
<div class="rounded-xl border border-slate-200 p-4 bg-white flex items-center gap-2"><Users class="h-5 w-5 text-brand" /> Family‑friendly</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||
import { hrefFor } from '../../i18n/routes';
|
||||
import { Umbrella, Car, Wifi, Snowflake, Utensils, Home as HomeIcon, Users, Baby } from 'lucide-astro';
|
||||
const title = 'Accueil';
|
||||
const contactHref = hrefFor('contact', 'fr');
|
||||
const t2Href = hrefFor('apartment_t2', 'fr');
|
||||
|
|
@ -24,9 +25,9 @@ const t3Href = hrefFor('apartment_t3', 'fr');
|
|||
</section>
|
||||
<section class="bg-slate-50">
|
||||
<div class="mx-auto max-w-6xl px-6 py-6 grid grid-cols-1 md:grid-cols-3 gap-4 text-slate-800">
|
||||
<div class="flex items-center gap-3"><span class="text-xl">🏖️</span><span>Près des plages</span></div>
|
||||
<div class="flex items-center gap-3"><span class="text-xl">🅿️</span><span>Parking sécurisé sur place</span></div>
|
||||
<div class="flex items-center gap-3"><span class="text-xl">📶</span><span>Wi‑Fi rapide et stable</span></div>
|
||||
<div class="flex items-center gap-3"><Umbrella class="h-5 w-5 text-brand" /><span>Près des plages</span></div>
|
||||
<div class="flex items-center gap-3"><Car class="h-5 w-5 text-brand" /><span>Parking sécurisé sur place</span></div>
|
||||
<div class="flex items-center gap-3"><Wifi class="h-5 w-5 text-brand" /><span>Wi‑Fi rapide et stable</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -45,17 +46,33 @@ const t3Href = hrefFor('apartment_t3', 'fr');
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mx-auto max-w-6xl px-6">
|
||||
<div class="relative">
|
||||
<div id="desc-carousel" class="flex gap-4 overflow-x-auto snap-x snap-mandatory pb-4" style="scroll-behavior:smooth">
|
||||
{[ '/assets/images/villafleurie_t2_terrasse.jpg', '/assets/images/villafleurie_t3_salon.jpg', '/assets/images/villafleurie_t2_cuisine.jpg', '/assets/images/villafleurie_t3_chambre.jpg' ].map((src) => (
|
||||
<img src={src} alt="Aperçu" class="h-48 w-80 object-cover rounded-lg snap-start" />
|
||||
))}
|
||||
</div>
|
||||
<div class="absolute inset-y-0 left-0 flex items-center">
|
||||
<button type="button" class="rounded-full bg-white/90 shadow p-2" onclick="(function(){ const el=document.getElementById('desc-carousel'); el && el.scrollBy({left:-300,behavior:'smooth'}); })()">‹</button>
|
||||
</div>
|
||||
<div class="absolute inset-y-0 right-0 flex items-center">
|
||||
<button type="button" class="rounded-full bg-white/90 shadow p-2" onclick="(function(){ const el=document.getElementById('desc-carousel'); el && el.scrollBy({left:300,behavior:'smooth'}); })()">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mx-auto max-w-6xl px-6 py-12">
|
||||
<h2 class="text-2xl md:text-3xl font-semibold">Installations</h2>
|
||||
<div class="mt-6 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 text-sm">
|
||||
<div class="rounded-xl border border-slate-200 p-4 bg-white">❄️ Climatisation</div>
|
||||
<div class="rounded-xl border border-slate-200 p-4 bg-white">📶 Wi‑Fi rapide</div>
|
||||
<div class="rounded-xl border border-slate-200 p-4 bg-white">🍳 Cuisine équipée</div>
|
||||
<div class="rounded-xl border border-slate-200 p-4 bg-white">👶 Lit bébé</div>
|
||||
<div class="rounded-xl border border-slate-200 p-4 bg-white">🅿️ Parking sécurisé</div>
|
||||
<div class="rounded-xl border border-slate-200 p-4 bg-white">🏖️ Près des plages</div>
|
||||
<div class="rounded-xl border border-slate-200 p-4 bg-white">🕊️ Quartier calme</div>
|
||||
<div class="rounded-xl border border-slate-200 p-4 bg-white">👨👩👧 Adapté familles</div>
|
||||
<div class="rounded-xl border border-slate-200 p-4 bg-white flex items-center gap-2"><Snowflake class="h-5 w-5 text-brand" /> Climatisation</div>
|
||||
<div class="rounded-xl border border-slate-200 p-4 bg-white flex items-center gap-2"><Wifi class="h-5 w-5 text-brand" /> Wi‑Fi rapide</div>
|
||||
<div class="rounded-xl border border-slate-200 p-4 bg-white flex items-center gap-2"><Utensils class="h-5 w-5 text-brand" /> Cuisine équipée</div>
|
||||
<div class="rounded-xl border border-slate-200 p-4 bg-white flex items-center gap-2"><Baby class="h-5 w-5 text-brand" /> Lit bébé sur demande</div>
|
||||
<div class="rounded-xl border border-slate-200 p-4 bg-white flex items-center gap-2"><Car class="h-5 w-5 text-brand" /> Parking sécurisé</div>
|
||||
<div class="rounded-xl border border-slate-200 p-4 bg-white flex items-center gap-2"><Umbrella class="h-5 w-5 text-brand" /> Près des plages</div>
|
||||
<div class="rounded-xl border border-slate-200 p-4 bg-white flex items-center gap-2"><HomeIcon class="h-5 w-5 text-brand" /> Quartier calme</div>
|
||||
<div class="rounded-xl border border-slate-200 p-4 bg-white flex items-center gap-2"><Users class="h-5 w-5 text-brand" /> Adapté familles</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue