< div class = "relative isolate w-full max-w-3xl overflow-hidden rounded-2xl bg-white font-sans text-gray-900 shadow-lg ring-1 ring-gray-200" >
< button type = "button" class = "absolute right-3 top-3 z-10 flex size-8 items-center justify-center rounded-full bg-gray-100 font-sans text-gray-700 transition hover:bg-gray-200 focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]" aria-label = "Close" >
< svg viewBox = "0 0 20 20" fill = "currentColor" class = "size-4" aria-hidden = "true" > < path d = "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" /> </ svg >
</ button >
< div class = "grid md:grid-cols-2" >
< div class = "relative flex min-h-56 items-center justify-center bg-[#eef5ff] px-8 py-10 md:min-h-full" aria-hidden = "true" >
< svg viewBox = "0 0 240 200" class = "relative z-10 h-40 w-auto sm:h-48" fill = "none" xmlns = "http://www.w3.org/2000/svg" >
< circle cx = "120" cy = "100" r = "78" fill = "#dbeafe" />
< rect x = "62" y = "74" width = "116" height = "76" rx = "10" fill = "#ffffff" stroke = "#1f2937" stroke-width = "4" />
< path d = "M62 88 L120 126 L178 88" stroke = "#1f2937" stroke-width = "4" stroke-linecap = "round" stroke-linejoin = "round" />
< circle cx = "163" cy = "81" r = "16" fill = "#2563eb" />
< path d = "M158 81 L162 85 L170 76" stroke = "#ffffff" stroke-width = "3" stroke-linecap = "round" stroke-linejoin = "round" />
</ svg >
</ div >
< div class = "flex flex-col justify-center px-8 py-10 font-sans sm:px-10" >
< h2 class = "font-sans text-2xl font-semibold tracking-tight text-gray-900 sm:text-3xl" > Join Our Community! </ h2 >
< p class = "mt-3 font-sans text-sm leading-6 text-gray-600 sm:text-base" > Get the latest news, updates, and special offers straight to your inbox. </ p >
< form method = "post" action = "#" class = "mt-6 flex flex-col gap-3 font-sans" >
< label for = "email" class = "sr-only" > Email </ label >
< input type = "email" id = "email" name = "email" required autocomplete = "email" placeholder = "Enter your email address" class = "block w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 font-sans text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
< button type = "submit" class = "inline-flex w-full items-center justify-center rounded-lg bg-[#2563eb] px-4 py-2.5 font-sans text-sm font-semibold text-white transition hover:bg-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]" > Subscribe </ button >
</ form >
< p class = "mt-4 text-center font-sans text-xs text-gray-500" > No spam. Unsubscribe anytime. </ p >
</ div >
</ div >
</ div > <div class="relative isolate w-full max-w-3xl overflow-hidden rounded-2xl bg-white font-sans text-gray-900 shadow-lg ring-1 ring-gray-200">
<button type="button" class="absolute right-3 top-3 z-10 flex size-8 items-center justify-center rounded-full bg-gray-100 font-sans text-gray-700 transition hover:bg-gray-200 focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]" aria-label="Close">
<svg viewBox="0 0 20 20" fill="currentColor" class="size-4" aria-hidden="true"><path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"/></svg>
</button>
<div class="grid md:grid-cols-2">
<div class="relative flex min-h-56 items-center justify-center bg-[#eef5ff] px-8 py-10 md:min-h-full" aria-hidden="true">
<svg viewBox="0 0 240 200" class="relative z-10 h-40 w-auto sm:h-48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="120" cy="100" r="78" fill="#dbeafe" />
<rect x="62" y="74" width="116" height="76" rx="10" fill="#ffffff" stroke="#1f2937" stroke-width="4" />
<path d="M62 88 L120 126 L178 88" stroke="#1f2937" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
<circle cx="163" cy="81" r="16" fill="#2563eb" />
<path d="M158 81 L162 85 L170 76" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="flex flex-col justify-center px-8 py-10 font-sans sm:px-10">
<h2 class="font-sans text-2xl font-semibold tracking-tight text-gray-900 sm:text-3xl">Join Our Community!</h2>
<p class="mt-3 font-sans text-sm leading-6 text-gray-600 sm:text-base">Get the latest news, updates, and special offers straight to your inbox.</p>
<form method="post" action="#" class="mt-6 flex flex-col gap-3 font-sans">
<label for="email" class="sr-only">Email</label>
<input type="email" id="email" name="email" required autocomplete="email" placeholder="Enter your email address" class="block w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 font-sans text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
<button type="submit" class="inline-flex w-full items-center justify-center rounded-lg bg-[#2563eb] px-4 py-2.5 font-sans text-sm font-semibold text-white transition hover:bg-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]">Subscribe</button>
</form>
<p class="mt-4 text-center font-sans text-xs text-gray-500">No spam. Unsubscribe anytime.</p>
</div>
</div>
</div>
< div class = "relative isolate w-full max-w-3xl overflow-hidden rounded-2xl bg-white font-sans text-gray-900 shadow-lg ring-1 ring-gray-200" >
< button type = "button" class = "absolute right-3 top-3 z-10 flex size-8 items-center justify-center rounded-full bg-gray-100 font-sans text-gray-700 transition hover:bg-gray-200 focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]" aria-label = "Close" >
< svg viewBox = "0 0 20 20" fill = "currentColor" class = "size-4" aria-hidden = "true" > < path d = "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" /> </ svg >
</ button >
< div class = "grid md:grid-cols-2" >
< div class = "relative flex min-h-56 items-center justify-center bg-[#eef5ff] px-8 py-10 md:min-h-full" aria-hidden = "true" >
< svg viewBox = "0 0 240 200" class = "relative z-10 h-40 w-auto sm:h-48" fill = "none" xmlns = "http://www.w3.org/2000/svg" >
< circle cx = "120" cy = "100" r = "78" fill = "#dbeafe" />
< rect x = "62" y = "74" width = "116" height = "76" rx = "10" fill = "#ffffff" stroke = "#1f2937" stroke-width = "4" />
< path d = "M62 88 L120 126 L178 88" stroke = "#1f2937" stroke-width = "4" stroke-linecap = "round" stroke-linejoin = "round" />
< circle cx = "163" cy = "81" r = "16" fill = "#2563eb" />
< path d = "M158 81 L162 85 L170 76" stroke = "#ffffff" stroke-width = "3" stroke-linecap = "round" stroke-linejoin = "round" />
</ svg >
</ div >
< div class = "flex flex-col justify-center px-8 py-10 font-sans sm:px-10" >
< h2 class = "font-sans text-2xl font-semibold tracking-tight text-gray-900 sm:text-3xl" > Join Our Community! </ h2 >
< p class = "mt-3 font-sans text-sm leading-6 text-gray-600 sm:text-base" > Get the latest news, updates, and special offers straight to your inbox. </ p >
< form id = "newsletter-signup" method = "post" action = "#" class = "mt-6 flex flex-col gap-3 font-sans" >
< label for = "email" class = "sr-only" > Email </ label >
< input type = "email" id = "email" name = "email" required autocomplete = "email" placeholder = "Enter your email address" class = "block w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 font-sans text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
< button type = "submit" class = "inline-flex w-full items-center justify-center rounded-lg bg-[#2563eb] px-4 py-2.5 font-sans text-sm font-semibold text-white transition hover:bg-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]" > Subscribe </ button >
</ form >
< p class = "mt-4 text-center font-sans text-xs text-gray-500" > No spam. Unsubscribe anytime. </ p >
</ div >
</ div >
</ div >
< script >
document . getElementById ( 'newsletter-signup' ) ? . addEventListener ( 'submit' , ( event ) = > {
event . preventDefault ( ) ;
const data = new FormData ( event . currentTarget ) ;
// Handle form data (fetch, auth API, etc.)
console . log ( Object . fromEntries ( data . entries ( ) ) ) ;
} ) ;
</ script > <div class="relative isolate w-full max-w-3xl overflow-hidden rounded-2xl bg-white font-sans text-gray-900 shadow-lg ring-1 ring-gray-200">
<button type="button" class="absolute right-3 top-3 z-10 flex size-8 items-center justify-center rounded-full bg-gray-100 font-sans text-gray-700 transition hover:bg-gray-200 focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]" aria-label="Close">
<svg viewBox="0 0 20 20" fill="currentColor" class="size-4" aria-hidden="true"><path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"/></svg>
</button>
<div class="grid md:grid-cols-2">
<div class="relative flex min-h-56 items-center justify-center bg-[#eef5ff] px-8 py-10 md:min-h-full" aria-hidden="true">
<svg viewBox="0 0 240 200" class="relative z-10 h-40 w-auto sm:h-48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="120" cy="100" r="78" fill="#dbeafe" />
<rect x="62" y="74" width="116" height="76" rx="10" fill="#ffffff" stroke="#1f2937" stroke-width="4" />
<path d="M62 88 L120 126 L178 88" stroke="#1f2937" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
<circle cx="163" cy="81" r="16" fill="#2563eb" />
<path d="M158 81 L162 85 L170 76" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="flex flex-col justify-center px-8 py-10 font-sans sm:px-10">
<h2 class="font-sans text-2xl font-semibold tracking-tight text-gray-900 sm:text-3xl">Join Our Community!</h2>
<p class="mt-3 font-sans text-sm leading-6 text-gray-600 sm:text-base">Get the latest news, updates, and special offers straight to your inbox.</p>
<form id="newsletter-signup" method="post" action="#" class="mt-6 flex flex-col gap-3 font-sans">
<label for="email" class="sr-only">Email</label>
<input type="email" id="email" name="email" required autocomplete="email" placeholder="Enter your email address" class="block w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 font-sans text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
<button type="submit" class="inline-flex w-full items-center justify-center rounded-lg bg-[#2563eb] px-4 py-2.5 font-sans text-sm font-semibold text-white transition hover:bg-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]">Subscribe</button>
</form>
<p class="mt-4 text-center font-sans text-xs text-gray-500">No spam. Unsubscribe anytime.</p>
</div>
</div>
</div>
<script>
document.getElementById('newsletter-signup')?.addEventListener('submit', (event) => {
event.preventDefault();
const data = new FormData(event.currentTarget);
// Handle form data (fetch, auth API, etc.)
console.log(Object.fromEntries(data.entries()));
});
</script>
function NewsletterForm ( ) {
function handleSubmit ( event ) {
event . preventDefault ( ) ;
const data = new FormData ( event . currentTarget ) ;
// Handle form data (fetch, auth API, etc.)
console . log ( Object . fromEntries ( data . entries ( ) ) ) ;
}
return (
< div className = "relative isolate w-full max-w-3xl overflow-hidden rounded-2xl bg-white font-sans text-gray-900 shadow-lg ring-1 ring-gray-200" >
< button type = "button" className = "absolute right-3 top-3 z-10 flex size-8 items-center justify-center rounded-full bg-gray-100 font-sans text-gray-700 transition hover:bg-gray-200 focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]" aria-label = "Close" >
< svg viewBox = "0 0 20 20" fill = "currentColor" className = "size-4" aria-hidden = "true" > < path d = "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" /> </ svg >
</ button >
< div className = "grid md:grid-cols-2" >
< div className = "relative flex min-h-56 items-center justify-center bg-[#eef5ff] px-8 py-10 md:min-h-full" aria-hidden = "true" >
< svg viewBox = "0 0 240 200" className = "relative z-10 h-40 w-auto sm:h-48" fill = "none" xmlns = "http://www.w3.org/2000/svg" >
< circle cx = "120" cy = "100" r = "78" fill = "#dbeafe" />
< rect x = "62" y = "74" width = "116" height = "76" rx = "10" fill = "#ffffff" stroke = "#1f2937" stroke-width = "4" />
< path d = "M62 88 L120 126 L178 88" stroke = "#1f2937" stroke-width = "4" stroke-linecap = "round" stroke-linejoin = "round" />
< circle cx = "163" cy = "81" r = "16" fill = "#2563eb" />
< path d = "M158 81 L162 85 L170 76" stroke = "#ffffff" stroke-width = "3" stroke-linecap = "round" stroke-linejoin = "round" />
</ svg >
</ div >
< div className = "flex flex-col justify-center px-8 py-10 font-sans sm:px-10" >
< h2 className = "font-sans text-2xl font-semibold tracking-tight text-gray-900 sm:text-3xl" > Join Our Community! </ h2 >
< p className = "mt-3 font-sans text-sm leading-6 text-gray-600 sm:text-base" > Get the latest news, updates, and special offers straight to your inbox. </ p >
< form onSubmit = { handleSubmit } className = "mt-6 flex flex-col gap-3 font-sans" >
< label htmlFor = "email" className = "sr-only" > Email </ label >
< input type = "email" id = "email" name = "email" required autoComplete = "email" placeholder = "Enter your email address" className = "block w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 font-sans text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
< button type = "submit" className = "inline-flex w-full items-center justify-center rounded-lg bg-[#2563eb] px-4 py-2.5 font-sans text-sm font-semibold text-white transition hover:bg-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]" > Subscribe </ button >
</ form >
< p className = "mt-4 text-center font-sans text-xs text-gray-500" > No spam. Unsubscribe anytime. </ p >
</ div >
</ div >
</ div >
) ;
} function NewsletterForm() {
function handleSubmit(event) {
event.preventDefault();
const data = new FormData(event.currentTarget);
// Handle form data (fetch, auth API, etc.)
console.log(Object.fromEntries(data.entries()));
}
return (
<div className="relative isolate w-full max-w-3xl overflow-hidden rounded-2xl bg-white font-sans text-gray-900 shadow-lg ring-1 ring-gray-200">
<button type="button" className="absolute right-3 top-3 z-10 flex size-8 items-center justify-center rounded-full bg-gray-100 font-sans text-gray-700 transition hover:bg-gray-200 focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]" aria-label="Close">
<svg viewBox="0 0 20 20" fill="currentColor" className="size-4" aria-hidden="true"><path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"/></svg>
</button>
<div className="grid md:grid-cols-2">
<div className="relative flex min-h-56 items-center justify-center bg-[#eef5ff] px-8 py-10 md:min-h-full" aria-hidden="true">
<svg viewBox="0 0 240 200" className="relative z-10 h-40 w-auto sm:h-48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="120" cy="100" r="78" fill="#dbeafe" />
<rect x="62" y="74" width="116" height="76" rx="10" fill="#ffffff" stroke="#1f2937" stroke-width="4" />
<path d="M62 88 L120 126 L178 88" stroke="#1f2937" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
<circle cx="163" cy="81" r="16" fill="#2563eb" />
<path d="M158 81 L162 85 L170 76" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div className="flex flex-col justify-center px-8 py-10 font-sans sm:px-10">
<h2 className="font-sans text-2xl font-semibold tracking-tight text-gray-900 sm:text-3xl">Join Our Community!</h2>
<p className="mt-3 font-sans text-sm leading-6 text-gray-600 sm:text-base">Get the latest news, updates, and special offers straight to your inbox.</p>
<form onSubmit={handleSubmit} className="mt-6 flex flex-col gap-3 font-sans">
<label htmlFor="email" className="sr-only">Email</label>
<input type="email" id="email" name="email" required autoComplete="email" placeholder="Enter your email address" className="block w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 font-sans text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
<button type="submit" className="inline-flex w-full items-center justify-center rounded-lg bg-[#2563eb] px-4 py-2.5 font-sans text-sm font-semibold text-white transition hover:bg-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]">Subscribe</button>
</form>
<p className="mt-4 text-center font-sans text-xs text-gray-500">No spam. Unsubscribe anytime.</p>
</div>
</div>
</div>
);
}
'use client' ;
export default function NewsletterForm ( ) {
function handleSubmit ( event ) {
event . preventDefault ( ) ;
const data = new FormData ( event . currentTarget ) ;
// Handle form data (fetch, auth API, etc.)
console . log ( Object . fromEntries ( data . entries ( ) ) ) ;
}
return (
< div className = "relative isolate w-full max-w-3xl overflow-hidden rounded-2xl bg-white font-sans text-gray-900 shadow-lg ring-1 ring-gray-200" >
< button type = "button" className = "absolute right-3 top-3 z-10 flex size-8 items-center justify-center rounded-full bg-gray-100 font-sans text-gray-700 transition hover:bg-gray-200 focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]" aria-label = "Close" >
< svg viewBox = "0 0 20 20" fill = "currentColor" className = "size-4" aria-hidden = "true" > < path d = "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" /> </ svg >
</ button >
< div className = "grid md:grid-cols-2" >
< div className = "relative flex min-h-56 items-center justify-center bg-[#eef5ff] px-8 py-10 md:min-h-full" aria-hidden = "true" >
< svg viewBox = "0 0 240 200" className = "relative z-10 h-40 w-auto sm:h-48" fill = "none" xmlns = "http://www.w3.org/2000/svg" >
< circle cx = "120" cy = "100" r = "78" fill = "#dbeafe" />
< rect x = "62" y = "74" width = "116" height = "76" rx = "10" fill = "#ffffff" stroke = "#1f2937" stroke-width = "4" />
< path d = "M62 88 L120 126 L178 88" stroke = "#1f2937" stroke-width = "4" stroke-linecap = "round" stroke-linejoin = "round" />
< circle cx = "163" cy = "81" r = "16" fill = "#2563eb" />
< path d = "M158 81 L162 85 L170 76" stroke = "#ffffff" stroke-width = "3" stroke-linecap = "round" stroke-linejoin = "round" />
</ svg >
</ div >
< div className = "flex flex-col justify-center px-8 py-10 font-sans sm:px-10" >
< h2 className = "font-sans text-2xl font-semibold tracking-tight text-gray-900 sm:text-3xl" > Join Our Community! </ h2 >
< p className = "mt-3 font-sans text-sm leading-6 text-gray-600 sm:text-base" > Get the latest news, updates, and special offers straight to your inbox. </ p >
< form onSubmit = { handleSubmit } className = "mt-6 flex flex-col gap-3 font-sans" >
< label htmlFor = "email" className = "sr-only" > Email </ label >
< input type = "email" id = "email" name = "email" required autoComplete = "email" placeholder = "Enter your email address" className = "block w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 font-sans text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
< button type = "submit" className = "inline-flex w-full items-center justify-center rounded-lg bg-[#2563eb] px-4 py-2.5 font-sans text-sm font-semibold text-white transition hover:bg-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]" > Subscribe </ button >
</ form >
< p className = "mt-4 text-center font-sans text-xs text-gray-500" > No spam. Unsubscribe anytime. </ p >
</ div >
</ div >
</ div >
) ;
} 'use client';
export default function NewsletterForm() {
function handleSubmit(event) {
event.preventDefault();
const data = new FormData(event.currentTarget);
// Handle form data (fetch, auth API, etc.)
console.log(Object.fromEntries(data.entries()));
}
return (
<div className="relative isolate w-full max-w-3xl overflow-hidden rounded-2xl bg-white font-sans text-gray-900 shadow-lg ring-1 ring-gray-200">
<button type="button" className="absolute right-3 top-3 z-10 flex size-8 items-center justify-center rounded-full bg-gray-100 font-sans text-gray-700 transition hover:bg-gray-200 focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]" aria-label="Close">
<svg viewBox="0 0 20 20" fill="currentColor" className="size-4" aria-hidden="true"><path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"/></svg>
</button>
<div className="grid md:grid-cols-2">
<div className="relative flex min-h-56 items-center justify-center bg-[#eef5ff] px-8 py-10 md:min-h-full" aria-hidden="true">
<svg viewBox="0 0 240 200" className="relative z-10 h-40 w-auto sm:h-48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="120" cy="100" r="78" fill="#dbeafe" />
<rect x="62" y="74" width="116" height="76" rx="10" fill="#ffffff" stroke="#1f2937" stroke-width="4" />
<path d="M62 88 L120 126 L178 88" stroke="#1f2937" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
<circle cx="163" cy="81" r="16" fill="#2563eb" />
<path d="M158 81 L162 85 L170 76" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div className="flex flex-col justify-center px-8 py-10 font-sans sm:px-10">
<h2 className="font-sans text-2xl font-semibold tracking-tight text-gray-900 sm:text-3xl">Join Our Community!</h2>
<p className="mt-3 font-sans text-sm leading-6 text-gray-600 sm:text-base">Get the latest news, updates, and special offers straight to your inbox.</p>
<form onSubmit={handleSubmit} className="mt-6 flex flex-col gap-3 font-sans">
<label htmlFor="email" className="sr-only">Email</label>
<input type="email" id="email" name="email" required autoComplete="email" placeholder="Enter your email address" className="block w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 font-sans text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
<button type="submit" className="inline-flex w-full items-center justify-center rounded-lg bg-[#2563eb] px-4 py-2.5 font-sans text-sm font-semibold text-white transition hover:bg-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]">Subscribe</button>
</form>
<p className="mt-4 text-center font-sans text-xs text-gray-500">No spam. Unsubscribe anytime.</p>
</div>
</div>
</div>
);
}
< script setup >
function onSubmit ( event ) {
const data = new FormData ( event . currentTarget ) ;
// Handle form data (fetch, auth API, etc.)
console . log ( Object . fromEntries ( data . entries ( ) ) ) ;
}
</ script >
< template >
< div class = "relative isolate w-full max-w-3xl overflow-hidden rounded-2xl bg-white font-sans text-gray-900 shadow-lg ring-1 ring-gray-200" >
< button type = "button" class = "absolute right-3 top-3 z-10 flex size-8 items-center justify-center rounded-full bg-gray-100 font-sans text-gray-700 transition hover:bg-gray-200 focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]" aria-label = "Close" >
< svg viewBox = "0 0 20 20" fill = "currentColor" class = "size-4" aria-hidden = "true" > < path d = "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" /> </ svg >
</ button >
< div class = "grid md:grid-cols-2" >
< div class = "relative flex min-h-56 items-center justify-center bg-[#eef5ff] px-8 py-10 md:min-h-full" aria-hidden = "true" >
< svg viewBox = "0 0 240 200" class = "relative z-10 h-40 w-auto sm:h-48" fill = "none" xmlns = "http://www.w3.org/2000/svg" >
< circle cx = "120" cy = "100" r = "78" fill = "#dbeafe" />
< rect x = "62" y = "74" width = "116" height = "76" rx = "10" fill = "#ffffff" stroke = "#1f2937" stroke-width = "4" />
< path d = "M62 88 L120 126 L178 88" stroke = "#1f2937" stroke-width = "4" stroke-linecap = "round" stroke-linejoin = "round" />
< circle cx = "163" cy = "81" r = "16" fill = "#2563eb" />
< path d = "M158 81 L162 85 L170 76" stroke = "#ffffff" stroke-width = "3" stroke-linecap = "round" stroke-linejoin = "round" />
</ svg >
</ div >
< div class = "flex flex-col justify-center px-8 py-10 font-sans sm:px-10" >
< h2 class = "font-sans text-2xl font-semibold tracking-tight text-gray-900 sm:text-3xl" > Join Our Community! </ h2 >
< p class = "mt-3 font-sans text-sm leading-6 text-gray-600 sm:text-base" > Get the latest news, updates, and special offers straight to your inbox. </ p >
< form class = "mt-6 flex flex-col gap-3 font-sans" @submit.prevent = "onSubmit" >
< label for = "email" class = "sr-only" > Email </ label >
< input type = "email" id = "email" name = "email" required autocomplete = "email" placeholder = "Enter your email address" class = "block w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 font-sans text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
< button type = "submit" class = "inline-flex w-full items-center justify-center rounded-lg bg-[#2563eb] px-4 py-2.5 font-sans text-sm font-semibold text-white transition hover:bg-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]" > Subscribe </ button >
</ form >
< p class = "mt-4 text-center font-sans text-xs text-gray-500" > No spam. Unsubscribe anytime. </ p >
</ div >
</ div >
</ div >
</ template > <script setup>
function onSubmit(event) {
const data = new FormData(event.currentTarget);
// Handle form data (fetch, auth API, etc.)
console.log(Object.fromEntries(data.entries()));
}
</script>
<template>
<div class="relative isolate w-full max-w-3xl overflow-hidden rounded-2xl bg-white font-sans text-gray-900 shadow-lg ring-1 ring-gray-200">
<button type="button" class="absolute right-3 top-3 z-10 flex size-8 items-center justify-center rounded-full bg-gray-100 font-sans text-gray-700 transition hover:bg-gray-200 focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]" aria-label="Close">
<svg viewBox="0 0 20 20" fill="currentColor" class="size-4" aria-hidden="true"><path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"/></svg>
</button>
<div class="grid md:grid-cols-2">
<div class="relative flex min-h-56 items-center justify-center bg-[#eef5ff] px-8 py-10 md:min-h-full" aria-hidden="true">
<svg viewBox="0 0 240 200" class="relative z-10 h-40 w-auto sm:h-48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="120" cy="100" r="78" fill="#dbeafe" />
<rect x="62" y="74" width="116" height="76" rx="10" fill="#ffffff" stroke="#1f2937" stroke-width="4" />
<path d="M62 88 L120 126 L178 88" stroke="#1f2937" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
<circle cx="163" cy="81" r="16" fill="#2563eb" />
<path d="M158 81 L162 85 L170 76" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="flex flex-col justify-center px-8 py-10 font-sans sm:px-10">
<h2 class="font-sans text-2xl font-semibold tracking-tight text-gray-900 sm:text-3xl">Join Our Community!</h2>
<p class="mt-3 font-sans text-sm leading-6 text-gray-600 sm:text-base">Get the latest news, updates, and special offers straight to your inbox.</p>
<form class="mt-6 flex flex-col gap-3 font-sans" @submit.prevent="onSubmit">
<label for="email" class="sr-only">Email</label>
<input type="email" id="email" name="email" required autocomplete="email" placeholder="Enter your email address" class="block w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 font-sans text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
<button type="submit" class="inline-flex w-full items-center justify-center rounded-lg bg-[#2563eb] px-4 py-2.5 font-sans text-sm font-semibold text-white transition hover:bg-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]">Subscribe</button>
</form>
<p class="mt-4 text-center font-sans text-xs text-gray-500">No spam. Unsubscribe anytime.</p>
</div>
</div>
</div>
</template>
< script setup >
function onSubmit ( event ) {
const data = new FormData ( event . currentTarget ) ;
// Handle form data (fetch, auth API, etc.)
console . log ( Object . fromEntries ( data . entries ( ) ) ) ;
}
</ script >
< template >
< div class = "relative isolate w-full max-w-3xl overflow-hidden rounded-2xl bg-white font-sans text-gray-900 shadow-lg ring-1 ring-gray-200" >
< button type = "button" class = "absolute right-3 top-3 z-10 flex size-8 items-center justify-center rounded-full bg-gray-100 font-sans text-gray-700 transition hover:bg-gray-200 focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]" aria-label = "Close" >
< svg viewBox = "0 0 20 20" fill = "currentColor" class = "size-4" aria-hidden = "true" > < path d = "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" /> </ svg >
</ button >
< div class = "grid md:grid-cols-2" >
< div class = "relative flex min-h-56 items-center justify-center bg-[#eef5ff] px-8 py-10 md:min-h-full" aria-hidden = "true" >
< svg viewBox = "0 0 240 200" class = "relative z-10 h-40 w-auto sm:h-48" fill = "none" xmlns = "http://www.w3.org/2000/svg" >
< circle cx = "120" cy = "100" r = "78" fill = "#dbeafe" />
< rect x = "62" y = "74" width = "116" height = "76" rx = "10" fill = "#ffffff" stroke = "#1f2937" stroke-width = "4" />
< path d = "M62 88 L120 126 L178 88" stroke = "#1f2937" stroke-width = "4" stroke-linecap = "round" stroke-linejoin = "round" />
< circle cx = "163" cy = "81" r = "16" fill = "#2563eb" />
< path d = "M158 81 L162 85 L170 76" stroke = "#ffffff" stroke-width = "3" stroke-linecap = "round" stroke-linejoin = "round" />
</ svg >
</ div >
< div class = "flex flex-col justify-center px-8 py-10 font-sans sm:px-10" >
< h2 class = "font-sans text-2xl font-semibold tracking-tight text-gray-900 sm:text-3xl" > Join Our Community! </ h2 >
< p class = "mt-3 font-sans text-sm leading-6 text-gray-600 sm:text-base" > Get the latest news, updates, and special offers straight to your inbox. </ p >
< form class = "mt-6 flex flex-col gap-3 font-sans" @submit.prevent = "onSubmit" >
< label for = "email" class = "sr-only" > Email </ label >
< input type = "email" id = "email" name = "email" required autocomplete = "email" placeholder = "Enter your email address" class = "block w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 font-sans text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
< button type = "submit" class = "inline-flex w-full items-center justify-center rounded-lg bg-[#2563eb] px-4 py-2.5 font-sans text-sm font-semibold text-white transition hover:bg-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]" > Subscribe </ button >
</ form >
< p class = "mt-4 text-center font-sans text-xs text-gray-500" > No spam. Unsubscribe anytime. </ p >
</ div >
</ div >
</ div >
</ template > <script setup>
function onSubmit(event) {
const data = new FormData(event.currentTarget);
// Handle form data (fetch, auth API, etc.)
console.log(Object.fromEntries(data.entries()));
}
</script>
<template>
<div class="relative isolate w-full max-w-3xl overflow-hidden rounded-2xl bg-white font-sans text-gray-900 shadow-lg ring-1 ring-gray-200">
<button type="button" class="absolute right-3 top-3 z-10 flex size-8 items-center justify-center rounded-full bg-gray-100 font-sans text-gray-700 transition hover:bg-gray-200 focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]" aria-label="Close">
<svg viewBox="0 0 20 20" fill="currentColor" class="size-4" aria-hidden="true"><path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"/></svg>
</button>
<div class="grid md:grid-cols-2">
<div class="relative flex min-h-56 items-center justify-center bg-[#eef5ff] px-8 py-10 md:min-h-full" aria-hidden="true">
<svg viewBox="0 0 240 200" class="relative z-10 h-40 w-auto sm:h-48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="120" cy="100" r="78" fill="#dbeafe" />
<rect x="62" y="74" width="116" height="76" rx="10" fill="#ffffff" stroke="#1f2937" stroke-width="4" />
<path d="M62 88 L120 126 L178 88" stroke="#1f2937" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
<circle cx="163" cy="81" r="16" fill="#2563eb" />
<path d="M158 81 L162 85 L170 76" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="flex flex-col justify-center px-8 py-10 font-sans sm:px-10">
<h2 class="font-sans text-2xl font-semibold tracking-tight text-gray-900 sm:text-3xl">Join Our Community!</h2>
<p class="mt-3 font-sans text-sm leading-6 text-gray-600 sm:text-base">Get the latest news, updates, and special offers straight to your inbox.</p>
<form class="mt-6 flex flex-col gap-3 font-sans" @submit.prevent="onSubmit">
<label for="email" class="sr-only">Email</label>
<input type="email" id="email" name="email" required autocomplete="email" placeholder="Enter your email address" class="block w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 font-sans text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
<button type="submit" class="inline-flex w-full items-center justify-center rounded-lg bg-[#2563eb] px-4 py-2.5 font-sans text-sm font-semibold text-white transition hover:bg-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]">Subscribe</button>
</form>
<p class="mt-4 text-center font-sans text-xs text-gray-500">No spam. Unsubscribe anytime.</p>
</div>
</div>
</div>
</template>
---
// src/components/NewsletterForm.astro
---
< div class = "relative isolate w-full max-w-3xl overflow-hidden rounded-2xl bg-white font-sans text-gray-900 shadow-lg ring-1 ring-gray-200" >
< button type = "button" class = "absolute right-3 top-3 z-10 flex size-8 items-center justify-center rounded-full bg-gray-100 font-sans text-gray-700 transition hover:bg-gray-200 focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]" aria-label = "Close" >
< svg viewBox = "0 0 20 20" fill = "currentColor" class = "size-4" aria-hidden = "true" > < path d = "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" /> </ svg >
</ button >
< div class = "grid md:grid-cols-2" >
< div class = "relative flex min-h-56 items-center justify-center bg-[#eef5ff] px-8 py-10 md:min-h-full" aria-hidden = "true" >
< svg viewBox = "0 0 240 200" class = "relative z-10 h-40 w-auto sm:h-48" fill = "none" xmlns = "http://www.w3.org/2000/svg" >
< circle cx = "120" cy = "100" r = "78" fill = "#dbeafe" />
< rect x = "62" y = "74" width = "116" height = "76" rx = "10" fill = "#ffffff" stroke = "#1f2937" stroke-width = "4" />
< path d = "M62 88 L120 126 L178 88" stroke = "#1f2937" stroke-width = "4" stroke-linecap = "round" stroke-linejoin = "round" />
< circle cx = "163" cy = "81" r = "16" fill = "#2563eb" />
< path d = "M158 81 L162 85 L170 76" stroke = "#ffffff" stroke-width = "3" stroke-linecap = "round" stroke-linejoin = "round" />
</ svg >
</ div >
< div class = "flex flex-col justify-center px-8 py-10 font-sans sm:px-10" >
< h2 class = "font-sans text-2xl font-semibold tracking-tight text-gray-900 sm:text-3xl" > Join Our Community! </ h2 >
< p class = "mt-3 font-sans text-sm leading-6 text-gray-600 sm:text-base" > Get the latest news, updates, and special offers straight to your inbox. </ p >
< form method = "post" action = "#" class = "mt-6 flex flex-col gap-3 font-sans" >
< label for = "email" class = "sr-only" > Email </ label >
< input type = "email" id = "email" name = "email" required autocomplete = "email" placeholder = "Enter your email address" class = "block w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 font-sans text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
< button type = "submit" class = "inline-flex w-full items-center justify-center rounded-lg bg-[#2563eb] px-4 py-2.5 font-sans text-sm font-semibold text-white transition hover:bg-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]" > Subscribe </ button >
</ form >
< p class = "mt-4 text-center font-sans text-xs text-gray-500" > No spam. Unsubscribe anytime. </ p >
</ div >
</ div >
</ div > ---
// src/components/NewsletterForm.astro
---
<div class="relative isolate w-full max-w-3xl overflow-hidden rounded-2xl bg-white font-sans text-gray-900 shadow-lg ring-1 ring-gray-200">
<button type="button" class="absolute right-3 top-3 z-10 flex size-8 items-center justify-center rounded-full bg-gray-100 font-sans text-gray-700 transition hover:bg-gray-200 focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]" aria-label="Close">
<svg viewBox="0 0 20 20" fill="currentColor" class="size-4" aria-hidden="true"><path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"/></svg>
</button>
<div class="grid md:grid-cols-2">
<div class="relative flex min-h-56 items-center justify-center bg-[#eef5ff] px-8 py-10 md:min-h-full" aria-hidden="true">
<svg viewBox="0 0 240 200" class="relative z-10 h-40 w-auto sm:h-48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="120" cy="100" r="78" fill="#dbeafe" />
<rect x="62" y="74" width="116" height="76" rx="10" fill="#ffffff" stroke="#1f2937" stroke-width="4" />
<path d="M62 88 L120 126 L178 88" stroke="#1f2937" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
<circle cx="163" cy="81" r="16" fill="#2563eb" />
<path d="M158 81 L162 85 L170 76" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="flex flex-col justify-center px-8 py-10 font-sans sm:px-10">
<h2 class="font-sans text-2xl font-semibold tracking-tight text-gray-900 sm:text-3xl">Join Our Community!</h2>
<p class="mt-3 font-sans text-sm leading-6 text-gray-600 sm:text-base">Get the latest news, updates, and special offers straight to your inbox.</p>
<form method="post" action="#" class="mt-6 flex flex-col gap-3 font-sans">
<label for="email" class="sr-only">Email</label>
<input type="email" id="email" name="email" required autocomplete="email" placeholder="Enter your email address" class="block w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 font-sans text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
<button type="submit" class="inline-flex w-full items-center justify-center rounded-lg bg-[#2563eb] px-4 py-2.5 font-sans text-sm font-semibold text-white transition hover:bg-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]">Subscribe</button>
</form>
<p class="mt-4 text-center font-sans text-xs text-gray-500">No spam. Unsubscribe anytime.</p>
</div>
</div>
</div>
< script >
function onSubmit ( event ) {
const data = new FormData ( event . currentTarget ) ;
// Handle form data (fetch, auth API, etc.)
console . log ( Object . fromEntries ( data . entries ( ) ) ) ;
}
</ script >
< div class = "relative isolate w-full max-w-3xl overflow-hidden rounded-2xl bg-white font-sans text-gray-900 shadow-lg ring-1 ring-gray-200" >
< button type = "button" class = "absolute right-3 top-3 z-10 flex size-8 items-center justify-center rounded-full bg-gray-100 font-sans text-gray-700 transition hover:bg-gray-200 focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]" aria-label = "Close" >
< svg viewBox = "0 0 20 20" fill = "currentColor" class = "size-4" aria-hidden = "true" > < path d = "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" /> </ svg >
</ button >
< div class = "grid md:grid-cols-2" >
< div class = "relative flex min-h-56 items-center justify-center bg-[#eef5ff] px-8 py-10 md:min-h-full" aria-hidden = "true" >
< svg viewBox = "0 0 240 200" class = "relative z-10 h-40 w-auto sm:h-48" fill = "none" xmlns = "http://www.w3.org/2000/svg" >
< circle cx = "120" cy = "100" r = "78" fill = "#dbeafe" />
< rect x = "62" y = "74" width = "116" height = "76" rx = "10" fill = "#ffffff" stroke = "#1f2937" stroke-width = "4" />
< path d = "M62 88 L120 126 L178 88" stroke = "#1f2937" stroke-width = "4" stroke-linecap = "round" stroke-linejoin = "round" />
< circle cx = "163" cy = "81" r = "16" fill = "#2563eb" />
< path d = "M158 81 L162 85 L170 76" stroke = "#ffffff" stroke-width = "3" stroke-linecap = "round" stroke-linejoin = "round" />
</ svg >
</ div >
< div class = "flex flex-col justify-center px-8 py-10 font-sans sm:px-10" >
< h2 class = "font-sans text-2xl font-semibold tracking-tight text-gray-900 sm:text-3xl" > Join Our Community! </ h2 >
< p class = "mt-3 font-sans text-sm leading-6 text-gray-600 sm:text-base" > Get the latest news, updates, and special offers straight to your inbox. </ p >
< form method = "post" class = "mt-6 flex flex-col gap-3 font-sans" on:submit |preventDefault={onSubmit}>
< label for = "email" class = "sr-only" > Email </ label >
< input type = "email" id = "email" name = "email" required autocomplete = "email" placeholder = "Enter your email address" class = "block w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 font-sans text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
< button type = "submit" class = "inline-flex w-full items-center justify-center rounded-lg bg-[#2563eb] px-4 py-2.5 font-sans text-sm font-semibold text-white transition hover:bg-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]" > Subscribe </ button >
</ form >
< p class = "mt-4 text-center font-sans text-xs text-gray-500" > No spam. Unsubscribe anytime. </ p >
</ div >
</ div >
</ div > <script>
function onSubmit(event) {
const data = new FormData(event.currentTarget);
// Handle form data (fetch, auth API, etc.)
console.log(Object.fromEntries(data.entries()));
}
</script>
<div class="relative isolate w-full max-w-3xl overflow-hidden rounded-2xl bg-white font-sans text-gray-900 shadow-lg ring-1 ring-gray-200">
<button type="button" class="absolute right-3 top-3 z-10 flex size-8 items-center justify-center rounded-full bg-gray-100 font-sans text-gray-700 transition hover:bg-gray-200 focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]" aria-label="Close">
<svg viewBox="0 0 20 20" fill="currentColor" class="size-4" aria-hidden="true"><path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"/></svg>
</button>
<div class="grid md:grid-cols-2">
<div class="relative flex min-h-56 items-center justify-center bg-[#eef5ff] px-8 py-10 md:min-h-full" aria-hidden="true">
<svg viewBox="0 0 240 200" class="relative z-10 h-40 w-auto sm:h-48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="120" cy="100" r="78" fill="#dbeafe" />
<rect x="62" y="74" width="116" height="76" rx="10" fill="#ffffff" stroke="#1f2937" stroke-width="4" />
<path d="M62 88 L120 126 L178 88" stroke="#1f2937" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
<circle cx="163" cy="81" r="16" fill="#2563eb" />
<path d="M158 81 L162 85 L170 76" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="flex flex-col justify-center px-8 py-10 font-sans sm:px-10">
<h2 class="font-sans text-2xl font-semibold tracking-tight text-gray-900 sm:text-3xl">Join Our Community!</h2>
<p class="mt-3 font-sans text-sm leading-6 text-gray-600 sm:text-base">Get the latest news, updates, and special offers straight to your inbox.</p>
<form method="post" class="mt-6 flex flex-col gap-3 font-sans" on:submit|preventDefault={onSubmit}>
<label for="email" class="sr-only">Email</label>
<input type="email" id="email" name="email" required autocomplete="email" placeholder="Enter your email address" class="block w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 font-sans text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
<button type="submit" class="inline-flex w-full items-center justify-center rounded-lg bg-[#2563eb] px-4 py-2.5 font-sans text-sm font-semibold text-white transition hover:bg-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]">Subscribe</button>
</form>
<p class="mt-4 text-center font-sans text-xs text-gray-500">No spam. Unsubscribe anytime.</p>
</div>
</div>
</div>