Design a light-mode website section: crisp white executive workflow grounded in an electric bioluminescent digital landscape.
LAYOUT
Asymmetric two-column split layout across a 1280px container. The left 58% column holds the category pill, a massive two-line headline, two-sentence descriptive paragraph, dual CTA buttons, and a row of three feature value props. The right 42% contains a singular high-fidelity UI card mock. The bottom of the hero dissolves into a full-bleed panoramic light wave containing centered trust metrics.
PALETTE (use these exact hex values)
- #ffffff — Canvas White: Pure white background for the primary header and hero content area.
- #0a1329 — Midnight Ink: Deep near-black navy for primary headlines, logos, and heavy contrast text.
- #4a5568 — Slate Body: Neutral mid-tone slate used for subheadings, descriptive body copy, and secondary labels.
- #1a5cff — Electric Royal: High-energy blue for active headline phrases, primary CTA button backgrounds, and send buttons.
- #0b1528 — Navy Button Fill: Deep rich navy used for the top navigation primary CTA pill.
- #e2e8f0 — Border Grey: Delicate keyline borders for cards, ghost buttons, and input containers.
- #e6f8f3 — Mint Tint: Light green-teal tinted background for the AI feature icon tile.
- #eef4ff — Sky Tint: Light periwinkle background for integration icon tiles and pill tags.
- #fff3e6 — Amber Tint: Warm peach-orange background for enterprise/security feature icon tiles.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 68px display. Tracking -0.03em at display, 0.05em at micro badges. Clean, engineered, and contemporary sans-serif with geometric precision (matching Inter or Plus Jakarta Sans). It balances approachable readability with authoritative executive punch through heavy display weights and tight negative tracking (-0.035em).
GEOMETRY & SPACING
Corner radii — cards 16px, links 9999px, inputs 12px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, airy density.
DEPTH
Depth is created strictly through an overlapping layered plane approach. The white floating mock-up card sits proud of both the white page canvas and the glowing particle landscape using a gentle, wide-spread drop shadow: box-shadow: 0 24px 48px -12px rgba(10, 25, 60, 0.12).
IMAGERY
The imagery is a 3D computational fiber-optic topography resembling rolling hills made of light trails, illuminated in cyan, deep navy, and electric emerald. It evokes neural pathways and high-speed data flow. Flat vector illustrations, stock photography, or cartoonish graphics would completely break the enterprise-tech atmosphere.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-plane split: a clinic-clean white software presentation on top that gracefully descends into an immersive bioluminescent landscape of data highways, with the UI product card bridging both worlds.
MUST
- Keep the upper canvas pristine pure white (#ffffff) to ensure crisp typographic readability.
- Split the main headline into two contrasting lines: line 1 in dark slate (#0a1329), line 2 in vibrant blue (#1a5cff).
- Use pill-shaped 9999px radii only for top-bar kickers, tags, and the primary nav CTA.
- Ensure the floating mockup card cleanly overlaps the transition between white canvas and the dark bioluminescent graphic.
AVOID
- Do not apply heavy dark borders to cards; stick to light translucent #e2e8f0 or rgba(255,255,255,0.2).
- Do not let the glowing background graphic creep above the lower third of the headline area.
- Never make the primary CTA button pill-shaped when the header CTA is pill-shaped—maintain geometric variety (10px vs 9999px).
- Do not use saturated, neon backgrounds for feature icon tiles.
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 中尝试 
