mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-07-18 17:58:23 +00:00
be8e0010ee
Rebuilds the **Comfy MCP** marketing page on the website design-system stack and adds the missing zh-CN page. ## What's here - Replaces the bespoke `components/product/mcp/` section silo with thin `templates/mcp/*` wrappers over reusable `blocks/` + `common/` components. - Adds `src/pages/zh-CN/mcp.astro` and threads `locale` through every section (was English-only). - New/extended design-system blocks: - `FeatureGrid01` — setup steps, with a reusable `ui/CopyableField` (uses `@vueuse/core` `useClipboard`). - `FeatureGrid02` — how-it-works steps with `NodeUnionIcon` connectors + a CTA pair via `ui/button`. - `FeatureRows01` — alternating media rows; `ReasonsSplit01` — "why" list. - `HeroSplit01` gained `subtitle`, a `media` slot, and a `class` passthrough; `SectionHeader` gained `align`. - Standardized block section spacing on `px-6 py-16 lg:py-24`. - Refreshed all 8 MCP FAQ answers (en + zh-CN) and hydrated the FAQ section so the accordion is interactive. ## Notes - Stacked on the original MCP landing-page commits (previously PR #13095); those ride along here. - `typecheck` and `build` are green; `/mcp` and `/zh-CN/mcp` both render in both locales. 🤖 Generated with [Claude Code](https://claude.com/claude-code) --------- Co-authored-by: Balpreet Brar <balpreet.brar@growthnatives.com> Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Alexander Brown <drjkl@comfy.org>
95 lines
2.6 KiB
Vue
95 lines
2.6 KiB
Vue
<script setup lang="ts">
|
||
import { cn } from '@comfyorg/tailwind-utils'
|
||
import { reactive, watch } from 'vue'
|
||
|
||
type Faq = { id: string; question: string; answer: string }
|
||
|
||
const { faqs } = defineProps<{
|
||
heading: string
|
||
faqs: readonly Faq[]
|
||
}>()
|
||
|
||
const expanded = reactive<boolean[]>(faqs.map(() => false))
|
||
|
||
watch(
|
||
() => faqs.length,
|
||
(length) => {
|
||
if (length === expanded.length) return
|
||
expanded.length = 0
|
||
for (let i = 0; i < length; i += 1) expanded.push(false)
|
||
}
|
||
)
|
||
|
||
function toggle(index: number) {
|
||
expanded[index] = !expanded[index]
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<section class="max-w-9xl mx-auto px-6 py-16 lg:py-24">
|
||
<div class="flex flex-col gap-6 md:flex-row md:gap-16">
|
||
<!-- Left heading -->
|
||
<div
|
||
class="sticky top-20 z-10 w-full shrink-0 self-start bg-primary-comfy-ink py-4 md:top-28 md:w-80 md:py-0"
|
||
>
|
||
<h2 class="text-4xl font-light text-primary-comfy-canvas md:text-5xl">
|
||
{{ heading }}
|
||
</h2>
|
||
</div>
|
||
|
||
<!-- Right FAQ list -->
|
||
<div class="flex-1">
|
||
<div
|
||
v-for="(faq, index) in faqs"
|
||
:key="faq.id"
|
||
class="border-b border-primary-comfy-canvas/20"
|
||
>
|
||
<button
|
||
:id="`faq-trigger-${faq.id}`"
|
||
type="button"
|
||
:aria-expanded="expanded[index]"
|
||
:aria-controls="`faq-panel-${faq.id}`"
|
||
:class="
|
||
cn(
|
||
'flex w-full cursor-pointer items-center justify-between text-left',
|
||
index === 0 ? 'pb-6' : 'py-6'
|
||
)
|
||
"
|
||
@click="toggle(index)"
|
||
>
|
||
<span
|
||
:class="
|
||
cn(
|
||
'text-lg font-light md:text-xl',
|
||
expanded[index]
|
||
? 'text-primary-comfy-yellow'
|
||
: 'text-primary-comfy-canvas'
|
||
)
|
||
"
|
||
>
|
||
{{ faq.question }}
|
||
</span>
|
||
<span
|
||
class="text-primary-comfy-yellow ml-4 shrink-0 text-2xl"
|
||
aria-hidden="true"
|
||
>
|
||
{{ expanded[index] ? '−' : '+' }}
|
||
</span>
|
||
</button>
|
||
<section
|
||
v-show="expanded[index]"
|
||
:id="`faq-panel-${faq.id}`"
|
||
role="region"
|
||
:aria-labelledby="`faq-trigger-${faq.id}`"
|
||
class="pb-6"
|
||
>
|
||
<p class="text-sm whitespace-pre-line text-primary-comfy-canvas/70">
|
||
{{ faq.answer }}
|
||
</p>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|