Design a light-mode website section: crisp comparative dichotomy contrasting static friction in pale crimson against dynamic intelligence in luminous cobalt.
LAYOUT
The page flows from a centered hierarchical title cluster (pill badge, display heading with gradient accent, subtitle) directly into a balanced two-column comparison grid. The left column details current problems in neutral/red styling; the right column expands into technical solutions with embedded visual diagrams and an intense blue action footer. A central floating circular arrow establishes explicit left-to-right progression.
PALETTE (use these exact hex values)
- #F8FAFC — Canvas Background: Global backdrop providing subtle cool tone behind pure white surfaces
- #FFFFFF — Card Surface: Background for primary comparison containers and interactive floating buttons
- #0F172A — Text Primary: Primary headings, titles, and high-emphasis labels
- #64748B — Text Muted: Secondary explanations, body paragraphs, and descriptive item copy
- #E11D48 — Problem Crimson: Status indicator, icons, and label text designating legacy friction
- #FFF1F2 — Problem Tint: Background wash for the problem outcome callout box
- #0052FF — Solution Electric Blue: Solution status badge, key icons, and full-bleed outcome banner background
- #E2E8F0 — Border Subtle: Outlines around cards, pills, icon frames, and callout boxes
- linear-gradient(90deg, #D946EF 0%, #3B82F6 100%) — Intelligence Gradient: Display text gradient highlight and generative light stream motif
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 24px heading, 44px display. Tracking -0.03em at display, -0.01em at body, +0.06em at uppercase caption. The typography is disciplined, corporate, and scientific. By utilizing a highly legible geometric neo-grotesque sans with tight display kerning, the message reads like a mission-critical infrastructure report rather than sales marketing.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is restrained and flat-forward. It is established primarily through 1px hairline borders (#E2E8F0) and background contrast against #F8FAFC, supplemented by an ultra-soft diffuse drop shadow (0 4px 20px rgba(0, 0, 0, 0.04)) on elevated floating tokens like the bridge node.
IMAGERY
Features a central 3D optical lens rendering composed of translucent glass slabs focusing chaotic blue and magenta light rays into a luminous aperture. The aesthetic is clean, technical, and photonic, avoiding humanoid illustration or literal hardware imagery.
SIGNATURE DETAIL — the thing that makes this design itself
The asymmetric polarity split: matching height cards contrasting a muted crimson warning outcome against an electric-blue full-bleed callout banner, visually unified by an overlapping central transition pill.
MUST
- Use pure white cards on an off-white #F8FAFC canvas to maintain clean layered depth.
- Restrict crimson (#E11D48) strictly to failure states, errors, and legacy friction points.
- Apply gradient fills only to key forward-looking nouns in headers or focal 3D glass imagery.
- Keep descriptive body text short, scannable, and limited to two lines per bullet.
AVOID
- Do not use dark backgrounds or saturated border lines around comparison cards.
- Never mix the red problem palette into the solution column or vice versa.
- Avoid heavy drop shadows; depth is established via 1px neutral borders and tint shifts.
- Do not allow bullet lists to misalign vertically across the dual-card divide.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1792:1024. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
