Design a light-mode website section: elevated central hero column floating over subdued competitor baselines with soft indigo illumination.
LAYOUT
The section employs a symmetrical, center-focused 3-column comparative grid capped at 1120px max-width. At the top sits a centered stack: eyebrow badge, 44px display heading with colored 'vs.', and a 2-line subdued subtitle. Below, the comparison grid spans three equal columns where left and right represent painful legacy workflows and the central column stands forward with positive solutions, concluding in an enterprise proof ribbon docked at the bottom.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas Background: primary page background creating maximum clarity and contrast
- #FAFAFD — Card Surface Subdued: backdrop fill for outer legacy and manual competitor columns
- #D8DEFE — Hero Card Border: soft indigo border distinguishing the elevated center product card
- #E5E7EB — Base Border: outer table boundary and horizontal separator rules
- #0F172A — Text Primary: main heading, column titles, and bold row headlines
- #64748B — Text Muted: supporting row copy and section subtitle descriptions
- #4361EE — Accent Cobalt: title highlight for 'vs.', brand mark, and checkmark badges
- #EFFCF3 — Emerald Icon Fill: background surface for positive solution feature icons
- #16A34A — Emerald Icon Stroke: icon stroke color communicating automated intelligence and health
- #F4F6FD — Footer Banner Fill: soft tinted foundation bar summarizing enterprise capabilities
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px subheading, 20px heading, 44px display. Tracking -0.025em at display, -0.01em at body. The typographic tone is technical, disciplined, and calm. Utilizing a modern grotesque typeface like Inter or Plus Jakarta Sans with crisp geometric terminals and tight negative tracking in display headings gives an engineered SaaS feeling. Titles are high-contrast black (#0F172A) while explanatory details remain legible slate (#64748B) to prevent visual noise across dense rows.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 9999px. Spacing on a 8px unit, 32px gaps, 80px between sections, 1120px container, comfortable density.
DEPTH
Depth is created strictly through layering rather than aggressive dark drop shadows. The background sits at Level 0, the competitor outer hull sits flat at Level 1, and the central hero column projects into Level 2 using a soft, light-diffused indigo-tinted shadow (0 12px 36px -4px rgba(67, 97, 238, 0.09)) combined with a 16px vertical overextension.
IMAGERY
Iconography is strictly outline/vector based with consistent 1.75px stroke weights inside 40x40px square containers. Center icons utilize soft rounded squircle containers with light emerald tint, while competitor icons float in bare circular or rounded outlines without fill. No photography, 3D renders, or heavy decorative graphics are permitted.
SIGNATURE DETAIL — the thing that makes this design itself
The 'Overlapping Hero Spine': a central product card that breaks vertical containment by extending 16px beyond both top and bottom edges of the competitor frame, framed in subtle periwinkle (#D8DEFE) with a light indigo shadow. Misusing this pattern by elevating more than one column or failing to horizontally align row baselines destroys the visual anchor.
MUST
- Keep row heights strictly synchronized across all three columns so eyes can scan horizontally.
- Elevate the middle column using both negative margin (-16px vertical offset) and drop shadow.
- Highlight the 'vs.' token in the headline using accent cobalt #4361EE.
- Use pastel green rounded icon badges solely within the central proprietary column.
AVOID
- Do not add heavy shadows or saturated fills to the outer competitor columns.
- Never desynchronize row vertical spacing; misaligned items destroy the comparative narrative.
- Avoid colored pills or green accents in competitor columns.
- Do not remove the vertical overhang of the center card; it creates the focal depth hierarchy.
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 中尝试 
