Coinhaven Crypto Landing

Explain a digital-asset payments or treasury product through a dashboard, transaction examples and pricing that visitors can inspect. Coinhaven Crypto Landing uses a white square-grid stage, medium-weight Instrument Sans headlines, rounded surfaces and deep cyan reserved for data. Its balances, assets, payment states and customer stories are fictional reference material; adapt them to confirmed product facts rather than treating the interface as a connected financial service.

What you get

  • A complete marketing family: home, shared-state pricing page, company/careers, journal index and full article views, changelog, sales contact, signup, sign-in, privacy, terms and not-found. Home progresses from the interactive treasury dashboard and wordmarks through payment examples, settlement, searchable assets, treasury controls, customer proof, developer code, pricing/calculator, FAQ and an ink closing action.
  • Editable product UI made in HTML/CSS/SVG: chart-range tabs with pointer/arrow-key readout, holdings, checkout asset selection and local pay state, invoice status walk, copyable payment-link panel, weekday sweep illustration, payout approval state and a replayable settlement track with ledger entry. These demonstrations do not connect a wallet, process funds, query a bank or execute a transaction.
  • A pricing display with two to four plan cards, monthly/yearly control, grouped feature comparison and volume-driven fee estimate synchronized between home and pricing. An asset directory supplies search, type filters, counts and a designed empty state; journal, changelog and careers add their own filters/content states. The calculator has example-specific logic that must be rewritten with actual fees, rather than trusted merely because a plan card was renamed.
  • Light-first and full dark tokens, Instrument Sans with IBM Plex Mono for numbers/IDs/code, one deep-cyan interface accent, restrained semantic status colors and geometric coin symbols paired with names/tickers. The centered hero keeps a 64px desktop/38px phone headline, two actions and a 920px dashboard card over a square grid. It scales a fixed dashboard composition, so phone text/click targets need particular inspection.
  • One adapted self-contained HTML file by default, with photos and three font files embedded for offline viewing. The package supplies the template, style/section/image/motion/icon guides, fifteen example photo files, asset inliner and static validator. An existing/requested Next.js, React, Vue, Svelte or Astro project instead receives real routes, components and data modules in that stack. Forms remain local simulations until backend services are integrated.

Before you choose

Make every movement of money understandable without implying it happened. Tie the display to confirmed asset and fee rules, label local examples, and verify numeric relationships across plans, calculator and ledger. Real processing, approval authority, custody and customer evidence need independent service/data confirmation beyond the marketing interface.

Good fit

  • A stablecoin, payment, treasury or fintech team has clear product capabilities and wants to explain the movement and management of funds visually.
  • A founder needs plans, fees, assets, developer examples, company information and sales/signup paths to form one coherent launch site.
  • A developer wants an offline prototype for review or a faithful framework implementation, while keeping payment processing and account services as explicit integration work.

Not for

  • A production payment gateway, custody system, exchange, banking connection or authenticated treasury account delivered by the template itself.
  • A ready CMS or multilingual publishing system. Articles, careers and changelog are local content/data, and font subsets need adjustment for additional characters.
  • A site that inherits fictional coin, customer or compliance evidence as real. Official marks require appropriate use rights, and financial/security claims require confirmed facts.

How to use

