Anti Slop Comparison

Create a realistic side-by-side comparison illustration showing the 
difference between typical "AI slop" UI and a "fumeng-guided" UI for a 
hypothetical SaaS landing page hero. The purpose is to prove the skill's 
value by showing the SAME content rendered two ways.

Visual style: two realistic web page screenshots placed side-by-side inside 
a unified figure frame. Feels like a before/after plate in a design 
textbook, NOT a marketing comparison ad.

Canvas composition:
- Overall background: warm cream paper oklch(0.96 0.008 40) with subtle grain
- Top of canvas, 48px humanist serif title (Tiempos Headline character): 
  "Same brief, two outcomes"
- 16px italic body serif subtitle: "A knowledge management SaaS landing, 
  hero section only — rendered by a generic AI and by fumeng"
- A thin warm-grey hairline separator below the title
- Below the separator: TWO panels side-by-side, each taking 48% of the 
  canvas width, separated by a thin 1px hairline rule
- Above the LEFT panel: small uppercase monospaced label in muted grey 
  "BEFORE — AI slop (generic LLM output)"
- Above the RIGHT panel: small uppercase monospaced label in terracotta 
  "AFTER — fumeng-guided"

LEFT panel (the "bad" AI slop example):
- A rendered web page hero section with a purple-to-pink gradient background 
  (from oklch(0.65 0.28 295) to oklch(0.72 0.26 360))
- Centered white text stack using a generic sans-serif (Inter character):
  * Large headline: "Think better. Write slower." in bold Inter-like sans
  * Sub-headline in regular sans: "A knowledge management tool for people 
    who value the act of thinking."
  * Two centered buttons with rounded corners: "Get started" purple and 
    "Learn more" white outline
- Below the hero, THREE symmetric feature columns each with: emoji icon 
  (🚀 ⚡ ✨), bold 3-word heading, 2-line description, all with a purple 
  left-border accent (4px solid)
- A trust bar row showing SIX made-up company logos that look obviously 
  fabricated (wordmarks like "TechCorp", "InnovateCo", "BuildHub" — 
  rendered in generic sans)
- Small stats row: "10,000+ users", "98% satisfaction", "10x faster"
- Overall feel: generic, templated, AI-generated marketing page

RIGHT panel (the "fumeng-guided" good example):
- A rendered web page hero section with warm cream paper background 
  oklch(0.97 0.005 40) and subtle paper grain
- LEFT-aligned text stack (NOT centered) using a humanist serif display 
  (Tiempos Headline character):
  * Large headline: "Think better. Write slower." in warm-weight serif, 
    deep warm black oklch(0.18 0.02 30), 72px
  * Sub-headline in warm editorial body serif (PP Editorial Old character), 
    18px, line-height 1.7: "A knowledge management tool for people who 
    value the act of thinking."
  * Left-aligned CTA row: primary terracotta pill "Start your first note" 
    oklch(0.58 0.19 28), secondary text link "Read the manifesto →"
- To the right of the hero text: a tilted editorial-looking note editor 
  mockup screenshot, with body text in warm serif
- Below hero: asymmetric feature layout — ONE large feature card + TWO 
  smaller cards, varying sizes, no left-border accents, only subtle 
  shadow elevation
- Trust bar: six monochrome abstract geometric marks (circle, hexagon, 
  square, triangle, plus sign, chevron) labelled "[placeholder]" 
  underneath — NOT fake company logos
- A small caption in italic body serif: "[Illustrative metric placeholder]"
- Overall feel: editorial, human, deliberately crafted

Bottom of canvas: a small annotation table with three rows in monospaced 
letterpress type, 12px:
  "Fonts:   Inter + Inter           →  Tiempos Headline + PP Editorial Old"
  "Color:   purple-pink gradient   →  warm cream + single terracotta"
  "Layout:  centered + 3-col grid  →  asymmetric editorial"
  "Content: emoji + fake stats     →  placeholders honest about gaps"

Use case: Educational figure in README and marketing materials showing 
the concrete value of fumeng's methodology, 1536x1024.

Strict constraints:
- The LEFT panel MUST look like generic AI slop (that is the point). 
  It MUST use a purple-pink gradient, Inter-like sans, 3-column grid, 
  emoji icons, fake testimonials — all the anti-patterns.
- The RIGHT panel MUST showcase the opposite — editorial serif, warm cream, 
  asymmetric layout, honest placeholders.
- Both panels render the SAME copy verbatim.
- Do NOT use any real company logos in the trust bars (both sides should 
  either be obvious placeholders or obviously fabricated).
- All text inside the panels must be EXACTLY as specified.
- The overall figure frame uses editorial restraint — NO rainbow colors 
  outside the panels.
- Pixel-perfect 8px grid alignment for the outer frame.