Design a dark-mode website section: a high-contrast transformation narrative bridging crimson manual friction into luminescent electric-blue clarity.
LAYOUT
The page follows a centralized funnel rhythm. A persistent top navigation bar (logo, links, and demo trigger) sits atop a centered hero cluster containing the eyebrow badge, two-line display headline, subtext, and dual CTA buttons with benefit checks. Directly below, the hero splits into an expansive side-by-side comparison linked by a central horizontal conduit, closed by a floating social proof badge at the lower axis.
PALETTE (use these exact hex values)
- #060813 — Deep Space Base: Foundational canvas background for the entire hero viewport.
- #2E5CFF — Electric Blue Glow: Atmospheric right-hand radial backdrop and primary CTA fill.
- #E02E2E — Crimson Friction: Warning ambient glow, scribble illustrations, and negative state metrics on the left panel.
- #FFFFFF — Luminescent White Card: High-contrast hero product card background depicting positive AI outcome.
- #0E111E — Dark Friction Glass: Semi-translucent backdrop for the left-hand 'Before' workflow container.
- #A5B4FC — Heading Gradient End: Soft periwinkle gradient terminus applied to secondary display lines.
- #FFFFFF — Primary Text: Main headline text, primary navigation labels, and critical callouts.
- #94A3B8 — Muted Text: Sub-headlines, feature checklist labels, and metadata captions.
- #10B981 — Success Mint: Active status indicator chip and growth delta percentage badge.
TYPOGRAPHY
Typeface Inter (or Geist,SF Pro Display,Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 60px display. Tracking -0.03em on display, -0.01em on body. The typographic tone is authoritative, hyper-modern, and razor-sharp. Using a neutral neo-grotesque like Inter or Geist prevents the layout from feeling gimmicky despite the vibrant neon effects. The text relies on tight letter spacing and heavy headline weights to deliver enterprise-grade credibility amidst futuristic aesthetic choices.
GEOMETRY & SPACING
Corner radii — cards 20px, links 999px, inputs 8px, buttons 12px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is rendered primarily through atmospheric chromatic luminescence rather than heavy drop shadows. The canvas utilizes multi-stop radial glows behind cards to establish spatial planes. The sole card with traditional shadow elevation is the white dashboard on the right, which casts a diffuse, deep-blue tinted ambient shadow (0 20px 40px rgba(46, 92, 255, 0.25)).
IMAGERY
Imagery strictly avoids stock photography, relying instead on high-fidelity vector UI mockups paired with communicative linework. The left side employs sketchy, chaotic scribble annotations and alert envelopes, while the right features crisp, vector-rendered SaaS telemetry graphs and checkmark rows. Real photography is confined exclusively to small circular customer avatars.
SIGNATURE DETAIL — the thing that makes this design itself
The horizontal 'Friction to Flow' chromatic pipeline. It connects a low-contrast, red-tinted manual chore list into a glowing, crystal-white automated execution dashboard via a fiber-optic laser beam. Without this dual-color transformation bridge, the hero section loses its visual story and devolves into a generic SaaS landing page.
MUST
- Retain the chromatic dichotomy: red aura for manual pain on the left, blue aura for AI automation on the right.
- Keep the 'After' dashboard card solid white to create maximum visual pull against the dark slate canvas.
- Use pill-shaped 999px borders for all taglines, category badges, and social endorsement modules.
- Apply negative tracking (-0.035em) strictly on headline sizes 44px and above.
AVOID
- Do not make the 'After' card dark or translucent; it will destroy the transformation contrast.
- Do not use green for the 'Before' section; red is mandatory to indicate friction and manual labor.
- Never drop the ambient light diffusion behind the cards, or the central beam will feel disconnected.
- Do not use sharp 0px corners on interactive buttons; maintain the 12px rounding throughout.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
