mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-19 22:09:37 +00:00
121ceda66d
## Summary Implement the website layout system and homepage with all sections, reusable components, scroll-driven animations, and routing. ## Changes - **What**: - Reorganize components into `common/`, `home/`, `company/`, `product/` directories - Add `BaseLayout` with shared `SiteNav` and `SiteFooter` - Implement homepage sections: Hero, SocialProofBar, ProductShowcase, UseCase, GetStarted, ProductCards, CaseStudySpotlight, BuildWhat - Add reusable components: BrandButton, NodeBadge, ProductCard, FooterLinkColumn, NavDesktopLink, MobileMenu - Add PPFormula font family, client logos, and icon assets - Add hero/footer logo frame sequences for scroll-driven animations - Add `useFrameScrub` composable and `smoothScroll` (Lenis + GSAP ScrollTrigger) - Add route config, nav config, and placeholder pages for all routes - Add Playwright e2e tests for homepage and navigation - **Dependencies**: gsap, lenis, @astrojs/check desktop  mobile  ## Review Focus - Component structure and naming conventions under `apps/website/` - Scroll-driven animation approach (GSAP ScrollTrigger + Lenis smooth scroll) - Mobile responsive behavior (MobileMenu, ScrollTrigger matchMedia) --------- Co-authored-by: GitHub Action <action@github.com> Co-authored-by: DrJKL <DrJKL0424@gmail.com> Co-authored-by: Amp <amp@ampcode.com> Co-authored-by: Alexander Brown <drjkl@comfy.org>
49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
import { expect, test } from '@playwright/test'
|
|
|
|
test.describe('Desktop layout @smoke', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.goto('/')
|
|
})
|
|
|
|
test('navigation links visible and hamburger hidden', async ({ page }) => {
|
|
const nav = page.getByRole('navigation', { name: 'Main navigation' })
|
|
const desktopLinks = nav.getByTestId('desktop-nav-links')
|
|
await expect(desktopLinks.getByText('PRODUCTS').first()).toBeVisible()
|
|
await expect(desktopLinks.getByText('PRICING').first()).toBeVisible()
|
|
|
|
await expect(page.getByRole('button', { name: 'Toggle menu' })).toBeHidden()
|
|
})
|
|
|
|
test('product cards in grid layout', async ({ page }) => {
|
|
const section = page.locator('section', {
|
|
has: page.getByRole('heading', { name: /The AI creation/ })
|
|
})
|
|
const cards = section.locator('a[href]')
|
|
await expect(cards).toHaveCount(4)
|
|
|
|
const firstBox = await cards.nth(0).boundingBox()
|
|
const secondBox = await cards.nth(1).boundingBox()
|
|
|
|
expect(firstBox, 'first card bounding box').not.toBeNull()
|
|
expect(secondBox, 'second card bounding box').not.toBeNull()
|
|
expect(firstBox!.y).toBeCloseTo(secondBox!.y, 0)
|
|
})
|
|
})
|
|
|
|
test.describe('Mobile layout @mobile', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.goto('/')
|
|
})
|
|
|
|
test('hamburger visible and desktop nav hidden', async ({ page }) => {
|
|
await expect(
|
|
page.getByRole('button', { name: 'Toggle menu' })
|
|
).toBeVisible()
|
|
})
|
|
|
|
test('SocialProofBar shows two marquee rows on mobile', async ({ page }) => {
|
|
const mobileContainer = page.getByTestId('social-proof-mobile')
|
|
await expect(mobileContainer).toBeVisible()
|
|
})
|
|
})
|