Files
ComfyUI_frontend/apps/website/src/pages/download.astro
Christian Byrne e2b07f3e9a feat(website): add Wave 4 secondary pages (#10145)
## Summary

<!-- One sentence describing what changed and why. -->

## Changes

- **What**: <!-- Core functionality added/modified -->
- **Breaking**: <!-- Any breaking changes (if none, remove this line)
-->
- **Dependencies**: <!-- New dependencies (if none, remove this line)
-->

## Review Focus

<!-- Critical design decisions or edge cases that need attention -->

<!-- If this PR fixes an issue, uncomment and update the line below -->
<!-- Fixes #ISSUE_NUMBER -->

## Screenshots (if applicable)

<!-- Add screenshots or video recording to help explain your changes -->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-10145-feat-website-add-Wave-4-secondary-pages-3266d73d3650818c9101c7d2086c21ba)
by [Unito](https://www.unito.io)
2026-04-06 14:42:24 -07:00

81 lines
2.4 KiB
Plaintext

---
import BaseLayout from '../layouts/BaseLayout.astro'
import SiteNav from '../components/SiteNav.vue'
import SiteFooter from '../components/SiteFooter.vue'
const cards = [
{
icon: '🪟',
title: 'Windows',
description: 'Requires NVIDIA or AMD graphics card',
cta: 'Download for Windows',
href: 'https://download.comfy.org/windows/nsis/x64',
outlined: false,
},
{
icon: '🍎',
title: 'Mac',
description: 'Requires Apple Silicon (M-series)',
cta: 'Download for Mac',
href: 'https://download.comfy.org/mac/dmg/arm64',
outlined: false,
},
{
icon: '🐙',
title: 'GitHub',
description: 'Build from source on any platform',
cta: 'Install from GitHub',
href: 'https://github.com/comfyanonymous/ComfyUI',
outlined: true,
},
]
---
<BaseLayout title="Download — Comfy">
<SiteNav client:load />
<main class="mx-auto max-w-5xl px-6 py-32 text-center">
<h1 class="text-4xl font-bold text-white md:text-5xl">
Download ComfyUI
</h1>
<p class="mt-4 text-lg text-smoke-700">
Experience AI creation locally
</p>
<div class="mt-16 grid grid-cols-1 gap-6 md:grid-cols-3">
{cards.map((card) => (
<a
href={card.href}
class="flex flex-col items-center rounded-xl border border-white/10 bg-charcoal-600 p-8 text-center transition-colors hover:border-brand-yellow"
>
<span class="text-4xl" aria-hidden="true">{card.icon}</span>
<h2 class="mt-4 text-xl font-semibold text-white">{card.title}</h2>
<p class="mt-2 text-sm text-smoke-700">{card.description}</p>
<span
class:list={[
'mt-6 inline-block rounded-full px-6 py-2 text-sm font-semibold transition-opacity hover:opacity-90',
card.outlined
? 'border border-brand-yellow text-brand-yellow'
: 'bg-brand-yellow text-black',
]}
>
{card.cta}
</span>
</a>
))}
</div>
<div class="mt-20 rounded-xl border border-white/10 bg-charcoal-800 p-8">
<p class="text-lg text-smoke-700">
No GPU?{' '}
<a
href="https://app.comfy.org"
class="font-semibold text-brand-yellow hover:underline"
>
Try Comfy Cloud →
</a>
</p>
</div>
</main>
<SiteFooter />
</BaseLayout>