---
// Testimonials section with social proof
---

<section id="testimonials" class="py-20 lg:py-32 bg-gradient-to-b from-background via-card/30 to-background relative overflow-hidden">
	<!-- Enhanced Background decoration -->
	<div class="absolute inset-0 bg-grid-pattern bg-grid-48 opacity-20"></div>
	<div class="gradient-blob bg-primary w-[400px] h-[400px] top-10 right-10 animate-float parallax-slow"></div>
	<div class="gradient-blob bg-trackeep-purple w-[350px] h-[350px] bottom-10 left-10 animate-float parallax-slow" style="animation-delay: 3s"></div>
	<div class="gradient-blob bg-trackeep-green w-[300px] h-[300px] top-1/2 right-1/4 animate-float parallax-slow" style="animation-delay: 1.5s"></div>
	<div class="gradient-blob bg-trackeep-blue w-[250px] h-[250px] bottom-1/3 left-1/4 animate-float parallax-slow" style="animation-delay: 2.5s"></div>
	
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
		<!-- Enhanced Section header with shimmer effects -->
		<div class="text-center mb-20">
			<div class="inline-flex items-center px-6 py-3 rounded-full bg-gradient-to-r from-primary/10 to-trackeep-purple/10 border border-primary/20 mb-8 animate-fade-in glass-effect backdrop-blur-xl hover-lift group cursor-pointer glow-border">
				<span class="w-3 h-3 bg-gradient-to-r from-primary to-trackeep-purple rounded-full mr-3 animate-pulse shadow-glow"></span>
				<span class="text-sm font-semibold text-primary text-shimmer">Social Proof</span>
				<svg class="w-4 h-4 ml-2 text-primary opacity-0 group-hover:opacity-100 transition-all duration-300 group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
				</svg>
			</div>
			<h2 class="text-5xl sm:text-6xl lg:text-7xl font-black text-foreground mb-8 leading-tight animate-fade-in">
				<span class="block">Loved by</span>
				<span class="gradient-text animate-glow text-shadow-glow text-shimmer">Developers & Teams</span>
			</h2>
			<p class="text-2xl lg:text-3xl text-muted-foreground max-w-5xl mx-auto leading-relaxed animate-slide-up font-medium" style="animation-delay: 0.1s">
				Join thousands of users who have transformed their productivity with Trackkeep. Here's what they have to say.
			</p>
		</div>
		
		<!-- Enhanced Testimonials grid with 3D effects -->
		<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 stagger-animation">
			<!-- Testimonial 1 -->
			<div class="feature-card group cursor-pointer animate-scale-in scroll-reveal hover-3d glow-border" style="animation-delay: 0.2s">
				<div class="relative z-10">
					<div class="flex items-center mb-6">
						<div class="w-14 h-14 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white font-semibold text-lg group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 group-hover:shadow-glow border border-blue-500/30">
							JD
						</div>
						<div class="ml-4">
							<h4 class="font-bold text-xl text-foreground group-hover:text-blue-500 transition-colors">John Doe</h4>
							<p class="text-sm text-muted-foreground font-medium">Senior Developer</p>
						</div>
					</div>
					<div class="flex mb-4">
						<svg class="w-6 h-6 text-yellow-400 animate-pulse" fill="currentColor" viewBox="0 0 20 20">
							<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
						</svg>
						<svg class="w-6 h-6 text-yellow-400 animate-pulse" fill="currentColor" viewBox="0 0 20 20">
							<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
						</svg>
						<svg class="w-6 h-6 text-yellow-400 animate-pulse" fill="currentColor" viewBox="0 0 20 20">
							<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
						</svg>
						<svg class="w-6 h-6 text-yellow-400 animate-pulse" fill="currentColor" viewBox="0 0 20 20">
							<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
						</svg>
						<svg class="w-6 h-6 text-yellow-400 animate-pulse" fill="currentColor" viewBox="0 0 20 20">
							<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
						</svg>
					</div>
					<blockquote class="text-muted-foreground leading-relaxed mb-6 text-lg font-medium">
						"Trackkeep has completely transformed how I manage my development resources. The AI-powered organization saves me hours every week, and the self-hosted nature gives me complete peace of mind about my data."
					</blockquote>
					<div class="flex items-center text-blue-500 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0">
						<span class="text-base font-semibold mr-2">Read more</span>
						<svg class="w-5 h-5 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
						</svg>
					</div>
				</div>
			</div>
			
			<!-- Testimonial 2 -->
			<div class="feature-card group cursor-pointer animate-scale-in scroll-reveal hover-3d glow-border" style="animation-delay: 0.3s">
				<div class="relative z-10">
					<div class="flex items-center mb-6">
						<div class="w-14 h-14 bg-gradient-to-br from-green-500 to-teal-600 rounded-full flex items-center justify-center text-white font-semibold text-lg group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 group-hover:shadow-glow-green border border-green-500/30">
							SM
						</div>
						<div class="ml-4">
							<h4 class="font-bold text-xl text-foreground group-hover:text-green-500 transition-colors">Sarah Miller</h4>
							<p class="text-sm text-muted-foreground font-medium">Product Manager</p>
						</div>
					</div>
					<div class="flex mb-4">
						<svg class="w-6 h-6 text-yellow-400 animate-pulse" fill="currentColor" viewBox="0 0 20 20">
							<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
						</svg>
						<svg class="w-6 h-6 text-yellow-400 animate-pulse" fill="currentColor" viewBox="0 0 20 20">
							<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
						</svg>
						<svg class="w-6 h-6 text-yellow-400 animate-pulse" fill="currentColor" viewBox="0 0 20 20">
							<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
						</svg>
						<svg class="w-6 h-6 text-yellow-400 animate-pulse" fill="currentColor" viewBox="0 0 20 20">
							<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
						</svg>
						<svg class="w-6 h-6 text-yellow-400 animate-pulse" fill="currentColor" viewBox="0 0 20 20">
							<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
						</svg>
					</div>
					<blockquote class="text-muted-foreground leading-relaxed mb-6 text-lg font-medium">
						"The task management features are incredible. Our team's productivity has increased by 40% since we switched to Trackkeep. The mobile apps keep everyone connected, no matter where they're working from."
					</blockquote>
					<div class="flex items-center text-green-500 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0">
						<span class="text-base font-semibold mr-2">Read more</span>
						<svg class="w-5 h-5 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
						</svg>
					</div>
				</div>
			</div>
			
			<!-- Testimonial 3 -->
			<div class="card-papra p-6 hover-lift group animate-scale-in" style="animation-delay: 0.4s">
				<div class="flex items-center mb-4">
					<div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-600 rounded-full flex items-center justify-center text-white font-semibold text-lg">
						MC
					</div>
					<div class="ml-4">
						<h4 class="font-semibold text-foreground">Michael Chen</h4>
						<p class="text-sm text-muted-foreground">DevOps Engineer</p>
					</div>
				</div>
				<div class="flex mb-4">
					<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
						<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
					</svg>
					<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
						<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
					</svg>
					<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
						<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
					</svg>
					<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
						<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
					</svg>
					<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
						<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
					</svg>
				</div>
				<blockquote class="text-muted-foreground leading-relaxed mb-4">
					"As a DevOps engineer, I appreciate the attention to security and the ease of deployment. The Docker setup took less than 5 minutes, and the API documentation is comprehensive. This is how modern tools should be built."
				</blockquote>
				<div class="text-sm text-primary font-medium">
					⭐⭐⭐⭐⭐
				</div>
			</div>
		</div>
		
		<!-- Stats section -->
		<div class="mt-20 grid grid-cols-1 md:grid-cols-4 gap-8 text-center">
			<div class="animate-scale-in" style="animation-delay: 0.5s">
				<div class="text-4xl lg:text-5xl font-bold text-primary mb-2">10K+</div>
				<div class="text-muted-foreground">Active Users</div>
			</div>
			<div class="animate-scale-in" style="animation-delay: 0.6s">
				<div class="text-4xl lg:text-5xl font-bold text-trackeep-green mb-2">500K+</div>
				<div class="text-muted-foreground">Bookmarks Saved</div>
			</div>
			<div class="animate-scale-in" style="animation-delay: 0.7s">
				<div class="text-4xl lg:text-5xl font-bold text-trackeep-purple mb-2">50K+</div>
				<div class="text-muted-foreground">Tasks Completed</div>
			</div>
			<div class="animate-scale-in" style="animation-delay: 0.8s">
				<div class="text-4xl lg:text-5xl font-bold text-trackeep-orange mb-2">99.9%</div>
				<div class="text-muted-foreground">Uptime</div>
			</div>
		</div>
		
		<!-- CTA -->
		<div class="mt-20 text-center animate-slide-up" style="animation-delay: 0.9s">
			<div class="inline-flex items-center justify-center p-8 rounded-2xl bg-card/50 backdrop-blur-sm border border-border/50">
				<div class="text-center">
					<h3 class="text-2xl font-semibold text-foreground mb-4">
						Ready to join them?
					</h3>
					<p class="text-muted-foreground mb-6 max-w-md">
						Start your journey to better productivity and data privacy today.
					</p>
					<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
						<a href="https://demo.trackeep.org" target="_blank" rel="noopener" class="btn-primary px-8 py-4 shadow-glow group">
							Try Live Demo
							<svg class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
							</svg>
						</a>
						<a href="#install" class="btn-outline px-8 py-4 backdrop-blur-sm">
							Get Started Now
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
