44 lines
1.7 KiB
PHP
44 lines
1.7 KiB
PHP
|
<?php
|
||
|
|
|
||
|
|
use Livewire\Attributes\Validate;
|
||
|
|
use Livewire\Component;
|
||
|
|
|
||
|
|
new class extends Component {
|
||
|
|
#[Validate('required|email')]
|
||
|
|
public string $email;
|
||
|
|
|
||
|
|
public ?string $message;
|
||
|
|
|
||
|
|
public function subscribe()
|
||
|
|
{
|
||
|
|
$this->validate();
|
||
|
|
|
||
|
|
$this->message = "You have been subscribed!";
|
||
|
|
}
|
||
|
|
};
|
||
|
|
?>
|
||
|
|
|
||
|
|
<div class="mt-24 bg-indigo-600 rounded-3xl p-8 md:p-16 text-center text-white relative overflow-hidden" x-cloak>
|
||
|
|
<div class="absolute top-0 right-0 -mt-8 -mr-8 w-64 h-64 bg-indigo-500 rounded-full blur-3xl opacity-50"></div>
|
||
|
|
<div class="relative z-10 max-w-2xl mx-auto">
|
||
|
|
<h2 class="text-3xl font-bold mb-4">Stay ahead of the curve</h2>
|
||
|
|
<p class="text-indigo-100 mb-8">Join 15,000+ developers getting weekly insights on the latest tech delivered
|
||
|
|
straight to their inbox.</p>
|
||
|
|
<form class="flex flex-col sm:flex-row gap-4">
|
||
|
|
<input type="email" wire:model="email" placeholder="Enter your email" class="flex-grow px-6 py-4 rounded-full text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-300">
|
||
|
|
<button type="button" class="bg-white text-indigo-600 font-bold px-8 py-4 rounded-full hover:bg-indigo-50 transition shadow-lg" wire:click="subscribe">
|
||
|
|
Subscribe Now
|
||
|
|
</button>
|
||
|
|
</form>
|
||
|
|
<p class="mt-4 text-xs text-indigo-200">No spam. Unsubscribe at any time.</p>
|
||
|
|
@if ($message)
|
||
|
|
<div x-data="{ show: true }" x-init="setTimeout(() => show = false, 3000)">
|
||
|
|
<p x-show="show" class="mt-4 text-xs text-indigo-200">{{ $this->message }}</p>
|
||
|
|
</div>
|
||
|
|
@endif
|
||
|
|
@if ($errors)
|
||
|
|
<p class="mt-4 text-xs text-red-300">{{ $errors->first('email') }}</p>
|
||
|
|
@endif
|
||
|
|
</div>
|
||
|
|
</div>
|