242 lines
16 KiB
Vue
242 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 Clients
|
||
</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 truly a revelation. Its 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">
|
||
"A truly enriching experience. The insights are clear and provide a unique perspective on the 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>
|