The live demo was built from exactly this text — nothing added.

# Crypto Wallet Landing Page

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
Build a polished single-page landing site for [BRAND], an invented [PRODUCT_TYPE] for [AUDIENCE]. Make the product tangible in the first screen through a large, layered CSS phone and browser-extension composition, not photography or typography alone. Use only fictional network identities, assets, balances and addresses; every product interaction is a local interface demonstration.

- Audience: The site speaks to [AUDIENCE], with secondary appeal to product founders and developers evaluating a wallet concept. Assume visitors may understand digital assets but do not want dense protocol jargon.
- Goal: Explain self-custody in plain language, show the phone and browser experiences, make security controls understandable, and guide visitors to a platform-specific demo download without implying that a real wallet service exists.
- Tone: Calm, exact and reassuring without making guarantees. Use short sentences, concrete interface labels and transparent demo disclosures. Avoid trading language, hype, fear and technical showing-off.

## Stack
- Framework: Vite 6 + React 19 + TypeScript 5.7
- Styling: Tailwind CSS 4
- Libraries: Vite 6 (MIT), React 19 + React DOM 19 (MIT), TypeScript 5.7 (Apache-2.0), Tailwind CSS 4 + @tailwindcss/vite 4 (MIT), Motion 12 (motion/react) (MIT), lucide-react (ISC), @fontsource-variable/space-grotesk (OFL-1.1), @fontsource-variable/manrope (OFL-1.1), @fontsource/ibm-plex-mono (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Set the npm build script to tsc -b && vite build. Configure vite.config.ts with base: './' and build.sourcemap: false; the deployable output is only dist/.
  - Use Tailwind CSS 4 through @tailwindcss/vite. Define the palette, font families, spacing tokens, shadows and keyframes in src/index.css; do not add a second styling system.
  - Install and import Motion from motion/react for entrance and interface transitions, and lucide-react for generic interface icons only. Do not add an animation, carousel, icon or component library beyond this stack.
  - Self-host Space Grotesk Variable, Manrope Variable and IBM Plex Mono through the listed Fontsource packages. Import only the required subsets and weights from local node_modules; no font CDN.
  - Keep every headline, paragraph, navigation label, button label, network name, balance, address, FAQ and sample datum in src/content.ts, keyed by section. Derive all default product copy from BRAND, PRODUCT_TYPE, AUDIENCE, PRIMARY_CTA and NETWORK_NAMES, and rewrite it when those values change.
  - Derive a lowercase hyphenated brand slug in code for demo hostnames and downloaded checklist filenames. Use the reserved .example suffix for any displayed demo hostname and never navigate to it.
  - Divide the implementation into Header, HeroDevices, NetworkExplorer, ProductSurfaceDemo, SecurityExplorer, SetupSteps, DownloadPanel, FaqAccordion and Footer components. Keep device screens and original network symbols as local React/HTML/CSS/inline SVG, not image files.
  - Use React state only for demo interactions. No persistence is required; reset sample UI state on reload. Provide semantic buttons, visible keyboard focus, aria-pressed or aria-selected states, labeled icon buttons and an Escape-closeable mobile menu and dialog.

## Variables
- [BRAND] — Invented wallet brand (default: "Velmora"). Use a short invented name with no real wallet or financial brand. Update the wordmark, copy, demo hostname and checklist filename.
- [PRODUCT_TYPE] — Product description (default: "self-custody crypto wallet"). A short lowercase phrase that can follow the brand name in a sentence.
- [AUDIENCE] — Primary audience (default: "curious collectors and everyday crypto users"). A plain-language audience phrase; rewrite feature emphasis and examples for this group.
- [PRIMARY_CTA] — Primary action label (default: "Get the wallet"). A concise button label used in the header and hero; it scrolls to the local download panel.
- [NETWORK_NAMES] — Six fictional network names (default: "Nivora, Elarin, Tessera, Kavio, Orren, Mirelle"). Provide exactly six comma-separated invented names in display order. Generate original geometric marks for them; never substitute real network names or logos.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/crypto-wallet-landing-page in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

## Design
### Colors
- Porcelain `#F3F1EB` — Main page canvas and quiet negative space.
- Paper `#FCFBF8` — Cards, device screens, navigation and raised surfaces.
- Ink `#121326` — Primary text, dark buttons and high-contrast details.
- Slate `#626577` — Secondary copy and metadata; never use for text smaller than 14px on tinted backgrounds.
- Line `#D9D7E1` — One-pixel borders, grid rules and inactive controls.
- Midnight `#191A30` — Security section, browser chrome and dark device details.
- Iris `#6C4FE0` — Primary accent for selected states, keylines, links and small highlights; use white text on solid Iris.
- Iris Mist `#E9E3FF` — Soft accent fields, icon containers and the download-panel halo.

### Typography
- Display and headings: Space Grotesk Variable (OFL), weights 500/600/700
- Body and interface: Manrope Variable (OFL), weights 400/500/600/700
- Numbers and technical labels: IBM Plex Mono (OFL), weights 400/500

### Layout & motion
- Spacing: Use an 8px base grid and a 12-column desktop layout inside a 1280px max-width container with 32px side gutters. Header height is 76px. Standard sections have 112px vertical padding; hero has 72px top and 88px bottom. At 390px use 20px gutters, 68px section padding, 24px card padding and a single-column flow. Keep body measure at 58–66 characters and headline measure at 11–13 characters per line where practical.
- Radius: Use 999px pills for buttons and small tags, 10px for inputs and compact controls, 16px for standard cards, 28px for feature panels, 20px for the browser frame and 38px for the phone body. Borders are 1px solid Line. Device shadow: 0 32px 80px rgba(18,19,38,0.16), 0 8px 24px rgba(18,19,38,0.08); ordinary cards have no heavy shadow.
- Motion: On initial load, stagger hero eyebrow, headline, body and actions by 70ms with opacity 0→1 and y 16→0 over 480ms. Bring the browser from y 24 and rotate -2deg and the phone from y 36 and rotate 4deg into their final positions over 700ms; play once only.
- Motion: Reveal each section's heading and direct children with IntersectionObserver and Motion at 20% visibility, using y 18→0, opacity 0→1, 480ms duration and 60ms child stagger. Never hide content when JavaScript is unavailable.
- Motion: Switch phone/browser and network/security selections with 220ms opacity and 8px vertical transitions. Preserve component dimensions so the page does not jump. Accordions animate height over 240ms and chevrons rotate 180 degrees.
- Motion: On capable pointers only, let the hero device group translate at most 6px toward the pointer with a 250ms ease-out return. Do not add continuous floating, auto-rotating carousels, marquees or scroll-jacking.
- Motion: Under prefers-reduced-motion: reduce, disable pointer response, smooth scrolling, entrance transforms and animated transitions; show all content immediately and preserve every interaction.
- Imagery: Use no raster images. The visual anchor is a meticulously layered phone and browser-extension interface drawn with HTML, CSS and inline SVG. Use subtle CSS grid lines, two blurred Iris Mist radial fields and soft shadows for depth. Network identities are six original geometric SVG compositions, not adapted token logos. Generic Lucide icons support actions such as copy, lock, check, arrow and download; they never stand in for network or platform logos.

## Pages & Sections
### Wallet landing page (`index.html`)
1. **Header and navigation** — Create an original [BRAND] wordmark: a 28px square containing four rounded corner strokes around a small centered diamond, followed by the brand in Space Grotesk 600. Default navigation is Wallet, Networks, Security and How it works, linking to ./index.html#wallet, ./index.html#networks, ./index.html#security and ./index.html#how-it-works. The right button uses [PRIMARY_CTA], default 'Get the wallet', and links to ./index.html#download. Include a small 'DEMO' mono label beside the wordmark.
   Layout: Use a sticky top bar with a Paper/92 background, bottom Line border and subtle backdrop blur. Align the 1280px container horizontally. Desktop shows all links and the CTA; mobile shows wordmark, CTA as a compact arrow button with accessible label, and a menu button. The mobile menu opens a full-width Paper panel beneath the header with the four links stacked at 48px row heights; close it after selection, on Escape and on outside click.
   Motion: The header background becomes more opaque after 16px of scroll. Mobile links fade and translate down 6px over 180ms; no animated sticky-header resizing.
2. **Hero with dual device mockups** — Eyebrow: 'SELF-CUSTODY, MADE LEGIBLE'. H1: 'Your keys. Your assets. Clear by design.' Default body: 'Velmora is a self-custody crypto wallet for curious collectors and everyday crypto users. See what you hold, understand every request, and move between phone and browser without losing context.' Use [PRIMARY_CTA] for the solid Ink primary button and 'Explore the demo' for the text-and-arrow secondary button, targeting ./index.html#download and ./index.html#wallet. Beneath, place the note 'Concept demo · No real accounts, assets, or transactions'. In the phone, show 'Demo portfolio', '$12,480.62', tabs Overview and Activity, and three rows for the first three [NETWORK_NAMES] with 42.80, 18.20 and 6.40 units. Activity contains 'Added to vault', 'Received on Nivora' and 'Recovery check complete', with no dates. In the extension window, use the derived default host app.velmora.example, a 'Review request' panel from gallery.example, action 'Show 2 collectibles', detail 'No asset transfer', and buttons Dismiss and Approve demo. Approving changes only local state and shows 'Demo approved — nothing was signed'; Dismiss resets the panel. Add 'Demo address demo:7A42…19F2' with a working copy button and local 'Fictional address copied' toast.
   Layout: Desktop hero is a 5/7-column split, vertically centered, minimum 700px high including its padding. Left H1 is 68px/0.98 with a maximum width of 570px; body is 18px/1.65 and actions sit 32px below. Right visual stage is approximately 650×610px. Draw a 500×350px browser window at the rear upper-right and a 250×520px phone at front lower-left, overlapping by 70px. The phone rotates -4deg and the browser +2deg. Include visible browser traffic-light shapes without copying an operating system, a detailed extension popup, phone status bar, balance, asset rows and bottom navigation. At 390px stack text above a 350×410px stage, scale devices proportionally, preserve all critical screen labels and keep both CTAs full-width. No horizontal overflow or text hidden behind the phone.
   Motion: Use the specified hero entrance and subtle pointer depth. Overview/Activity and approval states crossfade in 180ms. The copy toast enters from y 8 and disappears after 2.4 seconds; it remains accessible through a polite live region.
3. **Supported network explorer** — Eyebrow: 'SUPPORTED NETWORKS'. H2: 'One calm view across your networks.' Body: 'Explore six fictional networks through original symbols and a single consistent asset hierarchy.' Parse exactly six names from [NETWORK_NAMES]. Assign use descriptions in order: 'Everyday transfers', 'Collectibles and media', 'Identity and credentials', 'Apps and games', 'Shared accounts', 'Experimental assets'. Default selected detail: 'Nivora · Everyday transfers · Demo support only.' Selecting another network updates this detail strip to the corresponding name and use. Include the visible footnote 'All network names and marks are invented sample content.'
   Layout: Give this section id=networks and a Paper background with top and bottom Line borders. Place heading and body in a 5/7 split above a six-column network grid. Each 176×144px button contains a 44px original SVG mark, network name and two-digit index 01–06. Draw the six marks from distinct primitives: clipped hexagon with dot, split circle, crossing arcs, stepped square, tilted orbit and three rising bars. Use Ink and Iris only. Below the grid, a full-width Iris Mist detail strip holds the selected description and a generic arrow icon. Mobile uses two columns with 16px gaps and a detail strip beneath; do not make a horizontal carousel.
   Motion: Selected network tiles gain an Iris border and a 44px icon rotation of no more than 6deg over 180ms. The detail text crossfades without changing strip height.
4. **Phone and browser product tour** — Eyebrow: 'PHONE + BROWSER'. H2: 'The same clear wallet, wherever you open it.' Default body: 'Check a balance on your phone. Review a request in your browser. Velmora keeps the same plain-language hierarchy in both.' A segmented control labeled Mobile wallet and Browser extension switches the detailed mockup and its supporting copy. Mobile copy: 'Balances without the noise' — 'One total, a short asset list, and no flashing prices.' Browser copy: 'Approvals you can read' — 'See the requesting site, requested permissions, and what stays untouched.' Shared bottom note: 'A shared visual language' — 'The same networks, labels, and controls carry across both views.' Use the same sample data established in the hero; do not introduce prices or return percentages.
   Layout: Set id=wallet on this Porcelain section. Use a 5/7 grid: left contains eyebrow, H2 at 48px, body, segmented control and the active feature copy; right contains a 620×500px Midnight stage with fine grid lines and one large device. Mobile wallet shows the phone upright at 250×500px; Browser extension shows a 540×360px browser with the request panel docked right. Switching views never duplicates both devices here. On mobile, put control and feature copy first, then a 350×390px stage scaled to fit. All controls remain actual buttons with selected states.
   Motion: Crossfade the active device and copy over 220ms with a maximum 8px shift. Keep the stage fixed in size and respect reduced motion.
5. **Security explorer** — Eyebrow: 'SECURITY, IN PLAIN LANGUAGE'. H2: 'Self-custody, explained without fine print.' Intro: 'Four interface patterns make the fictional Velmora experience easier to inspect.' Feature buttons and exact copy: 'Local lock' — 'Set an auto-lock timer in the demo and see the vault state change instantly.' 'Readable requests' — 'Permissions appear before any approval control; no blind-signing pattern.' 'Recovery checklist' — 'A three-item checklist explains offline backups without asking for a recovery phrase.' 'Address controls' — 'Copy a fictional demo address and confirm it with a clear, local toast.' Selecting a feature updates the diagram center to its label and a one-line state: Local lock 'Vault preview unlocked', Readable requests '2 permissions visible', Recovery checklist '3 offline steps', Address controls 'Demo address only'. Add the disclosure 'Illustrative product copy, not a security audit or guarantee.'
   Layout: Use id=security, a full-bleed Midnight background, Paper text and 112px vertical padding. Header spans 7 columns. Below, a 7/5 split places a 560×430px diagram stage left and four stacked feature buttons right. The diagram is original inline SVG: three concentric rounded-square outlines, four small orbiting nodes connected by fine lines, a center generic key icon and a Paper label card. Selected connector and node become Iris Mist; unselected lines are white/18. Feature rows have 20px vertical padding, a number, title and expandable body, separated by white/14 rules. On mobile stack the buttons before a 350×310px diagram and keep body text at 16px for readability.
   Motion: Feature selection draws the active connector using stroke-dashoffset over 360ms and crossfades the center card. Reduced motion shows the final selected state immediately.
6. **Three-step setup** — Eyebrow: 'HOW IT WORKS'. H2: 'From download to demo in three steps.' Step 01, 'Choose your surface': 'Download for macOS or Windows, or open the browser-extension preview.' Step 02, 'Create a local vault': 'Follow the fictional setup flow. Never enter a real password or recovery phrase.' Step 03, 'Explore with sample assets': 'Use the preloaded networks and balances; nothing connects to a blockchain.' Clicking a step updates an adjacent compact preview: platform cards for step 1, three empty checklist marks for step 2, and the six network symbols for step 3. These are explanatory tabs, not an onboarding form.
   Layout: Set id=how-it-works on a Paper section. Use a 5/7 grid with three 112px-high numbered step buttons on the left and a 600×360px Porcelain preview panel on the right. Each step has an IBM Plex Mono number, Space Grotesk title and Manrope body. Active step has an Ink number disc and Iris left rule; inactive steps use Line. Preview panel has 28px radius and 32px internal padding. Mobile stacks three compact cards and places the preview below at full width with 300px minimum height.
   Motion: The active preview fades and rises 8px over 220ms. Checklist marks in step 2 appear with a 70ms stagger, but no infinite animation.
7. **Platform download panel** — Eyebrow: 'LOCAL DEMO DOWNLOAD'. H2: 'Ready for a clearer wallet?' Default body: 'Pick a platform to preview the Velmora setup. This static concept provides a checklist, not a wallet installer.' Buttons: 'Download for macOS', 'Download for Windows' and 'Preview browser extension'. The first two generate and save a plain-text setup checklist locally using Blob and the derived brand slug, with filenames velmora-macos-setup.txt and velmora-windows-setup.txt for the defaults. Checklist text identifies the concept as a demo, lists the three setup steps and warns never to enter a real recovery phrase. The extension button closes the panel dialog if open, selects Browser extension in the product tour and scrolls to ./index.html#wallet. Beneath the buttons show 'No accounts. No installers. Just the interface demo.' After a checklist download, announce 'Setup checklist saved' in a polite live region.
   Layout: Set id=download. Inside the standard container, use an Iris background panel with 28px radius, white text, 64px desktop padding and an oversized Iris Mist radial outline on the right. Left holds eyebrow, 48px H2 and body; right holds three full-width action buttons, Paper with Ink text for the first two and transparent with white/45 border for the third. Add generic Lucide download and panels icons, never operating-system or browser logos. Mobile uses 24px padding, stacked text and buttons, and no decorative element behind the copy.
   Motion: Buttons translate up 2px on hover and show a small download-icon movement over 160ms. The live-region confirmation fades without shifting layout.
8. **FAQ accordion** — H2: 'Before you explore.' Use five accordion items with these exact default questions and answers. 1. 'Is Velmora a real wallet?' — 'No. Velmora is an invented product used to demonstrate this landing page. The interface uses sample data and does not create accounts or sign transactions.' 2. 'Are these real networks and balances?' — 'No. Every network name, symbol, address, asset and balance is fictional demo content.' 3. 'Does the demo store a recovery phrase?' — 'No. It never asks for one. Do not enter real credentials or recovery information.' 4. 'What do the download buttons do?' — 'They save a plain-text setup checklist for the selected platform. No application binary or browser extension is installed.' 5. 'Can I adapt this for another wallet concept?' — 'Yes. Change the content variables to rewrite the brand, product type, audience, call to action and network names. Keep the demo-only disclosures.' Rewrite brand-specific questions and answers when variables change, while preserving these disclosures.
   Layout: Use a Porcelain section with a 4/8 grid: sticky-on-desktop H2 left and accordion right. Each question is a full-width button with 24px vertical padding, Space Grotesk 600 at 20px and a plus icon. Answers have a maximum width of 62 characters, Slate text at 16px/1.7 and 24px bottom padding. First item starts open. Mobile removes the sticky position and stacks heading above the accordion.
   Motion: Animate answer height and plus-to-x rotation over 240ms. Allow multiple items open so comparisons are not lost; reduced motion opens instantly.
9. **Footer** — Show the [BRAND] mark, the line 'A clearer home for digital assets.' and two link groups. Product links: Wallet, Networks and Security. Explore links: How it works, Download and FAQ. All point to their corresponding ./index.html#section anchors. Add the disclosure 'Invented product and sample data. Not financial advice. No wallet services are provided.' Do not add social links, a copyright year or fake company details. Include the optional [CREDIT] footer link only as supplied by the renderer.
   Layout: Use an Ink background with Paper text. The 1280px container has a 6/3/3 desktop grid, 64px vertical padding and a white/15 top rule for the disclosure row. Links are 14px with 36px row heights and visible focus. Mobile uses a single column with 32px gaps and keeps the disclosure legible at 13px/1.6.
   Motion: Only link color and arrow translation on hover/focus; no large animated wordmark.

## Assets
- image: No raster or generated images are used. Build the hero and all product visuals as local HTML/CSS plus original inline SVG. Do not request the provided asset base URL and do not use placeholder-image services.
- icon: Install lucide-react (ISC) and use only generic interface icons for arrows, copy, check, lock, key, download, menu, plus and panels. Draw the six network marks and brand mark as original inline SVG in this project. Record Lucide React, its package URL and ISC license in ASSETS.md; no token, app-store, operating-system or browser logos.
- font: Self-host Space Grotesk Variable from @fontsource-variable/space-grotesk (OFL-1.1), weights 500/600/700, for display. Import local package files and record the package, source, author and OFL license in ASSETS.md.
- font: Self-host Manrope Variable from @fontsource-variable/manrope (OFL-1.1), weights 400/500/600/700, for body and UI. Import local package files and record the package, source, author and OFL license in ASSETS.md.
- font: Self-host IBM Plex Mono from @fontsource/ibm-plex-mono (OFL-1.1), weights 400/500, for balances, indices and technical labels. Import local package files and record the package, source, author and OFL license in ASSETS.md.

## Don'ts
- Do not use real wallet, blockchain, token, exchange or app-store names and logos. The six network names and every symbol must remain invented, and platform buttons use generic icons only.
- Do not copy product interfaces, brand palettes, slogans, illustrations, code or marketing copy from an existing wallet or website. Build every device screen and geometric mark from this specification.
- Do not add live wallet connections, seed-phrase collection, account creation, transaction signing, price feeds, blockchain RPC calls, external APIs or real installer downloads.
- Do not make investment-return promises, display profit percentages or live prices, invent adoption figures, or claim that the product is audited, unhackable, guaranteed safe or financially beneficial.
- Do not present sample balances, addresses, network names, request approvals or downloaded checklists as real services. Keep the demo disclosures visible and never ask for genuine credentials or recovery information.
- Do not use custom commercial fonts, signature icons associated with an existing crypto product, brand mascots, recognizable people, token art or any third-party logo.
- Do not use stock photography, generated portraits, hotlinked images, placeholder-image services, Unsplash, Pexels, Pixabay, Google Images or restricted-license assets; this design needs no raster imagery.
- Do not load fonts, scripts, styles, icons or other assets from a CDN. Self-host the specified Fontsource fonts and bundle all dependencies locally.
- Do not add a backend, server code, API routes, database, authentication, remote form submission, analytics, tracking cookies or third-party embeds. All interactions and downloads must run locally in the browser.
- Do not add smooth-scroll hijacking, perpetual marquees, autoplay carousels, excessive parallax, flashing market motion or animation that ignores prefers-reduced-motion.
- Do not produce anything other than a static dist/ build with relative asset paths. Keep dist/ under 20 MB, minified, with no source maps and no src/ directory copied into it.
- Do not use bare-directory links, external demo-host links or empty href placeholders. Internal navigation must use ./index.html#section targets; demo hostnames are text only and use the reserved .example suffix.
- Do not add SEO metadata blocks, Open Graph, JSON-LD, sitemap code or keyword-stuffed headings. A plain document title derived from [BRAND] and an original local favicon are sufficient.
- Do not show dates, activity timestamps, a copyright year, fake testimonials, fake customer counts or fake company addresses.
- Do not hard-code Velmora or the default network list inside reusable components. Keep all copy and sample data in src/content.ts and rewrite product-specific copy when BRAND, PRODUCT_TYPE, AUDIENCE, PRIMARY_CTA or NETWORK_NAMES changes.
- Do not mention VibeFather in the site except the optional [CREDIT] footer link. All visible copy, labels, sample data and accessible names must be US English.
- Do not ship horizontal overflow, inaccessible click-only divs, keyboard traps or console errors. Verify the complete experience at 1440×900 and 390×844, including menus, tabs, accordions, copy feedback and checklist downloads.

---
— Prompt by VibeFather · https://vibefather.ai/t/crypto-wallet-landing-page · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown

Free for personal projects under CC BY-NC 4.0. Commercial use comes with Pro.