Design a light-mode website section: scenic pastoral realism grounded by crisp geometric data cards and authoritative violet typography.
LAYOUT
The header sits top-pinned across a standard 1280px container width. The hero resolves into an asymmetric two-column split: left column houses an announcement pill, bold 3-line headline, supportive lead paragraph, dual CTA buttons, and a bottom social-proof chip. The right column is dominated by a tilted-feel floating data card displaying product capabilities, terminating cleanly with an organic sweeping curved white wave into the next section.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Base surface color below hero wave, secondary button fill, and dashboard card panel background
- #1E1B38 — Deep Indigo: High-contrast headings, main body copy, brand mark, and high-priority labels
- #6256CA — Electric Violet: Primary CTA button background, focal headline phrase, line chart series, and active states
- #ECEAFD — Tinted Periwinkle: Area fills under trend graph, metric card sub-panels, and announcement badge backgrounds
- #4B5565 — Slate Body: Supporting paragraph text, navigation links, graph axis tick marks, and sub-labels
- #10B981 — Positive Mint: Confidence metric text label, decreasing cost delta indicators, and positive status accents
- #EF4444 — Alert Coral: Upward trending cost driver tags indicating material price inflation
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Satoshi, DM Sans), weights 400/500/600/700/800. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 28px heading, 56px display. Tracking -0.03em at display, 0 at body. The type choice is modern, rational, and exceptionally crisp—closely aligned with Plus Jakarta Sans or geometric neo-grotesques. Heavy display weights communicate enterprise stability and authority, while wide aperture lowercase glyphs ensure instant legibility over complex photographic textures. Inter or Satoshi serve as seamless drop-in open-source replacements.
GEOMETRY & SPACING
Corner radii — cards 18px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created using real photographic atmospheric haze behind crisp flat vector surfaces. Floating UI cards cast large, highly diffused soft ambient shadows (blur 35px-50px at 6-8% black opacity) without hard outlines, letting them hover seamlessly above the terrain. Layering frosted glass tags (#FFFFFFB8 with backdrop-filter) anchors mid-tier metadata between the backdrop and foreground cards.
IMAGERY
Full-bleed outdoor nature photography capturing rolling golden-green agricultural hills under soft morning daylight with wildflower foregrounds. The photo metaphor represents clarity, vast horizons, and grounded reality for construction cost intelligence. Imagery containing urban skyscrapers, construction cranes, or heavy machinery is strictly avoided to preserve the serene, clear-headed atmosphere.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an ultra-clean, white SaaS analytics dashboard and crisp violet typography floating directly over a warm, pastoral landscape of rolling hills, capped by a convex bottom curve. To use it properly, keep the photo airy and desaturated beneath text regions, letting the dashboard feel like an instrument of clarity bringing an unruly landscape into focus.
MUST
- Retain the split-color headline structure: dark navy for problem statement, vivid violet for solution resolution.
- Use solid white backgrounds with soft, ambient drop shadows on floating dashboard mockups to maintain readability over photo backgrounds.
- Set small status pill badges to full 999px border-radius with 11px uppercase micro-typography.
- Maintain high contrast between headline copy and the background photo by ensuring the text sits over a light sky or misty hill region.
AVOID
- Do not place busy UI dashboard cards over high-contrast or dark areas of the photographic backdrop.
- Avoid harsh dark drop shadows; use diffuse multi-stop shadows with less than 10% opacity.
- Do not use generic stock technology images; the metaphor relies strictly on wide, open, sun-drenched horizon landscapes.
- Never apply gradients directly across the main headline text; keep color changes strictly token-based per line or phrase.
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 中尝试 
