371 lines
19 KiB
Vue
371 lines
19 KiB
Vue
<script setup lang="ts">
|
|
import LandingLayout from '@/layouts/app/LandingLayout.vue';
|
|
import { ref } from 'vue';
|
|
|
|
interface UserForm {
|
|
fullname: string;
|
|
email: string;
|
|
}
|
|
|
|
const userForm = ref<UserForm>({
|
|
fullname: '',
|
|
email: '',
|
|
});
|
|
|
|
const loading = ref<boolean>(false);
|
|
const appointmentConfirmed = ref<boolean>(false);
|
|
|
|
const handleAppointment = () => {
|
|
loading.value = true;
|
|
|
|
// Simulate processing delay
|
|
setTimeout(() => {
|
|
loading.value = false;
|
|
appointmentConfirmed.value = true;
|
|
|
|
// Reset form after confirmation
|
|
userForm.value = {
|
|
fullname: '',
|
|
email: '',
|
|
};
|
|
}, 1500);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<LandingLayout>
|
|
<!-- Background container with dark violet theme - isolated to main content only -->
|
|
<div class="booking-page-background relative">
|
|
<!-- Dark violet background with gradients -->
|
|
<div class="absolute inset-0 overflow-hidden bg-gradient-to-br from-purple-900 via-violet-900 to-indigo-900">
|
|
<!-- Animated background elements -->
|
|
<div class="absolute inset-0">
|
|
<!-- Floating particles -->
|
|
<div
|
|
v-for="i in 12"
|
|
:key="'particle-' + i"
|
|
class="floating-particle absolute rounded-full bg-white/10"
|
|
:style="{
|
|
width: `${Math.random() * 6 + 2}px`,
|
|
height: `${Math.random() * 6 + 2}px`,
|
|
top: `${Math.random() * 100}%`,
|
|
left: `${Math.random() * 100}%`,
|
|
animationDelay: `${Math.random() * 5}s`,
|
|
}"
|
|
></div>
|
|
|
|
<!-- Glow effects -->
|
|
<div class="glow-effect glow-1"></div>
|
|
<div class="glow-effect glow-2"></div>
|
|
<div class="glow-effect glow-3"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main content -->
|
|
<main class="relative z-10 flex flex-1 justify-center px-4 py-12 sm:px-6 sm:py-16 lg:px-8 lg:py-20">
|
|
<div class="layout-content-container flex w-full max-w-6xl flex-col items-center gap-12 lg:gap-16">
|
|
<!-- Enhanced Header Section -->
|
|
<div class="max-w-4xl text-center">
|
|
<h1 class="mb-6 text-4xl font-bold text-white sm:text-5xl lg:text-6xl">Your Spiritual Transformation Starts Here</h1>
|
|
<p class="mx-auto max-w-3xl text-lg text-white/80 sm:text-xl">
|
|
Do you feel something calling you toward a more aligned life?
|
|
<span class="font-semibold text-purple-300">Your soul is seeking answers</span> and I'm here to guide you.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Benefits Section -->
|
|
<div class="grid max-w-5xl grid-cols-1 gap-6 md:grid-cols-3">
|
|
<!-- Benefit 1 -->
|
|
<div class="rounded-2xl border border-white/20 bg-black/30 p-6 text-center backdrop-blur-sm">
|
|
<div class="mb-4 flex justify-center">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-full bg-purple-500/20">
|
|
<span class="text-xl">🔮</span>
|
|
</div>
|
|
</div>
|
|
<h3 class="mb-3 text-xl font-bold text-white">Immediate Clarity</h3>
|
|
<p class="text-white/70">
|
|
Get clear answers to your deepest questions and free yourself from the doubts holding you back
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Benefit 2 -->
|
|
<div class="rounded-2xl border border-white/20 bg-black/30 p-6 text-center backdrop-blur-sm">
|
|
<div class="mb-4 flex justify-center">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-full bg-purple-500/20">
|
|
<span class="text-xl">💫</span>
|
|
</div>
|
|
</div>
|
|
<h3 class="mb-3 text-xl font-bold text-white">Personalized Guidance</h3>
|
|
<p class="text-white/70">A unique approach tailored to your energy and life path for transformative results</p>
|
|
</div>
|
|
|
|
<!-- Benefit 3 -->
|
|
<div class="rounded-2xl border border-white/20 bg-black/30 p-6 text-center backdrop-blur-sm">
|
|
<div class="mb-4 flex justify-center">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-full bg-purple-500/20">
|
|
<span class="text-xl">🌙</span>
|
|
</div>
|
|
</div>
|
|
<h3 class="mb-3 text-xl font-bold text-white">Lasting Transformation</h3>
|
|
<p class="text-white/70">Don't settle for temporary solutions. Create the profound changes your soul is calling for</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Call to Action Text -->
|
|
<div class="max-w-3xl text-center">
|
|
<div class="rounded-2xl border border-purple-500/30 bg-purple-900/20 p-8 backdrop-blur-sm">
|
|
<h2 class="mb-4 text-2xl font-bold text-purple-300">The Time Has Come to Say "Yes" to Your Inner Journey</h2>
|
|
<p class="mb-4 text-lg text-white/80">
|
|
<span class="font-semibold">Hundreds of people</span> have already transformed their lives through this guidance. They
|
|
found <span class="font-semibold text-purple-300">inner peace</span>,
|
|
<span class="font-semibold text-purple-300">mental clarity</span> and the
|
|
<span class="font-semibold text-purple-300">confidence</span> to move forward.
|
|
</p>
|
|
<p class="text-lg text-white/80">
|
|
<span class="font-bold">What about you?</span> What are you waiting for to discover what the universe has in store for
|
|
you?
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Confirmation Message -->
|
|
<div v-if="appointmentConfirmed" class="w-full max-w-2xl">
|
|
<div class="rounded-2xl border border-green-500/30 bg-green-900/20 p-8 text-center shadow-xl backdrop-blur-sm">
|
|
<div class="mb-6 flex justify-center">
|
|
<div class="flex h-16 w-16 items-center justify-center rounded-full bg-green-500/20">
|
|
<svg class="h-8 w-8 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<h2 class="mb-4 text-2xl font-bold text-green-400">Wonderful! Your Request Is Registered</h2>
|
|
<p class="mb-4 text-green-300"><strong>Congratulations on taking this first step toward your transformation!</strong></p>
|
|
<p class="mb-6 text-green-300">
|
|
I will contact you within 24 hours to discuss your needs and arrange the best time for your personalized consultation.
|
|
</p>
|
|
<button
|
|
@click="appointmentConfirmed = false"
|
|
class="rounded-xl bg-green-600 px-6 py-3 font-semibold text-white transition-colors hover:bg-green-500"
|
|
>
|
|
Schedule a new appointment
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Card -->
|
|
<div v-else class="w-full max-w-md">
|
|
<div class="rounded-2xl border border-white/20 bg-black/30 p-8 shadow-xl backdrop-blur-sm">
|
|
<div class="mb-8 text-center">
|
|
<div class="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-purple-500/20">
|
|
<svg class="h-6 w-6 text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<h2 class="text-2xl font-bold text-white">Book Your Discovery Call</h2>
|
|
<p class="mt-3 text-white/70">
|
|
<strong>Free:</strong> 15 minutes to identify your blocks and create a personalized action plan
|
|
</p>
|
|
</div>
|
|
|
|
<form class="flex flex-col gap-6" @submit.prevent="handleAppointment">
|
|
<!-- Name Input -->
|
|
<div class="group">
|
|
<label class="mb-3 block text-sm font-semibold text-white" for="name"> Your First and Last Name </label>
|
|
<div class="relative">
|
|
<input
|
|
class="w-full rounded-xl border-2 border-purple-500/30 bg-black/40 p-4 text-base text-white transition-all duration-300 placeholder:text-white/40 focus:border-purple-400 focus:bg-black/60 focus:shadow-lg focus:ring-2 focus:ring-purple-400/20"
|
|
id="name"
|
|
name="name"
|
|
placeholder="What would you like me to call you?"
|
|
type="text"
|
|
v-model="userForm.fullname"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Email Input -->
|
|
<div class="group">
|
|
<label class="mb-3 block text-sm font-semibold text-white" for="email"> Your Best Email </label>
|
|
<div class="relative">
|
|
<input
|
|
class="w-full rounded-xl border-2 border-purple-500/30 bg-black/40 p-4 text-base text-white transition-all duration-300 placeholder:text-white/40 focus:border-purple-400 focus:bg-black/60 focus:shadow-lg focus:ring-2 focus:ring-purple-400/20"
|
|
id="email"
|
|
name="email"
|
|
placeholder="Where can I send the details?"
|
|
type="email"
|
|
v-model="userForm.email"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Urgency CTA -->
|
|
<div class="rounded-xl border border-purple-500/30 bg-purple-900/20 p-4 text-center">
|
|
<p class="text-sm font-semibold text-purple-300">
|
|
⚡ Limited spots - Don't let doubt deprive you of your transformation
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Submit Button -->
|
|
<button
|
|
class="group relative mt-2 flex h-14 w-full cursor-pointer items-center justify-center overflow-hidden rounded-xl bg-gradient-to-r from-purple-600 to-violet-600 px-8 text-lg font-bold tracking-wide text-white shadow-lg transition-all duration-500 hover:from-purple-500 hover:to-violet-500 hover:shadow-xl disabled:cursor-not-allowed disabled:opacity-50"
|
|
type="submit"
|
|
:disabled="loading || !userForm.fullname || !userForm.email"
|
|
>
|
|
<!-- Shine effect -->
|
|
<span
|
|
class="absolute inset-0 -translate-x-full -skew-x-12 transform bg-gradient-to-r from-transparent via-white/30 to-transparent transition-transform duration-700 group-hover:translate-x-full"
|
|
></span>
|
|
|
|
<!-- Button content -->
|
|
<span class="relative z-10 flex items-center gap-3">
|
|
<svg v-if="loading" class="h-5 w-5 animate-spin" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path
|
|
class="opacity-75"
|
|
fill="currentColor"
|
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
|
></path>
|
|
</svg>
|
|
<span>{{ loading ? 'Sending...' : '✨ Yes, I want my free consultation!' }}</span>
|
|
</span>
|
|
</button>
|
|
|
|
<!-- Security Note -->
|
|
<p class="mt-4 text-center text-xs text-white/60">
|
|
🔒 Absolute confidentiality • No commitment • 100% personalized guidance
|
|
</p>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Testimonial Section -->
|
|
<div class="max-w-4xl text-center">
|
|
<div class="rounded-2xl border border-white/20 bg-black/30 p-8 backdrop-blur-sm">
|
|
<h3 class="mb-6 text-2xl font-bold text-white">They Took the Decisive Step</h3>
|
|
<div class="grid gap-6 md:grid-cols-2">
|
|
<div class="text-left">
|
|
<p class="mb-4 text-white/80 italic">
|
|
"I had been carrying uncertainties for years. In just one session, I found the clarity that changed my life.
|
|
Thank you!"
|
|
</p>
|
|
<p class="font-semibold text-purple-300">- Marie, 34 years old</p>
|
|
</div>
|
|
<div class="text-left">
|
|
<p class="mb-4 text-white/80 italic">
|
|
"The guidance I received transformed my relationship with myself and others. I finally feel aligned with my
|
|
true self."
|
|
</p>
|
|
<p class="font-semibold text-purple-300">- Thomas, 41 years old</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Final CTA -->
|
|
<div class="max-w-2xl text-center">
|
|
<div class="rounded-2xl bg-gradient-to-r from-purple-500/20 to-violet-500/20 p-6">
|
|
<h3 class="mb-4 text-xl font-bold text-white">🌟 Your Future Awaits You</h3>
|
|
<p class="text-white/80">
|
|
Don't let daily life suffocate your soul's call.
|
|
<strong>Your transformation begins with a simple "yes"</strong>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</LandingLayout>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Isolate the background to only this component */
|
|
.booking-page-background {
|
|
background: transparent;
|
|
}
|
|
|
|
.booking-page-background > * {
|
|
background: transparent;
|
|
}
|
|
|
|
/* Floating particles animation */
|
|
@keyframes float {
|
|
0%,
|
|
100% {
|
|
transform: translateY(0) rotate(0deg);
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translateY(-100px) rotate(180deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.floating-particle {
|
|
animation: float 8s ease-in-out infinite;
|
|
}
|
|
|
|
/* Glow effects */
|
|
@keyframes glowPulse {
|
|
0%,
|
|
100% {
|
|
opacity: 0.3;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 0.6;
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
|
|
.glow-effect {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(60px);
|
|
animation: glowPulse 8s ease-in-out infinite;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.glow-1 {
|
|
width: 300px;
|
|
height: 300px;
|
|
background: radial-gradient(circle, rgba(168, 85, 247, 0.4) 0%, transparent 70%);
|
|
top: 20%;
|
|
left: 10%;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.glow-2 {
|
|
width: 400px;
|
|
height: 400px;
|
|
background: radial-gradient(circle, rgba(79, 70, 229, 0.3) 0%, transparent 70%);
|
|
bottom: 20%;
|
|
right: 10%;
|
|
animation-delay: 4s;
|
|
}
|
|
|
|
.glow-3 {
|
|
width: 250px;
|
|
height: 250px;
|
|
background: radial-gradient(circle, rgba(139, 92, 246, 0.3) 0%, transparent 70%);
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
animation-delay: 2s;
|
|
}
|
|
|
|
/* Smooth transitions for form elements */
|
|
* {
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
</style>
|