类型：区块 · 收录：2026-10-26 23:39:15 · 源码：会员可见
# Prompt: Fundora fintech hero ("Emerald Vault")
Build a single-file, one-screen **landing hero for a fictional AI-powered personal banking app, Fundora**. Use plain HTML, CSS and vanilla JS, with no framework and no build step. The look is near-black and cinematic, lit from above by soft emerald spotlights. A large centred gradient headline sits over a faint grid, and a row of three glassy finance widgets runs across the bottom.
## Scale
- **Units:** everything is built on a 1458×985 reference canvas with a unit `--p = min(100vw/1458, max(100dvh/985, .62px))`.
- **Page:** a centred column `1458p` wide and at least `985p` tall, padded `93p` right, `98p` left and `43p` bottom.
## Colour and type
- **Font:** **Urbanist** 300/400/500/600, self-hosted woff2.
- **Colours:**
- background `#010101`, ink `#FFFFFF`, muted text `#B3B3B3`
- nav links pale mint `#B3D0C2`
- emerald accents from `#2CC27D` to `#42F09E`, with deep greens `#1F4D37`–`#0E3A27`
## Background effects (CSS only)
- **Spotlights:** seven soft emerald spotlight beams fall from the top edge. Each is a tall rotated rectangle with a green-to-transparent gradient and a 8–22p blur:
- two on the left at about 33°
- three in the centre at roughly −9° to 12°
- two on the right at about −24° to −30°
- **Grid:** a faint `94p` grid of 1px white lines at 7.5% sits behind the content, inside a `1035×940p` box that fades out towards its edges.
## Layout
- **Nav (top):**
- left: the white "//" double-slash logo mark and "Fundora" (Urbanist 500)
- centre: links "Home · About · Service · Data · FAQ", with Home in white
- right: "Sign in" as text, and "Get Started" as a pill with a deep green fill and a thin emerald border
- **Badge:** a small pill reading "✦ AI Powered System".
- **Headline:** "Navigate Your Financial Future / with Confidence", about `64p`, light weight (300–400), with a gradient from mint `#5EE6A8` to white to soft grey on the first line.
- **Subline:** "Invest wisely for tomorrow while making every financial / decision count today." in muted grey.
- **Buttons:**
- **"Create an account":** a primary pill with an emerald gradient fill and an emerald ring.
- **"Book a demo":** a ghost pill with a thin white border.
## Widget row (three cards side by side)
1. **Virtual card:** dark glass with a 1px light border.
- a white asterisk logo top-left
- a "Virtual" chip and "1208" at the bottom
- two overlapping grey glass circles bottom-right (a generic card-network mark with no name)
2. **Converter:**
- "From" above an input row "$50,00.00", with a round US flag and "USD ⌄"
- a round emerald swap button with two arrows
- "Amount you will receive" above "JD78,557.92", with a Mexican flag and "MXN ⌄"
3. **Balance card:** dark at the top, fading into a bright emerald glow at the bottom.
- "Personal . USD", then a big "$ 140,000" with an eye toggle
- an "All Account" pill
- "Add" and "Send" pills, each with a wallet icon
## Motion
- **Entrance:** CSS keyframes, about 2.4s, gated by an `entrance-running` class.
- The brand and nav settle in, then the badge.
- The headline rises out of a blur, followed by the subline and the two buttons.
- The three cards rise in one after another.
- **Interactions:**
- The swap button rotates 180° on click.
- The eye button hides and shows the balance.
- The menu becomes a burger panel under 663px (Escape and clicking outside close it).
- **Reduced motion:** no entrance.
## Responsive
- **Tablet and phone:** the headline wraps, and the widgets stack into one column in the order converter, virtual card, balance card. The spotlights scale with the `--p` unit.
## Acceptance check (1440×960)
- The emerald spotlights glow from the top over the black page.
- The centred mint-to-white headline sits above two pills.
- Three widgets line up across the bottom, and the balance card glows emerald.
- **Content:** no real bank or card brand names.