mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-24 06:35:10 +00:00
bbb043c9cc
## Summary <!-- One sentence describing what changed and why. --> Polish and fix UI for new website ## Changes - **What**: <!-- Core functionality added/modified --> - [x] update about video - [x] update Moment factory story content - [x] update homepage visual - [x] update customer story visual - [x] put images and videos to bucket ## 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-11363-feat-website-Polish-and-fix-UI-3466d73d365081f895aff84b594450c9) by [Unito](https://www.unito.io) --------- Co-authored-by: DrJKL <DrJKL0424@gmail.com> Co-authored-by: Amp <amp@ampcode.com> Co-authored-by: GitHub Action <action@github.com> Co-authored-by: Alexander Brown <drjkl@comfy.org> Co-authored-by: github-actions <github-actions@github.com>
100 lines
2.9 KiB
Vue
100 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
import { useHeroAnimation } from '../../composables/useHeroAnimation'
|
|
import type { Locale } from '../../i18n/translations'
|
|
import { t } from '../../i18n/translations'
|
|
import BrandButton from '../common/BrandButton.vue'
|
|
import SectionLabel from '../common/SectionLabel.vue'
|
|
import VideoPlayer from '../common/VideoPlayer.vue'
|
|
|
|
const { locale = 'en' } = defineProps<{ locale?: Locale }>()
|
|
|
|
const sectionRef = ref<HTMLElement>()
|
|
const logoRef = ref<HTMLElement>()
|
|
const labelRef = ref<HTMLElement>()
|
|
const headingRef = ref<HTMLElement>()
|
|
const bodyRef = ref<HTMLElement>()
|
|
const ctaRef = ref<HTMLElement>()
|
|
const videoRef = ref<HTMLElement>()
|
|
|
|
useHeroAnimation({
|
|
section: sectionRef,
|
|
textEls: [labelRef, headingRef, bodyRef, ctaRef],
|
|
logo: logoRef,
|
|
video: videoRef
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<section ref="sectionRef" class="pt-12 lg:pt-14">
|
|
<div
|
|
class="flex flex-col items-center text-center lg:flex-row lg:items-start lg:text-left"
|
|
>
|
|
<!-- Graphic -->
|
|
<div
|
|
ref="logoRef"
|
|
class="order-2 mt-8 w-full lg:order-1 lg:mt-0 lg:w-5/12"
|
|
>
|
|
<img
|
|
src="https://media.comfy.org/website/about/c.webp"
|
|
alt="Comfy 3D logo"
|
|
class="mx-auto w-full max-w-md lg:max-w-none"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Text -->
|
|
<div
|
|
class="order-1 flex flex-col items-center lg:order-2 lg:w-7/12 lg:items-start lg:pt-16 lg:pl-12"
|
|
>
|
|
<SectionLabel ref="labelRef">
|
|
{{ t('about.hero.label', locale) }}
|
|
</SectionLabel>
|
|
<h1
|
|
ref="headingRef"
|
|
class="text-primary-comfy-canvas mt-4 text-4xl/tight font-light lg:text-6xl"
|
|
>
|
|
{{ t('about.hero.heading', locale) }}
|
|
</h1>
|
|
<p
|
|
ref="bodyRef"
|
|
class="text-primary-comfy-canvas mt-6 max-w-sm text-base"
|
|
>
|
|
{{ t('about.hero.body', locale) }}
|
|
</p>
|
|
<div ref="ctaRef" class="mt-8">
|
|
<BrandButton
|
|
:href="locale === 'zh-CN' ? '/zh-CN/careers' : '/careers'"
|
|
variant="outline"
|
|
>
|
|
{{ t('about.hero.cta', locale) }}
|
|
</BrandButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Video -->
|
|
<div ref="videoRef" class="px-4 pb-20 lg:px-20 lg:pb-40">
|
|
<VideoPlayer
|
|
src="https://media.comfy.org/website/about/co-founders.webm"
|
|
poster="https://media.comfy.org/website/about/co-founders-poster.webp"
|
|
:tracks="[
|
|
{
|
|
src: 'https://media.comfy.org/website/about/co-founders.en.vtt',
|
|
kind: 'subtitles',
|
|
srclang: 'en',
|
|
label: 'English'
|
|
},
|
|
{
|
|
src: 'https://media.comfy.org/website/about/co-founders.desc.vtt',
|
|
kind: 'descriptions',
|
|
srclang: 'en',
|
|
label: 'Descriptions'
|
|
}
|
|
]"
|
|
:locale
|
|
/>
|
|
</div>
|
|
</section>
|
|
</template>
|