Mega Menu

<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>
        <header class='relative min-h-[460px] border-b border-neutral-200 bg-white'><div class='mx-auto flex h-16 max-w-6xl items-center justify-between px-6'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='h-6 w-auto'><nav class='hidden items-center gap-8 text-sm md:flex'><a href='#' class='font-medium text-black'>Templates ⌄</a><a href='#' class='text-neutral-600'>Pricing</a></nav><a href='#' class='rounded-lg bg-black px-4 py-2 text-sm font-medium text-white'>Open editor</a></div><div class='absolute inset-x-0 top-16 border-y border-neutral-200 bg-white shadow-lg'><div class='mx-auto grid max-w-6xl gap-6 px-6 py-8 md:grid-cols-3'><a href='#' class='group block'><div class='aspect-[16/9] rounded-xl bg-neutral-100 transition group-hover:bg-neutral-200 overflow-hidden'><img src='https://images.unsplash.com/photo-1637502875124-eb4a9843a2fa?auto=format&fit=crop&w=500&q=75' alt='A laptop showing a website design on a desk' loading='lazy' class='h-full w-full object-cover grayscale'></div><p class='mt-3 text-sm font-semibold text-black'>Landing pages</p><p class='text-xs text-neutral-500'>Heroes, features, pricing.</p></a><a href='#' class='group block'><div class='aspect-[16/9] rounded-xl bg-neutral-200 transition group-hover:bg-neutral-300 overflow-hidden'><img src='https://images.unsplash.com/photo-1487338875411-8880f74114a2?auto=format&fit=crop&w=500&q=75' alt='Two monitors showing design work on a desk' loading='lazy' class='h-full w-full object-cover grayscale'></div><p class='mt-3 text-sm font-semibold text-black'>App screens</p><p class='text-xs text-neutral-500'>Tables, charts, forms.</p></a><a href='#' class='group block'><div class='aspect-[16/9] rounded-xl bg-neutral-100 transition group-hover:bg-neutral-200 overflow-hidden'><img src='https://images.unsplash.com/photo-1497032628192-86f99bcd76bc?auto=format&fit=crop&w=500&q=75' alt='A desk seen from above with a laptop, notebook and coffee' loading='lazy' class='h-full w-full object-cover grayscale'></div><p class='mt-3 text-sm font-semibold text-black'>Blog</p><p class='text-xs text-neutral-500'>Posts and archives.</p></a></div></div></header>

<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>
        <header class='relative min-h-[440px] border-b border-neutral-200 bg-white'><div class='mx-auto flex h-16 max-w-6xl items-center justify-between px-6'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='h-6 w-auto'><nav class='hidden items-center gap-8 text-sm md:flex'><a href='#' class='font-medium text-black'>Docs ⌄</a><a href='#' class='text-neutral-600'>Product</a></nav><a href='#' class='rounded-lg bg-black px-4 py-2 text-sm font-medium text-white'>Open editor</a></div><div class='absolute left-1/2 top-[68px] w-full max-w-2xl -translate-x-1/2 rounded-2xl border border-neutral-200 bg-white p-5 shadow-xl'><input type='search' placeholder='Search the docs' class='w-full rounded-xl bg-neutral-100 px-4 py-3 text-sm outline-none'><p class='mt-5 text-xs font-semibold uppercase tracking-widest text-neutral-400'>Popular</p><ul class='mt-3 grid gap-1 text-sm sm:grid-cols-2'><li><a href='#' class='block rounded-lg px-3 py-2 text-neutral-700 hover:bg-neutral-50'>Getting started</a></li><li><a href='#' class='block rounded-lg px-3 py-2 text-neutral-700 hover:bg-neutral-50'>The code panel</a></li><li><a href='#' class='block rounded-lg px-3 py-2 text-neutral-700 hover:bg-neutral-50'>Tailwind config</a></li><li><a href='#' class='block rounded-lg px-3 py-2 text-neutral-700 hover:bg-neutral-50'>Interactions</a></li></ul></div></header>

