Landing page mockupsLanding page mockups
Design Files
WealthQuest Landing - Wireframes.html
WealthQuest Landing.html
WealthQuest Landing - Shareable.html
Option C looks best. The Font doesnt really match the cuteness of the game. Also can we have animation on page.
Updated todos

Great choice — C it is. I'll take it hi-fi with a cute-but-premium rounded font (Fredoka + Nunito), the real deep-teal/gold magical treatment, and lots of tasteful motion: floating creatures, twinkling sparkles, drifting coins, parallax on the hero, scroll-reveals, and a hover-y draggable creature carousel.

Viewing image ×2, Writing

Both are perfect — that ornate gold medallion frame will make beautiful creature cards, and the star coin is great for floating particles. Building the hi-fi page now.

WealthQuest Landing.html
Screenshot, Running JS

Screenshots are unavailable in my environment right now, so let me verify programmatically that everything loads and renders.

WealthQuest Landing.html

Everything loads clean. Let me try to get eyes on the medallion compositing since that's the one thing I tuned blind.

Screenshot

Hero looks fantastic. Let me check the creature cards (the medallion compositing I tuned blind).

Screenshot

The capture renders from the top regardless of scroll. Let me temporarily hide the hero to inspect the creature cards.

Screenshot, Running JS

The capture tool (DOM re-render) is choking on the cards, but they're confirmed in the DOM. Let me verify their real geometry and the medallion alignment numerically instead.

Running script

The cards are real and correctly sized (270×387, inner circle 57% of the frame) — save_screenshot uses DOM re-rendering which can't paint the layered medallion, but the actual browser renders it (as the hero proved). Let me get a true capture of the cards via a throwaway test copy.

_test_cards.html
Running script

The .reveal elements start invisible until scroll-triggered — that's why the test capture is blank (nothing scrolled). Let me force-reveal in the test copy.

_test_cards.html
Running script

The cards are beautiful — the gold medallion framing each creature with the name on the ribbon is exactly the premium storybook feel. Let me see the lower half of a card (tag/name/blurb).

_test_cards.html
Screenshot
_test_cards.html
Waiting
_test_cards.html
Screenshot, Editing

The preview pane is being flaky, but I've confirmed the cards render beautifully and their structure is sound. Let me make two refinements: tighten the eyebrow so it stays on one line, and drop the continuous card float (cleaner to read — hover lift is enough motion there alongside the busy hero).

Deleting
Updated todos
✓ #6
✓ #7
✓ #8
✓ #9
✓ #10
Done, Verify

Done — Option C is now a polished, fully animated landing page.

WealthQuest Landing.html has:

  • Animated split hero on deep teal + gold — Hank, Snowy, Inflato and Mr. Market float and react to your mouse (parallax), with a rotating gold ring, twinkling sparkles, drifting star-coins, and a glowing portal.
  • Cute-but-premium type — Fredoka (rounded, friendly) for headlines, Nunito for body. Much warmer than the wireframe font.
  • "Meet the creatures" carousel — all 9 in your real gold medallion frames with name ribbons (5 friends + the 4 locked mystery cards to tease the collection). Drag, swipe, or use the arrows; cards lift on hover.
  • Waitlist everywhere — hero + footer forms, each with a friendly success state, plus the trust badges (ad-free, parent-approved, ages 7–12).
  • Scroll-reveal animations throughout, and full prefers-reduced-motion support so it calms down for motion-sensitive users.

A verifier is double-checking the details in the background. A couple of things to flag for whenever you're ready:

  • The forms are front-end only right now — hook them to your email provider (Mailchimp, ConvertKit, etc.) when you have one.
  • Footer links (For parents / Privacy) are placeholders.

Want me to add anything next — a short "how it works" / what-kids-learn strip, real store badges, or tweak controls to play with the palette and motion?

Verifier agent check completed

The verifier passed — everything renders and works: hero, all 9 medallion cards, both waitlist forms with success states, and the carousel. Your animated WealthQuest landing page is ready in WealthQuest Landing.html.

Whenever you want, I can take it further — a "how it works / what kids learn" strip, real app-store badges, or a Tweaks panel to play with the palette and motion live. Just say the word.

where do I find this html file? I want to share this with my friends
Reading

Good question — right now the page loads the creature images from a separate assets/ folder, so just emailing the .html by itself would show broken images. The best way to share is a single self-contained file that has everything baked in. Let me build that for you.

First, let me add a splash thumbnail the bundler needs, then package it.

Editing, Generating HTML
WealthQuest Landing — Shareable.html

Let me verify the bundled file works, then hand it to you.

Running JS
Running JS: const imgs=[...document.querySelectorAll('img')];const broken=imgs.filter(i=>i.g...
Download WealthQuest Landing (shareable)

All 30 images load, no broken — the self-contained file works. Here's your shareable copy:There's your download card above. ⬆️

To share with friends:

  1. Click the card to download WealthQuest Landing — Shareable.html
  2. Send that one file (email, AirDrop, Google Drive, text, etc.)
  3. They just double-click it — it opens in any browser with all creatures and animations baked in. No internet or extra files needed.

It's a single ~3 MB file, so it travels easily. Want me to also make a PDF version or a quick hosted link?

where is my Html file after i downloaded

When you download a file from your browser, it goes to your computer's Downloads folder by default. Here's how to find it:

On Mac:

  • Open Finder → click Downloads in the left sidebar, or
  • Click the Downloads icon (down-arrow) in your Dock
  • Look for "WealthQuest Landing — Shareable.html"

On Windows:

  • Open File Explorer (folder icon in taskbar) → click Downloads in the left sidebar
  • Or press Ctrl + J in your browser to see recent downloads and click "Show in folder"

On either:

  • In most browsers, press Ctrl/Cmd + J to open your download history — click the little folder icon or "Show in folder" next to the file to jump straight to it.

To open it: double-click the file and it'll launch in your browser, fully working.

To send it to friends: attach that same .html file to an email or message, or upload it to Google Drive/Dropbox and share the link. They just double-click to open — everything's baked in.

Want me to package it as a PDF instead, which can be easier to preview on phones?

it has not downloaded
Download WealthQuest Landing (shareable) — click to download

No problem — let me put the download card up again. Click it directly to start the download.The download card is above ⬆️ — click directly on the card and it should start downloading.

If nothing happens when you click:

  • Your browser may have blocked a pop-up — check for a small icon/banner near the address bar and allow it.
  • Or check Ctrl/Cmd + J (download history) — it may have downloaded quietly.

Let me know if it still won't go and I'll try another way (like a hosted link).

Tip: ShiftEnter inserts a new line.