- Introduced new design tokens and color variables in globals.css to align with the United Tattoo 2026 design system. - Updated tailwind.config.ts to include new brand colors, background images, and box shadows for improved UI aesthetics. - Replaced existing hero section with a new design featuring enhanced parallax effects and glassmorphism styles. - Added multiple new images and icons to support the updated design, including navigation and hero section assets. - Implemented a new layout structure in page.tsx, integrating new sections for immersion and identity, enhancing user engagement. This commit significantly improves the overall design and user experience, establishing a cohesive visual identity for the application.
47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
import { chromium } from 'playwright';
|
|
|
|
(async () => {
|
|
try {
|
|
console.log('Connecting to browser...');
|
|
const browser = await chromium.connectOverCDP('http://localhost:9222');
|
|
const defaultContext = browser.contexts()[0];
|
|
const page = defaultContext ? defaultContext.pages()[0] : await browser.newPage();
|
|
|
|
if (!page) {
|
|
throw new Error('No page found');
|
|
}
|
|
|
|
console.log('Navigating to home...');
|
|
await page.goto('http://localhost:3000', { waitUntil: 'networkidle' });
|
|
|
|
// Desktop Screenshot
|
|
console.log('Taking desktop screenshot...');
|
|
await page.setViewportSize({ width: 1600, height: 1200 });
|
|
// Wait a sec for resizing
|
|
await page.waitForTimeout(1000);
|
|
await page.screenshot({ path: '.playwright-mcp/08-navigation-desktop-refined.png' });
|
|
|
|
// Mobile Screenshot
|
|
console.log('Taking mobile screenshot...');
|
|
await page.setViewportSize({ width: 390, height: 844 });
|
|
await page.waitForTimeout(1000);
|
|
|
|
// Click Menu
|
|
const menuButton = page.locator('button[aria-label="Toggle menu"]');
|
|
if (await menuButton.isVisible()) {
|
|
await menuButton.click();
|
|
// Wait for transition
|
|
await page.waitForTimeout(1000);
|
|
await page.screenshot({ path: '.playwright-mcp/09-navigation-mobile-refined.png' });
|
|
} else {
|
|
console.error('Menu button not found!');
|
|
}
|
|
|
|
console.log('Done.');
|
|
await browser.close();
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
process.exit(1);
|
|
}
|
|
})();
|