mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 06:20:11 +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)
75 lines
2.2 KiB
Vue
75 lines
2.2 KiB
Vue
<!-- TODO: Wire category content swap when final assets arrive -->
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
const categories = [
|
|
'VFX & Animation',
|
|
'Creative Agencies',
|
|
'Gaming',
|
|
'eCommerce & Fashion',
|
|
'Community & Hobbyists'
|
|
]
|
|
|
|
const activeCategory = ref(0)
|
|
</script>
|
|
|
|
<template>
|
|
<section class="bg-charcoal-800 px-6 py-24">
|
|
<div class="mx-auto max-w-7xl">
|
|
<div class="flex flex-col items-center gap-12 lg:flex-row lg:gap-8">
|
|
<!-- Left placeholder image (desktop only) -->
|
|
<div class="hidden flex-1 lg:block">
|
|
<div
|
|
class="aspect-[2/3] rounded-full border border-white/10 bg-charcoal-600"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Center content -->
|
|
<div class="flex flex-col items-center text-center lg:flex-[2]">
|
|
<h2 class="text-3xl font-bold text-white">
|
|
Built for Every Creative Industry
|
|
</h2>
|
|
|
|
<nav
|
|
class="mt-10 flex flex-col items-center gap-4"
|
|
aria-label="Industry categories"
|
|
>
|
|
<button
|
|
v-for="(category, index) in categories"
|
|
:key="category"
|
|
class="transition-colors"
|
|
:class="
|
|
index === activeCategory
|
|
? 'text-2xl text-white'
|
|
: 'text-xl text-ash-500 hover:text-white/70'
|
|
"
|
|
@click="activeCategory = index"
|
|
>
|
|
{{ category }}
|
|
</button>
|
|
</nav>
|
|
|
|
<p class="mt-10 max-w-lg text-smoke-700">
|
|
Powered by 60,000+ nodes, thousands of workflows, and a community
|
|
that builds faster than any one company could.
|
|
</p>
|
|
|
|
<a
|
|
href="/workflows"
|
|
class="mt-8 rounded-full border border-brand-yellow px-8 py-3 text-sm font-semibold text-brand-yellow transition-colors hover:bg-brand-yellow hover:text-black"
|
|
>
|
|
EXPLORE WORKFLOWS
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Right placeholder image (desktop only) -->
|
|
<div class="hidden flex-1 lg:block">
|
|
<div
|
|
class="aspect-[2/3] rounded-3xl border border-white/10 bg-charcoal-600"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|