ComfyUI_frontend/apps/website/src/pages/about.astro

---
import BaseLayout from '../layouts/BaseLayout.astro'
import SiteNav from '../components/SiteNav.vue'
import SiteFooter from '../components/SiteFooter.vue'

const team = [
  { name: 'comfyanonymous', role: 'Creator of ComfyUI, cofounder' },
  { name: 'Dr.Lt.Data', role: 'Creator of ComfyUI-Manager and Impact/Inspire Pack' },
  { name: 'pythongosssss', role: 'Major contributor, creator of ComfyUI-Custom-Scripts' },
  { name: 'yoland68', role: 'Creator of ComfyCLI, cofounder, ex-Google' },
  { name: 'robinjhuang', role: 'Maintains Comfy Registry, cofounder, ex-Google Cloud' },
  { name: 'jojodecay', role: 'ComfyUI event series host, community & partnerships' },
  { name: 'christian-byrne', role: 'Fullstack developer' },
  { name: 'Kosinkadink', role: 'Creator of AnimateDiff-Evolved and Advanced-ControlNet' },
  { name: 'webfiltered', role: 'Overhauled Litegraph library' },
  { name: 'Pablo', role: 'Product Design, ex-AI startup founder' },
  { name: 'ComfyUI Wiki (Daxiong)', role: 'Official docs and templates' },
  { name: 'ctrlbenlu (Ben)', role: 'Software engineer, ex-robotics' },
  { name: 'Purz Beats', role: 'Motion graphics designer and ML Engineer' },
  { name: 'Ricyu (Rich)', role: 'Software engineer, ex-Meta' },
]

const collaborators = [
  { name: 'Yogo', role: 'Collaborator' },
  { name: 'Fill (Machine Delusions)', role: 'Collaborator' },
  { name: 'Julien (MJM)', role: 'Collaborator' },
]

const projects = [
  { name: 'ComfyUI', description: 'The core node-based interface for generative AI workflows.' },
  { name: 'ComfyUI Manager', description: 'Install, update, and manage custom nodes with one click.' },
  { name: 'Comfy Registry', description: 'The official registry for publishing and discovering custom nodes.' },
  { name: 'Frontends', description: 'The desktop and web frontends that power the ComfyUI experience.' },
  { name: 'Docs', description: 'Official documentation, guides, and tutorials.' },
]

const faqs = [
  {
    q: 'Is ComfyUI free?',
    a: 'Yes. ComfyUI is free and open-source under the GPL-3.0 license. You can use it for personal and commercial projects.',
  },
  {
    q: 'Who is behind ComfyUI?',
    a: 'ComfyUI was created by comfyanonymous and is maintained by a small, dedicated team of developers and community contributors.',
  },
  {
    q: 'How can I contribute?',
    a: 'Check out our GitHub repositories to report issues, submit pull requests, or build custom nodes. Join our Discord community to connect with other contributors.',
  },
  {
    q: 'What are the future plans?',
    a: 'We are focused on making ComfyUI the operating system for generative AI — improving performance, expanding model support, and building better tools for creators and developers.',
  },
]
---

