mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-19 22:09:37 +00:00
dc7c97c5ac
## Summary Adds all 11 homepage section components for the comfy.org marketing site. ## Changes (incremental from #10141) - HeroSection.vue: C monogram left, headline right, CTAs - SocialProofBar.vue: 12 enterprise logos + metrics - ProductShowcase.vue: PLACEHOLDER workflow demo - ValuePillars.vue: Build/Customize/Refine/Automate/Run - UseCaseSection.vue: PLACEHOLDER industries - CaseStudySpotlight.vue: PLACEHOLDER bento grid - TestimonialsSection.vue: Filterable by industry - GetStartedSection.vue: 3-step flow - CTASection.vue: Desktop/Cloud/API cards - ManifestoSection.vue: Method Not Magic - AcademySection.vue: Learning paths CTA - Updated index.astro + zh-CN/index.astro ## Stack (via Graphite) - #10140 [1/3] Scaffold - #10141 [2/3] Layout Shell - **[3/3] Homepage Sections** ← this PR (top of stack) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10142-feat-add-Wave-3-homepage-sections-11-Vue-components-3-3-3266d73d36508194aa8ee9385733ddb9) by [Unito](https://www.unito.io)
78 lines
2.3 KiB
Vue
78 lines
2.3 KiB
Vue
<!-- TODO: Replace placeholder content with real quotes and case studies -->
|
|
<script setup lang="ts">
|
|
const studies = [
|
|
{
|
|
title: 'New Pipelines with Chord Mode',
|
|
body: 'For AI-assisted texture and environment generation across studio pipelines.',
|
|
highlight: false,
|
|
gridClass: 'md:row-span-2'
|
|
},
|
|
{
|
|
title: 'AI-Assisted Texture and Environment',
|
|
body: 'For AI-assisted texture and environment generation across studio pipelines.',
|
|
highlight: false,
|
|
gridClass: 'min-h-[300px] lg:col-span-2'
|
|
},
|
|
{
|
|
title: 'Open-sourced the Chord Mode',
|
|
body: 'For AI-assisted texture and environment generation across studio pipelines.',
|
|
highlight: false,
|
|
gridClass: 'min-h-[200px]'
|
|
},
|
|
{
|
|
title: 'Environment Generation',
|
|
body: 'For AI-assisted texture and environment generation across studio pipelines.',
|
|
highlight: true,
|
|
gridClass: 'min-h-[200px]'
|
|
}
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<section class="bg-black px-6 py-24">
|
|
<div class="mx-auto max-w-7xl">
|
|
<header class="mb-12">
|
|
<h2 class="text-3xl font-bold text-white">Customer Stories</h2>
|
|
<p class="mt-2 text-smoke-700">
|
|
See how leading studios use Comfy in production
|
|
</p>
|
|
</header>
|
|
|
|
<!-- Bento grid -->
|
|
<div
|
|
class="relative grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"
|
|
>
|
|
<article
|
|
v-for="study in studies"
|
|
:key="study.title"
|
|
class="flex flex-col justify-end rounded-2xl border border-brand-yellow/30 p-6"
|
|
:class="[
|
|
study.gridClass,
|
|
study.highlight ? 'bg-brand-yellow' : 'bg-charcoal-600'
|
|
]"
|
|
>
|
|
<h3
|
|
class="font-semibold"
|
|
:class="study.highlight ? 'text-black' : 'text-white'"
|
|
>
|
|
{{ study.title }}
|
|
</h3>
|
|
<p
|
|
class="mt-2 text-sm"
|
|
:class="study.highlight ? 'text-black/70' : 'text-smoke-700'"
|
|
>
|
|
{{ study.body }}
|
|
</p>
|
|
<a
|
|
href="/case-studies"
|
|
class="mt-4 text-sm underline"
|
|
:class="study.highlight ? 'text-black' : 'text-brand-yellow'"
|
|
>
|
|
READ CASE STUDY
|
|
</a>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|