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)
48 lines
1.4 KiB
Vue
48 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
const features = [
|
|
{ icon: '📚', label: 'Guided Tutorials' },
|
|
{ icon: '🎥', label: 'Video Courses' },
|
|
{ icon: '🛠️', label: 'Hands-on Projects' }
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<section class="bg-charcoal-800 py-24">
|
|
<div class="mx-auto max-w-3xl px-6 text-center">
|
|
<!-- Badge -->
|
|
<span
|
|
class="inline-block rounded-full bg-brand-yellow/10 px-4 py-1.5 text-xs uppercase tracking-widest text-brand-yellow"
|
|
>
|
|
COMFY ACADEMY
|
|
</span>
|
|
|
|
<h2 class="mt-6 text-3xl font-bold text-white">Master AI Workflows</h2>
|
|
|
|
<p class="mt-4 text-smoke-700">
|
|
Learn to build professional AI workflows with guided tutorials, video
|
|
courses, and hands-on projects.
|
|
</p>
|
|
|
|
<!-- Feature bullets -->
|
|
<div class="mt-8 flex flex-wrap items-center justify-center gap-8">
|
|
<div
|
|
v-for="feature in features"
|
|
:key="feature.label"
|
|
class="flex items-center gap-2 text-sm text-white"
|
|
>
|
|
<span aria-hidden="true">{{ feature.icon }}</span>
|
|
<span>{{ feature.label }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CTA -->
|
|
<a
|
|
href="/academy"
|
|
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"
|
|
>
|
|
EXPLORE ACADEMY
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</template>
|