<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>
        <header class='mx-auto max-w-sm border border-neutral-200 bg-white'><div class='flex h-16 items-center justify-between px-5'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='h-6 w-auto'><button type='button' class='grid h-10 w-10 place-items-center rounded-lg border border-neutral-200 text-black' aria-label='Close menu'>×</button></div><nav class='border-t border-neutral-200 px-5 py-2'><details class='group border-b border-neutral-100 py-3' open><summary class='flex cursor-pointer list-none items-center justify-between text-lg font-medium text-black'>Product<span class='text-xl text-neutral-400 transition group-open:rotate-45'>+</span></summary><ul class='mt-3 space-y-3 pl-2 text-neutral-600'><li><a href='#'>Canvas</a></li><li><a href='#'>Code panel</a></li><li><a href='#'>Animations</a></li><li><a href='#'>Figma plugin</a></li></ul></details><details class='group border-b border-neutral-100 py-3'><summary class='flex cursor-pointer list-none items-center justify-between text-lg font-medium text-black'>Docs<span class='text-xl text-neutral-400 transition group-open:rotate-45'>+</span></summary><ul class='mt-3 space-y-3 pl-2 text-neutral-600'><li><a href='#'>Guides</a></li></ul></details><details class='group py-3'><summary class='flex cursor-pointer list-none items-center justify-between text-lg font-medium text-black'>Pricing<span class='text-xl text-neutral-400 transition group-open:rotate-45'>+</span></summary><ul class='mt-3 space-y-3 pl-2 text-neutral-600'><li><a href='#'>Plans</a></li></ul></details><a href='#' class='mb-3 mt-4 block rounded-lg bg-black px-4 py-3 text-center text-sm font-semibold text-white'>Open editor</a></nav></header>

<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>
        <header class='relative min-h-[420px] border-b border-neutral-200 bg-white'><div class='mx-auto flex h-16 max-w-6xl items-center justify-between px-6'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='h-6 w-auto'><nav class='hidden items-center gap-8 text-sm md:flex'><a href='#' class='font-medium text-black'>Solutions ⌄</a><a href='#' class='text-neutral-600'>Docs</a></nav><a href='#' class='rounded-lg bg-black px-4 py-2 text-sm font-medium text-white'>Open editor</a></div><div class='absolute left-1/2 top-[68px] w-full max-w-4xl -translate-x-1/2 rounded-2xl border border-neutral-200 bg-white p-8 shadow-xl'><div class='grid grid-cols-2 gap-8 sm:grid-cols-4'><div><h3 class='text-xs font-semibold uppercase tracking-widest text-neutral-400'>Teams</h3><ul class='mt-3 space-y-2 text-sm text-neutral-700'><li>Designers</li><li>Developers</li><li>Agencies</li></ul></div><div><h3 class='text-xs font-semibold uppercase tracking-widest text-neutral-400'>Use cases</h3><ul class='mt-3 space-y-2 text-sm text-neutral-700'><li>Landing pages</li><li>Dashboards</li><li>Blogs</li></ul></div><div><h3 class='text-xs font-semibold uppercase tracking-widest text-neutral-400'>Learn</h3><ul class='mt-3 space-y-2 text-sm text-neutral-700'><li>Docs</li><li>Guides</li><li>FAQ</li></ul></div><div><h3 class='text-xs font-semibold uppercase tracking-widest text-neutral-400'>Company</h3><ul class='mt-3 space-y-2 text-sm text-neutral-700'><li>About</li><li>Contact</li><li>Careers</li></ul></div></div></div></header>

<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>
        <header class='relative min-h-[440px] border-b border-neutral-200 bg-white'><div class='mx-auto flex h-16 max-w-6xl items-center justify-between px-6'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='h-6 w-auto'><nav class='hidden items-center gap-8 text-sm md:flex'><a href='#' class='font-medium text-black'>Product ⌄</a><a href='#' class='text-neutral-600'>Pricing</a></nav><a href='#' class='rounded-lg bg-black px-4 py-2 text-sm font-medium text-white'>Open editor</a></div><div class='absolute inset-x-0 top-16 overflow-hidden border-y border-neutral-200 bg-white shadow-lg'><div class='mx-auto grid max-w-6xl gap-10 px-6 py-8 sm:grid-cols-3'><ul class='space-y-3 text-sm text-neutral-700'><li class='font-semibold text-black'>Editor</li><li><a href='#'>Canvas</a></li><li><a href='#'>Panel</a></li></ul><ul class='space-y-3 text-sm text-neutral-700'><li class='font-semibold text-black'>Library</li><li><a href='#'>Designs</a></li><li><a href='#'>Projects</a></li></ul><ul class='space-y-3 text-sm text-neutral-700'><li class='font-semibold text-black'>Tools</li><li><a href='#'>Figma</a></li><li><a href='#'>MCP</a></li></ul></div><div class='bg-neutral-50'><div class='mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-3 px-6 py-4 text-sm'><p class='text-neutral-600'>New to Windcraft? Take the five-minute tour.</p><a href='#' class='font-medium text-black underline underline-offset-4'>Start the tour →</a></div></div></div></header>

