---
import BaseLayout from '../layouts/BaseLayout.astro'
import ProductCardsSection from '../components/home/ProductCardsSection.vue'
import HeroSection from '../components/home/HeroSection.vue'
import SocialProofBarSection from '../components/common/SocialProofBarSection.vue'
import ProductShowcaseSection from '../components/home/ProductShowcaseSection.vue'
import UseCaseSection from '../components/home/UseCaseSection.vue'
import CaseStudySpotlightSection from '../components/home/CaseStudySpotlightSection.vue'
import GetStartedSection from '../components/home/GetStartedSection.vue'
import BuildWhatSection from '../components/home/BuildWhatSection.vue'
import { t } from '../i18n/translations'
---

<BaseLayout
  title="Comfy — Professional Control of Visual AI"
  description={t('hero.subtitle', 'en')}
  keywords={['comfyui app', 'comfyui web app', 'comfy ui application', 'comfyui application', 'comfy app', 'comfyui', 'visual ai app', 'node-based ai', 'generative ai workflows']}
>
  <HeroSection client:load />
  <SocialProofBarSection />
  <ProductShowcaseSection client:load />
  <UseCaseSection client:load />
  <GetStartedSection />
  <ProductCardsSection />
  <CaseStudySpotlightSection client:load />
  <BuildWhatSection />
</BaseLayout>
