Subscribe

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='relative grid min-h-[460px] place-items-center overflow-hidden bg-neutral-100 p-6'><div class='absolute inset-0 bg-black/40'></div><div class='relative w-full max-w-sm rounded-3xl bg-white p-8 shadow-2xl'><button type='button' class='absolute right-4 top-4 grid h-8 w-8 place-items-center rounded-full text-neutral-500 hover:bg-neutral-100' aria-label='Close'>×</button><h3 class='pr-6 text-2xl font-semibold tracking-tight text-black'>Before you go</h3><p class='mt-2 text-sm text-neutral-600'>Get one short email when we ship something new.</p><form class='mt-6 space-y-3'><input type='email' placeholder='you@company.com' class='w-full rounded-lg border border-neutral-300 px-4 py-3 text-sm outline-none focus:border-black'><button type='button' class='w-full rounded-lg bg-black py-3 text-sm font-semibold text-white'>Notify me</button></form><button type='button' class='mt-3 w-full text-sm text-neutral-500'>No thanks</button></div></div>

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white'><div class='mx-auto max-w-md px-6 py-24 text-center'><span class='mx-auto grid h-14 w-14 place-items-center rounded-full bg-black text-2xl text-white'>✓</span><h2 class='mt-6 text-3xl font-semibold tracking-tight text-black'>You are in</h2><p class='mt-3 text-neutral-600'>Check your inbox to confirm your email. It may take a minute.</p><a href='#' class='mt-8 inline-block text-sm font-medium text-black underline underline-offset-4'>← Back to the site</a></div></section>

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-neutral-50'><div class='mx-auto max-w-md px-6 py-24'><div class='rounded-3xl border border-neutral-200 bg-white p-8 text-center'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='mx-auto h-7 w-auto'><h2 class='mt-6 text-2xl font-semibold tracking-tight text-black'>Pick how often</h2><div class='mt-5 inline-flex rounded-full border border-neutral-200 p-1 text-sm'><span class='rounded-full bg-black px-5 py-1.5 font-medium text-white'>Monthly</span><span class='rounded-full px-5 py-1.5 text-neutral-600'>Weekly</span></div><form class='mt-6 space-y-3'><input type='email' placeholder='you@company.com' class='w-full rounded-lg border border-neutral-300 px-4 py-3 text-sm outline-none focus:border-black'><button type='button' class='w-full rounded-lg bg-black py-3 text-sm font-semibold text-white'>Subscribe</button></form></div></div></section>

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='border-y border-neutral-200 bg-neutral-50'><div class='mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-4 px-6 py-6'><p class='text-sm font-medium text-black'>Get product updates by email.</p><form class='flex w-full max-w-sm gap-2'><input type='email' placeholder='Email' class='min-w-0 flex-1 rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm outline-none focus:border-black'><button type='button' class='rounded-lg bg-black px-4 py-2 text-sm font-medium text-white'>Join</button></form></div></section>

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white'><div class='mx-auto grid max-w-6xl items-center gap-12 px-6 py-24 md:grid-cols-2'><h2 class='text-5xl font-semibold leading-tight tracking-tight text-black'>Build better pages, every month.</h2><form class='space-y-4 rounded-2xl border border-neutral-200 p-8'><p class='text-neutral-600'>Get one practical tip and the latest changes.</p><input type='email' placeholder='you@company.com' class='w-full rounded-lg border border-neutral-300 px-4 py-3 text-sm outline-none focus:border-black'><button type='button' class='w-full rounded-lg bg-black py-3 text-sm font-semibold text-white'>Subscribe</button></form></div></section>

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white'><div class='mx-auto max-w-md px-6 py-24'><h2 class='text-3xl font-semibold tracking-tight text-black'>Sign up for updates</h2><form class='mt-8 space-y-4'><input type='text' placeholder='First name' class='w-full rounded-lg border border-neutral-300 px-4 py-3 text-sm outline-none focus:border-black'><input type='email' placeholder='Email' class='w-full rounded-lg border border-neutral-300 px-4 py-3 text-sm outline-none focus:border-black'><label class='flex items-start gap-3 text-sm text-neutral-600'><input type='checkbox' class='mt-0.5 h-4 w-4 rounded border-neutral-300 accent-black'>I agree to receive emails. I can unsubscribe at any time.</label><button type='button' class='w-full rounded-lg bg-black py-3 text-sm font-semibold text-white'>Sign up</button></form></div></section>

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white'><div class='mx-auto max-w-xl px-6 py-24'><h2 class='text-3xl font-semibold tracking-tight text-black'>Subscribe</h2><form class='mt-8 flex items-center border-b-2 border-black pb-2'><input type='email' placeholder='Your email' class='min-w-0 flex-1 bg-transparent py-2 text-lg outline-none placeholder-neutral-400'><button type='button' class='grid h-10 w-10 place-items-center rounded-full bg-black text-white' aria-label='Subscribe'>→</button></form><p class='mt-4 text-sm text-neutral-500'>A short email, once or twice a month.</p></div></section>

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-neutral-50'><div class='mx-auto max-w-lg px-6 py-24'><div class='rounded-3xl border border-neutral-200 bg-white p-8'><h2 class='text-2xl font-semibold tracking-tight text-black'>Join the newsletter</h2><ul class='mt-4 space-y-2 text-sm text-neutral-600'><li>✓ New features and fixes</li><li>✓ Tips for working faster</li><li>✓ No spam, ever</li></ul><form class='mt-6 space-y-3'><input type='email' placeholder='you@company.com' class='w-full rounded-lg border border-neutral-300 px-4 py-3 text-sm outline-none focus:border-black'><button type='button' class='w-full rounded-lg bg-black py-3 text-sm font-semibold text-white'>Subscribe</button></form></div></div></section>

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-black'><div class='mx-auto grid max-w-6xl items-center gap-8 px-6 py-20 md:grid-cols-2'><div><h2 class='text-3xl font-semibold tracking-tight text-white'>Stay in the loop</h2><p class='mt-3 text-neutral-400'>One short email when something new ships.</p></div><form class='flex gap-2'><input type='email' placeholder='Email address' class='min-w-0 flex-1 rounded-lg border border-neutral-700 bg-neutral-900 px-4 py-3 text-sm text-white placeholder-neutral-500 outline-none focus:border-white'><button type='button' class='rounded-lg bg-white px-5 py-3 text-sm font-semibold text-black'>Join</button></form></div></section>

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white'><div class='mx-auto max-w-2xl px-6 py-24 text-center'><h2 class='text-4xl font-semibold tracking-tight text-black'>Get the changelog</h2><p class='mt-3 text-lg text-neutral-600'>New features by email. No noise.</p><form class='mx-auto mt-8 flex max-w-md gap-2'><input type='email' placeholder='you@company.com' class='min-w-0 flex-1 rounded-lg border border-neutral-300 px-4 py-3 text-sm outline-none focus:border-black'><button type='button' class='rounded-lg bg-black px-5 py-3 text-sm font-semibold text-white'>Subscribe</button></form><p class='mt-3 text-xs text-neutral-400'>Unsubscribe any time.</p></div></section>