<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>
        <header class='relative min-h-[440px] border-b border-neutral-200 bg-white'><div class='mx-auto flex h-16 max-w-6xl items-center justify-between px-6'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='h-6 w-auto'><nav class='hidden items-center gap-8 text-sm md:flex'><a href='#' class='font-medium text-black'>Library ⌄</a><a href='#' class='text-neutral-600'>Docs</a></nav><a href='#' class='rounded-lg bg-black px-4 py-2 text-sm font-medium text-white'>Open editor</a></div><div class='absolute left-1/2 top-[68px] grid w-full max-w-3xl -translate-x-1/2 overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-xl md:grid-cols-[220px_1fr]'><ul class='space-y-1 bg-neutral-50 p-3 text-sm'><li class='rounded-lg bg-black px-3 py-2 font-medium text-white'>Marketing</li><li class='rounded-lg px-3 py-2 text-neutral-700'>Application</li><li class='rounded-lg px-3 py-2 text-neutral-700'>Forms</li><li class='rounded-lg px-3 py-2 text-neutral-700'>Navigation</li></ul><ul class='grid gap-1 p-4 text-sm sm:grid-cols-2'><li><a href='#' class='block rounded-lg px-3 py-2 text-neutral-700 hover:bg-neutral-50'>Hero sections</a></li><li><a href='#' class='block rounded-lg px-3 py-2 text-neutral-700 hover:bg-neutral-50'>Pricing</a></li><li><a href='#' class='block rounded-lg px-3 py-2 text-neutral-700 hover:bg-neutral-50'>Features</a></li><li><a href='#' class='block rounded-lg px-3 py-2 text-neutral-700 hover:bg-neutral-50'>Testimonials</a></li></ul></div></header>

<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>
        <header class='relative min-h-[460px] border-b border-neutral-200 bg-white'><div class='mx-auto flex h-16 max-w-6xl items-center justify-between px-6'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='h-6 w-auto'><nav class='hidden items-center gap-8 text-sm md:flex'><a href='#' class='font-medium text-black'>Features ⌄</a><a href='#' class='text-neutral-600'>Docs</a></nav><a href='#' class='rounded-lg bg-black px-4 py-2 text-sm font-medium text-white'>Open editor</a></div><div class='absolute left-1/2 top-[68px] w-full max-w-4xl -translate-x-1/2 rounded-2xl border border-neutral-200 bg-white p-4 shadow-xl'><div class='grid gap-2 sm:grid-cols-2 lg:grid-cols-3'><a href='#' class='flex gap-3 rounded-xl p-3 hover:bg-neutral-50'><span class='grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-black text-sm text-white'>▢</span><span><span class='block text-sm font-semibold text-black'>Canvas</span><span class='text-xs text-neutral-500'>Draw and arrange.</span></span></a><a href='#' class='flex gap-3 rounded-xl p-3 hover:bg-neutral-50'><span class='grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-black font-mono text-xs text-white'>{ }</span><span><span class='block text-sm font-semibold text-black'>Code panel</span><span class='text-xs text-neutral-500'>HTML, CSS, JS.</span></span></a><a href='#' class='flex gap-3 rounded-xl p-3 hover:bg-neutral-50'><span class='grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-black text-sm text-white'>↻</span><span><span class='block text-sm font-semibold text-black'>Animations</span><span class='text-xs text-neutral-500'>A full library.</span></span></a><a href='#' class='flex gap-3 rounded-xl p-3 hover:bg-neutral-50'><span class='grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-black text-sm text-white'>↗</span><span><span class='block text-sm font-semibold text-black'>Interactions</span><span class='text-xs text-neutral-500'>No scripts.</span></span></a><a href='#' class='flex gap-3 rounded-xl p-3 hover:bg-neutral-50'><span class='grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-black text-sm text-white'>☰</span><span><span class='block text-sm font-semibold text-black'>Config</span><span class='text-xs text-neutral-500'>Your Tailwind.</span></span></a><a href='#' class='flex gap-3 rounded-xl p-3 hover:bg-neutral-50'><span class='grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-black text-sm text-white'>✦</span><span><span class='block text-sm font-semibold text-black'>Plugins</span><span class='text-xs text-neutral-500'>Figma and MCP.</span></span></a></div></div></header>

