Design a light-mode website section: crisp problem-to-solution diagnostic flow contrasting labor pain in rose with automated certainty in clinical cyan.
LAYOUT
The page follows a rigorous top-to-bottom, left-to-right narrative cadence. A centered category kicker and display headline anchor the top. Below, a two-column 45/55 split juxtaposes manual problems on the left against automated solutions on the right, linked by a directional advance chevron. The bottom row delivers quantitative metric cards followed by a centered advantage summary banner.
PALETTE (use these exact hex values)
- #f8fafc — Canvas Ice: Global background providing high contrast against pure white cards
- #ffffff — Pure Card: Primary surface for individual modular pain cards and solution containers
- #0f172a — Ink Slate: Dominant text color for primary headings, metric digits, and card titles
- #64748b — Subtle Charcoal: Body copy, subtitles, KPI labels, and secondary supporting descriptions
- #e11d48 — Problem Rose: Problem icons, problem label, and alert badges signifying manual inefficiency
- #fff1f2 — Problem Wash: Background tint for quote callout and problem circular icon badges
- #0284c7 — Solution Cyan: Active technology indicators, solution badges, metrics, and kicker text
- #e0f2fe — Solution Wash: Subtle circular background behind solution feature icons and metric symbols
- linear-gradient(90deg, #2563eb, #d946ef) — Dynamic Shift: Gradient fill applied across focal headline keywords for emotional punch
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Outfit), weights 400/500/600/700/800. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 24px heading, 38px display. Tracking -0.02em at display, 0 at body. The voice is authoritative, clinical, and reassuringly precise. Plus Jakarta Sans or Inter gives the UI a contemporary B2B SaaS feel while retaining the structural seriousness required for enterprise agri-tech hardware. Compact line heights (1.15 to 1.3) keep technical specs and headings sharp and punchy.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 999px. Spacing on a 8px unit, 20px gaps, 64px between sections, 1240px container, comfortable density.
DEPTH
Elevation is remarkably restrained. Cards sit upon the #f8fafc canvas with a slight 0 1px 3px rgba(0,0,0,0.04) shadow paired with a 1px #e2e8f0 border. Depth is communicated primarily through crisp layering—pure white surfaces lifting off the pale canvas—rather than dramatic blur radiuses.
IMAGERY
Imagery is functional, industrial, and high-fidelity, showing the actual hardware apparatus in operation with authentic blue diagnostic LEDs illuminating real organic subject matter on a conveyor belt. Stock lifestyle photography or abstract decorative 3D renders would completely break the technical credibility.
SIGNATURE DETAIL — the thing that makes this design itself
The strict chromatic polarization between manual failure (rose icon circles and pink quote wash) and technological mastery (cyan icon circles, live machine optics, and 4-column metric grid), physically united by an inline advance arrow button.
MUST
- Use distinct semantic color pairings: rose for friction/manual, cyan/blue for automation/accuracy.
- Enclose distinct problem items in isolated, identical 16px-radius white cards with 12px gaps.
- Anchor metrics with a circular icon badge aligned directly above the statistic value.
- Include the gradient highlight on the headline to immediately telegraph transformation.
AVOID
- Do not use dark or heavily saturated backgrounds; the canvas must feel clean and clinical.
- Avoid mixing rose accents into the solution column or blue into the problem column.
- Do not omit the circular icon badges behind the vector symbols.
- Never use serif or decorative display typography in this technical context.
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. Try in DraPub 
