Design a light-mode website section: crystalline particle waves drifting over deep midnight trenches, balancing ethereal glow with crisp enterprise utility.
LAYOUT
The component is split into two stacked macro-sections. The upper CTA is center-aligned, opening with a pill tag, cascading into a 52px header, two-line paragraph, dual CTA buttons, and terminating in a three-column trust badge row. The lower macro-section is a six-zone dark footer: brand summary with newsletter on the far left, four link stacks in the center, and a dedicated contact box pinned to the right edge.
PALETTE (use these exact hex values)
- #f8faff — Canvas Light: Top-level background for the CTA section, infused with subtle lavender-blue radiance.
- #0a1120 — Footer Abyss: Deep navy base spanning the entire multi-column footer zone.
- #111b2f — Footer Card Surface: Subtly elevated container for the support contact box in footer.
- #2b5ce6 — Brand Blue: Primary action button background, highlighted keyword, and active brand links.
- #1c3faa — Brand Blue Dark: Gradient stop for CTA button bottom bevel and hovered state.
- #ebf0fe — Pill Badge Tint: Background fill for the upper uppercase kicker pill.
- #0f172a — Text Display Dark: High-contrast dark slate used for the primary CTA heading and trust badges.
- #50607a — Text Secondary Muted: Descriptive copy directly beneath the main hero CTA heading.
- #ffffff — Text Footer Heading: Brand mark, footer column categories, and primary card titles.
- #8493a8 — Text Footer Links: Footer navigation anchors, copyright line, and disclaimers.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,Geist,system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px subheading, 16px body-lg, 16px heading, 52px display. Tracking -0.03em at display, -0.01em at body, +0.06em on kicker. Inter (or modern neutral grotesque) provides an engineered, clinical authority without appearing cold or brutalist. Its tight tracking at larger sizes keeps the display headline compact and modern, while generous letter-spacing on the pill kicker reinforces technical sophistication. Substitution with Plus Jakarta Sans is suitable if a slightly rounder, geometric voice is desired.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Elevation is reserved purely for interactive depth on light canvases: the primary CTA button projects a saturated blue diffused shadow (rgba(43,92,230,0.35)). On the dark footer plane, elevation transitions entirely to subtle surface brightness stepping (#0a1120 base to #111b2f card) with razor-thin 1px border outlines (#1d2c47) rather than cast shadows.
IMAGERY
Abstract technological flows consisting of millions of minute glowing cyan and periwinkle dots arranged into sinuous wavy curves. The particles emit faint radial light flares at crests, evoking digital water and fiber-optic precision. Photographic imagery or harsh polygonal 3D models would disrupt the ambient flow state.
SIGNATURE DETAIL — the thing that makes this design itself
The horizontal particle wave horizon: an ethereal, fiber-optic cyan/blue dot-mesh that ripples across the light CTA canvas, suddenly terminating into an unyielding dark midnight footer slab. This deliberate juxtaposition makes enterprise utility feel luminous and high-tech.
MUST
- Strictly confine particle light waves to the top half of the section behind CTA copy.
- Highlight key verbs or terminal words in headings with #2b5ce6 blue.
- Maintain a stark, sharp horizontal edge dividing the light CTA canvas and the navy footer.
- Use 13px and 14px text sizes with high leading (1.5-1.6) for dark footer navigation links.
AVOID
- Do not bleed the light blue particle graphic down across the dark footer boundary.
- Do not use high-contrast pure white text for footer body or secondary links; stick to #8493a8.
- Avoid fully rounded capsule pills for primary action buttons; use exact 8px corner radius.
- Do not place floating card elevations or heavy drop shadows inside the dark footer area.
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 中尝试 