<BaseLayout title="About — Comfy" description="Learn about the team and mission behind ComfyUI, the open-source generative AI platform.">
  <SiteNav client:load />
  <main>
    <!-- Hero -->
    <section class="px-6 pb-24 pt-40 text-center">
      <h1 class="mx-auto max-w-4xl text-4xl font-bold leading-tight md:text-6xl">
        Crafting the next frontier of visual and audio media
      </h1>
      <p class="mx-auto mt-6 max-w-2xl text-lg text-smoke-700">
        An open-source community and company building the most powerful tools for generative AI creators.
      </p>
    </section>

    <!-- Our Mission -->
    <section class="bg-charcoal-800 px-6 py-24">
      <div class="mx-auto max-w-3xl text-center">
        <h2 class="text-sm font-semibold uppercase tracking-widest text-brand-yellow">Our Mission</h2>
        <p class="mt-6 text-3xl font-bold md:text-4xl">
          We want to build the operating system for Gen AI.
        </p>
        <p class="mt-6 text-lg leading-relaxed text-smoke-700">
          We're building the foundational tools that give creators full control over generative AI.
          From image and video synthesis to audio generation, ComfyUI provides a modular,
          node-based environment where professionals and enthusiasts can craft, iterate,
          and deploy production-quality workflows — without black boxes.
        </p>
      </div>
    </section>

    <!-- What Do We Do? -->
    <section class="px-6 py-24">
      <div class="mx-auto max-w-5xl">
        <h2 class="text-center text-3xl font-bold md:text-4xl">What Do We Do?</h2>
        <div class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {projects.map((project) => (
            <div class="rounded-xl border border-white/10 bg-charcoal-600 p-6">
              <h3 class="text-lg font-semibold">{project.name}</h3>
              <p class="mt-2 text-sm text-smoke-700">{project.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    <!-- Who We Are -->
    <section class="bg-charcoal-800 px-6 py-24">
      <div class="mx-auto max-w-3xl text-center">
        <h2 class="text-3xl font-bold md:text-4xl">Who We Are</h2>
        <p class="mt-6 text-lg leading-relaxed text-smoke-700">
          ComfyUI started as a personal project by comfyanonymous and grew into a global community
          of creators, developers, and researchers. Today, Comfy Org is a small, flat team based in
          San Francisco, backed by investors who believe in open-source AI tooling. We work
          alongside an incredible community of contributors who build custom nodes, share workflows,
          and push the boundaries of what's possible with generative AI.
        </p>
      </div>
    </section>

    <!-- Team -->
    <section class="px-6 py-24">
      <div class="mx-auto max-w-6xl">
        <h2 class="text-center text-3xl font-bold md:text-4xl">Team</h2>
        <div class="mt-12 grid gap-6 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
          {team.map((member) => (
            <div class="rounded-xl border border-white/10 p-5 text-center">
              <div class="mx-auto h-16 w-16 rounded-full bg-charcoal-600" />
              <h3 class="mt-4 font-semibold">{member.name}</h3>
              <p class="mt-1 text-sm text-smoke-700">{member.role}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    <!-- Collaborators -->
    <section class="bg-charcoal-800 px-6 py-16">
      <div class="mx-auto max-w-4xl text-center">
        <h2 class="text-2xl font-bold">Collaborators</h2>
        <div class="mt-8 flex flex-wrap items-center justify-center gap-8">
          {collaborators.map((person) => (
            <div class="text-center">
              <div class="mx-auto h-14 w-14 rounded-full bg-charcoal-600" />
              <p class="mt-3 font-semibold">{person.name}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    <!-- FAQs -->
    <section class="px-6 py-24">
      <div class="mx-auto max-w-3xl">
        <h2 class="text-center text-3xl font-bold md:text-4xl">FAQs</h2>
        <div class="mt-12 space-y-10">
          {faqs.map((faq) => (
            <div>
              <h3 class="text-lg font-semibold">{faq.q}</h3>
              <p class="mt-2 text-smoke-700">{faq.a}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    <!-- Join Our Team CTA -->
    <section class="bg-charcoal-800 px-6 py-24 text-center">
      <h2 class="text-3xl font-bold md:text-4xl">Join Our Team</h2>
      <p class="mx-auto mt-4 max-w-xl text-smoke-700">
        We're looking for people who are passionate about open-source, generative AI, and building great developer tools.
      </p>
      <a
        href="/careers"
        class="mt-8 inline-block rounded-full bg-brand-yellow px-8 py-3 text-sm font-semibold text-black transition-opacity hover:opacity-90"
      >
        View Open Positions
      </a>
    </section>
  </main>
  <SiteFooter />
</BaseLayout>