54 lines
1.7 KiB
Plaintext
54 lines
1.7 KiB
Plaintext
---
|
|
import { Image } from 'astro:assets';
|
|
import facade from '../assets/images/facade.jpg';
|
|
---
|
|
|
|
<section class="relative h-screen flex items-center justify-center overflow-hidden">
|
|
<!-- Image de fond -->
|
|
<div class="absolute inset-0">
|
|
<Image
|
|
src={facade}
|
|
alt="La Maison de Cécile"
|
|
class="w-full h-full object-cover"
|
|
loading="eager"
|
|
/>
|
|
<div class="absolute inset-0 bg-dark/50"></div>
|
|
</div>
|
|
|
|
<!-- Contenu centré -->
|
|
<div class="relative z-10 text-center text-white px-6 max-w-4xl mx-auto">
|
|
<span class="block text-xs tracking-[0.4em] uppercase text-white/60 mb-6">
|
|
Gite et Chambres d'hôtes · Gorges du Haut-Allier · Alleyras, Haute-Loire
|
|
</span>
|
|
|
|
<h1 class="font-serif text-7xl md:text-9xl font-light leading-none mb-6">
|
|
La Maison de Cécile
|
|
</h1>
|
|
|
|
<p class="text-lg text-white/70 font-light mb-12 max-w-lg mx-auto">
|
|
Une halte authentique sur le GR470 & la Via Allier, à deux pas de l'Allier sauvage.
|
|
</p>
|
|
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<a
|
|
href="#about"
|
|
class="border border-white/60 text-white px-10 py-4 text-xs tracking-[0.25em] uppercase hover:bg-white/10 transition-colors"
|
|
>
|
|
Découvrir la maison
|
|
</a>
|
|
<a
|
|
href="#location"
|
|
class="text-white/60 px-10 py-4 text-xs tracking-[0.25em] uppercase hover:text-white transition-colors"
|
|
>
|
|
Les activités
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Indicateur de défilement -->
|
|
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 text-white/40">
|
|
<span class="text-[10px] tracking-widest uppercase">Défiler</span>
|
|
<div class="w-px h-8 bg-white/30"></div>
|
|
</div>
|
|
</section>
|