mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 14:30:41 +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)
68 lines
1.8 KiB
Vue
68 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
const pillars = [
|
|
{
|
|
icon: '⚡',
|
|
title: 'Build',
|
|
description:
|
|
'Design complex AI workflows visually with our node-based editor'
|
|
},
|
|
{
|
|
icon: '🎨',
|
|
title: 'Customize',
|
|
description: 'Fine-tune every parameter across any model architecture'
|
|
},
|
|
{
|
|
icon: '🔧',
|
|
title: 'Refine',
|
|
description:
|
|
'Iterate on outputs with precision controls and real-time preview'
|
|
},
|
|
{
|
|
icon: '⚙️',
|
|
title: 'Automate',
|
|
description:
|
|
'Scale your workflows with batch processing and API integration'
|
|
},
|
|
{
|
|
icon: '🚀',
|
|
title: 'Run',
|
|
description: 'Deploy locally or in the cloud with identical results'
|
|
}
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<section class="bg-black px-6 py-24">
|
|
<div class="mx-auto max-w-7xl">
|
|
<header class="mb-16 text-center">
|
|
<h2 class="text-3xl font-bold text-white md:text-4xl">
|
|
The Building Blocks of AI Production
|
|
</h2>
|
|
<p class="mt-4 text-smoke-700">
|
|
Five powerful capabilities that give you complete control
|
|
</p>
|
|
</header>
|
|
|
|
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-5">
|
|
<article
|
|
v-for="pillar in pillars"
|
|
:key="pillar.title"
|
|
class="rounded-xl border border-white/10 bg-charcoal-600 p-6 transition-colors hover:border-brand-yellow"
|
|
>
|
|
<div
|
|
class="flex h-12 w-12 items-center justify-center rounded-full bg-brand-yellow text-xl"
|
|
>
|
|
{{ pillar.icon }}
|
|
</div>
|
|
<h3 class="mt-4 text-lg font-semibold text-white">
|
|
{{ pillar.title }}
|
|
</h3>
|
|
<p class="mt-2 text-sm text-smoke-700">
|
|
{{ pillar.description }}
|
|
</p>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|