<section class="py-20 bg-white dark:bg-gray-900">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Section Header -->
<div class="text-center mb-16" x-data="{ inView: false }" x-init="setTimeout(() => inView = true, 500)">
<div :class="{ 'opacity-100 translate-y-0': inView, 'opacity-0 translate-y-8': !inView }" class="transition-all duration-1000 ease-out">
<h2 class="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mb-4">
Share Your Feedback
</h2>
<p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
We value your input! Let us know how we can improve WavyKits to better serve your needs.
</p>
</div>
</div>
<!-- Feedback Form -->
<div x-data="{ inView: false }" x-init="setTimeout(() => inView = true, 500)" :class="{ 'opacity-100 translate-y-0': inView, 'opacity-0 translate-y-8': !inView }" class="transition-all duration-1000 ease-out delay-200">
<div class="bg-gray-50 dark:bg-gray-800 rounded-2xl p-6">
<div class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
<input type="text" id="name" name="name" class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm p-2.5" placeholder="Your Name">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
<input type="email" id="email" name="email" class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm p-2.5" placeholder="Your Email">
</div>
<div>
<label for="feedback" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Your Feedback</label>
<textarea id="feedback" name="feedback" rows="5" class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm p-2.5" placeholder="Share your thoughts about WavyKits..."></textarea>
</div>
<div class="flex items-center">
<input id="satisfaction" name="satisfaction" type="checkbox" class="h-4 w-4 text-blue-500 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded">
<label for="satisfaction" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">I am satisfied with WavyKits features</label>
</div>
<div>
<button
@click="alert('Feedback submitted! Thank you for your input.')"
class="w-full sm:w-auto px-6 py-3 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200"
>
Submit Feedback
</button>
</div>
</div>
</div>
</div>
</div>
</section>