Marketly – Trading platform landing page

What it is

Marketly is a landing page for a trading or market-data product, with the pages that come with it. Its hero is a scroll-pinned 3D Earth turning from the evening light into the night: land and clouds show through a blue veil of air, towns light up one by one as they cross into darkness, and price charts rise off one city's lights and land on another's. As you scroll, the headline drifts away and a product showcase pins in its place.

Everything is built to be re-skinned: every color, size, radius and shadow is a design token, every section is fed by typed mock data, and all the copy lives in one file.

What's included

• The landing page: the 3D Earth hero, a market summary with an intraday chart, featured IPOs, community ideas, indicators and strategies, top stories, market blocks for US stocks, crypto, futures and forex, the economy with a global inflation map and an economic calendar, and brokers
• 8 more pages: Pricing (monthly and yearly), Markets, Ideas, Brokers, Features, News, Sign in and a 404
• The header: transparent over dark surfaces and white over the page, with mega menus, search (Ctrl+K), a language menu and a full-screen menu on phones
• Light and dark themes, with no flash on load
• A data layer (lib/api.ts) over typed mock JSON, ready to point at a real market API
• A README on running it, re-skinning it, and replacing the data and media

Stack

Next.js 16 (App Router, TypeScript), React 19, Tailwind CSS 4, shadcn/ui (Base UI), framer-motion, three.js with React Three Fiber and drei, Embla Carousel, d3-geo and lucide-react.

Requirements

• Node.js 20.9 or later (22 recommended) and pnpm
• WebGL for the 3D Earth; without it, or on low-memory devices, a still picture of the Earth takes its place

How to use it

1. Download the ZIP and unzip it.
2. Run pnpm install, then pnpm dev, and open http://localhost:3000.
3. Make it yours: the name and all the text in data/copy.ts, the colors in styles/themes.css, the logo in components/layout/Logo.tsx.
4. Plug in real data: replace the functions in lib/api.ts with calls to your market API, keeping their types.

Good to know

• Responsive from 390px phones to 1920px screens.
• Accessible: keyboard-friendly menus and carousels, visible focus, and reduced motion respected (no parallax, no rotation).
• Ready for right-to-left languages: set dir="rtl" on <html>.
• The name "Marketly", its logo, the mock data and the generated pictures are placeholders for your own. The Earth textures come from NASA (public domain) and the three.js examples (MIT).