mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 06:20:11 +00:00
e2b07f3e9a
## Summary <!-- One sentence describing what changed and why. --> ## Changes - **What**: <!-- Core functionality added/modified --> - **Breaking**: <!-- Any breaking changes (if none, remove this line) --> - **Dependencies**: <!-- New dependencies (if none, remove this line) --> ## Review Focus <!-- Critical design decisions or edge cases that need attention --> <!-- If this PR fixes an issue, uncomment and update the line below --> <!-- Fixes #ISSUE_NUMBER --> ## Screenshots (if applicable) <!-- Add screenshots or video recording to help explain your changes --> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10145-feat-website-add-Wave-4-secondary-pages-3266d73d3650818c9101c7d2086c21ba) by [Unito](https://www.unito.io)
95 lines
2.8 KiB
Vue
95 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref } from 'vue'
|
|
|
|
const activeFilter = ref('All')
|
|
|
|
const industries = ['All', 'VFX', 'Gaming', 'Advertising', 'Photography']
|
|
|
|
const testimonials = [
|
|
{
|
|
quote:
|
|
'Comfy has transformed our VFX pipeline. The node-based approach gives us unprecedented control over every step of the generation process.',
|
|
name: 'Sarah Chen',
|
|
title: 'Lead Technical Artist',
|
|
company: 'Studio Alpha',
|
|
industry: 'VFX'
|
|
},
|
|
{
|
|
quote:
|
|
'The level of control over AI generation is unmatched. We can iterate on game assets faster than ever before.',
|
|
name: 'Marcus Rivera',
|
|
title: 'Creative Director',
|
|
company: 'PixelForge',
|
|
industry: 'Gaming'
|
|
},
|
|
{
|
|
quote:
|
|
'We\u2019ve cut our iteration time by 70%. Comfy workflows let our team produce high-quality creative assets at scale.',
|
|
name: 'Yuki Tanaka',
|
|
title: 'Head of AI',
|
|
company: 'CreativeX',
|
|
industry: 'Advertising'
|
|
}
|
|
]
|
|
|
|
const filteredTestimonials = computed(() => {
|
|
if (activeFilter.value === 'All') return testimonials
|
|
return testimonials.filter((t) => t.industry === activeFilter.value)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<section class="bg-black py-24">
|
|
<div class="mx-auto max-w-7xl px-6">
|
|
<h2 class="text-center text-3xl font-bold text-white">
|
|
What Professionals Say
|
|
</h2>
|
|
|
|
<!-- Industry filter pills -->
|
|
<div class="mt-8 flex flex-wrap items-center justify-center gap-3">
|
|
<button
|
|
v-for="industry in industries"
|
|
:key="industry"
|
|
type="button"
|
|
:aria-pressed="activeFilter === industry"
|
|
class="cursor-pointer rounded-full px-4 py-1.5 text-sm transition-colors"
|
|
:class="
|
|
activeFilter === industry
|
|
? 'bg-brand-yellow text-black'
|
|
: 'border border-white/10 text-smoke-700 hover:border-brand-yellow'
|
|
"
|
|
@click="activeFilter = industry"
|
|
>
|
|
{{ industry }}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Testimonial cards -->
|
|
<div class="mt-12 grid grid-cols-1 gap-6 md:grid-cols-3">
|
|
<article
|
|
v-for="testimonial in filteredTestimonials"
|
|
:key="testimonial.name"
|
|
class="rounded-xl border border-white/10 bg-charcoal-600 p-6"
|
|
>
|
|
<blockquote class="text-base italic text-white">
|
|
“{{ testimonial.quote }}”
|
|
</blockquote>
|
|
|
|
<p class="mt-4 text-sm font-semibold text-white">
|
|
{{ testimonial.name }}
|
|
</p>
|
|
<p class="text-sm text-smoke-700">
|
|
{{ testimonial.title }}, {{ testimonial.company }}
|
|
</p>
|
|
|
|
<span
|
|
class="mt-3 inline-block rounded-full bg-white/5 px-2 py-0.5 text-xs text-smoke-700"
|
|
>
|
|
{{ testimonial.industry }}
|
|
</span>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|