<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>
        <header class='relative min-h-[420px] bg-black'><div class='mx-auto flex h-16 max-w-6xl items-center justify-between px-6'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo-light.png' alt='Windcraft' class='h-6 w-auto'><nav class='hidden items-center gap-8 text-sm md:flex'><a href='#' class='font-medium text-white'>Product ⌄</a><a href='#' class='text-neutral-400'>Docs</a><a href='#' class='text-neutral-400'>Pricing</a></nav><a href='#' class='rounded-lg bg-white px-4 py-2 text-sm font-semibold text-black'>Open editor</a></div><div class='absolute inset-x-0 top-16 border-y border-neutral-800 bg-neutral-950 shadow-2xl'><div class='mx-auto grid max-w-6xl gap-10 px-6 py-8 md:grid-cols-3'><div><h3 class='text-xs font-semibold uppercase tracking-widest text-neutral-500'>Design</h3><ul class='mt-4 space-y-3 text-sm text-neutral-300'><li><a href='#'>Canvas</a></li><li><a href='#'>Animations</a></li></ul></div><div><h3 class='text-xs font-semibold uppercase tracking-widest text-neutral-500'>Code</h3><ul class='mt-4 space-y-3 text-sm text-neutral-300'><li><a href='#'>Code panel</a></li><li><a href='#'>Config</a></li></ul></div><div><h3 class='text-xs font-semibold uppercase tracking-widest text-neutral-500'>Connect</h3><ul class='mt-4 space-y-3 text-sm text-neutral-300'><li><a href='#'>Figma plugin</a></li><li><a href='#'>MCP server</a></li></ul></div></div></div></header>

<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>
        <header class='relative min-h-[420px] border-b border-neutral-200 bg-white'><div class='mx-auto flex h-16 max-w-6xl items-center justify-between px-6'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='h-6 w-auto'><nav class='hidden items-center gap-8 text-sm md:flex'><a href='#' class='font-medium text-black'>Resources ⌄</a><a href='#' class='text-neutral-600'>Product</a><a href='#' class='text-neutral-600'>Pricing</a></nav><a href='#' class='rounded-lg bg-black px-4 py-2 text-sm font-medium text-white'>Open editor</a></div><div class='absolute inset-x-0 top-16 border-y border-neutral-200 bg-white shadow-lg'><div class='mx-auto grid max-w-6xl gap-10 px-6 py-8 md:grid-cols-[1fr_1fr_320px]'><ul class='space-y-3 text-sm text-neutral-700'><li class='font-semibold text-black'>Learn</li><li><a href='#'>Documentation</a></li><li><a href='#'>Guides</a></li><li><a href='#'>Videos</a></li></ul><ul class='space-y-3 text-sm text-neutral-700'><li class='font-semibold text-black'>Community</li><li><a href='#'>GitHub</a></li><li><a href='#'>Discussions</a></li><li><a href='#'>Changelog</a></li></ul><a href='#' class='block rounded-2xl bg-black p-6'><p class='text-xs uppercase tracking-widest text-neutral-400'>New</p><p class='mt-2 font-semibold text-white'>The animation library</p><p class='mt-1 text-sm text-neutral-400'>Pick an effect and see it live.</p></a></div></div></header>

<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>
        <header class='relative min-h-[420px] border-b border-neutral-200 bg-white'><div class='mx-auto flex h-16 max-w-6xl items-center justify-between px-6'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='h-6 w-auto'><nav class='hidden items-center gap-8 text-sm md:flex'><a href='#' class='font-medium text-black'>Product ⌄</a><a href='#' class='text-neutral-600'>Docs</a><a href='#' class='text-neutral-600'>Pricing</a></nav><a href='#' class='rounded-lg bg-black px-4 py-2 text-sm font-medium text-white'>Open editor</a></div><div class='absolute inset-x-0 top-16 border-y border-neutral-200 bg-white shadow-lg'><div class='mx-auto grid max-w-6xl gap-10 px-6 py-8 md:grid-cols-3'><div><h3 class='text-xs font-semibold uppercase tracking-widest text-neutral-400'>Design</h3><ul class='mt-4 space-y-3 text-sm text-neutral-700'><li><a href='#'>Canvas</a></li><li><a href='#'>Properties panel</a></li><li><a href='#'>Animations</a></li></ul></div><div><h3 class='text-xs font-semibold uppercase tracking-widest text-neutral-400'>Code</h3><ul class='mt-4 space-y-3 text-sm text-neutral-700'><li><a href='#'>Code panel</a></li><li><a href='#'>Tailwind config</a></li><li><a href='#'>Export</a></li></ul></div><div><h3 class='text-xs font-semibold uppercase tracking-widest text-neutral-400'>Connect</h3><ul class='mt-4 space-y-3 text-sm text-neutral-700'><li><a href='#'>Figma plugin</a></li><li><a href='#'>MCP server</a></li><li><a href='#'>API</a></li></ul></div></div></div></header>