Contact Sections

<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-6xl px-6 py-24'><h2 class='text-4xl font-semibold tracking-tight text-black'>Where we are</h2><div class='mt-12 grid gap-10 border-t border-neutral-200 pt-10 md:grid-cols-3'><div><h3 class='text-lg font-semibold text-black'>Head office</h3><p class='mt-3 text-sm text-neutral-600'>12 Sample Street<br>Example City</p><a href='#' class='mt-3 inline-block text-sm font-medium text-black underline underline-offset-4'>office@example.com</a></div><div><h3 class='text-lg font-semibold text-black'>Remote team</h3><p class='mt-3 text-sm text-neutral-600'>Everywhere else<br>Replies within a day</p><a href='#' class='mt-3 inline-block text-sm font-medium text-black underline underline-offset-4'>hello@example.com</a></div><div><h3 class='text-lg font-semibold text-black'>Press</h3><p class='mt-3 text-sm text-neutral-600'>Logos and screenshots<br>for articles</p><a href='#' class='mt-3 inline-block text-sm font-medium text-black underline underline-offset-4'>press@example.com</a></div></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-neutral-50'><div class='mx-auto grid max-w-5xl gap-8 px-6 py-24 md:grid-cols-[1fr_280px]'><form class='space-y-4 rounded-2xl border border-neutral-200 bg-white p-8'><h2 class='text-2xl font-semibold text-black'>Send us a message</h2><input type='text' placeholder='Name' class='w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'><input type='email' placeholder='Email' class='w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'><textarea rows='5' placeholder='Message' class='w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'></textarea><button type='button' class='rounded-lg bg-black px-6 py-2.5 text-sm font-semibold text-white'>Send</button></form><aside class='rounded-2xl bg-black p-6 text-white'><h3 class='font-semibold'>Quick links</h3><ul class='mt-4 space-y-3 text-sm text-neutral-300'><li><a href='#' class='hover:text-white'>Getting started</a></li><li><a href='#' class='hover:text-white'>Common questions</a></li><li><a href='#' class='hover:text-white'>Status page</a></li><li><a href='#' class='hover:text-white'>Report a bug</a></li></ul></aside></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-3xl px-6 py-24'><h2 class='text-4xl font-semibold tracking-tight text-black'>How can we help?</h2><div class='mt-10 divide-y divide-neutral-200 border-y border-neutral-200'><a href='#' class='flex items-center justify-between py-6 hover:bg-neutral-50'><div><h3 class='font-semibold text-black'>Read the docs</h3><p class='mt-1 text-sm text-neutral-600'>Guides for the editor, the code panel and the config.</p></div><span class='text-xl text-neutral-400'>→</span></a><a href='#' class='flex items-center justify-between py-6 hover:bg-neutral-50'><div><h3 class='font-semibold text-black'>Ask the community</h3><p class='mt-1 text-sm text-neutral-600'>See what others have asked, or post your own question.</p></div><span class='text-xl text-neutral-400'>→</span></a><a href='#' class='flex items-center justify-between py-6 hover:bg-neutral-50'><div><h3 class='font-semibold text-black'>Email support</h3><p class='mt-1 text-sm text-neutral-600'>For anything else. Replies within one working day.</p></div><span class='text-xl text-neutral-400'>→</span></a></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-white'><div class='mx-auto flex max-w-4xl flex-col items-center px-6 py-32 text-center'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='h-10 w-auto'><p class='mt-10 text-sm font-medium uppercase tracking-widest text-neutral-500'>Say hello</p><a href='#' class='mt-3 text-4xl font-semibold tracking-tight text-black underline decoration-2 underline-offset-8 md:text-6xl'>hello@example.com</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-white'><div class='mx-auto grid max-w-6xl gap-10 px-6 py-24 md:grid-cols-2'><div class='relative min-h-[320px] overflow-hidden rounded-3xl border border-neutral-200 bg-neutral-100' role='img' aria-label='Map showing our location'><svg viewBox='0 0 400 320' preserveAspectRatio='xMidYMid slice' class='absolute inset-0 h-full w-full'><rect width='400' height='320' fill='#f5f5f5'/><g fill='#e5e5e5'><rect x='20' y='20' width='110' height='70' rx='6'/><rect x='150' y='20' width='90' height='70' rx='6'/><rect x='260' y='20' width='120' height='70' rx='6'/><rect x='20' y='115' width='110' height='80' rx='6'/><rect x='260' y='115' width='120' height='80' rx='6'/><rect x='20' y='220' width='70' height='80' rx='6'/><rect x='110' y='220' width='130' height='80' rx='6'/><rect x='260' y='220' width='120' height='80' rx='6'/></g><rect x='150' y='115' width='90' height='80' rx='6' fill='#d4d4d4'/><g stroke='#ffffff' stroke-width='10' stroke-linecap='round' fill='none'><path d='M0 105H400'/><path d='M0 208H400'/><path d='M140 0V320'/><path d='M250 0V320'/></g><path d='M0 300L400 20' stroke='#ffffff' stroke-width='6' stroke-linecap='round' fill='none'/><g transform='translate(195 156)'><ellipse cx='0' cy='30' rx='13' ry='4' fill='#000' opacity='.18'/><path d='M0 28C-14 12-20 4-20-6a20 20 0 0 1 40 0c0 10-6 18-20 34Z' fill='#000'/><circle cx='0' cy='-6' r='7' fill='#fff'/></g></svg></div><div class='flex flex-col justify-center'><h2 class='text-4xl font-semibold tracking-tight text-black'>Visit us</h2><dl class='mt-8 space-y-5 text-sm'><div><dt class='font-semibold text-black'>Address</dt><dd class='mt-1 text-neutral-600'>12 Sample Street, Example City</dd></div><div><dt class='font-semibold text-black'>Hours</dt><dd class='mt-1 text-neutral-600'>Monday to Friday, 9:00 to 17:00</dd></div></dl><a href='#' class='mt-8 inline-block w-fit rounded-lg bg-black px-5 py-2.5 text-sm font-semibold text-white'>Get directions</a></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-white'><div class='mx-auto max-w-xl px-6 py-24'><h2 class='text-3xl font-semibold tracking-tight text-black'>Contact us</h2><form class='mt-8 space-y-5'><label class='block text-sm font-medium text-black'>Topic<select class='mt-1.5 w-full rounded-lg border border-neutral-300 bg-white px-3 py-2.5 text-sm outline-none focus:border-black'><option>General question</option><option>Bug report</option><option>Feature request</option><option>Press</option></select></label><label class='block text-sm font-medium text-black'>Email<input type='email' class='mt-1.5 w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'></label><label class='block text-sm font-medium text-black'>Message<textarea rows='5' class='mt-1.5 w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'></textarea></label><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 that you may reply to this email.</label><button type='button' class='rounded-lg bg-black px-6 py-2.5 text-sm font-semibold text-white'>Send message</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-neutral-50'><div class='mx-auto max-w-6xl px-6 py-24'><h2 class='text-center text-4xl font-semibold tracking-tight text-black'>Choose how to reach us</h2><div class='mt-14 grid gap-6 md:grid-cols-3'><a href='#' class='rounded-2xl border border-neutral-200 bg-white p-8 transition hover:border-black'><span class='grid h-11 w-11 place-items-center rounded-xl bg-black text-white'>@</span><h3 class='mt-5 font-semibold text-black'>Email</h3><p class='mt-1 text-sm text-neutral-600'>hello@example.com</p></a><a href='#' class='rounded-2xl border border-neutral-200 bg-white p-8 transition hover:border-black'><span class='grid h-11 w-11 place-items-center rounded-xl bg-black text-white'>#</span><h3 class='mt-5 font-semibold text-black'>Community</h3><p class='mt-1 text-sm text-neutral-600'>Ask in the chat</p></a><a href='#' class='rounded-2xl border border-neutral-200 bg-white p-8 transition hover:border-black'><span class='grid h-11 w-11 place-items-center rounded-xl bg-black text-white'>◷</span><h3 class='mt-5 font-semibold text-black'>Office hours</h3><p class='mt-1 text-sm text-neutral-600'>Fridays, 10:00 to 12:00</p></a></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-12 px-6 py-24 md:grid-cols-2'><div><h2 class='text-4xl font-semibold tracking-tight text-white'>Talk to the team</h2><p class='mt-4 text-lg text-neutral-400'>Share your project and we will reply with next steps.</p></div><form class='space-y-4 rounded-2xl bg-white p-8'><input type='text' placeholder='Name' class='w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'><input type='email' placeholder='Work email' class='w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'><textarea rows='3' placeholder='About your project' class='w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'></textarea><button type='button' class='w-full rounded-lg bg-black py-2.5 text-sm font-semibold text-white'>Send</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 gap-12 px-6 py-24 md:grid-cols-2'><div><h2 class='text-4xl font-semibold tracking-tight text-black'>Let us talk</h2><p class='mt-4 text-lg text-neutral-600'>Tell us what you are building.</p><dl class='mt-10 space-y-6 text-sm'><div><dt class='font-semibold text-black'>Email</dt><dd class='mt-1 text-neutral-600'>hello@example.com</dd></div><div><dt class='font-semibold text-black'>Support</dt><dd class='mt-1 text-neutral-600'>Replies within one working day</dd></div><div><dt class='font-semibold text-black'>Elsewhere</dt><dd class='mt-1 text-neutral-600'>GitHub · X</dd></div></dl></div><form class='space-y-4 rounded-2xl border border-neutral-200 p-8'><input type='text' placeholder='Your name' class='w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'><input type='email' placeholder='Email' class='w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'><textarea rows='4' placeholder='How can we help?' class='w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'></textarea><button type='button' class='w-full rounded-lg bg-black py-2.5 text-sm font-semibold text-white'>Send</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-center text-4xl font-semibold tracking-tight text-black'>Get in touch</h2><p class='mt-3 text-center text-neutral-600'>Questions or feedback? We read every message.</p><form class='mt-10 space-y-4'><div class='grid gap-4 sm:grid-cols-2'><input type='text' placeholder='Name' class='rounded-lg border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'><input type='email' placeholder='Email' class='rounded-lg border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'></div><textarea rows='5' placeholder='Message' class='w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'></textarea><button type='button' class='w-full rounded-lg bg-black py-3 text-sm font-semibold text-white hover:bg-neutral-800'>Send message</button></form></div></section>