Design a light-mode website section: luminous deep-indigo cta card suspended over a pristine, high-density b2b directory footer.
LAYOUT
The composition follows a top-down conversion funnel: an elevated, centered dark card (~1200px wide) with centered text hierarchy and dual action buttons. Directly below, separated by 64px, is a 6-part footer grid consisting of: brand identity column (left, ~220px), four balanced link columns (~140px each), and a bordered newsletter column on the right (~260px). The layout resolves at the base with a full-width legal bar containing copyright left and four inline legal links right.
PALETTE (use these exact hex values)
- #f3f5f9 — Canvas Background: Outer background wrapping the floating CTA and setting off the footer zone
- #0c1021 — Midnight Card Base: Core background for the rounded floating CTA banner
- #ffffff — Footer Surface: Base clean surface for the expanded multi-column footer
- linear-gradient(135deg, #8168f7 0%, #997cfc 100%) — Accent Gradient Purple: Primary action button background on both the dark CTA card and email subscription
- #c8b9fe — Luminous Heading Lilac: Sub-headline highlight text on the dark CTA card
- #1d2545 — Card Subtle Border: Fine structural stroke around the dark CTA container and badge
- #111827 — Footer Headings: High-contrast column headers and brand wordmark in footer
- #4b5563 — Footer Body Muted: Standard link text, helper paragraphs, and descriptive text
- #e5e7eb — Footer Hairline Border: Divider lines separating the newsletter block and the bottom copyright strip
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Geist, DM Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 38px heading-lg. Tracking -0.02em at display, 0.05em at micro caps. Clean, engineered, and authoritative. Plus Jakarta Sans conveys industrial modernism through tall x-heights and crisp geometric terminals that read flawlessly at both 38px display size and 11px micro-caps. For implementation, Inter or Geist are seamless drop-in open-source substitutes.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is selectively concentrated entirely on the dark CTA card to lift it off the light page surface via an ambient dark-indigo shadow (0 20px 40px -10px rgba(12, 16, 33, 0.3)). Inside the card, the primary button radiates an ethereal violet glow (0 8px 24px rgba(129, 104, 247, 0.4)). The light footer beneath is strictly flat, relying on hairline borders (#e5e7eb) rather than drop shadows for separation.
IMAGERY
No photographic imagery is present; the visual texture relies exclusively on mathematical vector linework—specifically faint, thin concentric circular arcs traced in low-opacity midnight indigo (#1a2244) across the right half of the card. Vector iconography consists of ultra-simple geometric glyphs for LinkedIn, X, and YouTube inside rounded square chips.
SIGNATURE DETAIL — the thing that makes this design itself
The sudden, intentional collision between a theatrical dark-indigo conversion card with luminous purple accents and a matter-of-fact, razor-clean white enterprise link directory directly below it. It creates maximum drama for the final pitch while leaving the functional footer fully legible and accessible.
MUST
- Keep the CTA card floating with 20px border radius rather than stretching full-bleed edge-to-edge.
- Use uppercase tracking (+0.08em) strictly on 11px category headers and badges.
- Maintain the two-tone headline technique (white followed by lilac) to create reading rhythm.
- Use a single crisp vertical border (#e5e7eb) to partition the newsletter column from directory links.
AVOID
- Do not invert the footer to dark; the high-contrast break between dark card and white footer is critical.
- Never use harsh drop shadows on the light footer elements; elevation belongs only to the dark CTA card.
- Do not remove the generous 56px card padding, which keeps the headline feeling spacious.
- Never replace the purple glow on the primary button with a harsh black shadow.
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 中尝试 
