类型：Site模板 · 收录：2026-10-26 23:38:40 · 源码：会员可见
# Prompt: Ledgely — AI money intelligence hero
Build a single-file, one-screen **landing hero for an AI personal-finance app**, **Ledgely**. Use plain HTML, CSS and vanilla JS, with no framework and no build step. The look is near-black with a large glowing product showcase: a dark laptop-style dashboard frame rises out of a soft halftone dot field lit by a warm orange glow on the left and a teal glow on the right.
## Scale
- **Units:** every length is in reference pixels of a 1421×1008 artboard, multiplied by `--u = min(100vw/1421, 100svh/1008)`.
- **Fill:** the composition always fills the viewport height. Extra width is covered by the full-bleed background, and extra height grows the showcase, so there are never empty bands.
## Type and colour
- **Fonts:** **Inter** 400/500/600 and **Inter Display** 400–600.
- **Colours:** page `#050505`; text white and `#E6E6E6`. The dashboard positive bars are `#00B39A` and the negative bars `#D04646`.
## Nav (64u, with a soft radial hairline under it)
- **Left:** a glossy grey squircle logo with a white lens, and "Ledgely" at 20u.
- **Centre:** links at 13u: Home (current), How it works, Budgets, Features, Testimonials, FAQs.
- **Right:** a dark outlined "Sign up" button.
## Hero (centred)
- **Headline:** two lines, each rising out of its own mask: "Spend Smarter with AI-" / "Powered Money Intelligence". Inter Display, tight tracking.
- **Subline:** two lines: "Track your spending, automate your savings, and manage your budget with" / "advanced AI — all in one seamless platform."
- **CTA:** a light pill "Start Free Trial ›".
## Showcase
- **Background:** a glow map and a halftone dot mask sit behind a rounded frame. The frame has an orange-to-teal gradient bezel lit along its top edge, and fades out into the page at the bottom.
- **Dashboard** (dark UI, `#111` to `#1A1A1A` panels with hairline borders):
- **Sidebar:** the logo, "MAIN MENU", then Dashboard (active), Accounts, Transactions, Analytics.
- **Header:** "Dashboard", a search field "Search anything...", a bell, and a balance pill "27169,85 USD".
- **Budget ticker row:** six pills, each a round glyph, a label and a value: Rent 1450 USD, Food 312 USD, Travel 96 USD, Dining 184 USD, Bills 128 USD, Saved 600 USD.
- **Balance panel:**
- "Total Balance $27.169,85 USD" with "Add funds" and "More" buttons.
- Two cards with a coloured side bar: "Savings Goal 8.450 of 12.000 / 70% reached" with an amber piggy glyph, and "Monthly Budget 2.340 of 3.200 / 860,00 USD left" with a ring gauge.
- **Cash Flow chart:**
- A dropdown, 7 Days / 30 Days / Custom tabs, and pairs of rounded bars (teal income, red spending).
- A dashed reference line with the tag "4.280,00".
- A tooltip "16 Jul 2026 · Income 4.280,00 · Spent 3.115,40 · Saved 600,00 · Net 564,60".
- **Transfer panel:** From "Checking : 4.210,00 USD" with an amount field and a Checking selector, "Available : 4.210,00 USD", a swap icon, To "Savings : 8.450,00 USD", "Fee 0,00 USD · instant", and a "Transfer now" button.
## Motion
- **Entrance:** one master Web Animations timeline with backwards fill. The stage and background never move.
- The nav line draws from the centre; the logo and links settle in from above.
- The headline lines rise out of their masks, then the subline and the CTA.
- The frame rises into the light; the dashboard fills in top to bottom as six layers.
- The chart bars wipe left to right, the reference line draws, and the tag and tooltip land last.
- **Reduced motion:** no entrance.
## Tablet and phone
- **Nav:** collapses into a burger menu.
- **Phone:** the headline wraps fluidly and the dashboard reflows into a single narrow column.
## Acceptance check (1440×960)
- The headline and CTA sit above the glowing orange/teal dashboard frame.
- The dashboard is about personal finance: budgets, savings, cash flow and transfers. Nothing in it is about crypto.
- No real brands.