241 lines
16 KiB
Vue
241 lines
16 KiB
Vue
<template>
|
|
<section class="relative -mx-[calc((100vw-100%)/2)] w-screen overflow-hidden py-20 sm:py-24" id="testimonials">
|
|
<h2 class="mb-16 transform text-center text-4xl font-bold text-white transition-all duration-700 hover:scale-105 md:text-5xl">
|
|
Testimonials from Our Initiates
|
|
</h2>
|
|
|
|
<div class="mx-auto grid max-w-6xl grid-cols-1 gap-8 px-4 md:grid-cols-2 lg:grid-cols-3">
|
|
<!-- Testimonial 1 -->
|
|
<div
|
|
class="group relative overflow-hidden rounded-2xl border border-[#4c1d95]/30 bg-gradient-to-br from-black/80 to-[#1a0b2e] p-8 shadow-lg transition-all duration-500 hover:-translate-y-2 hover:shadow-xl"
|
|
>
|
|
<div
|
|
class="absolute inset-0 bg-gradient-to-br from-transparent via-purple-400/5 to-transparent opacity-0 transition-opacity duration-700 group-hover:opacity-100"
|
|
></div>
|
|
<div class="relative z-10">
|
|
<div class="mb-4 flex items-center gap-4">
|
|
<div
|
|
class="h-14 w-14 rounded-full bg-cover bg-center ring-2 ring-[#f59e0b]/50 transition-all duration-300 group-hover:ring-[#f59e0b]"
|
|
style="
|
|
background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDFCMVcWHXeHbptxH6HmDJlSpMyAhuoQv_qO0rkUx2EAWltD1WisKuZBoojbWd6-4cnE_K2LXTnhhzlULi5nUeWKQAvci7rM2rDsO4-uvHW8Oe7Jl9TLi1m0-oTJg1X5wdyrxunLWT6CZuD5MQiKC0pxYbq34-HFvBJ2iQKbOgmdlkAwV7xYwWNBeEePBjlAsZ7_MSLMqCAFskClsAEFkJU2YBzQflFeD1fmpK0iXqaXYhQS_kABCFx49W9bb73ShytrweHfDUJkJg');
|
|
"
|
|
></div>
|
|
<div>
|
|
<p class="text-lg font-bold text-white transition-colors duration-300 group-hover:text-[#f59e0b]">Sophia Williams</p>
|
|
<div class="flex text-[#f59e0b]">
|
|
<svg class="h-5 w-5 transform transition-all duration-300 hover:scale-125" fill="currentColor" viewBox="0 0 256 256">
|
|
<path
|
|
d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
|
|
></path>
|
|
</svg>
|
|
<svg class="h-5 w-5 transform transition-all duration-300 hover:scale-125" fill="currentColor" viewBox="0 0 256 256">
|
|
<path
|
|
d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
|
|
></path>
|
|
</svg>
|
|
<svg class="h-5 w-5 transform transition-all duration-300 hover:scale-125" fill="currentColor" viewBox="0 0 256 256">
|
|
<path
|
|
d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
|
|
></path>
|
|
</svg>
|
|
<svg class="h-5 w-5 transform transition-all duration-300 hover:scale-125" fill="currentColor" viewBox="0 0 256 256">
|
|
<path
|
|
d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
|
|
></path>
|
|
</svg>
|
|
<svg class="h-5 w-5 transform transition-all duration-300 hover:scale-125" fill="currentColor" viewBox="0 0 256 256">
|
|
<path
|
|
d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
|
|
></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="testimonial-quote relative text-white/80 italic">
|
|
"Kris Saint Ange's Oracle was a revelation. Her guidance helped me make important decisions with confidence."
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Testimonial 2 -->
|
|
<div
|
|
class="group relative overflow-hidden rounded-2xl border border-[#4c1d95]/30 bg-gradient-to-br from-black/80 to-[#1a0b2e] p-8 shadow-lg transition-all duration-500 hover:-translate-y-2 hover:shadow-xl"
|
|
>
|
|
<div
|
|
class="absolute inset-0 bg-gradient-to-br from-transparent via-[#f59e0b]/5 to-transparent opacity-0 transition-opacity duration-700 group-hover:opacity-100"
|
|
></div>
|
|
<div class="relative z-10">
|
|
<div class="mb-4 flex items-center gap-4">
|
|
<div
|
|
class="h-14 w-14 rounded-full bg-cover bg-center ring-2 ring-[#f59e0b]/50 transition-all duration-300 group-hover:ring-[#f59e0b]"
|
|
style="
|
|
background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCYwDtbzamxSUEWCWG7j3saRw40YQI6KQIVhrw_IrJI8FZXKKHOYej_hGrkM6B5S_MiY-vZ3sWqQDJdPEiYnuH81hSwoHOwfuZWZqY_QoW2UvbtvqCVIiFzd0wk-P63V9j-AgIYgqtonlEzqX1FvYGPZrsocOKx6sArVQACeo6MrVYkm2IVwDGWFyFL0L5U9bzRD8-Zo7hRvn_1hmJxOPS72z61S3jZnDTZPQe6tX9_jJk8ei7qludF6Gs-Qb92jXbRR68FpIoxPHg');
|
|
"
|
|
></div>
|
|
<div>
|
|
<p class="text-lg font-bold text-white transition-colors duration-300 group-hover:text-[#f59e0b]">John Martin</p>
|
|
<div class="flex text-[#f59e0b]">
|
|
<svg class="h-5 w-5 transform transition-all duration-300 hover:scale-125" fill="currentColor" viewBox="0 0 256 256">
|
|
<path
|
|
d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
|
|
></path>
|
|
</svg>
|
|
<svg class="h-5 w-5 transform transition-all duration-300 hover:scale-125" fill="currentColor" viewBox="0 0 256 256">
|
|
<path
|
|
d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
|
|
></path>
|
|
</svg>
|
|
<svg class="h-5 w-5 transform transition-all duration-300 hover:scale-125" fill="currentColor" viewBox="0 0 256 256">
|
|
<path
|
|
d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
|
|
></path>
|
|
</svg>
|
|
<svg class="h-5 w-5 transform transition-all duration-300 hover:scale-125" fill="currentColor" viewBox="0 0 256 256">
|
|
<path
|
|
d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
|
|
></path>
|
|
</svg>
|
|
<svg
|
|
class="h-5 w-5 transform text-[#4c1d95]/30 transition-all duration-300"
|
|
fill="currentColor"
|
|
viewBox="0 0 256 256"
|
|
>
|
|
<path
|
|
d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
|
|
></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="testimonial-quote relative text-white/80 italic">
|
|
"An enriching experience. The readings are accurate and offer a unique perspective on challenges."
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Testimonial 3 -->
|
|
<div
|
|
class="group relative overflow-hidden rounded-2xl border border-[#4c1d95]/30 bg-gradient-to-br from-black/80 to-[#1a0b2e] p-8 shadow-lg transition-all duration-500 hover:-translate-y-2 hover:shadow-xl"
|
|
>
|
|
<div
|
|
class="absolute inset-0 bg-gradient-to-br from-transparent via-purple-400/5 to-transparent opacity-0 transition-opacity duration-700 group-hover:opacity-100"
|
|
></div>
|
|
<div class="relative z-10">
|
|
<div class="mb-4 flex items-center gap-4">
|
|
<div
|
|
class="h-14 w-14 rounded-full bg-cover bg-center ring-2 ring-[#f59e0b]/50 transition-all duration-300 group-hover:ring-[#f59e0b]"
|
|
style="
|
|
background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDFCMVcWHXeHbptxH6HmDJlSpMyAhuoQv_qO0rkUx2EAWltD1WisKuZBoojbWd6-4cnE_K2LXTnhhzlULi5nUeWKQAvci7rM2rDsO4-uvHW8Oe7Jl9TLi1m0-oTJg1X5wdyrxunLWT6CZuD5MQiKC0pxYbq34-HFvBJ2iQKbOgmdlkAwV7xYwWNBeEePBjlAsZ7_MSLMqCAFskClsAEFkJU2YBzQflFeD1fmpK0iXqaXYhQS_kABCFx49W9bb73ShytrweHfDUJkJg');
|
|
"
|
|
></div>
|
|
<div>
|
|
<p class="text-lg font-bold text-white transition-colors duration-300 group-hover:text-[#f59e0b]">Isabella Smith</p>
|
|
<div class="flex text-[#f59e0b]">
|
|
<svg class="h-5 w-5 transform transition-all duration-300 hover:scale-125" fill="currentColor" viewBox="0 0 256 256">
|
|
<path
|
|
d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
|
|
></path>
|
|
</svg>
|
|
<svg class="h-5 w-5 transform transition-all duration-300 hover:scale-125" fill="currentColor" viewBox="0 0 256 256">
|
|
<path
|
|
d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
|
|
></path>
|
|
</svg>
|
|
<svg class="h-5 w-5 transform transition-all duration-300 hover:scale-125" fill="currentColor" viewBox="0 0 256 256">
|
|
<path
|
|
d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
|
|
></path>
|
|
</svg>
|
|
<svg class="h-5 w-5 transform transition-all duration-300 hover:scale-125" fill="currentColor" viewBox="0 0 256 256">
|
|
<path
|
|
d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
|
|
></path>
|
|
</svg>
|
|
<svg class="h-5 w-5 transform transition-all duration-300 hover:scale-125" fill="currentColor" viewBox="0 0 256 256">
|
|
<path
|
|
d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
|
|
></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="testimonial-quote relative text-white/80 italic">
|
|
"I'm impressed by the depth of the interpretations. The Oracle is a valuable tool for personal growth."
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
export default {
|
|
name: 'TestimonialsSection',
|
|
mounted() {
|
|
// Add intersection observer for scroll animations
|
|
const observerOptions = {
|
|
root: null,
|
|
rootMargin: '0px',
|
|
threshold: 0.2,
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('animate-fade-in-up');
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
// Observe each testimonial
|
|
document.querySelectorAll('.group').forEach((testimonial) => {
|
|
observer.observe(testimonial);
|
|
});
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.testimonial-quote::before {
|
|
content: '"';
|
|
font-size: 2rem;
|
|
color: #f59e0b;
|
|
position: absolute;
|
|
left: -0.5rem;
|
|
top: -1rem;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Custom animations */
|
|
.group {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition:
|
|
opacity 0.6s ease-out,
|
|
transform 0.6s ease-out;
|
|
}
|
|
|
|
.group:nth-child(1) {
|
|
transition-delay: 0.1s;
|
|
}
|
|
|
|
.group:nth-child(2) {
|
|
transition-delay: 0.3s;
|
|
}
|
|
|
|
.group:nth-child(3) {
|
|
transition-delay: 0.5s;
|
|
}
|
|
|
|
.animate-fade-in-up {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Smooth transitions for all elements */
|
|
* {
|
|
transition-property: color, background-color, transform, opacity, box-shadow;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
</style>
|