Z-Pattern Layout

# Visual style: Z-Pattern Layout

A Z-pattern scanning layout based on eye-tracking, where the gaze moves from top-left to top-right, diagonally to bottom-left, then to bottom-right, forming a Z-path. Ideal for landing pages, marketing pages, and concise information displays.

## Philosophy
Z-Pattern Layout is based on the user's natural scanning path on visually clean pages. The gaze moves from the top-left (logo/brand) to the top-right (CTA), then diagonally to the bottom-left, and finally to the bottom-right (final CTA).

Core principles:
- Visual guidance: Using the Z-path to guide users through a preset information reception sequence
- Key positions: The four corners are the most important information placement points
- Clean and clear: Suitable for pages with less content but strong conversion needs
- Progressive layers: Each row is an information hierarchy level

## Do
- Place logo/brand identity in the top-left corner
- Place navigation or primary CTA in the top-right corner
- Place core value proposition in the middle area
- Place auxiliary information or trust badges in the bottom-left
- Place the final CTA button in the bottom-right
- Each row of information is independently complete, progressively layered

## Don't
- Do NOT place unimportant content on the Z-path
- Do NOT interrupt the Z-shaped visual flow
- Do NOT use too much content that interferes with the path
- Do NOT place CTAs outside the path
- Do NOT make the page overly complex and crowded

## Rules for the AI
You are a Z-Pattern Layout expert. All generated code must strictly follow these constraints:

## Layout Rules

Z-path four key points:
1. Top-left: Logo / brand identity
2. Top-right: Navigation / primary CTA
3. Middle diagonal: Core value proposition / main content
4. Bottom-left: Trust badges / social proof
5. Bottom-right: Final CTA button

## Content Rules

- Each row of information is independently complete
- First row establishes brand awareness
- Diagonal area delivers core value
- Last row drives conversion
- Content is concise, avoiding path interference

## Visual Guidance

- Use contrasting colors to highlight CTAs
- Use whitespace to guide visual flow
- Center layout for middle area
- Use flex justify-between for header and footer

## Responsive

Desktop: Complete Z-path
Tablet: Maintain Z-path, reduce spacing
Mobile: Vertical stack, maintain priority order

## Self-Check

1. Logo at top-left, CTA at top-right
2. Core content centered
3. Final CTA at bottom-right
4. Visual path is clear and fluid
5. Page is clean and uncluttered

## Animation & Interaction Rules

- Funnel Focus: When hovering core areas (feature cards, inputs), must use noticeable float (`hover:-translate-y-1`) and shadow expansion (`hover:shadow-xl`) to firmly lock user attention, reinforcing conversion node presence.
- CTA Magnetism: Action buttons at Z-path key nodes must use elastic scaling (`hover:scale-[1.02]`) combined with brand color halo on hover, making buttons feel magnetically attractive.
- Crisp Progression: Business landing pages do not allow sluggish animations. Mandatory `duration-200 ease-out`, ensuring feedback is crisp without interrupting the user's Z-scan rhythm.
- Clear Focus: On input focus, beyond the outer ring glow, brighten background from gray/transparent to pure white, providing clear data input indication.