You say/coinhaven-crypto-landing Build the Coinhaven site: digital-asset payments for growing teams, with checkout, invoicing and same-day payouts.
  1. Provide product name, audience, promise, supported assets/networks, payout currencies/timing, available payment surfaces, plan tiers/fees and primary CTA. Add confirmed custody/security facts, developer interfaces, sales details, offices and approved customer material. Draft gaps can support review but must be listed as “needs your real data”; do not invent licences, audits, insurance, reserve attestations, custody arrangements or uptime.

  2. Choose output from the project. Without one, adapt the standalone template and local photos into one offline HTML file. In an existing/requested framework, inspect its conventions and build real routes, reusable sections and typed data without pasting a whole HTML page into the application. Use local Instrument Sans/IBM Plex Mono, SVG coin components and suitable image handling; preserve the same visual and interaction structure.

  3. Map the product to the demonstration before rewriting copy. Merchant payments can use checkout/invoices/links/sweeps; payroll may need batch uploads, recipient onboarding and payout runs; treasury may need balances/approvals/allowlists/reports. These are adaptation directions, not extra production systems supplied. Use the product’s actual objects and states consistently across dashboard, flow, directory, code examples and fees.

  4. Preserve the quiet hero and section sequence: one medium headline, short subtitle, two consistent actions and the dashboard over a grid. Keep ink primary actions, deep cyan for data/selection, rounded white surfaces and complete dark styling. Product panels stay in code; photography belongs to people, company and editorial context. Inspect the scaled fixed-size hero at phone widths instead of assuming the desktop controls remain comfortably usable.

  5. Replace all fictional asset names/tickers together with rates, network fees, holdings, allocation colors, sprite symbols and directory copy. Generated geometric marks are illustrative, not official token or bank logos. Use authorized official marks only in appropriate contexts. Verify that holdings sum to balance, allocation widths match, and each ledger’s gross less fees equals net; local numeric consistency is necessary but does not establish a real transaction.

  6. Keep count-dependent content aligned: plan grid and comparison values for two to four tiers, asset/network totals throughout copy, job filters from departments, article index/related entries and testimonial layouts. A recurring-fee product can keep yearly pricing only with approved rates/discounts; pure usage pricing needs an explicitly named estimate view or removal of billing controls, not an invented subscription saving.

  7. Rewrite and test the fee logic with the business’s actual rules. The reference calculator separately hard-codes Starter at 1% of volume, Growth at a 249/199 platform figure plus 0.5%, Scale at 0.2% and fixed recommendation thresholds, plus a 2.9% card-cost comparison. Changing PLANS alone does not update those assumptions. Totals remain monthly estimates under both cadence selections. Confirm network fees, exclusions, currency and comparison claims rather than presenting sample numbers as market facts.

  8. Treat transaction widgets as examples. Checkout changes quote labels from fixed rates and shows a timer, then a local “paid” state; the invoice lifecycle advances on a timer, and settlement/payout controls animate predetermined states. The QR-like graphic is a seeded decorative pattern, not an encoded payment destination. Replace it with a tested payload only when real links/payments are integrated. No display state proves receipt, screening, conversion, custody or release of funds.

  9. Plan photographs by role with one natural documentary direction. Nine avatars/team/finance-desk/port pictures may be disclosed stand-ins where relevant; replace the amplifier-workshop story and any changed-topic studio/vault covers. Real customers/team members need approved photographs. New image-tool work may cost extra; without a tool, use supplied photos or sized labelled gaps and identify what is missing. A portrait or vault photo cannot substantiate customer or custody claims.

  10. Replace the full sample identity: metadata, company/workspace/merchant, holdings, invoice reminder, payment URL, sweep bank, approvers, customer story, offices, contact/legal text, announcement and developer snippets. Keep the illustrative-customer disclosure until actual names, quotes and figures are approved. Remove or qualify all sample attestation, licence, custodian, audit, insurance and SLA wording; the validator only warns about selected phrases.

  11. Exercise all navigation, chart ranges and readouts, asset keyboard selection, invoice/flow replay, copy controls, directory no-results, approval state, code tabs, billing/calculator synchronization, comparison, FAQ, journal articles, changelog and career filters. Test form errors, loading, success and reset. Signup/sign-in/contact/newsletter handlers use timers that claim sent links or subscriptions, while passkey only simulates an unavailable path; make demos explicit until real services confirm results.

  12. Use Node.js 18+ and initial internet access to embed Instrument Sans plus two IBM Plex Mono weights with local images. Target at most 5 MB and stay below 8 MB, checking the inliner’s exit status because a file can be written before missing assets trigger failure. Latin font subsets may need ISO currency codes or additional glyph files for new copy. Validate the HTML, hosted-local-assets variant or framework source directory as appropriate, then run the project’s build/type/lint checks where relevant.

  13. Review every page and key flow at 390, 768, 1024, 1440 and 1920px in both themes, also checking 360px overflow. Test focus/Escape, reduced motion, route back/forward, empty states and the standalone scripts-only sandbox. Directory validation scans text/style markers; it does not prove route rendering, calculation correctness, settlement or authentication. Deliver the output path, actual checks and every unresolved fact, image or service connection, then request changes in ordinary language.

Requirements and costs

You bring
Product name, one-line promise, supported assets and networks, payout currencies and timing · Pricing tiers and fees, the security and custody facts you can confirm, and your primary call to action
Dependencies
Node.js 18 or newer on your agent's machine, to run the bundled script that builds the single offline file · Internet access while the file is built, so the fonts can be downloaded once and embedded · Optional: an image generation tool in your agent for the customer story, testimonial, team and journal photos
Outside costs
Photos for the customer story, testimonials, team and journal are generated with your agent's own image tool, which may incur that tool's usage charges. Without one, your own photos or labelled placeholder slots are used, and the agent lists which images are still missing.
Publisher testing
v1.0.5 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT

FAQ

User reviews

—0 reviews

Select a star to share your experience.

No reviews yet. Ratings appear once readers share real experiences.

Similar Skills

View all skills