<div x-data="{
email: '',
showToast: false,
toastMessage: '',
toastSuccess: false,
validateEmail(email) {
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return re.test(email);
},
subscribe() {
if (!this.email.trim()) {
this.toastMessage = 'Please enter an email address';
this.toastSuccess = false;
this.showToast = true;
setTimeout(() => { this.showToast = false; }, 3000);
} else if (!this.validateEmail(this.email)) {
this.toastMessage = 'Please enter a valid email address';
this.toastSuccess = false;
this.showToast = true;
setTimeout(() => { this.showToast = false; }, 3000);
} else {
this.toastMessage = 'Thank you for subscribing!';
this.toastSuccess = true;
this.showToast = true;
this.email = '';
setTimeout(() => { this.showToast = false; }, 3000);
}
}
}" class="max-w-3xl mx-auto px-4 py-8 bg-white shadow-sm">
<!-- Toast Notification -->
<div
x-show="showToast"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform translate-y-4"
x-transition:enter-end="opacity-100 transform translate-y-0"
x-transition:leave="transition ease-in duration-300"
x-transition:leave-end="opacity-0 transform translate-y-4"
:class="toastSuccess ? 'bg-white text-green-600' : 'bg-white text-red-600'"
class="fixed top-4 right-4 px-4 py-2 rounded-lg shadow-lg flex items-center space-x-2"
>
<svg
x-show="toastSuccess"
class="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<svg
x-show="!toastSuccess"
class="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
<span x-text="toastMessage"></span>
</div>
<h2 class="text-2xl font-bold text-gray-900 mb-6">Subscribe to Our Newsletter</h2>
<p class="text-gray-700 mb-6">
Stay updated with the latest insights on mindful coding and software development. Join our community today!
</p>
<div class="flex flex-col sm:flex-row gap-4">
<input
x-model="email"
type="email"
placeholder="Enter your email"
class="flex-1 p-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<button
@click="subscribe"
class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
>
Subscribe
</button>
</div>
<p class="text-sm text-gray-500 mt-4">
We respect your privacy. Unsubscribe at any time.
</p>
</div>