fix image and blanc
This commit is contained in:
Nyavokevin
parent
58e26d17f8
commit
4f7e5f78d5
@ -5,8 +5,9 @@
|
||||
<!-- Background mystical elements -->
|
||||
<div class="absolute inset-0 overflow-hidden">
|
||||
<!-- Background image with softer blur and higher brightness for visibility -->
|
||||
|
||||
<div class="absolute inset-0 bg-cover bg-center" style="background-image: url('/hero-back.jpg'); filter: blur(2px) brightness(0.7)"></div>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-purple-900/20 via-transparent to-transparent"></div>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-purple-900 via-transparent to-transparent"></div>
|
||||
|
||||
<!-- Smooth purple particles -->
|
||||
<div
|
||||
|
||||
@ -26,7 +26,7 @@ onMounted(() => {
|
||||
class="group/design-root relative flex size-full min-h-screen flex-col overflow-x-hidden bg-gradient-to-br from-[var(--c-deep-navy)] via-[var(--c-purple)] to-black"
|
||||
>
|
||||
<div class="layout-container flex h-full grow flex-col">
|
||||
<!-- Enhanced Header -->
|
||||
<!-- Enhanced Header with Bigger Font -->
|
||||
<header
|
||||
class="fixed top-0 z-50 w-full transition-all duration-300"
|
||||
:class="isScrolled ? 'bg-black/90 py-2 shadow-xl backdrop-blur-md' : 'bg-transparent py-4'"
|
||||
@ -37,41 +37,41 @@ onMounted(() => {
|
||||
<img
|
||||
src="/logo-success.webp"
|
||||
alt="Logo"
|
||||
class="h-10 w-24 transition-transform duration-300 hover:scale-105 sm:h-12 sm:w-30"
|
||||
class="h-12 w-32 transition-transform duration-300 hover:scale-105 sm:h-14 sm:w-36"
|
||||
/>
|
||||
</div>
|
||||
<nav class="hidden items-center gap-4 md:flex lg:gap-8">
|
||||
<nav class="hidden items-center gap-6 md:flex lg:gap-10">
|
||||
<Link
|
||||
class="group/nav-link relative px-2 py-1 text-sm font-medium text-white transition-all duration-300 hover:text-[var(--c-gold)]"
|
||||
class="group/nav-link relative px-3 py-2 text-lg font-semibold text-white transition-all duration-300 hover:text-[var(--c-gold)]"
|
||||
href="/"
|
||||
>
|
||||
Accueil
|
||||
<span
|
||||
class="absolute bottom-0 left-0 h-0.5 w-0 bg-[var(--c-gold)] transition-all duration-300 group-hover/nav-link:w-full"
|
||||
class="absolute bottom-0 left-0 h-1 w-0 bg-[var(--c-gold)] transition-all duration-300 group-hover/nav-link:w-full"
|
||||
></span>
|
||||
</Link>
|
||||
<Link
|
||||
class="group/nav-link relative px-2 py-1 text-sm font-medium text-white transition-all duration-300 hover:text-[var(--c-gold)]"
|
||||
class="group/nav-link relative px-3 py-2 text-lg font-semibold text-white transition-all duration-300 hover:text-[var(--c-gold)]"
|
||||
href="/tirage"
|
||||
>
|
||||
Tirages
|
||||
<span
|
||||
class="absolute bottom-0 left-0 h-0.5 w-0 bg-[var(--c-gold)] transition-all duration-300 group-hover/nav-link:w-full"
|
||||
class="absolute bottom-0 left-0 h-1 w-0 bg-[var(--c-gold)] transition-all duration-300 group-hover/nav-link:w-full"
|
||||
></span>
|
||||
</Link>
|
||||
<Link
|
||||
class="group/nav-link relative px-2 py-1 text-sm font-medium text-white transition-all duration-300 hover:text-[var(--c-gold)]"
|
||||
class="group/nav-link relative px-3 py-2 text-lg font-semibold text-white transition-all duration-300 hover:text-[var(--c-gold)]"
|
||||
href="/#testimonials"
|
||||
>
|
||||
Témoignages
|
||||
<span
|
||||
class="absolute bottom-0 left-0 h-0.5 w-0 bg-[var(--c-gold)] transition-all duration-300 group-hover/nav-link:w-full"
|
||||
class="absolute bottom-0 left-0 h-1 w-0 bg-[var(--c-gold)] transition-all duration-300 group-hover/nav-link:w-full"
|
||||
></span>
|
||||
</Link>
|
||||
</nav>
|
||||
<div class="flex items-center gap-2 sm:gap-4">
|
||||
<div class="flex items-center gap-3 sm:gap-4">
|
||||
<button
|
||||
class="mystic-btn mystic-btn-primary group relative hidden h-10 min-w-[160px] cursor-pointer items-center justify-center overflow-hidden rounded-full px-4 text-sm font-bold text-white shadow-lg transition-all duration-300 hover:-translate-y-0.5 sm:inline-flex sm:px-6"
|
||||
class="mystic-btn mystic-btn-primary group relative hidden h-12 min-w-[180px] cursor-pointer items-center justify-center overflow-hidden rounded-full px-6 text-base font-bold text-white shadow-lg transition-all duration-300 hover:-translate-y-0.5 sm:inline-flex"
|
||||
@click="goToBooking"
|
||||
>
|
||||
<span class="relative z-10 truncate">Réserver</span>
|
||||
@ -80,7 +80,7 @@ onMounted(() => {
|
||||
></span>
|
||||
</button>
|
||||
<button class="p-2 text-white transition-colors hover:text-[var(--c-gold)] md:hidden" @click="toggleMobileMenu">
|
||||
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<svg class="h-7 w-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
||||
</svg>
|
||||
</button>
|
||||
@ -89,41 +89,41 @@ onMounted(() => {
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Enhanced Mobile Menu -->
|
||||
<!-- Enhanced Mobile Menu with Bigger Font -->
|
||||
<div v-if="isMobileMenuOpen" class="fixed inset-0 z-40 bg-black/80 backdrop-blur-sm md:hidden" @click="toggleMobileMenu">
|
||||
<div
|
||||
class="absolute top-0 right-0 h-full w-full max-w-sm bg-gradient-to-b from-[var(--c-purple)] to-[var(--c-deep-navy)] p-6 shadow-2xl"
|
||||
@click.stop
|
||||
>
|
||||
<div class="mb-8 flex items-center justify-between">
|
||||
<img src="/logo-success.webp" alt="Logo" class="h-10 w-24" />
|
||||
<img src="/logo-success.webp" alt="Logo" class="h-12 w-32" />
|
||||
<button @click="toggleMobileMenu" class="p-2 text-white">
|
||||
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<svg class="h-7 w-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<nav class="flex flex-col gap-4">
|
||||
<Link
|
||||
class="border-b border-white/10 py-4 text-lg font-medium text-white transition-colors duration-300 hover:text-[var(--c-gold)]"
|
||||
class="border-b border-white/10 py-5 text-xl font-semibold text-white transition-colors duration-300 hover:text-[var(--c-gold)]"
|
||||
href="/"
|
||||
@click="toggleMobileMenu"
|
||||
>Accueil</Link
|
||||
>
|
||||
<Link
|
||||
class="border-b border-white/10 py-4 text-lg font-medium text-white transition-colors duration-300 hover:text-[var(--c-gold)]"
|
||||
class="border-b border-white/10 py-5 text-xl font-semibold text-white transition-colors duration-300 hover:text-[var(--c-gold)]"
|
||||
href="/tirage"
|
||||
@click="toggleMobileMenu"
|
||||
>Tirages</Link
|
||||
>
|
||||
<Link
|
||||
class="border-b border-white/10 py-4 text-lg font-medium text-white transition-colors duration-300 hover:text-[var(--c-gold)]"
|
||||
class="border-b border-white/10 py-5 text-xl font-semibold text-white transition-colors duration-300 hover:text-[var(--c-gold)]"
|
||||
href="/#testimonials"
|
||||
@click="toggleMobileMenu"
|
||||
>Témoignages</Link
|
||||
>
|
||||
<button
|
||||
class="mystic-btn mystic-btn-primary group relative mt-8 inline-flex h-12 w-full items-center justify-center overflow-hidden rounded-full px-6 text-base font-bold text-white shadow-lg transition-all duration-300"
|
||||
class="mystic-btn mystic-btn-primary group relative mt-8 inline-flex h-14 w-full items-center justify-center overflow-hidden rounded-full px-6 text-lg font-bold text-white shadow-lg transition-all duration-300"
|
||||
@click="
|
||||
goToBooking();
|
||||
toggleMobileMenu();
|
||||
@ -135,7 +135,7 @@ onMounted(() => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="relative flex min-h-screen w-full flex-col items-center pt-16 sm:pt-20">
|
||||
<main class="relative flex min-h-screen w-full flex-col items-center">
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
@ -147,25 +147,25 @@ onMounted(() => {
|
||||
<!-- Brand + tagline -->
|
||||
<div class="md:col-span-1">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="/logo-success.webp" alt="Logo" class="h-10 w-24 sm:h-12 sm:w-30" />
|
||||
<img src="/logo-success.webp" alt="Logo" class="h-12 w-32 sm:h-14 sm:w-36" />
|
||||
</div>
|
||||
<p class="mt-4 max-w-sm text-sm leading-relaxed text-white/70">
|
||||
<p class="mt-4 max-w-sm text-base leading-relaxed text-white/70 sm:text-lg">
|
||||
Guidance et clarté à travers des tirages inspirés et un accompagnement personnalisé.
|
||||
</p>
|
||||
<div class="mt-6 flex gap-3">
|
||||
<a class="social-icon group" href="#" aria-label="Instagram">
|
||||
<svg class="h-5 w-5 sm:h-6 sm:w-6" fill="currentColor" viewBox="0 0 256 256">
|
||||
<svg class="h-6 w-6 sm:h-7 sm:w-7" fill="currentColor" viewBox="0 0 256 256">
|
||||
<rect x="32" y="32" width="192" height="192" rx="48"></rect>
|
||||
<circle cx="128" cy="128" r="40" fill="black"></circle>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="social-icon group" href="#" aria-label="Facebook">
|
||||
<svg class="h-5 w-5 sm:h-6 sm:w-6" fill="currentColor" viewBox="0 0 256 256">
|
||||
<svg class="h-6 w-6 sm:h-7 sm:w-7" fill="currentColor" viewBox="0 0 256 256">
|
||||
<path d="M176 24h-32a56 56 0 0 0-56 56v24H64v32h24v96h32v-96h32l8-32h-40V80a16 16 0 0 1 16-16h32Z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="social-icon group" href="#" aria-label="X">
|
||||
<svg class="h-5 w-5 sm:h-6 sm:w-6" fill="currentColor" viewBox="0 0 256 256">
|
||||
<svg class="h-6 w-6 sm:h-7 sm:w-7" fill="currentColor" viewBox="0 0 256 256">
|
||||
<path
|
||||
d="M152.23,116.19l62.51-78.85H184.2l-38.79,49-30.06-49H80.2l43.9,70.44L60.44,218.66H99l42.31-53.56,32.63,53.56h35.09Z"
|
||||
></path>
|
||||
@ -177,8 +177,8 @@ onMounted(() => {
|
||||
<!-- Quick links -->
|
||||
<div class="grid grid-cols-2 gap-6 sm:gap-8 md:col-span-1 md:grid-cols-2">
|
||||
<div>
|
||||
<h4 class="mb-4 text-base font-bold tracking-wider text-white sm:text-lg">Navigation</h4>
|
||||
<ul class="space-y-2 text-sm sm:space-y-3">
|
||||
<h4 class="mb-4 text-lg font-bold tracking-wider text-white sm:text-xl">Navigation</h4>
|
||||
<ul class="space-y-3 text-base sm:space-y-4">
|
||||
<li>
|
||||
<Link class="footer-link group" href="/">Accueil</Link>
|
||||
</li>
|
||||
@ -194,8 +194,8 @@ onMounted(() => {
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="mb-4 text-base font-bold tracking-wider text-white sm:text-lg">Légal</h4>
|
||||
<ul class="space-y-2 text-sm sm:space-y-3">
|
||||
<h4 class="mb-4 text-lg font-bold tracking-wider text-white sm:text-xl">Légal</h4>
|
||||
<ul class="space-y-3 text-base sm:space-y-4">
|
||||
<li>
|
||||
<Link class="footer-link group" href="/politique-confidalite">Confidentialité</Link>
|
||||
</li>
|
||||
@ -208,8 +208,8 @@ onMounted(() => {
|
||||
|
||||
<!-- Newsletter -->
|
||||
<div class="md:col-span-1 lg:col-span-1">
|
||||
<h4 class="mb-4 text-base font-bold tracking-wider text-white sm:text-lg">Newsletter</h4>
|
||||
<p class="mb-4 text-sm leading-relaxed text-white/70">
|
||||
<h4 class="mb-4 text-lg font-bold tracking-wider text-white sm:text-xl">Newsletter</h4>
|
||||
<p class="mb-4 text-base leading-relaxed text-white/70 sm:text-lg">
|
||||
Recevez des inspirations et offres directement dans votre boîte mail.
|
||||
</p>
|
||||
<form
|
||||
@ -218,11 +218,11 @@ onMounted(() => {
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Votre e-mail"
|
||||
class="w-full bg-transparent px-4 py-3 text-sm text-white placeholder-white/50 focus:outline-none"
|
||||
class="w-full bg-transparent px-4 py-3 text-base text-white placeholder-white/50 focus:outline-none"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="mystic-btn mystic-btn-secondary min-w-[120px] px-4 py-3 text-sm font-bold whitespace-nowrap text-white transition-all"
|
||||
class="mystic-btn mystic-btn-secondary min-w-[120px] px-4 py-3 text-base font-bold whitespace-nowrap text-white transition-all"
|
||||
>
|
||||
S'abonner
|
||||
</button>
|
||||
@ -230,7 +230,7 @@ onMounted(() => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 border-t border-white/10 pt-6 text-center text-xs text-white/60 sm:mt-12 sm:text-sm">
|
||||
<div class="mt-8 border-t border-white/10 pt-6 text-center text-sm text-white/60 sm:mt-12 sm:text-base">
|
||||
© 2024 Kris Saint Ange. Tous droits réservés.
|
||||
</div>
|
||||
</div>
|
||||
@ -291,8 +291,8 @@ onMounted(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
@ -311,6 +311,7 @@ onMounted(() => {
|
||||
transition: all 0.3s ease;
|
||||
display: inline-block;
|
||||
padding: 4px 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.footer-link:hover {
|
||||
|
||||
@ -2,9 +2,11 @@
|
||||
<LandingLayout>
|
||||
<div class="relative flex size-full min-h-screen flex-col overflow-x-hidden">
|
||||
<!-- Hero -->
|
||||
<HeroSection primaryButtonLink="/tirage" secondaryButtonLink="/tirage" minHeight="70vh" />
|
||||
|
||||
<!-- Other sections with container -->
|
||||
<main class="flex flex-col items-center">
|
||||
<div class="w-full max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<HeroSection primaryButtonLink="/tirage" secondaryButtonLink="/tirage" minHeight="70vh" />
|
||||
<div id="after-hero-sentinel" class="h-px w-full"></div>
|
||||
<ManuscritSection />
|
||||
<OfferSection />
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user