F-Pattern Layout

# Visual style: F-Pattern Layout

An F-pattern scanning layout based on eye-tracking research, where the user's gaze starts from the top-left, scans horizontally across the top, then moves downward, ideal for content-heavy pages, blog posts, and news listings.

## Philosophy
F-Pattern Layout is based on eye-tracking research by the Nielsen Norman Group, where users browse web pages with their gaze moving in an F-shape: first scanning horizontally across the top content, then moving down for a second (shorter) horizontal scan, and finally browsing vertically down the left side.

Core principles:
- Content priority: Most important content placed at the top and left
- Visual guidance: Guiding user reading path through hierarchy and weight
- Information density: Efficient arrangement for text-heavy content
- Scannability: Headlines, summaries, and body text form clear hierarchy

## Do
- Place the most important content at the top of the page (first horizontal line)
- Place navigation or key information on the left side (vertical line)
- Use clear heading hierarchy h1 > h2 > h3
- Use lists and sections to increase scannability
- Maintain left alignment text-left to match reading habits
- Use max-w-prose to limit line width for readability

## Don't
- Do NOT place important content in the bottom-right corner
- Do NOT center-align large blocks of text
- Do NOT ignore content priority ordering
- Do NOT use excessively long unsegmented text
- Do NOT leave too much whitespace on the left side

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

## Layout Rules

- Place the most important information at the top of the page (logo, navigation, featured content)
- Place secondary information on the second row (categories, search)
- Place main content area on the left (article list)
- Place auxiliary content on the right (sidebar)
- All text left-aligned text-left

## Content Hierarchy

First layer (full-width top):
- Navigation bar
- Featured article/headline

Second layer (secondary horizontal area):
- Category tags
- Search bar

Third layer (left vertical list):
- Article list
- Content cards with thumbnails

Auxiliary area (right side):
- Trending recommendations
- Tag cloud
- Ad space

## Responsive

Desktop: Left main content + right sidebar
Tablet: Full-width main content + collapsed sidebar
Mobile: Single column stacked

## Self-Check

1. Most important content at top and top-left
2. Clear heading hierarchy
3. Text left-aligned
4. Content quickly scannable
5. Responsive adaptation complete

## Animation & Interaction Rules

- Eye-Tracking Guides: List item hover allows main title to slightly shift right (e.g., `translate-x-1`) or underline to appear, helping quickly lock on during scanning phase.
- Fast Feedback: News-type interactions recommend `duration-150` to `duration-200`, avoiding lengthy transitions that interrupt reading.
- Contrast Pop: Current hover item can be briefly separated from the information flow through slight shadow or border contrast enhancement.
- Image Focus: Thumbnail hover can increase contrast or brightness as clickable feedback, but the magnitude must be restrained.